fix(clerk-js): Replace generic ComponentContext with component-specif…

…ic contexts (#4486)

.changeset/poor-countries-count.md

@@ -0,0 +1,5 @@
+---
+'@clerk/clerk-js': patch
+---
+
+Internal change to use component-specific context providers. This change does not impact consumers.

packages/clerk-js/src/ui/components/CreateOrganization/CreateOrganization.tsx

@@ -1,6 +1,6 @@
 import type { CreateOrganizationModalProps } from '@clerk/types';
 
-import { ComponentContext, withCoreUserGuard } from '../../contexts';
+import { CreateOrganizationContext, withCoreUserGuard } from '../../contexts';
 import { Flow } from '../../customizables';
 import { withCardStateProvider } from '../../elements';
 import { Route, Switch } from '../../router';
@@ -37,11 +37,11 @@ export const CreateOrganizationModal = (props: CreateOrganizationModalProps): JS
 
   return (
     <Route path='createOrganization'>
-      <ComponentContext.Provider value={createOrganizationProps}>
+      <CreateOrganizationContext.Provider value={createOrganizationProps}>
         <div>
           <CreateOrganization />
         </div>
-      </ComponentContext.Provider>
+      </CreateOrganizationContext.Provider>
     </Route>
   );
 };

packages/clerk-js/src/ui/components/OrganizationProfile/OrganizationProfile.tsx

@@ -2,7 +2,7 @@ import { useOrganization } from '@clerk/shared/react';
 import type { OrganizationProfileModalProps, OrganizationProfileProps } from '@clerk/types';
 import React from 'react';
 
-import { ComponentContext, withCoreUserGuard } from '../../contexts';
+import { OrganizationProfileContext, withCoreUserGuard } from '../../contexts';
 import { Flow, localizationKeys } from '../../customizables';
 import { NavbarMenuButtonRow, ProfileCard, withCardStateProvider } from '../../elements';
 import { Route, Switch } from '../../router';
@@ -58,12 +58,12 @@ export const OrganizationProfileModal = (props: OrganizationProfileModalProps):
 
   return (
     <Route path='organizationProfile'>
-      <ComponentContext.Provider value={organizationProfileProps}>
+      <OrganizationProfileContext.Provider value={organizationProfileProps}>
         {/*TODO: Used by InvisibleRootBox, can we simplify? */}
         <div>
           <OrganizationProfile {...organizationProfileProps} />
         </div>
-      </ComponentContext.Provider>
+      </OrganizationProfileContext.Provider>
     </Route>
   );
 };

packages/clerk-js/src/ui/components/SignIn/SignIn.tsx

@@ -3,7 +3,7 @@ import type { SignInModalProps, SignInProps } from '@clerk/types';
 import React from 'react';
 
 import { SignInEmailLinkFlowComplete } from '../../common/EmailLinkCompleteFlowCard';
-import { ComponentContext, useSignInContext, withCoreSessionSwitchGuard } from '../../contexts';
+import { SignInContext, useSignInContext, withCoreSessionSwitchGuard } from '../../contexts';
 import { Flow } from '../../customizables';
 import { Route, Switch, VIRTUAL_ROUTER_BASE_PATH } from '../../router';
 import { ResetPassword } from './ResetPassword';
