@clerk/react 6.8.0-snapshot.v20260604052353 → 6.8.0

package/dist/{chunk-3ME65G46.mjs → chunk-FQVXBXXF.mjs}

@@ -109,23 +109,45 @@ function withMaxAllowedInstancesGuard(WrappedComponent, name, error) {
 }
 
 // src/utils/useCustomElementPortal.tsx
-import { useState } from "react";
+import { useRef, useState } from "react";
 import { createPortal } from "react-dom";
 var useCustomElementPortal = (elements) => {
   const [nodeMap, setNodeMap] = useState(/* @__PURE__ */ new Map());
-  return elements.map((el) => ({
-    id: el.id,
-    mount: (node) => setNodeMap((prev) => new Map(prev).set(String(el.id), node)),
-    unmount: () => setNodeMap((prev) => {
-      const newMap = new Map(prev);
-      newMap.set(String(el.id), null);
-      return newMap;
-    }),
-    portal: () => {
-      const node = nodeMap.get(String(el.id));
-      return node ? createPortal(el.component, node) : null;
+  const nodeMapRef = useRef(nodeMap);
+  const elementsRef = useRef(/* @__PURE__ */ new Map());
+  const portalsRef = useRef(/* @__PURE__ */ new Map());
+  nodeMapRef.current = nodeMap;
+  elementsRef.current = new Map(elements.map((el) => [el.id, el.component]));
+  const elementIds = new Set(elements.map((el) => el.id));
+  portalsRef.current.forEach((_, id) => {
+    if (!elementIds.has(id)) {
+      portalsRef.current.delete(id);
     }
-  }));
+  });
+  return elements.map((el) => {
+    const id = el.id;
+    const existingPortal = portalsRef.current.get(id);
+    if (existingPortal) {
+      return existingPortal;
+    }
+    const portal = () => {
+      const node = nodeMapRef.current.get(id);
+      const component = elementsRef.current.get(id);
+      return node ? createPortal(component, node) : null;
+    };
+    const customElementPortal = {
+      id: el.id,
+      mount: (node) => setNodeMap((prev) => new Map(prev).set(id, node)),
+      unmount: () => setNodeMap((prev) => {
+        const newMap = new Map(prev);
+        newMap.set(id, null);
+        return newMap;
+      }),
+      portal
+    };
+    portalsRef.current.set(id, customElementPortal);
+    return customElementPortal;
+  });
 };
 
 // src/utils/useCustomPages.tsx
@@ -186,6 +208,7 @@ var useCustomPages = (params, options) => {
   const { children, LinkComponent, PageComponent, MenuItemsComponent, reorderItemsLabels, componentName } = params;
   const { allowForAnyChildren = false } = options || {};
   const validChildren = [];
+  const portalIdCounts = /* @__PURE__ */ new Map();
   React4.Children.forEach(children, (child) => {
     if (!isThatComponent(child, PageComponent) && !isThatComponent(child, LinkComponent) && !isThatComponent(child, MenuItemsComponent)) {
       if (child && !allowForAnyChildren) {
@@ -195,11 +218,18 @@ var useCustomPages = (params, options) => {
     }
     const { props } = child;
     const { children: children2, label, url, labelIcon } = props;
+    const childKey = child.key;
     if (isThatComponent(child, PageComponent)) {
       if (isReorderItem(props, reorderItemsLabels)) {
         validChildren.push({ label });
       } else if (isCustomPage(props)) {
-        validChildren.push({ label, labelIcon, children: children2, url });
+        validChildren.push({
+          label,
+          labelIcon,
+          children: children2,
+          url,
+          portalId: getCustomPagePortalId("page", props, childKey, portalIdCounts)
+        });
       } else {
         logErrorInDevMode(customPageWrongProps(componentName));
         return;
@@ -207,7 +237,12 @@ var useCustomPages = (params, options) => {
     }
     if (isThatComponent(child, LinkComponent)) {
       if (isExternalLink(props)) {
-        validChildren.push({ label, labelIcon, url });
+        validChildren.push({
+          label,
+          labelIcon,
+          url,
+          portalId: getCustomPagePortalId("link", props, childKey, portalIdCounts)
+        });
       } else {
         logErrorInDevMode(customLinkWrongProps(componentName));
         return;
@@ -219,12 +254,12 @@ var useCustomPages = (params, options) => {
   const customLinkLabelIcons = [];
   validChildren.forEach((cp, index) => {
     if (isCustomPage(cp)) {
-      customPageContents.push({ component: cp.children, id: index });
-      customPageLabelIcons.push({ component: cp.labelIcon, id: index });
+      customPageContents.push({ component: cp.children, id: cp.portalId || index });
+      customPageLabelIcons.push({ component: cp.labelIcon, id: cp.portalId || index });
       return;
     }
     if (isExternalLink(cp)) {
-      customLinkLabelIcons.push({ component: cp.labelIcon, id: index });
+      customLinkLabelIcons.push({ component: cp.labelIcon, id: cp.portalId || index });
     }
   });
   const customPageContentsPortals = useCustomElementPortal(customPageContents);
@@ -242,15 +277,15 @@ var useCustomPages = (params, options) => {
         portal: contentPortal,
         mount,
         unmount
-      } = customPageContentsPortals.find((p) => p.id === index);
+      } = customPageContentsPortals.find((p) => p.id === (cp.portalId || index));
       const {
         portal: labelPortal,
         mount: mountIcon,
         unmount: unmountIcon
-      } = customPageLabelIconsPortals.find((p) => p.id === index);
+      } = customPageLabelIconsPortals.find((p) => p.id === (cp.portalId || index));
       customPages.push({ label: cp.label, url: cp.url, mount, unmount, mountIcon, unmountIcon });
-      customPagesPortals.push(contentPortal);
-      customPagesPortals.push(labelPortal);
+      customPagesPortals.push({ key: `content:${cp.portalId || index}`, portal: contentPortal });
+      customPagesPortals.push({ key: `label:${cp.portalId || index}`, portal: labelPortal });
       return;
     }
     if (isExternalLink(cp)) {
@@ -258,14 +293,24 @@ var useCustomPages = (params, options) => {
         portal: labelPortal,
         mount: mountIcon,
         unmount: unmountIcon
-      } = customLinkLabelIconsPortals.find((p) => p.id === index);
+      } = customLinkLabelIconsPortals.find((p) => p.id === (cp.portalId || index));
       customPages.push({ label: cp.label, url: cp.url, mountIcon, unmountIcon });
-      customPagesPortals.push(labelPortal);
+      customPagesPortals.push({ key: `label:${cp.portalId || index}`, portal: labelPortal });
       return;
     }
   });
   return { customPages, customPagesPortals };
 };
+var getCustomPagePortalId = (type, props, key, portalIdCounts) => {
+  var _a;
+  if (key != null) {
+    return `${type}:key:${key}`;
+  }
+  const baseId = `${type}:${props.label}:${props.url}`;
+  const occurrence = (_a = portalIdCounts.get(baseId)) != null ? _a : 0;
+  portalIdCounts.set(baseId, occurrence + 1);
+  return `${baseId}:${occurrence}`;
+};
 var isReorderItem = (childProps, validItems) => {
   const { children, label, url, labelIcon } = childProps;
   return !children && !url && !labelIcon && validItems.some((v) => v === label);
@@ -309,6 +354,7 @@ var useCustomMenuItems = ({
   const validChildren = [];
   const customMenuItems = [];
   const customMenuItemsPortals = [];
+  const portalIdCounts = /* @__PURE__ */ new Map();
   React5.Children.forEach(children, (child) => {
     if (!isThatComponent(child, MenuItemsComponent) && !isThatComponent(child, UserProfileLinkComponent) && !isThatComponent(child, UserProfilePageComponent)) {
       if (child && !allowForAnyChildren) {
@@ -328,6 +374,7 @@ var useCustomMenuItems = ({
         return;
       }
       const { props: props2 } = child2;
+      const childKey = child2.key;
       const { label, labelIcon, href, onClick, open } = props2;
       if (isThatComponent(child2, MenuActionComponent)) {
         if (isReorderItem2(props2, reorderItemsLabels)) {
@@ -340,12 +387,14 @@ var useCustomMenuItems = ({
           if (onClick !== void 0) {
             validChildren.push({
               ...baseItem,
-              onClick
+              onClick,
+              portalId: getCustomMenuItemPortalId("action", props2, childKey, portalIdCounts)
             });
           } else if (open !== void 0) {
             validChildren.push({
               ...baseItem,
-              open: open.startsWith("/") ? open : `/${open}`
+              open: open.startsWith("/") ? open : `/${open}`,
+              portalId: getCustomMenuItemPortalId("action", props2, childKey, portalIdCounts)
             });
           } else {
             logErrorInDevMode2("Custom menu item must have either onClick or open property");
@@ -358,7 +407,12 @@ var useCustomMenuItems = ({
       }
       if (isThatComponent(child2, MenuLinkComponent)) {
         if (isExternalLink2(props2)) {
-          validChildren.push({ label, labelIcon, href });
+          validChildren.push({
+            label,
+            labelIcon,
+            href,
+            portalId: getCustomMenuItemPortalId("link", props2, childKey, portalIdCounts)
+          });
         } else {
           logErrorInDevMode2(userButtonMenuItemLinkWrongProps);
           return;
@@ -370,10 +424,10 @@ var useCustomMenuItems = ({
   const customLinkLabelIcons = [];
   validChildren.forEach((mi, index) => {
     if (isCustomMenuItem(mi)) {
-      customMenuItemLabelIcons.push({ component: mi.labelIcon, id: index });
+      customMenuItemLabelIcons.push({ component: mi.labelIcon, id: mi.portalId || index });
     }
     if (isExternalLink2(mi)) {
-      customLinkLabelIcons.push({ component: mi.labelIcon, id: index });
+      customLinkLabelIcons.push({ component: mi.labelIcon, id: mi.portalId || index });
     }
   });
   const customMenuItemLabelIconsPortals = useCustomElementPortal(customMenuItemLabelIcons);
@@ -389,7 +443,7 @@ var useCustomMenuItems = ({
         portal: iconPortal,
         mount: mountIcon,
         unmount: unmountIcon
-      } = customMenuItemLabelIconsPortals.find((p) => p.id === index);
+      } = customMenuItemLabelIconsPortals.find((p) => p.id === (mi.portalId || index));
       const menuItem = {
         label: mi.label,
         mountIcon,
@@ -401,25 +455,36 @@ var useCustomMenuItems = ({
         menuItem.open = mi.open;
       }
       customMenuItems.push(menuItem);
-      customMenuItemsPortals.push(iconPortal);
+      customMenuItemsPortals.push({ key: `icon:${mi.portalId || index}`, portal: iconPortal });
     }
     if (isExternalLink2(mi)) {
       const {
         portal: iconPortal,
         mount: mountIcon,
         unmount: unmountIcon
-      } = customLinkLabelIconsPortals.find((p) => p.id === index);
+      } = customLinkLabelIconsPortals.find((p) => p.id === (mi.portalId || index));
       customMenuItems.push({
         label: mi.label,
         href: mi.href,
         mountIcon,
         unmountIcon
       });
-      customMenuItemsPortals.push(iconPortal);
+      customMenuItemsPortals.push({ key: `icon:${mi.portalId || index}`, portal: iconPortal });
     }
   });
   return { customMenuItems, customMenuItemsPortals };
 };
+var getCustomMenuItemPortalId = (type, props, key, portalIdCounts) => {
+  var _a;
+  if (key != null) {
+    return `${type}:key:${key}`;
+  }
+  const target = props.href || props.open || "";
+  const baseId = `${type}:${props.label}:${target}`;
+  const occurrence = (_a = portalIdCounts.get(baseId)) != null ? _a : 0;
+  portalIdCounts.set(baseId, occurrence + 1);
+  return `${baseId}:${occurrence}`;
+};
 var isReorderItem2 = (childProps, validItems) => {
   const { children, label, onClick, labelIcon } = childProps;
   return !children && !onClick && !labelIcon && validItems.some((v) => v === label);
@@ -434,7 +499,7 @@ var isExternalLink2 = (childProps) => {
 };
 
 // src/utils/useWaitForComponentMount.ts
-import { useEffect, useRef, useState as useState2 } from "react";
+import { useEffect, useRef as useRef2, useState as useState2 } from "react";
 var createAwaitableMutationObserver = (globalOptions) => {
   const isReady = globalOptions == null ? void 0 : globalOptions.isReady;
   return (options) => new Promise((resolve, reject) => {
@@ -483,7 +548,7 @@ var waitForElementChildren = createAwaitableMutationObserver({
   }
 });
 function useWaitForComponentMount(component, options) {
-  const watcherRef = useRef();
+  const watcherRef = useRef2();
   const [status, setStatus] = useState2("rendering");
   useEffect(() => {
     if (!component) {
@@ -526,16 +591,16 @@ var ClerkHostRenderer = class extends React6.PureComponent {
     this.rootRef = React6.createRef();
   }
   componentDidUpdate(_prevProps) {
-    var _a, _b, _c, _d;
+    var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j;
     if (!isMountProps(_prevProps) || !isMountProps(this.props)) {
       return;
     }
-    const prevProps = without(_prevProps.props, "customPages", "customMenuItems", "children");
-    const newProps = without(this.props.props, "customPages", "customMenuItems", "children");
-    const customPagesChanged = ((_a = prevProps.customPages) == null ? void 0 : _a.length) !== ((_b = newProps.customPages) == null ? void 0 : _b.length);
-    const customMenuItemsChanged = ((_c = prevProps.customMenuItems) == null ? void 0 : _c.length) !== ((_d = newProps.customMenuItems) == null ? void 0 : _d.length);
-    const prevMenuItemsWithoutHandlers = stripMenuItemIconHandlers(_prevProps.props.customMenuItems);
-    const newMenuItemsWithoutHandlers = stripMenuItemIconHandlers(this.props.props.customMenuItems);
+    const prevProps = without(_prevProps.props || {}, "customPages", "customMenuItems", "children");
+    const newProps = without(this.props.props || {}, "customPages", "customMenuItems", "children");
+    const customPagesChanged = ((_b = (_a = _prevProps.props) == null ? void 0 : _a.customPages) == null ? void 0 : _b.length) !== ((_d = (_c = this.props.props) == null ? void 0 : _c.customPages) == null ? void 0 : _d.length);
+    const customMenuItemsChanged = ((_f = (_e = _prevProps.props) == null ? void 0 : _e.customMenuItems) == null ? void 0 : _f.length) !== ((_h = (_g = this.props.props) == null ? void 0 : _g.customMenuItems) == null ? void 0 : _h.length);
+    const prevMenuItemsWithoutHandlers = stripMenuItemIconHandlers((_i = _prevProps.props) == null ? void 0 : _i.customMenuItems);
+    const newMenuItemsWithoutHandlers = stripMenuItemIconHandlers((_j = this.props.props) == null ? void 0 : _j.customMenuItems);
     if (!isDeeplyEqual(prevProps, newProps) || !isDeeplyEqual(prevMenuItemsWithoutHandlers, newMenuItemsWithoutHandlers) || customPagesChanged || customMenuItemsChanged) {
       if (this.rootRef.current) {
         this.props.updateProps({ node: this.rootRef.current, props: this.props.props });
@@ -605,7 +670,7 @@ var withClerk = (Component, displayNameOrOptions) => {
 // src/components/uiComponents.tsx
 var CustomPortalsRenderer = (props) => {
   var _a, _b;
-  return /* @__PURE__ */ React8.createElement(React8.Fragment, null, (_a = props == null ? void 0 : props.customPagesPortals) == null ? void 0 : _a.map((portal, index) => createElement(portal, { key: index })), (_b = props == null ? void 0 : props.customMenuItemsPortals) == null ? void 0 : _b.map((portal, index) => createElement(portal, { key: index })));
+  return /* @__PURE__ */ React8.createElement(React8.Fragment, null, (_a = props == null ? void 0 : props.customPagesPortals) == null ? void 0 : _a.map(({ key, portal }) => createElement(portal, { key })), (_b = props == null ? void 0 : props.customMenuItemsPortals) == null ? void 0 : _b.map(({ key, portal }) => createElement(portal, { key })));
 };
 var SignIn = withClerk(
   ({ clerk, component, fallback, ...props }) => {
@@ -1003,27 +1068,6 @@ var APIKeys = withClerk(
   },
   { component: "ApiKeys", renderWhileLoading: true }
 );
-var ConfigureSSO = withClerk(
-  ({ clerk, component, fallback, ...props }) => {
-    const mountingStatus = useWaitForComponentMount(component);
-    const shouldShowFallback = mountingStatus === "rendering" || !clerk.loaded;
-    const rendererRootProps = {
-      ...shouldShowFallback && fallback && { style: { display: "none" } }
-    };
-    return /* @__PURE__ */ React8.createElement(React8.Fragment, null, shouldShowFallback && fallback, clerk.loaded && /* @__PURE__ */ React8.createElement(
-      ClerkHostRenderer,
-      {
-        component,
-        mount: clerk.mountConfigureSSO,
-        unmount: clerk.unmountConfigureSSO,
-        updateProps: clerk.__internal_updateProps,
-        props,
-        rootProps: rendererRootProps
-      }
-    ));
-  },
-  { component: "ConfigureSSO", renderWhileLoading: true }
-);
 var OAuthConsent = withClerk(
   ({ clerk, component, fallback, ...props }) => {
     const mountingStatus = useWaitForComponentMount(component);
@@ -1413,7 +1457,6 @@ export {
   Waitlist,
   PricingTable,
   APIKeys,
-  ConfigureSSO,
   OAuthConsent,
   UserAvatar,
   TaskChooseOrganization,
@@ -1441,4 +1484,4 @@ export {
   __experimental_PaymentElementProvider,
   __experimental_PaymentElement
 };
-//# sourceMappingURL=chunk-3ME65G46.mjs.map
+//# sourceMappingURL=chunk-FQVXBXXF.mjs.map