fix(clerk-js,ui,react,shared): Standardize TaskSetupMFA naming across the codebase (#7859)

Author: octoper

.changeset/fair-banks-attack.md

@@ -0,0 +1,7 @@
+---
+'@clerk/clerk-js': minor
+'@clerk/shared': minor
+'@clerk/react': minor
+---
+
+Renames `mountTaskSetupMfa` and `unmountTaskSetupMfa` to `mountTaskSetupMFA` and `unmountTaskSetupMFA` respectively

packages/clerk-js/sandbox/app.ts

@@ -422,7 +422,7 @@ void (async () => {
       );
     },
     '/task-setup-mfa': () => {
-      Clerk.mountTaskSetupMfa(
+      Clerk.mountTaskSetupMFA(
         app,
         componentControls.taskSetupMFA.getProps() ?? {
           redirectUrlComplete: '/user-profile',

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

@@ -1444,7 +1444,7 @@ export class Clerk implements ClerkInterface {
     void this.#clerkUI?.then(ui => ui.ensureMounted()).then(controls => controls.unmountComponent({ node }));
   };
 
-  public mountTaskSetupMfa = (node: HTMLDivElement, props?: TaskSetupMFAProps) => {
+  public mountTaskSetupMFA = (node: HTMLDivElement, props?: TaskSetupMFAProps) => {
     this.assertComponentsReady(this.#clerkUI);
 
     const component = 'TaskSetupMFA';
@@ -1459,10 +1459,10 @@ export class Clerk implements ClerkInterface {
         }),
       );
 
-    this.telemetry?.record(eventPrebuiltComponentMounted('TaskSetupMfa', props));
+    this.telemetry?.record(eventPrebuiltComponentMounted('TaskSetupMFA', props));
   };
 
-  public unmountTaskSetupMfa = (node: HTMLDivElement) => {
+  public unmountTaskSetupMFA = (node: HTMLDivElement) => {
     void this.#clerkUI?.then(ui => ui.ensureMounted()).then(controls => controls.unmountComponent({ node }));
   };
 

packages/react/src/components/uiComponents.tsx

@@ -742,8 +742,8 @@ export const TaskSetupMFA = withClerk(
         {clerk.loaded && (
           <ClerkHostRenderer
             component={component}
-            mount={clerk.mountTaskSetupMfa}
-            unmount={clerk.unmountTaskSetupMfa}
+            mount={clerk.mountTaskSetupMFA}
+            unmount={clerk.unmountTaskSetupMFA}
             updateProps={(clerk as any).__internal_updateProps}
             props={props}
             rootProps={rendererRootProps}

packages/react/src/isomorphicClerk.ts

@@ -158,7 +158,7 @@ export class IsomorphicClerk implements IsomorphicLoadedClerk {
   private premountOAuthConsentNodes = new Map<HTMLDivElement, __internal_OAuthConsentProps | undefined>();
   private premountTaskChooseOrganizationNodes = new Map<HTMLDivElement, TaskChooseOrganizationProps | undefined>();
   private premountTaskResetPasswordNodes = new Map<HTMLDivElement, TaskResetPasswordProps | undefined>();
-  private premountTaskSetupMfaNodes = new Map<HTMLDivElement, TaskSetupMFAProps | undefined>();
+  private premountTaskSetupMFANodes = new Map<HTMLDivElement, TaskSetupMFAProps | undefined>();
   // A separate Map of `addListener` method calls to handle multiple listeners.
   private premountAddListenerCalls = new Map<
     ListenerCallback,
@@ -707,8 +707,8 @@ export class IsomorphicClerk implements IsomorphicLoadedClerk {
       clerkjs.mountTaskResetPassword(node, props);
     });
 
-    this.premountTaskSetupMfaNodes.forEach((props, node) => {
-      clerkjs.mountTaskSetupMfa(node, props);
+    this.premountTaskSetupMFANodes.forEach((props, node) => {
+      clerkjs.mountTaskSetupMFA(node, props);
     });
 
     /**
@@ -1275,19 +1275,19 @@ export class IsomorphicClerk implements IsomorphicLoadedClerk {
     }
   };
 
-  mountTaskSetupMfa = (node: HTMLDivElement, props?: TaskSetupMFAProps): void => {
+  mountTaskSetupMFA = (node: HTMLDivElement, props?: TaskSetupMFAProps): void => {
     if (this.clerkjs && this.loaded) {
-      this.clerkjs.mountTaskSetupMfa(node, props);
+      this.clerkjs.mountTaskSetupMFA(node, props);
     } else {
-      this.premountTaskSetupMfaNodes.set(node, props);
+      this.premountTaskSetupMFANodes.set(node, props);
     }
   };
 
-  unmountTaskSetupMfa = (node: HTMLDivElement): void => {
+  unmountTaskSetupMFA = (node: HTMLDivElement): void => {
     if (this.clerkjs && this.loaded) {
-      this.clerkjs.unmountTaskSetupMfa(node);
+      this.clerkjs.unmountTaskSetupMFA(node);
     } else {
-      this.premountTaskSetupMfaNodes.delete(node);
+      this.premountTaskSetupMFANodes.delete(node);
     }
   };
 

packages/shared/src/types/clerk.ts

@@ -721,15 +721,15 @@ export interface Clerk {
    * @param targetNode - Target node to mount the TaskSetupMFA component.
    * @param props - configuration parameters.
    */
-  mountTaskSetupMfa: (targetNode: HTMLDivElement, props?: TaskSetupMFAProps) => void;
+  mountTaskSetupMFA: (targetNode: HTMLDivElement, props?: TaskSetupMFAProps) => void;
 
   /**
    * Unmount a TaskSetupMFA component from the target element.
    * If there is no component mounted at the target node, results in a noop.
    *
    * @param targetNode - Target node to unmount the TaskSetupMFA component from.
    */
-  unmountTaskSetupMfa: (targetNode: HTMLDivElement) => void;
+  unmountTaskSetupMFA: (targetNode: HTMLDivElement) => void;
 
   /**
    * @internal