chore(mosaic): enable noUncheckedIndexedAccess

.changeset/mosaic-no-unnecessary-condition.md

@@ -0,0 +1,2 @@
+---
+---

packages/mosaic/eslint-suppressions.json

@@ -94,11 +94,6 @@
       "count": 2
     }
   },
-  "src/primitives/autocomplete/autocomplete-root.tsx": {
-    "@typescript-eslint/consistent-type-assertions": {
-      "count": 1
-    }
-  },
   "src/primitives/dialog/dialog-trigger.tsx": {
     "@typescript-eslint/consistent-type-assertions": {
       "count": 1
@@ -134,16 +129,6 @@
       "count": 1
     }
   },
-  "src/primitives/select/select-root.tsx": {
-    "@typescript-eslint/consistent-type-assertions": {
-      "count": 1
-    }
-  },
-  "src/primitives/utils/css-vars.ts": {
-    "@typescript-eslint/consistent-type-assertions": {
-      "count": 1
-    }
-  },
   "src/primitives/utils/interaction-modality.ts": {
     "@typescript-eslint/consistent-type-assertions": {
       "count": 1

packages/mosaic/src/blocks/destructive/destructive.tsx

@@ -149,14 +149,12 @@ function DestructiveCard({
         <>
           <Flow.Step ids={['confirm']}>{confirmation}</Flow.Step>
           <Flow.Step ids={['verify']}>
-            {reverification ? (
-              <Reverification
-                {...reverification}
-                // This onClose isn't strictly necessary, but make sure we close as soon as possible
-                // instead of after the reverification has been reset
-                onClose={onClose}
-              />
-            ) : null}
+            <Reverification
+              {...reverification}
+              // This onClose isn't strictly necessary, but make sure we close as soon as possible
+              // instead of after the reverification has been reset
+              onClose={onClose}
+            />
           </Flow.Step>
         </>
       )}

packages/mosaic/src/components/form/form.machine.ts

@@ -23,6 +23,13 @@ export interface FieldConfig<TValue, TValues extends object> {
 
 export type FieldsConfig<TValues extends object> = { [K in keyof TValues]?: FieldConfig<TValues[K], TValues> };
 
+export function fieldConfig<TValues extends object, K extends keyof TValues>(
+  fields: FieldsConfig<TValues> | undefined,
+  name: K,
+): FieldConfig<TValues[K], TValues> | undefined {
+  return fields?.[name];
+}
+
 export interface AsyncFieldState {
   value: unknown;
   feedback: FieldFeedback | undefined;
@@ -62,7 +69,7 @@ function syncFeedback<TValues extends object>(
   context: FormContext<TValues>,
   name: keyof TValues,
 ): FieldFeedback | undefined {
-  return context.fields?.[name]?.validate?.(context.values[name], context.values);
+  return fieldConfig(context.fields, name)?.validate?.(context.values[name], context.values);
 }
 
 function settledAsyncFeedback<TValues extends object>(
@@ -180,7 +187,7 @@ function asyncStateFor<TValues extends object>(
   name: keyof TValues,
   value: TValues[keyof TValues],
 ): AsyncFieldState | undefined {
-  if (context.fields?.[name]?.validateAsync === undefined || value === initialOf(context)[name]) {
+  if (fieldConfig(context.fields, name)?.validateAsync === undefined || value === initialOf(context)[name]) {
     return undefined;
   }
   return { value, feedback: context.async[name]?.feedback, pending: true };

packages/mosaic/src/components/form/use-form.ts

@@ -5,7 +5,7 @@ import type { StateMachine } from '../../machine/types';
 import { useMachine } from '../../machine/use-machine';
 import { keysOf, mapKeys } from '../../primitives/utils/object';
 import type { FieldsConfig, FormContext, FormEvent } from './form.machine';
-import { createFormMachine, fieldFeedback, firstInvalid, initialOf, isValid } from './form.machine';
+import { createFormMachine, fieldConfig, fieldFeedback, firstInvalid, initialOf, isValid } from './form.machine';
 import type { FieldFeedback } from './form-submit-error';
 
 export interface UseFormOptions<TValues extends object> {
@@ -114,7 +114,7 @@ export function useForm<TValues extends object>(options: UseFormOptions<TValues>
     <K extends keyof TValues>(name: K, value: TValues[K]) => {
       send({ type: 'CHANGE', name, value });
       const { async, fields, values: next } = actor.getSnapshot().context;
-      const validateAsync = fields?.[name]?.validateAsync;
+      const validateAsync = fieldConfig(fields, name)?.validateAsync;
       if (validateAsync === undefined || async[name]?.pending !== true || async[name].value !== value) {
         return;
       }

packages/mosaic/src/features/organization-profile/__tests__/organization-profile.view.test.tsx

@@ -20,3 +20,20 @@ it('keeps the Members placeholder until a table is configured', () => {
 
   expect(screen.getByText('Members is not built yet.')).toBeVisible();
 });
+
+it('warns when there are no pages to show', () => {
+  const warn = vi.spyOn(console, 'warn').mockImplementation(() => {});
+
+  render(
+    <MosaicProvider>
+      <OrganizationProfileView
+        activePage='general'
+        onPageChange={vi.fn()}
+        pages={{}}
+      />
+    </MosaicProvider>,
+  );
+
+  expect(warn).toHaveBeenCalledWith('[Clerk] OrganizationProfile has no pages to show.');
+  warn.mockRestore();
+});

packages/mosaic/src/features/organization-profile/organization-profile-invite-members.dialog.tsx

@@ -119,7 +119,7 @@ export function OrganizationProfileInviteMembersDialog({
               <Select.Root
                 items={roles}
                 value={role ?? undefined}
-                onValueChange={value => onRoleChange(value ?? null)}
+                onValueChange={onRoleChange}
               >
                 <Select.Trigger placeholder={m.rolePlaceholder} />
                 <Select.Popup />

packages/mosaic/src/features/organization-profile/organization-profile.view.tsx

@@ -1,3 +1,4 @@
+import { logger } from '@clerk/shared/logger';
 import React from 'react';
 
 import { Icon } from '../../components/icon';
@@ -58,7 +59,11 @@ export const OrganizationProfileView = React.forwardRef<HTMLDivElement, Organiza
       customPages,
       pageOrder,
     );
-    const resolvedPage = entries.some(entry => entry.id === activePage) ? activePage : entries[0].id;
+    const firstPage = entries[0];
+    if (!firstPage) {
+      logger.warnOnce('[Clerk] OrganizationProfile has no pages to show.');
+    }
+    const resolvedPage = entries.some(entry => entry.id === activePage) ? activePage : (firstPage?.id ?? 'general');
 
     return (
       <Profile.Root

packages/mosaic/src/features/organization-profile/requests-table-tab.view.tsx

@@ -251,7 +251,7 @@ function RequestActions({
             variant='outline'
             color='neutral'
             aria-label={fill(m.declineRequest, { name: request.name ?? request.email })}
-            onClick={() => decide('decline', () => onDecline?.(), m.declineError)}
+            onClick={() => decide('decline', onDecline, m.declineError)}
           >
             {m.decline}
           </SubmitButton>
@@ -265,7 +265,7 @@ function RequestActions({
             isPending={pendingAction === 'accept'}
             pendingLabel={m.accepting}
             aria-label={fill(m.acceptRequest, { name: request.name ?? request.email })}
-            onClick={() => decide('accept', () => onAccept?.(), m.acceptError)}
+            onClick={() => decide('accept', onAccept, m.acceptError)}
           >
             {m.accept}
           </SubmitButton>

packages/mosaic/src/features/user-profile/__tests__/user-profile-account-section.model.test.tsx

@@ -36,7 +36,9 @@ let user: {
   update: ReturnType<typeof vi.fn>;
 } | null;
 let activeUser: typeof user;
-let attributes: Record<'first_name' | 'last_name' | 'username' | 'email_address' | 'phone_number', FakeAttribute>;
+let attributes: Partial<
+  Record<'first_name' | 'last_name' | 'username' | 'email_address' | 'phone_number', FakeAttribute>
+>;
 let usernameSettings: { min_length: number; max_length: number };
 let environmentHydrated: boolean;
 
@@ -317,6 +319,12 @@ describe('useUserProfileAccountSectionModel', () => {
       expect(ready().username).toBeUndefined();
     });
 
+    it('is hidden and optional when the environment omits the username attribute', () => {
+      delete attributes.username;
+      expect(ready().username).toBeUndefined();
+      expect(ready().usernameRequired).toBe(false);
+    });
+
     it('stays available when usernames only sign in', () => {
       attributes.username = attribute({ enabled: false, used_for_first_factor: true });
       expect(ready().username).toBe('prestonxyz');

packages/mosaic/src/features/user-profile/__tests__/user-profile.view.test.tsx

@@ -152,4 +152,13 @@ describe('UserProfileView', () => {
     expect(popup).toContainElement(screen.getByRole('button', { name: 'Close' }));
     expect(popup).toContainElement(screen.getByRole('tab', { name: 'Security' }));
   });
+
+  it('warns when there are no pages to show', () => {
+    const warn = vi.spyOn(console, 'warn').mockImplementation(() => {});
+
+    renderView({ pages: {} });
+
+    expect(warn).toHaveBeenCalledWith('[Clerk] UserProfile has no pages to show.');
+    warn.mockRestore();
+  });
 });

packages/mosaic/src/features/user-profile/user-profile-account-section/user-profile-account-section.model.ts

@@ -1,6 +1,6 @@
 import { getFullName } from '@clerk/shared/internal/clerk-js/user';
 import { useClerk, useUser } from '@clerk/shared/react';
-import type { AttributeData, EnterpriseAccountResource, UserResource } from '@clerk/shared/types';
+import type { AttributeData, Attributes, EnterpriseAccountResource, UserResource } from '@clerk/shared/types';
 
 import { useMosaicEnvironment } from '../../../hooks/use-mosaic-environment';
 import type { MessageValues } from '../../../localization';
@@ -111,7 +111,8 @@ export function useUserProfileAccountSectionModel(): UserProfileAccountSectionMo
       params,
     );
 
-  const { attributes, usernameSettings } = environment.userSettings;
+  const { usernameSettings } = environment.userSettings;
+  const attributes: Partial<Attributes> = environment.userSettings.attributes;
   const usernameAttribute = attributes.username;
   const usernameImmutable = Boolean(usernameAttribute?.immutable);
   const showUsername = isAttributeAvailable(usernameAttribute) && !(usernameImmutable && !user.username);

packages/mosaic/src/features/user-profile/user-profile-device-details.dialog.tsx

@@ -92,7 +92,7 @@ function DeviceDetailsCard({
             isPending={signOut.isPending}
             onClick={() =>
               void signOut.run('sign-out', async () => {
-                await onSignOut?.(device);
+                await onSignOut(device);
                 handle.close();
               })
             }

packages/mosaic/src/features/user-profile/user-profile-password-section/__tests__/user-profile-password-feedback.test.ts

@@ -183,6 +183,13 @@ describe('password error feedback', () => {
       format([{ code: 'form_password_not_strong_enough', message: 'raw', meta: { param_name: 'new_password' } }]).fields
         ?.newPassword,
     ).toBe('Your password is not strong enough.');
+    expect(
+      format(
+        JSON.parse(
+          '[{"code":"form_password_not_strong_enough","message":"raw","meta":{"param_name":"new_password","zxcvbn":{}}}]',
+        ),
+      ).fields?.newPassword,
+    ).toBe('Your password is not strong enough.');
     expect(
       format([
         {

packages/mosaic/src/features/user-profile/user-profile-password-section/user-profile-password-errors.ts

@@ -40,7 +40,8 @@ function passwordError(
     return undefined;
   }
   if (first.code === 'form_password_not_strong_enough') {
-    return passwordStrengthMessage(first.meta?.zxcvbn?.suggestions?.map(suggestion => suggestion.code) ?? [], messages);
+    const suggestions: { code: string }[] | undefined = first.meta?.zxcvbn?.suggestions;
+    return passwordStrengthMessage(suggestions?.map(suggestion => suggestion.code) ?? [], messages);
   }
   const failures = errors.flatMap(error => {
     const code = passwordComplexityCodes.get(error.code);

packages/mosaic/src/features/user-profile/user-profile.view.tsx

@@ -1,3 +1,4 @@
+import { logger } from '@clerk/shared/logger';
 import React from 'react';
 
 import { Icon } from '../../components/icon';
@@ -51,7 +52,11 @@ export const UserProfileView = React.forwardRef<HTMLDivElement, UserProfileViewP
 ) {
   const m = useMessages('userProfile');
   const entries = resolveUserProfilePages(getAvailableUserProfilePages(pages), customPages, pageOrder);
-  const resolvedPage = entries.some(entry => entry.id === activePage) ? activePage : entries[0].id;
+  const firstPage = entries[0];
+  if (!firstPage) {
+    logger.warnOnce('[Clerk] UserProfile has no pages to show.');
+  }
+  const resolvedPage = entries.some(entry => entry.id === activePage) ? activePage : (firstPage?.id ?? 'account');
 
   return (
     <Profile.Root

packages/mosaic/src/hooks/use-accessible-description-warning.ts

@@ -37,7 +37,7 @@ export function useAccessibleDescriptionWarning(
       const described = describedBy
         ?.split(/\s+/)
         .filter(Boolean)
-        .some(id => node.ownerDocument.getElementById(id)?.textContent?.trim());
+        .some(id => node.ownerDocument.getElementById(id)?.textContent.trim());
       if (described) {
         return;
       }

packages/mosaic/src/hooks/use-accessible-name-warning.ts

@@ -37,7 +37,7 @@ export function useAccessibleNameWarning(node: HTMLElement | null, component: st
       const named = labelledBy
         ?.split(/\s+/)
         .filter(Boolean)
-        .some(id => node.ownerDocument.getElementById(id)?.textContent?.trim());
+        .some(id => node.ownerDocument.getElementById(id)?.textContent.trim());
       if (named) {
         return;
       }

packages/mosaic/src/localization/context.tsx

@@ -29,8 +29,9 @@ function merge(base: unknown, overrides: unknown): unknown {
     if (value === undefined) {
       continue;
     }
-    const [head, ...rest] = key.split('.');
-    const nested = rest.length > 0 ? { [rest.join('.')]: value } : value;
+    const dot = key.indexOf('.');
+    const head = dot === -1 ? key : key.slice(0, dot);
+    const nested = dot === -1 ? value : { [key.slice(dot + 1)]: value };
     result = { ...result, [head]: merge(result[head], nested) };
   }
   return result;