[EuiFlyout] Enable shards for scoping element clicks; Optionally delay close event

[thompsongl]

Summary

#5810 changed the mechanism by which outside clicks are handled in EuiFlyout. The new behavior is more correct, but conflicts with specific cases where outside clicks were previously not truly considered "outside" despite happening on an external element. EuiCollapsibleNav implementing the Elastic pattern is the clearest case of this.

Two solutions to the problem:

1. Enable the shards prop from react-focus-on to specify that certain elements should be considered as a part of the EuiFlyout. In the case of EuiCollapsibleNav that means the element passed to the button prop, which now automatically gets added to the shards array.

EuiFocusTrap already accepted the shards prop by way of ...rest.

2. Conditionally delay the close function firing in EuiFocusTrap until mouseup. This give the proper button time to work and is unnoticeable for normal outside click events.

Before

Screen.Recording.2022-05-03.at.1.03.28.PM.mov

After

Screen.Recording.2022-05-03.at.1.03.51.PM.mov

Checklist

• Checked in Chrome, Safari, Edge, and Firefox
• Props have proper autodocs and playground toggles
• Added documentation
• Checked Code Sandbox works for any docs examples
• Added or updated jest and cypress tests
• Checked for breaking changes and labeled appropriately
• Checked for accessibility including keyboard-only and screenreader modes
• A changelog entry exists and is marked appropriately

[kibanamachine]

Preview documentation changes for this PR: https://eui.elastic.co/pr_5860/

[kibanamachine]

Preview documentation changes for this PR: https://eui.elastic.co/pr_5860/

[cee-chen]

Is there any chance you can take a before/after screencap of the behavior or QA steps? Honestly I'm still not able to repro whatever behavior y'all were seeing on the Elastic docs, not sure if it's because I'm on Firefox.

edit: oh derp, it's clicking the toggle/hamburger button to close 🤪

[kibanamachine]

Preview documentation changes for this PR: https://eui.elastic.co/pr_5860/

[kibanamachine]

Preview documentation changes for this PR: https://eui.elastic.co/pr_5860/

[kibanamachine]

Preview documentation changes for this PR: https://eui.elastic.co/pr_5860/

[kibanamachine]

Preview documentation changes for this PR: https://eui.elastic.co/pr_5860/

[cee-chen]

A few more testing comments, hopefully my last! 🤞

[cee-chen]

Thanks for responding so quickly to my millions of nits! I have some super small prop documentation suggestions, but otherwise this definitely fixes the issue and looks good to me

[kibanamachine]

Preview documentation changes for this PR: https://eui.elastic.co/pr_5860/

[thompsongl]

Thanks, @constancecchen; helpful as always!

[kibanamachine]

Preview documentation changes for this PR: https://eui.elastic.co/pr_5860/