Uxd 1757 Popover performance, stop content rendering to dom when closed

[tristanjasper]

Purpose 🚀

Refactor Popover to only render content (& Tip subcomponent) when popover is open and visible. This is to improve overall rendering performance on a page when

• Multiple popovers exist
• The content in the popovers contain complex components

Reducing dom nodes that are not visible to the user will improve overall performance for the browser. This change also makes testing easier as previously multiple nodes in popover content elements would be found.

Changes include

• Wrapping existing Popover Content component with Transition component to detect opacity changes
• Adding new isAlwaysOnDom prop to Content component so that it can still be rendered the current way for backwards compatibility

Additional changes

Updates all RTL/Cypress tests for new approach Fixes some other minor bugs

Notes ✏️

details of code change / secondary purposes of this PR

Updates 📦

If you have changed a component's source code (not stories, specs, or docs), before merging your branch run yarn changeset. This will prompt you to:

• indicate if changes were patch/minor/major for each modified package
• enter a release message

Storybook 📕

http://storybooks.highbond-s3.com/paprika/your-branch-name

Screenshots 📸

optional but highly recommended

References 🔗

relevant Jira ticket / GitHub issues

[changeset-bot[bot]]

🦋 Changeset detected

Latest commit: 379e18c7df1147b4fcd9b80c84b4367cb033d0ee

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

This PR includes changesets to release 23 packages

| Name | Type | | --------------------------- | ----- | | @paprika/action-bar | Major | | @paprika/calendar | Major | | @paprika/date-picker | Major | | @paprika/inline-editors | Major | | @paprika/list-box | Major | | @paprika/list-box-with-tags | Major | | @paprika/overflow-menu | Major | | @paprika/popover | Major | | @paprika/search | Major | | @paprika/status-tracker | Major | | @paprika/time-picker | Major | | @paprika/date-range-picker | Patch | | @paprika/filter | Patch | | @paprika/list-box-browser | Patch | | @paprika/data-header | Patch | | @paprika/table | Patch | | @paprika/breadcrumbs | Patch | | @paprika/confirmation | Patch | | @paprika/copy-input | Patch | | @paprika/data-field | Patch | | @paprika/form-element | Patch | | @paprika/side-navigation | 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