diff --git a/.changeset/busy-sloths-joke.md b/.changeset/busy-sloths-joke.md new file mode 100644 index 00000000000..c62f58cc461 --- /dev/null +++ b/.changeset/busy-sloths-joke.md @@ -0,0 +1,14 @@ +--- +'@clerk/tanstack-react-start': minor +'@clerk/react-router': minor +'@clerk/clerk-js': minor +'@clerk/nextjs': minor +'@clerk/shared': minor +'@clerk/astro': minor +'@clerk/react': minor +'@clerk/nuxt': minor +'@clerk/vue': minor +'@clerk/ui': minor +--- + +Remove `` from experimental path diff --git a/packages/astro/src/astro-components/index.ts b/packages/astro/src/astro-components/index.ts index facc4145374..0d50e3a1e92 100644 --- a/packages/astro/src/astro-components/index.ts +++ b/packages/astro/src/astro-components/index.ts @@ -31,4 +31,4 @@ export { default as Waitlist } from './interactive/Waitlist.astro'; export { default as OAuthConsent } from './interactive/OAuthConsent.astro'; export { default as PricingTable } from './interactive/PricingTable.astro'; export { default as APIKeys } from './interactive/APIKeys.astro'; -export { default as __experimental_ConfigureSSO } from './interactive/ConfigureSSO.astro'; +export { default as ConfigureSSO } from './interactive/ConfigureSSO.astro'; diff --git a/packages/astro/src/astro-components/interactive/ConfigureSSO.astro b/packages/astro/src/astro-components/interactive/ConfigureSSO.astro index 9fdb7bf37f0..c1f00cb798e 100644 --- a/packages/astro/src/astro-components/interactive/ConfigureSSO.astro +++ b/packages/astro/src/astro-components/interactive/ConfigureSSO.astro @@ -1,6 +1,6 @@ --- -import type { __experimental_ConfigureSSOProps } from '@clerk/shared/types'; -type Props = __experimental_ConfigureSSOProps; +import type { ConfigureSSOProps } from '@clerk/shared/types'; +type Props = ConfigureSSOProps; import InternalUIComponentRenderer from './InternalUIComponentRenderer.astro'; --- diff --git a/packages/astro/src/internal/mount-clerk-astro-js-components.ts b/packages/astro/src/internal/mount-clerk-astro-js-components.ts index c4a6ac81ed8..26fcb937350 100644 --- a/packages/astro/src/internal/mount-clerk-astro-js-components.ts +++ b/packages/astro/src/internal/mount-clerk-astro-js-components.ts @@ -21,7 +21,7 @@ const mountAllClerkAstroJSComponents = () => { waitlist: 'mountWaitlist', 'pricing-table': 'mountPricingTable', 'api-keys': 'mountAPIKeys', - 'configure-sso': '__experimental_mountConfigureSSO', + 'configure-sso': 'mountConfigureSSO', } as const satisfies Record; Object.entries(mountFns).forEach(([category, mountFn]) => { diff --git a/packages/clerk-js/sandbox/app.ts b/packages/clerk-js/sandbox/app.ts index 8cb62856aed..c33cecae45c 100644 --- a/packages/clerk-js/sandbox/app.ts +++ b/packages/clerk-js/sandbox/app.ts @@ -471,7 +471,7 @@ void (async () => { Clerk.mountAPIKeys(app, componentControls.apiKeys.getProps() ?? {}); }, '/configure-sso': () => { - Clerk.__experimental_mountConfigureSSO(app, componentControls.configureSSO.getProps() ?? {}); + Clerk.mountConfigureSSO(app, componentControls.configureSSO.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 d1350e66c26..c96ae678925 100644 --- a/packages/clerk-js/src/core/clerk.ts +++ b/packages/clerk-js/src/core/clerk.ts @@ -55,7 +55,6 @@ import { } from '@clerk/shared/telemetry'; import type { __experimental_CheckoutOptions, - __experimental_ConfigureSSOProps, __internal_AttemptToEnableEnvironmentSettingParams, __internal_AttemptToEnableEnvironmentSettingResult, __internal_CheckoutProps, @@ -80,6 +79,7 @@ import type { ClerkOptions, ClientJSONSnapshot, ClientResource, + ConfigureSSOProps, CreateOrganizationParams, CreateOrganizationProps, CredentialReturn, @@ -1458,11 +1458,10 @@ export class Clerk implements ClerkInterface { /** * Mount a configure SSO component at the target element. * - * @experimental * @param targetNode Target to mount the ConfigureSSO component. * @param props Configuration parameters. */ - public __experimental_mountConfigureSSO = (node: HTMLDivElement, props?: __experimental_ConfigureSSOProps) => { + public mountConfigureSSO = (node: HTMLDivElement, props?: ConfigureSSOProps) => { if (disabledSelfServeSSOFeature(this, this.environment)) { if (this.#instanceType === 'development') { throw new ClerkRuntimeError(warnings.cannotRenderConfigureSSOComponentWhenDisabled, { @@ -1497,7 +1496,7 @@ export class Clerk implements ClerkInterface { .then(controls => controls.mountComponent({ name: component, - appearanceKey: '__experimental_configureSSO', + appearanceKey: 'configureSSO', node, props, }), @@ -1510,13 +1509,26 @@ export class Clerk implements ClerkInterface { * Unmount a configure SSO component from the target element. * If there is no component mounted at the target node, results in a noop. * - * @experimental * @param targetNode Target node to unmount the ConfigureSSO component from. */ - public __experimental_unmountConfigureSSO = (node: HTMLDivElement) => { + public unmountConfigureSSO = (node: HTMLDivElement) => { void this.#clerkUI?.then(ui => ui.ensureMounted()).then(controls => controls.unmountComponent({ node })); }; + /** + * @deprecated Use `mountConfigureSSO` instead. + */ + public __experimental_mountConfigureSSO = (node: HTMLDivElement, props?: ConfigureSSOProps) => { + return this.mountConfigureSSO(node, props); + }; + + /** + * @deprecated Use `unmountConfigureSSO` instead. + */ + public __experimental_unmountConfigureSSO = (node: HTMLDivElement) => { + return this.unmountConfigureSSO(node); + }; + public mountTaskChooseOrganization = (node: HTMLDivElement, props?: TaskChooseOrganizationProps) => { const { isEnabled: isOrganizationsEnabled } = this.__internal_attemptToEnableEnvironmentSetting({ for: 'organizations', diff --git a/packages/nextjs/src/client-boundary/uiComponents.tsx b/packages/nextjs/src/client-boundary/uiComponents.tsx index f6f65fad650..18c8a8e9ccb 100644 --- a/packages/nextjs/src/client-boundary/uiComponents.tsx +++ b/packages/nextjs/src/client-boundary/uiComponents.tsx @@ -13,6 +13,7 @@ import { useEnforceCorrectRoutingProps } from './hooks/useEnforceRoutingProps'; export { APIKeys, + ConfigureSSO, CreateOrganization, GoogleOneTap, HandleSSOCallback, diff --git a/packages/nextjs/src/index.ts b/packages/nextjs/src/index.ts index 283a7935cfc..35b52734264 100644 --- a/packages/nextjs/src/index.ts +++ b/packages/nextjs/src/index.ts @@ -23,6 +23,7 @@ export { */ export { APIKeys, + ConfigureSSO, CreateOrganization, GoogleOneTap, OAuthConsent, diff --git a/packages/nuxt/src/module.ts b/packages/nuxt/src/module.ts index ccabf817440..f582fb880f1 100644 --- a/packages/nuxt/src/module.ts +++ b/packages/nuxt/src/module.ts @@ -190,29 +190,14 @@ export default defineNuxtModule({ 'Waitlist', // API Keys 'APIKeys', - ]; - otherComponents.forEach(component => { - void addComponent({ - name: component, - export: component, - filePath: '@clerk/vue', - }); - }); - - /** - * Experimental components from `@clerk/vue/experimental`. - * @experimental These components and their prop types are unstable and may change in future releases. - */ - // eslint-disable-next-line @typescript-eslint/consistent-type-imports - const experimentalComponents: Array = [ // SSO 'ConfigureSSO', ]; - experimentalComponents.forEach(component => { + otherComponents.forEach(component => { void addComponent({ name: component, export: component, - filePath: '@clerk/vue/experimental', + filePath: '@clerk/vue', }); }); }, diff --git a/packages/nuxt/src/runtime/components/index.ts b/packages/nuxt/src/runtime/components/index.ts index 0d73def7d8c..bf8511659ae 100644 --- a/packages/nuxt/src/runtime/components/index.ts +++ b/packages/nuxt/src/runtime/components/index.ts @@ -4,6 +4,7 @@ export { UserAvatar, UserButton, OrganizationSwitcher, + ConfigureSSO, GoogleOneTap, OAuthConsent, Waitlist, diff --git a/packages/react-router/src/__tests__/__snapshots__/exports.test.ts.snap b/packages/react-router/src/__tests__/__snapshots__/exports.test.ts.snap index 27525d4ce63..7e834b2a7f8 100644 --- a/packages/react-router/src/__tests__/__snapshots__/exports.test.ts.snap +++ b/packages/react-router/src/__tests__/__snapshots__/exports.test.ts.snap @@ -23,6 +23,7 @@ exports[`root public exports > should not change unexpectedly 1`] = ` "ClerkLoaded", "ClerkLoading", "ClerkProvider", + "ConfigureSSO", "CreateOrganization", "GoogleOneTap", "HandleSSOCallback", diff --git a/packages/react/src/components/index.ts b/packages/react/src/components/index.ts index 0cec6374f29..a3f7472fa28 100644 --- a/packages/react/src/components/index.ts +++ b/packages/react/src/components/index.ts @@ -1,5 +1,6 @@ export { APIKeys, + ConfigureSSO, CreateOrganization, GoogleOneTap, OAuthConsent, diff --git a/packages/react/src/components/uiComponents.tsx b/packages/react/src/components/uiComponents.tsx index ba7c941618b..da0ab7f8fbb 100644 --- a/packages/react/src/components/uiComponents.tsx +++ b/packages/react/src/components/uiComponents.tsx @@ -1,7 +1,7 @@ import type { - __experimental_ConfigureSSOProps, __internal_OAuthConsentProps, APIKeysProps, + ConfigureSSOProps, CreateOrganizationProps, GoogleOneTapProps, OrganizationListProps, @@ -645,11 +645,8 @@ export const APIKeys = withClerk( { component: 'ApiKeys', renderWhileLoading: true }, ); -/** - * @experimental This component is in early access and may change in future releases. - */ export const ConfigureSSO = withClerk( - ({ clerk, component, fallback, ...props }: WithClerkProp<__experimental_ConfigureSSOProps & FallbackProp>) => { + ({ clerk, component, fallback, ...props }: WithClerkProp) => { const mountingStatus = useWaitForComponentMount(component); const shouldShowFallback = mountingStatus === 'rendering' || !clerk.loaded; @@ -663,8 +660,8 @@ export const ConfigureSSO = withClerk( {clerk.loaded && ( (); private premountPricingTableNodes = new Map(); private premountAPIKeysNodes = new Map(); - private premountConfigureSSONodes = new Map(); + private premountConfigureSSONodes = new Map(); private premountOAuthConsentNodes = new Map(); private premountTaskChooseOrganizationNodes = new Map(); private premountTaskResetPasswordNodes = new Map(); @@ -738,7 +738,7 @@ export class IsomorphicClerk implements IsomorphicLoadedClerk { }); this.premountConfigureSSONodes.forEach((props, node) => { - clerkjs.__experimental_mountConfigureSSO(node, props); + clerkjs.mountConfigureSSO(node, props); }); this.premountOAuthConsentNodes.forEach((props, node) => { @@ -1277,22 +1277,36 @@ export class IsomorphicClerk implements IsomorphicLoadedClerk { } }; - __experimental_mountConfigureSSO = (node: HTMLDivElement, props?: __experimental_ConfigureSSOProps): void => { + mountConfigureSSO = (node: HTMLDivElement, props?: ConfigureSSOProps): void => { if (this.clerkjs && this.loaded) { - this.clerkjs.__experimental_mountConfigureSSO(node, props); + this.clerkjs.mountConfigureSSO(node, props); } else { this.premountConfigureSSONodes.set(node, props); } }; - __experimental_unmountConfigureSSO = (node: HTMLDivElement): void => { + unmountConfigureSSO = (node: HTMLDivElement): void => { if (this.clerkjs && this.loaded) { - this.clerkjs.__experimental_unmountConfigureSSO(node); + this.clerkjs.unmountConfigureSSO(node); } else { this.premountConfigureSSONodes.delete(node); } }; + /** + * @deprecated Use `mountConfigureSSO` instead. + */ + __experimental_mountConfigureSSO = (node: HTMLDivElement, props?: ConfigureSSOProps): void => { + this.mountConfigureSSO(node, props); + }; + + /** + * @deprecated Use `unmountConfigureSSO` instead. + */ + __experimental_unmountConfigureSSO = (node: HTMLDivElement): void => { + this.unmountConfigureSSO(node); + }; + __internal_mountOAuthConsent = (node: HTMLDivElement, props?: OAuthConsentProps) => { if (this.clerkjs && this.loaded) { this.clerkjs.__internal_mountOAuthConsent(node, props); diff --git a/packages/shared/src/types/clerk.ts b/packages/shared/src/types/clerk.ts index 2db1ff05f9b..e840032f4f6 100644 --- a/packages/shared/src/types/clerk.ts +++ b/packages/shared/src/types/clerk.ts @@ -664,21 +664,27 @@ export interface Clerk { /** * Mount a configure SSO component at the target element. * - * @experimental This method is in early access and may change in future releases. - * * @param targetNode - Target to mount the ConfigureSSO component. * @param props - Configuration parameters. */ - __experimental_mountConfigureSSO: (targetNode: HTMLDivElement, props?: __experimental_ConfigureSSOProps) => void; + mountConfigureSSO: (targetNode: HTMLDivElement, props?: ConfigureSSOProps) => void; /** * Unmount a configure SSO component from the target element. * If there is no component mounted at the target node, results in a noop. * - * @experimental This method is in early access and may change in future releases. - * * @param targetNode - Target node to unmount the ConfigureSSO component from. */ + unmountConfigureSSO: (targetNode: HTMLDivElement) => void; + + /** + * @deprecated Use `mountConfigureSSO` instead. + */ + __experimental_mountConfigureSSO: (targetNode: HTMLDivElement, props?: ConfigureSSOProps) => void; + + /** + * @deprecated Use `unmountConfigureSSO` instead. + */ __experimental_unmountConfigureSSO: (targetNode: HTMLDivElement) => void; /** @@ -2173,10 +2179,7 @@ export type APIKeysProps = { showDescription?: boolean; }; -/** - * @experimental This type is in early access and may change in future releases. - */ -export type __experimental_ConfigureSSOProps = { +export type ConfigureSSOProps = { /** * Customisation options to fully match the Clerk components to your own brand. * These options serve as overrides and will be merged with the global `appearance` @@ -2185,6 +2188,9 @@ export type __experimental_ConfigureSSOProps = { appearance?: ClerkAppearanceTheme; }; +/** @deprecated Use `ConfigureSSOProps` instead. */ +export type __experimental_ConfigureSSOProps = ConfigureSSOProps; + export type GetAPIKeysParams = ClerkPaginationParams<{ subject?: string; query?: string; diff --git a/packages/tanstack-react-start/src/__tests__/__snapshots__/exports.test.ts.snap b/packages/tanstack-react-start/src/__tests__/__snapshots__/exports.test.ts.snap index 4a5318392ee..49e8fd0b9a3 100644 --- a/packages/tanstack-react-start/src/__tests__/__snapshots__/exports.test.ts.snap +++ b/packages/tanstack-react-start/src/__tests__/__snapshots__/exports.test.ts.snap @@ -29,6 +29,7 @@ exports[`root public exports > should not change unexpectedly 1`] = ` "ClerkLoaded", "ClerkLoading", "ClerkProvider", + "ConfigureSSO", "CreateOrganization", "GoogleOneTap", "HandleSSOCallback", diff --git a/packages/ui/src/components/ConfigureSSO/ConfigureSSO.tsx b/packages/ui/src/components/ConfigureSSO/ConfigureSSO.tsx index 7a0afd6c7b7..399672d1cdb 100644 --- a/packages/ui/src/components/ConfigureSSO/ConfigureSSO.tsx +++ b/packages/ui/src/components/ConfigureSSO/ConfigureSSO.tsx @@ -3,7 +3,7 @@ import { __internal_useUserEnterpriseConnections, useSession, } from '@clerk/shared/react'; -import type { __experimental_ConfigureSSOProps, EnterpriseConnectionResource } from '@clerk/shared/types'; +import type { ConfigureSSOProps, EnterpriseConnectionResource } from '@clerk/shared/types'; import React from 'react'; import { useProtect } from '@/common'; @@ -240,5 +240,4 @@ const useHasSuccessfulTestRun = ( }; }; -export const ConfigureSSO: React.ComponentType<__experimental_ConfigureSSOProps> = - withCardStateProvider(ConfigureSSOInternal); +export const ConfigureSSO: React.ComponentType = withCardStateProvider(ConfigureSSOInternal); diff --git a/packages/ui/src/contexts/ClerkUIComponentsContext.tsx b/packages/ui/src/contexts/ClerkUIComponentsContext.tsx index 2e9bff531e2..14371aeceaa 100644 --- a/packages/ui/src/contexts/ClerkUIComponentsContext.tsx +++ b/packages/ui/src/contexts/ClerkUIComponentsContext.tsx @@ -1,7 +1,7 @@ import type { - OAuthConsentProps, - __experimental_ConfigureSSOProps, APIKeysProps, + ConfigureSSOProps, + OAuthConsentProps, PricingTableProps, TaskChooseOrganizationProps, TaskResetPasswordProps, @@ -118,7 +118,7 @@ export function ComponentContextProvider({ ); case 'ConfigureSSO': return ( - + {children} ); diff --git a/packages/ui/src/internal/appearance.ts b/packages/ui/src/internal/appearance.ts index 0b8cea78171..8e218d49145 100644 --- a/packages/ui/src/internal/appearance.ts +++ b/packages/ui/src/internal/appearance.ts @@ -1041,7 +1041,7 @@ export type CheckoutTheme = Theme; export type PlanDetailTheme = Theme; export type SubscriptionDetailsTheme = Theme; export type APIKeysTheme = Theme; -export type __experimental_ConfigureSSOTheme = Theme; +export type ConfigureSSOTheme = Theme; export type OAuthConsentTheme = Theme; export type TaskChooseOrganizationTheme = Theme; export type TaskResetPasswordTheme = Theme; @@ -1121,7 +1121,7 @@ export type Appearance = T & /** * Theme overrides that only apply to the `` component */ - __experimental_configureSSO?: T; + configureSSO?: T; /** * Theme overrides that only apply to the `` component */ diff --git a/packages/ui/src/types.ts b/packages/ui/src/types.ts index 0c92ab32a22..3a674696c4b 100644 --- a/packages/ui/src/types.ts +++ b/packages/ui/src/types.ts @@ -1,15 +1,15 @@ import type { - __experimental_ConfigureSSOProps, __internal_CheckoutProps, - OAuthConsentProps, __internal_PlanDetailsProps, __internal_SubscriptionDetailsProps, __internal_UserVerificationProps, APIKeysProps, ClerkAppearanceTheme, + ConfigureSSOProps, CreateOrganizationProps, GoogleOneTapProps, NewSubscriptionRedirectUrl, + OAuthConsentProps, OrganizationListProps, OrganizationProfileProps, OrganizationSwitcherProps, @@ -65,7 +65,7 @@ export type AvailableComponentProps = | __internal_SubscriptionDetailsProps | __internal_PlanDetailsProps | APIKeysProps - | __experimental_ConfigureSSOProps + | ConfigureSSOProps | OAuthConsentProps | TaskChooseOrganizationProps | TaskResetPasswordProps @@ -147,7 +147,7 @@ export type APIKeysCtx = APIKeysProps & { mode?: ComponentMode; }; -export type ConfigureSSOCtx = __experimental_ConfigureSSOProps & { +export type ConfigureSSOCtx = ConfigureSSOProps & { componentName: 'ConfigureSSO'; mode?: ComponentMode; }; diff --git a/packages/vue/src/components/index.ts b/packages/vue/src/components/index.ts index 10f7d6aa756..e2df4afdca4 100644 --- a/packages/vue/src/components/index.ts +++ b/packages/vue/src/components/index.ts @@ -6,6 +6,7 @@ export { default as CreateOrganization } from './ui-components/CreateOrganizatio export { default as OrganizationList } from './ui-components/OrganizationList.vue'; export { default as PricingTable } from './ui-components/PricingTable.vue'; export { default as APIKeys } from './ui-components/APIKeys.vue'; +export { default as ConfigureSSO } from './ui-components/ConfigureSSO.vue'; export { default as OAuthConsent } from './ui-components/OAuthConsent.vue'; export { UserProfile } from './ui-components/UserProfile'; export { OrganizationProfile } from './ui-components/OrganizationProfile'; diff --git a/packages/vue/src/components/ui-components/ConfigureSSO.vue b/packages/vue/src/components/ui-components/ConfigureSSO.vue index bcdd2eea036..4baa233da07 100644 --- a/packages/vue/src/components/ui-components/ConfigureSSO.vue +++ b/packages/vue/src/components/ui-components/ConfigureSSO.vue @@ -1,16 +1,16 @@