diff --git a/.changeset/two-terms-speak.md b/.changeset/two-terms-speak.md new file mode 100644 index 00000000000..726dc3687d8 --- /dev/null +++ b/.changeset/two-terms-speak.md @@ -0,0 +1,5 @@ +--- +'@clerk/types': patch +--- + +Simplify the WithOptions generic type diff --git a/packages/types/src/appearance.ts b/packages/types/src/appearance.ts index 96916bd0760..63c9a79ff87 100644 --- a/packages/types/src/appearance.ts +++ b/packages/types/src/appearance.ts @@ -108,7 +108,7 @@ export type SelectId = 'countryCode' | 'role'; * If jsx exists, the element can also receive a typed function that returns a JSX.Element */ type ConfigOptions = { states: ElementState; ids: string; jsx: any }; -type WithOptions = { ids: Ids; states: States; jsx: Jsx }; +type WithOptions = { ids: Ids; states: States; jsx: Jsx }; /** * Create a type union of all state + id combinations @@ -153,282 +153,282 @@ export type ElementObjectKey = K extends `${infer Parent}-${in * Kebab-case is used to differentiate between the container and child elements */ export type ElementsConfig = { - rootBox: WithOptions; - card: WithOptions; - - logoBox: WithOptions; - logoImage: WithOptions; - // outerLogo: WithOptions; - // 'outerLogo-image': WithOptions; - - header: WithOptions; - headerTitle: WithOptions; - headerSubtitle: WithOptions; - headerBackRow: WithOptions; - headerBackLink: WithOptions; - headerBackIcon: WithOptions; - - main: WithOptions; - - footer: WithOptions; - footerAction: WithOptions; - footerActionText: WithOptions; - footerActionLink: WithOptions; - footerPages: WithOptions; - footerPagesLink: WithOptions<'help' | 'terms' | 'privacy', never, never>; - - socialButtons: WithOptions; - socialButtonsIconButton: WithOptions; - socialButtonsBlockButton: WithOptions; - socialButtonsBlockButtonText: WithOptions; - socialButtonsBlockButtonArrow: WithOptions; - socialButtonsProviderIcon: WithOptions; - - enterpriseButtonsProviderIcon: WithOptions; - - alternativeMethods: WithOptions; - alternativeMethodsBlockButton: WithOptions; - alternativeMethodsBlockButtonText: WithOptions; - alternativeMethodsBlockButtonArrow: WithOptions; - - otpCodeBox: WithOptions; - otpCodeHeader: WithOptions; - otpCodeHeaderTitle: WithOptions; - otpCodeHeaderSubtitle: WithOptions; - otpCodeField: WithOptions; - otpCodeFieldInputs: WithOptions; - otpCodeFieldInput: WithOptions; - otpCodeFieldErrorText: WithOptions; - - dividerRow: WithOptions; - dividerText: WithOptions; - dividerLine: WithOptions; - - formHeader: WithOptions; - formHeaderTitle: WithOptions; - formHeaderSubtitle: WithOptions; - formResendCodeLink: WithOptions; - - verificationLinkStatusBox: WithOptions; - verificationLinkStatusIconBox: WithOptions; - verificationLinkStatusIcon: WithOptions; - verificationLinkStatusText: WithOptions; - - form: WithOptions; - formFieldRow: WithOptions; - formField: WithOptions; - formFieldLabelRow: WithOptions; - formFieldLabel: WithOptions; - formFieldRadioGroup: WithOptions; - formFieldRadioGroupItem: WithOptions; - formFieldRadioInput: WithOptions; - formFieldRadioLabel: WithOptions; - formFieldRadioLabelTitle: WithOptions; - formFieldRadioLabelDescription: WithOptions; - formFieldAction: WithOptions; - formFieldInput: WithOptions; - formFieldErrorText: WithOptions; - formFieldWarningText: WithOptions; - formFieldSuccessText: WithOptions; - formFieldInfoText: WithOptions; - formFieldDirectionsText: WithOptions; - formFieldHintText: WithOptions; - formButtonRow: WithOptions; - formButtonPrimary: WithOptions; - formButtonReset: WithOptions; - formFieldInputGroup: WithOptions; - formFieldInputShowPasswordButton: WithOptions; - formFieldInputShowPasswordIcon: WithOptions; - formFieldInputCopyToClipboardButton: WithOptions; - formFieldInputCopyToClipboardIcon: WithOptions; - - phoneInputBox: WithOptions; - formInputGroup: WithOptions; - - avatarBox: WithOptions; - avatarImage: WithOptions; - avatarImageActions: WithOptions; - avatarImageActionsUpload: WithOptions; - avatarImageActionsRemove: WithOptions; + rootBox: WithOptions; + card: WithOptions; + + logoBox: WithOptions; + logoImage: WithOptions; + // outerLogo: WithOptions; + // 'outerLogo-image': WithOptions; + + header: WithOptions; + headerTitle: WithOptions; + headerSubtitle: WithOptions; + headerBackRow: WithOptions; + headerBackLink: WithOptions; + headerBackIcon: WithOptions; + + main: WithOptions; + + footer: WithOptions; + footerAction: WithOptions; + footerActionText: WithOptions; + footerActionLink: WithOptions; + footerPages: WithOptions; + footerPagesLink: WithOptions<'help' | 'terms' | 'privacy'>; + + socialButtons: WithOptions; + socialButtonsIconButton: WithOptions; + socialButtonsBlockButton: WithOptions; + socialButtonsBlockButtonText: WithOptions; + socialButtonsBlockButtonArrow: WithOptions; + socialButtonsProviderIcon: WithOptions; + + enterpriseButtonsProviderIcon: WithOptions; + + alternativeMethods: WithOptions; + alternativeMethodsBlockButton: WithOptions; + alternativeMethodsBlockButtonText: WithOptions; + alternativeMethodsBlockButtonArrow: WithOptions; + + otpCodeBox: WithOptions; + otpCodeHeader: WithOptions; + otpCodeHeaderTitle: WithOptions; + otpCodeHeaderSubtitle: WithOptions; + otpCodeField: WithOptions; + otpCodeFieldInputs: WithOptions; + otpCodeFieldInput: WithOptions; + otpCodeFieldErrorText: WithOptions; + + dividerRow: WithOptions; + dividerText: WithOptions; + dividerLine: WithOptions; + + formHeader: WithOptions; + formHeaderTitle: WithOptions; + formHeaderSubtitle: WithOptions; + formResendCodeLink: WithOptions; + + verificationLinkStatusBox: WithOptions; + verificationLinkStatusIconBox: WithOptions; + verificationLinkStatusIcon: WithOptions; + verificationLinkStatusText: WithOptions; + + form: WithOptions; + formFieldRow: WithOptions; + formField: WithOptions; + formFieldLabelRow: WithOptions; + formFieldLabel: WithOptions; + formFieldRadioGroup: WithOptions; + formFieldRadioGroupItem: WithOptions; + formFieldRadioInput: WithOptions; + formFieldRadioLabel: WithOptions; + formFieldRadioLabelTitle: WithOptions; + formFieldRadioLabelDescription: WithOptions; + formFieldAction: WithOptions; + formFieldInput: WithOptions; + formFieldErrorText: WithOptions; + formFieldWarningText: WithOptions; + formFieldSuccessText: WithOptions; + formFieldInfoText: WithOptions; + formFieldDirectionsText: WithOptions; + formFieldHintText: WithOptions; + formButtonRow: WithOptions; + formButtonPrimary: WithOptions; + formButtonReset: WithOptions; + formFieldInputGroup: WithOptions; + formFieldInputShowPasswordButton: WithOptions; + formFieldInputShowPasswordIcon: WithOptions; + formFieldInputCopyToClipboardButton: WithOptions; + formFieldInputCopyToClipboardIcon: WithOptions; + + phoneInputBox: WithOptions; + formInputGroup: WithOptions; + + avatarBox: WithOptions; + avatarImage: WithOptions; + avatarImageActions: WithOptions; + avatarImageActionsUpload: WithOptions; + avatarImageActionsRemove: WithOptions; // TODO: We can remove "Popover" from these: - userButtonBox: WithOptions; - userButtonOuterIdentifier: WithOptions; - userButtonTrigger: WithOptions; - userButtonAvatarBox: WithOptions; - userButtonAvatarImage: WithOptions; - userButtonPopoverRootBox: WithOptions; - userButtonPopoverCard: WithOptions; - userButtonPopoverMain: WithOptions; - userButtonPopoverUserPreview: WithOptions; - userButtonPopoverActions: WithOptions; - userButtonPopoverActionButton: WithOptions<'manageAccount' | 'signOut', never, never>; - userButtonPopoverActionButtonIconBox: WithOptions<'manageAccount' | 'signOut', never, never>; - userButtonPopoverActionButtonIcon: WithOptions<'manageAccount' | 'signOut', never, never>; - userButtonPopoverActionButtonText: WithOptions<'manageAccount' | 'signOut', never, never>; - userButtonPopoverFooter: WithOptions; - userButtonPopoverFooterPages: WithOptions; - userButtonPopoverFooterPagesLink: WithOptions<'terms' | 'privacy', never, never>; - - organizationSwitcherTrigger: WithOptions; - organizationSwitcherTriggerIcon: WithOptions; - organizationSwitcherPopoverRootBox: WithOptions; - organizationSwitcherPopoverCard: WithOptions; - organizationSwitcherPopoverMain: WithOptions; - organizationSwitcherPopoverActions: WithOptions; - organizationSwitcherPopoverInvitationActions: WithOptions; + userButtonBox: WithOptions; + userButtonOuterIdentifier: WithOptions; + userButtonTrigger: WithOptions; + userButtonAvatarBox: WithOptions; + userButtonAvatarImage: WithOptions; + userButtonPopoverRootBox: WithOptions; + userButtonPopoverCard: WithOptions; + userButtonPopoverMain: WithOptions; + userButtonPopoverUserPreview: WithOptions; + userButtonPopoverActions: WithOptions; + userButtonPopoverActionButton: WithOptions<'manageAccount' | 'signOut'>; + userButtonPopoverActionButtonIconBox: WithOptions<'manageAccount' | 'signOut'>; + userButtonPopoverActionButtonIcon: WithOptions<'manageAccount' | 'signOut'>; + userButtonPopoverActionButtonText: WithOptions<'manageAccount' | 'signOut'>; + userButtonPopoverFooter: WithOptions; + userButtonPopoverFooterPages: WithOptions; + userButtonPopoverFooterPagesLink: WithOptions<'terms' | 'privacy'>; + + organizationSwitcherTrigger: WithOptions; + organizationSwitcherTriggerIcon: WithOptions; + organizationSwitcherPopoverRootBox: WithOptions; + organizationSwitcherPopoverCard: WithOptions; + organizationSwitcherPopoverMain: WithOptions; + organizationSwitcherPopoverActions: WithOptions; + organizationSwitcherPopoverInvitationActions: WithOptions; organizationSwitcherPopoverActionButton: WithOptions< 'manageOrganization' | 'createOrganization' | 'switchOrganization', never, never >; - organizationSwitcherPreviewButton: WithOptions; - organizationSwitcherInvitationAcceptButton: WithOptions; - organizationSwitcherInvitationRejectButton: WithOptions; + organizationSwitcherPreviewButton: WithOptions; + organizationSwitcherInvitationAcceptButton: WithOptions; + organizationSwitcherInvitationRejectButton: WithOptions; organizationSwitcherPopoverActionButtonIconBox: WithOptions< 'manageOrganization' | 'createOrganization', never, never >; - organizationSwitcherPopoverActionButtonIcon: WithOptions<'manageOrganization' | 'createOrganization', never, never>; - organizationSwitcherPopoverActionButtonText: WithOptions<'manageOrganization' | 'createOrganization', never, never>; - organizationSwitcherPopoverFooter: WithOptions; - organizationSwitcherPopoverFooterPages: WithOptions; - organizationSwitcherPopoverFooterPagesLink: WithOptions<'terms' | 'privacy', never, never>; + organizationSwitcherPopoverActionButtonIcon: WithOptions<'manageOrganization' | 'createOrganization'>; + organizationSwitcherPopoverActionButtonText: WithOptions<'manageOrganization' | 'createOrganization'>; + organizationSwitcherPopoverFooter: WithOptions; + organizationSwitcherPopoverFooterPages: WithOptions; + organizationSwitcherPopoverFooterPagesLink: WithOptions<'terms' | 'privacy'>; - organizationListPreviewItems: WithOptions; - organizationListPreviewItem: WithOptions; - organizationListPreviewButton: WithOptions; - organizationListPreviewItemActionButton: WithOptions; + organizationListPreviewItems: WithOptions; + organizationListPreviewItem: WithOptions; + organizationListPreviewButton: WithOptions; + organizationListPreviewItemActionButton: WithOptions; // TODO: Test this idea. Instead of userButtonUserPreview, have a userPreview__userButton instead // Same for other repeated selectors, eg avatar - userPreview: WithOptions; - userPreviewAvatarContainer: WithOptions; - userPreviewAvatarBox: WithOptions; - userPreviewAvatarImage: WithOptions; - userPreviewTextContainer: WithOptions; - userPreviewMainIdentifier: WithOptions; - userPreviewSecondaryIdentifier: WithOptions; - - organizationPreview: WithOptions; - organizationPreviewAvatarContainer: WithOptions; - organizationPreviewAvatarBox: WithOptions; - organizationPreviewAvatarImage: WithOptions; - organizationPreviewTextContainer: WithOptions; - organizationPreviewMainIdentifier: WithOptions; - organizationPreviewSecondaryIdentifier: WithOptions; - - membersPageInviteButton: WithOptions; - organizationProfilePage: WithOptions; - - identityPreview: WithOptions; - identityPreviewAvatarBox: WithOptions; - identityPreviewAvatarImage: WithOptions; - identityPreviewText: WithOptions; - identityPreviewEditButton: WithOptions; - identityPreviewEditButtonIcon: WithOptions; - - alert: WithOptions; - alertIcon: WithOptions; - alertText: WithOptions; - alertTextContainer: WithOptions; - - tagInputContainer: WithOptions; - tagPillIcon: WithOptions; - tagPillContainer: WithOptions; - - tabPanel: WithOptions; - tabButton: WithOptions; - tabListContainer: WithOptions; - - tableHead: WithOptions; - - paginationButton: WithOptions; - paginationRowText: WithOptions<'allRowsCount' | 'rowsCount' | 'displaying', never, never>; - - selectButton: WithOptions; - selectSearchInput: WithOptions; - selectButtonIcon: WithOptions; - selectOptionsContainer: WithOptions; - selectOption: WithOptions; - - menuButton: WithOptions; - menuList: WithOptions; - menuItem: WithOptions; - - loader: WithOptions; - loaderIcon: WithOptions; - - modalBackdrop: WithOptions; - modalContent: WithOptions; - modalCloseButton: WithOptions; - - profileSection: WithOptions; - profileSectionTitle: WithOptions; - profileSectionTitleText: WithOptions; - profileSectionSubtitle: WithOptions; - profileSectionSubtitleText: WithOptions; - profileSectionContent: WithOptions; - profileSectionPrimaryButton: WithOptions; - profilePage: WithOptions; + userPreview: WithOptions; + userPreviewAvatarContainer: WithOptions; + userPreviewAvatarBox: WithOptions; + userPreviewAvatarImage: WithOptions; + userPreviewTextContainer: WithOptions; + userPreviewMainIdentifier: WithOptions; + userPreviewSecondaryIdentifier: WithOptions; + + organizationPreview: WithOptions; + organizationPreviewAvatarContainer: WithOptions; + organizationPreviewAvatarBox: WithOptions; + organizationPreviewAvatarImage: WithOptions; + organizationPreviewTextContainer: WithOptions; + organizationPreviewMainIdentifier: WithOptions; + organizationPreviewSecondaryIdentifier: WithOptions; + + membersPageInviteButton: WithOptions; + organizationProfilePage: WithOptions; + + identityPreview: WithOptions; + identityPreviewAvatarBox: WithOptions; + identityPreviewAvatarImage: WithOptions; + identityPreviewText: WithOptions; + identityPreviewEditButton: WithOptions; + identityPreviewEditButtonIcon: WithOptions; + + alert: WithOptions; + alertIcon: WithOptions; + alertText: WithOptions; + alertTextContainer: WithOptions; + + tagInputContainer: WithOptions; + tagPillIcon: WithOptions; + tagPillContainer: WithOptions; + + tabPanel: WithOptions; + tabButton: WithOptions; + tabListContainer: WithOptions; + + tableHead: WithOptions; + + paginationButton: WithOptions; + paginationRowText: WithOptions<'allRowsCount' | 'rowsCount' | 'displaying'>; + + selectButton: WithOptions; + selectSearchInput: WithOptions; + selectButtonIcon: WithOptions; + selectOptionsContainer: WithOptions; + selectOption: WithOptions; + + menuButton: WithOptions; + menuList: WithOptions; + menuItem: WithOptions; + + loader: WithOptions; + loaderIcon: WithOptions; + + modalBackdrop: WithOptions; + modalContent: WithOptions; + modalCloseButton: WithOptions; + + profileSection: WithOptions; + profileSectionTitle: WithOptions; + profileSectionTitleText: WithOptions; + profileSectionSubtitle: WithOptions; + profileSectionSubtitleText: WithOptions; + profileSectionContent: WithOptions; + profileSectionPrimaryButton: WithOptions; + profilePage: WithOptions; // TODO: review - formattedPhoneNumber: WithOptions; - formattedPhoneNumberFlag: WithOptions; - formattedPhoneNumberText: WithOptions; - - breadcrumbs: WithOptions; - breadcrumbsItems: WithOptions; - breadcrumbsItemBox: WithOptions<'currentPage', never, never>; - breadcrumbsItem: WithOptions<'currentPage', never, never>; - breadcrumbsItemIcon: WithOptions<'currentPage', never, never>; - breadcrumbsItemDivider: WithOptions; - - scrollBox: WithOptions; - - navbar: WithOptions; - navbarButtons: WithOptions; - navbarButton: WithOptions; - navbarButtonIcon: WithOptions; - navbarMobileMenuRow: WithOptions; - navbarMobileMenuButton: WithOptions; - navbarMobileMenuButtonIcon: WithOptions; - - pageScrollBox: WithOptions; - page: WithOptions; - pageHeader: WithOptions; - - activeDeviceIcon: WithOptions<'mobile' | 'desktop', never, never>; - - impersonationFab: WithOptions; - impersonationFabIcon: WithOptions; - impersonationFabIconContainer: WithOptions; - impersonationFabTitle: WithOptions; - impersonationFabActionLink: WithOptions; - - fileDropAreaOuterBox: WithOptions; - fileDropAreaBox: WithOptions; - fileDropAreaIconBox: WithOptions; - fileDropAreaIcon: WithOptions; - fileDropAreaHint: WithOptions; - fileDropAreaButtonPrimary: WithOptions; - fileDropAreaFooterHint: WithOptions; - - invitationsSentIconBox: WithOptions; - invitationsSentIcon: WithOptions; - - accordionTriggerButton: WithOptions; - accordionContent: WithOptions; - - qrCodeRow: WithOptions; - qrCodeContainer: WithOptions; + formattedPhoneNumber: WithOptions; + formattedPhoneNumberFlag: WithOptions; + formattedPhoneNumberText: WithOptions; + + breadcrumbs: WithOptions; + breadcrumbsItems: WithOptions; + breadcrumbsItemBox: WithOptions<'currentPage'>; + breadcrumbsItem: WithOptions<'currentPage'>; + breadcrumbsItemIcon: WithOptions<'currentPage'>; + breadcrumbsItemDivider: WithOptions; + + scrollBox: WithOptions; + + navbar: WithOptions; + navbarButtons: WithOptions; + navbarButton: WithOptions; + navbarButtonIcon: WithOptions; + navbarMobileMenuRow: WithOptions; + navbarMobileMenuButton: WithOptions; + navbarMobileMenuButtonIcon: WithOptions; + + pageScrollBox: WithOptions; + page: WithOptions; + pageHeader: WithOptions; + + activeDeviceIcon: WithOptions<'mobile' | 'desktop'>; + + impersonationFab: WithOptions; + impersonationFabIcon: WithOptions; + impersonationFabIconContainer: WithOptions; + impersonationFabTitle: WithOptions; + impersonationFabActionLink: WithOptions; + + fileDropAreaOuterBox: WithOptions; + fileDropAreaBox: WithOptions; + fileDropAreaIconBox: WithOptions; + fileDropAreaIcon: WithOptions; + fileDropAreaHint: WithOptions; + fileDropAreaButtonPrimary: WithOptions; + fileDropAreaFooterHint: WithOptions; + + invitationsSentIconBox: WithOptions; + invitationsSentIcon: WithOptions; + + accordionTriggerButton: WithOptions; + accordionContent: WithOptions; + + qrCodeRow: WithOptions; + qrCodeContainer: WithOptions; // default descriptors - badge: WithOptions<'primary' | 'actionRequired', never, never>; - notificationBadge: WithOptions; - button: WithOptions; - providerIcon: WithOptions; + badge: WithOptions<'primary' | 'actionRequired'>; + notificationBadge: WithOptions; + button: WithOptions; + providerIcon: WithOptions; }; export type Elements = {