@atlaskit/top-layer 0.11.0 → 0.12.1

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

@@ -11,11 +11,12 @@ var _runtime = require("@compiled/react/runtime");
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _react = _interopRequireWildcard(require("react"));
 var _mergeRefs = _interopRequireDefault(require("@atlaskit/ds-lib/merge-refs"));
+var _reducedMotion = require("../internal/reduced-motion");
 var _roleTypes = require("../internal/role-types");
 var _useAnchorPosition = require("../internal/use-anchor-position");
 var _useWidthFromAnchor = require("../internal/use-width-from-anchor");
 var _popover = require("../popover/popover");
-var _popupContext = require("./popup-context");
+var _useMaybePopupContext = require("./use-maybe-popup-context");
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
 /**
  * Thin context wrapper that composes `Popover` + `useAnchorPosition`.
@@ -25,7 +26,7 @@ function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r
  * use `Popover` + `useAnchorPosition` directly.
  */
 var PopupContent = exports.PopupContent = /*#__PURE__*/(0, _react.forwardRef)(function PopupContent(_ref, ref) {
-  var _ref2, _ref3, _ctx$popoverRef;
+  var _ref2, _ctx$popoverRef;
   var children = _ref.children,
     role = _ref.role,
     label = _ref.label,
@@ -41,25 +42,58 @@ var PopupContent = exports.PopupContent = /*#__PURE__*/(0, _react.forwardRef)(fu
     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 = (0, _popupContext.useMaybePopupContext)();
+  var ctx = (0, _useMaybePopupContext.useMaybePopupContext)();
   var triggerRef = triggerRefProp !== null && triggerRefProp !== void 0 ? triggerRefProp : ctx === null || ctx === void 0 ? void 0 : ctx.triggerRef;
   var placement = (_ref2 = placementProp !== null && placementProp !== void 0 ? placementProp : ctx === null || ctx === void 0 ? void 0 : ctx.placement) !== null && _ref2 !== void 0 ? _ref2 : {};
   var onClose = onCloseProp !== null && onCloseProp !== void 0 ? onCloseProp : ctx === null || ctx === void 0 ? void 0 : ctx.onClose;
   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) && !(0, _reducedMotion.prefersReducedMotion)();
+  var hasMountedRef = (0, _react.useRef)(false);
+  (0, _react.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 = (0, _react.useCallback)(function () {
+    setPopupState === null || setPopupState === void 0 || setPopupState('open');
+    onEnterFinish === null || onEnterFinish === void 0 || onEnterFinish();
+  }, [setPopupState, onEnterFinish]);
+  var handleExitFinish = (0, _react.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.
 
@@ -91,7 +125,11 @@ var PopupContent = exports.PopupContent = /*#__PURE__*/(0, _react.forwardRef)(fu
   // See: notes/architecture/focus-restoration.md
   var handleOpenChange = (0, _react.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 ──
@@ -121,7 +159,7 @@ var PopupContent = exports.PopupContent = /*#__PURE__*/(0, _react.forwardRef)(fu
         });
       }
     }
-  }, [setIsOpen, consumerOnOpenChange, triggerRef, role]);
+  }, [consumerOnOpenChange, triggerRef, role, setPopupState, willAnimate]);
 
   // ── Anchor positioning ──
   // Compose useAnchorPosition with Popover. The hook positions the popover
