@atlaskit/top-layer 0.12.1 → 0.13.0

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

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

package/dist/cjs/popover/popover.js

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

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

@@ -12,7 +12,8 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 var _react = _interopRequireWildcard(require("react"));
 var _mergeRefs = _interopRequireDefault(require("@atlaskit/ds-lib/merge-refs"));
 var _reducedMotion = require("../internal/reduced-motion");
-var _roleTypes = require("../internal/role-types");
+var _roleToAriaHasPopup = require("../internal/role-to-aria-has-popup");
+var _shouldFocusIntoPopover = require("../internal/should-focus-into-popover");
 var _useAnchorPosition = require("../internal/use-anchor-position");
 var _useWidthFromAnchor = require("../internal/use-width-from-anchor");
 var _popover = require("../popover/popover");
@@ -97,15 +98,15 @@ var PopupContent = exports.PopupContent = /*#__PURE__*/(0, _react.forwardRef)(fu
   // Note: onOpenChange composition is handled by handleOpenChange below,
   // which also adds nested-popover focus restoration.
 
-  // ── Sync aria-haspopup on the trigger with the content's role ──
+  // Sync aria-haspopup on the trigger with the content's role
   var setAriaHasPopup = ctx === null || ctx === void 0 ? void 0 : ctx.setAriaHasPopup;
   (0, _react.useLayoutEffect)(function () {
-    setAriaHasPopup === null || setAriaHasPopup === void 0 || setAriaHasPopup((0, _roleTypes.roleToAriaHasPopup)({
+    setAriaHasPopup === null || setAriaHasPopup === void 0 || setAriaHasPopup((0, _roleToAriaHasPopup.roleToAriaHasPopup)({
       role: role
     }));
   }, [role, setAriaHasPopup]);
 
-  // ── Focus restoration ──
+  // Focus restoration
   // The native Popover API handles focus restoration automatically for
   // popover="auto" and popover="hint":
   //   - Escape → restores focus to the previously focused element (the trigger)
@@ -132,7 +133,7 @@ var PopupContent = exports.PopupContent = /*#__PURE__*/(0, _react.forwardRef)(fu
     }
     consumerOnOpenChange === null || consumerOnOpenChange === void 0 || consumerOnOpenChange(args);
 
-    // ── Nested popover focus restoration fallback ──
+    // Nested popover focus restoration fallback
     // The browser only captures `previouslyFocusedElement` for the
     // outermost popover="auto" in the stack. Inner (nested) popovers
     // have shouldRestoreFocus=false, so the browser will not restore
@@ -151,7 +152,7 @@ var PopupContent = exports.PopupContent = /*#__PURE__*/(0, _react.forwardRef)(fu
       // Single source of truth for "this role moves focus on open
       // and therefore needs to be restored on close" - see
       // `shouldFocusIntoPopover` in `internal/role-types.tsx`.
-      if (focusStillInPopover && (0, _roleTypes.shouldFocusIntoPopover)({
+      if (focusStillInPopover && (0, _shouldFocusIntoPopover.shouldFocusIntoPopover)({
         role: role
       })) {
         trigger.focus({
@@ -161,7 +162,7 @@ var PopupContent = exports.PopupContent = /*#__PURE__*/(0, _react.forwardRef)(fu
     }
   }, [consumerOnOpenChange, triggerRef, role, setPopupState, willAnimate]);
 
-  // ── Anchor positioning ──
+  // Anchor positioning
   // Compose useAnchorPosition with Popover. The hook positions the popover
   // relative to the trigger element via CSS Anchor Positioning (with JS fallback).
   // Use ctx.popoverRef when inside the compound (so the trigger can also

package/dist/cjs/testing/polyfill.js

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

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

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

package/dist/cjs/use-arrow-navigation/is-at-current-menu-level.js

@@ -6,6 +6,24 @@ Object.defineProperty(exports, "__esModule", {
 exports.isAtCurrentMenuLevel = isAtCurrentMenuLevel;
 var menuScope = '[role="menu"]';
 
+/**
+ * Recursively walks from `node` toward `container`, returning `true` when
+ * `container` is reached without crossing another `role="menu"` ancestor.
+ *
+ * Used by `isAtCurrentMenuLevel` (pattern 2) to determine if the
+ * `closestMenu` is owned by the wrapper container directly. Recursion
+ * avoids a mutable `let parent` walk and keeps the function body linear.
+ */
+function reachesContainerWithoutNestedMenu(node, container) {
+  if (!node || node === container) {
+    return node === container;
+  }
+  if (node.getAttribute('role') === 'menu') {
+    return false;
+  }
+  return reachesContainerWithoutNestedMenu(node.parentElement, container);
+}
+
 /**
  * Returns true if the element belongs to the current menu level of the
  * container, i.e. it is NOT inside a nested `role="menu"` sub-container.
@@ -72,16 +90,5 @@ function isAtCurrentMenuLevel(element, container) {
 
   // 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;
+  return reachesContainerWithoutNestedMenu(closestMenu.parentElement, container);
 }

package/dist/cjs/use-arrow-navigation/use-arrow-navigation.js

@@ -8,7 +8,9 @@ var _react = require("react");
 var _bindEventListener = require("bind-event-listener");
 var _browserApis = require("@atlaskit/browser-apis");
 var _keycodes = require("@atlaskit/ds-lib/keycodes");
-var _focus = require("../focus");
+var _getFirstFocusable2 = require("../focus/get-first-focusable");
+var _getLastFocusable2 = require("../focus/get-last-focusable");
+var _getNextFocusable3 = require("../focus/get-next-focusable");
 var menuScope = '[role="menu"]';
 
 /**
@@ -96,7 +98,7 @@ function useArrowNavigation(_ref) {
       var _getNextFocusable;
       // Prevent page scroll while navigating menu items.
       event.preventDefault();
-      (_getNextFocusable = (0, _focus.getNextFocusable)({
+      (_getNextFocusable = (0, _getNextFocusable3.getNextFocusable)({
         container: container,
         direction: 'forwards',
         filter: filter
@@ -107,7 +109,7 @@ function useArrowNavigation(_ref) {
       var _getNextFocusable2;
       // Prevent page scroll while navigating menu items.
       event.preventDefault();
-      (_getNextFocusable2 = (0, _focus.getNextFocusable)({
+      (_getNextFocusable2 = (0, _getNextFocusable3.getNextFocusable)({
         container: container,
         direction: 'backwards',
         filter: filter
@@ -118,7 +120,7 @@ function useArrowNavigation(_ref) {
       var _getFirstFocusable;
       // Prevent browser default (e.g. scrolling to top of page).
       event.preventDefault();
-      (_getFirstFocusable = (0, _focus.getFirstFocusable)({
+      (_getFirstFocusable = (0, _getFirstFocusable2.getFirstFocusable)({
         container: container,
         filter: filter
       })) === null || _getFirstFocusable === void 0 || _getFirstFocusable.focus();
@@ -128,7 +130,7 @@ function useArrowNavigation(_ref) {
       var _getLastFocusable;
       // Prevent browser default (e.g. scrolling to bottom of page).
       event.preventDefault();
-      (_getLastFocusable = (0, _focus.getLastFocusable)({
+      (_getLastFocusable = (0, _getLastFocusable2.getLastFocusable)({
         container: container,
         filter: filter
       })) === null || _getLastFocusable === void 0 || _getLastFocusable.focus();

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

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

package/dist/es2019/animations/presets.js

@@ -1,6 +1,6 @@
 import { getPlacement } from '../internal/resolve-placement';
 
-// ── slideAndFade ──
+// slideAndFade
 
 function getSlideAndFadeProperties({
   placement,
@@ -123,7 +123,7 @@ export function slideAndFade(options) {
   };
 }
 
-// ── fade ──
+// fade
 
 const FADE_CSS = `
 [data-ds-popover-fade] {
@@ -175,7 +175,7 @@ export function fade() {
   };
 }
 
-// ── scaleAndFade ──
+// scaleAndFade
 
 const SCALE_AND_FADE_CSS = `
 [data-ds-popover-scale-and-fade] {
@@ -235,7 +235,7 @@ export function scaleAndFade() {
 // Dialog presets
 // ══════════════════════════════════════════════════════════════════════════════
 
-// ── dialogSlideUpAndFade ──
+// dialogSlideUpAndFade
 
 const DIALOG_SLIDE_UP_AND_FADE_CSS = `
 [data-ds-dialog-slide-up-and-fade] {
@@ -322,7 +322,7 @@ export function dialogSlideUpAndFade(options) {
   };
 }
 
-// ── dialogFade ──
+// dialogFade
 
 const DIALOG_FADE_CSS = `
 [data-ds-dialog-fade] {

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

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

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

@@ -49,7 +49,7 @@ export const Dialog = /*#__PURE__*/forwardRef(function Dialog({
   const ownRef = useRef(null);
   const combinedRef = mergeRefs([ownRef, ref]);
 
-  // ── Animation lifecycle ──
+  // Animation lifecycle
   const {
     showChildren,
     preset
@@ -60,7 +60,7 @@ export const Dialog = /*#__PURE__*/forwardRef(function Dialog({
     onExitFinish
   });
 
-  // ── Focus wrap ──
+  // Focus wrap
   // Native <dialog>.showModal() traps focus but wraps through <body> at
   // the boundary (A → B → C → body → A). This hook intercepts Tab to
   // wrap directly (A → B → C → A), matching the WAI-ARIA APG pattern.
@@ -69,7 +69,7 @@ export const Dialog = /*#__PURE__*/forwardRef(function Dialog({
     role: 'dialog'
   });
 
-  // ── Open layer observer registration ──
+  // Open layer observer registration
   // Notifies the open layer observer so app-coordination features
   // (open-count subscriptions) work with top-layer dialogs.
   useNotifyOpenLayerObserver({
@@ -100,7 +100,7 @@ export const Dialog = /*#__PURE__*/forwardRef(function Dialog({
     }
   }, [isOpen]);
 
-  // ── Handle native Escape (cancel event) ──
+  // Handle native Escape (cancel event)
   const handleCancel = useCallback(event => {
     event.preventDefault();
     onClose({
@@ -108,7 +108,7 @@ export const Dialog = /*#__PURE__*/forwardRef(function Dialog({
     });
   }, [onClose]);
 
-  // ── Handle backdrop click ──
+  // Handle backdrop click
   // Attached via bind-event-listener rather than a React prop so we avoid
   // a11y lint suppressions on the <dialog> element.
   // Keyboard dismiss is already handled natively (Escape → onCancel above).

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

@@ -1 +1,3 @@
-export { getFirstFocusable, getLastFocusable, getNextFocusable } from '../focus';
+export { getFirstFocusable } from '../focus/get-first-focusable';
+export { getLastFocusable } from '../focus/get-last-focusable';
+export { getNextFocusable } from '../focus/get-next-focusable';

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

@@ -0,0 +1 @@
+export { useAnchorPositionAtPoint } from '../internal/use-anchor-position-at-point';

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

@@ -0,0 +1,14 @@
+import { getFocusables } from './get-focusables';
+/**
+ * Returns the first focusable element within the container.
+ */
+export function getFirstFocusable({
+  container,
+  filter
+}) {
+  const items = getFocusables({
+    container,
+    filter
+  });
+  return items.length > 0 ? items[0] : null;
+}

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

@@ -0,0 +1,19 @@
+import { isInSameLayer } from './is-in-same-layer';
+import { selectors } from './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.
+ */
+export function getFocusables({
+  container,
+  filter
+}) {
+  return Array.from(container.querySelectorAll(selectors.focusable)).filter(element => element instanceof HTMLElement).filter(element => isInSameLayer({
+    element,
+    container
+  })).filter(element => !filter || filter(element, container));
+}

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

@@ -0,0 +1,14 @@
+import { getFocusables } from './get-focusables';
+/**
+ * Returns the last focusable element within the container.
+ */
+export function getLastFocusable({
+  container,
+  filter
+}) {
+  const items = getFocusables({
+    container,
+    filter
+  });
+  return items.length > 0 ? items[items.length - 1] : null;
+}

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

@@ -0,0 +1,38 @@
+/**
+ * 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.
+ */
+
+import { getFocusables } from './get-focusables';
+import { selectors } from './selectors';
+export function getNextFocusable({
+  container,
+  direction,
+  filter
+}) {
+  var _all$nextIndex;
+  const all = getFocusables({
+    container,
+    filter
+  });
+  const current = container.querySelector(selectors.focused);
+  if (!(current instanceof HTMLElement)) {
+    return null;
+  }
+  const index = all.indexOf(current);
+  if (index === -1) {
+    return null;
+  }
+  const nextIndex = (() => {
+    if (direction === 'forwards') {
+      return (index + 1) % all.length;
+    }
+    const 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/es2019/focus/is-in-same-layer.js

@@ -0,0 +1,18 @@
+const 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).
+ */
+export function isInSameLayer({
+  element,
+  container
+}) {
+  const elementLayer = element.closest(topLayerSelector);
+  const containerLayer = container.closest(topLayerSelector);
+  // Both elements are in the "document" layer
+  if (!elementLayer && !containerLayer) {
+    return true;
+  }
+  return elementLayer === containerLayer;
+}

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

@@ -0,0 +1,28 @@
+import { getDocument } from '@atlaskit/browser-apis';
+import { isInSameLayer } from './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`).
+ */
+export function isNestedLayerFocused({
+  container
+}) {
+  var _getDocument;
+  const focused = (_getDocument = 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 !isInSameLayer({
+    element: focused,
+    container
+  });
+}

package/dist/es2019/focus/selectors.js

@@ -0,0 +1,11 @@
+export const selectors = (() => {
+  // Common exclusion filter applied to every selector.
+  const not = ':not([tabindex="-1"]):not([aria-disabled="true"]):not([aria-hidden="true"])';
+  const notDisabled = `:not([disabled])${not}`;
+  const focusable = [`a[href]${not}`, `area[href]${not}`, `input${notDisabled}:not([type="hidden"])`, `select${notDisabled}`, `textarea${notDisabled}`, `button${notDisabled}`, `iframe${not}`, `audio[controls]${not}`, `video[controls]${not}`, `[contenteditable]:not([contenteditable="false"])${not}`, `[tabindex]${notDisabled}${not}`];
+  return {
+    focusable: focusable.join(','),
+    // Build the `:focus` selector
+    focused: focusable.map(selector => `${selector}:focus`).join(',')
+  };
+})();

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

@@ -4,7 +4,7 @@
  * Each preset's CSS is injected at most once into `<head>`.
  * Shared by both PopoverContent and DialogContent.
  *
- * Note: injected `<style>` elements and the tracking Set are append-only —
+ * Note: injected `<style>` elements and the tracking Set are append-only -
  * they are never removed. This is intentional: the number of distinct
  * presets is bounded (handful of animation presets), so the
  * memory footprint is negligible. Removing styles would risk breaking

package/dist/es2019/internal/reduced-motion.js

@@ -7,7 +7,7 @@ import once from '@atlaskit/ds-lib/once';
  *
  * The result is cached after the first call via `once`. This avoids
  * calling `matchMedia` on every render. The trade-off is that if a user
- * toggles the OS reduced-motion setting mid-session, the change won't
+ * toggles the OS reduced-motion setting mid-session, the change will not
  * take effect until the next page load. This is acceptable because
  * toggling this system-level preference mid-session is extremely rare,
  * and a page refresh is a reasonable expectation for system accessibility

package/dist/es2019/internal/resolve-placement.js

@@ -25,8 +25,8 @@ const DEFAULT_GAP = "var(--ds-space-100, 8px)";
  * CSS length string (e.g. `token('space.100')`).
  *
  * The two offset axes are named for clarity at the call site:
- *   - `gap`     — distance away from the trigger along the placement axis
- *   - `crossAxisShift`  — nudge along the trigger edge (perpendicular to the placement axis)
+ *   - `gap`     - distance away from the trigger along the placement axis
+ *   - `crossAxisShift`  - nudge along the trigger edge (perpendicular to the placement axis)
  */
 
 /**

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

@@ -0,0 +1,32 @@
+/**
+ * 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.
+ */
+export function roleToAriaHasPopup({
+  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;
+}