@atlaskit/top-layer 0.12.0 → 0.12.1

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/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';

package/dist/es2019/internal/placement-to-position-area.js

@@ -0,0 +1,40 @@
+import { getPlacement } from './resolve-placement';
+
+/**
+ * Resolves placement options to CSS `position-area` syntax.
+ *
+ * The `align` field represents the *visual* alignment:
+ * - `align: 'start'` means "aligned to the trigger's start edge" (left in LTR for block axis)
+ * - `align: 'end'` means "aligned to the trigger's end edge"
+ * - `align: 'center'` means centered (single-axis position-area)
+ *
+ * CSS `position-area` uses `span-*` keywords which indicate the *expansion direction*.
+ * Visual start-alignment requires `span-{cross-axis}-end` (expand toward end = start-aligned).
+ * This function handles the inversion internally.
+ *
+ * @example
+ * placementToPositionArea({ placement: { axis: 'block', edge: 'end', align: 'center' } }) // → 'block-end'
+ * placementToPositionArea({ placement: { axis: 'block', edge: 'end', align: 'start' } }) // → 'block-end span-inline-end'
+ * placementToPositionArea({ placement: { axis: 'block', edge: 'end', align: 'end' } })   // → 'block-end span-inline-start'
+ */
+export function placementToPositionArea({
+  placement
+}) {
+  const {
+    axis,
+    edge,
+    align
+  } = getPlacement({
+    placement
+  });
+  const edgeValue = `${axis}-${edge}`;
+  if (align === 'center') {
+    return edgeValue;
+  }
+
+  // Cross-axis name: block ↔ inline
+  const crossAxis = axis === 'block' ? 'inline' : 'block';
+  // Invert align → CSS span direction: visual 'start' → span toward 'end'
+  const spanDir = align === 'start' ? 'end' : 'start';
+  return `${edgeValue} span-${crossAxis}-${spanDir}`;
+}

package/dist/es2019/internal/placement-to-try-fallbacks.js

@@ -0,0 +1,77 @@
+import { getPlacement } from './resolve-placement';
+
+/**
+ * Returns `position-try-fallbacks` value based on placement.
+ *
+ * For centered placements, includes cross-axis aligned position-area
+ * values so the browser can shift the popover along the cross-axis
+ * when the centered position would overflow the viewport edge.
+ *
+ * Fallback order for centered placements (e.g. `block-end`):
+ * 1. Same edge, start-aligned (shift for near-edge overflow)
+ * 2. Same edge, end-aligned (shift for far-edge overflow)
+ * 3. Flipped edge, centered
+ * 4. Flipped edge, start-aligned
+ * 5. Flipped edge, end-aligned
+ *
+ * For aligned placements (start/end), includes the same-edge centered
+ * position as fallbacks so the browser can try centering when the aligned
+ * position would overflow, before flipping to the opposite edge.
+ *
+ * **Why `flip-inline flip-block` (or `flip-block flip-inline`) is included:**
+ *
+ * When a popup is in a viewport corner (e.g. inline-end align-end at the
+ * top-right), flipping only the primary axis (`flip-inline`) moves the popup
+ * to the left but keeps the same cross-axis span direction (e.g. upward),
+ * which is still off-screen. The combined keyword `flip-inline flip-block`
+ * mirrors the popup diagonally. It flips BOTH the position-area AND both
+ * inline and block margins simultaneously, placing the popup at the
+ * diagonally opposite corner where there is always space.
+ *
+ * Named `position-area` entries (e.g. `inline-start span-block-end`) in
+ * `position-try-fallbacks` do NOT update margins, so only the `flip-*`
+ * tactic keywords correctly flip the gap margin along with the position.
+ */
+export function placementToTryFallbacks({
+  placement
+}) {
+  const {
+    axis,
+    edge,
+    align
+  } = getPlacement({
+    placement
+  });
+  const crossAxis = axis === 'block' ? 'inline' : 'block';
+  const flippedEdge = edge === 'start' ? 'end' : 'start';
+  const sameEdge = `${axis}-${edge}`;
+  const oppositeEdge = `${axis}-${flippedEdge}`;
+  const flipKeyword = axis === 'block' ? 'flip-block' : 'flip-inline';
+  const flipCrossKeyword = axis === 'block' ? 'flip-inline' : 'flip-block';
+
+  // Single algorithm: produce the shift list against any base alignment.
+  // For `align: 'start'` the "near" shift expands toward `end`; for
+  // `align: 'end'` it expands toward `start`; for `align: 'center'`
+  // either order is symmetric (we use end-then-start to match the
+  // historical fallback list).
+  function shifts(baseAlign, edgeKey) {
+    if (baseAlign === 'center') {
+      return [`${edgeKey} span-${crossAxis}-end`, `${edgeKey} span-${crossAxis}-start`];
+    }
+    const near = baseAlign === 'start' ? 'end' : 'start';
+    const far = baseAlign === 'start' ? 'start' : 'end';
+    return [`${edgeKey} span-${crossAxis}-${near}`, edgeKey, `${edgeKey} span-${crossAxis}-${far}`];
+  }
+  if (align !== 'center') {
+    // Aligned (start/end): try same-edge shifts, then single-axis flip,
+    // then diagonal flip for corner overflow, then opposite-edge shifts.
+    // Legacy Popper fallback ordering for e.g. bottom-start:
+    // [bottom, bottom-end, top-start, top, top-end, auto].
+    return [...shifts(align, sameEdge), flipKeyword, `${flipKeyword} ${flipCrossKeyword}`, ...shifts(align, oppositeEdge)].join(', ');
+  }
+
+  // Centered: same-edge shifts, single-axis flip, opposite-edge shifts.
+  // Diagonal flip is unnecessary because centered placements expand
+  // equally in both cross-axis directions.
+  return [...shifts('center', sameEdge), flipKeyword, ...shifts('center', oppositeEdge)].join(', ');
+}

