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

package/dist/runtime/react/index.mjs

@@ -4,7 +4,7 @@ import "../isomorphicBtoa-Db71q4D6.mjs";
 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--xlRIO4Z.mjs";
+import { g as ClerkRuntimeError, i as isClerkAPIResponseError } from "../error-D6MGXq-n.mjs";
 import { t as getCurrentOrganizationMembership } from "../organization-CDNOZNzF.mjs";
 import "../noop-Dzu7lrge.mjs";
 import "../underscore-Cv_9NQ-X.mjs";
@@ -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