Backport changes

Author: LauraBeatris

packages/chrome-extension/src/__tests__/__snapshots__/exports.test.ts.snap

@@ -35,6 +35,7 @@ exports[`public exports > should not include a breaking change 1`] = `
   "useClerk",
   "useEmailLink",
   "useOrganization",
+  "useOrganizationCreationDefaults",
   "useOrganizationList",
   "useReverification",
   "useSession",

packages/nextjs/src/client-boundary/hooks.ts

@@ -6,6 +6,7 @@ export {
   useEmailLink,
   useOrganization,
   useOrganizationList,
+  useOrganizationCreationDefaults,
   useSession,
   useSessionList,
   useSignIn,

packages/nextjs/src/index.ts

@@ -52,6 +52,7 @@ export {
   useClerk,
   useEmailLink,
   useOrganization,
+  useOrganizationCreationDefaults,
   useOrganizationList,
   useReverification,
   useSession,

packages/react-router/src/__tests__/__snapshots__/exports.test.ts.snap

@@ -59,6 +59,7 @@ exports[`root public exports > should not change unexpectedly 1`] = `
   "useClerk",
   "useEmailLink",
   "useOrganization",
+  "useOrganizationCreationDefaults",
   "useOrganizationList",
   "useReverification",
   "useSession",

packages/react/src/hooks/index.ts