package/dist/es2019/internal/use-anchor-position.js

@@ -18,6 +18,8 @@ import rafSchedule from 'raf-schd';
 import once from '@atlaskit/ds-lib/once';
 import { computeFallbackPosition } from './anchor-positioning-fallback';
 import { combine } from './combine';
+import { placementToPositionArea } from './placement-to-position-area';
+import { placementToTryFallbacks } from './placement-to-try-fallbacks';
 import { resolveCssLengthToPixels } from './resolve-css-length-to-pixels';
 import { getPlacement } from './resolve-placement';
 import { setStyle } from './set-style';
@@ -36,122 +38,6 @@ const NoopResizeObserver = class {
   disconnect() {}
 };
 
-/**
- * Resolves placement options to CSS `position-area` syntax.
- *
- * The `align` field represents the *visual* alignment:
- * - `align: 'start'` means "aligned to the trigger's start edge" (left in LTR for block axis)
- * - `align: 'end'` means "aligned to the trigger's end edge"
- * - `align: 'center'` means centered (single-axis position-area)
- *
- * CSS `position-area` uses `span-*` keywords which indicate the *expansion direction*.
- * Visual start-alignment requires `span-{cross-axis}-end` (expand toward end = start-aligned).
- * This function handles the inversion internally.
- *
- * @example
- * placementToPositionArea({ placement: { axis: 'block', edge: 'end', align: 'center' } }) // → 'block-end'
- * placementToPositionArea({ placement: { axis: 'block', edge: 'end', align: 'start' } }) // → 'block-end span-inline-end'
- * placementToPositionArea({ placement: { axis: 'block', edge: 'end', align: 'end' } })   // → 'block-end span-inline-start'
- */
-export function placementToPositionArea({
-  placement
-}) {
-  const {
-    axis,
-    edge,
-    align
-  } = getPlacement({
-    placement
-  });
-  const edgeValue = `${axis}-${edge}`;
-  if (align === 'center') {
-    return edgeValue;
-  }
-
-  // Cross-axis name: block ↔ inline
-  const crossAxis = axis === 'block' ? 'inline' : 'block';
-  // Invert align → CSS span direction: visual 'start' → span toward 'end'
-  const spanDir = align === 'start' ? 'end' : 'start';
-  return `${edgeValue} span-${crossAxis}-${spanDir}`;
-}
-
-/**
- * Returns `position-try-fallbacks` value based on placement.
- *
- * For centered placements, includes cross-axis aligned position-area
- * values so the browser can shift the popover along the cross-axis
- * when the centered position would overflow the viewport edge.
- *
- * Fallback order for centered placements (e.g. `block-end`):
- * 1. Same edge, start-aligned (shift for near-edge overflow)
- * 2. Same edge, end-aligned (shift for far-edge overflow)
- * 3. Flipped edge, centered
- * 4. Flipped edge, start-aligned
- * 5. Flipped edge, end-aligned
- *
- * For aligned placements (start/end), includes the same-edge centered
- * position as fallbacks so the browser can try centering when the aligned
- * position would overflow, before flipping to the opposite edge.
- *
- * **Why `flip-inline flip-block` (or `flip-block flip-inline`) is included:**
- *
- * When a popup is in a viewport corner (e.g. inline-end align-end at the
- * top-right), flipping only the primary axis (`flip-inline`) moves the popup
- * to the left but keeps the same cross-axis span direction (e.g. upward),
- * which is still off-screen. The combined keyword `flip-inline flip-block`
- * mirrors the popup diagonally. It flips BOTH the position-area AND both
- * inline and block margins simultaneously, placing the popup at the
- * diagonally opposite corner where there is always space.
- *
- * Named `position-area` entries (e.g. `inline-start span-block-end`) in
- * `position-try-fallbacks` do NOT update margins, so only the `flip-*`
- * tactic keywords correctly flip the gap margin along with the position.
- */
-// eslint-disable-next-line @atlaskit/volt-strict-mode/no-multiple-exports
-export function placementToTryFallbacks({
-  placement
-}) {
-  const {
-    axis,
-    edge,
-    align
-  } = getPlacement({
-    placement
-  });
-  const crossAxis = axis === 'block' ? 'inline' : 'block';
-  const flippedEdge = edge === 'start' ? 'end' : 'start';
-  const sameEdge = `${axis}-${edge}`;
-  const oppositeEdge = `${axis}-${flippedEdge}`;
-  const flipKeyword = axis === 'block' ? 'flip-block' : 'flip-inline';
-  const flipCrossKeyword = axis === 'block' ? 'flip-inline' : 'flip-block';
-
-  // Single algorithm: produce the shift list against any base alignment.
-  // For `align: 'start'` the "near" shift expands toward `end`; for
-  // `align: 'end'` it expands toward `start`; for `align: 'center'`
-  // either order is symmetric (we use end-then-start to match the
-  // historical fallback list).
-  function shifts(baseAlign, edgeKey) {
-    if (baseAlign === 'center') {
-      return [`${edgeKey} span-${crossAxis}-end`, `${edgeKey} span-${crossAxis}-start`];
-    }
-    const near = baseAlign === 'start' ? 'end' : 'start';
-    const far = baseAlign === 'start' ? 'start' : 'end';
-    return [`${edgeKey} span-${crossAxis}-${near}`, edgeKey, `${edgeKey} span-${crossAxis}-${far}`];
-  }
-  if (align !== 'center') {
-    // Aligned (start/end): try same-edge shifts, then single-axis flip,
-    // then diagonal flip for corner overflow, then opposite-edge shifts.
-    // Legacy Popper fallback ordering for e.g. bottom-start:
-    // [bottom, bottom-end, top-start, top, top-end, auto].
-    return [...shifts(align, sameEdge), flipKeyword, `${flipKeyword} ${flipCrossKeyword}`, ...shifts(align, oppositeEdge)].join(', ');
-  }
-
-  // Centered: same-edge shifts, single-axis flip, opposite-edge shifts.
-  // Diagonal flip is unnecessary because centered placements expand
-  // equally in both cross-axis directions.
-  return [...shifts('center', sameEdge), flipKeyword, ...shifts('center', oppositeEdge)].join(', ');
-}
-
 /**
  * Returns true when the popover is currently open. Wrapped because the
  * `:popover-open` pseudo-class is not implemented in some test environments

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`.
  *

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/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,81 @@
+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;
+}

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/esm/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';