@atlaskit/top-layer 0.12.0 → 0.12.2

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

@@ -7,19 +7,19 @@ import { usePresetStyles } from './use-preset-styles';
  *
  * Used by both `Popover` and `Dialog` to share the same animation lifecycle
  * logic. Those components own their own show/hide mechanisms (showPopover /
- * hidePopover vs showModal / close) and event handling — this hook only
+ * hidePopover vs showModal / close) and event handling - this hook only
  * manages the relationship between `isOpen` and when children are rendered.
  *
  * ## Problem
  *
  * We want to delay the unmount of children until a CSS exit transition has
  * finished playing. If we unmount children the moment `isOpen` becomes
- * `false`, the exit animation is never visible — the content just disappears.
+ * `false`, the exit animation is never visible - the content just disappears.
  *
  * ## How it works
  *
  * `showChildren` tracks whether the consumer's children should be in the DOM.
- * It does not mirror `isOpen` exactly — it intentionally lags behind during
+ * It does not mirror `isOpen` exactly - it intentionally lags behind during
  * exit animations:
  *
  * ```
@@ -56,12 +56,12 @@ export function useAnimatedVisibility({
   // or the user has enabled the "prefers reduced motion" OS setting.
   const willAnimate = Boolean(animate) && !prefersReducedMotion();
 
-  // ── showChildren state ──
+  // showChildren state
   //
   // This is the core of the hook. `showChildren` controls whether the
   // consumer's children are in the DOM. The two `if` blocks below are
   // intentionally written as synchronous state updates during render
-  // (React supports this pattern — setState during render is treated as
+  // (React supports this pattern - setState during render is treated as
   // a synchronous re-render before the browser paints).
   //
   // Mount path:  isOpen went true but showChildren is still false → mount.
@@ -85,7 +85,7 @@ export function useAnimatedVisibility({
   const onExitFinishRef = useRef(onExitFinish);
   onExitFinishRef.current = onExitFinish;
 
-  // ── Animated entry effect ──
+  // Animated entry effect
   //
   // Fires `onEnterFinish` after the entry transition completes.
   // When there is no animation, fires it immediately via a separate effect.
@@ -134,7 +134,7 @@ export function useAnimatedVisibility({
     };
   }, [isOpen, showChildren, willAnimate, preset === null || preset === void 0 ? void 0 : preset.enterDurationMs, elementRef]);
 
-  // ── Non-animated entry callback ──
+  // 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.
@@ -148,7 +148,7 @@ export function useAnimatedVisibility({
     }
   }, [isOpen, willAnimate]);
 
-  // ── Animated exit effect ──
+  // Animated exit effect
   //
   // Runs when all three conditions are true:
   //   • `isOpen` is false  (consumer wants to close)
@@ -211,10 +211,10 @@ export function useAnimatedVisibility({
     };
   }, [isOpen, showChildren, willAnimate, preset === null || preset === void 0 ? void 0 : preset.exitDurationMs, elementRef]);
 
-  // ── Non-animated exit callback ──
+  // Non-animated exit callback
   //
   // When there is no animation, children unmount synchronously (handled
-  // by the `if` block above). But `onExitFinish` still needs to fire —
+  // by the `if` block above). But `onExitFinish` still needs to fire -
   // we do that in a follow-up effect so the consumer can react to it.
   //
   // Uses a previous-value ref (`wasOpenRef`) to detect the exact

package/dist/es2019/internal/use-animation-preset.js

@@ -3,7 +3,7 @@ import { ensurePresetStyles } from './ensure-preset-styles';
 /**
  * Normalizes the `animate` prop to a preset (or null) and ensures its CSS
  * is injected once into document.head. Used by PopupContent, Popover, and
- * DialogContent so they don't duplicate this logic.
+ * DialogContent so they do not duplicate this logic.
  */
 export function useAnimationPreset(animate) {
   const preset = animate != null && animate !== false ? animate : null;

package/dist/es2019/internal/use-preset-styles.js

@@ -4,7 +4,7 @@ import { ensurePresetStyles } from './ensure-preset-styles';
  * Normalizes a preset prop to a value (or null) and ensures its CSS
  * is injected once into `document.head`.
  *
- * Works with any preset that has `{ css, name }` — animation presets
+ * Works with any preset that has `{ css, name }` - animation presets
  * (TAnimationPreset) satisfies this shape.
  */
 export function usePresetStyles({

package/dist/es2019/internal/use-width-from-anchor.js

@@ -4,8 +4,8 @@ import { setStyle } from './set-style';
 /**
  * Sets the width of a popover element relative to its anchor element.
  *
- * - `'match-anchor'` → `width: anchor-size(width)` — popover matches anchor width exactly.
- * - `'min-anchor'`   → `min-width: anchor-size(width)` — popover is at least as wide as anchor,
+ * - `'match-anchor'` → `width: anchor-size(width)` - popover matches anchor width exactly.
+ * - `'min-anchor'`   → `min-width: anchor-size(width)` - popover is at least as wide as anchor,
  *   but can grow wider.
  * - `'none'`         → no explicit width is set (default behaviour)
  *
@@ -31,7 +31,7 @@ export function useWidthFromAnchor({
     const supportsAnchorSize = typeof CSS !== 'undefined' && typeof CSS.supports === 'function' && CSS.supports('width', 'anchor-size(width)');
     if (mode === 'match-anchor') {
       // Set an exact width matching the anchor.
-      // `min-inline-size` is intentionally NOT set here — it would override the
+      // `min-inline-size` is intentionally NOT set here - it would override the
       // explicit width constraint, allowing the popover to grow past the anchor's width.
       if (supportsAnchorSize) {
         return setStyle({
@@ -87,7 +87,7 @@ export function useWidthFromAnchor({
         });
       }
 
-      // No anchor available in JS fallback — still apply min-inline-size.
+      // No anchor available in JS fallback - still apply min-inline-size.
       return setStyle({
         el: node,
         styles: [minInlineSizeStyle]

package/dist/es2019/popover/create-close-event.js

@@ -2,7 +2,7 @@
  * Creates a synthetic DOM event from a `TPopoverCloseReason`.
  *
  * Useful when bridging the Popover primitive's `onClose({ reason })` callback
- * to a legacy API that expects a native DOM event — for example,
+ * to a legacy API that expects a native DOM event - for example,
  * `@atlaskit/inline-dialog`'s `onClose(event)` contract.
  *
  * - `'escape'` → `KeyboardEvent('keydown', { key: 'Escape' })`

package/dist/es2019/popover/popover.js

@@ -45,7 +45,7 @@ const POPUP_ROLES = new Set(['menu', 'listbox', 'dialog', 'alertdialog', 'tree',
  * Unopinionated top-layer primitive.
  *
  * Manages only visibility (isOpen) and animation (animate). Has no knowledge
- * of positioning — compose with `useAnchorPosition` for anchor positioning
+ * of positioning - compose with `useAnchorPosition` for anchor positioning
  * and optionally `useWidthFromAnchor` for setting the width of a popover element
  * relative to its anchor trigger.
  *
@@ -96,7 +96,7 @@ export const Popover = /*#__PURE__*/forwardRef(function Popover({
     onExitFinish
   });
 
-  // ── Focus management ──
+  // Focus management
   // Initial focus: on open, moves focus into the popover (role-dependent).
   // Focus wrap: Tab/Shift+Tab cycle within the popover for dialog roles.
   // Focus restoration: handled natively by the Popover API. The browser
@@ -112,7 +112,7 @@ export const Popover = /*#__PURE__*/forwardRef(function Popover({
     role
   });
 
-  // ── Open layer observer registration ──
+  // Open layer observer registration
   // Notifies the open layer observer so app-coordination features
   // (closeLayers(), open-count subscriptions) work with top-layer popovers.
   //

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

@@ -8,7 +8,8 @@ import { roleToAriaHasPopup, shouldFocusIntoPopover } from '../internal/role-typ
 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`.
  *