@@ -4,6 +4,7 @@ export { useSignIn, useSignUp, useWaitlist } from './useClerkSignal';
 export {
   useClerk,
   useOrganization,
+  useOrganizationCreationDefaults,
   useOrganizationList,
   useSessionList,
   useUser,

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

@@ -1,6 +1,11 @@
 export { assertContextExists, createContextAndHook } from './createContextAndHook';
 export { useAPIKeys as __experimental_useAPIKeys } from './useAPIKeys';
 export { useOrganization } from './useOrganization';
+export { useOrganizationCreationDefaults } from './useOrganizationCreationDefaults';
+export type {
+  UseOrganizationCreationDefaultsParams,
+  UseOrganizationCreationDefaultsReturn,
+} from './useOrganizationCreationDefaults.types';
 export { useOrganizationList } from './useOrganizationList';
 export { useAttemptToEnableOrganizations } from './useAttemptToEnableOrganizations';
 export { useSafeLayoutEffect } from './useSafeLayoutEffect';

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

@@ -0,0 +1,20 @@
+import { useMemo } from 'react';
+
+import { STABLE_KEYS } from '../stable-keys';
+import { createCacheKeys } from './createCacheKeys';
+
+export function useOrganizationCreationDefaultsCacheKeys(params: { userId: string | null }) {
+  const { userId } = params;
+  return useMemo(() => {
+    return createCacheKeys({
+      stablePrefix: STABLE_KEYS.ORGANIZATION_CREATION_DEFAULTS_KEY,
+      authenticated: Boolean(userId),
+      tracked: {
+        userId: userId ?? null,
+      },
+      untracked: {
+        args: {},
+      },
+    });
+  }, [userId]);
+}

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

@@ -0,0 +1,70 @@
+import { eventMethodCalled } from '../../telemetry/events/method-called';
+import type { EnvironmentResource } from '../../types/environment';
+import { defineKeepPreviousDataFn } from '../clerk-rq/keep-previous-data';
+import { useClerkQuery } from '../clerk-rq/useQuery';
+import { useAssertWrappedByClerkProvider, useClerkInstanceContext, useUserContext } from '../contexts';
+import { useOrganizationCreationDefaultsCacheKeys } from './useOrganizationCreationDefaults.shared';
+import type {
+  UseOrganizationCreationDefaultsParams,
+  UseOrganizationCreationDefaultsReturn,
+} from './useOrganizationCreationDefaults.types';
+
+const HOOK_NAME = 'useOrganizationCreationDefaults';
+
+/**
+ * The `useOrganizationCreationDefaults()` hook retrieves the organization creation defaults for the current user.
+ *
+ * @example
+ * ### Basic usage
+ *
+ * ```tsx
+ * import { useOrganizationCreationDefaults } from '@clerk/clerk-react'
+ *
+ * export default function CreateOrganizationForm() {
+ *   const { data, isLoading } = useOrganizationCreationDefaults()
+ *
+ *   if (isLoading) return <div>Loading...</div>
+ *
+ *   return (
+ *     <form>
+ *       <input defaultValue={data?.form.name} placeholder="Organization name" />
+ *       <input defaultValue={data?.form.slug} placeholder="Slug" />
+ *       <button type="submit">Create</button>
+ *     </form>
+ *   )
+ * }
+ * ```
+ */
+export function useOrganizationCreationDefaults(
+  params: UseOrganizationCreationDefaultsParams = {},
+): UseOrganizationCreationDefaultsReturn {
+  useAssertWrappedByClerkProvider(HOOK_NAME);
+
+  const { keepPreviousData = true, enabled = true } = params;
+  const clerk = useClerkInstanceContext();
+  const user = useUserContext();
+
+  // @ts-expect-error `__unstable__environment` is not typed
+  const environment = clerk.__unstable__environment as unknown as EnvironmentResource | null | undefined;
+  const featureEnabled = environment?.organizationSettings?.organizationCreationDefaults?.enabled ?? false;
+
+  clerk.telemetry?.record(eventMethodCalled(HOOK_NAME));
+
+  const { queryKey } = useOrganizationCreationDefaultsCacheKeys({ userId: user?.id ?? null });
+
+  const queryEnabled = Boolean(user) && enabled && featureEnabled && clerk.loaded;
+
+  const query = useClerkQuery({
+    queryKey,
+    queryFn: user?.getOrganizationCreationDefaults,
+    enabled: queryEnabled,
+    placeholderData: defineKeepPreviousDataFn(keepPreviousData),
+  });
+
+  return {
+    data: query.data,
+    error: (query.error ?? null) as UseOrganizationCreationDefaultsReturn['error'],
+    isLoading: query.isLoading,
+    isFetching: query.isFetching,
+  };
+}

packages/shared/src/react/hooks/useOrganizationCreationDefaults.types.ts

@@ -0,0 +1,36 @@
+import type { ClerkAPIResponseError } from '../../errors/clerkApiResponseError';
+import type { OrganizationCreationDefaultsResource } from '../../types';
+
+export type UseOrganizationCreationDefaultsParams = {
+  /**
+   * If true, the previous data will be kept in the cache until new data is fetched.
+   *
+   * @default true
+   */
+  keepPreviousData?: boolean;
+  /**
+   * If `true`, a request will be triggered when the hook is mounted.
+   *
+   * @default true
+   */
+  enabled?: boolean;
+};
+
+export type UseOrganizationCreationDefaultsReturn = {
+  /**
+   * The organization creation defaults resource, `undefined` before the first fetch, or `null` if not available.
+   */
+  data: OrganizationCreationDefaultsResource | undefined | null;
+  /**
+   * Any error that occurred during the data fetch, or `null` if no error occurred.
+   */
+  error: ClerkAPIResponseError | null;
+  /**
+   * A boolean that indicates whether the initial data is still being fetched.
+   */
+  isLoading: boolean;
+  /**
+   * A boolean that indicates whether any request is still in flight, including background updates.
+   */
+  isFetching: boolean;
+};

packages/shared/src/react/stable-keys.ts

@@ -12,6 +12,9 @@ const INVITATIONS_KEY = 'invitations';
 // Keys for `useAPIKeys`
 const API_KEYS_KEY = 'apiKeys';
 
+// Keys for `useOrganizationCreationDefaults`
+const ORGANIZATION_CREATION_DEFAULTS_KEY = 'organizationCreationDefaults';
+
 // Keys for `usePlans`
 const PLANS_KEY = 'billing-plans';
 
@@ -48,6 +51,9 @@ export const STABLE_KEYS = {
 
   // Keys for `useAPIKeys`
   API_KEYS_KEY,
+
+  // Keys for `useOrganizationCreationDefaults`
+  ORGANIZATION_CREATION_DEFAULTS_KEY,
 } as const;
 
 export type ResourceCacheStableKey = (typeof STABLE_KEYS)[keyof typeof STABLE_KEYS];