RNG-271 Add getActiveElement helper to support web components 🐐

[mikrotron]

Purpose 🚀

Added getActiveElement() helper that can pierce the shadow DOM.

Notes ✏️

• Refactored <CopyInput>, <ListBox>, <OverflowMenu>, <Popover>, <TimePicker>, to use the new getActiveElement() instead of document.activeElement.
• The motivation for this comes specifically from a bug when wrapping the <GlobalNavigation> in a web component where the <OverflowMenu> automatically closes after being open by keyboard.
• A "Web Component" story has been added to the "Sandbox" section of the <OverflowMenu> in Storybook to verify the fix.
• An unresolved issue has been noticed by not fixed – the focus ring is not visible on the <Button> component when wrapped in a web component because the following selector is not applied when included within a shadow DOM: https://github.com/acl-services/paprika/blob/master/packages/Button/src/Button.styles.js#L58

Storybook 📕

http://storybooks.highbond-s3.com/paprika/RNG-271--activeelement-helper/?path=/story/buttons-overflowmenu-backyard-sandbox--web-component

Screenshots 📸

References 🔗

https://aclgrc.atlassian.net/browse/RNG-271

[changeset-bot[bot]]

🦋 Changeset detected

Latest commit: da6878a4543b172e6ad4f968c6af735aafc36de1

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 47 packages

| Name | Type | | --------------------------- | ----- | | @paprika/copy-input | Patch | | @paprika/list-box | Patch | | @paprika/overflow-menu | Patch | | @paprika/popover | Patch | | @paprika/time-picker | Patch | | @paprika/helpers | Minor | | @paprika/inline-editors | Patch | | @paprika/action-bar | Patch | | @paprika/avatar | Patch | | @paprika/breadcrumbs | Patch | | @paprika/button | Patch | | @paprika/button-group | Patch | | @paprika/calendar | Patch | | @paprika/card | Patch | | @paprika/checkbox | Patch | | @paprika/collapsible-card | Patch | | @paprika/confirmation | Patch | | @paprika/counter | Patch | | @paprika/data-grid | Patch | | @paprika/data-table | Patch | | @paprika/date-input | Patch | | @paprika/date-picker | Patch | | @paprika/date-range-picker | Patch | | @paprika/form-element | Patch | | @paprika/input | Patch | | @paprika/list-box-browser | Patch | | @paprika/list-box-with-tags | Patch | | @paprika/modal | Patch | | @paprika/notification-card | Patch | | @paprika/overlay | Patch | | @paprika/pagination | Patch | | @paprika/panel | Patch | | @paprika/radio | Patch | | @paprika/resize-detector | Patch | | @paprika/select | Patch | | @paprika/side-navigation | Patch | | @paprika/sortable | Patch | | @paprika/spinner | Patch | | @paprika/status-tracker | Patch | | @paprika/switch | Patch | | @paprika/table | Patch | | @paprika/tabs | Patch | | @paprika/tag | Patch | | @paprika/takeover | Patch | | @paprika/textarea | Patch | | @paprika/toast | Patch | | @paprika/uploader | Patch |

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR