@atlaskit/top-layer 0.12.2 → 0.14.0

package/CHANGELOG.md

@@ -1,5 +1,36 @@
 # @atlaskit/top-layer
 
+## 0.14.0
+
+### Minor Changes
+
+- [`021a645c6f39a`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/021a645c6f39a) -
+  Remove the `Popup` compound and `PopupSurface`; use `Popover`, `PopoverSurface`,
+  `useAnchorPosition`, `useWidthFromAnchor`, `usePopoverId`, and `getAriaForTrigger` instead.
+
+  Nested-popover focus restoration is now automatic: `Popover` snapshots `document.activeElement` in
+  `beforetoggle` (newState='open') and restores it on close for focus-capturing roles (`dialog`,
+  `alertdialog`, `menu`, `listbox`, `tree`, `grid`) when the close reason is Escape or programmatic.
+  Click-outside (light dismiss) intentionally does not restore focus, matching the HTML Popover
+  spec's `focusPreviousElement=false` rule. This fixes a Firefox bug where nested popovers left
+  focus on `<body>` after dismiss.
+
+## 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/README.md

@@ -4,36 +4,63 @@ Low-level top-layer primitives using the native
 [Popover API](https://developer.mozilla.org/en-US/docs/Web/API/Popover_API) (`popover="auto"`) and
 [`<dialog>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dialog) element.
 
-## Popup
+## Popover
 
-Compound component for rendering content in the browser's top layer with CSS Anchor Positioning.
-Placement is owned by this compound: root provides it via context, Content applies it (CSS Anchor
-Positioning or JS fallback).
+The primary primitive: a `<div>` with the `popover` attribute, plus a small lifecycle (animations,
+role-based focus management, light-dismiss, nested-focus restoration). It does **not** know about
+placement — compose it with the `useAnchorPosition` hook when you need anchor-positioned content.
 
 ```tsx
-<Popup onClose={handleClose}>
-	<Popup.Trigger>
-		<button>Open</button>
-	</Popup.Trigger>
-	<Popup.Content role="dialog" label="My popup">
-		Content here
-	</Popup.Content>
-</Popup>
+import { useRef } from 'react';
+import { slideAndFade } from '@atlaskit/top-layer/animations';
+import { getAriaForTrigger } from '@atlaskit/top-layer/get-aria-for-trigger';
+import { Popover } from '@atlaskit/top-layer/popover';
+import { PopoverSurface } from '@atlaskit/top-layer/popover-surface';
+import { usePopoverId } from '@atlaskit/top-layer/use-popover-id';
+import { useAnchorPosition } from '@atlaskit/top-layer/use-anchor-position';
+
+function MyPopup({ isOpen, onClose }: { isOpen: boolean; onClose: () => void }) {
+	const triggerRef = useRef<HTMLButtonElement>(null);
+	const popoverRef = useRef<HTMLDivElement>(null);
+	const popoverId = usePopoverId();
+
+	useAnchorPosition({
+		anchorRef: triggerRef,
+		popoverRef,
+		placement: { axis: 'block', edge: 'end', align: 'start' },
+	});
+
+	return (
+		<>
+			<button
+				ref={triggerRef}
+				onClick={() => popoverRef.current?.togglePopover()}
+				{...getAriaForTrigger({ role: 'dialog', isOpen, popoverId })}
+			>
+				Open
+			</button>
+			<Popover
+				ref={popoverRef}
+				id={popoverId}
+				role="dialog"
+				label="Settings"
+				isOpen={isOpen}
+				animate={slideAndFade()}
+				onClose={onClose}
+			>
+				<PopoverSurface>Content here</PopoverSurface>
+			</Popover>
+		</>
+	);
+}
 ```
 
-`placement` defaults to `{}` - "below trigger, centered, with `space.100` gap". Pass an explicit
-object to override (e.g. `placement={{ axis: 'inline', edge: 'end' }}` for a popover anchored to the
-trigger's right edge).
-
-For default overlay styling (background, shadow, border-radius), see `PopupSurface` in the package
-examples (not currently a public API; we may expose it in a future release).
-
-## Popover
-
-Low-level primitive: a `<div>` with the `popover` attribute and show/hide lifecycle only. No
-placement, no trigger wiring — use it when you need top-layer rendering with **fixed or custom
-positioning** (e.g. Flag uses `Popover mode="manual"`). For anchor-positioned content next to a
-trigger, use **Popup** instead.
+- Focus restoration is automatic. The browser handles it for outermost popovers; `Popover`
+  snapshots `document.activeElement` on open and restores it on close for nested cases.
+- For default overlay styling (background, shadow, border-radius), wrap content in `PopoverSurface`
+  from `@atlaskit/top-layer/popover-surface`.
+- For trigger-less or custom-positioned UI (flag, tooltip, react-select menu portal), use `Popover`
+  on its own without `useAnchorPosition`.
 
 ## Dialog
 
@@ -60,8 +87,8 @@ Compound component for modal dialogs using the native `<dialog>` element with `.
 
 ## Animations
 
-Both Popup (and the low-level Popover) and Dialog support CSS-based entry/exit animations via the
-`animate` prop. Animations use
+Both `Popover` and `Dialog` support CSS-based entry/exit animations via the `animate` prop.
+Animations use
 [`@starting-style`](https://developer.mozilla.org/en-US/docs/Web/CSS/@starting-style) for entry and
 [`allow-discrete`](https://developer.mozilla.org/en-US/docs/Web/CSS/transition-behavior) on
 `display`/`overlay` for exit — no JavaScript animation coordination required.
@@ -80,23 +107,23 @@ import {
 } from '@atlaskit/top-layer/animations';
 ```
 
-### Popup animation
+### Popover animation
 
-Pass a preset to `Popup.Content` (or to `Popover` when using the low-level primitive without
-placement):
+Pass a preset to `Popover`:
 
 ```tsx
 import { slideAndFade } from '@atlaskit/top-layer/animations';
+import { Popover } from '@atlaskit/top-layer/popover';
 
 const animation = slideAndFade();
 
-<Popup.Content animate={animation} role="dialog" label="My popup">
+<Popover animate={animation} role="dialog" label="My popover">
 	Content
-</Popup.Content>;
+</Popover>;
 ```
 
-For overlay styling (background, shadow, border-radius), see the `PopupSurface` usage in the package
-examples.
+For overlay styling (background, shadow, border-radius), wrap children in `PopoverSurface` from
+`@atlaskit/top-layer/popover-surface`.
 
 Available popover presets:
 

package/dist/cjs/animations/presets.js

@@ -67,10 +67,10 @@ var SLIDE_AND_FADE_CSS = "\n[data-ds-popover-slide-and-fade] {\n  opacity: 0;\n
  * import { slideAndFade } from '@atlaskit/top-layer/animations';
  *
  * // Default 4px slide (tooltip)
- * <Popup.Content animate={slideAndFade()} />
+ * <Popover animate={slideAndFade()} />
  *
  * // Custom 8px slide (popup / dropdown)
- * <Popup.Content animate={slideAndFade({ distance: 8 })} />
+ * <Popover animate={slideAndFade({ distance: 8 })} />
  * ```
  */
 function slideAndFade(options) {
@@ -104,7 +104,7 @@ var FADE_CSS = "\n[data-ds-popover-fade] {\n  opacity: 0;\n  transition:\n    op
  * ```tsx
  * import { fade } from '@atlaskit/top-layer/animations';
  *
- * <Popup.Content animate={fade()} />
+ * <Popover animate={fade()} />
  * ```
  */
 // eslint-disable-next-line @atlaskit/volt-strict-mode/no-multiple-exports
@@ -130,7 +130,7 @@ var SCALE_AND_FADE_CSS = "\n[data-ds-popover-scale-and-fade] {\n  opacity: 0;\n
  * ```tsx
  * import { scaleAndFade } from '@atlaskit/top-layer/animations';
  *
- * <Popup.Content animate={scaleAndFade()} />
+ * <Popover animate={scaleAndFade()} />
  * ```
  */
 // eslint-disable-next-line @atlaskit/volt-strict-mode/no-multiple-exports

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/get-aria-for-trigger.js

@@ -0,0 +1,12 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "getAriaForTrigger", {
+  enumerable: true,
+  get: function get() {
+    return _getAriaForTrigger.getAriaForTrigger;
+  }
+});
+var _getAriaForTrigger = require("../internal/get-aria-for-trigger");

package/dist/cjs/entry-points/popover-surface.js

@@ -0,0 +1,12 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "PopoverSurface", {
+  enumerable: true,
+  get: function get() {
+    return _popoverSurface.PopoverSurface;
+  }
+});
+var _popoverSurface = require("../popover-surface");

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/entry-points/use-popover-id.js

@@ -0,0 +1,21 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.usePopoverId = usePopoverId;
+var _useId = require("@atlaskit/ds-lib/use-id");
+/**
+ * Returns a stable HTML `id` used to wire a trigger element to its popover
+ * via ARIA (`aria-controls`) and the Popover API (`popovertarget`).
+ *
+ * The returned value is intended for the `id` attribute on the popover and
+ * for the matching `aria-controls` / `popovertarget` references on the
+ * trigger. It is NOT a CSS `anchor-name` value: CSS anchor positioning is
+ * handled internally by `useAnchorPosition`, which mints and applies its
+ * own `anchor-name` on the trigger element.
+ */
+function usePopoverId() {
+  // prefixing for debug clarity in the DOM
+  return "popover-".concat((0, _useId.useId)());
+}

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/get-aria-for-trigger.js

@@ -0,0 +1,88 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getAriaForTrigger = getAriaForTrigger;
+var _roleToAriaHasPopup = require("./role-to-aria-has-popup");
+/**
+ * Roles accepted by `getAriaForTrigger`.
+ *
+ * Excludes tooltip-family roles (`tooltip`, `note`, `status`, `alert`, `log`)
+ * because the correct trigger wiring for those is `aria-describedby`, not
+ * `aria-haspopup` / `aria-expanded` / `aria-controls`. Use `aria-describedby`
+ * manually for tooltip triggers.
+ */
+
+/**
+ * Non-undefined subset of `TAriaHasPopupValue`. Every role accepted by
+ * `getAriaForTrigger` maps to a concrete `aria-haspopup` string, so the
+ * trigger always receives a defined attribute value.
+ */
+
+/**
+ * Returns the ARIA attributes to spread onto a click-activated popover trigger.
+ *
+ * Centralises three attributes that are easy to forget or get wrong individually:
+ *
+ * - `aria-haspopup` - derived from the popover's role (e.g. `dialog → "dialog"`,
+ *   `menu → "menu"`, `tooltip → undefined`). React omits the attribute when
+ *   the value is `undefined`.
+ * - `aria-expanded` - reflects the current open state.
+ * - `aria-controls` - references the popover element by its id, even
+ *   while the popover is closed. The relationship is stable; `aria-expanded`
+ *   carries the current visibility state.
+ *
+ * **This function is for click/keyboard-activated popovers only.** For
+ * hover-driven tooltips, the trigger should use `aria-describedby` instead.
+ *
+ * @example
+ * ```tsx
+ * import { getAriaForTrigger } from '@atlaskit/top-layer/get-aria-for-trigger';
+ * import { usePopoverId } from '@atlaskit/top-layer/use-popover-id';
+ *
+ * const popoverId = usePopoverId();
+ * const [isOpen, setIsOpen] = useState(false);
+ *
+ * return (
+ *   <>
+ *     <button
+ *       ref={triggerRef}
+ *       onClick={() => setIsOpen((previous) => !previous)}
+ *       {...getAriaForTrigger({ role: 'dialog', isOpen, popoverId })}
+ *     >
+ *       Open
+ *     </button>
+ *     <Popover
+ *       id={popoverId}
+ *       role="dialog"
+ *       label="My dialog"
+ *       isOpen={isOpen}
+ *       triggerRef={triggerRef}
+ *       onClose={() => setIsOpen(false)}
+ *     >
+ *       …
+ *     </Popover>
+ *   </>
+ * );
+ * ```
+ */
+function getAriaForTrigger(_ref) {
+  var role = _ref.role,
+    isOpen = _ref.isOpen,
+    popoverId = _ref.popoverId;
+  // `roleToAriaHasPopup` accepts a wider role union (including tooltip-family
+  // roles that map to `undefined`). `TAriaForTriggerRole` excludes those, so
+  // the returned value is guaranteed to be a defined string. The cast narrows
+  // the wider helper signature to match.
+  var ariaHasPopup = (0, _roleToAriaHasPopup.roleToAriaHasPopup)({
+    role: role
+  });
+  return {
+    'aria-haspopup': ariaHasPopup,
+    'aria-expanded': isOpen,
+    // Keep the trigger-to-popover relationship stable. `aria-expanded`
+    // tells assistive technology whether the controlled popover is visible.
+    'aria-controls': popoverId
+  };
+}

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

@@ -3,7 +3,6 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.roleToAriaHasPopup = roleToAriaHasPopup;
 exports.shouldFocusIntoPopover = shouldFocusIntoPopover;
 /**
  * Valid values for the `aria-haspopup` attribute.
@@ -49,38 +48,6 @@ exports.shouldFocusIntoPopover = shouldFocusIntoPopover;
  * 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']);
 
 /**
@@ -88,8 +55,8 @@ var rolesThatMoveFocus = new Set(['dialog', 'alertdialog', 'menu', 'listbox', 't
  * 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;
+function shouldFocusIntoPopover(_ref) {
+  var role = _ref.role;
   if (!role) {
     return false;
   }