@atlaskit/dropdown-menu 16.10.0 → 16.10.2

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # @atlaskit/dropdown-menu
 
+## 16.10.2
+
+### Patch Changes
+
+- [`021a645c6f39a`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/021a645c6f39a) -
+  Update internal top-layer adopter code paths behind `platform-dst-top-layer`.
+- Updated dependencies
+
+## 16.10.1
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 16.10.0
 
 ### Minor Changes

package/dist/cjs/dropdown-menu-top-layer.js

@@ -25,8 +25,12 @@ var _chevronDown = _interopRequireDefault(require("@atlaskit/icon/core/chevron-d
 var _menuGroup = _interopRequireDefault(require("@atlaskit/menu/menu-group"));
 var _spinner = _interopRequireDefault(require("@atlaskit/spinner"));
 var _animations = require("@atlaskit/top-layer/animations");
+var _getAriaForTrigger = require("@atlaskit/top-layer/get-aria-for-trigger");
 var _placementMap = require("@atlaskit/top-layer/placement-map");
-var _popup = require("@atlaskit/top-layer/popup");
+var _popover = require("@atlaskit/top-layer/popover");
+var _useAnchorPosition = require("@atlaskit/top-layer/use-anchor-position");
+var _usePopoverId = require("@atlaskit/top-layer/use-popover-id");
+var _useWidthFromAnchor = require("@atlaskit/top-layer/use-width-from-anchor");
 var _selectionStore = _interopRequireDefault(require("./internal/context/selection-store"));
 var _useArrowNavigation = require("./internal/use-arrow-navigation");
 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); }
