chore(ui): Cherry pick APIKeys naming changes

packages/clerk-js/sandbox/app.ts

@@ -325,7 +325,7 @@ void (async () => {
       Clerk.mountPricingTable(app, componentControls.pricingTable.getProps() ?? {});
     },
     '/api-keys': () => {
-      Clerk.mountApiKeys(app, componentControls.apiKeys.getProps() ?? {});
+      Clerk.mountAPIKeys(app, componentControls.apiKeys.getProps() ?? {});
     },
     '/oauth-consent': () => {
       const searchParams = new URLSearchParams(window.location.search);

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

@@ -1204,7 +1204,7 @@ export class Clerk implements ClerkInterface {
    * @param targetNode Target to mount the APIKeys component.
    * @param props Configuration parameters.
    */
-  public mountApiKeys = (node: HTMLDivElement, props?: APIKeysProps) => {
+  public mountAPIKeys = (node: HTMLDivElement, props?: APIKeysProps) => {
     logger.warnOnce('Clerk: <APIKeys /> component is in early access and not yet recommended for production use.');
 
     if (disabledAllAPIKeysFeatures(this, this.environment)) {
@@ -1258,7 +1258,7 @@ export class Clerk implements ClerkInterface {
    *
    * @param targetNode Target node to unmount the ApiKeys component from.
    */
-  public unmountApiKeys = (node: HTMLDivElement) => {
+  public unmountAPIKeys = (node: HTMLDivElement) => {
     void this.#clerkUi?.then(ui => ui.ensureMounted()).then(controls => controls.unmountComponent({ node }));
   };
 

packages/react/src/components/uiComponents.tsx

@@ -628,8 +628,8 @@ export const APIKeys = withClerk(
         {clerk.loaded && (
           <ClerkHostRenderer
             component={component}
-            mount={clerk.mountApiKeys}
-            unmount={clerk.unmountApiKeys}
+            mount={clerk.mountAPIKeys}
+            unmount={clerk.unmountAPIKeys}
             updateProps={(clerk as any).__unstable__updateProps}
             props={props}
             rootProps={rendererRootProps}

packages/react/src/isomorphicClerk.ts

@@ -145,7 +145,7 @@ export class IsomorphicClerk implements IsomorphicLoadedClerk {
   private premountMethodCalls = new Map<MethodName<BrowserClerk>, MethodCallback>();
   private premountWaitlistNodes = new Map<HTMLDivElement, WaitlistProps | undefined>();
   private premountPricingTableNodes = new Map<HTMLDivElement, PricingTableProps | undefined>();
-  private premountApiKeysNodes = new Map<HTMLDivElement, APIKeysProps | undefined>();
+  private premountAPIKeysNode = new Map<HTMLDivElement, APIKeysProps | undefined>();
   private premountOAuthConsentNodes = new Map<HTMLDivElement, __internal_OAuthConsentProps | undefined>();
   private premountTaskChooseOrganizationNodes = new Map<HTMLDivElement, TaskChooseOrganizationProps | undefined>();
 
@@ -661,8 +661,8 @@ export class IsomorphicClerk implements IsomorphicLoadedClerk {
       clerkjs.mountPricingTable(node, props);
     });
 
-    this.premountApiKeysNodes.forEach((props, node) => {
-      clerkjs.mountApiKeys(node, props);
+    this.premountAPIKeysNode.forEach((props, node) => {
+      clerkjs.mountAPIKeys(node, props);
     });
 
     this.premountOAuthConsentNodes.forEach((props, node) => {
@@ -1151,19 +1151,19 @@ export class IsomorphicClerk implements IsomorphicLoadedClerk {
     }
   };
 
-  mountApiKeys = (node: HTMLDivElement, props?: APIKeysProps): void => {
+  mountAPIKeys = (node: HTMLDivElement, props?: APIKeysProps): void => {
     if (this.clerkjs && this.loaded) {
-      this.clerkjs.mountApiKeys(node, props);
+      this.clerkjs.mountAPIKeys(node, props);
     } else {
-      this.premountApiKeysNodes.set(node, props);
+      this.premountAPIKeysNode.set(node, props);
     }
   };
 
-  unmountApiKeys = (node: HTMLDivElement): void => {
+  unmountAPIKeys = (node: HTMLDivElement): void => {
     if (this.clerkjs && this.loaded) {
-      this.clerkjs.unmountApiKeys(node);
+      this.clerkjs.unmountAPIKeys(node);
     } else {
-      this.premountApiKeysNodes.delete(node);
+      this.premountAPIKeysNode.delete(node);
     }
   };
 

packages/shared/src/react/hooks/useAPIKeys.ts

@@ -9,7 +9,7 @@ import { usePagesOrInfinite, useWithSafeValues } from './usePagesOrInfinite';
 /**
  * @interface
  */
-export type UseApiKeysParams = PaginatedHookConfig<
+export type UseAPIKeysParams = PaginatedHookConfig<
   GetAPIKeysParams & {
     /**
      * If `true`, a request will be triggered when the hook is mounted.
@@ -23,19 +23,19 @@ export type UseApiKeysParams = PaginatedHookConfig<
 /**
  * @interface
  */
-export type UseApiKeysReturn<T extends UseApiKeysParams> = PaginatedResources<
+export type UseAPIKeysReturn<T extends UseAPIKeysParams> = PaginatedResources<
   APIKeyResource,
   T extends { infinite: true } ? true : false
 >;
 
 /**
- * The `useApiKeys()` hook provides access to paginated API keys for the current user or organization.
+ * The `useAPIKeys()` hook provides access to paginated API keys for the current user or organization.
  *
  * @example
  * ### Basic usage with default pagination
  *
  * ```tsx
- * const { data, isLoading, page, pageCount, fetchNext, fetchPrevious } = useApiKeys({
+ * const { data, isLoading, page, pageCount, fetchNext, fetchPrevious } = useAPIKeys({
  *   subject: 'user_123',
  *   pageSize: 10,
  *   initialPage: 1,
@@ -49,7 +49,7 @@ export type UseApiKeysReturn<T extends UseApiKeysParams> = PaginatedResources<
  * const [searchValue, setSearchValue] = useState('');
  * const debouncedSearch = useDebounce(searchValue, 500);
  *
- * const { data, isLoading } = useApiKeys({
+ * const { data, isLoading } = useAPIKeys({
  *   subject: 'user_123',
  *   query: debouncedSearch.trim(),
  *   pageSize: 10,
@@ -60,13 +60,13 @@ export type UseApiKeysReturn<T extends UseApiKeysParams> = PaginatedResources<
  * ### Infinite scroll
  *
  * ```tsx
- * const { data, isLoading, fetchNext, hasNextPage } = useApiKeys({
+ * const { data, isLoading, fetchNext, hasNextPage } = useAPIKeys({
  *   subject: 'user_123',
  *   infinite: true,
  * });
  * ```
  */
-export function useApiKeys<T extends UseApiKeysParams>(params?: T): UseApiKeysReturn<T> {
+export function useApiKeys<T extends UseAPIKeysParams>(params?: T): UseAPIKeysReturn<T> {
   useAssertWrappedByClerkProvider('useApiKeys');
 
   const safeValues = useWithSafeValues(params, {
@@ -77,7 +77,7 @@ export function useApiKeys<T extends UseApiKeysParams>(params?: T): UseApiKeysRe
     subject: '',
     query: '',
     enabled: true,
-  } as UseApiKeysParams);
+  } as UseAPIKeysParams);
 
   const clerk = useClerkInstanceContext();
 
@@ -104,5 +104,5 @@ export function useApiKeys<T extends UseApiKeysParams>(params?: T): UseApiKeysRe
       type: 'apiKeys',
       subject: safeValues.subject || '',
     },
-  ) as UseApiKeysReturn<T>;
+  ) as UseAPIKeysReturn<T>;
 }

packages/shared/src/types/clerk.ts

@@ -585,7 +585,7 @@ export interface Clerk {
    * @param targetNode - Target to mount the APIKeys component.
    * @param props - Configuration parameters.
    */
-  mountApiKeys: (targetNode: HTMLDivElement, props?: APIKeysProps) => void;
+  mountAPIKeys: (targetNode: HTMLDivElement, props?: APIKeysProps) => void;
 
   /**
    * This API is in early access and may change in future releases.
@@ -597,7 +597,7 @@ export interface Clerk {
    *
    * @param targetNode - Target node to unmount the ApiKeys component from.
    */
-  unmountApiKeys: (targetNode: HTMLDivElement) => void;
+  unmountAPIKeys: (targetNode: HTMLDivElement) => void;
 
   /**
    * Mounts a OAuth consent component at the target element.

packages/ui/src/components/ApiKeys/ApiKeys.tsx → packages/ui/src/components/APIKeys/APIKeys.tsx

@@ -27,8 +27,8 @@ import { MagnifyingGlass } from '@/ui/icons';
 import { mqu } from '@/ui/styledSystem';
 
 import { APIKeysTable } from './ApiKeysTable';
-import type { OnCreateParams } from './CreateApiKeyForm';
-import { CreateAPIKeyForm } from './CreateApiKeyForm';
+import type { OnCreateParams } from './CreateAPIKeyForm';
+import { CreateAPIKeyForm } from './CreateAPIKeyForm';
 import { useAPIKeysPagination } from './utils';
 
 type APIKeysPageProps = {

packages/ui/src/components/ApiKeys/__tests__/ApiKeys.spec.tsx → packages/ui/src/components/APIKeys/__tests__/APIKeys.spec.tsx

@@ -3,7 +3,7 @@ import { describe, expect, it, vi } from 'vitest';
 import { bindCreateFixtures } from '@/test/create-fixtures';
 import { render, waitFor } from '@/test/utils';
 
-import { APIKeys } from '../ApiKeys';
+import { APIKeys } from '../APIKeys';
 
 const { createFixtures } = bindCreateFixtures('APIKeys');
 

packages/ui/src/components/OrganizationProfile/OrganizationApiKeysPage.tsx → packages/ui/src/components/OrganizationProfile/OrganizationAPIKeysPage.tsx

@@ -5,7 +5,7 @@ import { Col, localizationKeys } from '@/ui/customizables';
 import { Header } from '@/ui/elements/Header';
 import { useUnsafeNavbarContext } from '@/ui/elements/Navbar';
 
-import { APIKeysPage } from '../ApiKeys/ApiKeys';
+import { APIKeysPage } from '../APIKeys/APIKeys';
 
 export const OrganizationAPIKeysPage = () => {
   const { organization } = useOrganization();

packages/ui/src/components/OrganizationProfile/OrganizationProfileRoutes.tsx

@@ -14,7 +14,7 @@ const OrganizationBillingPage = lazy(() =>
 );
 
 const OrganizationAPIKeysPage = lazy(() =>
-  import(/* webpackChunkName: "op-api-keys-page"*/ './OrganizationApiKeysPage').then(module => ({
+  import(/* webpackChunkName: "op-api-keys-page"*/ './OrganizationAPIKeysPage').then(module => ({
     default: module.OrganizationAPIKeysPage,
   })),
 );

packages/ui/src/components/UserProfile/ApiKeysPage.tsx → packages/ui/src/components/UserProfile/APIKeysPage.tsx

@@ -5,7 +5,7 @@ import { Col, descriptors, localizationKeys } from '@/ui/customizables';
 import { Header } from '@/ui/elements/Header';
 import { useUnsafeNavbarContext } from '@/ui/elements/Navbar';
 
-import { APIKeysPage as APIKeysPageInternal } from '../ApiKeys/ApiKeys';
+import { APIKeysPage as APIKeysPageInternal } from '../APIKeys/APIKeys';
 
 export const APIKeysPage = () => {
   const { user } = useUser();

packages/ui/src/components/UserProfile/UserProfileRoutes.tsx

@@ -14,7 +14,7 @@ const BillingPage = lazy(() =>
 );
 
 const APIKeysPage = lazy(() =>
-  import(/* webpackChunkName: "up-api-keys-page"*/ './ApiKeysPage').then(module => ({
+  import(/* webpackChunkName: "up-api-keys-page"*/ './APIKeysPage').then(module => ({
     default: module.APIKeysPage,
   })),
 );

packages/ui/src/contexts/components/index.ts

@@ -1,4 +1,4 @@
-export * from './ApiKeys';
+export * from './APIKeys';
 export * from './Checkout';
 export * from './CreateOrganization';
 export * from './GoogleOneTap';

packages/ui/src/lazyModules/components.ts

@@ -25,7 +25,7 @@ const componentImportPaths = {
     import(/* webpackChunkName: "taskChooseOrganization" */ '../components/SessionTasks/tasks/TaskChooseOrganization'),
   PlanDetails: () => import(/* webpackChunkName: "planDetails" */ '../components/Plans/PlanDetails'),
   SubscriptionDetails: () => import(/* webpackChunkName: "subscriptionDetails" */ '../components/SubscriptionDetails'),
-  APIKeys: () => import(/* webpackChunkName: "apiKeys" */ '../components/ApiKeys/ApiKeys'),
+  APIKeys: () => import(/* webpackChunkName: "apiKeys" */ '../components/APIKeys/APIKeys'),
   OAuthConsent: () => import(/* webpackChunkName: "oauthConsent" */ '../components/OAuthConsent/OAuthConsent'),
 } as const;