diff --git a/packages/clerk-js/sandbox/app.ts b/packages/clerk-js/sandbox/app.ts
index 6132a5f5025..52ae6a4f4d9 100644
--- a/packages/clerk-js/sandbox/app.ts
+++ b/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);
diff --git a/packages/clerk-js/src/core/clerk.ts b/packages/clerk-js/src/core/clerk.ts
index 701d5e80e31..e21bd1869f3 100644
--- a/packages/clerk-js/src/core/clerk.ts
+++ b/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: 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 }));
};
diff --git a/packages/react/src/components/uiComponents.tsx b/packages/react/src/components/uiComponents.tsx
index 08f2268fa24..e1889849582 100644
--- a/packages/react/src/components/uiComponents.tsx
+++ b/packages/react/src/components/uiComponents.tsx
@@ -628,8 +628,8 @@ export const APIKeys = withClerk(
{clerk.loaded && (
, MethodCallback>();
private premountWaitlistNodes = new Map();
private premountPricingTableNodes = new Map();
- private premountApiKeysNodes = new Map();
+ private premountAPIKeysNode = new Map();
private premountOAuthConsentNodes = new Map();
private premountTaskChooseOrganizationNodes = new Map();
@@ -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);
}
};
diff --git a/packages/shared/src/react/hooks/useAPIKeys.ts b/packages/shared/src/react/hooks/useAPIKeys.ts
index c090bdf2692..e00dfa13b7f 100644
--- a/packages/shared/src/react/hooks/useAPIKeys.ts
+++ b/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 = PaginatedResources<
+export type UseAPIKeysReturn = 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 = 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 = PaginatedResources<
* ### Infinite scroll
*
* ```tsx
- * const { data, isLoading, fetchNext, hasNextPage } = useApiKeys({
+ * const { data, isLoading, fetchNext, hasNextPage } = useAPIKeys({
* subject: 'user_123',
* infinite: true,
* });
* ```
*/
-export function useApiKeys(params?: T): UseApiKeysReturn {
+export function useApiKeys(params?: T): UseAPIKeysReturn {
useAssertWrappedByClerkProvider('useApiKeys');
const safeValues = useWithSafeValues(params, {
@@ -77,7 +77,7 @@ export function useApiKeys(params?: T): UseApiKeysRe
subject: '',
query: '',
enabled: true,
- } as UseApiKeysParams);
+ } as UseAPIKeysParams);
const clerk = useClerkInstanceContext();
@@ -104,5 +104,5 @@ export function useApiKeys(params?: T): UseApiKeysRe
type: 'apiKeys',
subject: safeValues.subject || '',
},
- ) as UseApiKeysReturn;
+ ) as UseAPIKeysReturn;
}
diff --git a/packages/shared/src/types/clerk.ts b/packages/shared/src/types/clerk.ts
index 619acc43070..3c1de594f51 100644
--- a/packages/shared/src/types/clerk.ts
+++ b/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.
diff --git a/packages/ui/src/components/ApiKeys/APIKeyModal.tsx b/packages/ui/src/components/APIKeys/APIKeyModal.tsx
similarity index 100%
rename from packages/ui/src/components/ApiKeys/APIKeyModal.tsx
rename to packages/ui/src/components/APIKeys/APIKeyModal.tsx
diff --git a/packages/ui/src/components/ApiKeys/ApiKeys.tsx b/packages/ui/src/components/APIKeys/APIKeys.tsx
similarity index 98%
rename from packages/ui/src/components/ApiKeys/ApiKeys.tsx
rename to packages/ui/src/components/APIKeys/APIKeys.tsx
index 4186cfb93e1..b191c0c7f87 100644
--- a/packages/ui/src/components/ApiKeys/ApiKeys.tsx
+++ b/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 = {
diff --git a/packages/ui/src/components/ApiKeys/ApiKeysTable.tsx b/packages/ui/src/components/APIKeys/ApiKeysTable.tsx
similarity index 100%
rename from packages/ui/src/components/ApiKeys/ApiKeysTable.tsx
rename to packages/ui/src/components/APIKeys/ApiKeysTable.tsx
diff --git a/packages/ui/src/components/ApiKeys/CopyAPIKeyModal.tsx b/packages/ui/src/components/APIKeys/CopyAPIKeyModal.tsx
similarity index 100%
rename from packages/ui/src/components/ApiKeys/CopyAPIKeyModal.tsx
rename to packages/ui/src/components/APIKeys/CopyAPIKeyModal.tsx
diff --git a/packages/ui/src/components/ApiKeys/CreateApiKeyForm.tsx b/packages/ui/src/components/APIKeys/CreateAPIKeyForm.tsx
similarity index 100%
rename from packages/ui/src/components/ApiKeys/CreateApiKeyForm.tsx
rename to packages/ui/src/components/APIKeys/CreateAPIKeyForm.tsx
diff --git a/packages/ui/src/components/ApiKeys/RevokeAPIKeyConfirmationModal.tsx b/packages/ui/src/components/APIKeys/RevokeAPIKeyConfirmationModal.tsx
similarity index 100%
rename from packages/ui/src/components/ApiKeys/RevokeAPIKeyConfirmationModal.tsx
rename to packages/ui/src/components/APIKeys/RevokeAPIKeyConfirmationModal.tsx
diff --git a/packages/ui/src/components/ApiKeys/__tests__/ApiKeys.spec.tsx b/packages/ui/src/components/APIKeys/__tests__/APIKeys.spec.tsx
similarity index 98%
rename from packages/ui/src/components/ApiKeys/__tests__/ApiKeys.spec.tsx
rename to packages/ui/src/components/APIKeys/__tests__/APIKeys.spec.tsx
index 2f3dbce9082..b6e0a847c24 100644
--- a/packages/ui/src/components/ApiKeys/__tests__/ApiKeys.spec.tsx
+++ b/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');
diff --git a/packages/ui/src/components/ApiKeys/utils.ts b/packages/ui/src/components/APIKeys/utils.ts
similarity index 100%
rename from packages/ui/src/components/ApiKeys/utils.ts
rename to packages/ui/src/components/APIKeys/utils.ts
diff --git a/packages/ui/src/components/OrganizationProfile/OrganizationApiKeysPage.tsx b/packages/ui/src/components/OrganizationProfile/OrganizationAPIKeysPage.tsx
similarity index 95%
rename from packages/ui/src/components/OrganizationProfile/OrganizationApiKeysPage.tsx
rename to packages/ui/src/components/OrganizationProfile/OrganizationAPIKeysPage.tsx
index b62a6f90fc3..aa661a2e38d 100644
--- a/packages/ui/src/components/OrganizationProfile/OrganizationApiKeysPage.tsx
+++ b/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();
diff --git a/packages/ui/src/components/OrganizationProfile/OrganizationProfileRoutes.tsx b/packages/ui/src/components/OrganizationProfile/OrganizationProfileRoutes.tsx
index 40600731fa3..22588a8588b 100644
--- a/packages/ui/src/components/OrganizationProfile/OrganizationProfileRoutes.tsx
+++ b/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,
})),
);
diff --git a/packages/ui/src/components/UserProfile/ApiKeysPage.tsx b/packages/ui/src/components/UserProfile/APIKeysPage.tsx
similarity index 93%
rename from packages/ui/src/components/UserProfile/ApiKeysPage.tsx
rename to packages/ui/src/components/UserProfile/APIKeysPage.tsx
index 630220d7750..98d64d2bcb0 100644
--- a/packages/ui/src/components/UserProfile/ApiKeysPage.tsx
+++ b/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();
diff --git a/packages/ui/src/components/UserProfile/UserProfileRoutes.tsx b/packages/ui/src/components/UserProfile/UserProfileRoutes.tsx
index edce7308bed..cf9899370af 100644
--- a/packages/ui/src/components/UserProfile/UserProfileRoutes.tsx
+++ b/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,
})),
);
diff --git a/packages/ui/src/contexts/components/ApiKeys.ts b/packages/ui/src/contexts/components/APIKeys.ts
similarity index 100%
rename from packages/ui/src/contexts/components/ApiKeys.ts
rename to packages/ui/src/contexts/components/APIKeys.ts
diff --git a/packages/ui/src/contexts/components/index.ts b/packages/ui/src/contexts/components/index.ts
index 3afdda296bf..4242c494ad6 100644
--- a/packages/ui/src/contexts/components/index.ts
+++ b/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';
diff --git a/packages/ui/src/lazyModules/components.ts b/packages/ui/src/lazyModules/components.ts
index 727627e16dc..3a5ecee7a9c 100644
--- a/packages/ui/src/lazyModules/components.ts
+++ b/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;