@@ -86,7 +86,7 @@ export const SignInModal = (props: SignInModalProps): JSX.Element => {
 
   return (
     <Route path='sign-in'>
-      <ComponentContext.Provider
+      <SignInContext.Provider
         value={{
           componentName: 'SignIn',
           ...signInProps,
@@ -100,7 +100,7 @@ export const SignInModal = (props: SignInModalProps): JSX.Element => {
             routing='virtual'
           />
         </div>
-      </ComponentContext.Provider>
+      </SignInContext.Provider>
     </Route>
   );
 };

packages/clerk-js/src/ui/components/SignUp/SignUp.tsx

@@ -3,7 +3,7 @@ import type { SignUpModalProps, SignUpProps } from '@clerk/types';
 import React from 'react';
 
 import { SignUpEmailLinkFlowComplete } from '../../common/EmailLinkCompleteFlowCard';
-import { ComponentContext, useSignUpContext, withCoreSessionSwitchGuard } from '../../contexts';
+import { SignUpContext, useSignUpContext, withCoreSessionSwitchGuard } from '../../contexts';
 import { Flow } from '../../customizables';
 import { Route, Switch, VIRTUAL_ROUTER_BASE_PATH } from '../../router';
 import { SignUpContinue } from './SignUpContinue';
@@ -98,7 +98,7 @@ export const SignUpModal = (props: SignUpModalProps): JSX.Element => {
 
   return (
     <Route path='sign-up'>
-      <ComponentContext.Provider
+      <SignUpContext.Provider
         value={{
           componentName: 'SignUp',
           ...signUpProps,
@@ -112,7 +112,7 @@ export const SignUpModal = (props: SignUpModalProps): JSX.Element => {
             routing='virtual'
           />
         </div>
-      </ComponentContext.Provider>
+      </SignUpContext.Provider>
     </Route>
   );
 };

packages/clerk-js/src/ui/components/UserProfile/UserProfile.tsx

@@ -1,7 +1,7 @@
 import type { UserProfileModalProps, UserProfileProps } from '@clerk/types';
 import React from 'react';
 
-import { ComponentContext, withCoreUserGuard } from '../../contexts';
+import { UserProfileContext, withCoreUserGuard } from '../../contexts';
 import { Flow, localizationKeys } from '../../customizables';
 import { NavbarMenuButtonRow, ProfileCard, withCardStateProvider } from '../../elements';
 import { Route, Switch } from '../../router';
@@ -54,12 +54,12 @@ export const UserProfileModal = (props: UserProfileModalProps): JSX.Element => {
 
   return (
     <Route path='user'>
-      <ComponentContext.Provider value={userProfileProps}>
+      <UserProfileContext.Provider value={userProfileProps}>
         {/*TODO: Used by InvisibleRootBox, can we simplify? */}
         <div>
           <UserProfile {...userProfileProps} />
         </div>
-      </ComponentContext.Provider>
+      </UserProfileContext.Provider>
     </Route>
   );
 };

packages/clerk-js/src/ui/components/UserVerification/index.tsx

@@ -1,7 +1,7 @@
 import type { __experimental_UserVerificationModalProps, __experimental_UserVerificationProps } from '@clerk/types';
 import React, { useEffect } from 'react';
 
-import { ComponentContext, withCoreSessionSwitchGuard } from '../../contexts';
+import { UserVerificationContext, withCoreSessionSwitchGuard } from '../../contexts';
 import { Flow } from '../../customizables';
 import { Route, Switch } from '../../router';
 import { UserVerificationFactorOne } from './UserVerificationFactorOne';
@@ -37,7 +37,7 @@ const UserVerification: React.ComponentType<__experimental_UserVerificationProps
 const UserVerificationModal = (props: __experimental_UserVerificationModalProps): JSX.Element => {
   return (
     <Route path='user-verification'>
-      <ComponentContext.Provider
+      <UserVerificationContext.Provider
         value={{
           componentName: 'UserVerification',
           ...props,
@@ -51,7 +51,7 @@ const UserVerificationModal = (props: __experimental_UserVerificationModalProps)
             routing='virtual'
           />
         </div>
-      </ComponentContext.Provider>
+      </UserVerificationContext.Provider>
     </Route>
   );
 };

packages/clerk-js/src/ui/components/Waitlist/Waitlist.tsx

@@ -1,7 +1,7 @@
 import { useClerk } from '@clerk/shared/react';
 import type { WaitlistModalProps } from '@clerk/types';
 
-import { ComponentContext, useWaitlistContext } from '../../contexts';
+import { useWaitlistContext, WaitlistContext } from '../../contexts';
 import { Flow, localizationKeys } from '../../customizables';
 import { Card, withCardStateProvider } from '../../elements';
 import { Route, VIRTUAL_ROUTER_BASE_PATH } from '../../router';
@@ -52,11 +52,11 @@ export const WaitlistModal = (props: WaitlistModalProps): JSX.Element => {
 
   return (
     <Route path='waitlist'>
-      <ComponentContext.Provider value={{ ...waitlistProps, componentName: 'Waitlist', mode: 'modal' }}>
+      <WaitlistContext.Provider value={{ ...waitlistProps, componentName: 'Waitlist', mode: 'modal' }}>
         <div>
           <Waitlist />
         </div>
-      </ComponentContext.Provider>
+      </WaitlistContext.Provider>
     </Route>
   );
 };