refactor(ui): name the Mosaic UserButton layers for their MVC roles v2

packages/shared/src/react/hooks/useAttemptToEnableOrganizations.ts

@@ -7,13 +7,16 @@ import { useClerk } from './useClerk';
  *
  * @internal
  */
-export function useAttemptToEnableOrganizations(caller: 'useOrganization' | 'useOrganizationList') {
+export function useAttemptToEnableOrganizations(
+  caller: 'useOrganization' | 'useOrganizationList',
+  { enabled = true }: { enabled?: boolean } = {},
+) {
   const clerk = useClerk();
   const hasAttempted = useRef(false);
 
   useEffect(() => {
     // Guard to not run this effect twice on Clerk resource update
-    if (hasAttempted.current) {
+    if (!enabled || hasAttempted.current) {
       return;
     }
 
@@ -23,5 +26,5 @@ export function useAttemptToEnableOrganizations(caller: 'useOrganization' | 'use
       for: 'organizations',
       caller,
     });
-  }, [clerk, caller]);
+  }, [clerk, caller, enabled]);
 }

packages/shared/src/react/hooks/useOrganization.tsx

@@ -61,6 +61,12 @@ export type UseOrganizationParams = {
    * </ul>
    */
   invitations?: true | PaginatedHookConfig<GetInvitationsParams>;
+  /**
+   * Skip the development prompt that offers to enable Organizations.
+   *
+   * @internal
+   */
+  __internal_skipAttemptToEnableOrganizations?: boolean;
 };
 
 /**
@@ -275,10 +281,13 @@ export function useOrganization<T extends UseOrganizationParams>(params?: T): Us
     membershipRequests: membershipRequestsListParams,
     memberships: membersListParams,
     invitations: invitationsListParams,
+    __internal_skipAttemptToEnableOrganizations,
   } = params || {};
 
   useAssertWrappedByClerkProvider('useOrganization');
-  useAttemptToEnableOrganizations('useOrganization');
+  useAttemptToEnableOrganizations('useOrganization', {
+    enabled: !__internal_skipAttemptToEnableOrganizations,
+  });
 
   const organization = useOrganizationBase();
   const session = useSessionBase();

packages/shared/src/react/hooks/useOrganizationList.tsx

@@ -253,7 +253,10 @@ export function useOrganizationList<T extends UseOrganizationListParams>(params?
   const { userMemberships, userInvitations, userSuggestions } = params || {};
 
   useAssertWrappedByClerkProvider('useOrganizationList');
-  useAttemptToEnableOrganizations('useOrganizationList');
+  // No list keys means this call is not using Organizations; the prompt is for the lists.
+  useAttemptToEnableOrganizations('useOrganizationList', {
+    enabled: userMemberships !== undefined || userInvitations !== undefined || userSuggestions !== undefined,
+  });
 
   const userMembershipsSafeValues = useWithSafeValues(userMemberships, {
     initialPage: 1,

packages/ui/src/hooks/useOrganizationListInView.ts

@@ -5,14 +5,18 @@ import { useInView } from './useInView';
 
 /**
  * @internal
+ *
+ * `enabled` withholds the list params so the three requests do not start. Defaults on.
  */
-export const useOrganizationListInView = () => {
-  const { userMemberships, userInvitations, userSuggestions } = useOrganizationList(organizationListParams);
+export const useOrganizationListInView = ({ enabled = true }: { enabled?: boolean } = {}) => {
+  const { userMemberships, userInvitations, userSuggestions } = useOrganizationList(
+    enabled ? organizationListParams : undefined,
+  );
 
   const { ref } = useInView({
     threshold: 0,
     onChange: inView => {
-      if (!inView) {
+      if (!enabled || !inView) {
         return;
       }
       if (userMemberships.hasNextPage) {