@base-ui/react 1.4.0 → 1.5.0

package/unstable-use-media-query/index.js

@@ -12,7 +12,7 @@ function useMediaQuery(query, options) {
   // Wait for jsdom to support the match media feature.
   // All the browsers Base UI support have this built-in.
   // This defensive check is here for simplicity.
-  // Most of the time, the match media logic isn't central to people tests.
+  // Most of the time, the match media logic isn't central to people's tests.
   const supportMatchMedia = typeof window !== 'undefined' && typeof window.matchMedia !== 'undefined';
   query = query.replace(/^@media( ?)/m, '');
   const {

package/use-render/index.d.ts

@@ -1,2 +1,2 @@
 export * from "./useRender.js";
-export type { HTMLProps, ComponentRenderFn } from "../utils/types.js";
+export type { HTMLProps, ComponentRenderFn } from "../internals/types.js";

package/use-render/useRender.d.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
-import type { ComponentRenderFn } from "../utils/types.js";
-import { HTMLProps } from "../utils/types.js";
-import { StateAttributesMapping } from "../utils/getStateAttributesProps.js";
+import type { ComponentRenderFn } from "../internals/types.js";
+import { HTMLProps } from "../internals/types.js";
+import { StateAttributesMapping } from "../internals/getStateAttributesProps.js";
 /**
  * Renders a Base UI element.
  *

package/use-render/useRender.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.useRender = useRender;
-var _useRenderElement = require("../utils/useRenderElement");
+var _useRenderElement = require("../internals/useRenderElement");
 /**
  * Renders a Base UI element.
  *

package/utils/collapsibleOpenStateMapping.d.ts

@@ -1,4 +1,4 @@
-import type { StateAttributesMapping } from "./getStateAttributesProps.js";
+import type { StateAttributesMapping } from "../internals/getStateAttributesProps.js";
 export declare const triggerOpenStateMapping: StateAttributesMapping<{
   open: boolean;
 }>;

package/utils/getDisabledMountTransitionStyles.d.ts

@@ -1,4 +1,4 @@
-import type { TransitionStatus } from "./useTransitionStatus.js";
+import type { TransitionStatus } from "../internals/useTransitionStatus.js";
 export declare function getDisabledMountTransitionStyles(transitionStatus: TransitionStatus): {
   style?: React.CSSProperties | undefined;
 };

package/utils/getDisabledMountTransitionStyles.js

@@ -4,7 +4,8 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.getDisabledMountTransitionStyles = getDisabledMountTransitionStyles;
-var _constants = require("./constants");
+var _empty = require("@base-ui/utils/empty");
+var _constants = require("../internals/constants");
 function getDisabledMountTransitionStyles(transitionStatus) {
-  return transitionStatus === 'starting' ? _constants.DISABLED_TRANSITIONS_STYLE : _constants.EMPTY_OBJECT;
+  return transitionStatus === 'starting' ? _constants.DISABLED_TRANSITIONS_STYLE : _empty.EMPTY_OBJECT;
 }

package/utils/popupStateMapping.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.triggerOpenStateMapping = exports.pressableTriggerOpenStateMapping = exports.popupStateMapping = exports.CommonTriggerDataAttributes = exports.CommonPopupDataAttributes = void 0;
-var _stateAttributesMapping = require("./stateAttributesMapping");
+var _stateAttributesMapping = require("../internals/stateAttributesMapping");
 let CommonPopupDataAttributes = exports.CommonPopupDataAttributes = function (CommonPopupDataAttributes) {
   /**
    * Present when the popup is open.

package/utils/popups/index.d.ts

@@ -1,3 +1,4 @@
+export * from "./inlineRect.js";
 export * from "./popupStoreUtils.js";
 export * from "./popupTriggerMap.js";
 export * from "./store.js";

package/utils/popups/index.js

@@ -3,6 +3,17 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+var _inlineRect = require("./inlineRect");
+Object.keys(_inlineRect).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _inlineRect[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _inlineRect[key];
+    }
+  });
+});
 var _popupStoreUtils = require("./popupStoreUtils");
 Object.keys(_popupStoreUtils).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;

package/utils/popups/inlineRect.d.ts

@@ -0,0 +1,15 @@
+import * as React from 'react';
+import type { Middleware } from '@floating-ui/react-dom';
+export interface InlineRectCoords {
+  /** The x position in viewport coordinates. */
+  x: number;
+  /** The y position in viewport coordinates. */
+  y: number;
+  /** The line index under the pointer when coordinates were captured. */
+  lineIndex?: number | undefined;
+  /** The trigger element whose rects produced these coordinates. */
+  element: Element;
+}
+export declare function getInlineRectTriggerProps(coordsRef: React.RefObject<InlineRectCoords | undefined>, isOpen: boolean): Pick<React.HTMLAttributes<Element>, 'onFocus' | 'onMouseEnter' | 'onMouseMove'>;
+export declare function updateInlineRectCoords(coordsRef: React.RefObject<InlineRectCoords | undefined>, element: Element, clientX: number, clientY: number): InlineRectCoords | undefined;
+export declare function createInlineMiddleware(coordsRef: React.RefObject<InlineRectCoords | undefined>): Middleware;

package/utils/popups/inlineRect.js

@@ -0,0 +1,198 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.createInlineMiddleware = createInlineMiddleware;
+exports.getInlineRectTriggerProps = getInlineRectTriggerProps;
+exports.updateInlineRectCoords = updateInlineRectCoords;
+var _dom = require("@floating-ui/utils/dom");
+// Floating UI ships an `inline()` middleware. This local version mirrors its line-rect
+// selection while adding trigger identity checks, delayed-open hit-line reuse, and
+// improved left/right edge grouping for Preview Card's reusable trigger model.
+
+function createRect(left, top, right, bottom) {
+  return {
+    left,
+    top,
+    right,
+    bottom,
+    x: left,
+    y: top,
+    width: right - left,
+    height: bottom - top
+  };
+}
+function copyRect(rect) {
+  return {
+    left: rect.left,
+    top: rect.top,
+    right: rect.right,
+    bottom: rect.bottom,
+    width: rect.width,
+    height: rect.height
+  };
+}
+function getLineRects(rects) {
+  const lines = [];
+  let previousRect;
+  let left = Number.POSITIVE_INFINITY;
+  let top = Number.POSITIVE_INFINITY;
+  let right = Number.NEGATIVE_INFINITY;
+  let bottom = Number.NEGATIVE_INFINITY;
+  for (const rect of Array.from(rects).sort((a, b) => a.top - b.top)) {
+    left = Math.min(left, rect.left);
+    top = Math.min(top, rect.top);
+    right = Math.max(right, rect.right);
+    bottom = Math.max(bottom, rect.bottom);
+    if (!previousRect || rect.top - previousRect.top > previousRect.height / 2) {
+      lines.push(copyRect(rect));
+    } else {
+      const line = lines[lines.length - 1];
+      line.left = Math.min(line.left, rect.left);
+      line.right = Math.max(line.right, rect.right);
+      line.bottom = Math.max(line.bottom, rect.bottom);
+      line.width = line.right - line.left;
+      line.height = line.bottom - line.top;
+    }
+    previousRect = rect;
+  }
+  return {
+    lines,
+    fallback: createRect(left, top, right, bottom)
+  };
+}
+function findLineIndex(lines, x, y) {
+  return lines.findIndex(lineRect => x > lineRect.left - 2 && x < lineRect.right + 2 && y > lineRect.top - 2 && y < lineRect.bottom + 2);
+}
+function createClientRect(rect) {
+  return createRect(rect.left, rect.top, rect.right, rect.bottom);
+}
+function getInlineRectCoords(element, clientX, clientY) {
+  const {
+    lines
+  } = getLineRects(element.getClientRects());
+  if (lines.length < 2) {
+    return undefined;
+  }
+  const lineIndex = findLineIndex(lines, clientX, clientY);
+  return {
+    x: clientX,
+    y: clientY,
+    lineIndex: lineIndex === -1 ? undefined : lineIndex,
+    element
+  };
+}
+function getInlineReferenceRect(reference, placement, coords) {
+  const {
+    lines,
+    fallback
+  } = getLineRects(reference.getClientRects());
+  if (lines.length < 2) {
+    return null;
+  }
+  const x = coords?.x;
+  const y = coords?.y;
+  const side = placement[0];
+  if (coords?.lineIndex != null && lines[coords.lineIndex]) {
+    return createClientRect(lines[coords.lineIndex]);
+  }
+  if (x != null && y != null) {
+    const lineIndex = findLineIndex(lines, x, y);
+    if (lineIndex !== -1) {
+      return createClientRect(lines[lineIndex]);
+    }
+  }
+  if (lines.length === 2 && lines[0].left > lines[1].right && x != null && y != null) {
+    return fallback;
+  }
+  if (side === 't' || side === 'b') {
+    const firstRect = lines[0];
+    const lastRect = lines[lines.length - 1];
+    const targetRect = side === 't' ? firstRect : lastRect;
+    return createRect(targetRect.left, firstRect.top, targetRect.right, lastRect.bottom);
+  }
+  const isLeft = side === 'l';
+  let left = lines[0].left;
+  let right = lines[0].right;
+  let edge = isLeft ? Number.POSITIVE_INFINITY : Number.NEGATIVE_INFINITY;
+  let targetFirstRect = lines[0];
+  let targetLastRect = lines[0];
+  for (const rect of lines) {
+    left = Math.min(left, rect.left);
+    right = Math.max(right, rect.right);
+    const nextEdge = isLeft ? rect.left : rect.right;
+    if (isLeft && nextEdge < edge || !isLeft && nextEdge > edge) {
+      edge = nextEdge;
+      targetFirstRect = rect;
+      targetLastRect = rect;
+    } else if (nextEdge === edge) {
+      targetLastRect = rect;
+    }
+  }
+  return createRect(left, targetFirstRect.top, right, targetLastRect.bottom);
+}
+function getContextElement(reference) {
+  if ('contextElement' in reference && reference.contextElement) {
+    return reference.contextElement;
+  }
+  return (0, _dom.isElement)(reference) ? reference : undefined;
+}
+function getInlineRectTriggerProps(coordsRef, isOpen) {
+  function updateCoords(event) {
+    updateInlineRectCoords(coordsRef, event.currentTarget, event.clientX, event.clientY);
+  }
+  function updateCoordsOnMove(event) {
+    if (!isOpen) {
+      updateCoords(event);
+    }
+  }
+  return {
+    onFocus() {
+      coordsRef.current = undefined;
+    },
+    onMouseEnter: updateCoords,
+    onMouseMove: updateCoordsOnMove
+  };
+}
+function updateInlineRectCoords(coordsRef, element, clientX, clientY) {
+  const nextCoords = getInlineRectCoords(element, clientX, clientY);
+  coordsRef.current = nextCoords;
+  return nextCoords;
+}
+function createInlineMiddleware(coordsRef) {
+  return {
+    name: 'inline',
+    async fn(state) {
+      const reference = state.elements.reference;
+      if (typeof reference?.getClientRects !== 'function') {
+        return {};
+      }
+      const contextElement = getContextElement(reference);
+      const coords = coordsRef.current;
+      const currentCoords = coords?.element === reference || coords?.element === contextElement ? coords : undefined;
+      const rect = getInlineReferenceRect(reference, state.placement, currentCoords);
+      if (!rect || typeof state.platform.getElementRects !== 'function') {
+        return {};
+      }
+      const resetRects = await state.platform.getElementRects({
+        reference: {
+          contextElement,
+          getBoundingClientRect() {
+            return rect;
+          }
+        },
+        floating: state.elements.floating,
+        strategy: state.strategy
+      });
+      if (state.rects.reference.x === resetRects.reference.x && state.rects.reference.y === resetRects.reference.y && state.rects.reference.width === resetRects.reference.width && state.rects.reference.height === resetRects.reference.height) {
+        return {};
+      }
+      return {
+        reset: {
+          rects: resetRects
+        }
+      };
+    }
+  };
+}

package/utils/popups/popupStoreUtils.d.ts

@@ -1,21 +1,35 @@
 import * as React from 'react';
 import { ReactStore } from '@base-ui/utils/store';
+import type { InteractionType } from '@base-ui/utils/useEnhancedClickHandler';
+import type { BaseUIChangeEventDetails } from "../../internals/createBaseUIEventDetails.js";
 import { PopupStoreState, PopupStoreContext, popupStoreSelectors, PopupStoreSelectors } from "./store.js";
+export declare const FOCUSABLE_POPUP_PROPS: {
+  tabIndex: number;
+  "data-base-ui-focusable": string;
+};
+type PopupStoreWithOpen<State extends PopupStoreState<unknown>, SetOpenEventDetails extends BaseUIChangeEventDetails<string>> = ReactStore<State, PopupStoreContext<never>, PopupStoreSelectors> & {
+  setOpen(open: boolean, eventDetails: SetOpenEventDetails): void;
+};
+export declare function usePopupStore<State extends PopupStoreState<unknown>, SetOpenEventDetails extends BaseUIChangeEventDetails<string>, Store extends PopupStoreWithOpen<State, SetOpenEventDetails>>(externalStore: Store | undefined, createStore: (floatingId: string | undefined, nested: boolean) => Store, treatPopupAsFloatingElement?: boolean): {
+  store: Store;
+  internalStore: Store | null;
+};
 /**
  * Returns a callback ref that registers/unregisters the trigger element in the store.
  *
  * @param store The Store instance where the trigger should be registered.
  */
-export declare function useTriggerRegistration<State extends PopupStoreState<any>>(id: string | undefined, store: ReactStore<State, PopupStoreContext<any>, PopupStoreSelectors>): (element: Element | null) => void;
+export declare function useTriggerRegistration<State extends PopupStoreState<unknown>>(id: string | undefined, store: ReactStore<State, PopupStoreContext<never>, PopupStoreSelectors>): (element: Element | null) => void;
+export declare function setOpenTriggerState(state: Partial<PopupStoreState<unknown>>, open: boolean, trigger: Element | undefined): void;
 /**
  * Sets up trigger data forwarding to the store.
  *
  * @param triggerId Id of the trigger.
- * @param triggerElement The trigger DOM element.
+ * @param triggerElementRef Ref for the trigger DOM element.
  * @param store The Store instance managing the popup state.
  * @param stateUpdates An object with state updates to apply when the trigger is active.
  */
-export declare function useTriggerDataForwarding<State extends PopupStoreState<any>>(triggerId: string | undefined, triggerElementRef: React.RefObject<Element | null>, store: ReactStore<State, PopupStoreContext<any>, typeof popupStoreSelectors>, stateUpdates: Omit<Partial<State>, 'activeTriggerId' | 'activeTriggerElement'>): {
+export declare function useTriggerDataForwarding<State extends PopupStoreState<unknown>>(triggerId: string | undefined, triggerElementRef: React.RefObject<Element | null>, store: ReactStore<State, PopupStoreContext<never>, typeof popupStoreSelectors>, stateUpdates: Omit<Partial<State>, 'activeTriggerId' | 'activeTriggerElement'>): {
   registerTrigger: (element: Element | null) => void;
   isMountedByThisTrigger: boolean;
 };
@@ -24,17 +38,16 @@ export type PayloadChildRenderFunction<Payload> = (arg: {
 }) => React.ReactNode;
 /**
  * Ensures that when there's only one trigger element registered, it is set as the active trigger.
- * This allows controlled popups to work correctly without an explicit triggerId, maintaining compatibility
- * with the contained triggers.
+ * This keeps triggerCount reactive while open and allows controlled popups to work correctly without
+ * an explicit triggerId, maintaining compatibility with contained triggers.
  *
  * This should be called on the Root part.
  *
- * @param open Whether the popup is open.
  * @param store The Store instance managing the popup state.
  */
-export declare function useImplicitActiveTrigger<State extends PopupStoreState<any>>(store: ReactStore<State, PopupStoreContext<any>, typeof popupStoreSelectors>): void;
+export declare function useImplicitActiveTrigger<State extends PopupStoreState<unknown>>(store: ReactStore<State, PopupStoreContext<never>, typeof popupStoreSelectors>): void;
 /**
- * Mangages the mounted state of the popup.
+ * Manages the mounted state of the popup.
  * Sets up the transition status listeners and handles unmounting when needed.
  * Updates the `mounted` and `transitionStatus` states in the store.
  *
@@ -44,7 +57,12 @@ export declare function useImplicitActiveTrigger<State extends PopupStoreState<a
  *
  * @returns A function to forcibly unmount the popup.
  */
-export declare function useOpenStateTransitions<State extends PopupStoreState<any>>(open: boolean, store: ReactStore<State, PopupStoreContext<any>, typeof popupStoreSelectors>, onUnmount?: () => void): {
+export declare function useOpenStateTransitions<State extends PopupStoreState<unknown>>(open: boolean, store: ReactStore<State, PopupStoreContext<never>, typeof popupStoreSelectors>, onUnmount?: () => void): {
   forceUnmount: () => void;
-  transitionStatus: import("../useTransitionStatus.js").TransitionStatus;
-};
+  transitionStatus: import("../../internals/useTransitionStatus.js").TransitionStatus;
+};
+export declare function usePopupInteractionProps<State extends PopupStoreState<unknown>>(store: ReactStore<State, PopupStoreContext<never>, typeof popupStoreSelectors>, statePart: Partial<State> & Pick<State, 'activeTriggerProps' | 'inactiveTriggerProps' | 'popupProps'>): void;
+export declare function usePopupRootSync<State extends PopupStoreState<unknown> & {
+  openMethod: InteractionType | null;
+}>(store: ReactStore<State, PopupStoreContext<never>, typeof popupStoreSelectors>, open: boolean): void;
+export {};

package/utils/popups/popupStoreUtils.js

@@ -5,15 +5,51 @@ var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWild
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+exports.FOCUSABLE_POPUP_PROPS = void 0;
+exports.setOpenTriggerState = setOpenTriggerState;
 exports.useImplicitActiveTrigger = useImplicitActiveTrigger;
 exports.useOpenStateTransitions = useOpenStateTransitions;
+exports.usePopupInteractionProps = usePopupInteractionProps;
+exports.usePopupRootSync = usePopupRootSync;
+exports.usePopupStore = usePopupStore;
 exports.useTriggerDataForwarding = useTriggerDataForwarding;
 exports.useTriggerRegistration = useTriggerRegistration;
 var React = _interopRequireWildcard(require("react"));
+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 _useTransitionStatus = require("../useTransitionStatus");
-var _useOpenChangeComplete = require("../useOpenChangeComplete");
+var _constants = require("../../floating-ui-react/utils/constants");
+var _FloatingTree = require("../../floating-ui-react/components/FloatingTree");
+var _useSyncedFloatingRootContext = require("../../floating-ui-react/hooks/useSyncedFloatingRootContext");
+var _useTransitionStatus = require("../../internals/useTransitionStatus");
+var _useOpenChangeComplete = require("../../internals/useOpenChangeComplete");
+const FOCUSABLE_POPUP_PROPS = exports.FOCUSABLE_POPUP_PROPS = {
+  tabIndex: -1,
+  [_constants.FOCUSABLE_ATTRIBUTE]: ''
+};
+function usePopupStore(externalStore, 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;
+  (0, _useSyncedFloatingRootContext.useSyncedFloatingRootContext)({
+    popupStore: store,
+    treatPopupAsFloatingElement,
+    floatingRootContext: store.state.floatingRootContext,
+    floatingId,
+    nested,
+    onOpenChange: store.setOpen
+  });
+  return {
+    store,
+    internalStore: internalStoreRef.current
+  };
+}
+
 /**
  * Returns a callback ref that registers/unregisters the trigger element in the store.
  *
@@ -27,12 +63,14 @@ function useTriggerRegistration(id, store) {
     if (id === undefined) {
       return;
     }
+    let shouldSyncTriggerCount = false;
     if (registeredElementIdRef.current !== null) {
       const registeredId = registeredElementIdRef.current;
       const registeredElement = registeredElementRef.current;
       const currentElement = store.context.triggerElements.getById(registeredId);
       if (registeredElement && currentElement === registeredElement) {
         store.context.triggerElements.delete(registeredId);
+        shouldSyncTriggerCount = true;
       }
       registeredElementIdRef.current = null;
       registeredElementRef.current = null;
@@ -41,15 +79,32 @@ function useTriggerRegistration(id, store) {
       registeredElementIdRef.current = id;
       registeredElementRef.current = element;
       store.context.triggerElements.add(id, element);
+      shouldSyncTriggerCount = true;
+    }
+    if (shouldSyncTriggerCount) {
+      const triggerCount = store.context.triggerElements.size;
+      if (store.select('open') && store.state.triggerCount !== triggerCount) {
+        store.set('triggerCount', triggerCount);
+      }
     }
   }, [store, id]);
 }
+function setOpenTriggerState(state, open, trigger) {
+  const triggerId = trigger?.id ?? null;
+
+  // If a popup is closing, the `trigger` may be undefined.
+  // We want to keep the previous value so that exit animations are played and focus is returned correctly.
+  if (triggerId || open) {
+    state.activeTriggerId = triggerId;
+    state.activeTriggerElement = trigger ?? null;
+  }
+}
 
 /**
  * Sets up trigger data forwarding to the store.
  *
  * @param triggerId Id of the trigger.
- * @param triggerElement The trigger DOM element.
+ * @param triggerElementRef Ref for the trigger DOM element.
  * @param store The Store instance managing the popup state.
  * @param stateUpdates An object with state updates to apply when the trigger is active.
  */
@@ -58,22 +113,22 @@ function useTriggerDataForwarding(triggerId, triggerElementRef, store, stateUpda
   const baseRegisterTrigger = useTriggerRegistration(triggerId, store);
   const registerTrigger = (0, _useStableCallback.useStableCallback)(element => {
     baseRegisterTrigger(element);
-    if (!element || !store.select('open')) {
+    if (!element) {
       return;
     }
+    const open = store.select('open');
     const activeTriggerId = store.select('activeTriggerId');
     if (activeTriggerId === triggerId) {
       store.update({
         activeTriggerElement: element,
-        ...stateUpdates
+        ...(open ? stateUpdates : null)
       });
       return;
     }
-    if (activeTriggerId == null) {
-      // This runs when popup is open, but no active trigger is set.
-      // It can happen when using controlled mode and the trigger is mounted after opening or if `triggerId` prop is not set explicitly.
-      // In such cases the first trigger to run this code becomes the active trigger (store.select('activeTriggerId') should not return null after that).
-      // This is mostly for compatibility with contained triggers where no explicit `triggerId` was required in controlled mode.
+    if (activeTriggerId == null && open) {
+      // If a popup is already open, a detached trigger can mount before any active trigger
+      // has been established. Claim the first registered trigger so trigger-owned focus
+      // management and ARIA relationships work.
       store.update({
         activeTriggerId: triggerId,
         activeTriggerElement: element,
@@ -97,32 +152,44 @@ function useTriggerDataForwarding(triggerId, triggerElementRef, store, stateUpda
 }
 /**
  * Ensures that when there's only one trigger element registered, it is set as the active trigger.
- * This allows controlled popups to work correctly without an explicit triggerId, maintaining compatibility
- * with the contained triggers.
+ * This keeps triggerCount reactive while open and allows controlled popups to work correctly without
+ * an explicit triggerId, maintaining compatibility with contained triggers.
  *
  * This should be called on the Root part.
  *
- * @param open Whether the popup is open.
  * @param store The Store instance managing the popup state.
  */
 function useImplicitActiveTrigger(store) {
   const open = store.useState('open');
+  const reactiveTriggerCount = store.useState('triggerCount');
   (0, _useIsoLayoutEffect.useIsoLayoutEffect)(() => {
-    if (open && !store.select('activeTriggerId') && store.context.triggerElements.size === 1) {
+    if (!open) {
+      if (store.state.triggerCount !== 0) {
+        store.set('triggerCount', 0);
+      }
+      return;
+    }
+    const triggerCount = store.context.triggerElements.size;
+    const stateUpdates = {};
+    if (store.state.triggerCount !== triggerCount) {
+      stateUpdates.triggerCount = triggerCount;
+    }
+    if (!store.select('activeTriggerId') && triggerCount === 1) {
       const iteratorResult = store.context.triggerElements.entries().next();
       if (!iteratorResult.done) {
         const [implicitTriggerId, implicitTriggerElement] = iteratorResult.value;
-        store.update({
-          activeTriggerId: implicitTriggerId,
-          activeTriggerElement: implicitTriggerElement
-        });
+        stateUpdates.activeTriggerId = implicitTriggerId;
+        stateUpdates.activeTriggerElement = implicitTriggerElement;
       }
     }
-  }, [open, store]);
+    if (stateUpdates.triggerCount !== undefined || stateUpdates.activeTriggerId !== undefined) {
+      store.update(stateUpdates);
+    }
+  }, [open, store, reactiveTriggerCount]);
 }
 
 /**
- * Mangages the mounted state of the popup.
+ * Manages the mounted state of the popup.
  * Sets up the transition status listeners and handles unmounting when needed.
  * Updates the `mounted` and `transitionStatus` states in the store.
  *
@@ -147,14 +214,15 @@ function useOpenStateTransitions(open, store, onUnmount) {
     store.update({
       activeTriggerId: null,
       activeTriggerElement: null,
-      mounted: false
+      mounted: false,
+      preventUnmountingOnClose: false
     });
     onUnmount?.();
     store.context.onOpenChangeComplete?.(false);
   });
   const preventUnmountingOnClose = store.useState('preventUnmountingOnClose');
   (0, _useOpenChangeComplete.useOpenChangeComplete)({
-    enabled: !preventUnmountingOnClose,
+    enabled: mounted && !open && !preventUnmountingOnClose,
     open,
     ref: store.context.popupRef,
     onComplete() {
@@ -167,4 +235,26 @@ function useOpenStateTransitions(open, store, onUnmount) {
     forceUnmount,
     transitionStatus
   };
+}
+function usePopupInteractionProps(store, statePart) {
+  store.useSyncedValues(statePart);
+  (0, _useIsoLayoutEffect.useIsoLayoutEffect)(() => () => {
+    store.update({
+      activeTriggerProps: _empty.EMPTY_OBJECT,
+      inactiveTriggerProps: _empty.EMPTY_OBJECT,
+      popupProps: _empty.EMPTY_OBJECT
+    });
+  }, [store]);
+}
+function usePopupRootSync(store, open) {
+  (0, _useIsoLayoutEffect.useIsoLayoutEffect)(() => {
+    if (!open && store.state.openMethod !== null) {
+      store.set('openMethod', null);
+    }
+  }, [open, store]);
+  (0, _useIsoLayoutEffect.useIsoLayoutEffect)(() => () => {
+    if (store.state.openMethod !== null) {
+      store.set('openMethod', null);
+    }
+  }, [store]);
 }

package/utils/popups/popupTriggerMap.js

@@ -33,6 +33,8 @@ class PopupTriggerMap {
     this.idMap.set(id, element);
     if (process.env.NODE_ENV !== 'production') {
       if (this.elementsSet.size !== this.idMap.size) {
+        // 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.');
       }
     }