fix(clerk-js,types): Ensure proper checkout plandetails drawer is opened within profile components

[alexcarpenter]

Description

Fixes issue where if two Profile components were rendered at once, the Checkout and PlanDetails drawers would be only portal'd into the first instance on the page.

The PR refactors the drawer functionality to use portalRoot instead of the id to be able to select the closest profile root that we should be rendering within.

I've also updated to use a data attribute vs id to avoid duplicate ids on the page.

BEFORE:

before.mov

AFTER:

after.mov

Fixes COM-688

Checklist

• pnpm test runs as expected.
• pnpm build runs as expected.
• (If applicable) JSDoc comments have been added or updated for any package exports
• (If applicable) Documentation has been updated

Type of change

• 🐛 Bug fix
• 🌟 New feature
• 🔨 Breaking change
• 📖 Refactoring / dependency upgrade / documentation
• other:

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
clerk-js-sandbox	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	May 1, 2025 4:53pm

[changeset-bot]

🦋 Changeset detected

Latest commit: 870c478

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

This PR includes changesets to release 22 packages

Name	Type
@clerk/clerk-js	Patch
@clerk/types	Patch
@clerk/chrome-extension	Patch
@clerk/clerk-expo	Patch
@clerk/agent-toolkit	Patch
@clerk/astro	Patch
@clerk/backend	Patch
@clerk/elements	Patch
@clerk/expo-passkeys	Patch
@clerk/express	Patch
@clerk/fastify	Patch
@clerk/localizations	Patch
@clerk/nextjs	Patch
@clerk/nuxt	Patch
@clerk/react-router	Patch
@clerk/clerk-react	Patch
@clerk/remix	Patch
@clerk/shared	Patch
@clerk/tanstack-react-start	Patch
@clerk/testing	Patch
@clerk/themes	Patch
@clerk/vue	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

[aeliox]

LGTM