feat(clerk-js): Accept skipInvitationScreen as a prop from OrganizationSwitcher (#2713)

* feat(clerk-js): Accept `skipInvitationScreen` as a prop from OrganizationSwitcher

* chore(clerk-js): Improve changeset

Author: panteliselef

.changeset/late-geckos-impress.md

@@ -0,0 +1,9 @@
+---
+'@clerk/clerk-js': minor
+'@clerk/types': minor
+---
+
+Accept `skipInvitationScreen` as a prop from OrganizationSwitcher.
+
+`skipInvitationScreen` hides the screen for sending invitations after an organization is created.
+By default, Clerk will automatically hide the screen if the number of max allowed members is equal to 1

packages/clerk-js/src/ui/components/OrganizationSwitcher/OrganizationSwitcherPopover.tsx

@@ -48,6 +48,7 @@ export const OrganizationSwitcherPopover = React.forwardRef<HTMLDivElement, Orga
       navigateAfterSelectPersonal,
       navigateAfterSelectOrganization,
       organizationProfileProps,
+      skipInvitationScreen,
     } = useOrganizationSwitcherContext();
 
     const { user } = useUser();
@@ -84,7 +85,7 @@ export const OrganizationSwitcherPopover = React.forwardRef<HTMLDivElement, Orga
       if (createOrganizationMode === 'navigation') {
         return navigateCreateOrganization();
       }
-      return openCreateOrganization({ afterCreateOrganizationUrl });
+      return openCreateOrganization({ afterCreateOrganizationUrl, skipInvitationScreen });
     };
 
     const handleManageOrganizationClicked = () => {

packages/clerk-js/src/ui/contexts/ClerkUIComponentsContext.tsx

@@ -335,6 +335,7 @@ export const useOrganizationSwitcherContext = () => {
     hidePersonal: ctx.hidePersonal || false,
     organizationProfileMode: organizationProfileMode || 'modal',
     createOrganizationMode: createOrganizationMode || 'modal',
+    skipInvitationScreen: ctx.skipInvitationScreen || false,
     afterCreateOrganizationUrl,
     afterLeaveOrganizationUrl,
     navigateOrganizationProfile,

packages/types/src/clerk.ts

@@ -853,7 +853,6 @@ export type OrganizationSwitcherProps = CreateOrganizationMode &
     afterSelectOrganizationUrl?:
       | ((organization: OrganizationResource) => string)
       | LooseExtractedParams<PrimitiveKeys<OrganizationResource>>;
-
     /**
      * Full URL or path to navigate after a successful selection of personal workspace.
      * Accepts a function that returns URL or path
@@ -865,13 +864,18 @@ export type OrganizationSwitcherProps = CreateOrganizationMode &
      * @default undefined
      */
     afterLeaveOrganizationUrl?: string;
+    /**
+     * Hides the screen for sending invitations after an organization is created.
+     * @default undefined When left undefined Clerk will automatically hide the screen if
+     * the number of max allowed members is equal to 1
+     */
+    skipInvitationScreen?: boolean;
     /**
      * 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`
      * prop of ClerkProvided (if one is provided)
      */
     appearance?: OrganizationSwitcherTheme;
-
     /*
      * Specify options for the underlying <OrganizationProfile /> component.
      * e.g. <UserButton userProfileProps={{appearance: {...}}} />