chore(clerk-js,types): Add hideSlug support to OrganizationSwitcher

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

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

packages/clerk-js/src/ui/components/OrganizationSwitcher/__tests__/OrganizationSwitcher.test.tsx

@@ -223,6 +223,23 @@ describe('OrganizationSwitcher', () => {
       expect(fixtures.clerk.openCreateOrganization).toHaveBeenCalled();
     });
 
+    it('opens create organization without slug field', async () => {
+      const { wrapper, fixtures, props } = await createFixtures(f => {
+        f.withOrganizations();
+        f.withUser({
+          email_addresses: ['test@clerk.com'],
+          create_organization_enabled: true,
+        });
+      });
+
+      props.setProps({ hideSlug: true });
+      const { getByRole, queryByLabelText, userEvent } = render(<OrganizationSwitcher />, { wrapper });
+      await userEvent.click(getByRole('button', { name: 'Open organization switcher' }));
+      await userEvent.click(getByRole('menuitem', { name: 'Create organization' }));
+      expect(fixtures.clerk.openCreateOrganization).toHaveBeenCalled();
+      expect(queryByLabelText(/Slug/i)).toBeNull();
+    });
+
     it('does not display create organization button if permissions not present', async () => {
       const { wrapper, props } = await createFixtures(f => {
         f.withOrganizations();

packages/types/src/clerk.ts

@@ -1000,6 +1000,10 @@ export type OrganizationSwitcherProps = CreateOrganizationMode &
      * the number of max allowed members is equal to 1
      */
     skipInvitationScreen?: boolean;
+    /**
+     * Hides the slug field in the form.
+     */
+    hideSlug?: 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`