fix(Toolbar): allow popper props in the overflow item

[assuncaocharles]

Pull request checklist

• Addresses an existing issue: Fixes Toolbar’s overflowItem does not apply positioning props when provided #14721
• Include a change request file using $ yarn change

Description of changes

This PR allows to set the popper properties for menu in the OverflowItem.

Usage:

<Toolbar
      aria-label="Toolbar overflow menu"
      items={toolbarItems}
      overflow
      overflowOpen={overflowOpen}
      overflowItem={{ title: 'More', menu: { popper: { offset: [0, 4], position: 'below' }} }}
      onOverflowOpenChange={(e, { overflowOpen }) => {
        setOverflowOpen(overflowOpen)
      }}
      getOverflowItems={startIndex => itemData.slice(startIndex)}
    />

Focus areas to test

(optional)

[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 68bfaa8:

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
hardcore-bush-xtwtf	Issue #14721

[msft-github-bot]

Perf Analysis

No significant results to display.

All results

Scenario	Render type	Master Ticks	PR Ticks	Iterations	Status
BaseButton	mount	873	899	5000
ButtonNext	mount	698	697	5000
Checkbox	mount	1578	1605	5000
CheckboxBase	mount	1301	1314	5000
CheckboxNext	mount	1510	1518	5000
ChoiceGroup	mount	4982	4923	5000
ChoiceGroupNext	mount	4925	4962	5000
ComboBox	mount	905	898	1000
CommandBar	mount	7627	7590	1000
ContextualMenu	mount	14231	14242	1000
DefaultButton	mount	1120	1103	5000
DetailsRow	mount	3560	3523	5000
DetailsRowFast	mount	3558	3577	5000
DetailsRowNoStyles	mount	3344	3391	5000
Dialog	mount	1493	1444	1000
DocumentCardTitle	mount	1868	1872	1000
Dropdown	mount	2574	2641	5000
FocusZone	mount	1826	1824	5000
IconButton	mount	1694	1731	5000
Label	mount	329	360	5000
Link	mount	435	436	5000
LinkNext	mount	486	462	5000
MenuButton	mount	1445	1468	5000
MessageBar	mount	2126	2122	5000
MessageBarNext	mount	2046	2048	5000
Nav	mount	3224	3262	1000
OverflowSet	mount	1441	1405	5000
OverflowSetNext	mount	1047	1039	5000
Panel	mount	1461	1474	1000
Persona	mount	842	826	1000
Pivot	mount	1430	1453	1000
PivotNext	mount	1399	1417	1000
PrimaryButton	mount	1251	1281	5000
SearchBox	mount	1273	1281	5000
SearchBoxNext	mount	1306	1340	5000
Shimmer	mount	2540	2634	5000
ShimmerNext	mount	2562	2588	5000
Slider	mount	1531	1515	5000
SliderNext	mount	1914	1916	5000
SpinButton	mount	4957	4975	5000
SpinButtonNext	mount	5046	5074	5000
Spinner	mount	435	431	5000
SplitButton	mount	3192	3176	5000
Stack	mount	541	524	5000
StackWithIntrinsicChildren	mount	1968	1983	5000
StackWithTextChildren	mount	4959	4968	5000
SwatchColorPicker	mount	10275	10288	5000
SwatchColorPickerNext	mount	10381	11178	5000
TagPicker	mount	2739	2838	5000
TeachingBubble	mount	50815	50800	5000
TeachingBubbleNext	mount	50831	50364	5000
Text	mount	418	428	5000
TextField	mount	1404	1404	5000
ThemeProvider	mount	4521	4608	5000
ThemeProvider	virtual-rerender	483	465	5000
Toggle	mount	832	834	5000
ToggleNext	mount	850	814	5000
button	mount	113	115	5000

Perf Analysis (Fluent)

⚠️ 6 potential perf regressions detected

Potential regressions comparing to master

Scenario	Current PR Ticks	Baseline Ticks	Ratio	Regression Analysis
ButtonOverridesMissPerf.default	1736	47	36.94:1	analysis
ButtonUseCssNestingPerf.default	1086	44	24.68:1	analysis
ButtonUseCssPerf.default	843	44	19.16:1	analysis
ChatWithPopoverPerf.default	489	464	1.05:1	analysis
ListCommonPerf.default	656	942	0.7:1	analysis
ListNestedPerf.default	586	874	0.67:1	analysis

Perf comparison

Status	Scenario	Fluent TPI	Fabric TPI	Ratio	Iterations	Ticks
🎯	Avatar.Fluent	0.44	0.48	0.92:1	2000	881
🦄	Button.Fluent	0.12	0.2	0.6:1	5000	599
🔧	Checkbox.Fluent	0.67	0.35	1.91:1	1000	674
🎯	Dialog.Fluent	0.16	0.22	0.73:1	5000	797
🔧	Dropdown.Fluent	2.95	0.47	6.28:1	1000	2953
🔧	Icon.Fluent	0.16	0.06	2.67:1	5000	782
🎯	Image.Fluent	0.08	0.11	0.73:1	5000	392
🔧	Slider.Fluent	1.64	0.36	4.56:1	1000	1635
🔧	Text.Fluent	0.08	0.04	2:1	5000	377
🦄	Tooltip.Fluent	0.12	18.05	0.01:1	5000	583

🔧 Needs work     🎯 On target     🦄 Amazing

Perf tests with no regressions

Scenario	Current PR Ticks	Baseline Ticks	Ratio
PortalMinimalPerf.default	166	123	1.35:1
ButtonMinimalPerf.default	196	161	1.22:1
SegmentMinimalPerf.default	375	311	1.21:1
DividerMinimalPerf.default	400	337	1.19:1
GridMinimalPerf.default	364	308	1.18:1
HeaderMinimalPerf.default	393	332	1.18:1
TextMinimalPerf.default	385	327	1.18:1
AttachmentMinimalPerf.default	175	149	1.17:1
BoxMinimalPerf.default	394	337	1.17:1
LabelMinimalPerf.default	449	385	1.17:1
LayoutMinimalPerf.default	430	367	1.17:1
Button.Fluent	599	516	1.16:1
Text.Fluent	377	324	1.16:1
RadioGroupMinimalPerf.default	475	414	1.15:1
ReactionMinimalPerf.default	430	373	1.15:1
RefMinimalPerf.default	236	206	1.15:1
Icon.Fluent	782	678	1.15:1
Image.Fluent	392	341	1.15:1
ListMinimalPerf.default	515	450	1.14:1
StatusMinimalPerf.default	742	651	1.14:1
AccordionMinimalPerf.default	164	145	1.13:1
SkeletonMinimalPerf.default	441	391	1.13:1
FlexMinimalPerf.default	308	274	1.12:1
Tooltip.Fluent	583	520	1.12:1
FormMinimalPerf.default	439	394	1.11:1
ImageMinimalPerf.default	404	365	1.11:1
TextAreaMinimalPerf.default	502	451	1.11:1
TableMinimalPerf.default	433	394	1.1:1
MenuMinimalPerf.default	901	823	1.09:1
Dialog.Fluent	797	732	1.09:1
ChatDuplicateMessagesPerf.default	438	407	1.08:1
DialogMinimalPerf.default	797	737	1.08:1
PopupMinimalPerf.default	719	663	1.08:1
TreeMinimalPerf.default	887	824	1.08:1
VideoMinimalPerf.default	657	610	1.08:1
Checkbox.Fluent	674	623	1.08:1
AnimationMinimalPerf.default	423	395	1.07:1
CardMinimalPerf.default	567	531	1.07:1
ProviderMergeThemesPerf.default	2064	1925	1.07:1
TooltipMinimalPerf.default	822	771	1.07:1
AvatarMinimalPerf.default	474	447	1.06:1
ChatMinimalPerf.default	639	602	1.06:1
ButtonSlotsPerf.default	622	594	1.05:1
InputMinimalPerf.default	1338	1270	1.05:1
ItemLayoutMinimalPerf.default	1286	1221	1.05:1
LoaderMinimalPerf.default	754	721	1.05:1
ProviderMinimalPerf.default	980	936	1.05:1
ToolbarMinimalPerf.default	975	928	1.05:1
AttachmentSlotsPerf.default	1159	1117	1.04:1
CheckboxMinimalPerf.default	2885	2781	1.04:1
HeaderSlotsPerf.default	792	758	1.04:1
CarouselMinimalPerf.default	467	453	1.03:1
MenuButtonMinimalPerf.default	1579	1537	1.03:1
TableManyItemsPerf.default	2188	2129	1.03:1
CustomToolbarPrototype.default	3906	3776	1.03:1
AlertMinimalPerf.default	326	321	1.02:1
DropdownMinimalPerf.default	2983	2931	1.02:1
EmbedMinimalPerf.default	1912	1870	1.02:1
SplitButtonMinimalPerf.default	3769	3701	1.02:1
IconMinimalPerf.default	668	657	1.02:1
Avatar.Fluent	881	861	1.02:1
DropdownManyItemsPerf.default	752	744	1.01:1
Dropdown.Fluent	2953	2915	1.01:1
SliderMinimalPerf.default	1618	1620	1:1
Slider.Fluent	1635	1632	1:1
TreeWith60ListItems.default	207	211	0.98:1
ListWith60ListItems.default	946	1073	0.88:1

[size-auditor]

Asset size changes

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

Baseline commit: aaf015937ea65f9afbb8443f45c35c9d1dadc22d (build)

[msft-github-bot]

Hello @assuncaocharles!

Because this pull request has the AutoMerge label, I will be glad to assist with helping to merge this pull request once all check-in policies pass.

Do note that I've been instructed to only help merge pull requests of this repository that have been opened for at least 8 hours, a condition that will be fulfilled in about 5 hours 16 minutes. No worries though, I will be back when the time is right! 😉

p.s. you can customize the way I help with merging this pull request, such as holding this pull request until a specific person approves. Simply @mention me (@msft-github-bot) and give me an instruction to get started! Learn more here.