chore(elements): Revert specific SignIn.Root updates

clerk · Oct 4, 2024 · ab1b18c · ab1b18c
1 parent d0e4c86
commit ab1b18c
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 26 deletions.
diff --git a/packages/elements/src/internals/machines/sign-in/router.machine.ts b/packages/elements/src/internals/machines/sign-in/router.machine.ts
@@ -165,7 +165,6 @@ export const SignInRouterMachine = setup({
       resendable: false,
       resendableAfter: RESENDABLE_COUNTDOWN_DEFAULT,
     }),
-
     setActive: ({ context, event }) => {
       if (context.exampleMode) {
         return;

diff --git a/packages/elements/src/react/sign-in/root.tsx b/packages/elements/src/react/sign-in/root.tsx
@@ -24,38 +24,17 @@ type SignInFlowProviderProps = {
    */
   fallback?: React.ReactNode;
   isRootPath: boolean;
-
-  /**
-   * The base path for your sign-in route.
-   * Will be automatically inferred in Next.js.
-   * @example `/sign-in`
-   */
-  path?: string;
-  /**
-   * If you want to render Clerk Elements in e.g. a modal, use the `virtual` routing mode.
-   */
-  routing?: ROUTING;
 };
 
 const actor = createActor(SignInRouterMachine, { inspect });
 actor.start();
 
-function SignInFlowProvider({ children, exampleMode, fallback, isRootPath, path, routing }: SignInFlowProviderProps) {
+function SignInFlowProvider({ children, exampleMode, fallback, isRootPath }: SignInFlowProviderProps) {
   const clerk = useClerk();
   const router = useClerkRouter();
   const formRef = useFormStore();
-
   const isReady = useSelector(actor, state => state.value !== 'Idle');
 
-  clerk.telemetry?.record(
-    eventComponentMounted('Elements_SignInRoot', {
-      exampleMode: exampleMode || false,
-      fallback: Boolean(fallback),
-      path: path || false,
-      routing: routing || false,
-    }),
-  );
-
   useEffect(() => {
     if (!clerk || !router) {
       return;
@@ -104,7 +83,18 @@ function SignInFlowProvider({ children, exampleMode, fallback, isRootPath, path,
   );
 }
 
-export type SignInRootProps = Omit<SignInFlowProviderProps, 'isRootPath'>;
+export type SignInRootProps = Omit<SignInFlowProviderProps, 'isRootPath'> & {
+  /**
+   * The base path for your sign-in route.
+   * Will be automatically inferred in Next.js.
+   * @example `/sign-in`
+   */
+  path?: string;
+  /**
+   * If you want to render Clerk Elements in e.g. a modal, use the `virtual` routing mode.
+   */
+  routing?: ROUTING;
+};
 
 /**
  * Root component for the sign-in flow. It sets up providers and state management for its children.
@@ -129,8 +119,19 @@ export function SignInRoot({
   path: pathProp,
   routing = ROUTING.path,
 }: SignInRootProps): JSX.Element | null {
+  const clerk = useClerk();
   const inferredPath = usePathnameWithoutCatchAll();
   const path = pathProp || inferredPath || SIGN_IN_DEFAULT_BASE_PATH;
+
+  clerk.telemetry?.record(
+    eventComponentMounted('Elements_SignInRoot', {
+      exampleMode,
+      fallback: Boolean(fallback),
+      path,
+      routing,
+    }),
+  );
+
   const router = (routing === ROUTING.virtual ? useVirtualRouter : useClerkHostRouter)();
   const isRootPath = path === router.pathname();
 
@@ -144,8 +145,6 @@ export function SignInRoot({
           exampleMode={exampleMode}
           fallback={fallback}
           isRootPath={isRootPath}
-          path={path}
-          routing={routing}
         >
           {children}
         </SignInFlowProvider>