feat(mosaic): add OAuthConsent component

.changeset/mosaic-oauth-consent.md

@@ -0,0 +1,7 @@
+---
+'@clerk/shared': patch
+'@clerk/ui': patch
+'@clerk/mosaic': patch
+---
+
+Move the OAuth consent redirect domain helper into `@clerk/shared` so it can be shared across UI packages. No behavior change.

packages/mosaic/src/__tests__/feature/fake-fapi.ts

@@ -4,6 +4,7 @@ import type {
   ClientJSON,
   EmailAddressJSON,
   EnterpriseConnectionJSON,
+  OAuthConsentInfoJSON,
   OAuthProvider,
   OrganizationInvitationJSON,
   OrganizationJSON,
@@ -84,6 +85,8 @@ export interface FakeFapiState {
   mfa: FakeMfaState;
   activeDevices?: ActiveDeviceRecord[];
   deviceTrackingEnabled: boolean;
+  oauthConsent?: OAuthConsentInfoJSON;
+  oauthConsentRequests: URL[];
 }
 
 export interface ActiveDeviceRecord extends SessionWithActivitiesJSON {
@@ -321,6 +324,7 @@ export function serveFapi(seed: FakeFapiSeed = {}): FakeFapiState {
     waitlistEntries: [],
     enterpriseConnections: [],
     deviceTrackingEnabled: true,
+    oauthConsentRequests: [],
     mfa: createMfaState(),
     ...rest,
     verification: createVerificationState(verification),
@@ -948,6 +952,11 @@ export function serveFapi(seed: FakeFapiSeed = {}): FakeFapiState {
       state.apiKeys = state.apiKeys.map(k => (k.id === revoked.id ? revoked : k));
       return HttpResponse.json(revoked);
     }),
+    http.get(fapiUrl('/v1/me/oauth/consent/:clientId'), ({ request, params }) => {
+      state.oauthConsentRequests.push(new URL(request.url));
+      const consent = state.oauthConsent;
+      return consent?.client_id === params.clientId ? envelope(consent, null) : missing();
+    }),
   );
 
   return state;

packages/mosaic/src/__tests__/feature/fapi.ts

@@ -12,6 +12,7 @@ import type {
   EnterpriseConnectionJSON,
   EnvironmentJSON,
   ExternalAccountJSON,
+  OAuthConsentInfoJSON,
   OAuthProviders,
   OrganizationJSON,
   OrganizationMembershipJSON,
@@ -592,6 +593,22 @@ export function fapiApiKey(overrides: Partial<ApiKeyJSON> & Pick<ApiKeyJSON, 'id
   };
 }
 
+export function fapiOAuthConsentInfo(
+  overrides: Partial<OAuthConsentInfoJSON> & Pick<OAuthConsentInfoJSON, 'client_id'>,
+): OAuthConsentInfoJSON {
+  return {
+    object: 'oauth_consent_info',
+    id: overrides.client_id,
+    oauth_application_name: 'Linear',
+    oauth_application_logo_url: '',
+    oauth_application_url: 'https://linear.app',
+    state: '',
+    redirect_domain: null,
+    scopes: [],
+    ...overrides,
+  };
+}
+
 export function fapiPage<T>(data: T[], totalCount = data.length): FapiPage<T> {
   return { data, total_count: totalCount };
 }

packages/mosaic/src/components/radio/radio.test.tsx

@@ -185,6 +185,27 @@ describe('Mosaic Radio', () => {
       expect(screen.getByRole('radio', { name: 'All' })).toHaveAttribute('name', 'access');
     });
 
+    it('submits its value with a form when it has a name', () => {
+      const { container } = render(
+        <form>
+          <Group
+            name='access'
+            defaultValue='all'
+          />
+        </form>,
+      );
+      expect(formEntries(container)).toEqual([['access', 'all']]);
+    });
+
+    it('submits nothing with a form when it has no name', () => {
+      const { container } = render(
+        <form>
+          <Group defaultValue='all' />
+        </form>,
+      );
+      expect(formEntries(container)).toEqual([]);
+    });
+
     it('disables every item', () => {
       render(<Group disabled />);
       for (const radio of screen.getAllByRole('radio')) {
@@ -205,3 +226,11 @@ describe('Mosaic Radio', () => {
     });
   });
 });
+
+function formEntries(container: HTMLElement) {
+  const form = container.querySelector('form');
+  if (!form) {
+    throw new Error('Expected a form');
+  }
+  return [...new FormData(form).entries()];
+}

packages/mosaic/src/components/radio/radio.tsx

@@ -21,6 +21,7 @@ export interface RadioGroupProps
 
 interface RadioGroupContextValue {
   name: string;
+  submits: boolean;
   value: string | undefined;
   setValue: (value: string) => void;
   disabled: boolean | undefined;
@@ -39,7 +40,7 @@ const RadioGroup = React.forwardRef<HTMLDivElement, RadioGroupProps>(function Mo
     }
   });
   const context = React.useMemo<RadioGroupContextValue>(
-    () => ({ name: nameProp ?? generatedName, value, setValue, disabled }),
+    () => ({ name: nameProp ?? generatedName, submits: nameProp !== undefined, value, setValue, disabled }),
     [nameProp, generatedName, value, setValue, disabled],
   );
 
@@ -104,6 +105,7 @@ const RadioItem = React.forwardRef<HTMLInputElement, RadioItemProps>(function Mo
         type='radio'
         value={value}
         name={group?.name ?? nameProp}
+        form={group?.submits === false ? '' : undefined}
         checked={checked}
         onChange={event => {
           onChange?.(event);

packages/mosaic/src/components/reveal/reveal.styles.ts

@@ -1,6 +1,8 @@
 import * as stylex from '@stylexjs/stylex';
 
-import { durationVars, easingVars } from '../../tokens.stylex';
+import { durationVars, easingVars, focusVars } from '../../tokens.stylex';
+
+const ringRoom = `calc(${focusVars['--cl-focus-outline-width']} + ${focusVars['--cl-focus-outline-offset']})`;
 
 export const reveal = stylex.create({
   root: {
@@ -20,11 +22,14 @@ export const reveal = stylex.create({
     },
   },
   clip: {
-    overflow: 'clip',
     alignContent: 'end',
     display: 'grid',
     gridRowEnd: 'span 2',
     gridRowStart: '1',
+    marginBlockEnd: `calc(${ringRoom} * -1)`,
+    paddingBlockEnd: ringRoom,
     minHeight: 0,
+    overflowX: 'visible',
+    overflowY: 'clip',
   },
 });