@@ -42,9 +46,9 @@ var animation = (0, _animations.slideAndFade)();
 /**
  * Event types produced by trigger interactions.
  *
- * - `React.MouseEvent<Element>` — from the trigger's `onClick` handler
- * - `React.KeyboardEvent<Element>` — from the trigger's `onClick` when activated via keyboard
- * - `KeyboardEvent` — native event from the ArrowDown `bind(window, ...)` listener
+ * - `React.MouseEvent<Element>`: from the trigger's `onClick` handler
+ * - `React.KeyboardEvent<Element>`: from the trigger's `onClick` when activated via keyboard
+ * - `KeyboardEvent`: native event from the ArrowDown `bind(window, ...)` listener
  */
 
 /**
@@ -89,9 +93,9 @@ function LoadingIndicator(_ref) {
  * Top-layer implementation of DropdownMenu.
  *
  * Replaces the legacy `@atlaskit/popup` + `@atlaskit/portal` + `@atlaskit/layering` pipeline
- * with native Popover API via `@atlaskit/top-layer`.
+ * with the native Popover API via `@atlaskit/top-layer`.
  *
- * What's no longer needed:
+ * What is no longer needed:
  * - Portal: top layer handles stacking natively
  * - FocusLock / react-focus-lock: popover=auto provides light dismiss
  * - z-index: top layer is always above everything
@@ -101,7 +105,7 @@ function LoadingIndicator(_ref) {
  * - Fallback placements / Popper: CSS Anchor Positioning handles positioning
  */
 function DropdownMenuTopLayer(_ref2) {
-  var _ref6;
+  var _ref5;
   var _ref2$autoFocus = _ref2.autoFocus,
     autoFocus = _ref2$autoFocus === void 0 ? false : _ref2$autoFocus,
     children = _ref2.children,
@@ -131,26 +135,38 @@ function DropdownMenuTopLayer(_ref2) {
     isLocalOpen = _useControlledState2[0],
     setLocalIsOpen = _useControlledState2[1];
   var triggerRef = (0, _react.useRef)(null);
+  var popoverRef = (0, _react.useRef)(null);
   var menuRef = (0, _react.useRef)(null);
   var _useState = (0, _react.useState)(false),
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
     isTriggeredUsingKeyboard = _useState2[0],
     setTriggeredUsingKeyboard = _useState2[1];
+  var popoverId = (0, _usePopoverId.usePopoverId)();
   var topLayerPlacement = (0, _react.useMemo)(function () {
     return (0, _placementMap.fromLegacyPlacement)({
       legacy: placement
     });
   }, [placement]);
+  (0, _useAnchorPosition.useAnchorPosition)({
+    anchorRef: triggerRef,
+    popoverRef: popoverRef,
+    placement: topLayerPlacement
+  });
+  (0, _useWidthFromAnchor.useWidthFromAnchor)({
+    mode: shouldFitContainer ? 'min-anchor' : 'none',
+    popoverRef: popoverRef,
+    anchorRef: triggerRef
+  });
 
-  // ── Close handling ──
+  // Close handling.
   // Focus restoration is handled natively by the Popover API:
-  //   - Escape → browser restores focus to the trigger automatically
-  //   - Click-outside → browser does NOT restore (correct behavior)
+  //   - Escape: browser restores focus to the trigger automatically
+  //   - Click-outside: browser does NOT restore (correct behavior)
   //
   // The only custom focus handling needed is `returnFocusRef`: when provided,
   // we redirect focus to a different element than the trigger. We do this
   // in the onClose callback via rAF, which runs after the browser's native
-  // restoration — effectively overriding it.
+  // restoration, effectively overriding it.
   var handleOnClose = (0, _react.useCallback)(function (_ref3) {
     var _reason = _ref3.reason;
     if (returnFocusRef) {
@@ -166,7 +182,7 @@ function DropdownMenuTopLayer(_ref2) {
     });
   }, [onOpenChange, returnFocusRef, setLocalIsOpen]);
 
-  // ── Trigger click handling ──
+  // Trigger click handling.
   var handleTriggerClicked = (0, _react.useCallback)(function (event) {
     var newValue = !isLocalOpen;
     setTriggeredUsingKeyboard(isKeyboardTriggered(event));
@@ -193,7 +209,7 @@ function DropdownMenuTopLayer(_ref2) {
       return _noop.default;
     }
 
-    // Don't open on ArrowDown if this trigger is inside a parent menu.
+    // Do not open on ArrowDown if this trigger is inside a parent menu.
     // Nested menus should only be opened via ArrowRight or Enter.
     var isNestedTrigger = ((_triggerRef$current = triggerRef.current) === null || _triggerRef$current === void 0 ? void 0 : _triggerRef$current.closest('[role="menu"]')) != null;
     return (0, _bindEventListener.bind)(window, {
@@ -209,7 +225,7 @@ function DropdownMenuTopLayer(_ref2) {
     });
   }, [isFocused, isLocalOpen, handleTriggerClicked]);
 
-  // ── Arrow navigation ──
+  // Arrow navigation.
   // useArrowNavigation handles ArrowUp/Down, Home/End, and Tab-to-close
   // by querying focusable elements in the menu DOM container.
   var handleArrowClose = (0, _react.useCallback)(function () {
@@ -235,7 +251,7 @@ function DropdownMenuTopLayer(_ref2) {
     filter: _useArrowNavigation.isAtCurrentMenuLevel
   });
 
-  // ── Auto-focus first item on open ──
+  // Auto-focus first item on open.
   (0, _react.useEffect)(function () {
     if (!isLocalOpen || !isTriggeredUsingKeyboard && !autoFocus) {
       return;
@@ -252,7 +268,7 @@ function DropdownMenuTopLayer(_ref2) {
     });
   }, [isLocalOpen, isTriggeredUsingKeyboard, autoFocus]);
 
-  // ── Close on menu item click ──
+  // Close on menu item click.
   // Close when a regular menuitem is clicked, but not checkboxes/radios
   // and not nested triggers (items with aria-haspopup).
   var handleMenuClick = (0, _react.useCallback)(function (e) {
@@ -263,7 +279,7 @@ function DropdownMenuTopLayer(_ref2) {
       return;
     }
     var isCheckboxOrRadio = menuItem.getAttribute('role') === 'menuitemcheckbox' || menuItem.getAttribute('role') === 'menuitemradio';
-    // Don't close the menu when clicking a nested trigger (aria-haspopup).
+    // Do not close the menu when clicking a nested trigger (aria-haspopup).
     // The nested dropdown will handle its own open/close.
     var isNestedTrigger = menuItem.hasAttribute('aria-haspopup');
     if (!isCheckboxOrRadio && !isNestedTrigger) {
@@ -274,27 +290,24 @@ function DropdownMenuTopLayer(_ref2) {
       });
     }
   }, [setLocalIsOpen, onOpenChange]);
-  return /*#__PURE__*/React.createElement(_selectionStore.default, null, /*#__PURE__*/React.createElement(_popup.Popup, {
-    placement: topLayerPlacement,
-    onClose: handleOnClose
-  }, /*#__PURE__*/React.createElement(_popup.Popup.TriggerFunction, null, function (_ref5) {
-    var ref = _ref5.ref,
-      _toggle = _ref5.toggle,
-      ariaAttributes = _ref5.ariaAttributes;
-    var combinedRef = (0, _mergeRefs.default)([ref, triggerRef]);
+  var ariaAttributes = (0, _getAriaForTrigger.getAriaForTrigger)({
+    role: 'menu',
+    isOpen: isLocalOpen,
+    popoverId: popoverId
+  });
 
-    // FUDGE(top-layer-api): cast `ariaAttributes` to the narrow shape that adopter
-    // public types expect. `@atlaskit/top-layer` types `aria-haspopup` as the wider
-    // WAI-ARIA union (boolean | 'dialog' | 'menu' | 'listbox' | 'tree' | 'grid'),
-    // but the public `CustomTriggerProps` (extending `@atlaskit/popup` `TriggerProps`)
-    // is intentionally kept narrow (boolean | 'dialog') because the top-layer API
-    // surface is not yet settled. The runtime value is unchanged; only the
-    // TypeScript-visible type is narrowed at this boundary.
-    // REMOVE WHEN: the top-layer public API is committed (see
-    // packages/design-system/top-layer/notes/decisions/migration-roadmap.md "Open API
-    // decisions deferred to a follow-up PR") and a follow-up `minor` PR widens
-    // `TriggerProps['aria-haspopup']` on `@atlaskit/popup` to match.
-    var narrowAriaAttributes = ariaAttributes;
+  // FUDGE(top-layer-api): cast `aria-haspopup` to the narrow shape that adopter
+  // public types expect. `@atlaskit/top-layer` types `aria-haspopup` as the wider
+  // WAI-ARIA union, but the public `CustomTriggerProps` (extending `@atlaskit/popup`
+  // `TriggerProps`) is intentionally kept narrow (`boolean | 'dialog'`) because the
+  // top-layer API surface is not yet settled. The runtime value is unchanged; only
+  // the TypeScript-visible type is narrowed at this boundary.
+  var narrowAriaAttributes = ariaAttributes;
+  var renderTrigger = function renderTrigger() {
+    var setRef = function setRef(node) {
+      triggerRef.current = node;
+    };
+    var combinedRef = (0, _mergeRefs.default)([setRef]);
     if (typeof trigger === 'function') {
       return trigger(_objectSpread(_objectSpread(_objectSpread({}, narrowAriaAttributes), bindFocus), {}, {
         triggerRef: combinedRef,
@@ -317,12 +330,16 @@ function DropdownMenuTopLayer(_ref2) {
       "aria-label": label,
       interactionName: interactionName
     }), trigger);
-  }), /*#__PURE__*/React.createElement(_popup.Popup.Content, {
+  };
+  return /*#__PURE__*/React.createElement(_selectionStore.default, null, renderTrigger(), /*#__PURE__*/React.createElement(_popover.Popover, {
+    ref: popoverRef,
+    id: popoverId,
     role: "menu",
-    label: (_ref6 = menuLabel !== null && menuLabel !== void 0 ? menuLabel : label) !== null && _ref6 !== void 0 ? _ref6 : typeof trigger === 'string' ? trigger : 'Menu',
+    label: (_ref5 = menuLabel !== null && menuLabel !== void 0 ? menuLabel : label) !== null && _ref5 !== void 0 ? _ref5 : typeof trigger === 'string' ? trigger : 'Menu',
     isOpen: isLocalOpen,
+    onClose: handleOnClose,
     animate: animation,
-    widthFromAnchor: shouldFitContainer ? 'min-anchor' : 'none',
+    placement: topLayerPlacement,
     testId: testId && "".concat(testId, "--content")
   }, /*#__PURE__*/React.createElement("div", {
     ref: menuRef,
@@ -339,6 +356,6 @@ function DropdownMenuTopLayer(_ref2) {
   }, isLoading ? /*#__PURE__*/React.createElement(LoadingIndicator, {
     statusLabel: statusLabel,
     testId: testId && "".concat(testId, "--menu-wrapper--loading-indicator")
-  }) : children)))));
+  }) : children))));
 }
 var _default = exports.default = DropdownMenuTopLayer;

package/dist/es2019/dropdown-menu-top-layer.js

@@ -15,8 +15,12 @@ import ExpandIcon from '@atlaskit/icon/core/chevron-down';
 import MenuGroup from '@atlaskit/menu/menu-group';
 import Spinner from '@atlaskit/spinner';
 import { slideAndFade } from '@atlaskit/top-layer/animations';
+import { getAriaForTrigger } from '@atlaskit/top-layer/get-aria-for-trigger';
 import { fromLegacyPlacement } from '@atlaskit/top-layer/placement-map';
-import { Popup } from '@atlaskit/top-layer/popup';
+import { Popover } from '@atlaskit/top-layer/popover';
+import { useAnchorPosition } from '@atlaskit/top-layer/use-anchor-position';
+import { usePopoverId } from '@atlaskit/top-layer/use-popover-id';
+import { useWidthFromAnchor } from '@atlaskit/top-layer/use-width-from-anchor';
 import SelectionStore from './internal/context/selection-store';
 import { getFirstFocusable, isAtCurrentMenuLevel, useArrowNavigation } from './internal/use-arrow-navigation';
 const MAX_HEIGHT = `calc(100vh - 16px)`;
@@ -29,9 +33,9 @@ const animation = slideAndFade();
 /**
  * Event types produced by trigger interactions.
  *
- * - `React.MouseEvent<Element>` — from the trigger's `onClick` handler
- * - `React.KeyboardEvent<Element>` — from the trigger's `onClick` when activated via keyboard
- * - `KeyboardEvent` — native event from the ArrowDown `bind(window, ...)` listener
+ * - `React.MouseEvent<Element>`: from the trigger's `onClick` handler
+ * - `React.KeyboardEvent<Element>`: from the trigger's `onClick` when activated via keyboard
+ * - `KeyboardEvent`: native event from the ArrowDown `bind(window, ...)` listener
  */
 
 /**
@@ -76,9 +80,9 @@ function LoadingIndicator({
  * Top-layer implementation of DropdownMenu.
  *
  * Replaces the legacy `@atlaskit/popup` + `@atlaskit/portal` + `@atlaskit/layering` pipeline
- * with native Popover API via `@atlaskit/top-layer`.
+ * with the native Popover API via `@atlaskit/top-layer`.
  *
- * What's no longer needed:
+ * What is no longer needed:
  * - Portal: top layer handles stacking natively
  * - FocusLock / react-focus-lock: popover=auto provides light dismiss
  * - z-index: top layer is always above everything
@@ -108,21 +112,33 @@ function DropdownMenuTopLayer({
   var _ref;
   const [isLocalOpen, setLocalIsOpen] = useControlledState(isOpenProp, () => defaultOpen);
   const triggerRef = useRef(null);
+  const popoverRef = useRef(null);
   const menuRef = useRef(null);
   const [isTriggeredUsingKeyboard, setTriggeredUsingKeyboard] = useState(false);
+  const popoverId = usePopoverId();
   const topLayerPlacement = useMemo(() => fromLegacyPlacement({
     legacy: placement
   }), [placement]);
+  useAnchorPosition({
+    anchorRef: triggerRef,
+    popoverRef,
+    placement: topLayerPlacement
+  });
+  useWidthFromAnchor({
+    mode: shouldFitContainer ? 'min-anchor' : 'none',
+    popoverRef,
+    anchorRef: triggerRef
+  });
 
-  // ── Close handling ──
+  // Close handling.
   // Focus restoration is handled natively by the Popover API:
-  //   - Escape → browser restores focus to the trigger automatically
-  //   - Click-outside → browser does NOT restore (correct behavior)
+  //   - Escape: browser restores focus to the trigger automatically
+  //   - Click-outside: browser does NOT restore (correct behavior)
   //
   // The only custom focus handling needed is `returnFocusRef`: when provided,
   // we redirect focus to a different element than the trigger. We do this
   // in the onClose callback via rAF, which runs after the browser's native
-  // restoration — effectively overriding it.
+  // restoration, effectively overriding it.
   const handleOnClose = useCallback(({
     reason: _reason
   }) => {
@@ -139,7 +155,7 @@ function DropdownMenuTopLayer({
     });
   }, [onOpenChange, returnFocusRef, setLocalIsOpen]);
 
-  // ── Trigger click handling ──
+  // Trigger click handling.
   const handleTriggerClicked = useCallback(event => {
     const newValue = !isLocalOpen;
     setTriggeredUsingKeyboard(isKeyboardTriggered(event));
@@ -167,7 +183,7 @@ function DropdownMenuTopLayer({
       return noop;
     }
 
-    // Don't open on ArrowDown if this trigger is inside a parent menu.
+    // Do not open on ArrowDown if this trigger is inside a parent menu.
     // Nested menus should only be opened via ArrowRight or Enter.
     const isNestedTrigger = ((_triggerRef$current = triggerRef.current) === null || _triggerRef$current === void 0 ? void 0 : _triggerRef$current.closest('[role="menu"]')) != null;
     return bind(window, {
@@ -183,7 +199,7 @@ function DropdownMenuTopLayer({
     });
   }, [isFocused, isLocalOpen, handleTriggerClicked]);
 
-  // ── Arrow navigation ──
+  // Arrow navigation.
   // useArrowNavigation handles ArrowUp/Down, Home/End, and Tab-to-close
   // by querying focusable elements in the menu DOM container.
   const handleArrowClose = useCallback(() => {
@@ -210,7 +226,7 @@ function DropdownMenuTopLayer({
     filter: isAtCurrentMenuLevel
   });
 
-  // ── Auto-focus first item on open ──
+  // Auto-focus first item on open.
   useEffect(() => {
     if (!isLocalOpen || !isTriggeredUsingKeyboard && !autoFocus) {
       return;
@@ -227,7 +243,7 @@ function DropdownMenuTopLayer({
     });
   }, [isLocalOpen, isTriggeredUsingKeyboard, autoFocus]);
 
-  // ── Close on menu item click ──
+  // Close on menu item click.
   // Close when a regular menuitem is clicked, but not checkboxes/radios
   // and not nested triggers (items with aria-haspopup).
   const handleMenuClick = useCallback(e => {
@@ -238,7 +254,7 @@ function DropdownMenuTopLayer({
       return;
     }
     const isCheckboxOrRadio = menuItem.getAttribute('role') === 'menuitemcheckbox' || menuItem.getAttribute('role') === 'menuitemradio';
-    // Don't close the menu when clicking a nested trigger (aria-haspopup).
+    // Do not close the menu when clicking a nested trigger (aria-haspopup).
     // The nested dropdown will handle its own open/close.
     const isNestedTrigger = menuItem.hasAttribute('aria-haspopup');
     if (!isCheckboxOrRadio && !isNestedTrigger) {
@@ -249,28 +265,24 @@ function DropdownMenuTopLayer({
       });
     }
   }, [setLocalIsOpen, onOpenChange]);
-  return /*#__PURE__*/React.createElement(SelectionStore, null, /*#__PURE__*/React.createElement(Popup, {
-    placement: topLayerPlacement,
-    onClose: handleOnClose
-  }, /*#__PURE__*/React.createElement(Popup.TriggerFunction, null, ({
-    ref,
-    toggle: _toggle,
-    ariaAttributes
-  }) => {
-    const combinedRef = mergeRefs([ref, triggerRef]);
+  const ariaAttributes = getAriaForTrigger({
+    role: 'menu',
+    isOpen: isLocalOpen,
+    popoverId
+  });
 
-    // FUDGE(top-layer-api): cast `ariaAttributes` to the narrow shape that adopter
-    // public types expect. `@atlaskit/top-layer` types `aria-haspopup` as the wider
-    // WAI-ARIA union (boolean | 'dialog' | 'menu' | 'listbox' | 'tree' | 'grid'),
-    // but the public `CustomTriggerProps` (extending `@atlaskit/popup` `TriggerProps`)
-    // is intentionally kept narrow (boolean | 'dialog') because the top-layer API
-    // surface is not yet settled. The runtime value is unchanged; only the
-    // TypeScript-visible type is narrowed at this boundary.
-    // REMOVE WHEN: the top-layer public API is committed (see
-    // packages/design-system/top-layer/notes/decisions/migration-roadmap.md "Open API
-    // decisions deferred to a follow-up PR") and a follow-up `minor` PR widens
-    // `TriggerProps['aria-haspopup']` on `@atlaskit/popup` to match.
-    const narrowAriaAttributes = ariaAttributes;
+  // FUDGE(top-layer-api): cast `aria-haspopup` to the narrow shape that adopter
+  // public types expect. `@atlaskit/top-layer` types `aria-haspopup` as the wider
+  // WAI-ARIA union, but the public `CustomTriggerProps` (extending `@atlaskit/popup`
+  // `TriggerProps`) is intentionally kept narrow (`boolean | 'dialog'`) because the
+  // top-layer API surface is not yet settled. The runtime value is unchanged; only
+  // the TypeScript-visible type is narrowed at this boundary.
+  const narrowAriaAttributes = ariaAttributes;
+  const renderTrigger = () => {
+    const setRef = node => {
+      triggerRef.current = node;
+    };
+    const combinedRef = mergeRefs([setRef]);
     if (typeof trigger === 'function') {
       return trigger({
         ...narrowAriaAttributes,
@@ -293,12 +305,16 @@ function DropdownMenuTopLayer({
       "aria-label": label,
       interactionName: interactionName
     }), trigger);
-  }), /*#__PURE__*/React.createElement(Popup.Content, {
+  };
+  return /*#__PURE__*/React.createElement(SelectionStore, null, renderTrigger(), /*#__PURE__*/React.createElement(Popover, {
+    ref: popoverRef,
+    id: popoverId,
     role: "menu",
     label: (_ref = menuLabel !== null && menuLabel !== void 0 ? menuLabel : label) !== null && _ref !== void 0 ? _ref : typeof trigger === 'string' ? trigger : 'Menu',
     isOpen: isLocalOpen,
+    onClose: handleOnClose,
     animate: animation,
-    widthFromAnchor: shouldFitContainer ? 'min-anchor' : 'none',
+    placement: topLayerPlacement,
     testId: testId && `${testId}--content`
   }, /*#__PURE__*/React.createElement("div", {
     ref: menuRef,
@@ -315,6 +331,6 @@ function DropdownMenuTopLayer({
   }, isLoading ? /*#__PURE__*/React.createElement(LoadingIndicator, {
     statusLabel: statusLabel,
     testId: testId && `${testId}--menu-wrapper--loading-indicator`
-  }) : children)))));
+  }) : children))));
 }
 export default DropdownMenuTopLayer;