@@ -88,7 +89,7 @@ export const PopupContent = /*#__PURE__*/forwardRef(function PopupContent({
   // Note: onOpenChange composition is handled by handleOpenChange below,
   // which also adds nested-popover focus restoration.
 
-  // ── Sync aria-haspopup on the trigger with the content's role ──
+  // Sync aria-haspopup on the trigger with the content's role
   const setAriaHasPopup = ctx === null || ctx === void 0 ? void 0 : ctx.setAriaHasPopup;
   useLayoutEffect(() => {
     setAriaHasPopup === null || setAriaHasPopup === void 0 ? void 0 : setAriaHasPopup(roleToAriaHasPopup({
@@ -96,7 +97,7 @@ export const PopupContent = /*#__PURE__*/forwardRef(function PopupContent({
     }));
   }, [role, setAriaHasPopup]);
 
-  // ── Focus restoration ──
+  // Focus restoration
   // The native Popover API handles focus restoration automatically for
   // popover="auto" and popover="hint":
   //   - Escape → restores focus to the previously focused element (the trigger)
@@ -123,7 +124,7 @@ export const PopupContent = /*#__PURE__*/forwardRef(function PopupContent({
     }
     consumerOnOpenChange === null || consumerOnOpenChange === void 0 ? void 0 : consumerOnOpenChange(args);
 
-    // ── Nested popover focus restoration fallback ──
+    // Nested popover focus restoration fallback
     // The browser only captures `previouslyFocusedElement` for the
     // outermost popover="auto" in the stack. Inner (nested) popovers
     // have shouldRestoreFocus=false, so the browser will not restore
@@ -152,7 +153,7 @@ export const PopupContent = /*#__PURE__*/forwardRef(function PopupContent({
     }
   }, [consumerOnOpenChange, triggerRef, role, setPopupState, willAnimate]);
 
-  // ── Anchor positioning ──
+  // Anchor positioning
   // Compose useAnchorPosition with Popover. The hook positions the popover
   // relative to the trigger element via CSS Anchor Positioning (with JS fallback).
   // Use ctx.popoverRef when inside the compound (so the trigger can also

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

@@ -1,4 +1,4 @@
-import { createContext, useContext } from 'react';
+import { createContext } from 'react';
 
 /**
  * Represents the lifecycle state of the popup.
@@ -17,38 +17,4 @@ import { createContext, useContext } from 'react';
  * the trigger (and thus the popup anchor) mid-animation.
  */
 
-const PopupContext = /*#__PURE__*/createContext(null);
-
-/**
- * __Popup provider__
- *
- * Provides shared popup state (placement, popoverId, triggerRef,
- * isOpen, onClose) to compound child components such as `Popup.Trigger` and
- * `Popup.Content`.
- */
-export const PopupProvider = PopupContext.Provider;
-
-/**
- * Returns the nearest `Popup` context value.
- *
- * Throws if called outside of a `<Popup>` compound component.
- */
-// eslint-disable-next-line @atlaskit/volt-strict-mode/no-multiple-exports
-export function usePopupContext() {
-  const 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 by `PopupContent` to support standalone usage (e.g. tooltip)
- * where values are passed as props instead of coming from a compound component.
- */
-// eslint-disable-next-line @atlaskit/volt-strict-mode/no-multiple-exports
-export function useMaybePopupContext() {
-  return useContext(PopupContext);
-}
+export const PopupContext = /*#__PURE__*/createContext(null);

package/dist/es2019/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 const PopupProvider = PopupContext.Provider;

package/dist/es2019/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.

package/dist/es2019/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`

package/dist/es2019/popup/popup.js

@@ -1,5 +1,5 @@
 import React, { useCallback, useId, useRef, useState } from 'react';
-import { PopupProvider } from './popup-context';
+import { PopupProvider } from './popup-provider';
 /**
  * Popup compound: trigger + popover content.
  *

package/dist/es2019/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/es2019/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() {
+  const ctx = useContext(PopupContext);
+  if (ctx === null) {
+    throw new Error('@atlaskit/top-layer: Popup compound components must be used within <Popup>.');
+  }
+  return ctx;
+}

package/dist/es2019/testing/polyfill.js

@@ -107,7 +107,7 @@ function createToggleScheduler() {
       newState
     });
 
-    // Task queue (setTimeout) — browser fires toggle after microtasks drain, not during
+    // Task queue (setTimeout) - browser fires toggle after microtasks drain, not during
     setTimeout(() => {
       const entry = pending.get(element);
       if (!entry) {
@@ -178,7 +178,7 @@ function createDialogToggleScheduler() {
   };
 }
 
-// ─── Popover API ────────────────────────────────────────────────────────────
+// Popover API
 // Spec: https://html.spec.whatwg.org/multipage/popover.html
 
 // `popover` attribute valid values. Empty / "auto" -> "auto"; unknown -> "manual".
@@ -555,7 +555,7 @@ if (typeof HTMLElement !== 'undefined') {
       if (isPopoverOpen({
         element: this
       })) {
-        return; // already showing — no-op
+        return; // already showing - no-op
       }
 
       // sync, cancelable on show only
@@ -731,7 +731,7 @@ if (typeof HTMLElement !== 'undefined') {
   }
 }
 
-// ─── HTMLDialogElement ──────────────────────────────────────────────────────
+// HTMLDialogElement
 // Spec: https://html.spec.whatwg.org/multipage/interactive-elements.html#the-dialog-element
 
 if (typeof HTMLDialogElement !== 'undefined') {
@@ -746,7 +746,7 @@ if (typeof HTMLDialogElement !== 'undefined') {
       }
       if (this.hasAttribute('open')) {
         if (this._isModal) {
-          return; // already modal — no-op
+          return; // already modal - no-op
         }
         throw new DOMException(`Failed to execute 'showModal' on 'HTMLDialogElement': ${describeElement({
           element: this
@@ -770,7 +770,7 @@ if (typeof HTMLDialogElement !== 'undefined') {
   }
   if (typeof proto.show !== 'function') {
     proto.show = function show() {
-      // Browser does not throw for disconnected elements on show — just no-op
+      // Browser does not throw for disconnected elements on show - just no-op
       if (!this.isConnected || this.hasAttribute('open')) {
         return;
       }
@@ -793,10 +793,10 @@ if (typeof HTMLDialogElement !== 'undefined') {
   if (typeof proto.close !== 'function') {
     proto.close = function close(returnValue) {
       if (!this.hasAttribute('open')) {
-        return; // already closed — no-op
+        return; // already closed - no-op
       }
 
-      // Sync beforetoggle (not cancelable) — matches browser behavior
+      // Sync beforetoggle (not cancelable) - matches browser behavior
       fireToggleEvent({
         element: this,
         type: 'beforetoggle',

package/dist/es2019/testing/to-be-visible.js

@@ -5,13 +5,13 @@
  *
  * jest-dom's `toBeVisible()` does not know about the Popover API. In real
  * browsers the UA stylesheet hides `[popover]` with `display: none`, but
- * jsdom has no such stylesheet — so closed popovers incorrectly appear visible.
+ * jsdom has no such stylesheet - so closed popovers incorrectly appear visible.
  *
  * Raw jest-dom results in jsdom:
  *
- *   closed popover / child  → true  (WRONG — should be false)
+ *   closed popover / child  → true  (WRONG - should be false)
  *   open popover / child    → true  (correct)
- *   closed dialog / child   → false (correct — jsdom natively hides <dialog>)
+ *   closed dialog / child   → false (correct - jsdom natively hides <dialog>)
  *   open dialog / child     → true  (correct)
  *
  * We correct both false positives and false negatives:
@@ -62,7 +62,7 @@ expect.extend({
     const originalResult = originalToBeVisible.call(this, element);
     const topLayerState = nearestTopLayerState(element);
     if (originalResult.pass) {
-      // Original says visible — override if nearest top-layer host is closed.
+      // Original says visible - override if nearest top-layer host is closed.
       if (topLayerState === 'closed') {
         return {
           pass: false,
@@ -72,7 +72,7 @@ expect.extend({
       return originalResult;
     }
 
-    // Original says not visible — override if nearest top-layer host is open.
+    // Original says not visible - override if nearest top-layer host is open.
     // jsdom may hide [popover] elements even when they are logically open.
     if (topLayerState === 'open') {
       return {

package/dist/es2019/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/es2019/use-arrow-navigation/is-at-current-menu-level.js

@@ -0,0 +1,88 @@
+const menuScope = '[role="menu"]';
+
+/**
+ * Recursively walks from `node` toward `container`, returning `true` when
+ * `container` is reached without crossing another `role="menu"` ancestor.
+ *
+ * Used by `isAtCurrentMenuLevel` (pattern 2) to determine if the
+ * `closestMenu` is owned by the wrapper container directly. Recursion
+ * avoids a mutable `let parent` walk and keeps the function body linear.
+ */
+function reachesContainerWithoutNestedMenu(node, container) {
+  if (!node || node === container) {
+    return node === container;
+  }
+  if (node.getAttribute('role') === 'menu') {
+    return false;
+  }
+  return reachesContainerWithoutNestedMenu(node.parentElement, container);
+}
+
+/**
+ * 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) {
+  const 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.
+  return reachesContainerWithoutNestedMenu(closestMenu.parentElement, container);
+}

package/dist/es2019/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';
 const 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) {
-  const 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.
-  let 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({
   containerRef,
   onClose,

package/dist/es2019/use-simple-light-dismiss/index.js

@@ -9,7 +9,7 @@ import { bind } from 'bind-event-listener';
  * **No stacking awareness:** This hook does not track a popover stack.
  * If multiple manual popovers are open and all use this hook, a single
  * Escape press or outside click will dismiss **all of them simultaneously**.
- * This is by design — the hook is intentionally simple for cases where
+ * This is by design - the hook is intentionally simple for cases where
  * only one manual popover is open at a time.
  *
  * For stacked/nested popovers that should dismiss one-at-a-time, use
@@ -47,7 +47,7 @@ export function useSimpleLightDismiss({
     // (trigger onClick → setIsOpen(true) → React render → useEffect).
     // By the time this effect runs, the opening click has finished
     // bubbling. A capture-phase listener added now cannot retroactively
-    // fire for that event — it only fires for *future* clicks.
+    // fire for that event - it only fires for *future* clicks.
     //
     // This avoids the need for timestamp guards or deferred binding.
     // eslint-disable-next-line @atlaskit/platform/no-direct-document-usage -- binding to document for light dismiss
@@ -59,7 +59,7 @@ export function useSimpleLightDismiss({
           return;
         }
 
-        // If the click target is inside the popover, don't dismiss.
+        // If the click target is inside the popover, do not dismiss.
         if (event.target instanceof Node && el.contains(event.target)) {
           return;
         }