feat(ui): update Portal

[franzheidl]

feat(ui): update Portal

Make our portals more robust and isolate them against each other. Avoid conflicts and make positioning portaled content more robust.
We need this as a basis to migrate more components to use the portal (ContextMenu, DateTimePicker), so we can then address positioning issues we currently have on a common basis.

This PR introduces individual parent divs per each individual portal in a parent root element that is rendered by PortalProvider:

<div class="juno-portal-root" id="juno-portal-root">
    <div class="juno-portal">
        <!-- portal is mounted here -->
    </div>
        <div class="juno-portal">
        <!-- another portal is mounted here -->
    </div>
</div>

Users can use Portals in the same way as before, i.e. either as a <PortalProvider.Portal /> component, or by calling the usePortalRef hook and create a portal in their components manually that mounts at the node returned by the hook.

// Component
<PortalProvider>
    <PortalProvider.Portal>
        <MyComponent />
    <PortalProvider.Portal>
</PortalProvider>

// Hook
const portalNode = usePortalRef

createPortal(<MyComponent />, portalNode)

AppShell makes sure PortalProvider is rendered in the correct place of the component tree so that all elements rendered into portals have access to the Juno styles.

PortalProvider also exports a PortalContext that contains a ref to the portal root node as its sole value.

Changes Made

• Update PortalProvider to render a portal root element in our apps.
• Update PortalProvider.Portal component and usePortalRef hook to wrap portaled content into individual divs

Related Issues

• Issue 1: [link to issue]

Screenshots (if applicable)

Testing Instructions

1. npm i
2. npm run TASK

Checklist

• I have performed a self-review of my code.
• I have commented my code, particularly in hard-to-understand areas.
• I have added tests that prove my fix is effective or that my feature works.
• New and existing unit tests pass locally with my changes.
• I have made corresponding changes to the documentation (if applicable).
• My changes generate no new warnings or errors.

[changeset-bot]

⚠️ No Changeset found

Latest commit: 2b4c0bf

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

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

[github-actions]

PR Preview Action v1.4.8
Preview removed because the pull request was closed.
2024-10-08 09:16 UTC

[barsukov]

This component is kinda blocking us for typescript migration cause staff that used there, also used in many other spots. If you do not mind I would easily transfer it to typescript as well.

[barsukov]

We have to move on and make this as a PR, would be nice to transfer it to TS as soon as possible if you need any support please let me know.

[andypf]

lgtm

[barsukov]

LGTM