@base-ui/react 1.6.0 → 1.7.0

package/utils/popups/popupStoreUtils.js

@@ -6,16 +6,16 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.FOCUSABLE_POPUP_PROPS = void 0;
+exports.PopupHandleAttachment = PopupHandleAttachment;
 exports.applyPopupOpenChange = applyPopupOpenChange;
 exports.attachPreventUnmountOnClose = attachPreventUnmountOnClose;
 exports.createDefaultInitialFocus = createDefaultInitialFocus;
 exports.setPopupOpenState = setPopupOpenState;
 exports.useImplicitActiveTrigger = useImplicitActiveTrigger;
-exports.useInitialOpenSync = useInitialOpenSync;
 exports.useOpenStateTransitions = useOpenStateTransitions;
 exports.usePopupInteractionProps = usePopupInteractionProps;
+exports.usePopupRootStore = usePopupRootStore;
 exports.usePopupRootSync = usePopupRootSync;
-exports.usePopupStore = usePopupStore;
 exports.useTriggerDataForwarding = useTriggerDataForwarding;
 exports.useTriggerRegistration = useTriggerRegistration;
 var React = _interopRequireWildcard(require("react"));
@@ -24,7 +24,7 @@ var _empty = require("@base-ui/utils/empty");
 var _useId = require("@base-ui/utils/useId");
 var _useStableCallback = require("@base-ui/utils/useStableCallback");
 var _useIsoLayoutEffect = require("@base-ui/utils/useIsoLayoutEffect");
-var _useOnFirstRender = require("@base-ui/utils/useOnFirstRender");
+var _useRefWithInit = require("@base-ui/utils/useRefWithInit");
 var _constants = require("../../floating-ui-react/utils/constants");
 var _FloatingTree = require("../../floating-ui-react/components/FloatingTree");
 var _useSyncedFloatingRootContext = require("../../floating-ui-react/hooks/useSyncedFloatingRootContext");
