fix(clerk-js): Prevent leak of data-component-status (#6884)

Author: panteliselef

.changeset/rich-peaches-yawn.md

@@ -0,0 +1,5 @@
+---
+'@clerk/clerk-js': patch
+---
+
+Prevent leaking the `data-component-status` attribute for components other than `<PricingTable/>`.

packages/clerk-js/src/ui/customizables/__tests__/FlowRoot.spec.tsx

@@ -0,0 +1,59 @@
+import { render } from '@testing-library/react';
+import { describe, expect, it } from 'vitest';
+
+import { AppearanceProvider } from '../AppearanceContext';
+import { Flow } from '../Flow';
+
+describe('Flow.Root data-component-status behavior', () => {
+  it('does not set data-component-status if prop is omitted', () => {
+    const { container } = render(
+      <AppearanceProvider appearanceKey='signIn'>
+        <Flow.Root flow='signIn'>
+          <div data-testid='child' />
+        </Flow.Root>
+        ,
+      </AppearanceProvider>,
+    );
+
+    const host = container as HTMLElement | null;
+    expect(host).toBeTruthy();
+    // Attribute should not be present
+    expect(host?.getAttribute('data-component-status')).toBeNull();
+  });
+
+  it('sets data-component-status="awaiting-data" when isFlowReady=false', async () => {
+    const { container } = render(
+      <AppearanceProvider appearanceKey='signIn'>
+        <Flow.Root
+          flow='signIn'
+          isFlowReady={false}
+        >
+          <div data-testid='child' />
+        </Flow.Root>
+        ,
+      </AppearanceProvider>,
+    );
+
+    const host = container as HTMLElement | null;
+    expect(host).toBeTruthy();
+    expect(host?.getAttribute('data-component-status')).toBe('awaiting-data');
+  });
+
+  it('sets data-component-status="ready" when isFlowReady=true', () => {
+    const { container } = render(
+      <AppearanceProvider appearanceKey='signIn'>
+        <Flow.Root
+          flow='signIn'
+          isFlowReady
+        >
+          <div data-testid='child' />
+        </Flow.Root>
+        ,
+      </AppearanceProvider>,
+    );
+
+    const host = container as HTMLElement | null;
+    expect(host).toBeTruthy();
+    expect(host?.getAttribute('data-component-status')).toBe('ready');
+  });
+});

packages/clerk-js/src/ui/elements/InvisibleRootBox.tsx

@@ -18,7 +18,9 @@ const _InvisibleRootBox = React.memo((props: RootBoxProps & { isFlowReady?: bool
     }
 
     parent.setAttribute('class', props.className);
-    parent.setAttribute('data-component-status', props.isFlowReady ? 'ready' : 'awaiting-data');
+    if ('isFlowReady' in props) {
+      parent.setAttribute('data-component-status', props.isFlowReady ? 'ready' : 'awaiting-data');
+    }
   }, [props.className, props.isFlowReady]);
 
   return (

packages/clerk-js/src/ui/elements/contexts/index.tsx

@@ -129,7 +129,7 @@ const [FlowMetadataCtx, useFlowMetadata] = createContextAndHook<FlowMetadata>('F
 
 export const FlowMetadataProvider = (props: React.PropsWithChildren<FlowMetadata>) => {
   const { flow, part } = props;
-  const value = React.useMemo(() => ({ value: { ...props } }), [flow, part]);
+  const value = React.useMemo(() => ({ value: props }), [flow, part]);
   return <FlowMetadataCtx.Provider value={value}>{props.children}</FlowMetadataCtx.Provider>;
 };