@clerk/shared 4.0.0-snapshot.v20251208202852 → 4.0.0-snapshot.v20251215203425

package/dist/runtime/react/index.mjs

@@ -5,7 +5,7 @@ import "../keys-BGyzAyGu.mjs";
 import { n as reverificationError, t as isReverificationHint } from "../authorization-errors-CBHAr6Ld.mjs";
 import { i as validateReverificationConfig } from "../authorization-BpjgWZx-.mjs";
 import { g as ClerkRuntimeError, i as isClerkAPIResponseError } from "../error-D6MGXq-n.mjs";
-import { t as getCurrentOrganizationMembership } from "../organization-JwY1zGRo.mjs";
+import { t as getCurrentOrganizationMembership } from "../organization-CDNOZNzF.mjs";
 import "../noop-Dzu7lrge.mjs";
 import "../underscore-Cv_9NQ-X.mjs";
 import { a as eventMethodCalled } from "../telemetry-DnVD78JJ.mjs";
@@ -581,7 +581,7 @@ const undefinedPaginatedResource$1 = {
 	setData: void 0
 };
 /**
-* The `useOrganization()` hook retrieves attributes of the currently active organization.
+* The `useOrganization()` hook retrieves attributes of the currently Active Organization.
 *
 * @example
 * ### Expand and paginate attributes
@@ -616,7 +616,7 @@ const undefinedPaginatedResource$1 = {
 * @example
 * ### Infinite pagination
 *
-* The following example demonstrates how to use the `infinite` property to fetch and append new data to the existing list. The `memberships` attribute will be populated with the first page of the organization's memberships. When the "Load more" button is clicked, the `fetchNext` helper function will be called to append the next page of memberships to the list.
+* The following example demonstrates how to use the `infinite` property to fetch and append new data to the existing list. The `memberships` attribute will be populated with the first page of the Organization's memberships. When the "Load more" button is clicked, the `fetchNext` helper function will be called to append the next page of memberships to the list.
 *
 * ```tsx
 * import { useOrganization } from '@clerk/react'
@@ -660,7 +660,7 @@ const undefinedPaginatedResource$1 = {
 * @example
 * ### Simple pagination
 *
-* The following example demonstrates how to use the `fetchPrevious` and `fetchNext` helper functions to paginate through the data. The `memberships` attribute will be populated with the first page of the organization's memberships. When the "Previous page" or "Next page" button is clicked, the `fetchPrevious` or `fetchNext` helper function will be called to fetch the previous or next page of memberships.
+* The following example demonstrates how to use the `fetchPrevious` and `fetchNext` helper functions to paginate through the data. The `memberships` attribute will be populated with the first page of the Organization's memberships. When the "Previous page" or "Next page" button is clicked, the `fetchPrevious` or `fetchNext` helper function will be called to fetch the previous or next page of memberships.
 *
 * Notice the difference between this example's pagination and the infinite pagination example above.
 *
@@ -923,7 +923,7 @@ const undefinedPaginatedResource = {
 * @example
 * ### Infinite pagination
 *
-* The following example demonstrates how to use the `infinite` property to fetch and append new data to the existing list. The `userMemberships` attribute will be populated with the first page of the user's organization memberships. When the "Load more" button is clicked, the `fetchNext` helper function will be called to append the next page of memberships to the list.
+* The following example demonstrates how to use the `infinite` property to fetch and append new data to the existing list. The `userMemberships` attribute will be populated with the first page of the user's Organization memberships. When the "Load more" button is clicked, the `fetchNext` helper function will be called to append the next page of memberships to the list.
 *
 * ```tsx {{ filename: 'src/components/JoinedOrganizations.tsx' }}
 * import { useOrganizationList } from '@clerk/react'
@@ -1598,7 +1598,7 @@ function useBillingHookEnabled(params) {
 //#region src/react/hooks/createBillingPaginatedHook.tsx
 /**
 * A hook factory that creates paginated data fetching hooks for commerce-related resources.
-* It provides a standardized way to create hooks that can fetch either user or organization resources
+* It provides a standardized way to create hooks that can fetch either user or Organization resources
 * with built-in pagination support.
 *
 * The generated hooks handle:
@@ -2498,5 +2498,88 @@ const usePaymentElement = () => {
 };
 
 //#endregion
-export { ClerkInstanceContext, ClientContext, OptionsContext, OrganizationProvider, SessionContext, UserContext, __experimental_CheckoutProvider, PaymentElement as __experimental_PaymentElement, PaymentElementProvider as __experimental_PaymentElementProvider, useAPIKeys as __experimental_useAPIKeys, useCheckout as __experimental_useCheckout, usePaymentAttempts as __experimental_usePaymentAttempts, usePaymentElement as __experimental_usePaymentElement, usePaymentMethods as __experimental_usePaymentMethods, usePlans as __experimental_usePlans, useStatements as __experimental_useStatements, useSubscription as __experimental_useSubscription, __internal_usePaymentAttemptQuery, usePlanDetailsQuery as __internal_usePlanDetailsQuery, __internal_useStatementQuery, assertContextExists, createContextAndHook, isDeeplyEqual, useAssertWrappedByClerkProvider, useAttemptToEnableOrganizations, useClerk, useClerkInstanceContext, useClientContext, useDeepEqualMemo, useOptionsContext, useOrganization, useOrganizationContext, useOrganizationList, useReverification, useSafeLayoutEffect, useSession, useSessionContext, useSessionList, useUser, useUserContext };
+//#region src/react/portal-root-manager.ts
+/**
+* PortalRootManager manages a stack of portal root containers.
+* This allows PortalProvider to work across separate React trees
+* (e.g., when Clerk modals are rendered in a different tree via Components.tsx).
+*/
+var PortalRootManager = class {
+	stack = [];
+	/**
+	* Push a new portal root getter onto the stack.
+	* @param getContainer Function that returns the container element
+	*/
+	push(getContainer) {
+		this.stack.push(getContainer);
+	}
+	/**
+	* Pop the most recent portal root from the stack.
+	*/
+	pop() {
+		this.stack.pop();
+	}
+	/**
+	* Get the current (topmost) portal root container.
+	* @returns The container element or null if no provider is active
+	*/
+	getCurrent() {
+		if (this.stack.length === 0) return null;
+		const getContainer = this.stack[this.stack.length - 1];
+		return getContainer();
+	}
+};
+const portalRootManager = new PortalRootManager();
+
+//#endregion
+//#region src/react/PortalProvider.tsx
+const [PortalContext, , usePortalContextWithoutGuarantee] = createContextAndHook("PortalProvider");
+/**
+* PortalProvider allows you to specify a custom container for all Clerk floating UI elements
+* (popovers, modals, tooltips, etc.) that use portals.
+*
+* This is particularly useful when using Clerk components inside external UI libraries
+* like Radix Dialog or React Aria Components, where portaled elements need to render
+* within the dialog's container to remain interactable.
+*
+* @example
+* ```tsx
+* function Example() {
+*   const containerRef = useRef(null);
+*   return (
+*     <RadixDialog ref={containerRef}>
+*       <PortalProvider getContainer={() => containerRef.current}>
+*         <UserButton />
+*       </PortalProvider>
+*     </RadixDialog>
+*   );
+* }
+* ```
+*/
+const PortalProvider = ({ children, getContainer }) => {
+	const getContainerRef = useRef(getContainer);
+	getContainerRef.current = getContainer;
+	useEffect(() => {
+		const getContainerWrapper = () => getContainerRef.current();
+		portalRootManager.push(getContainerWrapper);
+		return () => {
+			portalRootManager.pop();
+		};
+	}, []);
+	const contextValue = React.useMemo(() => ({ value: { getContainer } }), [getContainer]);
+	return /* @__PURE__ */ React.createElement(PortalContext.Provider, { value: contextValue }, children);
+};
+/**
+* Hook to get the current portal root container.
+* First checks React context (for same-tree components),
+* then falls back to PortalRootManager (for cross-tree like modals).
+*/
+const usePortalRoot = () => {
+	const contextValue = usePortalContextWithoutGuarantee();
+	if (contextValue && "getContainer" in contextValue && contextValue.getContainer) return contextValue.getContainer;
+	return portalRootManager.getCurrent.bind(portalRootManager);
+};
+
+//#endregion
+export { ClerkInstanceContext, ClientContext, OptionsContext, OrganizationProvider, PortalProvider, SessionContext, UserContext, __experimental_CheckoutProvider, PaymentElement as __experimental_PaymentElement, PaymentElementProvider as __experimental_PaymentElementProvider, useAPIKeys as __experimental_useAPIKeys, useCheckout as __experimental_useCheckout, usePaymentAttempts as __experimental_usePaymentAttempts, usePaymentElement as __experimental_usePaymentElement, usePaymentMethods as __experimental_usePaymentMethods, usePlans as __experimental_usePlans, useStatements as __experimental_useStatements, useSubscription as __experimental_useSubscription, __internal_usePaymentAttemptQuery, usePlanDetailsQuery as __internal_usePlanDetailsQuery, __internal_useStatementQuery, assertContextExists, createContextAndHook, isDeeplyEqual, useAssertWrappedByClerkProvider, useAttemptToEnableOrganizations, useClerk, useClerkInstanceContext, useClientContext, useDeepEqualMemo, useOptionsContext, useOrganization, useOrganizationContext, useOrganizationList, usePortalRoot, useReverification, useSafeLayoutEffect, useSession, useSessionContext, useSessionList, useUser, useUserContext };
 //# sourceMappingURL=index.mjs.map