diff --git a/.changeset/clean-views-admire.md b/.changeset/clean-views-admire.md new file mode 100644 index 00000000000..92a49ba4a25 --- /dev/null +++ b/.changeset/clean-views-admire.md @@ -0,0 +1,5 @@ +--- +'@clerk/ui': patch +--- + +Fix minor internal issues with TypeScript types. diff --git a/packages/ui/package.json b/packages/ui/package.json index af98e76b752..d24567d5094 100644 --- a/packages/ui/package.json +++ b/packages/ui/package.json @@ -69,7 +69,7 @@ "register" ], "scripts": { - "build": "pnpm build:umd && pnpm build:esm && pnpm check:no-rhc", + "build": "pnpm build:umd && pnpm build:esm && pnpm check:no-rhc && pnpm type-check", "build:analyze": "rspack build --config rspack.config.js --env production --env analyze --analyze", "build:esm": "tsdown", "build:rsdoctor": "RSDOCTOR=true rspack build --config rspack.config.js --env production", diff --git a/packages/ui/src/Components.tsx b/packages/ui/src/Components.tsx index 858f707cd38..a73d85c5dba 100644 --- a/packages/ui/src/Components.tsx +++ b/packages/ui/src/Components.tsx @@ -8,14 +8,18 @@ import type { __internal_UserVerificationProps, Clerk, ClerkOptions, - CreateOrganizationProps, + CreateOrganizationModalProps, EnvironmentResource, GoogleOneTapProps, - OrganizationProfileProps, + OrganizationProfileModalProps, SignInProps, + SignInModalProps, SignUpProps, + SignUpModalProps, + UserProfileModalProps, UserProfileProps, WaitlistProps, + WaitlistModalProps, } from '@clerk/shared/types'; import { createDeferredPromise } from '@clerk/shared/utils'; import React, { Suspense, useCallback, useRef, useSyncExternalStore } from 'react'; @@ -161,16 +165,16 @@ interface ComponentsState { appearance: Appearance | undefined; options: ClerkOptions | undefined; googleOneTapModal: null | GoogleOneTapProps; - signInModal: null | SignInProps; - signUpModal: null | SignUpProps; - userProfileModal: null | UserProfileProps; + signInModal: null | SignInModalProps; + signUpModal: null | SignUpModalProps; + userProfileModal: null | UserProfileModalProps; userVerificationModal: null | __internal_UserVerificationProps; - organizationProfileModal: null | OrganizationProfileProps; - createOrganizationModal: null | CreateOrganizationProps; + organizationProfileModal: null | OrganizationProfileModalProps; + createOrganizationModal: null | CreateOrganizationModalProps; enableOrganizationsPromptModal: null | __internal_EnableOrganizationsPromptProps; blankCaptchaModal: null; organizationSwitcherPrefetch: boolean; - waitlistModal: null | WaitlistProps; + waitlistModal: null | WaitlistModalProps; checkoutDrawer: { open: false; props: null | __internal_CheckoutProps; @@ -502,7 +506,7 @@ const Components = (props: ComponentsProps) => { onClose={() => componentsControls.closeModal('signIn')} onExternalNavigate={() => componentsControls.closeModal('signIn')} startPath={buildVirtualRouterUrl({ base: '/sign-in', path: urlStateParam?.path })} - getContainer={signInModal?.getContainer} + getContainer={signInModal?.getContainer ?? (() => null)} componentName={'SignInModal'} > @@ -520,7 +524,7 @@ const Components = (props: ComponentsProps) => { onClose={() => componentsControls.closeModal('signUp')} onExternalNavigate={() => componentsControls.closeModal('signUp')} startPath={buildVirtualRouterUrl({ base: '/sign-up', path: urlStateParam?.path })} - getContainer={signUpModal?.getContainer} + getContainer={signUpModal?.getContainer ?? (() => null)} componentName={'SignUpModal'} > @@ -541,7 +545,7 @@ const Components = (props: ComponentsProps) => { base: '/user', path: userProfileModal?.__experimental_startPath || urlStateParam?.path, })} - getContainer={userProfileModal?.getContainer} + getContainer={userProfileModal?.getContainer ?? (() => null)} componentName={'UserProfileModal'} modalContainerSx={{ alignItems: 'center' }} modalContentSx={t => ({ height: `min(${t.sizes.$176}, calc(100% - ${t.sizes.$12}))`, margin: 0 })} @@ -559,7 +563,7 @@ const Components = (props: ComponentsProps) => { onClose={() => componentsControls.closeModal('userVerification')} onExternalNavigate={() => componentsControls.closeModal('userVerification')} startPath={buildVirtualRouterUrl({ base: '/user-verification', path: urlStateParam?.path })} - getContainer={userVerificationModal?.getContainer} + getContainer={userVerificationModal?.getContainer ?? (() => null)} componentName={'UserVerificationModal'} modalContainerSx={{ alignItems: 'center' }} > @@ -579,7 +583,7 @@ const Components = (props: ComponentsProps) => { base: '/organizationProfile', path: organizationProfileModal?.__experimental_startPath || urlStateParam?.path, })} - getContainer={organizationProfileModal?.getContainer} + getContainer={organizationProfileModal?.getContainer ?? (() => null)} componentName={'OrganizationProfileModal'} modalContainerSx={{ alignItems: 'center' }} modalContentSx={t => ({ height: `min(${t.sizes.$176}, calc(100% - ${t.sizes.$12}))`, margin: 0 })} @@ -597,7 +601,7 @@ const Components = (props: ComponentsProps) => { onClose={() => componentsControls.closeModal('createOrganization')} onExternalNavigate={() => componentsControls.closeModal('createOrganization')} startPath={buildVirtualRouterUrl({ base: '/createOrganization', path: urlStateParam?.path })} - getContainer={createOrganizationModal?.getContainer} + getContainer={createOrganizationModal?.getContainer ?? (() => null)} componentName={'CreateOrganizationModal'} modalContainerSx={{ alignItems: 'center' }} modalContentSx={t => ({ height: `min(${t.sizes.$120}, calc(100% - ${t.sizes.$12}))`, margin: 0 })} @@ -615,7 +619,7 @@ const Components = (props: ComponentsProps) => { onClose={() => componentsControls.closeModal('waitlist')} onExternalNavigate={() => componentsControls.closeModal('waitlist')} startPath={buildVirtualRouterUrl({ base: '/waitlist', path: urlStateParam?.path })} - getContainer={waitlistModal?.getContainer} + getContainer={waitlistModal?.getContainer ?? (() => null)} componentName={'WaitlistModal'} > @@ -638,6 +642,7 @@ const Components = (props: ComponentsProps) => { canCloseModal={false} modalId={'cl-modal-captcha-wrapper'} modalStyle={{ visibility: 'hidden', pointerEvents: 'none' }} + getContainer={() => null} > diff --git a/packages/ui/src/components/Checkout/CheckoutForm.tsx b/packages/ui/src/components/Checkout/CheckoutForm.tsx index 7fc80d0979f..ce57964e9e4 100644 --- a/packages/ui/src/components/Checkout/CheckoutForm.tsx +++ b/packages/ui/src/components/Checkout/CheckoutForm.tsx @@ -42,7 +42,8 @@ export const CheckoutForm = withCardStateProvider(() => { const fee = planPeriod === 'month' - ? plan.fee + ? // eslint-disable-next-line @typescript-eslint/no-non-null-assertion + plan.fee! : // eslint-disable-next-line @typescript-eslint/no-non-null-assertion plan.annualMonthlyFee!; diff --git a/packages/ui/src/components/PaymentAttempts/PaymentAttemptPage.tsx b/packages/ui/src/components/PaymentAttempts/PaymentAttemptPage.tsx index 3cee693d74b..2ebd2973aa2 100644 --- a/packages/ui/src/components/PaymentAttempts/PaymentAttemptPage.tsx +++ b/packages/ui/src/components/PaymentAttempts/PaymentAttemptPage.tsx @@ -205,7 +205,8 @@ function PaymentAttemptBody({ subscriptionItem }: { subscriptionItem: BillingSub const fee = subscriptionItem.planPeriod === 'month' - ? subscriptionItem.plan.fee + ? // eslint-disable-next-line @typescript-eslint/no-non-null-assertion + subscriptionItem.plan.fee! : // eslint-disable-next-line @typescript-eslint/no-non-null-assertion subscriptionItem.plan.annualMonthlyFee!; diff --git a/packages/ui/src/components/PricingTable/PricingTableMatrix.tsx b/packages/ui/src/components/PricingTable/PricingTableMatrix.tsx index 4666b96d894..6227f385b6c 100644 --- a/packages/ui/src/components/PricingTable/PricingTableMatrix.tsx +++ b/packages/ui/src/components/PricingTable/PricingTableMatrix.tsx @@ -157,10 +157,12 @@ export function PricingTableMatrix({ {plans.map(plan => { const highlight = plan.slug === highlightedPlan; const planFee = !plan.annualMonthlyFee - ? plan.fee + ? // eslint-disable-next-line @typescript-eslint/no-non-null-assertion + plan.fee! : planPeriod === 'annual' ? plan.annualMonthlyFee - : plan.fee; + : // eslint-disable-next-line @typescript-eslint/no-non-null-assertion + plan.fee!; return ( void; - organizationCreationDefaults?: OrganizationCreationDefaultsResource; + organizationCreationDefaults?: OrganizationCreationDefaultsResource | null; }; export const CreateOrganizationScreen = (props: CreateOrganizationScreenProps) => { diff --git a/packages/ui/src/components/SessionTasks/tasks/TaskChooseOrganization/OrganizationCreationDefaultsAlert.tsx b/packages/ui/src/components/SessionTasks/tasks/TaskChooseOrganization/OrganizationCreationDefaultsAlert.tsx index efef8ee9bb1..4bc120a9191 100644 --- a/packages/ui/src/components/SessionTasks/tasks/TaskChooseOrganization/OrganizationCreationDefaultsAlert.tsx +++ b/packages/ui/src/components/SessionTasks/tasks/TaskChooseOrganization/OrganizationCreationDefaultsAlert.tsx @@ -6,7 +6,7 @@ import { localizationKeys } from '@/localization'; export function OrganizationCreationDefaultsAlert({ organizationCreationDefaults, }: { - organizationCreationDefaults?: OrganizationCreationDefaultsResource; + organizationCreationDefaults?: OrganizationCreationDefaultsResource | null; }) { const localizationKey = advisoryToLocalizationKey(organizationCreationDefaults?.advisory); if (!localizationKey) { diff --git a/packages/ui/src/components/SessionTasks/tasks/TaskSetupMfa/SetupMfaStartScreen.tsx b/packages/ui/src/components/SessionTasks/tasks/TaskSetupMfa/SetupMfaStartScreen.tsx index 57f099e76a0..6d735baffdc 100644 --- a/packages/ui/src/components/SessionTasks/tasks/TaskSetupMfa/SetupMfaStartScreen.tsx +++ b/packages/ui/src/components/SessionTasks/tasks/TaskSetupMfa/SetupMfaStartScreen.tsx @@ -60,7 +60,7 @@ export const SetupMfaStartScreen = withCardStateProvider((props: SetupMfaStartSc })} > {availableMethods.map(method => { - const methodConfig = METHOD_CONFIG[method] ?? null; + const methodConfig = METHOD_CONFIG[method as keyof typeof METHOD_CONFIG] ?? null; if (!methodConfig) { return null; diff --git a/packages/ui/src/components/SubscriptionDetails/index.tsx b/packages/ui/src/components/SubscriptionDetails/index.tsx index 3ba49bf0a0b..22d1bb04d34 100644 --- a/packages/ui/src/components/SubscriptionDetails/index.tsx +++ b/packages/ui/src/components/SubscriptionDetails/index.tsx @@ -415,8 +415,10 @@ const SubscriptionCardActions = ({ subscription }: { subscription: BillingSubscr currency: subscription.plan.annualFee!.currencySymbol, }) : localizationKeys('billing.switchToMonthlyWithPrice', { - price: normalizeFormatted(subscription.plan.fee.amountFormatted), - currency: subscription.plan.fee.currencySymbol, + // eslint-disable-next-line @typescript-eslint/no-non-null-assertion + price: normalizeFormatted(subscription.plan.fee!.amountFormatted), + // eslint-disable-next-line @typescript-eslint/no-non-null-assertion + currency: subscription.plan.fee!.currencySymbol, }), onClick: () => { openCheckout({ @@ -508,7 +510,8 @@ const SubscriptionCard = ({ subscription }: { subscription: BillingSubscriptionI const fee = subscription.planPeriod === 'month' - ? subscription.plan.fee + ? // eslint-disable-next-line @typescript-eslint/no-non-null-assertion + subscription.plan.fee! : // eslint-disable-next-line @typescript-eslint/no-non-null-assertion subscription.plan.annualFee!; diff --git a/packages/ui/src/components/Subscriptions/SubscriptionsList.tsx b/packages/ui/src/components/Subscriptions/SubscriptionsList.tsx index 43dc1b4a052..4f3831f896a 100644 --- a/packages/ui/src/components/Subscriptions/SubscriptionsList.tsx +++ b/packages/ui/src/components/Subscriptions/SubscriptionsList.tsx @@ -154,7 +154,7 @@ export function SubscriptionsList({ function SubscriptionRow({ subscription, length }: { subscription: BillingSubscriptionItemResource; length: number }) { // eslint-disable-next-line @typescript-eslint/no-non-null-assertion - const fee = subscription.planPeriod === 'annual' ? subscription.plan.annualFee! : subscription.plan.fee; + const fee = subscription.planPeriod === 'annual' ? subscription.plan.annualFee! : subscription.plan.fee!; const { captionForSubscription } = usePlansContext(); const feeFormatted = useMemo(() => { diff --git a/packages/ui/src/internal/index.ts b/packages/ui/src/internal/index.ts index 064695f56c8..d86140b52a0 100644 --- a/packages/ui/src/internal/index.ts +++ b/packages/ui/src/internal/index.ts @@ -1,7 +1,5 @@ import type { ClerkUIConstructor } from '@clerk/shared/ui'; -import type { Appearance } from './appearance'; - export type { ComponentControls, MountComponentRenderer } from '../Components'; export type { WithInternalRouting } from './routing'; diff --git a/packages/ui/tsconfig.json b/packages/ui/tsconfig.json index b1cdc8add12..c97f2d88d06 100644 --- a/packages/ui/tsconfig.json +++ b/packages/ui/tsconfig.json @@ -29,6 +29,14 @@ "@/ui*": ["./src/*"] } }, - "exclude": ["node_modules", "**/*.test.ts", "**/*.test.tsx", "**/*.spec.ts", "**/*.spec.tsx", "**/__tests__/**"], + "exclude": [ + "node_modules", + "**/*.test.ts", + "**/*.test.tsx", + "**/*.spec.ts", + "**/*.spec.tsx", + "**/__tests__/**", + "./src/test/**" + ], "include": ["src", "src/global.d.ts"] }