feat(ui): Stand up experimental organization profile

packages/clerk-js/sandbox/app.ts

@@ -38,6 +38,7 @@ const AVAILABLE_COMPONENTS = [
   'taskChooseOrganization',
   'taskResetPassword',
   'taskSetupMFA',
+  '__experimental_mosaicOrganizationProfile',
 ] as const;
 type AvailableComponent = (typeof AVAILABLE_COMPONENTS)[number];
 
@@ -157,6 +158,7 @@ const componentControls: Record<AvailableComponent, ComponentPropsControl> = {
   taskChooseOrganization: buildComponentControls('taskChooseOrganization'),
   taskResetPassword: buildComponentControls('taskResetPassword'),
   taskSetupMFA: buildComponentControls('taskSetupMFA'),
+  __experimental_mosaicOrganizationProfile: buildComponentControls('__experimental_mosaicOrganizationProfile'),
 };
 
 declare global {
@@ -415,6 +417,10 @@ void (async () => {
       component: 'taskSetupMFA',
       defaultProps: { redirectUrlComplete: '/user-profile' },
     },
+    '/mosaic-organization-profile': {
+      mount: '__experimental_mountMosaicOrganizationProfile',
+      component: '__experimental_mosaicOrganizationProfile',
+    },
   };
 
   const routes: Record<string, () => void> = {

packages/clerk-js/sandbox/template.html

@@ -328,6 +328,13 @@
             component="<PricingTable />"
           ></nav-link>
         </nav-group>
+        <nav-group label="Mosaic">
+          <nav-link
+            href="/mosaic-organization-profile"
+            label="Mosaic Org Profile"
+            component="<__experimental_MosaicOrganizationProfile />"
+          ></nav-link>
+        </nav-group>
         <nav-group label="Other">
           <nav-link
             href="/keyless"

packages/clerk-js/src/core/clerk.ts

@@ -102,6 +102,7 @@ import type {
   OrganizationProfileProps,
   OrganizationResource,
   OrganizationSwitcherProps,
+  __experimental_MosaicOrganizationProfileProps,
   PricingTableProps,
   PublicKeyCredentialCreationOptionsWithoutExtensions,
   PublicKeyCredentialRequestOptionsWithoutExtensions,
@@ -1354,6 +1355,28 @@ export class Clerk implements ClerkInterface {
     void this.#clerkUI?.then(ui => ui.ensureMounted()).then(controls => controls.unmountComponent({ node }));
   };
 
+  public __experimental_mountMosaicOrganizationProfile = (
+    node: HTMLDivElement,
+    props?: __experimental_MosaicOrganizationProfileProps,
+  ): void => {
+    this.assertComponentsReady(this.#clerkUI);
+    const component = '__experimental_MosaicOrganizationProfile';
+    void this.#clerkUI
+      .then(ui => ui.ensureMounted({ preloadHint: component }))
+      .then(controls =>
+        controls.mountComponent({
+          name: component,
+          appearanceKey: '__experimental_mosaicOrganizationProfile',
+          node,
+          props,
+        }),
+      );
+  };
+
+  public __experimental_unmountMosaicOrganizationProfile = (node: HTMLDivElement): void => {
+    void this.#clerkUI?.then(ui => ui.ensureMounted()).then(controls => controls.unmountComponent({ node }));
+  };
+
   public mountOAuthConsent = (node: HTMLDivElement, props?: __internal_OAuthConsentProps) => {
     if (noUserExists(this)) {
       if (this.#instanceType === 'development') {

packages/shared/src/types/clerk.ts

@@ -700,6 +700,22 @@ export interface Clerk {
    */
   unmountPricingTable: (targetNode: HTMLDivElement) => void;
 
+  /**
+   * Mounts the experimental MosaicOrganizationProfile component at the target element.
+   * @param targetNode Target node to mount the MosaicOrganizationProfile component.
+   * @param props configuration parameters.
+   */
+  __experimental_mountMosaicOrganizationProfile: (
+    targetNode: HTMLDivElement,
+    props?: __experimental_MosaicOrganizationProfileProps,
+  ) => void;
+
+  /**
+   * Unmounts the experimental MosaicOrganizationProfile component from the target element.
+   * @param targetNode Target node to unmount the MosaicOrganizationProfile component from.
+   */
+  __experimental_unmountMosaicOrganizationProfile: (targetNode: HTMLDivElement) => void;
+
   /**
    * Mount an API keys component at the target element.
    *
@@ -2294,6 +2310,10 @@ type PortalRoot = HTMLElement | null | undefined;
 /** @generateWithEmptyComment */
 export type PricingTableProps = PricingTableBaseProps & PricingTableDefaultProps;
 
+export type __experimental_MosaicOrganizationProfileProps = {
+  appearance?: ClerkAppearanceTheme;
+};
+
 /** @generateWithEmptyComment */
 export type APIKeysProps = {
   /**

packages/ui/src/components/MosaicOrganizationProfile/MosaicOrganizationProfile.tsx

@@ -0,0 +1,10 @@
+import { MosaicProvider } from '../../mosaic/MosaicProvider';
+import { Button } from '../../mosaic/components/button';
+
+export const MosaicOrganizationProfile = () => {
+  return (
+    <MosaicProvider>
+      <Button>MosaicOrganizationProfile</Button>
+    </MosaicProvider>
+  );
+};

packages/ui/src/components/MosaicOrganizationProfile/index.ts

@@ -0,0 +1 @@
+export * from './MosaicOrganizationProfile';

packages/ui/src/contexts/ClerkUIComponentsContext.tsx

@@ -1,4 +1,5 @@
 import type {
+  __experimental_MosaicOrganizationProfileProps,
   APIKeysProps,
   ConfigureSSOProps,
   OAuthConsentProps,
@@ -13,6 +14,7 @@ import type { ReactNode } from 'react';
 
 import type { AvailableComponentName, AvailableComponentProps } from '../types';
 import {
+  __experimental_MosaicOrganizationProfileContext,
   APIKeysContext,
   ConfigureSSOContext,
   CreateOrganizationContext,
@@ -176,6 +178,14 @@ export function ComponentContextProvider({
           </SessionTasksContext.Provider>
         </TaskSetupMFAContext.Provider>
       );
+    case '__experimental_MosaicOrganizationProfile':
+      return (
+        <__experimental_MosaicOrganizationProfileContext.Provider
+          value={{ componentName, ...(props as __experimental_MosaicOrganizationProfileProps) }}
+        >
+          {children}
+        </__experimental_MosaicOrganizationProfileContext.Provider>
+      );
     default:
       throw new Error(`Unknown component context: ${componentName}`);
   }

packages/ui/src/contexts/components/__experimental_MosaicOrganizationProfile.ts

@@ -0,0 +1,23 @@
+import { createContext, useContext } from 'react';
+
+import type { __experimental_MosaicOrganizationProfileCtx } from '../../types';
+
+export const __experimental_MosaicOrganizationProfileContext =
+  createContext<__experimental_MosaicOrganizationProfileCtx | null>(null);
+
+export const __experimental_useMosaicOrganizationProfileContext = () => {
+  const context = useContext(__experimental_MosaicOrganizationProfileContext);
+
+  if (!context || context.componentName !== '__experimental_MosaicOrganizationProfile') {
+    throw new Error(
+      'Clerk: __experimental_useMosaicOrganizationProfileContext called outside MosaicOrganizationProfile.',
+    );
+  }
+
+  const { componentName, ...ctx } = context;
+
+  return {
+    ...ctx,
+    componentName,
+  };
+};

packages/ui/src/contexts/components/index.ts

@@ -1,3 +1,4 @@
+export * from './__experimental_MosaicOrganizationProfile';
 export * from './APIKeys';
 export * from './Checkout';
 export * from './ConfigureSSO';

packages/ui/src/customizables/parseAppearance.ts

@@ -28,7 +28,11 @@ type PublicAppearanceTopLevelKey = Exclude<
 export type AppearanceCascade = {
   globalAppearance?: Appearance;
   appearance?: Appearance;
-  appearanceKey: PublicAppearanceTopLevelKey | 'impersonationFab' | 'enableOrganizationsPrompt';
+  appearanceKey:
+    | PublicAppearanceTopLevelKey
+    | 'impersonationFab'
+    | 'enableOrganizationsPrompt'
+    | '__experimental_mosaicOrganizationProfile';
 };
 
 export type ParsedAppearance = {

packages/ui/src/lazyModules/components.ts

@@ -33,6 +33,8 @@ const componentImportPaths = {
   OAuthConsent: () => import(/* webpackChunkName: "oauthConsent" */ '../components/OAuthConsent/OAuthConsent'),
   EnableOrganizationsPrompt: () =>
     import(/* webpackChunkName: "enableOrganizationsPrompt" */ '../components/devPrompts/EnableOrganizationsPrompt'),
+  __experimental_MosaicOrganizationProfile: () =>
+    import(/* webpackChunkName: "mosaicOrganizationProfile" */ '../components/MosaicOrganizationProfile'),
 } as const;
 
 export const SignIn = lazy(() => componentImportPaths.SignIn().then(module => ({ default: module.SignIn })));
@@ -155,6 +157,12 @@ export const SessionTasks = lazy(() =>
   componentImportPaths.SessionTasks().then(module => ({ default: module.SessionTasks })),
 );
 
+export const __experimental_MosaicOrganizationProfile = lazy(() =>
+  componentImportPaths.__experimental_MosaicOrganizationProfile().then(module => ({
+    default: module.MosaicOrganizationProfile,
+  })),
+);
+
 export const preloadComponent = async (component: unknown) => {
   return componentImportPaths[component as keyof typeof componentImportPaths]?.();
 };
@@ -191,6 +199,7 @@ export const ClerkComponents = {
   TaskChooseOrganization,
   TaskResetPassword,
   TaskSetupMFA,
+  __experimental_MosaicOrganizationProfile,
 };
 
 export type ClerkComponentName = keyof typeof ClerkComponents;

packages/ui/src/types.ts

@@ -1,4 +1,5 @@
 import type {
+  __experimental_MosaicOrganizationProfileProps,
   __internal_CheckoutProps,
   __internal_PlanDetailsProps,
   __internal_SubscriptionDetailsProps,
@@ -69,7 +70,8 @@ export type AvailableComponentProps =
   | OAuthConsentProps
   | TaskChooseOrganizationProps
   | TaskResetPasswordProps
-  | TaskSetupMFAProps;
+  | TaskSetupMFAProps
+  | __experimental_MosaicOrganizationProfileProps;
 
 type ComponentMode = 'modal' | 'mounted';
 type SignInMode = 'modal' | 'redirect';
@@ -235,6 +237,10 @@ export type PlanDetailsCtx = __internal_PlanDetailsProps & {
   componentName: 'PlanDetails';
 };
 
+export type __experimental_MosaicOrganizationProfileCtx = __experimental_MosaicOrganizationProfileProps & {
+  componentName: '__experimental_MosaicOrganizationProfile';
+};
+
 export type AvailableComponentCtx =
   | SignInCtx
   | SignUpCtx
@@ -257,5 +263,6 @@ export type AvailableComponentCtx =
   | PlanDetailsCtx
   | TaskChooseOrganizationCtx
   | TaskResetPasswordCtx
-  | TaskSetupMFACtx;
+  | TaskSetupMFACtx
+  | __experimental_MosaicOrganizationProfileCtx;
 export type AvailableComponentName = AvailableComponentCtx['componentName'];