@@ -160,6 +198,8 @@ var PopupContent = exports.PopupContent = /*#__PURE__*/(0, _react.forwardRef)(fu
     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/cjs/popup/popup-context.js

@@ -3,42 +3,23 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.PopupProvider = void 0;
-exports.useMaybePopupContext = useMaybePopupContext;
-exports.usePopupContext = usePopupContext;
+exports.PopupContext = void 0;
 var _react = require("react");
-var PopupContext = /*#__PURE__*/(0, _react.createContext)(null);
-
 /**
- * __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`.
- */
-var PopupProvider = exports.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
-function usePopupContext() {
-  var ctx = (0, _react.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
-function useMaybePopupContext() {
-  return (0, _react.useContext)(PopupContext);
-}
+
+var PopupContext = exports.PopupContext = /*#__PURE__*/(0, _react.createContext)(null);

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

@@ -0,0 +1,15 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.PopupProvider = void 0;
+var _popupContext = require("./popup-context");
+/**
+ * __Popup provider__
+ *
+ * Provides shared popup state (placement, popoverId, triggerRef,
+ * isOpen, onClose) to compound child components such as `Popup.Trigger` and
+ * `Popup.Content`.
+ */
+var PopupProvider = exports.PopupProvider = _popupContext.PopupContext.Provider;

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

@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.PopupTriggerFunction = PopupTriggerFunction;
 var _react = require("react");
-var _popupContext = require("./popup-context");
+var _usePopupContext2 = require("./use-popup-context");
 /**
  * Props passed to the `TriggerFunction` render-prop child.
  */
@@ -42,11 +42,11 @@ var _popupContext = require("./popup-context");
  */
 function PopupTriggerFunction(_ref) {
   var children = _ref.children;
-  var _usePopupContext = (0, _popupContext.usePopupContext)(),
+  var _usePopupContext = (0, _usePopupContext2.usePopupContext)(),
     triggerRef = _usePopupContext.triggerRef,
     popoverRef = _usePopupContext.popoverRef,
     popoverId = _usePopupContext.popoverId,
-    isOpen = _usePopupContext.isOpen,
+    popupState = _usePopupContext.popupState,
     ariaHasPopup = _usePopupContext.ariaHasPopup;
   var ref = (0, _react.useCallback)(function (node) {
     triggerRef.current = node;
@@ -62,14 +62,17 @@ function PopupTriggerFunction(_ref) {
   }, [popoverRef]);
   var ariaAttributes = (0, _react.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/cjs/popup/popup-trigger.js

@@ -7,7 +7,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.PopupTrigger = PopupTrigger;
 var _react = _interopRequireWildcard(require("react"));
 var _slot = require("../internal/slot");
-var _popupContext = require("./popup-context");
+var _usePopupContext2 = require("./use-popup-context");
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
 /**
  * Wraps a single trigger element via `cloneElement`. Attaches aria
@@ -22,18 +22,19 @@ function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r
  */
 function PopupTrigger(_ref) {
   var children = _ref.children;
-  var _usePopupContext = (0, _popupContext.usePopupContext)(),
+  var _usePopupContext = (0, _usePopupContext2.usePopupContext)(),
     triggerRef = _usePopupContext.triggerRef,
     popoverRef = _usePopupContext.popoverRef,
     popoverId = _usePopupContext.popoverId,
-    isOpen = _usePopupContext.isOpen,
+    popupState = _usePopupContext.popupState,
     ariaHasPopup = _usePopupContext.ariaHasPopup;
   var childOnClick = /*#__PURE__*/(0, _react.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.default.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.default.useRef(popupState === 'open' || popupState === 'animating-open');
+  isOpenRef.current = popupState === 'open' || popupState === 'animating-open';
   var handleClick = (0, _react.useCallback)(function (event) {
     var popoverEl = popoverRef.current;
     if (popoverEl) {
@@ -53,8 +54,12 @@ function PopupTrigger(_ref) {
   }, [popoverRef, childOnClick]);
   return /*#__PURE__*/_react.default.createElement(_slot.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/cjs/popup/popup.js

@@ -8,7 +8,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.PopupRoot = PopupRoot;
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _react = _interopRequireWildcard(require("react"));
-var _popupContext = require("./popup-context");
+var _popupProvider = require("./popup-provider");
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
 /**
  * Popup compound: trigger + popover content.
@@ -44,10 +44,10 @@ function PopupRoot(props) {
   var popoverId = "popover-".concat(sanitizedId);
   var triggerRef = (0, _react.useRef)(null);
   var popoverRef = (0, _react.useRef)(null);
-  var _useState = (0, _react.useState)(false),
+  var _useState = (0, _react.useState)('closed'),
     _useState2 = (0, _slicedToArray2.default)(_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 = (0, _react.useState)('dialog'),
@@ -66,8 +66,8 @@ 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,
@@ -75,7 +75,7 @@ function PopupRoot(props) {
     testId: testId,
     forceFallbackPositioning: forceFallbackPositioning
   };
-  return /*#__PURE__*/_react.default.createElement(_popupContext.PopupProvider, {
+  return /*#__PURE__*/_react.default.createElement(_popupProvider.PopupProvider, {
     value: contextValue
   }, children);
 }

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

@@ -0,0 +1,17 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useMaybePopupContext = useMaybePopupContext;
+var _react = require("react");
+var _popupContext = require("./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.
+ */
+function useMaybePopupContext() {
+  return (0, _react.useContext)(_popupContext.PopupContext);
+}

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

@@ -0,0 +1,20 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.usePopupContext = usePopupContext;
+var _react = require("react");
+var _popupContext = require("./popup-context");
+/**
+ * Returns the nearest `Popup` context value.
+ *
+ * Throws if called outside of a `<Popup>` compound component.
+ */
+function usePopupContext() {
+  var ctx = (0, _react.useContext)(_popupContext.PopupContext);
+  if (ctx === null) {
+    throw new Error('@atlaskit/top-layer: Popup compound components must be used within <Popup>.');
+  }
+  return ctx;
+}

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

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 Object.defineProperty(exports, "isAtCurrentMenuLevel", {
   enumerable: true,
   get: function get() {
-    return _useArrowNavigation.isAtCurrentMenuLevel;
+    return _isAtCurrentMenuLevel.isAtCurrentMenuLevel;
   }
 });
 Object.defineProperty(exports, "useArrowNavigation", {
@@ -15,4 +15,5 @@ Object.defineProperty(exports, "useArrowNavigation", {
     return _useArrowNavigation.useArrowNavigation;
   }
 });
-var _useArrowNavigation = require("./use-arrow-navigation");
+var _useArrowNavigation = require("./use-arrow-navigation");
+var _isAtCurrentMenuLevel = require("./is-at-current-menu-level");

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

@@ -0,0 +1,87 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.isAtCurrentMenuLevel = isAtCurrentMenuLevel;
+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.
+ */
+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/cjs/use-arrow-navigation/use-arrow-navigation.js

@@ -3,7 +3,6 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.isAtCurrentMenuLevel = isAtCurrentMenuLevel;
 exports.useArrowNavigation = useArrowNavigation;
 var _react = require("react");
 var _bindEventListener = require("bind-event-listener");
@@ -12,86 +11,6 @@ var _keycodes = require("@atlaskit/ds-lib/keycodes");
 var _focus = require("../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.
- */
-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`.
  *
@@ -142,7 +61,6 @@ function isAtCurrentMenuLevel(element, container) {
  * });
  * ```
  */
-// eslint-disable-next-line @atlaskit/volt-strict-mode/no-multiple-exports
 function useArrowNavigation(_ref) {
   var containerRef = _ref.containerRef,
     onClose = _ref.onClose,

package/dist/es2019/animations/presets.js

@@ -118,6 +118,7 @@ export function slideAndFade(options) {
       placement,
       distance
     }),
+    enterDurationMs: 350,
     exitDurationMs: 175
   };
 }
@@ -169,6 +170,7 @@ export function fade() {
   return {
     name: 'fade',
     css: FADE_CSS,
+    enterDurationMs: 350,
     exitDurationMs: 175
   };
 }
@@ -224,6 +226,7 @@ export function scaleAndFade() {
   return {
     name: 'scale-and-fade',
     css: SCALE_AND_FADE_CSS,
+    enterDurationMs: 350,
     exitDurationMs: 175
   };
 }
@@ -314,6 +317,7 @@ export function dialogSlideUpAndFade(options) {
   return {
     name: distance === 12 ? 'slide-up-and-fade' : `slide-up-and-fade-${distance}`,
     css: distance === 12 ? DIALOG_SLIDE_UP_AND_FADE_CSS : DIALOG_SLIDE_UP_AND_FADE_CSS.replace(/12px/g, `${distance}px`),
+    enterDurationMs: 350,
     exitDurationMs: 175
   };
 }
@@ -389,6 +393,7 @@ export function dialogFade() {
   return {
     name: 'fade',
     css: DIALOG_FADE_CSS,
+    enterDurationMs: 350,
     exitDurationMs: 175
   };
 }

package/dist/es2019/entry-points/use-arrow-navigation.js

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