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

package/dist/runtime/react/index.js

@@ -6,7 +6,7 @@ require('../keys-wr08qE7Y.js');
 const require_authorization_errors = require('../authorization-errors-B7aH39AU.js');
 const require_authorization = require('../authorization-R5uuaK2u.js');
 const require_error = require('../error-C4TyorFL.js');
-const require_organization = require('../organization-BzYWUtt4.js');
+const require_organization = require('../organization-BOnxJJGM.js');
 require('../noop-DEV2Xnb4.js');
 require('../underscore-moIbQc1H.js');
 const require_telemetry = require('../telemetry-CXXDXYfo.js');
@@ -586,7 +586,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
@@ -621,7 +621,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'
@@ -665,7 +665,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.
 *
@@ -928,7 +928,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'
@@ -1603,7 +1603,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:
@@ -2502,11 +2502,95 @@ const usePaymentElement = () => {
 	};
 };
 
+//#endregion
+//#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 = (0, react.useRef)(getContainer);
+	getContainerRef.current = getContainer;
+	(0, react.useEffect)(() => {
+		const getContainerWrapper = () => getContainerRef.current();
+		portalRootManager.push(getContainerWrapper);
+		return () => {
+			portalRootManager.pop();
+		};
+	}, []);
+	const contextValue = react.default.useMemo(() => ({ value: { getContainer } }), [getContainer]);
+	return /* @__PURE__ */ react.default.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
 exports.ClerkInstanceContext = ClerkInstanceContext;
 exports.ClientContext = ClientContext;
 exports.OptionsContext = OptionsContext;
 exports.OrganizationProvider = OrganizationProvider;
+exports.PortalProvider = PortalProvider;
 exports.SessionContext = SessionContext;
 exports.UserContext = UserContext;
 exports.__experimental_CheckoutProvider = __experimental_CheckoutProvider;
@@ -2536,6 +2620,7 @@ exports.useOptionsContext = useOptionsContext;
 exports.useOrganization = useOrganization;
 exports.useOrganizationContext = useOrganizationContext;
 exports.useOrganizationList = useOrganizationList;
+exports.usePortalRoot = usePortalRoot;
 exports.useReverification = useReverification;
 exports.useSafeLayoutEffect = useSafeLayoutEffect;
 exports.useSession = useSession;