feat(ui): Add experimental mosaic components export#9045
Open
alexcarpenter wants to merge 14 commits into
Open
feat(ui): Add experimental mosaic components export#9045alexcarpenter wants to merge 14 commits into
alexcarpenter wants to merge 14 commits into
Conversation
🦋 Changeset detectedLatest commit: c1e7c00 The changes in this PR will be included in the next version bump. This PR includes changesets to release 3 packages
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 |
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
Contributor
|
No actionable comments were generated in the recent review. 🎉 ℹ️ Recent review info⚙️ Run configurationConfiguration used: Repository YAML (base), Repository UI (inherited) Review profile: CHILL Plan: Pro Plus Run ID: 📒 Files selected for processing (28)
💤 Files with no reviewable changes (17)
✅ Files skipped from review due to trivial changes (4)
🚧 Files skipped from review as they are similar to previous changes (3)
📝 WalkthroughWalkthroughThe Mosaic organization-profile flow is restructured: delete/leave organization machines, controllers, and views are renamed and relocated under ChangesOrganization Profile section/controller restructure
Estimated code review effort: 4 (Complex) | ~60 minutes MosaicProvider insertion point and CSS reset
Public experimental/mosaic export surface
Swingset storybook/registry/docs restructuring
Estimated code review effort: 3 (Moderate) | ~25 minutes Sequence Diagram(s)sequenceDiagram
participant View as OrganizationProfileDeleteSectionView
participant Controller as useOrganizationProfileDeleteSectionController
participant Machine as organizationProfileDeleteSectionMachine
participant Router as useMosaicRouter
View->>Controller: send CONFIRM
Controller->>Machine: destroyOrganization()
Machine-->>Controller: resolved
Controller->>Router: navigate(afterLeaveUrl)
sequenceDiagram
participant View as OrganizationProfileLeaveSectionView
participant Controller as useOrganizationProfileLeaveSectionController
participant User as user.leaveOrganization
participant Router as useMosaicRouter
View->>Controller: send CONFIRM
Controller->>User: leaveOrganization(orgId)
User-->>Controller: resolved
Controller->>Controller: userMemberships.revalidate()
Controller->>Router: navigate(afterLeaveUrl)
Possibly related PRs
Suggested reviewers: Poem
🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (4 passed)
✨ Finishing Touches📝 Generate docstrings
Comment |
@clerk/astro
@clerk/backend
@clerk/chrome-extension
@clerk/clerk-js
@clerk/electron
@clerk/electron-passkeys
@clerk/eslint-plugin
@clerk/expo
@clerk/expo-passkeys
@clerk/express
@clerk/fastify
@clerk/hono
@clerk/localizations
@clerk/nextjs
@clerk/nuxt
@clerk/react
@clerk/react-router
@clerk/shared
@clerk/tanstack-react-start
@clerk/testing
@clerk/ui
@clerk/upgrade
@clerk/vue
commit: |
Member
Author
|
!snapshot |
Member
Author
|
!snapshot |
This comment has been minimized.
This comment has been minimized.
Member
Author
|
!snapshot |
This comment has been minimized.
This comment has been minimized.
Member
Author
|
!snapshot |
This comment has been minimized.
This comment has been minimized.
This comment has been minimized.
This comment has been minimized.
Member
Author
|
!snapshot |
This comment has been minimized.
This comment has been minimized.
Member
Author
|
!snapshot |
Contributor
|
Hey @alexcarpenter - the snapshot version command generated the following package versions:
Tip: Use the snippet copy button below to quickly install the required packages. npm i @clerk/astro@3.4.11-snapshot.v20260630204952 --save-exact
npm i @clerk/backend@3.9.1-snapshot.v20260630204952 --save-exact
npm i @clerk/chrome-extension@3.1.47-snapshot.v20260630204952 --save-exact
npm i @clerk/clerk-js@6.23.1-snapshot.v20260630204952 --save-exact
npm i @clerk/electron@0.0.8-snapshot.v20260630204952 --save-exact
npm i @clerk/electron-passkeys@0.0.4-snapshot.v20260630204952 --save-exact
npm i @clerk/eslint-plugin@0.2.1-snapshot.v20260630204952 --save-exact
npm i @clerk/expo@3.6.5-snapshot.v20260630204952 --save-exact
npm i @clerk/expo-passkeys@1.1.13-snapshot.v20260630204952 --save-exact
npm i @clerk/express@2.1.35-snapshot.v20260630204952 --save-exact
npm i @clerk/fastify@3.1.45-snapshot.v20260630204952 --save-exact
npm i @clerk/headless@0.0.7-snapshot.v20260630204952 --save-exact
npm i @clerk/hono@0.1.45-snapshot.v20260630204952 --save-exact
npm i @clerk/localizations@4.12.1-snapshot.v20260630204952 --save-exact
npm i @clerk/msw@0.0.43-snapshot.v20260630204952 --save-exact
npm i @clerk/nextjs@7.5.12-snapshot.v20260630204952 --save-exact
npm i @clerk/nuxt@2.6.11-snapshot.v20260630204952 --save-exact
npm i @clerk/react@6.11.4-snapshot.v20260630204952 --save-exact
npm i @clerk/react-router@3.5.4-snapshot.v20260630204952 --save-exact
npm i @clerk/shared@4.23.1-snapshot.v20260630204952 --save-exact
npm i @clerk/swingset@0.0.13-snapshot.v20260630204952 --save-exact
npm i @clerk/tanstack-react-start@1.4.12-snapshot.v20260630204952 --save-exact
npm i @clerk/testing@2.2.2-snapshot.v20260630204952 --save-exact
npm i @clerk/ui@1.24.1-snapshot.v20260630204952 --save-exact
npm i @clerk/upgrade@2.0.5-snapshot.v20260630204952 --save-exact
npm i @clerk/vue@2.4.11-snapshot.v20260630204952 --save-exact |
alexcarpenter
commented
Jun 30, 2026
Comment on lines
+6
to
+10
| import { expandConditions } from './conditions'; | ||
| import { useMosaicTheme } from './MosaicProvider'; | ||
| import { resolveSlotClassName, resolveSlotCss } from './resolveSlot'; | ||
| import { defaultMosaicVariables, resolveVariables } from './variables'; | ||
| import type { MosaicTheme } from './variables'; | ||
| import { defaultMosaicVariables, resolveVariables } from './variables'; |
Member
Author
There was a problem hiding this comment.
just a sorting change
…imental exports Rename the experimental Mosaic parts and their files so the source symbols match how they are exported from @clerk/ui/experimental/mosaic: - DeleteOrganization -> OrganizationProfileDeleteSection - LeaveOrganization -> OrganizationProfileLeaveSection - OrganizationProfileGeneral -> OrganizationProfileGeneralPanel - OrganizationProfile unchanged The rename cascades through each part's view, controller, and machine symbols and their co-located tests. The experimental entry no longer needs to alias on re-export. In @clerk/swingset, flatten the AIO/Panels/Sections sidebar groups into a single Organization group, and render each entry by its export name (components as <Name />, hooks as useName()), wrapping long names instead of overflowing. Public export names from @clerk/ui/experimental/mosaic are unchanged, so there is no user-facing impact.
Contributor
API Changes Report
Summary
@clerk/uiCurrent version: 1.24.0 Subpath
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
Contributor
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (5)
packages/ui/src/experimental/mosaic.ts (1)
3-40: 🧹 Nitpick | 🔵 TrivialDocs team should review this public entrypoint JSDoc.
This module-level doc will surface in generated Clerk Docs, so please confirm the RSC/client-boundary wording and exported surface stay aligned with the intended public API.
As per path instructions, public/reference-facing APIs may appear in generated docs.
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@packages/ui/src/experimental/mosaic.ts` around lines 3 - 40, The module JSDoc in Mosaic’s experimental entrypoint needs a docs review to ensure its client/RSC boundary explanation and exported API description match the actual public surface. Update the comment around the top-level exports from mosaic.ts so it accurately reflects what consumers can import and how OrganizationProfile versus the flat panel/section exports should be used, keeping the wording aligned with the intended Clerk Docs output.Source: Path instructions
packages/ui/src/mosaic/sections/organization-profile-delete-section.tsx (1)
6-18: 📐 Maintainability & Code Quality | 🔵 Trivial | ⚡ Quick winConsider adding JSDoc for this public flat export.
OrganizationProfileDeleteSectionis one of the flat exports intended for direct RSC usage per the PR summary. Since Clerk Docs generates reference pages from JSDoc on public/reference-facing APIs, consider documenting this component (purpose, usage note about requiringMosaicProvider, etc.) so it renders correctly in generated docs.As per path instructions, "If a PR adds or changes public/reference-facing API surface area, check whether the corresponding JSDoc is present, accurate, and aligned with the implementation" and reference-facing changes "may need Docs-team review."
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@packages/ui/src/mosaic/sections/organization-profile-delete-section.tsx` around lines 6 - 18, Add JSDoc to the public flat export OrganizationProfileDeleteSection so Docs can generate a reference page for it. Document its purpose, the direct RSC usage intent, and the requirement that it be rendered within MosaicProvider, keeping the description aligned with the implementation and other reference-facing exports in this area.Source: Path instructions
packages/ui/src/mosaic/aio/organization-profile.tsx (1)
9-30: 📐 Maintainability & Code Quality | 🔵 Trivial | ⚡ Quick winAdd JSDoc on the
OrganizationProfilecompound export.
OrganizationProfileis the primary public export of the newexperimental/mosaicentrypoint (compound with.GeneralPanel,.LeaveSection,.DeleteSection). Since it's reference-facing, consider adding a JSDoc block (purpose, requiredMosaicProviderancestor,'use client'requirement noted in the PR description, and documenting the attached parts) so generated docs reflect this API accurately.As per path instructions, "If a PR adds or changes public/reference-facing API surface area, check whether the corresponding JSDoc is present, accurate, and aligned with the implementation."
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@packages/ui/src/mosaic/aio/organization-profile.tsx` around lines 9 - 30, Add a JSDoc block to the public OrganizationProfile export so the reference docs capture this compound API accurately. Document that OrganizationProfile is the primary experimental/mosaic entrypoint, that it requires a MosaicProvider ancestor and a client-only environment, and list the attached compound parts (GeneralPanel, LeaveSection, DeleteSection). Place the comment on the OrganizationProfile binding in organization-profile.tsx so it stays aligned with the implementation and its Object.assign-based export shape.Source: Path instructions
packages/ui/src/mosaic/panels/organization-profile-general-panel.tsx (1)
7-14: 📐 Maintainability & Code Quality | 🔵 Trivial | ⚡ Quick winConsider adding JSDoc for this public flat export.
Same as
OrganizationProfileDeleteSection—OrganizationProfileGeneralPanelis one of the flat exports intended for direct RSC usage. Documenting it would help keep generated reference docs accurate for this new public surface.As per path instructions, reference-facing exports should have JSDoc so generated docs reflect the implementation.
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@packages/ui/src/mosaic/panels/organization-profile-general-panel.tsx` around lines 7 - 14, Add JSDoc to the public flat export OrganizationProfileGeneralPanel so generated reference docs include it for direct RSC usage. Update the function declaration in OrganizationProfileGeneralPanel to include a concise descriptive comment, matching the documentation style used by OrganizationProfileDeleteSection and other reference-facing exports.Source: Path instructions
packages/ui/src/mosaic/sections/organization-profile-delete-section.controller.tsx (1)
23-42: 📐 Maintainability & Code Quality | 🔵 Trivial | ⚡ Quick winDuplicate post-action navigation logic vs. leave controller.
The revalidate + fire-and-forget
router.navigate(afterLeaveUrl)block (Lines 36-42) is duplicated nearly verbatim inorganization-profile-leave-section.controller.tsx. Consider extracting a small shared hook (e.g.,useAfterOrgActionNavigate(afterLeaveUrl)) since more sections are being added to this namespace.♻️ Sketch of a shared helper
// packages/ui/src/mosaic/hooks/useAfterOrgActionNavigate.ts export function useAfterOrgActionNavigate() { const router = useMosaicRouter(); const afterLeaveUrl = useMosaicEnvironment()?.displayConfig.afterLeaveOrganizationUrl; return () => { if (afterLeaveUrl) { void router.navigate(afterLeaveUrl); } }; }🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@packages/ui/src/mosaic/sections/organization-profile-delete-section.controller.tsx` around lines 23 - 42, The post-action navigation/revalidate logic inside useOrganizationProfileDeleteSectionController is duplicated in the leave controller, so extract the shared “after org action” behavior into a reusable hook or helper and call it from both controllers. Keep the existing destroy/revalidate flow in organizationProfileDeleteSectionMachine’s context, but move the afterLeaveUrl lookup and fire-and-forget router.navigate behavior into a shared function such as useAfterOrgActionNavigate so future organization sections can reuse it.
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@packages/ui/src/mosaic/__tests__/MosaicProvider.test.tsx`:
- Around line 85-94: The MosaicProvider reset test only covers the unlayered CSS
path; extend the existing test around MosaicProvider/styleText to also assert
the layered reset output when cssLayerName is provided and that the nonce value
is forwarded to the generated style tag. Use the existing `MosaicProvider`
render setup and `styleText()` assertions to verify both the wrapped CSS branch
and nonce propagation, alongside the current `:where([data-cl-slot])` reset
checks.
---
Nitpick comments:
In `@packages/ui/src/experimental/mosaic.ts`:
- Around line 3-40: The module JSDoc in Mosaic’s experimental entrypoint needs a
docs review to ensure its client/RSC boundary explanation and exported API
description match the actual public surface. Update the comment around the
top-level exports from mosaic.ts so it accurately reflects what consumers can
import and how OrganizationProfile versus the flat panel/section exports should
be used, keeping the wording aligned with the intended Clerk Docs output.
In `@packages/ui/src/mosaic/aio/organization-profile.tsx`:
- Around line 9-30: Add a JSDoc block to the public OrganizationProfile export
so the reference docs capture this compound API accurately. Document that
OrganizationProfile is the primary experimental/mosaic entrypoint, that it
requires a MosaicProvider ancestor and a client-only environment, and list the
attached compound parts (GeneralPanel, LeaveSection, DeleteSection). Place the
comment on the OrganizationProfile binding in organization-profile.tsx so it
stays aligned with the implementation and its Object.assign-based export shape.
In `@packages/ui/src/mosaic/panels/organization-profile-general-panel.tsx`:
- Around line 7-14: Add JSDoc to the public flat export
OrganizationProfileGeneralPanel so generated reference docs include it for
direct RSC usage. Update the function declaration in
OrganizationProfileGeneralPanel to include a concise descriptive comment,
matching the documentation style used by OrganizationProfileDeleteSection and
other reference-facing exports.
In
`@packages/ui/src/mosaic/sections/organization-profile-delete-section.controller.tsx`:
- Around line 23-42: The post-action navigation/revalidate logic inside
useOrganizationProfileDeleteSectionController is duplicated in the leave
controller, so extract the shared “after org action” behavior into a reusable
hook or helper and call it from both controllers. Keep the existing
destroy/revalidate flow in organizationProfileDeleteSectionMachine’s context,
but move the afterLeaveUrl lookup and fire-and-forget router.navigate behavior
into a shared function such as useAfterOrgActionNavigate so future organization
sections can reuse it.
In `@packages/ui/src/mosaic/sections/organization-profile-delete-section.tsx`:
- Around line 6-18: Add JSDoc to the public flat export
OrganizationProfileDeleteSection so Docs can generate a reference page for it.
Document its purpose, the direct RSC usage intent, and the requirement that it
be rendered within MosaicProvider, keeping the description aligned with the
implementation and other reference-facing exports in this area.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Repository YAML (base), Repository UI (inherited)
Review profile: CHILL
Plan: Pro Plus
Run ID: e135a058-7b33-4d86-98fd-ad4eaf44879e
📒 Files selected for processing (51)
.changeset/open-heads-brush.mdpackages/swingset/src/components/Composition.tsxpackages/swingset/src/components/DocsViewer.tsxpackages/swingset/src/components/app-sidebar.tsxpackages/swingset/src/lib/registry.tspackages/swingset/src/stories/delete-organization.stories.tsxpackages/swingset/src/stories/leave-organization.stories.tsxpackages/swingset/src/stories/organization-profile-delete-section.mdxpackages/swingset/src/stories/organization-profile-delete-section.stories.tsxpackages/swingset/src/stories/organization-profile-general-panel.mdxpackages/swingset/src/stories/organization-profile-general-panel.stories.tsxpackages/swingset/src/stories/organization-profile-general.mdxpackages/swingset/src/stories/organization-profile-general.stories.tsxpackages/swingset/src/stories/organization-profile-leave-section.mdxpackages/swingset/src/stories/organization-profile-leave-section.stories.tsxpackages/swingset/src/stories/organization-profile.mdxpackages/swingset/src/stories/organization-profile.stories.tsxpackages/ui/package.jsonpackages/ui/src/experimental/__tests__/mosaic.test.tsxpackages/ui/src/experimental/mosaic.tspackages/ui/src/mosaic/MosaicProvider.tsxpackages/ui/src/mosaic/__tests__/MosaicProvider.test.tsxpackages/ui/src/mosaic/aio/__tests__/organization-profile.controller.test.tsxpackages/ui/src/mosaic/aio/__tests__/organization-profile.test.tsxpackages/ui/src/mosaic/aio/organization-profile.controller.tsxpackages/ui/src/mosaic/aio/organization-profile.tsxpackages/ui/src/mosaic/hooks/useMosaicEnvironment.tspackages/ui/src/mosaic/hooks/useMosaicRouter.tspackages/ui/src/mosaic/machine/__tests__/delete-organization-machine.tspackages/ui/src/mosaic/panels/organization-profile-general-panel-view.tsxpackages/ui/src/mosaic/panels/organization-profile-general-panel.tsxpackages/ui/src/mosaic/panels/organization-profile-general.tsxpackages/ui/src/mosaic/sections/__tests__/organization-profile-delete-section.controller.test.tsxpackages/ui/src/mosaic/sections/__tests__/organization-profile-delete-section.machine.test.tspackages/ui/src/mosaic/sections/__tests__/organization-profile-delete-section.view.test.tsxpackages/ui/src/mosaic/sections/__tests__/organization-profile-leave-section.controller.test.tsxpackages/ui/src/mosaic/sections/__tests__/organization-profile-leave-section.machine.test.tspackages/ui/src/mosaic/sections/__tests__/organization-profile-leave-section.view.test.tsxpackages/ui/src/mosaic/sections/delete-organization.tsxpackages/ui/src/mosaic/sections/leave-organization.controller.tsxpackages/ui/src/mosaic/sections/leave-organization.tsxpackages/ui/src/mosaic/sections/organization-profile-delete-section.controller.tsxpackages/ui/src/mosaic/sections/organization-profile-delete-section.machine.tspackages/ui/src/mosaic/sections/organization-profile-delete-section.tsxpackages/ui/src/mosaic/sections/organization-profile-delete-section.view.tsxpackages/ui/src/mosaic/sections/organization-profile-leave-section.controller.tsxpackages/ui/src/mosaic/sections/organization-profile-leave-section.machine.tspackages/ui/src/mosaic/sections/organization-profile-leave-section.tsxpackages/ui/src/mosaic/sections/organization-profile-leave-section.view.tsxpackages/ui/src/mosaic/slot-recipe.tspackages/ui/tsdown.config.mts
💤 Files with no reviewable changes (8)
- packages/ui/src/mosaic/sections/delete-organization.tsx
- packages/swingset/src/stories/delete-organization.stories.tsx
- packages/swingset/src/stories/leave-organization.stories.tsx
- packages/ui/src/mosaic/sections/leave-organization.tsx
- packages/ui/src/mosaic/panels/organization-profile-general.tsx
- packages/swingset/src/stories/organization-profile-general.mdx
- packages/ui/src/mosaic/sections/leave-organization.controller.tsx
- packages/swingset/src/stories/organization-profile-general.stories.tsx
Comment on lines
+85
to
+94
| it('emits a zero-specificity box-sizing/margin/padding reset scoped to [data-cl-slot]', () => { | ||
| render(React.createElement(MosaicProvider, {}, React.createElement('div'))); | ||
|
|
||
| const css = styleText(); | ||
| // `:where()` keeps the reset at 0 specificity so component classes always win on insertion-order ties. | ||
| expect(css).toContain(':where([data-cl-slot])'); | ||
| expect(css).toContain('box-sizing:border-box'); | ||
| expect(css).toContain('margin:0'); | ||
| expect(css).toContain('padding:0'); | ||
| }); |
Contributor
There was a problem hiding this comment.
📐 Maintainability & Code Quality | 🟡 Minor | ⚡ Quick win
Cover the layered reset/nonce branch.
The new reset style also supports cssLayerName and nonce, but this test only exercises the unlayered path. Add one assertion for the wrapped CSS and nonce forwarding.
🧪 Proposed test coverage
it('emits a zero-specificity box-sizing/margin/padding reset scoped to [data-cl-slot]', () => {
render(React.createElement(MosaicProvider, {}, React.createElement('div')));
const css = styleText();
// `:where()` keeps the reset at 0 specificity so component classes always win on insertion-order ties.
expect(css).toContain(':where([data-cl-slot])');
expect(css).toContain('box-sizing:border-box');
expect(css).toContain('margin:0');
expect(css).toContain('padding:0');
});
+
+ it('wraps the reset in the requested CSS layer and forwards the nonce', () => {
+ render(React.createElement(MosaicProvider, { cssLayerName: 'clerk.mosaic', nonce: 'test-nonce' }, React.createElement('div')));
+
+ const resetStyle = Array.from(document.querySelectorAll('style')).find(node =>
+ node.textContent?.includes(':where([data-cl-slot])'),
+ );
+ expect(resetStyle?.textContent).toContain('`@layer` clerk.mosaic{');
+ expect(resetStyle?.nonce).toBe('test-nonce');
+ });
});As per coding guidelines, “Unit tests are required for all new functionality” and “Include tests for all new features”.
📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
Suggested change
| it('emits a zero-specificity box-sizing/margin/padding reset scoped to [data-cl-slot]', () => { | |
| render(React.createElement(MosaicProvider, {}, React.createElement('div'))); | |
| const css = styleText(); | |
| // `:where()` keeps the reset at 0 specificity so component classes always win on insertion-order ties. | |
| expect(css).toContain(':where([data-cl-slot])'); | |
| expect(css).toContain('box-sizing:border-box'); | |
| expect(css).toContain('margin:0'); | |
| expect(css).toContain('padding:0'); | |
| }); | |
| it('emits a zero-specificity box-sizing/margin/padding reset scoped to [data-cl-slot]', () => { | |
| render(React.createElement(MosaicProvider, {}, React.createElement('div'))); | |
| const css = styleText(); | |
| // `:where()` keeps the reset at 0 specificity so component classes always win on insertion-order ties. | |
| expect(css).toContain(':where([data-cl-slot])'); | |
| expect(css).toContain('box-sizing:border-box'); | |
| expect(css).toContain('margin:0'); | |
| expect(css).toContain('padding:0'); | |
| }); | |
| it('wraps the reset in the requested CSS layer and forwards the nonce', () => { | |
| render(React.createElement(MosaicProvider, { cssLayerName: 'clerk.mosaic', nonce: 'test-nonce' }, React.createElement('div'))); | |
| const resetStyle = Array.from(document.querySelectorAll('style')).find(node => | |
| node.textContent?.includes(':where([data-cl-slot])'), | |
| ); | |
| expect(resetStyle?.textContent).toContain('`@layer` clerk.mosaic{'); | |
| expect(resetStyle?.nonce).toBe('test-nonce'); | |
| }); |
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@packages/ui/src/mosaic/__tests__/MosaicProvider.test.tsx` around lines 85 -
94, The MosaicProvider reset test only covers the unlayered CSS path; extend the
existing test around MosaicProvider/styleText to also assert the layered reset
output when cssLayerName is provided and that the nonce value is forwarded to
the generated style tag. Use the existing `MosaicProvider` render setup and
`styleText()` assertions to verify both the wrapped CSS branch and nonce
propagation, alongside the current `:where([data-cl-slot])` reset checks.
Source: Coding guidelines
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Description
New
@clerk/ui/experimental/mosaicentry.Exports:
MosaicProvider— styling/appearance + emotion cache.OrganizationProfile(compound:.GeneralPanel/.LeaveSection/.DeleteSection) — client-only, consumer needs'use client'(property access on client ref can't cross RSC boundary).OrganizationProfile{GeneralPanel,LeaveSection,DeleteSection}— each own client ref, drop straight into RSC, no consumer'use client'.Entry carries
'use client'(hooks/context/emotion). Components gate on Clerk loaded → rendernulltil ready, so no server markup; UI after hydration.Preview: https://swingset-git-feat-mosaic-experimental-export.clerkstage.dev/
Summary by CodeRabbit
New Features
Bug Fixes