@atlaskit/top-layer 0.11.0 → 0.12.1

package/dist/esm/internal/use-animated-visibility.js

@@ -44,6 +44,7 @@ export function useAnimatedVisibility(_ref) {
   var isOpen = _ref.isOpen,
     animate = _ref.animate,
     elementRef = _ref.elementRef,
+    onEnterFinish = _ref.onEnterFinish,
     onExitFinish = _ref.onExitFinish;
   // Resolve the animation preset and inject its CSS (idempotent).
   // Returns `null` when `animate` is falsy.
@@ -80,13 +81,76 @@ export function useAnimatedVisibility(_ref) {
     setShowChildren(false);
   }
 
-  // Keep a stable ref to the latest `onExitFinish` so the effect and
-  // timeout closures below always call the current callback without
-  // needing `onExitFinish` in dependency arrays (which would reset
-  // the timeout on every new closure).
+  // Keep stable refs to the latest callbacks so effects and timeout closures
+  // always call the current callback without needing them in dependency arrays.
+  var onEnterFinishRef = useRef(onEnterFinish);
+  onEnterFinishRef.current = onEnterFinish;
   var onExitFinishRef = useRef(onExitFinish);
   onExitFinishRef.current = onExitFinish;
 
+  // ── Animated entry effect ──
+  //
+  // Fires `onEnterFinish` after the entry transition completes.
+  // When there is no animation, fires it immediately via a separate effect.
+  //
+  // A fallback timeout (enterDurationMs + 50ms buffer) ensures it always
+  // fires even if `transitionend` is never emitted (e.g. zero-duration,
+  // browser quirk, or reduced motion).
+  useEffect(function () {
+    var _preset$enterDuration;
+    if (!isOpen || !showChildren || !willAnimate) {
+      return;
+    }
+    var element = elementRef.current;
+    if (!element) {
+      return;
+    }
+
+    // Both the transitionend listener and the fallback timeout are guarded by
+    // a shared `hasFired` flag to prevent double-firing. This handles the race
+    // where the 350ms transition finishes after the 400ms fallback fires
+    // (or vice versa): whichever fires first sets `hasFired = true`, and the
+    // second path becomes a no-op.
+    var hasFired = false;
+    function handleTransitionEnd() {
+      var _onEnterFinishRef$cur;
+      if (hasFired) {
+        return;
+      }
+      hasFired = true;
+      clearTimeout(fallbackId);
+      unbind();
+      (_onEnterFinishRef$cur = onEnterFinishRef.current) === null || _onEnterFinishRef$cur === void 0 || _onEnterFinishRef$cur.call(onEnterFinishRef);
+    }
+    var fallbackId = setTimeout(handleTransitionEnd, ((_preset$enterDuration = preset === null || preset === void 0 ? void 0 : preset.enterDurationMs) !== null && _preset$enterDuration !== void 0 ? _preset$enterDuration : 0) + 50);
+    var unbind = bind(element, {
+      type: 'transitionend',
+      listener: handleTransitionEnd,
+      options: {
+        once: true
+      }
+    });
+    return function () {
+      hasFired = true;
+      clearTimeout(fallbackId);
+      unbind();
+    };
+  }, [isOpen, showChildren, willAnimate, preset === null || preset === void 0 ? void 0 : preset.enterDurationMs, elementRef]);
+
+  // ── Non-animated entry callback ──
+  //
+  // When there is no animation, fire `onEnterFinish` immediately on mount and after `isOpen` goes false->true.
+  // The initial value is false to make sure it fires on mount if the current `isOpen` is true.
+  var prevIsOpenForEntryRef = useRef(false);
+  useEffect(function () {
+    var prevIsOpen = prevIsOpenForEntryRef.current;
+    prevIsOpenForEntryRef.current = isOpen;
+    if (!prevIsOpen && isOpen && !willAnimate) {
+      var _onEnterFinishRef$cur2;
+      (_onEnterFinishRef$cur2 = onEnterFinishRef.current) === null || _onEnterFinishRef$cur2 === void 0 || _onEnterFinishRef$cur2.call(onEnterFinishRef);
+    }
+  }, [isOpen, willAnimate]);
+
   // ── Animated exit effect ──
   //
   // Runs when all three conditions are true:
@@ -111,20 +175,32 @@ export function useAnimatedVisibility(_ref) {
     if (!element) {
       return;
     }
-    function finish() {
+
+    // Both the transitionend listener and the fallback timeout are guarded by
+    // a shared `hasFired` flag to prevent double-firing. This handles the race
+    // where the 350ms transition finishes after the 400ms fallback fires
+    // (or vice versa): whichever fires first sets `hasFired = true`, and the
+    // second path becomes a no-op.
+    var hasFired = false;
+    function handleTransitionEnd() {
       var _onExitFinishRef$curr;
+      if (hasFired) {
+        return;
+      }
+      hasFired = true;
       clearTimeout(fallbackId);
+      unbind();
       setShowChildren(false);
       (_onExitFinishRef$curr = onExitFinishRef.current) === null || _onExitFinishRef$curr === void 0 || _onExitFinishRef$curr.call(onExitFinishRef);
     }
 
     // Fallback: unmount even if transitionend never fires
-    var fallbackId = setTimeout(finish, ((_preset$exitDurationM = preset === null || preset === void 0 ? void 0 : preset.exitDurationMs) !== null && _preset$exitDurationM !== void 0 ? _preset$exitDurationM : 0) + 50);
+    var fallbackId = setTimeout(handleTransitionEnd, ((_preset$exitDurationM = preset === null || preset === void 0 ? void 0 : preset.exitDurationMs) !== null && _preset$exitDurationM !== void 0 ? _preset$exitDurationM : 0) + 50);
 
     // Primary: listen for the CSS transition to complete
     var unbind = bind(element, {
       type: 'transitionend',
-      listener: finish,
+      listener: handleTransitionEnd,
       options: {
         once: true
       }
@@ -132,6 +208,7 @@ export function useAnimatedVisibility(_ref) {
 
     // Cleanup on re-render or unmount: cancel pending timeout and listener
     return function () {
+      hasFired = true;
       clearTimeout(fallbackId);
       unbind();
     };

package/dist/esm/popover/popover.js

@@ -66,6 +66,7 @@ export var Popover = /*#__PURE__*/forwardRef(function Popover(_ref, ref) {
     modeProp = _ref$mode === void 0 ? 'auto' : _ref$mode,
     onClose = _ref.onClose,
     onOpenChange = _ref.onOpenChange,
+    onEnterFinish = _ref.onEnterFinish,
     onExitFinish = _ref.onExitFinish,
     animate = _ref.animate,
     placement = _ref.placement,
@@ -89,6 +90,7 @@ export var Popover = /*#__PURE__*/forwardRef(function Popover(_ref, ref) {
       isOpen: isOpen,
       animate: animate,
       elementRef: ownRef,
+      onEnterFinish: onEnterFinish,
       onExitFinish: onExitFinish
     }),
     showChildren = _useAnimatedVisibilit.showChildren,

package/dist/esm/popup/popup-content.js

@@ -3,11 +3,13 @@ import _extends from "@babel/runtime/helpers/extends";
 import { ax, ix } from "@compiled/react/runtime";
 import React, { forwardRef, useCallback, useLayoutEffect, useRef } from 'react';
 import mergeRefs from '@atlaskit/ds-lib/merge-refs';
+import { prefersReducedMotion } from '../internal/reduced-motion';
 import { roleToAriaHasPopup, shouldFocusIntoPopover } from '../internal/role-types';
 import { useAnchorPosition } from '../internal/use-anchor-position';
 import { useWidthFromAnchor } from '../internal/use-width-from-anchor';
 import { Popover } from '../popover/popover';
-import { useMaybePopupContext } from './popup-context';
+import { useMaybePopupContext } from './use-maybe-popup-context';
+
 /**
  * Thin context wrapper that composes `Popover` + `useAnchorPosition`.
  *
@@ -16,7 +18,7 @@ import { useMaybePopupContext } from './popup-context';
  * use `Popover` + `useAnchorPosition` directly.
  */
 export var PopupContent = /*#__PURE__*/forwardRef(function PopupContent(_ref, ref) {
-  var _ref2, _ref3, _ctx$popoverRef;
+  var _ref2, _ctx$popoverRef;
   var children = _ref.children,
     role = _ref.role,
     label = _ref.label,
@@ -32,7 +34,9 @@ export var PopupContent = /*#__PURE__*/forwardRef(function PopupContent(_ref, re
     onCloseProp = _ref.onClose,
     testIdProp = _ref.testId,
     forceFallbackPositioningProp = _ref.forceFallbackPositioning,
-    idProp = _ref.id;
+    idProp = _ref.id,
+    onEnterFinish = _ref.onEnterFinish,
+    onExitFinish = _ref.onExitFinish;
   // When inside <Popup>, context provides defaults. Props always win.
   var ctx = useMaybePopupContext();
   var triggerRef = triggerRefProp !== null && triggerRefProp !== void 0 ? triggerRefProp : ctx === null || ctx === void 0 ? void 0 : ctx.triggerRef;
@@ -41,16 +45,47 @@ export var PopupContent = /*#__PURE__*/forwardRef(function PopupContent(_ref, re
   var testId = testIdProp !== null && testIdProp !== void 0 ? testIdProp : ctx === null || ctx === void 0 ? void 0 : ctx.testId;
   var forceFallbackPositioning = forceFallbackPositioningProp !== null && forceFallbackPositioningProp !== void 0 ? forceFallbackPositioningProp : ctx === null || ctx === void 0 ? void 0 : ctx.forceFallbackPositioning;
 
-  // Resolve isOpen: prop wins, then context.
-  // Inside the <Popup> compound, ctx.isOpen tracks the browser's toggle state.
-  var isOpen = (_ref3 = isOpenProp !== null && isOpenProp !== void 0 ? isOpenProp : ctx === null || ctx === void 0 ? void 0 : ctx.isOpen) !== null && _ref3 !== void 0 ? _ref3 : false;
-
-  // Combine internal state sync with consumer's onOpenChange callback.
-  // The Popup compound needs setIsOpen to keep aria-expanded on the trigger
-  // in sync, and the consumer may also want to respond to open/close events
-  // (e.g. for focus management).
-  var setIsOpen = ctx === null || ctx === void 0 ? void 0 : ctx.setIsOpen;
+  // isOpen: prop wins, otherwise derive from context popupState.
+  // 'animating-open' counts as open so <Popover> stays visible during entry animation.
+  var isOpen = isOpenProp !== null && isOpenProp !== void 0 ? isOpenProp : ctx !== null ? ctx.popupState === 'open' || ctx.popupState === 'animating-open' : false;
+  var setPopupState = ctx === null || ctx === void 0 ? void 0 : ctx.setPopupState;
   var consumerOnOpenChange = ctx === null || ctx === void 0 ? void 0 : ctx.onOpenChange;
+
+  // ── TPopupState ──
+  //
+  // popupState is driven by handleOpenChange (below), which fires on every browser
+  // toggle event (showPopover / hidePopover / light-dismiss).
+  //
+  // Exception — initial mount with isOpen=true (prop-controlled usage):
+  //   handleOpenChange only fires from the Popover's toggle event listener, which
+  //   is registered in a useEffect. On the first render, useEffect hasn't run yet,
+  //   so handleOpenChange never fires. We sync popupState here instead.
+  //
+  // Transitions when animations are active:
+  //   closed → animating-open  → open     (enter)
+  //   open   → animating-closed → closed  (exit, via onExitFinish)
+  //
+  // Without animation: closed ↔ open directly.
+  var willAnimate = Boolean(animate) && !prefersReducedMotion();
+  var hasMountedRef = useRef(false);
+  useLayoutEffect(function () {
+    if (hasMountedRef.current) {
+      return;
+    }
+    hasMountedRef.current = true;
+    if (isOpen) {
+      setPopupState === null || setPopupState === void 0 || setPopupState(willAnimate ? 'animating-open' : 'open');
+    }
+  }, [isOpen, setPopupState, willAnimate]);
+  var handleEnterFinish = useCallback(function () {
+    setPopupState === null || setPopupState === void 0 || setPopupState('open');
+    onEnterFinish === null || onEnterFinish === void 0 || onEnterFinish();
+  }, [setPopupState, onEnterFinish]);
+  var handleExitFinish = useCallback(function () {
+    setPopupState === null || setPopupState === void 0 || setPopupState('closed');
+    onExitFinish === null || onExitFinish === void 0 || onExitFinish();
+  }, [setPopupState, onExitFinish]);
+
   // Note: onOpenChange composition is handled by handleOpenChange below,
   // which also adds nested-popover focus restoration.
 
@@ -82,7 +117,11 @@ export var PopupContent = /*#__PURE__*/forwardRef(function PopupContent(_ref, re
   // See: notes/architecture/focus-restoration.md
   var handleOpenChange = useCallback(function (args) {
     // Sync compound state
-    setIsOpen === null || setIsOpen === void 0 || setIsOpen(args.isOpen);
+    if (args.isOpen) {
+      setPopupState === null || setPopupState === void 0 || setPopupState(willAnimate ? 'animating-open' : 'open');
+    } else {
+      setPopupState === null || setPopupState === void 0 || setPopupState(willAnimate ? 'animating-closed' : 'closed');
+    }
     consumerOnOpenChange === null || consumerOnOpenChange === void 0 || consumerOnOpenChange(args);
 
     // ── Nested popover focus restoration fallback ──
@@ -112,7 +151,7 @@ export var PopupContent = /*#__PURE__*/forwardRef(function PopupContent(_ref, re
         });
       }
     }
-  }, [setIsOpen, consumerOnOpenChange, triggerRef, role]);
+  }, [consumerOnOpenChange, triggerRef, role, setPopupState, willAnimate]);
 
   // ── Anchor positioning ──
   // Compose useAnchorPosition with Popover. The hook positions the popover
@@ -151,6 +190,8 @@ export var PopupContent = /*#__PURE__*/forwardRef(function PopupContent(_ref, re
     labelledBy: labelledBy,
     onClose: onClose !== null && onClose !== void 0 ? onClose : undefined,
     onOpenChange: handleOpenChange,
+    onEnterFinish: handleEnterFinish,
+    onExitFinish: handleExitFinish,
     testId: testId,
     children: children,
     // Standalone consumers can pass an explicit `id` - used by their own

package/dist/esm/popup/popup-context.js

@@ -1,36 +1,20 @@
-import { createContext, useContext } from 'react';
-var PopupContext = /*#__PURE__*/createContext(null);
+import { createContext } from 'react';
 
 /**
- * __Popup provider__
+ * Represents the lifecycle state of the popup.
  *
- * Provides shared popup state (placement, popoverId, triggerRef,
- * isOpen, onClose) to compound child components such as `Popup.Trigger` and
- * `Popup.Content`.
- */
-export var PopupProvider = PopupContext.Provider;
-
-/**
- * Returns the nearest `Popup` context value.
+ * - `'closed'`: fully closed, not visible, no animation playing.
+ * - `'animating-open'`: entry animation is playing (popup is opening but not yet settled).
+ * - `'open'`: fully open, browser popover is showing, entry animation complete.
+ * - `'animating-closed'`: exit animation is playing (popup is closing but still visible).
  *
- * Throws if called outside of a `<Popup>` compound component.
- */
-// eslint-disable-next-line @atlaskit/volt-strict-mode/no-multiple-exports
-export function usePopupContext() {
-  var ctx = useContext(PopupContext);
-  if (ctx === null) {
-    throw new Error('@atlaskit/top-layer: Popup compound components must be used within <Popup>.');
-  }
-  return ctx;
-}
-
-/**
- * Returns the popup context if available, or `null` when used outside `<Popup>`.
+ * Used to derive `aria-expanded` on the trigger:
+ * - `aria-expanded` is `true` in `'animating-open'`, `'open'`, and `'animating-closed'`.
  *
- * Used by `PopupContent` to support standalone usage (e.g. tooltip)
- * where values are passed as props instead of coming from a compound component.
+ * This avoids screen readers announcing the popup as closed while it is
+ * still visually present on screen during animations, and prevents consumers
+ * that conditionally show/hide trigger UI based on `aria-expanded` from hiding
+ * the trigger (and thus the popup anchor) mid-animation.
  */
-// eslint-disable-next-line @atlaskit/volt-strict-mode/no-multiple-exports
-export function useMaybePopupContext() {
-  return useContext(PopupContext);
-}
+
+export var PopupContext = /*#__PURE__*/createContext(null);

package/dist/esm/popup/popup-provider.js

@@ -0,0 +1,10 @@
+import { PopupContext } from './popup-context';
+
+/**
+ * __Popup provider__
+ *
+ * Provides shared popup state (placement, popoverId, triggerRef,
+ * isOpen, onClose) to compound child components such as `Popup.Trigger` and
+ * `Popup.Content`.
+ */
+export var PopupProvider = PopupContext.Provider;

package/dist/esm/popup/popup-trigger-function.js

@@ -1,5 +1,5 @@
 import { useCallback, useMemo } from 'react';
-import { usePopupContext } from './popup-context';
+import { usePopupContext } from './use-popup-context';
 
 /**
  * Props passed to the `TriggerFunction` render-prop child.
@@ -41,7 +41,7 @@ export function PopupTriggerFunction(_ref) {
     triggerRef = _usePopupContext.triggerRef,
     popoverRef = _usePopupContext.popoverRef,
     popoverId = _usePopupContext.popoverId,
-    isOpen = _usePopupContext.isOpen,
+    popupState = _usePopupContext.popupState,
     ariaHasPopup = _usePopupContext.ariaHasPopup;
   var ref = useCallback(function (node) {
     triggerRef.current = node;
@@ -57,14 +57,17 @@ export function PopupTriggerFunction(_ref) {
   }, [popoverRef]);
   var ariaAttributes = useMemo(function () {
     return {
-      'aria-expanded': isOpen,
+      // aria-expanded stays true throughout entry and exit animations so screen readers
+      // don't announce the popup as closed while it's still visible, and consumers
+      // relying on aria-expanded to show/hide trigger UI don't lose the anchor mid-animation.
+      'aria-expanded': popupState === 'open' || popupState === 'animating-open' || popupState === 'animating-closed',
       'aria-controls': popoverId,
       'aria-haspopup': ariaHasPopup
     };
-  }, [isOpen, popoverId, ariaHasPopup]);
+  }, [popupState, popoverId, ariaHasPopup]);
   return children({
     ref: ref,
-    isOpen: isOpen,
+    isOpen: popupState === 'open' || popupState === 'animating-open',
     popoverId: popoverId,
     toggle: toggle,
     ariaAttributes: ariaAttributes

package/dist/esm/popup/popup-trigger.js

@@ -1,6 +1,7 @@
 import React, { isValidElement, useCallback } from 'react';
 import { Slot } from '../internal/slot';
-import { usePopupContext } from './popup-context';
+import { usePopupContext } from './use-popup-context';
+
 /**
  * Wraps a single trigger element via `cloneElement`. Attaches aria
  * attributes, the toggle handler, and the anchor-name. `aria-haspopup`
@@ -18,14 +19,15 @@ export function PopupTrigger(_ref) {
     triggerRef = _usePopupContext.triggerRef,
     popoverRef = _usePopupContext.popoverRef,
     popoverId = _usePopupContext.popoverId,
-    isOpen = _usePopupContext.isOpen,
+    popupState = _usePopupContext.popupState,
     ariaHasPopup = _usePopupContext.ariaHasPopup;
   var childOnClick = /*#__PURE__*/isValidElement(children) ? children.props.onClick : undefined;
 
-  // Track latest isOpen via ref so the click handler keeps a stable
-  // identity (cloneElement relies on it).
-  var isOpenRef = React.useRef(isOpen);
-  isOpenRef.current = isOpen;
+  // Use a ref to track the latest isOpen value so the click handler
+  // does not need isOpen in its dependency array (which would recreate
+  // the handler on every open/close, breaking cloneElement identity).
+  var isOpenRef = React.useRef(popupState === 'open' || popupState === 'animating-open');
+  isOpenRef.current = popupState === 'open' || popupState === 'animating-open';
   var handleClick = useCallback(function (event) {
     var popoverEl = popoverRef.current;
     if (popoverEl) {
@@ -45,8 +47,12 @@ export function PopupTrigger(_ref) {
   }, [popoverRef, childOnClick]);
   return /*#__PURE__*/React.createElement(Slot, {
     ref: triggerRef,
-    onClick: handleClick,
-    "aria-expanded": isOpen,
+    onClick: handleClick
+    // aria-expanded stays true throughout entry and exit animations so screen readers
+    // don't announce the popup as closed while it's still visible, and consumers
+    // relying on aria-expanded to show/hide trigger UI don't lose the anchor mid-animation.
+    ,
+    "aria-expanded": popupState === 'open' || popupState === 'animating-open' || popupState === 'animating-closed',
     "aria-controls": popoverId,
     "aria-haspopup": ariaHasPopup
   }, children);

package/dist/esm/popup/popup.js

@@ -1,6 +1,6 @@
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import React, { useCallback, useId, useRef, useState } from 'react';
-import { PopupProvider } from './popup-context';
+import { PopupProvider } from './popup-provider';
 /**
  * Popup compound: trigger + popover content.
  *
@@ -35,10 +35,10 @@ export function PopupRoot(props) {
   var popoverId = "popover-".concat(sanitizedId);
   var triggerRef = useRef(null);
   var popoverRef = useRef(null);
-  var _useState = useState(false),
+  var _useState = useState('closed'),
     _useState2 = _slicedToArray(_useState, 2),
-    isOpen = _useState2[0],
-    setIsOpen = _useState2[1];
+    popupState = _useState2[0],
+    setPopupState = _useState2[1];
   // Initial seed before `Popup.Content`'s layout effect resolves the
   // real role on first paint.
   var _useState3 = useState('dialog'),
@@ -57,8 +57,8 @@ export function PopupRoot(props) {
     onClose: onClose ? handleClose : null,
     triggerRef: triggerRef,
     popoverRef: popoverRef,
-    isOpen: isOpen,
-    setIsOpen: setIsOpen,
+    popupState: popupState,
+    setPopupState: setPopupState,
     onOpenChange: onOpenChange,
     mode: mode,
     ariaHasPopup: ariaHasPopup,

package/dist/esm/popup/use-maybe-popup-context.js

@@ -0,0 +1,12 @@
+import { useContext } from 'react';
+import { PopupContext } from './popup-context';
+
+/**
+ * Returns the popup context if available, or `null` when used outside `<Popup>`.
+ *
+ * Used by `PopupContent` to support standalone usage (e.g. tooltip)
+ * where values are passed as props instead of coming from a compound component.
+ */
+export function useMaybePopupContext() {
+  return useContext(PopupContext);
+}

package/dist/esm/popup/use-popup-context.js

@@ -0,0 +1,15 @@
+import { useContext } from 'react';
+import { PopupContext } from './popup-context';
+
+/**
+ * Returns the nearest `Popup` context value.
+ *
+ * Throws if called outside of a `<Popup>` compound component.
+ */
+export function usePopupContext() {
+  var ctx = useContext(PopupContext);
+  if (ctx === null) {
+    throw new Error('@atlaskit/top-layer: Popup compound components must be used within <Popup>.');
+  }
+  return ctx;
+}

package/dist/esm/use-arrow-navigation/index.js

@@ -1 +1,2 @@
-export { useArrowNavigation, isAtCurrentMenuLevel } from './use-arrow-navigation';
+export { useArrowNavigation } from './use-arrow-navigation';
+export { isAtCurrentMenuLevel } from './is-at-current-menu-level';

package/dist/esm/use-arrow-navigation/is-at-current-menu-level.js

@@ -0,0 +1,81 @@
+var menuScope = '[role="menu"]';
+
+/**
+ * Returns true if the element belongs to the current menu level of the
+ * container, i.e. it is NOT inside a nested `role="menu"` sub-container.
+ *
+ * Uses `element.closest('[role="menu"]')` to determine the nearest menu
+ * scope. If the nearest scope is the container's own `role="menu"` element,
+ * the element belongs to this level. If it is a different (nested) menu,
+ * the element belongs to a child level and should be excluded.
+ *
+ * Supports two container patterns:
+ *
+ * **1. Container has `role="menu"` directly** (preferred, used by avatar-group):
+ *   ```
+ *   <div ref={containerRef} role="menu">
+ *     <button role="menuitem" />   ← isAtCurrentMenuLevel → true
+ *     <div role="menu">            ← nested sub-menu
+ *       <button role="menuitem" /> ← isAtCurrentMenuLevel → false
+ *     </div>
+ *   </div>
+ *   ```
+ *   Uses the simple check: `element.closest('[role="menu"]') === container`
+ *
+ * **2. Container is a wrapper without `role="menu"`** (used by dropdown-menu,
+ *   where `MenuGroup` owns `role="menu"` but does not accept a ref):
+ *   ```
+ *   <div ref={containerRef}>         ← wrapper (no role="menu")
+ *     <MenuGroup role="menu">
+ *       <button role="menuitem" />   ← isAtCurrentMenuLevel → true
+ *       <div role="menu">            ← nested sub-menu
+ *         <button role="menuitem" /> ← isAtCurrentMenuLevel → false
+ *       </div>
+ *     </MenuGroup>
+ *   </div>
+ *   ```
+ *   Falls back to walking the DOM to check that the element's closest
+ *   `role="menu"` is the container's own menu (not doubly nested).
+ *
+ * Ideally all consumers should use pattern 1 (place the ref directly on the
+ * `role="menu"` element). Pattern 2 exists because `@atlaskit/menu`'s
+ * `MenuGroup` does not currently accept a ref. If `MenuGroup` gains ref
+ * support in the future, dropdown-menu should switch to pattern 1 and the
+ * fallback path can be removed.
+ *
+ * Used both as a `TFocusableFilter` (to scope getNextFocusable etc.) and as
+ * a guard to prevent parent menu handlers from acting on events that
+ * belong to a nested menu.
+ */
+export function isAtCurrentMenuLevel(element, container) {
+  var closestMenu = element.closest(menuScope);
+
+  // Container itself has role="menu". Element belongs to this level
+  // if its closest menu is the container.
+  if (container.getAttribute('role') === 'menu') {
+    return closestMenu === container;
+  }
+
+  // Container is a wrapper without role="menu" (e.g. dropdown-menu
+  // wraps a MenuGroup). The element belongs to the top level if its
+  // closest role="menu" ancestor is a direct child of the container,
+  // i.e. there is no nested role="menu" between them.
+  if (closestMenu === null) {
+    return true;
+  }
+
+  // Walk up from the closest menu to see if it is "owned" by this
+  // container without passing through another role="menu" first.
+  var parent = closestMenu.parentElement;
+  while (parent && parent !== container) {
+    if (parent.getAttribute('role') === 'menu') {
+      // There is a parent menu between the closest menu and the
+      // container, so the element is in a nested sub-menu.
+      return false;
+    }
+    parent = parent.parentElement;
+  }
+
+  // The closest menu is directly inside the container (no nesting).
+  return parent === container;
+}

package/dist/esm/use-arrow-navigation/use-arrow-navigation.js

@@ -5,86 +5,6 @@ import { KEY_DOWN, KEY_END, KEY_HOME, KEY_TAB, KEY_UP } from '@atlaskit/ds-lib/k
 import { getFirstFocusable, getLastFocusable, getNextFocusable } from '../focus';
 var menuScope = '[role="menu"]';
 
-/**
- * Returns true if the element belongs to the current menu level of the
- * container, i.e. it is NOT inside a nested `role="menu"` sub-container.
- *
- * Uses `element.closest('[role="menu"]')` to determine the nearest menu
- * scope. If the nearest scope is the container's own `role="menu"` element,
- * the element belongs to this level. If it is a different (nested) menu,
- * the element belongs to a child level and should be excluded.
- *
- * Supports two container patterns:
- *
- * **1. Container has `role="menu"` directly** (preferred, used by avatar-group):
- *   ```
- *   <div ref={containerRef} role="menu">
- *     <button role="menuitem" />   ← isAtCurrentMenuLevel → true
- *     <div role="menu">            ← nested sub-menu
- *       <button role="menuitem" /> ← isAtCurrentMenuLevel → false
- *     </div>
- *   </div>
- *   ```
- *   Uses the simple check: `element.closest('[role="menu"]') === container`
- *
- * **2. Container is a wrapper without `role="menu"`** (used by dropdown-menu,
- *   where `MenuGroup` owns `role="menu"` but does not accept a ref):
- *   ```
- *   <div ref={containerRef}>         ← wrapper (no role="menu")
- *     <MenuGroup role="menu">
- *       <button role="menuitem" />   ← isAtCurrentMenuLevel → true
- *       <div role="menu">            ← nested sub-menu
- *         <button role="menuitem" /> ← isAtCurrentMenuLevel → false
- *       </div>
- *     </MenuGroup>
- *   </div>
- *   ```
- *   Falls back to walking the DOM to check that the element's closest
- *   `role="menu"` is the container's own menu (not doubly nested).
- *
- * Ideally all consumers should use pattern 1 (place the ref directly on the
- * `role="menu"` element). Pattern 2 exists because `@atlaskit/menu`'s
- * `MenuGroup` does not currently accept a ref. If `MenuGroup` gains ref
- * support in the future, dropdown-menu should switch to pattern 1 and the
- * fallback path can be removed.
- *
- * Used both as a `TFocusableFilter` (to scope getNextFocusable etc.) and as
- * a guard to prevent parent menu handlers from acting on events that
- * belong to a nested menu.
- */
-export function isAtCurrentMenuLevel(element, container) {
-  var closestMenu = element.closest(menuScope);
-
-  // Container itself has role="menu". Element belongs to this level
-  // if its closest menu is the container.
-  if (container.getAttribute('role') === 'menu') {
-    return closestMenu === container;
-  }
-
-  // Container is a wrapper without role="menu" (e.g. dropdown-menu
-  // wraps a MenuGroup). The element belongs to the top level if its
-  // closest role="menu" ancestor is a direct child of the container,
-  // i.e. there is no nested role="menu" between them.
-  if (closestMenu === null) {
-    return true;
-  }
-
-  // Walk up from the closest menu to see if it is "owned" by this
-  // container without passing through another role="menu" first.
-  var parent = closestMenu.parentElement;
-  while (parent && parent !== container) {
-    if (parent.getAttribute('role') === 'menu') {
-      // There is a parent menu between the closest menu and the
-      // container, so the element is in a nested sub-menu.
-      return false;
-    }
-    parent = parent.parentElement;
-  }
-
-  // The closest menu is directly inside the container (no nesting).
-  return parent === container;
-}
-
 /**
  * Args for `useArrowNavigation`.
  *
@@ -135,7 +55,6 @@ export function isAtCurrentMenuLevel(element, container) {
  * });
  * ```
  */
-// eslint-disable-next-line @atlaskit/volt-strict-mode/no-multiple-exports
 export function useArrowNavigation(_ref) {
   var containerRef = _ref.containerRef,
     onClose = _ref.onClose,