@atlaskit/top-layer 0.12.2 → 0.13.0

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @atlaskit/top-layer
 
+## 0.13.0
+
+### Minor Changes
+
+- [`cf4af9aa9a2fe`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/cf4af9aa9a2fe) -
+  Fix tooltip with `position="mouse-x"` / `position="mouse-y"` not respecting the `mousePosition`
+  prop when the `platform-dst-top-layer` feature flag is enabled.
+
+  The cursor-anchored tooltip is now positioned via a new `useAnchorPositionAtPoint` hook in
+  `@atlaskit/top-layer`, which delegates to `useAnchorPosition` against a hidden anchor element
+  placed once at the cursor location at show time. The popover stays anchored at that location and
+  does not follow subsequent pointer movement.
+
+  `useAnchorPosition` now also accepts an optional `isEnabled` prop (defaults to `true`); when
+  `false`, the hook is a no-op.
+
 ## 0.12.2
 
 ### Patch Changes

package/dist/cjs/entry-points/focus.js

@@ -6,19 +6,21 @@ Object.defineProperty(exports, "__esModule", {
 Object.defineProperty(exports, "getFirstFocusable", {
   enumerable: true,
   get: function get() {
-    return _focus.getFirstFocusable;
+    return _getFirstFocusable.getFirstFocusable;
   }
 });
 Object.defineProperty(exports, "getLastFocusable", {
   enumerable: true,
   get: function get() {
-    return _focus.getLastFocusable;
+    return _getLastFocusable.getLastFocusable;
   }
 });
 Object.defineProperty(exports, "getNextFocusable", {
   enumerable: true,
   get: function get() {
-    return _focus.getNextFocusable;
+    return _getNextFocusable.getNextFocusable;
   }
 });
-var _focus = require("../focus");
+var _getFirstFocusable = require("../focus/get-first-focusable");
+var _getLastFocusable = require("../focus/get-last-focusable");
+var _getNextFocusable = require("../focus/get-next-focusable");

package/dist/cjs/entry-points/use-anchor-position-at-point.js

@@ -0,0 +1,12 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "useAnchorPositionAtPoint", {
+  enumerable: true,
+  get: function get() {
+    return _useAnchorPositionAtPoint.useAnchorPositionAtPoint;
+  }
+});
+var _useAnchorPositionAtPoint = require("../internal/use-anchor-position-at-point");

package/dist/cjs/focus/get-first-focusable.js

@@ -0,0 +1,19 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getFirstFocusable = getFirstFocusable;
+var _getFocusables = require("./get-focusables");
+/**
+ * Returns the first focusable element within the container.
+ */
+function getFirstFocusable(_ref) {
+  var container = _ref.container,
+    filter = _ref.filter;
+  var items = (0, _getFocusables.getFocusables)({
+    container: container,
+    filter: filter
+  });
+  return items.length > 0 ? items[0] : null;
+}

package/dist/cjs/focus/get-focusables.js

@@ -0,0 +1,30 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getFocusables = getFocusables;
+var _isInSameLayer = require("./is-in-same-layer");
+var _selectors = require("./selectors");
+/**
+ * Returns all focusable HTMLElements within the container, optionally filtered.
+ *
+ * Focusables that belong to a nested top-layer scope (a `[popover]` or
+ * `<dialog>` descendant of the container) are excluded - those elements
+ * are owned by the inner layer's focus management. The container itself
+ * is allowed to be a popover/dialog; only nested ones are filtered.
+ */
+function getFocusables(_ref) {
+  var container = _ref.container,
+    filter = _ref.filter;
+  return Array.from(container.querySelectorAll(_selectors.selectors.focusable)).filter(function (element) {
+    return element instanceof HTMLElement;
+  }).filter(function (element) {
+    return (0, _isInSameLayer.isInSameLayer)({
+      element: element,
+      container: container
+    });
+  }).filter(function (element) {
+    return !filter || filter(element, container);
+  });
+}

package/dist/cjs/focus/get-last-focusable.js

@@ -0,0 +1,19 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getLastFocusable = getLastFocusable;
+var _getFocusables = require("./get-focusables");
+/**
+ * Returns the last focusable element within the container.
+ */
+function getLastFocusable(_ref) {
+  var container = _ref.container,
+    filter = _ref.filter;
+  var items = (0, _getFocusables.getFocusables)({
+    container: container,
+    filter: filter
+  });
+  return items.length > 0 ? items[items.length - 1] : null;
+}

package/dist/cjs/focus/get-next-focusable.js

@@ -0,0 +1,43 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getNextFocusable = getNextFocusable;
+var _getFocusables = require("./get-focusables");
+var _selectors = require("./selectors");
+/**
+ * Returns the next focusable element in the given direction relative to the
+ * currently focused element within the container. Wraps around at both ends.
+ *
+ * Returns `null` if there is no focused element within the container or if
+ * the focused element is not in the list of focusable elements.
+ */
+
+function getNextFocusable(_ref) {
+  var _all$nextIndex;
+  var container = _ref.container,
+    direction = _ref.direction,
+    filter = _ref.filter;
+  var all = (0, _getFocusables.getFocusables)({
+    container: container,
+    filter: filter
+  });
+  var current = container.querySelector(_selectors.selectors.focused);
+  if (!(current instanceof HTMLElement)) {
+    return null;
+  }
+  var index = all.indexOf(current);
+  if (index === -1) {
+    return null;
+  }
+  var nextIndex = function () {
+    if (direction === 'forwards') {
+      return (index + 1) % all.length;
+    }
+    var proposed = index - 1;
+    // if going into negative numbers, loop back to the last item
+    return proposed < 0 ? all.length - 1 : proposed;
+  }();
+  return (_all$nextIndex = all[nextIndex]) !== null && _all$nextIndex !== void 0 ? _all$nextIndex : null;
+}

package/dist/cjs/focus/is-in-same-layer.js

@@ -0,0 +1,23 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.isInSameLayer = isInSameLayer;
+var topLayerSelector = '[popover], dialog, [role="dialog"], [role="alertdialog"]';
+
+/**
+ * Returns true when `element` and `container` resolve to the same nearest
+ * top-layer host (or both resolve to `null`, meaning the document layer).
+ */
+function isInSameLayer(_ref) {
+  var element = _ref.element,
+    container = _ref.container;
+  var elementLayer = element.closest(topLayerSelector);
+  var containerLayer = container.closest(topLayerSelector);
+  // Both elements are in the "document" layer
+  if (!elementLayer && !containerLayer) {
+    return true;
+  }
+  return elementLayer === containerLayer;
+}

package/dist/cjs/focus/is-nested-layer-focused.js

@@ -0,0 +1,32 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.isNestedLayerFocused = isNestedLayerFocused;
+var _browserApis = require("@atlaskit/browser-apis");
+var _isInSameLayer = require("./is-in-same-layer");
+/**
+ * Returns `true` when `document.activeElement` is inside a nested top-layer
+ * descendant of `container` (a `[popover]`, `<dialog>`, `[role="dialog"]` or
+ * `[role="alertdialog"]` that is itself a descendant of `container`).
+ */
+function isNestedLayerFocused(_ref) {
+  var _getDocument;
+  var container = _ref.container;
+  var focused = (_getDocument = (0, _browserApis.getDocument)()) === null || _getDocument === void 0 ? void 0 : _getDocument.activeElement;
+  if (!(focused instanceof HTMLElement)) {
+    return false;
+  }
+
+  // Cannot be in a nested layer if it is not in the container
+  if (!container.contains(focused)) {
+    return false;
+  }
+
+  // If not in the same layer, must be in a nested layer
+  return !(0, _isInSameLayer.isInSameLayer)({
+    element: focused,
+    container: container
+  });
+}

package/dist/cjs/focus/selectors.js

@@ -0,0 +1,19 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.selectors = void 0;
+var selectors = exports.selectors = function () {
+  // Common exclusion filter applied to every selector.
+  var not = ':not([tabindex="-1"]):not([aria-disabled="true"]):not([aria-hidden="true"])';
+  var notDisabled = ":not([disabled])".concat(not);
+  var focusable = ["a[href]".concat(not), "area[href]".concat(not), "input".concat(notDisabled, ":not([type=\"hidden\"])"), "select".concat(notDisabled), "textarea".concat(notDisabled), "button".concat(notDisabled), "iframe".concat(not), "audio[controls]".concat(not), "video[controls]".concat(not), "[contenteditable]:not([contenteditable=\"false\"])".concat(not), "[tabindex]".concat(notDisabled).concat(not)];
+  return {
+    focusable: focusable.join(','),
+    // Build the `:focus` selector
+    focused: focusable.map(function (selector) {
+      return "".concat(selector, ":focus");
+    }).join(',')
+  };
+}();

package/dist/cjs/focus/types.js

@@ -0,0 +1 @@
+"use strict";

package/dist/cjs/internal/role-to-aria-has-popup.js

@@ -0,0 +1,37 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.roleToAriaHasPopup = roleToAriaHasPopup;
+/**
+ * Maps a popover content role to the correct `aria-haspopup` value
+ * for its trigger element.
+ *
+ * Returns `undefined` for roles that are not popups in the ARIA sense
+ * (`tooltip`, `note`, `status`, `alert`, `log`). Triggers for those roles
+ * should not announce a popup at all - emitting `aria-haspopup="dialog"`
+ * on a tooltip trigger would mislead assistive technology.
+ */
+function roleToAriaHasPopup(_ref) {
+  var role = _ref.role;
+  if (role === 'menu') {
+    return 'menu';
+  }
+  if (role === 'listbox') {
+    return 'listbox';
+  }
+  if (role === 'tree') {
+    return 'tree';
+  }
+  if (role === 'grid') {
+    return 'grid';
+  }
+  if (role === 'dialog' || role === 'alertdialog') {
+    return 'dialog';
+  }
+  // Non-popup roles (tooltip, note, status, alert, log) and the
+  // no-role case: omit `aria-haspopup` entirely. React drops the
+  // attribute when the value is `undefined`.
+  return undefined;
+}

package/dist/cjs/internal/role-types.js

@@ -1,97 +1 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.roleToAriaHasPopup = roleToAriaHasPopup;
-exports.shouldFocusIntoPopover = shouldFocusIntoPopover;
-/**
- * Valid values for the `aria-haspopup` attribute.
- *
- * Derived from the HTML spec - maps popover roles to what the trigger
- * announces. `undefined` means the attribute is omitted entirely (used for
- * non-popup roles like `tooltip`/`status`/`alert`/`note`/`log` where
- * `aria-haspopup` would be misleading).
- *
- * `true` is intentionally NOT in the union - the runtime only ever produces
- * the explicit string forms, so widening the type would invite consumers to
- * pass `true` and get an `aria-haspopup="true"` serialisation that the
- * runtime no longer emits.
- */
-
-/**
- * Roles that require an accessible name (`label` or `labelledBy`) per WCAG 4.1.2.
- * Without a name, assistive technology cannot identify these landmarks.
- */
-
-/**
- * Roles where the accessible name is derived from content or provided externally
- * (e.g. a combobox labels its listbox, tooltip content IS the accessible name).
- */
-
-// Shared ARIA role discrimination types
-//
-// These encode the WCAG 4.1.2 constraint: roles like `dialog`, `alertdialog`,
-// and `menu` MUST have an accessible name (either `label` or `labelledBy`).
-// TypeScript enforces this at compile time via discriminated unions.
-
-/**
- * ARIA role props where a role is always required.
- *
- * Used by `TPopupContentProps`. Popup content must always declare
- * its role so assistive technology can identify the layer.
- */
-
-/**
- * ARIA role props where a role is optional.
- *
- * Used by `TPopoverProps`. The low-level primitive allows omitting
- * the role for cases where it is set externally or not needed.
- */
-
-/**
- * Maps a popover content role to the correct `aria-haspopup` value
- * for its trigger element.
- *
- * Returns `undefined` for roles that are not popups in the ARIA sense
- * (`tooltip`, `note`, `status`, `alert`, `log`). Triggers for those roles
- * should not announce a popup at all - emitting `aria-haspopup="dialog"`
- * on a tooltip trigger would mislead assistive technology.
- */
-// eslint-disable-next-line @atlaskit/volt-strict-mode/no-multiple-exports
-function roleToAriaHasPopup(_ref) {
-  var role = _ref.role;
-  if (role === 'menu') {
-    return 'menu';
-  }
-  if (role === 'listbox') {
-    return 'listbox';
-  }
-  if (role === 'tree') {
-    return 'tree';
-  }
-  if (role === 'grid') {
-    return 'grid';
-  }
-  if (role === 'dialog' || role === 'alertdialog') {
-    return 'dialog';
-  }
-  // Non-popup roles (tooltip, note, status, alert, log) and the
-  // no-role case: omit `aria-haspopup` entirely. React drops the
-  // attribute when the value is `undefined`.
-  return undefined;
-}
-var rolesThatMoveFocus = new Set(['dialog', 'alertdialog', 'menu', 'listbox', 'tree', 'grid']);
-
-/**
- * Returns `true` when the given popover role moves focus into the popover
- * on open, and `false` otherwise (including when `role` is `undefined`).
- */
-// eslint-disable-next-line @atlaskit/volt-strict-mode/no-multiple-exports
-function shouldFocusIntoPopover(_ref2) {
-  var role = _ref2.role;
-  if (!role) {
-    return false;
-  }
-  return rolesThatMoveFocus.has(role);
-}
+"use strict";

package/dist/cjs/internal/should-focus-into-popover.js

@@ -0,0 +1,19 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.shouldFocusIntoPopover = shouldFocusIntoPopover;
+var rolesThatMoveFocus = new Set(['dialog', 'alertdialog', 'menu', 'listbox', 'tree', 'grid']);
+
+/**
+ * Returns `true` when the given popover role moves focus into the popover
+ * on open, and `false` otherwise (including when `role` is `undefined`).
+ */
+function shouldFocusIntoPopover(_ref) {
+  var role = _ref.role;
+  if (!role) {
+    return false;
+  }
+  return rolesThatMoveFocus.has(role);
+}

package/dist/cjs/internal/use-anchor-position-at-point.js

@@ -0,0 +1,127 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useAnchorPositionAtPoint = useAnchorPositionAtPoint;
+var _react = require("react");
+var _useAnchorPosition = require("./use-anchor-position");
+/**
+ * A point in viewport coordinates (CSS pixels) at which the synthetic
+ * anchor should be placed.
+ *
+ * Axis-named (`x`/`y`) rather than edge-named (`left`/`top`) so the
+ * shape is unambiguous in RTL writing modes — there is no ambiguity
+ * about whether a coordinate is logical (`inline-start`/`block-start`)
+ * or physical (`left`/`top`). Viewport coordinates are always
+ * physical, so we name them with the physical axis labels.
+ */
+
+/**
+ * Styles the synthetic anchor as an invisible, zero-size point.
+ * Dynamic `inset-*` overrides are written by the positioning effect.
+ *
+ * Uses `Object.assign` rather than Compiled CSS (element is outside the React tree)
+ * or the internal `setStyle` helper (we own this element entirely — it is created
+ * and removed by this hook — so the snapshot/restore semantics `setStyle`
+ * provides for caller-owned elements would be dead work here).
+ */
+function applyStaticAnchorStyles(el) {
+  Object.assign(el.style, {
+    position: 'fixed',
+    // `top`/`left` rather than `inset-block-start`/`inset-inline-start`
+    // for consistency with the dynamic positioning effect below, which
+    // uses physical properties (see comment there for the rationale).
+    top: '0',
+    left: '0',
+    // Zero size — placement decides which side the popover sits on.
+    width: '0',
+    height: '0',
+    // Prevent the overlay from intercepting pointer events.
+    pointerEvents: 'none'
+  });
+}
+
+// `useAnchorPosition` requires a real DOM element. When the caller only
+// has a viewport coordinate (e.g. cursor at hover time), this hook
+// manages a hidden `<div>` at that point and delegates the rest.
+//
+// The `<div>` is appended directly to `document.body` to escape any
+// transformed ancestor, which would otherwise break `position: fixed`
+// viewport-relative resolution.
+
+/**
+ * Positions a popover at a consumer-supplied viewport coordinate using a
+ * hidden synthetic anchor.
+ *
+ * @example
+ * ```tsx
+ * function PointPositionedPopover({ popoverRef, placement, mousePos }) {
+ *   useAnchorPositionAtPoint({
+ *     popoverRef,
+ *     placement,
+ *     isEnabled: Boolean(mousePos),
+ *     getPoint: () => {
+ *       if (!mousePos) return null;
+ *       return { x: mousePos.clientX, y: mousePos.clientY };
+ *     },
+ *   });
+ *   return <Popover ref={popoverRef}>...</Popover>;
+ * }
+ * ```
+ */
+function useAnchorPositionAtPoint(_ref) {
+  var popoverRef = _ref.popoverRef,
+    placement = _ref.placement,
+    getPoint = _ref.getPoint,
+    _ref$isEnabled = _ref.isEnabled,
+    isEnabled = _ref$isEnabled === void 0 ? true : _ref$isEnabled;
+  var syntheticAnchorRef = (0, _react.useRef)(null);
+
+  // `getPoint` is kept in a ref so the layout effect can call the
+  // latest version without listing it as a dep — that would re-fire
+  // on every render and re-latch the point.
+  var getPointRef = (0, _react.useRef)(getPoint);
+  getPointRef.current = getPoint;
+
+  // Lazy element creation: the `<div>` is only created when both
+  // `isEnabled` is true AND `getPoint()` returns a non-null point.
+  // `useLayoutEffect` ensures the element exists before the inner
+  // `useAnchorPosition` (also a layout effect) reads the ref.
+  (0, _react.useLayoutEffect)(function () {
+    if (!isEnabled) {
+      return;
+    }
+    var point = getPointRef.current();
+    if (!point) {
+      return;
+    }
+    var anchor = document.createElement('div');
+    anchor.setAttribute('aria-hidden', 'true');
+    applyStaticAnchorStyles(anchor);
+    // `point.x`/`y` are physical viewport coordinates (from
+    // `MouseEvent.clientX/Y`), so map directly onto physical
+    // `left`/`top`. This is RTL-safe: `position: fixed` + physical
+    // insets is direction-independent. Using logical
+    // `inset-inline-start` would need `viewportWidth - point.x` in
+    // RTL to land at the same physical pixel.
+    anchor.style.top = "".concat(point.y, "px");
+    anchor.style.left = "".concat(point.x, "px");
+    document.body.appendChild(anchor);
+    syntheticAnchorRef.current = anchor;
+    return function cleanup() {
+      anchor.remove();
+      syntheticAnchorRef.current = null;
+    };
+  }, [isEnabled]);
+
+  // Mirror `isEnabled` so both hooks stay in sync — when disabled,
+  // neither this hook nor the inner one touches the popover, leaving
+  // any other positioning the consumer has set up free to take effect.
+  (0, _useAnchorPosition.useAnchorPosition)({
+    anchorRef: syntheticAnchorRef,
+    popoverRef: popoverRef,
+    placement: placement,
+    isEnabled: isEnabled
+  });
+}

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

@@ -200,19 +200,23 @@ function useStablePlacement(placement) {
  * comparison is used internally so re-runs are skipped when the resolved
  * placement shape is unchanged.
  */
-// eslint-disable-next-line @atlaskit/volt-strict-mode/no-multiple-exports
 function useAnchorPosition(_ref3) {
   var anchorRef = _ref3.anchorRef,
     popoverRef = _ref3.popoverRef,
     _ref3$placement = _ref3.placement,
     placement = _ref3$placement === void 0 ? {} : _ref3$placement,
     _ref3$forceFallbackPo = _ref3.forceFallbackPositioning,
-    forceFallbackPositioning = _ref3$forceFallbackPo === void 0 ? false : _ref3$forceFallbackPo;
+    forceFallbackPositioning = _ref3$forceFallbackPo === void 0 ? false : _ref3$forceFallbackPo,
+    _ref3$isEnabled = _ref3.isEnabled,
+    isEnabled = _ref3$isEnabled === void 0 ? true : _ref3$isEnabled;
   var id = (0, _react.useId)();
   // Stabilize `placement` object so the same object literal
   // value returns an object with the same reference
   var stablePlacement = useStablePlacement(placement);
   (0, _react.useLayoutEffect)(function () {
+    if (!isEnabled) {
+      return;
+    }
     var trigger = anchorRef.current;
     var popover = popoverRef.current;
     if (!trigger || !popover) {
@@ -461,5 +465,5 @@ function useAnchorPosition(_ref3) {
       popover.style.removeProperty('opacity');
     });
     return undoPositioning;
-  }, [anchorRef, popoverRef, stablePlacement, forceFallbackPositioning, id]);
+  }, [anchorRef, popoverRef, stablePlacement, forceFallbackPositioning, isEnabled, id]);
 }