@@ -45,14 +45,26 @@ const FOCUSABLE_POPUP_PROPS = exports.FOCUSABLE_POPUP_PROPS = {
 function createDefaultInitialFocus(popupRef) {
   return interactionType => interactionType === 'touch' ? popupRef.current : true;
 }
-function usePopupStore(externalStore, createStore, treatPopupAsFloatingElement = false) {
+
+/**
+ * The subset of a popup handle that a Root needs to bind its store to. Both the real handle classes
+ * and any test double satisfy it.
+ */
+
+/**
+ * Creates and owns a popup store on behalf of a Root part. The store is created exactly once, with
+ * controlled props and root state synced separately after creation. Sets up the synced floating
+ * root context and returns the store.
+ *
+ * @param createStore Factory that builds the store. Called exactly once, receiving the floating id
+ * and whether the popup is nested inside another floating element, both resolved on the first render.
+ * @param treatPopupAsFloatingElement Whether the popup element is passed to Floating UI as the
+ * floating element instead of the default positioner.
+ */
+function usePopupRootStore(createStore, treatPopupAsFloatingElement = false) {
   const floatingId = (0, _useId.useId)();
   const nested = (0, _FloatingTree.useFloatingParentNodeId)() != null;
-  const internalStoreRef = React.useRef(null);
-  if (externalStore === undefined && internalStoreRef.current === null) {
-    internalStoreRef.current = createStore(floatingId, nested);
-  }
-  const store = externalStore ?? internalStoreRef.current;
+  const store = (0, _useRefWithInit.useRefWithInit)(() => createStore(floatingId, nested)).current;
   (0, _useSyncedFloatingRootContext.useSyncedFloatingRootContext)({
     popupStore: store,
     treatPopupAsFloatingElement,
@@ -61,10 +73,27 @@ function usePopupStore(externalStore, createStore, treatPopupAsFloatingElement =
     nested,
     onOpenChange: store.setOpen
   });
-  return {
-    store,
-    internalStore: internalStoreRef.current
-  };
+  return store;
+}
+
+/**
+ * Attaches a Root's store to a handle for this component's committed lifetime. Popup Roots render
+ * it before their interactions and user children so its layout effect runs before descendant layout
+ * effects. This lets descendants call the handle during the Root's initial commit without attaching
+ * during render, which would leak suspended or abandoned stores. Store subscribers are notified by
+ * `attachStore` in this ordinary layout phase, where React permits synchronous updates.
+ *
+ * Popup Roots must render this component only when a handle is present so handle-less Roots avoid
+ * mounting an extra fiber and layout effect.
+ */
+function PopupHandleAttachment({
+  handle,
+  store
+}) {
+  (0, _useIsoLayoutEffect.useIsoLayoutEffect)(() => {
+    return handle.attachStore(store);
+  }, [handle, store]);
+  return null;
 }
 
 /**
@@ -174,19 +203,6 @@ function applyPopupOpenChange(store, nextOpen, eventDetails, options = {}) {
     changeState();
   }
 }
-function useInitialOpenSync(store, openProp, defaultOpen, defaultTriggerId) {
-  (0, _useOnFirstRender.useOnFirstRender)(() => {
-    if (openProp === undefined && store.state.open === false && defaultOpen) {
-      // Avoid notifying detached trigger subscribers while the Root is rendering.
-      store.state = {
-        ...store.state,
-        open: true,
-        activeTriggerId: defaultTriggerId,
-        preventUnmountingOnClose: false
-      };
-    }
-  });
-}
 
 /**
  * Sets up trigger data forwarding to the store.
@@ -199,11 +215,11 @@ function useInitialOpenSync(store, openProp, defaultOpen, defaultTriggerId) {
 function useTriggerDataForwarding(triggerId, triggerElementRef, store, stateUpdates) {
   const isMountedByThisTrigger = store.useState('isMountedByTrigger', triggerId);
   const baseRegisterTrigger = useTriggerRegistration(triggerId, store);
-  const registerTrigger = (0, _useStableCallback.useStableCallback)(element => {
-    baseRegisterTrigger(element);
-    if (!element) {
-      return;
-    }
+
+  // Applies trigger-owned state (active-trigger ownership and payload) when the trigger registers.
+  // Stable so payload/`stateUpdates` changes do not change the ref identity (which would needlessly
+  // churn registration); it reads the latest closure values when invoked.
+  const applyTriggerData = (0, _useStableCallback.useStableCallback)(element => {
     const open = store.select('open');
     const activeTriggerId = store.select('activeTriggerId');
     if (activeTriggerId === triggerId) {
@@ -224,6 +240,18 @@ function useTriggerDataForwarding(triggerId, triggerElementRef, store, stateUpda
       });
     }
   });
+
+  // Intentionally NOT stable. Its identity is derived from `baseRegisterTrigger`, which is keyed on
+  // `[store, id]`, so when a handle-backed trigger's store pointer swaps the merged ref re-fires —
+  // unregistering from the previous store and registering into the new one. This lets a detached
+  // trigger follow its handle's currently-attached store across attach/detach/remount. (A stable
+  // callback would keep its identity and never re-fire on a store swap.)
+  const registerTrigger = React.useCallback(element => {
+    baseRegisterTrigger(element);
+    if (element) {
+      applyTriggerData(element);
+    }
+  }, [baseRegisterTrigger, applyTriggerData]);
   (0, _useIsoLayoutEffect.useIsoLayoutEffect)(() => {
     if (isMountedByThisTrigger) {
       store.update({
@@ -243,12 +271,17 @@ function useTriggerDataForwarding(triggerId, triggerElementRef, store, stateUpda
  *
  * When a popup opens without an explicit trigger id and exactly one trigger is registered, that
  * trigger is claimed as the active trigger. When the active trigger id is still registered but its
- * element changed, the active element is refreshed. When the active trigger unregisters, the
- * default path preserves existing ownership so non-closing popup families do not silently claim a
- * different trigger while staying open.
+ * element changed, the active element is refreshed. When the active trigger id is missing from the
+ * registry but the same element is still registered under a different id (e.g. the rendered trigger
+ * carries its own DOM `id` that differs from Base UI's internal trigger id), the active id is
+ * reassociated to the registered id instead of being treated as lost. When the active trigger
+ * unregisters, the default path preserves existing ownership so non-closing popup families do not
+ * silently claim a different trigger while staying open.
  *
- * If `closeOnActiveTriggerUnmount` is enabled, unregistering the active trigger requests a close
- * after a microtask so a same-tick replacement trigger with the same id can register first.
+ * If `closeOnActiveTriggerUnmount` is enabled, unregistering a previously resolved active trigger
+ * requests a close after a microtask so a same-tick replacement trigger with the same id can
+ * register first. An active trigger id that has not matched a registered trigger yet is treated as
+ * pending and does not request a close.
  *
  * This should be called on the Root part.
  *
@@ -259,10 +292,22 @@ function useImplicitActiveTrigger(store, options = {}) {
   const {
     closeOnActiveTriggerUnmount = false
   } = options;
+  // Distinguishes a trigger that unmounted from a new active trigger that has not hydrated yet.
+  const resolvedActiveTriggerIdRef = React.useRef(null);
   const open = store.useState('open');
   const reactiveTriggerCount = store.useState('triggerCount');
+  // Subscribe to the active trigger id so the reconciliation below reruns when ownership moves to
+  // another trigger while the popup stays open (e.g. a focus/hover handoff between triggers).
+  const activeTriggerId = store.useState('activeTriggerId');
+  // Subscribe to the active trigger element so the reconciliation reruns when a pending active
+  // trigger registers in a commit where the trigger count nets out unchanged (registration
+  // forwards the element to the store when the registering trigger matches the active id).
+  // Without this, the id would never be marked resolved and a later genuine unmount would be
+  // misclassified as pending, disabling `closeOnActiveTriggerUnmount`.
+  const reactiveActiveTriggerElement = store.useState('activeTriggerElement');
   (0, _useIsoLayoutEffect.useIsoLayoutEffect)(() => {
     if (!open) {
+      resolvedActiveTriggerIdRef.current = null;
       if (store.state.triggerCount !== 0) {
         store.set('triggerCount', 0);
       }
@@ -273,22 +318,42 @@ function useImplicitActiveTrigger(store, options = {}) {
     if (store.state.triggerCount !== triggerCount) {
       stateUpdates.triggerCount = triggerCount;
     }
-    const activeTriggerId = store.select('activeTriggerId');
+    const currentActiveTriggerId = store.select('activeTriggerId');
     let lostActiveTriggerId = null;
-    if (activeTriggerId) {
-      const activeTriggerElement = store.context.triggerElements.getById(activeTriggerId);
+    if (currentActiveTriggerId) {
+      const activeTriggerElement = store.context.triggerElements.getById(currentActiveTriggerId);
       if (!activeTriggerElement) {
-        lostActiveTriggerId = activeTriggerId;
-      } else if (activeTriggerElement !== store.state.activeTriggerElement) {
-        stateUpdates.activeTriggerElement = activeTriggerElement;
+        for (const [triggerId, triggerElement] of store.context.triggerElements.entries()) {
+          if (triggerElement === store.state.activeTriggerElement) {
+            stateUpdates.activeTriggerId = triggerId;
+            stateUpdates.activeTriggerElement = triggerElement;
+            resolvedActiveTriggerIdRef.current = triggerId;
+            break;
+          }
+        }
+        if (stateUpdates.activeTriggerId === undefined) {
+          if (resolvedActiveTriggerIdRef.current === currentActiveTriggerId) {
+            lostActiveTriggerId = currentActiveTriggerId;
+          } else {
+            resolvedActiveTriggerIdRef.current = null;
+          }
+        }
+      } else {
+        resolvedActiveTriggerIdRef.current = currentActiveTriggerId;
+        if (activeTriggerElement !== store.state.activeTriggerElement) {
+          stateUpdates.activeTriggerElement = activeTriggerElement;
+        }
       }
+    } else {
+      resolvedActiveTriggerIdRef.current = null;
     }
-    if (!lostActiveTriggerId && !activeTriggerId && triggerCount === 1) {
+    if (!lostActiveTriggerId && !currentActiveTriggerId && triggerCount === 1) {
       const iteratorResult = store.context.triggerElements.entries().next();
       if (!iteratorResult.done) {
         const [implicitTriggerId, implicitTriggerElement] = iteratorResult.value;
         stateUpdates.activeTriggerId = implicitTriggerId;
         stateUpdates.activeTriggerElement = implicitTriggerElement;
+        resolvedActiveTriggerIdRef.current = implicitTriggerId;
       }
     }
     if (stateUpdates.triggerCount !== undefined || stateUpdates.activeTriggerId !== undefined || stateUpdates.activeTriggerElement !== undefined) {
@@ -313,7 +378,7 @@ function useImplicitActiveTrigger(store, options = {}) {
         });
       }
     }
-  }, [open, store, reactiveTriggerCount, closeOnActiveTriggerUnmount]);
+  }, [open, store, reactiveTriggerCount, activeTriggerId, reactiveActiveTriggerElement, closeOnActiveTriggerUnmount]);
 }
 
 /**

package/utils/popups/popupStoreUtils.mjs

@@ -6,7 +6,7 @@ import { EMPTY_OBJECT } from '@base-ui/utils/empty';
 import { useId } from '@base-ui/utils/useId';
 import { useStableCallback } from '@base-ui/utils/useStableCallback';
 import { useIsoLayoutEffect } from '@base-ui/utils/useIsoLayoutEffect';
-import { useOnFirstRender } from '@base-ui/utils/useOnFirstRender';
+import { useRefWithInit } from '@base-ui/utils/useRefWithInit';
 import { FOCUSABLE_ATTRIBUTE } from "../../floating-ui-react/utils/constants.mjs";
 import { useFloatingParentNodeId } from "../../floating-ui-react/components/FloatingTree.mjs";
 import { useSyncedFloatingRootContext } from "../../floating-ui-react/hooks/useSyncedFloatingRootContext.mjs";
@@ -27,14 +27,26 @@ export const FOCUSABLE_POPUP_PROPS = {
 export function createDefaultInitialFocus(popupRef) {
   return interactionType => interactionType === 'touch' ? popupRef.current : true;
 }
-export function usePopupStore(externalStore, createStore, treatPopupAsFloatingElement = false) {
+
+/**
+ * The subset of a popup handle that a Root needs to bind its store to. Both the real handle classes
+ * and any test double satisfy it.
+ */
+
+/**
+ * Creates and owns a popup store on behalf of a Root part. The store is created exactly once, with
+ * controlled props and root state synced separately after creation. Sets up the synced floating
+ * root context and returns the store.
+ *
+ * @param createStore Factory that builds the store. Called exactly once, receiving the floating id
+ * and whether the popup is nested inside another floating element, both resolved on the first render.
+ * @param treatPopupAsFloatingElement Whether the popup element is passed to Floating UI as the
+ * floating element instead of the default positioner.
+ */
+export function usePopupRootStore(createStore, treatPopupAsFloatingElement = false) {
   const floatingId = useId();
   const nested = useFloatingParentNodeId() != null;
-  const internalStoreRef = React.useRef(null);
-  if (externalStore === undefined && internalStoreRef.current === null) {
-    internalStoreRef.current = createStore(floatingId, nested);
-  }
-  const store = externalStore ?? internalStoreRef.current;
+  const store = useRefWithInit(() => createStore(floatingId, nested)).current;
   useSyncedFloatingRootContext({
     popupStore: store,
     treatPopupAsFloatingElement,
@@ -43,10 +55,27 @@ export function usePopupStore(externalStore, createStore, treatPopupAsFloatingEl
     nested,
     onOpenChange: store.setOpen
   });
-  return {
-    store,
-    internalStore: internalStoreRef.current
-  };
+  return store;
+}
+
+/**
+ * Attaches a Root's store to a handle for this component's committed lifetime. Popup Roots render
+ * it before their interactions and user children so its layout effect runs before descendant layout
+ * effects. This lets descendants call the handle during the Root's initial commit without attaching
+ * during render, which would leak suspended or abandoned stores. Store subscribers are notified by
+ * `attachStore` in this ordinary layout phase, where React permits synchronous updates.
+ *
+ * Popup Roots must render this component only when a handle is present so handle-less Roots avoid
+ * mounting an extra fiber and layout effect.
+ */
+export function PopupHandleAttachment({
+  handle,
+  store
+}) {
+  useIsoLayoutEffect(() => {
+    return handle.attachStore(store);
+  }, [handle, store]);
+  return null;
 }
 
 /**
@@ -156,19 +185,6 @@ export function applyPopupOpenChange(store, nextOpen, eventDetails, options = {}
     changeState();
   }
 }
-export function useInitialOpenSync(store, openProp, defaultOpen, defaultTriggerId) {
-  useOnFirstRender(() => {
-    if (openProp === undefined && store.state.open === false && defaultOpen) {
-      // Avoid notifying detached trigger subscribers while the Root is rendering.
-      store.state = {
-        ...store.state,
-        open: true,
-        activeTriggerId: defaultTriggerId,
-        preventUnmountingOnClose: false
-      };
-    }
-  });
-}
 
 /**
  * Sets up trigger data forwarding to the store.
@@ -181,11 +197,11 @@ export function useInitialOpenSync(store, openProp, defaultOpen, defaultTriggerI
 export function useTriggerDataForwarding(triggerId, triggerElementRef, store, stateUpdates) {
   const isMountedByThisTrigger = store.useState('isMountedByTrigger', triggerId);
   const baseRegisterTrigger = useTriggerRegistration(triggerId, store);
-  const registerTrigger = useStableCallback(element => {
-    baseRegisterTrigger(element);
-    if (!element) {
-      return;
-    }
+
+  // Applies trigger-owned state (active-trigger ownership and payload) when the trigger registers.
+  // Stable so payload/`stateUpdates` changes do not change the ref identity (which would needlessly
+  // churn registration); it reads the latest closure values when invoked.
+  const applyTriggerData = useStableCallback(element => {
     const open = store.select('open');
     const activeTriggerId = store.select('activeTriggerId');
     if (activeTriggerId === triggerId) {
@@ -206,6 +222,18 @@ export function useTriggerDataForwarding(triggerId, triggerElementRef, store, st
       });
     }
   });
+
+  // Intentionally NOT stable. Its identity is derived from `baseRegisterTrigger`, which is keyed on
+  // `[store, id]`, so when a handle-backed trigger's store pointer swaps the merged ref re-fires —
+  // unregistering from the previous store and registering into the new one. This lets a detached
+  // trigger follow its handle's currently-attached store across attach/detach/remount. (A stable
+  // callback would keep its identity and never re-fire on a store swap.)
+  const registerTrigger = React.useCallback(element => {
+    baseRegisterTrigger(element);
+    if (element) {
+      applyTriggerData(element);
+    }
+  }, [baseRegisterTrigger, applyTriggerData]);
   useIsoLayoutEffect(() => {
     if (isMountedByThisTrigger) {
       store.update({
@@ -225,12 +253,17 @@ export function useTriggerDataForwarding(triggerId, triggerElementRef, store, st
  *
  * When a popup opens without an explicit trigger id and exactly one trigger is registered, that
  * trigger is claimed as the active trigger. When the active trigger id is still registered but its
- * element changed, the active element is refreshed. When the active trigger unregisters, the
- * default path preserves existing ownership so non-closing popup families do not silently claim a
- * different trigger while staying open.
+ * element changed, the active element is refreshed. When the active trigger id is missing from the
+ * registry but the same element is still registered under a different id (e.g. the rendered trigger
+ * carries its own DOM `id` that differs from Base UI's internal trigger id), the active id is
+ * reassociated to the registered id instead of being treated as lost. When the active trigger
+ * unregisters, the default path preserves existing ownership so non-closing popup families do not
+ * silently claim a different trigger while staying open.
  *
- * If `closeOnActiveTriggerUnmount` is enabled, unregistering the active trigger requests a close
- * after a microtask so a same-tick replacement trigger with the same id can register first.
+ * If `closeOnActiveTriggerUnmount` is enabled, unregistering a previously resolved active trigger
+ * requests a close after a microtask so a same-tick replacement trigger with the same id can
+ * register first. An active trigger id that has not matched a registered trigger yet is treated as
+ * pending and does not request a close.
  *
  * This should be called on the Root part.
  *
@@ -241,10 +274,22 @@ export function useImplicitActiveTrigger(store, options = {}) {
   const {
     closeOnActiveTriggerUnmount = false
   } = options;
+  // Distinguishes a trigger that unmounted from a new active trigger that has not hydrated yet.
+  const resolvedActiveTriggerIdRef = React.useRef(null);
   const open = store.useState('open');
   const reactiveTriggerCount = store.useState('triggerCount');
+  // Subscribe to the active trigger id so the reconciliation below reruns when ownership moves to
+  // another trigger while the popup stays open (e.g. a focus/hover handoff between triggers).
+  const activeTriggerId = store.useState('activeTriggerId');
+  // Subscribe to the active trigger element so the reconciliation reruns when a pending active
+  // trigger registers in a commit where the trigger count nets out unchanged (registration
+  // forwards the element to the store when the registering trigger matches the active id).
+  // Without this, the id would never be marked resolved and a later genuine unmount would be
+  // misclassified as pending, disabling `closeOnActiveTriggerUnmount`.
+  const reactiveActiveTriggerElement = store.useState('activeTriggerElement');
   useIsoLayoutEffect(() => {
     if (!open) {
+      resolvedActiveTriggerIdRef.current = null;
       if (store.state.triggerCount !== 0) {
         store.set('triggerCount', 0);
       }
@@ -255,22 +300,42 @@ export function useImplicitActiveTrigger(store, options = {}) {
     if (store.state.triggerCount !== triggerCount) {
       stateUpdates.triggerCount = triggerCount;
     }
-    const activeTriggerId = store.select('activeTriggerId');
+    const currentActiveTriggerId = store.select('activeTriggerId');
     let lostActiveTriggerId = null;
-    if (activeTriggerId) {
-      const activeTriggerElement = store.context.triggerElements.getById(activeTriggerId);
+    if (currentActiveTriggerId) {
+      const activeTriggerElement = store.context.triggerElements.getById(currentActiveTriggerId);
       if (!activeTriggerElement) {
-        lostActiveTriggerId = activeTriggerId;
-      } else if (activeTriggerElement !== store.state.activeTriggerElement) {
-        stateUpdates.activeTriggerElement = activeTriggerElement;
+        for (const [triggerId, triggerElement] of store.context.triggerElements.entries()) {
+          if (triggerElement === store.state.activeTriggerElement) {
+            stateUpdates.activeTriggerId = triggerId;
+            stateUpdates.activeTriggerElement = triggerElement;
+            resolvedActiveTriggerIdRef.current = triggerId;
+            break;
+          }
+        }
+        if (stateUpdates.activeTriggerId === undefined) {
+          if (resolvedActiveTriggerIdRef.current === currentActiveTriggerId) {
+            lostActiveTriggerId = currentActiveTriggerId;
+          } else {
+            resolvedActiveTriggerIdRef.current = null;
+          }
+        }
+      } else {
+        resolvedActiveTriggerIdRef.current = currentActiveTriggerId;
+        if (activeTriggerElement !== store.state.activeTriggerElement) {
+          stateUpdates.activeTriggerElement = activeTriggerElement;
+        }
       }
+    } else {
+      resolvedActiveTriggerIdRef.current = null;
     }
-    if (!lostActiveTriggerId && !activeTriggerId && triggerCount === 1) {
+    if (!lostActiveTriggerId && !currentActiveTriggerId && triggerCount === 1) {
       const iteratorResult = store.context.triggerElements.entries().next();
       if (!iteratorResult.done) {
         const [implicitTriggerId, implicitTriggerElement] = iteratorResult.value;
         stateUpdates.activeTriggerId = implicitTriggerId;
         stateUpdates.activeTriggerElement = implicitTriggerElement;
+        resolvedActiveTriggerIdRef.current = implicitTriggerId;
       }
     }
     if (stateUpdates.triggerCount !== undefined || stateUpdates.activeTriggerId !== undefined || stateUpdates.activeTriggerElement !== undefined) {
@@ -295,7 +360,7 @@ export function useImplicitActiveTrigger(store, options = {}) {
         });
       }
     }
-  }, [open, store, reactiveTriggerCount, closeOnActiveTriggerUnmount]);
+  }, [open, store, reactiveTriggerCount, activeTriggerId, reactiveActiveTriggerElement, closeOnActiveTriggerUnmount]);
 }
 
 /**

package/utils/popups/popupTriggerMap.d.mts

@@ -1,9 +1,10 @@
 /**
  * Data structure to keep track of popup trigger elements by their IDs.
- * Uses both a set of Elements and a map of IDs to Elements for efficient lookups.
+ *
+ * Element lookups iterate the id map rather than maintaining a parallel Set. Registration is O(1),
+ * while `hasElement` and `hasMatchingElement` are linear in the number of triggers.
  */
 export declare class PopupTriggerMap {
-  private elementsSet;
   private idMap;
   constructor();
   /**

package/utils/popups/popupTriggerMap.d.ts

@@ -1,9 +1,10 @@
 /**
  * Data structure to keep track of popup trigger elements by their IDs.
- * Uses both a set of Elements and a map of IDs to Elements for efficient lookups.
+ *
+ * Element lookups iterate the id map rather than maintaining a parallel Set. Registration is O(1),
+ * while `hasElement` and `hasMatchingElement` are linear in the number of triggers.
  */
 export declare class PopupTriggerMap {
-  private elementsSet;
   private idMap;
   constructor();
   /**

package/utils/popups/popupTriggerMap.js

@@ -4,13 +4,33 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.PopupTriggerMap = void 0;
+/**
+ * Development-only reverse index of element to registered id, keyed by the owning map.
+ *
+ * Registration would otherwise have to scan every entry to detect an element claimed by two ids,
+ * making the mount of many triggers sharing one handle quadratic. Kept module-scoped, lazily
+ * initialized, and read only from `process.env.NODE_ENV` guards so production builds drop it along
+ * with the checks.
+ */
+let devElementIdsByMap;
+function getDevElementIds(map) {
+  devElementIdsByMap ??= new WeakMap();
+  let elementIds = devElementIdsByMap.get(map);
+  if (!elementIds) {
+    elementIds = new WeakMap();
+    devElementIdsByMap.set(map, elementIds);
+  }
+  return elementIds;
+}
+
 /**
  * Data structure to keep track of popup trigger elements by their IDs.
- * Uses both a set of Elements and a map of IDs to Elements for efficient lookups.
+ *
+ * Element lookups iterate the id map rather than maintaining a parallel Set. Registration is O(1),
+ * while `hasElement` and `hasMatchingElement` are linear in the number of triggers.
  */
 class PopupTriggerMap {
   constructor() {
-    this.elementsSet = new Set();
     this.idMap = new Map();
   }
 
@@ -20,49 +40,56 @@ class PopupTriggerMap {
    * Note: The provided element is assumed to not be registered under multiple IDs.
    */
   add(id, element) {
-    const existingElement = this.idMap.get(id);
-    if (existingElement === element) {
-      return;
-    }
-    if (existingElement !== undefined) {
-      // We assume that the same element won't be registered under multiple ids.
-      // This is safe considering how useTriggerRegistration is implemented.
-      this.elementsSet.delete(existingElement);
-    }
-    this.elementsSet.add(element);
-    this.idMap.set(id, element);
     if (process.env.NODE_ENV !== 'production') {
-      if (this.elementsSet.size !== this.idMap.size) {
+      const elementIds = getDevElementIds(this);
+      const existingId = elementIds.get(element);
+      if (existingId !== undefined && existingId !== id) {
         // TODO: fix mui/no-guarded-throw
         // eslint-disable-next-line mui/no-guarded-throw
         throw new Error('Base UI: A trigger element cannot be registered under multiple IDs in PopupTriggerMap.');
       }
+
+      // Reusing an id for a different element evicts the previous one, so it must lose its claim
+      // on the id or a later registration under a different id would be reported as a duplicate.
+      const previousElement = this.idMap.get(id);
+      if (previousElement !== undefined && previousElement !== element) {
+        elementIds.delete(previousElement);
+      }
+      elementIds.set(element, id);
     }
+    this.idMap.set(id, element);
   }
 
   /**
    * Removes the trigger element with the given ID.
    */
   delete(id) {
-    const element = this.idMap.get(id);
-    if (element) {
-      this.elementsSet.delete(element);
-      this.idMap.delete(id);
+    if (process.env.NODE_ENV !== 'production') {
+      const element = this.idMap.get(id);
+      if (element !== undefined) {
+        devElementIdsByMap?.get(this)?.delete(element);
+      }
     }
+    this.idMap.delete(id);
   }
 
   /**
    * Whether the given element is registered as a trigger.
    */
   hasElement(element) {
-    return this.elementsSet.has(element);
+    for (const registered of this.idMap.values()) {
+      if (registered === element) {
+        return true;
+      }
+    }
+    return false;
   }
 
   /**
    * Whether there is a registered trigger element matching the given predicate.
    */
   hasMatchingElement(predicate) {
-    for (const element of this.elementsSet) {
+    for (const element of this.idMap.values()) {
       if (predicate(element)) {
         return true;
       }
@@ -88,7 +115,7 @@ class PopupTriggerMap {
    * Returns an iterable of all registered trigger elements.
    */
   elements() {
-    return this.elementsSet.values();
+    return this.idMap.values();
   }
 
   /**