Revert pnpm-lock.yaml changes

Revert pnpm-lock.yaml changes

Author: LauraBeatris

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

@@ -825,7 +825,7 @@ export class Clerk implements ClerkInterface {
     if (disabledOrganizationsFeature(this, this.environment)) {
       if (this.#instanceType === 'development') {
         this.__internal_openEnableOrganizationsPrompt({
-          callerName: 'OrganizationSwitcher',
+          componentName: 'OrganizationProfile',
         });
       }
       return;
@@ -855,7 +855,7 @@ export class Clerk implements ClerkInterface {
     if (disabledOrganizationsFeature(this, this.environment)) {
       if (this.#instanceType === 'development') {
         this.__internal_openEnableOrganizationsPrompt({
-          callerName: 'OrganizationSwitcher',
+          componentName: 'OrganizationSwitcher',
         });
       }
       return;
@@ -997,7 +997,7 @@ export class Clerk implements ClerkInterface {
     if (disabledOrganizationsFeature(this, this.environment)) {
       if (this.#instanceType === 'development') {
         this.__internal_openEnableOrganizationsPrompt({
-          callerName: 'OrganizationProfile',
+          componentName: 'OrganizationProfile',
         });
       }
       return;
@@ -1037,7 +1037,7 @@ export class Clerk implements ClerkInterface {
     if (disabledOrganizationsFeature(this, this.environment)) {
       if (this.#instanceType === 'development') {
         this.__internal_openEnableOrganizationsPrompt({
-          callerName: 'OrganizationSwitcher',
+          componentName: 'OrganizationSwitcher',
         });
       }
       return;
@@ -1068,7 +1068,7 @@ export class Clerk implements ClerkInterface {
     if (disabledOrganizationsFeature(this, this.environment)) {
       if (this.#instanceType === 'development') {
         this.__internal_openEnableOrganizationsPrompt({
-          callerName: 'OrganizationSwitcher',
+          componentName: 'OrganizationSwitcher',
         });
       }
       return;
@@ -1107,7 +1107,7 @@ export class Clerk implements ClerkInterface {
     if (disabledOrganizationsFeature(this, this.environment)) {
       if (this.#instanceType === 'development') {
         this.__internal_openEnableOrganizationsPrompt({
-          callerName: 'OrganizationList',
+          componentName: 'OrganizationList',
         });
       }
       return;
@@ -1294,7 +1294,7 @@ export class Clerk implements ClerkInterface {
     if (disabledOrganizationsFeature(this, this.environment)) {
       if (this.#instanceType === 'development') {
         this.__internal_openEnableOrganizationsPrompt({
-          callerName: 'OrganizationSwitcher',
+          componentName: 'OrganizationSwitcher',
         });
       }
       return;

packages/clerk-js/src/ui/components/devPrompts/EnableOrganizationsPrompt/index.tsx

@@ -1,3 +1,4 @@
+import type { __internal_EnableOrganizationsPromptProps } from '@clerk/shared/types';
 import { css } from '@emotion/react';
 
 import { Modal } from '@/ui/elements/Modal';
@@ -7,11 +8,9 @@ import { Flex } from '../../../customizables';
 import { Portal } from '../../../elements/Portal';
 import { basePromptElementStyles, PromptContainer } from '../shared';
 
-type EnableOrganizationsPromptProps = {
-  callerName: string;
-};
+const EnableOrganizationsPromptInternal = (props: __internal_EnableOrganizationsPromptProps) => {
+  const ctaText = 'componentName' in props ? `<${props.componentName} /> component` : props.utilityName;
 
-const EnableOrganizationsPromptInternal = (_props: EnableOrganizationsPromptProps) => {
   return (
     <Portal>
       <Modal
@@ -114,7 +113,7 @@ const EnableOrganizationsPromptInternal = (_props: EnableOrganizationsPromptProp
                     color: white;
                   `}
                 >
-                  useOrganization
+                  {ctaText}
                 </code>{' '}
                 hook,
                 <br />
@@ -219,7 +218,7 @@ const EnableOrganizationsPromptInternal = (_props: EnableOrganizationsPromptProp
  * A prompt that allows the user to enable the Organizations feature for their development instance
  * @internal
  */
-export const EnableOrganizationsPrompt = (props: EnableOrganizationsPromptProps) => {
+export const EnableOrganizationsPrompt = (props: __internal_EnableOrganizationsPromptProps) => {
   return (
     <InternalThemeProvider>
       <EnableOrganizationsPromptInternal {...props} />

packages/shared/src/organization.ts

@@ -1,4 +1,4 @@
-import type { LoadedClerk, OrganizationMembershipResource } from './types';
+import type { __internal_EnableOrganizationsPromptProps, LoadedClerk, OrganizationMembershipResource } from './types';
 
 /**
  * Finds the organization membership for a given organization ID from a list of memberships
@@ -26,7 +26,7 @@ export const withOrganizationSettingsEnabled =
   <TParams extends any[], TReturn>(
     hook: (...args: TParams) => TReturn,
     getLoadedClerk: () => LoadedClerk | null | undefined,
-    callerName?: string,
+    utilityName?: __internal_EnableOrganizationsPromptProps['utilityName'],
   ) =>
   (...args: TParams): TReturn => {
     const clerk = getLoadedClerk();
@@ -35,7 +35,7 @@ export const withOrganizationSettingsEnabled =
 
     if (!environment?.organizationSettings.enabled) {
       clerk?.__internal_openEnableOrganizationsPrompt({
-        callerName,
+        utilityName,
       });
     }
 

packages/shared/src/types/clerk.ts

@@ -1436,9 +1436,13 @@ export type __internal_UserVerificationProps = RoutingOptions & {
 
 export type __internal_UserVerificationModalProps = WithoutRouting<__internal_UserVerificationProps>;
 
-export type __internal_EnableOrganizationsPromptProps = {
-  callerName: string;
-};
+export type __internal_EnableOrganizationsPromptProps =
+  | {
+      componentName: 'OrganizationSwitcher' | 'OrganizationProfile' | 'OrganizationList';
+    }
+  | {
+      utilityName: 'useOrganizationList' | 'useOrganization';
+    };
 
 type GoogleOneTapRedirectUrlProps = SignInForceRedirectUrl & SignUpForceRedirectUrl;
 

playground/app-router/src/app/layout.tsx

@@ -1,7 +1,7 @@
-import { Links } from '@/common/Links';
-import { ClerkProvider } from '@clerk/nextjs';
-import { Inter } from 'next/font/google';
 import './globals.css';
+import { Inter } from 'next/font/google';
+import { ClerkProvider } from '@clerk/nextjs';
+import { Links } from '@/common/Links';
 
 const inter = Inter({ subsets: ['latin'] });
 
@@ -15,13 +15,13 @@ export default function RootLayout({ children }: { children: React.ReactNode })
   return (
     <ClerkProvider clerkJSUrl={'https://js.lclclerk.com/npm/clerk.browser.js'}>
       <html lang='en'>
-      <body className={inter.className}>
-      <Links />
-      <div style={{ margin: '1rem', padding: '1rem', border: '1px solid green' }}>
-        <h2>Root layout</h2>
-        {children}
-      </div>
-      </body>
+        <body className={inter.className}>
+          <Links />
+          <div style={{ margin: '1rem', padding: '1rem', border: '1px solid green' }}>
+            <h2>Root layout</h2>
+            {children}
+          </div>
+        </body>
       </html>
     </ClerkProvider>
   );