fix(ui): provide CardState to composed OrganizationProfileGeneralPanel default page

.changeset/org-general-panel-cardstate.md

@@ -0,0 +1,5 @@
+---
+'@clerk/ui': patch
+---
+
+Fix `OrganizationProfileGeneralPanel` (from `@clerk/ui/experimental`) throwing "CardState not found" when opening the leave-organization or delete-organization confirmation in its default, no-children page mode. The panel now provides the same root `CardStateProvider` that a mounted `<OrganizationProfile />` supplies.

packages/ui/src/composed/OrganizationProfile/General.tsx

@@ -26,7 +26,15 @@ function GeneralComposed({ children }: PropsWithChildren): ReactNode {
 
 export function OrganizationProfileGeneralPanel({ children }: PropsWithChildren): ReactNode {
   if (!children) {
-    return <OrganizationGeneralPage />;
+    // Unlike AccountPage/SecurityPage, OrganizationGeneralPage does not self-wrap in a
+    // CardStateProvider. Mounted <OrganizationProfile /> supplies one at its root, so the
+    // leave/delete confirmation forms (useLeaveWithRevalidations -> useCardState) resolve it.
+    // The composed panel is a standalone entry point, so it must provide the same root here.
+    return (
+      <CardStateProvider>
+        <OrganizationGeneralPage />
+      </CardStateProvider>
+    );
   }
 
   // The section confirmation forms (leave/delete) call useCardState(), so children must be wrapped

packages/ui/src/composed/__tests__/OrganizationProfileSections.test.tsx

@@ -135,6 +135,25 @@ describe('OrganizationProfile composed sections', () => {
     });
   });
 
+  describe('General — default page mode (no children)', () => {
+    it('provides CardState so the leave-organization confirmation can open', async () => {
+      const { wrapper, fixtures } = await createFixtures(f => {
+        f.withOrganizations();
+        f.withUser({ email_addresses: ['test@clerk.com'], organization_memberships: [{ name: 'TestOrg' }] });
+      });
+
+      fixtures.clerk.organization?.getDomains.mockReturnValue(Promise.resolve({ data: [], total_count: 0 }));
+
+      const { userEvent } = render(<OrganizationProfileGeneralPanel />, { wrapper });
+
+      // Before the fix, LeaveOrganizationForm's useLeaveWithRevalidations() calls useCardState()
+      // with no ancestor CardStateProvider and throws "CardState not found".
+      await userEvent.click(await screen.findByRole('button', { name: /leave organization/i }));
+
+      await waitFor(() => expect(screen.getByRole('button', { name: /cancel/i })).toBeInTheDocument());
+    });
+  });
+
   describe('General — section outside page', () => {
     it('useRequirePage throws when rendered outside a page component', async () => {
       const { wrapper, fixtures } = await createFixtures(f => {