package/dist/esm/dropdown-menu-top-layer.js

@@ -19,8 +19,12 @@ import ExpandIcon from '@atlaskit/icon/core/chevron-down';
 import MenuGroup from '@atlaskit/menu/menu-group';
 import Spinner from '@atlaskit/spinner';
 import { slideAndFade } from '@atlaskit/top-layer/animations';
+import { getAriaForTrigger } from '@atlaskit/top-layer/get-aria-for-trigger';
 import { fromLegacyPlacement } from '@atlaskit/top-layer/placement-map';
-import { Popup } from '@atlaskit/top-layer/popup';
+import { Popover } from '@atlaskit/top-layer/popover';
+import { useAnchorPosition } from '@atlaskit/top-layer/use-anchor-position';
+import { usePopoverId } from '@atlaskit/top-layer/use-popover-id';
+import { useWidthFromAnchor } from '@atlaskit/top-layer/use-width-from-anchor';
 import SelectionStore from './internal/context/selection-store';
 import { getFirstFocusable, isAtCurrentMenuLevel, useArrowNavigation } from './internal/use-arrow-navigation';
 var MAX_HEIGHT = "calc(100vh - 16px)";
@@ -33,9 +37,9 @@ var animation = slideAndFade();
 /**
  * Event types produced by trigger interactions.
  *
- * - `React.MouseEvent<Element>` — from the trigger's `onClick` handler
- * - `React.KeyboardEvent<Element>` — from the trigger's `onClick` when activated via keyboard
- * - `KeyboardEvent` — native event from the ArrowDown `bind(window, ...)` listener
+ * - `React.MouseEvent<Element>`: from the trigger's `onClick` handler
+ * - `React.KeyboardEvent<Element>`: from the trigger's `onClick` when activated via keyboard
+ * - `KeyboardEvent`: native event from the ArrowDown `bind(window, ...)` listener
  */
 
 /**
@@ -80,9 +84,9 @@ function LoadingIndicator(_ref) {
  * Top-layer implementation of DropdownMenu.
  *
  * Replaces the legacy `@atlaskit/popup` + `@atlaskit/portal` + `@atlaskit/layering` pipeline
- * with native Popover API via `@atlaskit/top-layer`.
+ * with the native Popover API via `@atlaskit/top-layer`.
  *
- * What's no longer needed:
+ * What is no longer needed:
  * - Portal: top layer handles stacking natively
  * - FocusLock / react-focus-lock: popover=auto provides light dismiss
  * - z-index: top layer is always above everything
@@ -92,7 +96,7 @@ function LoadingIndicator(_ref) {
  * - Fallback placements / Popper: CSS Anchor Positioning handles positioning
  */
 function DropdownMenuTopLayer(_ref2) {
-  var _ref6;
+  var _ref5;
   var _ref2$autoFocus = _ref2.autoFocus,
     autoFocus = _ref2$autoFocus === void 0 ? false : _ref2$autoFocus,
     children = _ref2.children,
@@ -122,26 +126,38 @@ function DropdownMenuTopLayer(_ref2) {
     isLocalOpen = _useControlledState2[0],
     setLocalIsOpen = _useControlledState2[1];
   var triggerRef = useRef(null);
+  var popoverRef = useRef(null);
   var menuRef = useRef(null);
   var _useState = useState(false),
     _useState2 = _slicedToArray(_useState, 2),
     isTriggeredUsingKeyboard = _useState2[0],
     setTriggeredUsingKeyboard = _useState2[1];
+  var popoverId = usePopoverId();
   var topLayerPlacement = useMemo(function () {
     return fromLegacyPlacement({
       legacy: placement
     });
   }, [placement]);
+  useAnchorPosition({
+    anchorRef: triggerRef,
+    popoverRef: popoverRef,
+    placement: topLayerPlacement
+  });
+  useWidthFromAnchor({
+    mode: shouldFitContainer ? 'min-anchor' : 'none',
+    popoverRef: popoverRef,
+    anchorRef: triggerRef
+  });
 
-  // ── Close handling ──
+  // Close handling.
   // Focus restoration is handled natively by the Popover API:
-  //   - Escape → browser restores focus to the trigger automatically
-  //   - Click-outside → browser does NOT restore (correct behavior)
+  //   - Escape: browser restores focus to the trigger automatically
+  //   - Click-outside: browser does NOT restore (correct behavior)
   //
   // The only custom focus handling needed is `returnFocusRef`: when provided,
   // we redirect focus to a different element than the trigger. We do this
   // in the onClose callback via rAF, which runs after the browser's native
-  // restoration — effectively overriding it.
+  // restoration, effectively overriding it.
   var handleOnClose = useCallback(function (_ref3) {
     var _reason = _ref3.reason;
     if (returnFocusRef) {
@@ -157,7 +173,7 @@ function DropdownMenuTopLayer(_ref2) {
     });
   }, [onOpenChange, returnFocusRef, setLocalIsOpen]);
 
-  // ── Trigger click handling ──
+  // Trigger click handling.
   var handleTriggerClicked = useCallback(function (event) {
     var newValue = !isLocalOpen;
     setTriggeredUsingKeyboard(isKeyboardTriggered(event));
@@ -184,7 +200,7 @@ function DropdownMenuTopLayer(_ref2) {
       return noop;
     }
 
-    // Don't open on ArrowDown if this trigger is inside a parent menu.
+    // Do not open on ArrowDown if this trigger is inside a parent menu.
     // Nested menus should only be opened via ArrowRight or Enter.
     var isNestedTrigger = ((_triggerRef$current = triggerRef.current) === null || _triggerRef$current === void 0 ? void 0 : _triggerRef$current.closest('[role="menu"]')) != null;
     return bind(window, {
@@ -200,7 +216,7 @@ function DropdownMenuTopLayer(_ref2) {
     });
   }, [isFocused, isLocalOpen, handleTriggerClicked]);
 
-  // ── Arrow navigation ──
+  // Arrow navigation.
   // useArrowNavigation handles ArrowUp/Down, Home/End, and Tab-to-close
   // by querying focusable elements in the menu DOM container.
   var handleArrowClose = useCallback(function () {
@@ -226,7 +242,7 @@ function DropdownMenuTopLayer(_ref2) {
     filter: isAtCurrentMenuLevel
   });
 
-  // ── Auto-focus first item on open ──
+  // Auto-focus first item on open.
   useEffect(function () {
     if (!isLocalOpen || !isTriggeredUsingKeyboard && !autoFocus) {
       return;
@@ -243,7 +259,7 @@ function DropdownMenuTopLayer(_ref2) {
     });
   }, [isLocalOpen, isTriggeredUsingKeyboard, autoFocus]);
 
-  // ── Close on menu item click ──
+  // Close on menu item click.
   // Close when a regular menuitem is clicked, but not checkboxes/radios
   // and not nested triggers (items with aria-haspopup).
   var handleMenuClick = useCallback(function (e) {
@@ -254,7 +270,7 @@ function DropdownMenuTopLayer(_ref2) {
       return;
     }
     var isCheckboxOrRadio = menuItem.getAttribute('role') === 'menuitemcheckbox' || menuItem.getAttribute('role') === 'menuitemradio';
-    // Don't close the menu when clicking a nested trigger (aria-haspopup).
+    // Do not close the menu when clicking a nested trigger (aria-haspopup).
     // The nested dropdown will handle its own open/close.
     var isNestedTrigger = menuItem.hasAttribute('aria-haspopup');
     if (!isCheckboxOrRadio && !isNestedTrigger) {
@@ -265,27 +281,24 @@ function DropdownMenuTopLayer(_ref2) {
       });
     }
   }, [setLocalIsOpen, onOpenChange]);
-  return /*#__PURE__*/React.createElement(SelectionStore, null, /*#__PURE__*/React.createElement(Popup, {
-    placement: topLayerPlacement,
-    onClose: handleOnClose
-  }, /*#__PURE__*/React.createElement(Popup.TriggerFunction, null, function (_ref5) {
-    var ref = _ref5.ref,
-      _toggle = _ref5.toggle,
-      ariaAttributes = _ref5.ariaAttributes;
-    var combinedRef = mergeRefs([ref, triggerRef]);
+  var ariaAttributes = getAriaForTrigger({
+    role: 'menu',
+    isOpen: isLocalOpen,
+    popoverId: popoverId
+  });
 
-    // FUDGE(top-layer-api): cast `ariaAttributes` to the narrow shape that adopter
-    // public types expect. `@atlaskit/top-layer` types `aria-haspopup` as the wider
-    // WAI-ARIA union (boolean | 'dialog' | 'menu' | 'listbox' | 'tree' | 'grid'),
-    // but the public `CustomTriggerProps` (extending `@atlaskit/popup` `TriggerProps`)
-    // is intentionally kept narrow (boolean | 'dialog') because the top-layer API
-    // surface is not yet settled. The runtime value is unchanged; only the
-    // TypeScript-visible type is narrowed at this boundary.
-    // REMOVE WHEN: the top-layer public API is committed (see
-    // packages/design-system/top-layer/notes/decisions/migration-roadmap.md "Open API
-    // decisions deferred to a follow-up PR") and a follow-up `minor` PR widens
-    // `TriggerProps['aria-haspopup']` on `@atlaskit/popup` to match.
-    var narrowAriaAttributes = ariaAttributes;
+  // FUDGE(top-layer-api): cast `aria-haspopup` to the narrow shape that adopter
+  // public types expect. `@atlaskit/top-layer` types `aria-haspopup` as the wider
+  // WAI-ARIA union, but the public `CustomTriggerProps` (extending `@atlaskit/popup`
+  // `TriggerProps`) is intentionally kept narrow (`boolean | 'dialog'`) because the
+  // top-layer API surface is not yet settled. The runtime value is unchanged; only
+  // the TypeScript-visible type is narrowed at this boundary.
+  var narrowAriaAttributes = ariaAttributes;
+  var renderTrigger = function renderTrigger() {
+    var setRef = function setRef(node) {
+      triggerRef.current = node;
+    };
+    var combinedRef = mergeRefs([setRef]);
     if (typeof trigger === 'function') {
       return trigger(_objectSpread(_objectSpread(_objectSpread({}, narrowAriaAttributes), bindFocus), {}, {
         triggerRef: combinedRef,
@@ -308,12 +321,16 @@ function DropdownMenuTopLayer(_ref2) {
       "aria-label": label,
       interactionName: interactionName
     }), trigger);
-  }), /*#__PURE__*/React.createElement(Popup.Content, {
+  };
+  return /*#__PURE__*/React.createElement(SelectionStore, null, renderTrigger(), /*#__PURE__*/React.createElement(Popover, {
+    ref: popoverRef,
+    id: popoverId,
     role: "menu",
-    label: (_ref6 = menuLabel !== null && menuLabel !== void 0 ? menuLabel : label) !== null && _ref6 !== void 0 ? _ref6 : typeof trigger === 'string' ? trigger : 'Menu',
+    label: (_ref5 = menuLabel !== null && menuLabel !== void 0 ? menuLabel : label) !== null && _ref5 !== void 0 ? _ref5 : typeof trigger === 'string' ? trigger : 'Menu',
     isOpen: isLocalOpen,
+    onClose: handleOnClose,
     animate: animation,
-    widthFromAnchor: shouldFitContainer ? 'min-anchor' : 'none',
+    placement: topLayerPlacement,
     testId: testId && "".concat(testId, "--content")
   }, /*#__PURE__*/React.createElement("div", {
     ref: menuRef,
@@ -330,6 +347,6 @@ function DropdownMenuTopLayer(_ref2) {
   }, isLoading ? /*#__PURE__*/React.createElement(LoadingIndicator, {
     statusLabel: statusLabel,
     testId: testId && "".concat(testId, "--menu-wrapper--loading-indicator")
-  }) : children)))));
+  }) : children))));
 }
 export default DropdownMenuTopLayer;

package/dist/types/dropdown-menu-top-layer.d.ts

@@ -3,9 +3,9 @@ import type { DropdownMenuProps } from './types';
  * Top-layer implementation of DropdownMenu.
  *
  * Replaces the legacy `@atlaskit/popup` + `@atlaskit/portal` + `@atlaskit/layering` pipeline
- * with native Popover API via `@atlaskit/top-layer`.
+ * with the native Popover API via `@atlaskit/top-layer`.
  *
- * What's no longer needed:
+ * What is no longer needed:
  * - Portal: top layer handles stacking natively
  * - FocusLock / react-focus-lock: popover=auto provides light dismiss
  * - z-index: top layer is always above everything

package/dist/types-ts4.5/dropdown-menu-top-layer.d.ts

@@ -3,9 +3,9 @@ import type { DropdownMenuProps } from './types';
  * Top-layer implementation of DropdownMenu.
  *
  * Replaces the legacy `@atlaskit/popup` + `@atlaskit/portal` + `@atlaskit/layering` pipeline
- * with native Popover API via `@atlaskit/top-layer`.
+ * with the native Popover API via `@atlaskit/top-layer`.
  *
- * What's no longer needed:
+ * What is no longer needed:
  * - Portal: top layer handles stacking natively
  * - FocusLock / react-focus-lock: popover=auto provides light dismiss
  * - z-index: top layer is always above everything

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/dropdown-menu",
-	"version": "16.10.0",
+	"version": "16.10.2",
 	"description": "A dropdown menu displays a list of actions or options to a user.",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -34,16 +34,16 @@
 		"@atlaskit/button": "^23.11.0",
 		"@atlaskit/css": "^0.19.0",
 		"@atlaskit/ds-lib": "^7.0.0",
-		"@atlaskit/icon": "^35.3.0",
-		"@atlaskit/layering": "^3.7.0",
+		"@atlaskit/icon": "^35.4.0",
+		"@atlaskit/layering": "^3.8.0",
 		"@atlaskit/menu": "^8.5.0",
 		"@atlaskit/platform-feature-flags": "^1.1.0",
 		"@atlaskit/popup": "^4.23.0",
 		"@atlaskit/primitives": "^19.0.0",
 		"@atlaskit/spinner": "^19.1.0",
 		"@atlaskit/theme": "^25.0.0",
-		"@atlaskit/tokens": "^13.1.0",
-		"@atlaskit/top-layer": "^0.12.0",
+		"@atlaskit/tokens": "^13.3.0",
+		"@atlaskit/top-layer": "^0.14.0",
 		"@atlaskit/visually-hidden": "^3.1.0",
 		"@babel/runtime": "^7.0.0",
 		"@compiled/react": "^0.20.0",