package/dist/cjs/internal/use-focus-wrap.js

@@ -6,7 +6,10 @@ Object.defineProperty(exports, "__esModule", {
 exports.useFocusWrap = useFocusWrap;
 var _react = require("react");
 var _bindEventListener = require("bind-event-listener");
-var _focus = require("../focus/focus");
+var _getFirstFocusable = require("../focus/get-first-focusable");
+var _getLastFocusable = require("../focus/get-last-focusable");
+var _getNextFocusable = require("../focus/get-next-focusable");
+var _isNestedLayerFocused = require("../focus/is-nested-layer-focused");
 /**
  * Roles that require focus wrapping per WAI-ARIA APG.
  *
@@ -62,7 +65,7 @@ function useFocusWrap(_ref) {
 
         // If focus is already in a nested layer, then
         // we continue to let that nested layer own focus
-        if ((0, _focus.isNestedLayerFocused)({
+        if ((0, _isNestedLayerFocused.isNestedLayerFocused)({
           container: element
         })) {
           return;
@@ -75,7 +78,7 @@ function useFocusWrap(_ref) {
 
         // Try to move to the next/previous focusable element relative
         // to the currently focused element within the container.
-        var next = (0, _focus.getNextFocusable)({
+        var next = (0, _getNextFocusable.getNextFocusable)({
           container: element,
           direction: direction
         });
@@ -87,9 +90,9 @@ function useFocusWrap(_ref) {
         // Nothing is currently focused inside the container (or the
         // focused element is not in the focusable list). Fall back to
         // the first or last focusable element depending on direction.
-        var fallback = direction === 'forwards' ? (0, _focus.getFirstFocusable)({
+        var fallback = direction === 'forwards' ? (0, _getFirstFocusable.getFirstFocusable)({
           container: element
-        }) : (0, _focus.getLastFocusable)({
+        }) : (0, _getLastFocusable.getLastFocusable)({
           container: element
         });
         if (fallback) {

package/dist/cjs/internal/use-initial-focus.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.useInitialFocus = useInitialFocus;
 var _react = require("react");
-var _focus = require("../focus/focus");
+var _getFirstFocusable = require("../focus/get-first-focusable");
 /**
  * Determines the correct element to receive initial focus within a popover,
  * based on its ARIA role.
@@ -33,7 +33,7 @@ function getInitialFocusTarget(_ref) {
       return autofocusEl;
     }
     // Fall back to first focusable element
-    return (0, _focus.getFirstFocusable)({
+    return (0, _getFirstFocusable.getFirstFocusable)({
       container: container
     });
   }
@@ -44,7 +44,7 @@ function getInitialFocusTarget(_ref) {
     // of the consumer component (e.g. dropdown-menu), because menu keyboard
     // behavior varies by context (orientation, nesting, item type, control
     // pattern). See: notes/outputs/menu-keyboard-decision.md
-    return (0, _focus.getFirstFocusable)({
+    return (0, _getFirstFocusable.getFirstFocusable)({
       container: container
     });
   }
@@ -54,7 +54,7 @@ function getInitialFocusTarget(_ref) {
     if (selectedOption) {
       return selectedOption;
     }
-    return (0, _focus.getFirstFocusable)({
+    return (0, _getFirstFocusable.getFirstFocusable)({
       container: container
     });
   }

package/dist/cjs/placement-map/index.js

@@ -7,7 +7,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.fromLegacyPlacement = fromLegacyPlacement;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
-var _legacyPlacements = require("./legacy-placements");
+var _placementMapping = require("./placement-mapping");
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 /**
@@ -54,7 +54,7 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
 function fromLegacyPlacement(_ref) {
   var legacy = _ref.legacy,
     offset = _ref.offset;
-  var basePlacement = _legacyPlacements.placementMapping[legacy];
+  var basePlacement = _placementMapping.placementMapping[legacy];
   if (!offset) {
     return basePlacement;
   }