diff --git a/.changeset/silent-ducks-wait.md b/.changeset/silent-ducks-wait.md new file mode 100644 index 00000000000..1a27e3401a8 --- /dev/null +++ b/.changeset/silent-ducks-wait.md @@ -0,0 +1,6 @@ +--- +'@clerk/clerk-js': patch +'@clerk/types': patch +--- + +Remove `'virtual'` from the `routing` option. The `'virtual'` value is only used internally and should not be part of the public API. diff --git a/packages/clerk-js/src/ui/components/OrganizationProfile/OrganizationProfile.tsx b/packages/clerk-js/src/ui/components/OrganizationProfile/OrganizationProfile.tsx index 116eb1f5d4b..488d5979ffd 100644 --- a/packages/clerk-js/src/ui/components/OrganizationProfile/OrganizationProfile.tsx +++ b/packages/clerk-js/src/ui/components/OrganizationProfile/OrganizationProfile.tsx @@ -1,16 +1,16 @@ import { useOrganization } from '@clerk/shared/react'; -import type { OrganizationProfileModalProps, OrganizationProfileProps } from '@clerk/types'; +import type { OrganizationProfileModalProps, OrganizationProfileProps, WithInternalRouting } from '@clerk/types'; import React from 'react'; +import type { OrganizationProfileCtx } from 'ui/types'; import { OrganizationProfileContext, withCoreUserGuard } from '../../contexts'; import { Flow, localizationKeys } from '../../customizables'; import { NavbarMenuButtonRow, ProfileCard, withCardStateProvider } from '../../elements'; import { Route, Switch } from '../../router'; -import type { OrganizationProfileCtx } from '../../types'; import { OrganizationProfileNavbar } from './OrganizationProfileNavbar'; import { OrganizationProfileRoutes } from './OrganizationProfileRoutes'; -const _OrganizationProfile = (_: OrganizationProfileProps) => { +const _OrganizationProfile = () => { const { organization } = useOrganization(); if (!organization) { @@ -48,6 +48,9 @@ const AuthenticatedRoutes = withCoreUserGuard(() => { export const OrganizationProfile = withCardStateProvider(_OrganizationProfile); +const InternalOrganizationProfile: React.ComponentType> = + withCardStateProvider(_OrganizationProfile); + export const OrganizationProfileModal = (props: OrganizationProfileModalProps): JSX.Element => { const organizationProfileProps: OrganizationProfileCtx = { ...props, @@ -61,7 +64,7 @@ export const OrganizationProfileModal = (props: OrganizationProfileModalProps): {/*TODO: Used by InvisibleRootBox, can we simplify? */}
- +
diff --git a/packages/clerk-js/src/ui/components/SignIn/SignIn.tsx b/packages/clerk-js/src/ui/components/SignIn/SignIn.tsx index cd26298bd7f..34964fad25c 100644 --- a/packages/clerk-js/src/ui/components/SignIn/SignIn.tsx +++ b/packages/clerk-js/src/ui/components/SignIn/SignIn.tsx @@ -1,5 +1,5 @@ import { useClerk } from '@clerk/shared/react'; -import type { SignInModalProps, SignInProps } from '@clerk/types'; +import type { SignInModalProps, SignInProps, WithInternalRouting } from '@clerk/types'; import React from 'react'; import { normalizeRoutingOptions } from '../../../utils/normalizeRoutingOptions'; @@ -165,6 +165,8 @@ SignInRoutes.displayName = 'SignIn'; export const SignIn: React.ComponentType = withCoreSessionSwitchGuard(SignInRoot); +const InternalSignIn: React.ComponentType> = withCoreSessionSwitchGuard(SignInRoot); + export const SignInModal = (props: SignInModalProps): JSX.Element => { const signInProps = { signUpUrl: `/${VIRTUAL_ROUTER_BASE_PATH}/sign-up`, @@ -184,7 +186,7 @@ export const SignInModal = (props: SignInModalProps): JSX.Element => { > {/*TODO: Used by InvisibleRootBox, can we simplify? */}
- diff --git a/packages/clerk-js/src/ui/components/SignUp/SignUp.tsx b/packages/clerk-js/src/ui/components/SignUp/SignUp.tsx index 430ae2f53a9..d4961f92f9e 100644 --- a/packages/clerk-js/src/ui/components/SignUp/SignUp.tsx +++ b/packages/clerk-js/src/ui/components/SignUp/SignUp.tsx @@ -1,5 +1,5 @@ import { useClerk } from '@clerk/shared/react'; -import type { SignUpModalProps, SignUpProps } from '@clerk/types'; +import type { SignUpModalProps, SignUpProps, WithInternalRouting } from '@clerk/types'; import React from 'react'; import { SignUpEmailLinkFlowComplete } from '../../common/EmailLinkCompleteFlowCard'; @@ -89,6 +89,8 @@ SignUpRoutes.displayName = 'SignUp'; export const SignUp: React.ComponentType = withCoreSessionSwitchGuard(SignUpRoutes); +const InternalSignUp: React.ComponentType> = withCoreSessionSwitchGuard(SignUpRoutes); + export const SignUpModal = (props: SignUpModalProps): JSX.Element => { const signUpProps = { signInUrl: `/${VIRTUAL_ROUTER_BASE_PATH}/sign-in`, @@ -108,7 +110,7 @@ export const SignUpModal = (props: SignUpModalProps): JSX.Element => { > {/*TODO: Used by InvisibleRootBox, can we simplify? */}
- diff --git a/packages/clerk-js/src/ui/components/UserProfile/UserProfile.tsx b/packages/clerk-js/src/ui/components/UserProfile/UserProfile.tsx index ad641d35a5a..767329334ba 100644 --- a/packages/clerk-js/src/ui/components/UserProfile/UserProfile.tsx +++ b/packages/clerk-js/src/ui/components/UserProfile/UserProfile.tsx @@ -1,4 +1,4 @@ -import type { UserProfileModalProps, UserProfileProps } from '@clerk/types'; +import type { UserProfileModalProps, UserProfileProps, WithInternalRouting } from '@clerk/types'; import React from 'react'; import { UserProfileContext, withCoreUserGuard } from '../../contexts'; @@ -10,7 +10,7 @@ import { UserProfileNavbar } from './UserProfileNavbar'; import { UserProfileRoutes } from './UserProfileRoutes'; import { VerificationSuccessPage } from './VerifyWithLink'; -const _UserProfile = (_: UserProfileProps) => { +const _UserProfile = () => { return ( @@ -42,7 +42,10 @@ const AuthenticatedRoutes = withCoreUserGuard(() => { ); }); -export const UserProfile = withCardStateProvider(_UserProfile); +export const UserProfile: React.ComponentType = withCardStateProvider(_UserProfile); + +const InternalUserProfile: React.ComponentType> = + withCardStateProvider(_UserProfile); export const UserProfileModal = (props: UserProfileModalProps): JSX.Element => { const userProfileProps: UserProfileCtx = { @@ -57,7 +60,7 @@ export const UserProfileModal = (props: UserProfileModalProps): JSX.Element => { {/*TODO: Used by InvisibleRootBox, can we simplify? */}
- +
diff --git a/packages/clerk-js/src/ui/components/UserVerification/index.tsx b/packages/clerk-js/src/ui/components/UserVerification/index.tsx index f00cd57fae9..36524300a43 100644 --- a/packages/clerk-js/src/ui/components/UserVerification/index.tsx +++ b/packages/clerk-js/src/ui/components/UserVerification/index.tsx @@ -1,4 +1,8 @@ -import type { __internal_UserVerificationModalProps, __internal_UserVerificationProps } from '@clerk/types'; +import type { + __internal_UserVerificationModalProps, + __internal_UserVerificationProps, + WithInternalRouting, +} from '@clerk/types'; import React, { useEffect } from 'react'; import { UserVerificationContext, withCoreSessionSwitchGuard } from '../../contexts'; @@ -31,7 +35,7 @@ function UserVerificationRoutes(): JSX.Element { UserVerificationRoutes.displayName = 'UserVerification'; -const UserVerification: React.ComponentType<__internal_UserVerificationProps> = +const UserVerification: React.ComponentType> = withCoreSessionSwitchGuard(UserVerificationRoutes); const UserVerificationModal = (props: __internal_UserVerificationModalProps): JSX.Element => { diff --git a/packages/clerk-js/src/ui/types.ts b/packages/clerk-js/src/ui/types.ts index e90ebfff249..5923047e840 100644 --- a/packages/clerk-js/src/ui/types.ts +++ b/packages/clerk-js/src/ui/types.ts @@ -10,6 +10,7 @@ import type { UserButtonProps, UserProfileProps, WaitlistProps, + WithInternalRouting, } from '@clerk/types'; export type { @@ -40,22 +41,22 @@ export type AvailableComponentProps = type ComponentMode = 'modal' | 'mounted'; -export type SignInCtx = SignInProps & { +export type SignInCtx = WithInternalRouting & { componentName: 'SignIn'; mode?: ComponentMode; }; -export type UserVerificationCtx = __internal_UserVerificationProps & { +export type UserVerificationCtx = WithInternalRouting<__internal_UserVerificationProps> & { componentName: 'UserVerification'; mode?: ComponentMode; }; -export type UserProfileCtx = UserProfileProps & { +export type UserProfileCtx = WithInternalRouting & { componentName: 'UserProfile'; mode?: ComponentMode; }; -export type SignUpCtx = SignUpProps & { +export type SignUpCtx = WithInternalRouting & { componentName: 'SignUp'; mode?: ComponentMode; emailLinkRedirectUrl?: string; @@ -67,12 +68,12 @@ export type UserButtonCtx = UserButtonProps & { mode?: ComponentMode; }; -export type OrganizationProfileCtx = OrganizationProfileProps & { +export type OrganizationProfileCtx = WithInternalRouting & { componentName: 'OrganizationProfile'; mode?: ComponentMode; }; -export type CreateOrganizationCtx = CreateOrganizationProps & { +export type CreateOrganizationCtx = WithInternalRouting & { componentName: 'CreateOrganization'; mode?: ComponentMode; }; diff --git a/packages/types/src/clerk.ts b/packages/types/src/clerk.ts index b874ec82a1a..3bfd1740a55 100644 --- a/packages/types/src/clerk.ts +++ b/packages/types/src/clerk.ts @@ -831,6 +831,10 @@ type RouterFn = ( export type WithoutRouting = Omit; +export type WithInternalRouting = + | (Omit & { path: string | undefined; routing?: Extract }) + | (Omit & { path?: never; routing?: Extract }); + export type SignInInitialValues = { emailAddress?: string; phoneNumber?: string; @@ -892,7 +896,7 @@ export type SetActive = (params: SetActiveParams) => Promise; export type RoutingOptions = | { path: string | undefined; routing?: Extract } - | { path?: never; routing?: Extract }; + | { path?: never; routing?: Extract }; export type SignInProps = RoutingOptions & { /**