@base-ui/react 1.3.0 → 1.4.1

package/tooltip/store/TooltipStore.d.ts

@@ -30,7 +30,7 @@ declare const selectors: {
     open: boolean;
     readonly openProp: boolean | undefined;
     mounted: boolean;
-    transitionStatus: import("../../utils/useTransitionStatus.js").TransitionStatus;
+    transitionStatus: import("../../internals/useTransitionStatus.js").TransitionStatus;
     floatingRootContext: import("../../floating-ui-react/index.js").FloatingRootContext;
     preventUnmountingOnClose: boolean;
     payload: unknown;
@@ -47,7 +47,7 @@ declare const selectors: {
     open: boolean;
     readonly openProp: boolean | undefined;
     mounted: boolean;
-    transitionStatus: import("../../utils/useTransitionStatus.js").TransitionStatus;
+    transitionStatus: import("../../internals/useTransitionStatus.js").TransitionStatus;
     floatingRootContext: import("../../floating-ui-react/index.js").FloatingRootContext;
     preventUnmountingOnClose: boolean;
     payload: unknown;
@@ -64,7 +64,7 @@ declare const selectors: {
     open: boolean;
     readonly openProp: boolean | undefined;
     mounted: boolean;
-    transitionStatus: import("../../utils/useTransitionStatus.js").TransitionStatus;
+    transitionStatus: import("../../internals/useTransitionStatus.js").TransitionStatus;
     floatingRootContext: import("../../floating-ui-react/index.js").FloatingRootContext;
     preventUnmountingOnClose: boolean;
     payload: unknown;
@@ -76,12 +76,12 @@ declare const selectors: {
     activeTriggerProps: import("../../index.js").HTMLProps;
     inactiveTriggerProps: import("../../index.js").HTMLProps;
     popupProps: import("../../index.js").HTMLProps;
-  }) => import("../../utils/useTransitionStatus.js").TransitionStatus;
+  }) => import("../../internals/useTransitionStatus.js").TransitionStatus;
   floatingRootContext: (state: {
     open: boolean;
     readonly openProp: boolean | undefined;
     mounted: boolean;
-    transitionStatus: import("../../utils/useTransitionStatus.js").TransitionStatus;
+    transitionStatus: import("../../internals/useTransitionStatus.js").TransitionStatus;
     floatingRootContext: import("../../floating-ui-react/index.js").FloatingRootContext;
     preventUnmountingOnClose: boolean;
     payload: unknown;
@@ -98,7 +98,7 @@ declare const selectors: {
     open: boolean;
     readonly openProp: boolean | undefined;
     mounted: boolean;
-    transitionStatus: import("../../utils/useTransitionStatus.js").TransitionStatus;
+    transitionStatus: import("../../internals/useTransitionStatus.js").TransitionStatus;
     floatingRootContext: import("../../floating-ui-react/index.js").FloatingRootContext;
     preventUnmountingOnClose: boolean;
     payload: unknown;
@@ -115,7 +115,7 @@ declare const selectors: {
     open: boolean;
     readonly openProp: boolean | undefined;
     mounted: boolean;
-    transitionStatus: import("../../utils/useTransitionStatus.js").TransitionStatus;
+    transitionStatus: import("../../internals/useTransitionStatus.js").TransitionStatus;
     floatingRootContext: import("../../floating-ui-react/index.js").FloatingRootContext;
     preventUnmountingOnClose: boolean;
     payload: unknown;
@@ -132,7 +132,7 @@ declare const selectors: {
     open: boolean;
     readonly openProp: boolean | undefined;
     mounted: boolean;
-    transitionStatus: import("../../utils/useTransitionStatus.js").TransitionStatus;
+    transitionStatus: import("../../internals/useTransitionStatus.js").TransitionStatus;
     floatingRootContext: import("../../floating-ui-react/index.js").FloatingRootContext;
     preventUnmountingOnClose: boolean;
     payload: unknown;
@@ -149,7 +149,7 @@ declare const selectors: {
     open: boolean;
     readonly openProp: boolean | undefined;
     mounted: boolean;
-    transitionStatus: import("../../utils/useTransitionStatus.js").TransitionStatus;
+    transitionStatus: import("../../internals/useTransitionStatus.js").TransitionStatus;
     floatingRootContext: import("../../floating-ui-react/index.js").FloatingRootContext;
     preventUnmountingOnClose: boolean;
     payload: unknown;
@@ -166,7 +166,7 @@ declare const selectors: {
     open: boolean;
     readonly openProp: boolean | undefined;
     mounted: boolean;
-    transitionStatus: import("../../utils/useTransitionStatus.js").TransitionStatus;
+    transitionStatus: import("../../internals/useTransitionStatus.js").TransitionStatus;
     floatingRootContext: import("../../floating-ui-react/index.js").FloatingRootContext;
     preventUnmountingOnClose: boolean;
     payload: unknown;
@@ -183,7 +183,7 @@ declare const selectors: {
     open: boolean;
     readonly openProp: boolean | undefined;
     mounted: boolean;
-    transitionStatus: import("../../utils/useTransitionStatus.js").TransitionStatus;
+    transitionStatus: import("../../internals/useTransitionStatus.js").TransitionStatus;
     floatingRootContext: import("../../floating-ui-react/index.js").FloatingRootContext;
     preventUnmountingOnClose: boolean;
     payload: unknown;
@@ -200,7 +200,7 @@ declare const selectors: {
     open: boolean;
     readonly openProp: boolean | undefined;
     mounted: boolean;
-    transitionStatus: import("../../utils/useTransitionStatus.js").TransitionStatus;
+    transitionStatus: import("../../internals/useTransitionStatus.js").TransitionStatus;
     floatingRootContext: import("../../floating-ui-react/index.js").FloatingRootContext;
     preventUnmountingOnClose: boolean;
     payload: unknown;
@@ -217,7 +217,7 @@ declare const selectors: {
     open: boolean;
     readonly openProp: boolean | undefined;
     mounted: boolean;
-    transitionStatus: import("../../utils/useTransitionStatus.js").TransitionStatus;
+    transitionStatus: import("../../internals/useTransitionStatus.js").TransitionStatus;
     floatingRootContext: import("../../floating-ui-react/index.js").FloatingRootContext;
     preventUnmountingOnClose: boolean;
     payload: unknown;
@@ -234,7 +234,7 @@ declare const selectors: {
     open: boolean;
     readonly openProp: boolean | undefined;
     mounted: boolean;
-    transitionStatus: import("../../utils/useTransitionStatus.js").TransitionStatus;
+    transitionStatus: import("../../internals/useTransitionStatus.js").TransitionStatus;
     floatingRootContext: import("../../floating-ui-react/index.js").FloatingRootContext;
     preventUnmountingOnClose: boolean;
     payload: unknown;
@@ -251,7 +251,7 @@ declare const selectors: {
     open: boolean;
     readonly openProp: boolean | undefined;
     mounted: boolean;
-    transitionStatus: import("../../utils/useTransitionStatus.js").TransitionStatus;
+    transitionStatus: import("../../internals/useTransitionStatus.js").TransitionStatus;
     floatingRootContext: import("../../floating-ui-react/index.js").FloatingRootContext;
     preventUnmountingOnClose: boolean;
     payload: unknown;
@@ -268,7 +268,7 @@ declare const selectors: {
     open: boolean;
     readonly openProp: boolean | undefined;
     mounted: boolean;
-    transitionStatus: import("../../utils/useTransitionStatus.js").TransitionStatus;
+    transitionStatus: import("../../internals/useTransitionStatus.js").TransitionStatus;
     floatingRootContext: import("../../floating-ui-react/index.js").FloatingRootContext;
     preventUnmountingOnClose: boolean;
     payload: unknown;

package/tooltip/store/TooltipStore.js

@@ -10,7 +10,7 @@ var ReactDOM = _interopRequireWildcard(require("react-dom"));
 var _store = require("@base-ui/utils/store");
 var _useRefWithInit = require("@base-ui/utils/useRefWithInit");
 var _floatingUiReact = require("../../floating-ui-react");
-var _reasons = require("../../utils/reasons");
+var _reasons = require("../../internals/reasons");
 var _popups = require("../../utils/popups");
 const selectors = {
   ..._popups.popupStoreSelectors,
@@ -48,6 +48,7 @@ class TooltipStore extends _store.ReactStore {
     if (eventDetails.isCanceled) {
       return;
     }
+    this.state.floatingRootContext.dispatchOpenChange(nextOpen, eventDetails);
     const changeState = () => {
       const updatedState = {
         open: nextOpen,

package/tooltip/trigger/TooltipTrigger.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import type { BaseUIComponentProps } from "../../utils/types.js";
+import type { BaseUIComponentProps } from "../../internals/types.js";
 import { TooltipHandle } from "../store/TooltipHandle.js";
 /**
  * An element to attach the tooltip to.

package/tooltip/trigger/TooltipTrigger.js

@@ -12,9 +12,9 @@ var React = _interopRequireWildcard(require("react"));
 var _fastHooks = require("@base-ui/utils/fastHooks");
 var _TooltipRootContext = require("../root/TooltipRootContext");
 var _popupStateMapping = require("../../utils/popupStateMapping");
-var _useRenderElement = require("../../utils/useRenderElement");
+var _useRenderElement = require("../../internals/useRenderElement");
 var _popups = require("../../utils/popups");
-var _useBaseUiId = require("../../utils/useBaseUiId");
+var _useBaseUiId = require("../../internals/useBaseUiId");
 var _TooltipProviderContext = require("../provider/TooltipProviderContext");
 var _floatingUiReact = require("../../floating-ui-react");
 var _TooltipTriggerDataAttributes = require("./TooltipTriggerDataAttributes");
@@ -36,6 +36,7 @@ const TooltipTrigger = exports.TooltipTrigger = (0, _fastHooks.fastComponentRef)
     closeOnClick = true,
     closeDelay,
     id: idProp,
+    style,
     ...elementProps
   } = componentProps;
   const rootContext = (0, _TooltipRootContext.useTooltipRootContext)(true);
@@ -100,7 +101,8 @@ const TooltipTrigger = exports.TooltipTrigger = (0, _fastHooks.fastComponentRef)
       };
     },
     triggerElementRef,
-    isActiveTrigger: isTriggerActive
+    isActiveTrigger: isTriggerActive,
+    isClosing: () => store.select('transitionStatus') === 'ending'
   });
   const focusProps = (0, _floatingUiReact.useFocus)(floatingRootContext, {
     enabled: !disabled

package/tooltip/viewport/TooltipViewport.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { BaseUIComponentProps } from "../../utils/types.js";
+import { BaseUIComponentProps } from "../../internals/types.js";
 /**
  * A viewport for displaying content transitions.
  * This component is only required if one popup can be opened by multiple triggers, its content change based on the trigger

package/tooltip/viewport/TooltipViewport.js

@@ -9,7 +9,7 @@ exports.TooltipViewport = void 0;
 var React = _interopRequireWildcard(require("react"));
 var _TooltipRootContext = require("../root/TooltipRootContext");
 var _TooltipPositionerContext = require("../positioner/TooltipPositionerContext");
-var _useRenderElement = require("../../utils/useRenderElement");
+var _useRenderElement = require("../../internals/useRenderElement");
 var _TooltipViewportCssVars = require("./TooltipViewportCssVars");
 var _usePopupViewport = require("../../utils/usePopupViewport");
 const stateAttributesMapping = {
@@ -30,6 +30,7 @@ const TooltipViewport = exports.TooltipViewport = /*#__PURE__*/React.forwardRef(
   const {
     render,
     className,
+    style,
     children,
     ...elementProps
   } = componentProps;

package/types/index.d.ts

@@ -1,5 +1,5 @@
 import type * as React from 'react';
-export type { BaseUIChangeEventDetails, BaseUIGenericEventDetails } from "../utils/createBaseUIEventDetails.js";
+export type { BaseUIChangeEventDetails, BaseUIGenericEventDetails } from "../internals/createBaseUIEventDetails.js";
 export type HTMLProps<T = any> = React.HTMLAttributes<T> & {
   ref?: React.Ref<T> | undefined;
 };

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

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.useMediaQuery = useMediaQuery;
 var React = _interopRequireWildcard(require("react"));
+var _addEventListener = require("@base-ui/utils/addEventListener");
 var _shim = require("use-sync-external-store/shim");
 function useMediaQuery(query, options) {
   // Wait for jsdom to support the match media feature.
@@ -38,12 +39,7 @@ function useMediaQuery(query, options) {
       return [getDefaultSnapshot, () => () => {}];
     }
     const mediaQueryList = matchMedia(query);
-    return [() => mediaQueryList.matches, notify => {
-      mediaQueryList.addEventListener('change', notify);
-      return () => {
-        mediaQueryList.removeEventListener('change', notify);
-      };
-    }];
+    return [() => mediaQueryList.matches, notify => (0, _addEventListener.addEventListener)(mediaQueryList, 'change', notify)];
   }, [getDefaultSnapshot, matchMedia, query]);
   const match = (0, _shim.useSyncExternalStore)(subscribe, getSnapshot, getServerSnapshot);
   if (process.env.NODE_ENV !== 'production') {

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.
  *
@@ -12,7 +12,7 @@ export type UseRenderRenderProp<State = Record<string, unknown>> = React.ReactEl
 export type UseRenderElementProps<ElementType extends React.ElementType> = React.ComponentPropsWithRef<ElementType>;
 export type UseRenderComponentProps<ElementType extends React.ElementType, State = {}, RenderFunctionProps = HTMLProps> = React.ComponentPropsWithRef<ElementType> & {
   /**
-   * Allows you to replace the component’s HTML element
+   * Allows you to replace the component's HTML element
    * with a different tag, or compose it with another component.
    *
    * Accepts a `ReactElement` or a function that returns the element to render.

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/FloatingPortalLite.js

@@ -21,6 +21,7 @@ const FloatingPortalLite = exports.FloatingPortalLite = /*#__PURE__*/React.forwa
     container,
     className,
     render,
+    style,
     ...elementProps
   } = componentProps;
   const {

package/utils/InternalBackdrop.js

@@ -17,19 +17,8 @@ const InternalBackdrop = exports.InternalBackdrop = /*#__PURE__*/React.forwardRe
   } = props;
   let clipPath;
   if (cutout) {
-    const rect = cutout?.getBoundingClientRect();
-    clipPath = `polygon(
-      0% 0%,
-      100% 0%,
-      100% 100%,
-      0% 100%,
-      0% 0%,
-      ${rect.left}px ${rect.top}px,
-      ${rect.left}px ${rect.bottom}px,
-      ${rect.right}px ${rect.bottom}px,
-      ${rect.right}px ${rect.top}px,
-      ${rect.left}px ${rect.top}px
-    )`;
+    const rect = cutout.getBoundingClientRect();
+    clipPath = `polygon(0% 0%,100% 0%,100% 100%,0% 100%,0% 0%,${rect.left}px ${rect.top}px,${rect.left}px ${rect.bottom}px,${rect.right}px ${rect.bottom}px,${rect.right}px ${rect.top}px,${rect.left}px ${rect.top}px)`;
   }
   return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
     ref: ref,

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/getPseudoElementBounds.js

@@ -4,6 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.getPseudoElementBounds = getPseudoElementBounds;
+var _owner = require("@base-ui/utils/owner");
 function getPseudoElementBounds(element) {
   const elementRect = element.getBoundingClientRect();
 
@@ -11,8 +12,9 @@ function getPseudoElementBounds(element) {
   if (process.env.NODE_ENV !== 'production') {
     return elementRect;
   }
-  const beforeStyles = window.getComputedStyle(element, '::before');
-  const afterStyles = window.getComputedStyle(element, '::after');
+  const win = (0, _owner.ownerWindow)(element);
+  const beforeStyles = win.getComputedStyle(element, '::before');
+  const afterStyles = win.getComputedStyle(element, '::after');
   const hasPseudoElements = beforeStyles.content !== 'none' || afterStyles.content !== 'none';
   if (!hasPseudoElements) {
     return elementRect;

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/popupStoreUtils.d.ts

@@ -46,5 +46,5 @@ export declare function useImplicitActiveTrigger<State extends PopupStoreState<a
  */
 export declare function useOpenStateTransitions<State extends PopupStoreState<any>>(open: boolean, store: ReactStore<State, PopupStoreContext<any>, typeof popupStoreSelectors>, onUnmount?: () => void): {
   forceUnmount: () => void;
-  transitionStatus: import("../useTransitionStatus.js").TransitionStatus;
+  transitionStatus: import("../../internals/useTransitionStatus.js").TransitionStatus;
 };

package/utils/popups/popupStoreUtils.js

@@ -12,8 +12,8 @@ exports.useTriggerRegistration = useTriggerRegistration;
 var React = _interopRequireWildcard(require("react"));
 var _useStableCallback = require("@base-ui/utils/useStableCallback");
 var _useIsoLayoutEffect = require("@base-ui/utils/useIsoLayoutEffect");
-var _useTransitionStatus = require("../useTransitionStatus");
-var _useOpenChangeComplete = require("../useOpenChangeComplete");
+var _useTransitionStatus = require("../../internals/useTransitionStatus");
+var _useOpenChangeComplete = require("../../internals/useOpenChangeComplete");
 /**
  * Returns a callback ref that registers/unregisters the trigger element in the store.
  *

package/utils/popups/store.d.ts

@@ -1,7 +1,7 @@
 import { FloatingRootContext } from "../../floating-ui-react/index.js";
-import { TransitionStatus } from "../useTransitionStatus.js";
+import { TransitionStatus } from "../../internals/useTransitionStatus.js";
 import { PopupTriggerMap } from "./popupTriggerMap.js";
-import { HTMLProps } from "../types.js";
+import { HTMLProps } from "../../internals/types.js";
 /**
  * State common to all popup stores.
  */

package/utils/popups/store.js

@@ -6,8 +6,8 @@ Object.defineProperty(exports, "__esModule", {
 exports.createInitialPopupStoreState = createInitialPopupStoreState;
 exports.popupStoreSelectors = void 0;
 var _store = require("@base-ui/utils/store");
+var _empty = require("@base-ui/utils/empty");
 var _getEmptyRootContext = require("../../floating-ui-react/utils/getEmptyRootContext");
-var _constants = require("../constants");
 /**
  * State common to all popup stores.
  */
@@ -17,7 +17,7 @@ function createInitialPopupStoreState() {
     open: false,
     openProp: undefined,
     mounted: false,
-    transitionStatus: 'idle',
+    transitionStatus: undefined,
     floatingRootContext: (0, _getEmptyRootContext.getEmptyRootContext)(),
     preventUnmountingOnClose: false,
     payload: undefined,
@@ -26,9 +26,9 @@ function createInitialPopupStoreState() {
     triggerIdProp: undefined,
     popupElement: null,
     positionerElement: null,
-    activeTriggerProps: _constants.EMPTY_OBJECT,
-    inactiveTriggerProps: _constants.EMPTY_OBJECT,
-    popupProps: _constants.EMPTY_OBJECT
+    activeTriggerProps: _empty.EMPTY_OBJECT,
+    inactiveTriggerProps: _empty.EMPTY_OBJECT,
+    popupProps: _empty.EMPTY_OBJECT
   };
 }
 const activeTriggerIdSelector = (0, _store.createSelector)(state => state.triggerIdProp ?? state.activeTriggerId);

package/utils/popups/useTriggerFocusGuards.d.ts

@@ -0,0 +1,28 @@
+import * as React from 'react';
+import { type BaseUIChangeEventDetails } from "../../internals/createBaseUIEventDetails.js";
+import { REASONS } from "../../internals/reasons.js";
+/**
+ * Minimal store interface required by the focus guard hook.
+ * Both PopoverStore and MenuStore satisfy this interface.
+ */
+interface TriggerFocusGuardStore {
+  setOpen(open: boolean, eventDetails: BaseUIChangeEventDetails<typeof REASONS.focusOut>): void;
+  select(key: 'positionerElement'): HTMLElement | null;
+  context: {
+    readonly beforeContentFocusGuardRef: React.RefObject<HTMLElement | null>;
+    readonly triggerFocusTargetRef: React.RefObject<HTMLElement | null>;
+  };
+}
+/**
+ * Provides focus guard handlers for popup triggers (Popover, Menu).
+ *
+ * When the popup is open, invisible focus guard elements are placed before and after
+ * the trigger. These handlers close the popup and move focus to the appropriate
+ * tabbable element when the guards receive focus (i.e. when the user tabs out).
+ */
+export declare function useTriggerFocusGuards(store: TriggerFocusGuardStore, triggerElementRef: React.RefObject<HTMLElement | null>): {
+  preFocusGuardRef: React.RefObject<HTMLElement | null>;
+  handlePreFocusGuardFocus: (event: React.FocusEvent) => void;
+  handleFocusTargetFocus: (event: React.FocusEvent) => void;
+};
+export {};

package/utils/popups/useTriggerFocusGuards.js

@@ -0,0 +1,60 @@
+"use strict";
+'use client';
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useTriggerFocusGuards = useTriggerFocusGuards;
+var React = _interopRequireWildcard(require("react"));
+var ReactDOM = _interopRequireWildcard(require("react-dom"));
+var _useStableCallback = require("@base-ui/utils/useStableCallback");
+var _utils = require("../../floating-ui-react/utils");
+var _createBaseUIEventDetails = require("../../internals/createBaseUIEventDetails");
+var _reasons = require("../../internals/reasons");
+/**
+ * Minimal store interface required by the focus guard hook.
+ * Both PopoverStore and MenuStore satisfy this interface.
+ */
+
+/**
+ * Provides focus guard handlers for popup triggers (Popover, Menu).
+ *
+ * When the popup is open, invisible focus guard elements are placed before and after
+ * the trigger. These handlers close the popup and move focus to the appropriate
+ * tabbable element when the guards receive focus (i.e. when the user tabs out).
+ */
+function useTriggerFocusGuards(store, triggerElementRef) {
+  const preFocusGuardRef = React.useRef(null);
+  const handlePreFocusGuardFocus = (0, _useStableCallback.useStableCallback)(event => {
+    ReactDOM.flushSync(() => {
+      store.setOpen(false, (0, _createBaseUIEventDetails.createChangeEventDetails)(_reasons.REASONS.focusOut, event.nativeEvent, event.currentTarget));
+    });
+    const previousTabbable = (0, _utils.getTabbableBeforeElement)(preFocusGuardRef.current);
+    previousTabbable?.focus();
+  });
+  const handleFocusTargetFocus = (0, _useStableCallback.useStableCallback)(event => {
+    const positionerElement = store.select('positionerElement');
+    if (positionerElement && (0, _utils.isOutsideEvent)(event, positionerElement)) {
+      store.context.beforeContentFocusGuardRef.current?.focus();
+    } else {
+      ReactDOM.flushSync(() => {
+        store.setOpen(false, (0, _createBaseUIEventDetails.createChangeEventDetails)(_reasons.REASONS.focusOut, event.nativeEvent, event.currentTarget));
+      });
+      let nextTabbable = (0, _utils.getTabbableAfterElement)(store.context.triggerFocusTargetRef.current || triggerElementRef.current);
+      while (nextTabbable !== null && (0, _utils.contains)(positionerElement, nextTabbable)) {
+        const prevTabbable = nextTabbable;
+        nextTabbable = (0, _utils.getNextTabbable)(nextTabbable);
+        if (nextTabbable === prevTabbable) {
+          break;
+        }
+      }
+      nextTabbable?.focus();
+    }
+  });
+  return {
+    preFocusGuardRef,
+    handlePreFocusGuardFocus,
+    handleFocusTargetFocus
+  };
+}

package/{scroll-area/utils → utils}/scrollEdges.d.ts

@@ -1,2 +1,3 @@
 export declare const SCROLL_EDGE_TOLERANCE_PX = 1;
+export declare function getMaxScrollOffset(scrollSize: number, clientSize: number): number;
 export declare function normalizeScrollOffset(value: number, max: number): number;

package/{scroll-area/utils → utils}/scrollEdges.js

@@ -4,9 +4,13 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.SCROLL_EDGE_TOLERANCE_PX = void 0;
+exports.getMaxScrollOffset = getMaxScrollOffset;
 exports.normalizeScrollOffset = normalizeScrollOffset;
-var _clamp = require("../../utils/clamp");
+var _clamp = require("../internals/clamp");
 const SCROLL_EDGE_TOLERANCE_PX = exports.SCROLL_EDGE_TOLERANCE_PX = 1;
+function getMaxScrollOffset(scrollSize, clientSize) {
+  return Math.max(0, scrollSize - clientSize);
+}
 function normalizeScrollOffset(value, max) {
   if (max <= 0) {
     return 0;

package/utils/useAnchorPositioning.js

@@ -13,7 +13,7 @@ var _useIsoLayoutEffect = require("@base-ui/utils/useIsoLayoutEffect");
 var _useValueAsRef = require("@base-ui/utils/useValueAsRef");
 var _useStableCallback = require("@base-ui/utils/useStableCallback");
 var _floatingUiReact = require("../floating-ui-react");
-var _DirectionContext = require("../direction-provider/DirectionContext");
+var _DirectionContext = require("../internals/direction-context/DirectionContext");
 var _arrow = require("../floating-ui-react/middleware/arrow");
 var _hideMiddleware = require("./hideMiddleware");
 var _adaptiveOriginMiddleware = require("./adaptiveOriginMiddleware");
@@ -87,6 +87,7 @@ function useAnchorPositioning(params) {
   const anchorFnCallback = (0, _useStableCallback.useStableCallback)(anchorFn);
   const anchorDep = anchorFn ? anchorFnCallback : anchor;
   const anchorValueRef = (0, _useValueAsRef.useValueAsRef)(anchor);
+  const mountedRef = (0, _useValueAsRef.useValueAsRef)(mounted);
   const direction = (0, _DirectionContext.useDirection)();
   const isRtl = direction === 'rtl';
   const side = mountSide || {
@@ -212,12 +213,15 @@ function useAnchorPositioning(params) {
       availableHeight,
       rects
     }) {
+      if (!mountedRef.current) {
+        return;
+      }
       const floatingStyle = floating.style;
       floatingStyle.setProperty('--available-width', `${availableWidth}px`);
       floatingStyle.setProperty('--available-height', `${availableHeight}px`);
 
       // Snap anchor dimensions to device pixels to ensure the popup's visual width matches the anchor's one.
-      const dpr = window.devicePixelRatio || 1;
+      const dpr = (0, _owner.ownerWindow)(floating).devicePixelRatio || 1;
       const {
         x,
         y,
@@ -232,7 +236,7 @@ function useAnchorPositioning(params) {
   }), (0, _arrow.arrow)(() => ({
     // `transform-origin` calculations rely on an element existing. If the arrow hasn't been set,
     // we'll create a fake element.
-    element: arrowRef.current || document.createElement('div'),
+    element: arrowRef.current || (0, _owner.ownerDocument)(arrowRef.current).createElement('div'),
     padding: arrowPadding,
     offsetParent: 'floating'
   }), [arrowPadding]), {
@@ -276,7 +280,8 @@ function useAnchorPositioning(params) {
       floatingRootContext.update({
         referenceElement: null,
         floatingElement: null,
-        domReferenceElement: null
+        domReferenceElement: null,
+        positionReference: null
       });
     }
   }, [mounted, floatingRootContext]);
@@ -297,6 +302,7 @@ function useAnchorPositioning(params) {
     floatingStyles: originalFloatingStyles
   } = (0, _floatingUiReact.useFloating)({
     rootContext: floatingRootContext,
+    open: keepMounted ? mounted : undefined,
     placement,
     middleware,
     strategy: positionMethod,

package/utils/useAnchoredPopupScrollLock.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Manages scroll lock for anchored popups. For non-touch opens, scroll lock is applied when
+ * enabled. For touch opens, scroll lock is applied only when the positioner width is effectively
+ * viewport-sized.
+ */
+export declare function useAnchoredPopupScrollLock(enabled: boolean, touchOpen: boolean, positionerElement: HTMLElement | null, referenceElement: Element | null): void;