@atlaskit/top-layer 0.9.0 → 0.10.0

package/CHANGELOG.md

@@ -1,5 +1,31 @@
 # @atlaskit/top-layer
 
+## 0.10.0
+
+### Minor Changes
+
+- [`dec4f3444bce8`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/dec4f3444bce8) -
+  Hardens Popup, Popover, and Dialog through stricter typed contracts, focus-management fixes, and
+  clearer entry points.
+  - **Stricter API contracts.** Popup, Popover, and Dialog props are now discriminated unions, so
+    misuse (manual mode with `onClose`, dialogs without a label, popovers without an accessible name
+    for their role) fails at compile time.
+  - **Better defaults.** `Popup`'s `placement` prop now defaults to "below trigger, centered, with
+    `space.100` gap", removing the awkward `placement={{}}` boilerplate.
+  - **Focus-management fixes.** Empty/loading dialogs no longer trap Tab on `<body>`; rapid
+    open/close/open sequences no longer focus a torn-down popover; nested top-layer popovers stay in
+    their own focus scope.
+  - **Cleaner entry points.** `createCloseEvent` is now available as per-primitive subpaths
+    (`@atlaskit/top-layer/dialog/create-close-event` and
+    `@atlaskit/top-layer/popover/create-close-event`); the combined entry point is deprecated. The
+    placement-map entry point now exposes a public `LEGACY_PLACEMENTS` const for migration
+    consumers.
+  - **Per-primitive data attributes.** Animation hooks now emit `data-ds-popover-*` for Popover and
+    `data-ds-dialog-*` for Dialog, preventing cross-primitive selector collisions.
+  - **Performance and internal correctness.** `setStyle` snapshots and restores prior inline values;
+    CSS-length resolution is memoised and probes inside the popover for correct token scope;
+    placement resolution is stable across renders.
+
 ## 0.9.0
 
 ### Minor Changes

package/README.md

@@ -11,7 +11,7 @@ Placement is owned by this compound: root provides it via context, Content appli
 Positioning or JS fallback).
 
 ```tsx
-<Popup placement="block-end" onClose={handleClose}>
+<Popup onClose={handleClose}>
 	<Popup.Trigger>
 		<button>Open</button>
 	</Popup.Trigger>
@@ -21,6 +21,10 @@ Positioning or JS fallback).
 </Popup>
 ```
 
+`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).
 

package/dialog/create-close-event/package.json

@@ -0,0 +1,17 @@
+{
+  "name": "@atlaskit/top-layer/dialog/create-close-event",
+  "main": "../../dist/cjs/entry-points/dialog/create-close-event.js",
+  "module": "../../dist/esm/entry-points/dialog/create-close-event.js",
+  "module:es2019": "../../dist/es2019/entry-points/dialog/create-close-event.js",
+  "sideEffects": [
+    "*.compiled.css"
+  ],
+  "types": "../../dist/types/entry-points/dialog/create-close-event.d.ts",
+  "typesVersions": {
+    ">=4.5 <5.9": {
+      "*": [
+        "../../dist/types-ts4.5/entry-points/dialog/create-close-event.d.ts"
+      ]
+    }
+  }
+}

package/dist/cjs/animations/presets.js

@@ -8,7 +8,7 @@ exports.dialogSlideUpAndFade = dialogSlideUpAndFade;
 exports.fade = fade;
 exports.scaleAndFade = scaleAndFade;
 exports.slideAndFade = slideAndFade;
-var _useAnchorPosition = require("../internal/use-anchor-position");
+var _resolvePlacement = require("../internal/resolve-placement");
 // ── slideAndFade ──
 
 function getSlideAndFadeProperties(_ref) {
@@ -16,7 +16,7 @@ function getSlideAndFadeProperties(_ref) {
     distance = _ref.distance;
   var pos = "".concat(distance, "px");
   var neg = "-".concat(distance, "px");
-  var _getPlacement = (0, _useAnchorPosition.getPlacement)({
+  var _getPlacement = (0, _resolvePlacement.getPlacement)({
       placement: placement
     }),
     axis = _getPlacement.axis,
@@ -168,8 +168,10 @@ var DIALOG_SLIDE_UP_AND_FADE_CSS = "\n[data-ds-dialog-slide-up-and-fade] {\n  op
 function dialogSlideUpAndFade(options) {
   var _options$distance2;
   var distance = (_options$distance2 = options === null || options === void 0 ? void 0 : options.distance) !== null && _options$distance2 !== void 0 ? _options$distance2 : 12;
+
+  // Bare preset name; `Dialog` prefixes it via `data-ds-dialog-{name}`.
   return {
-    name: distance === 12 ? 'dialog-slide-up-and-fade' : "dialog-slide-up-and-fade-".concat(distance),
+    name: distance === 12 ? 'slide-up-and-fade' : "slide-up-and-fade-".concat(distance),
     css: distance === 12 ? DIALOG_SLIDE_UP_AND_FADE_CSS : DIALOG_SLIDE_UP_AND_FADE_CSS.replace(/12px/g, "".concat(distance, "px")),
     exitDurationMs: 175
   };
@@ -195,8 +197,9 @@ var DIALOG_FADE_CSS = "\n[data-ds-dialog-fade] {\n  opacity: 0;\n  transition:\n
  */
 // eslint-disable-next-line @atlaskit/volt-strict-mode/no-multiple-exports
 function dialogFade() {
+  // Bare preset name; `Dialog` prefixes it via `data-ds-dialog-{name}`.
   return {
-    name: 'dialog-fade',
+    name: 'fade',
     css: DIALOG_FADE_CSS,
     exitDurationMs: 175
   };

package/dist/cjs/arrow/index.js

@@ -0,0 +1,131 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.arrow = void 0;
+var _once = _interopRequireDefault(require("@atlaskit/ds-lib/once"));
+var _resolvePlacement = require("../internal/resolve-placement");
+var _useAnchorPosition = require("../internal/use-anchor-position");
+/**
+ * CSS for popover arrows using the `clip-path: inset() margin-box` technique.
+ *
+ * How it works:
+ * 1. Four arrow shapes exist simultaneously as `::before` (top/bottom) and
+ *    `::after` (left/right) hexagonal pseudo-elements.
+ * 2. `clip-path: inset(0) margin-box` clips the popover to its margin-box.
+ * 3. Margin on the anchor-facing side pushes the popover away, creating space
+ *    where one arrow "escapes" the clip boundary and becomes visible.
+ * 4. `@position-try` rules change both `position-area` and `margin` when
+ *    flipping, ensuring the correct arrow is always shown.
+ *
+ * Constraints:
+ * - `box-shadow` must be `none` (interferes with `clip-path: inset() margin-box`)
+ * - `::before` and `::after` are consumed - consumers cannot use them
+ * - Arrow pseudo-elements use `background: inherit` from the popover element
+ *
+ * @see https://goulet.dev/posts/tooltip-with-popover-and-anchor-positioning/
+ */
+var ARROW_CSS = "\n[data-ds-popover-arrow] {\n  clip-path: inset(var(--ds-arrow-offset, 0px)) margin-box;\n  box-shadow: none;\n}\n\n/* Top and Bottom arrows (vertical hexagon) */\n[data-ds-popover-arrow]::before {\n  content: \"\";\n  position: absolute;\n  z-index: -1;\n  background: inherit;\n  left: 50%;\n  transform: translateX(-50%);\n  width: calc(var(--ds-arrow-size, 8px) * 2);\n  height: calc(100% + var(--ds-arrow-size, 8px) * 2);\n  top: calc(var(--ds-arrow-size, 8px) * -1);\n  clip-path: polygon(\n    0 var(--ds-arrow-size, 8px),\n    50% 0,\n    100% var(--ds-arrow-size, 8px),\n    100% calc(100% - var(--ds-arrow-size, 8px)),\n    50% 100%,\n    0 calc(100% - var(--ds-arrow-size, 8px))\n  );\n}\n\n/* Left and Right arrows (horizontal hexagon) */\n[data-ds-popover-arrow]::after {\n  content: \"\";\n  position: absolute;\n  z-index: -1;\n  background: inherit;\n  top: 50%;\n  transform: translateY(-50%);\n  height: calc(var(--ds-arrow-size, 8px) * 2);\n  width: calc(100% + var(--ds-arrow-size, 8px) * 2);\n  left: calc(var(--ds-arrow-size, 8px) * -1);\n  clip-path: polygon(\n    var(--ds-arrow-size, 8px) 0,\n    calc(100% - var(--ds-arrow-size, 8px)) 0,\n    100% 50%,\n    calc(100% - var(--ds-arrow-size, 8px)) 100%,\n    var(--ds-arrow-size, 8px) 100%,\n    0 50%\n  );\n}\n\n/* \u2500\u2500 @position-try rules \u2500\u2500\n * One rule per possible position-area value.\n * Each sets the position-area and the correct margin direction\n * so the arrow on the anchor-facing side is revealed.\n *\n * Margin direction per edge:\n *   block-start  (above anchor) \u2192 margin-block-end   (bottom, facing anchor)\n *   block-end    (below anchor) \u2192 margin-block-start  (top, facing anchor)\n *   inline-start (left of anchor) \u2192 margin-inline-end (right, facing anchor)\n *   inline-end   (right of anchor) \u2192 margin-inline-start (left, facing anchor)\n */\n\n/* Each rule sets two margins: the anchor-facing margin for the gap\n   (via --ds-arrow-size) and one cross-axis margin for the shift\n   (via one of --ds-cross-axis-shift-margin-start, --ds-cross-axis-shift-margin-end,\n   --ds-cross-axis-shift-margin-block-start, or --ds-cross-axis-shift-margin-block-end). The\n   side matches the popover's anchored cross-axis edge per align. Only\n   one of the four properties is non-zero at a time; useAnchorPosition\n   picks it. See notes/architecture/positioning.md for details. */\n/* Single-axis centered (align: center) */\n@position-try --ds-arrow-block-start {\n  position-area: block-start;\n  margin: 0;\n  margin-block-end: var(--ds-arrow-size, 8px);\n  margin-inline-start: var(--ds-cross-axis-shift-margin-start, 0px);\n}\n@position-try --ds-arrow-block-end {\n  position-area: block-end;\n  margin: 0;\n  margin-block-start: var(--ds-arrow-size, 8px);\n  margin-inline-start: var(--ds-cross-axis-shift-margin-start, 0px);\n}\n@position-try --ds-arrow-inline-start {\n  position-area: inline-start;\n  margin: 0;\n  margin-inline-end: var(--ds-arrow-size, 8px);\n  margin-block-start: var(--ds-cross-axis-shift-margin-block-start, 0px);\n}\n@position-try --ds-arrow-inline-end {\n  position-area: inline-end;\n  margin: 0;\n  margin-inline-start: var(--ds-arrow-size, 8px);\n  margin-block-start: var(--ds-cross-axis-shift-margin-block-start, 0px);\n}\n\n/* Block edge + inline span (align: start uses span-inline-end; align: end uses span-inline-start) */\n@position-try --ds-arrow-block-start-span-inline-start {\n  position-area: block-start span-inline-start;\n  margin: 0;\n  margin-block-end: var(--ds-arrow-size, 8px);\n  margin-inline-end: var(--ds-cross-axis-shift-margin-end, 0px);\n}\n@position-try --ds-arrow-block-start-span-inline-end {\n  position-area: block-start span-inline-end;\n  margin: 0;\n  margin-block-end: var(--ds-arrow-size, 8px);\n  margin-inline-start: var(--ds-cross-axis-shift-margin-start, 0px);\n}\n@position-try --ds-arrow-block-end-span-inline-start {\n  position-area: block-end span-inline-start;\n  margin: 0;\n  margin-block-start: var(--ds-arrow-size, 8px);\n  margin-inline-end: var(--ds-cross-axis-shift-margin-end, 0px);\n}\n@position-try --ds-arrow-block-end-span-inline-end {\n  position-area: block-end span-inline-end;\n  margin: 0;\n  margin-block-start: var(--ds-arrow-size, 8px);\n  margin-inline-start: var(--ds-cross-axis-shift-margin-start, 0px);\n}\n\n/* Inline edge + block span (align: start uses span-block-end; align: end uses span-block-start) */\n@position-try --ds-arrow-inline-start-span-block-start {\n  position-area: inline-start span-block-start;\n  margin: 0;\n  margin-inline-end: var(--ds-arrow-size, 8px);\n  margin-block-end: var(--ds-cross-axis-shift-margin-block-end, 0px);\n}\n@position-try --ds-arrow-inline-start-span-block-end {\n  position-area: inline-start span-block-end;\n  margin: 0;\n  margin-inline-end: var(--ds-arrow-size, 8px);\n  margin-block-start: var(--ds-cross-axis-shift-margin-block-start, 0px);\n}\n@position-try --ds-arrow-inline-end-span-block-start {\n  position-area: inline-end span-block-start;\n  margin: 0;\n  margin-inline-start: var(--ds-arrow-size, 8px);\n  margin-block-end: var(--ds-cross-axis-shift-margin-block-end, 0px);\n}\n@position-try --ds-arrow-inline-end-span-block-end {\n  position-area: inline-end span-block-end;\n  margin: 0;\n  margin-inline-start: var(--ds-arrow-size, 8px);\n  margin-block-start: var(--ds-cross-axis-shift-margin-block-start, 0px);\n}\n";
+
+// ── Placement utilities ──
+
+/**
+ * Converts a `position-area` value to a CSS rule name by replacing spaces with hyphens
+ * and prepending `--ds-arrow-`.
+ *
+ * @example positionAreaToRuleName('block-end span-inline-start') → '--ds-arrow-block-end-span-inline-start'
+ */
+function positionAreaToRuleName(_ref) {
+  var positionArea = _ref.positionArea;
+  return "--ds-arrow-".concat(positionArea.replace(/ /g, '-'));
+}
+
+/**
+ * Returns `position-try-fallbacks` using named `@position-try` rules
+ * that change both `position-area` and `margin` when flipping.
+ *
+ * This is required for the arrow technique because built-in keywords
+ * (`flip-block`, `flip-inline`) only flip `position-area` - they do
+ * not update the margin direction needed to reveal the correct arrow.
+ */
+function getTryFallbacks(_ref2) {
+  var placement = _ref2.placement;
+  var _getPlacement = (0, _resolvePlacement.getPlacement)({
+      placement: placement
+    }),
+    axis = _getPlacement.axis,
+    edge = _getPlacement.edge,
+    align = _getPlacement.align;
+  if (align === 'center') {
+    // Single-axis: only flip the edge
+    var _flippedEdge = edge === 'start' ? 'end' : 'start';
+    return positionAreaToRuleName({
+      positionArea: (0, _useAnchorPosition.placementToPositionArea)({
+        placement: {
+          axis: axis,
+          edge: _flippedEdge
+        }
+      })
+    });
+  }
+
+  // Compound placement: try flipping edge, alignment, and both
+  var flippedEdge = edge === 'start' ? 'end' : 'start';
+  var flippedAlign = align === 'start' ? 'end' : 'start';
+  return [positionAreaToRuleName({
+    positionArea: (0, _useAnchorPosition.placementToPositionArea)({
+      placement: {
+        axis: axis,
+        edge: flippedEdge,
+        align: align
+      }
+    })
+  }), positionAreaToRuleName({
+    positionArea: (0, _useAnchorPosition.placementToPositionArea)({
+      placement: {
+        axis: axis,
+        edge: edge,
+        align: flippedAlign
+      }
+    })
+  }), positionAreaToRuleName({
+    positionArea: (0, _useAnchorPosition.placementToPositionArea)({
+      placement: {
+        axis: axis,
+        edge: flippedEdge,
+        align: flippedAlign
+      }
+    })
+  })].join(', ');
+}
+
+/**
+ * Creates an arrow preset for popover content.
+ *
+ * The returned object is passed to `PopoverContent`'s `arrow` prop.
+ * It carries the CSS string and fallback logic so that consumers who
+ * do not use arrows pay no bundle cost.
+ *
+ * The arrows inherit their background from the popover element.
+ * When `arrow` is active, `PopoverContent` does not reset `background`
+ * to `transparent`, allowing the UA default (`canvas`) or a consumer-set
+ * background to show through.
+ *
+ * @example
+ * ```tsx
+ * import { arrow } from '@atlaskit/top-layer/arrow';
+ *
+ * const myArrow = arrow();
+ *
+ * <Popup.Content arrow={myArrow} />
+ * ```
+ */
+var arrow = exports.arrow = (0, _once.default)(function () {
+  return {
+    name: 'arrow',
+    css: ARROW_CSS,
+    getTryFallbacks: getTryFallbacks
+  };
+});

package/dist/cjs/arrow/types.js

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

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

@@ -25,7 +25,7 @@ var styles = {
 };
 
 /**
- * Low-level `<dialog>` primitive. No visual opinions — no width, height,
+ * Low-level `<dialog>` primitive. No visual opinions - no width, height,
  * background, border-radius, or layout. Consumers provide their own styling.
  *
  * Visibility is controlled declaratively via `isOpen`:
@@ -36,6 +36,10 @@ var styles = {
  *
  * Close flow: we never call `dialog.close()` from event handlers. We always call
  * `onClose`; the consumer decides whether to set `isOpen={false}`.
+ *
+ * Accessibility: render at least one focusable element (typically a close
+ * button) when `isOpen` becomes `true`. Tab is always trapped inside the
+ * dialog, so keyboard users need somewhere to land.
  */
 var Dialog = exports.Dialog = /*#__PURE__*/(0, _react.forwardRef)(function Dialog(_ref, ref) {
   var children = _ref.children,
@@ -141,18 +145,19 @@ var Dialog = exports.Dialog = /*#__PURE__*/(0, _react.forwardRef)(function Dialo
   return /*#__PURE__*/_react.default.createElement("dialog", (0, _extends2.default)({
     ref: combinedRef,
     id: dialogId
-    // Modern browsers infer modal semantics from `.showModal()` but
-    // some assistive tech still keys off `aria-modal="true"`. Setting
-    // it explicitly is recommended by WAI-ARIA APG dialog pattern.
+    // `aria-modal` is intentionally NOT set: native `<dialog>.showModal()`
+    // already conveys modal semantics to assistive tech, and double-
+    // declaring it forecloses non-modal use cases (consumers calling
+    // `.show()` would still appear modal). Modern AT (NVDA / JAWS /
+    // VoiceOver) infer modality from the platform accessibility API.
     ,
-    "aria-modal": "true",
     "aria-label": label,
     "aria-labelledby": label ? undefined : labelledBy,
     // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
     style: style,
     onCancel: handleCancel,
     "data-testid": testId
-  }, preset ? (0, _defineProperty2.default)({}, "data-ds-".concat(preset.name), '') : undefined, {
+  }, preset ? (0, _defineProperty2.default)({}, "data-ds-dialog-".concat(preset.name), '') : undefined, {
     className: (0, _runtime.ax)([styles.dialog])
   }), shouldHideBackdrop &&
   /*#__PURE__*/

package/dist/cjs/entry-points/dialog/create-close-event.js

@@ -0,0 +1,12 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "createCloseEvent", {
+  enumerable: true,
+  get: function get() {
+    return _createCloseEvent.createCloseEvent;
+  }
+});
+var _createCloseEvent = require("../../dialog/create-close-event");

package/dist/cjs/entry-points/placement-map.js

@@ -3,16 +3,17 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-Object.defineProperty(exports, "fromLegacyPlacement", {
+Object.defineProperty(exports, "LEGACY_PLACEMENTS", {
   enumerable: true,
   get: function get() {
-    return _placementMap.fromLegacyPlacement;
+    return _legacyPlacements.LEGACY_PLACEMENTS;
   }
 });
-Object.defineProperty(exports, "placementMapping", {
+Object.defineProperty(exports, "fromLegacyPlacement", {
   enumerable: true,
   get: function get() {
-    return _placementMap.placementMapping;
+    return _placementMap.fromLegacyPlacement;
   }
 });
-var _placementMap = require("../placement-map");
+var _placementMap = require("../placement-map");
+var _legacyPlacements = require("../placement-map/legacy-placements");

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

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

package/dist/cjs/focus/focus.js

@@ -6,6 +6,8 @@ Object.defineProperty(exports, "__esModule", {
 exports.getFirstFocusable = getFirstFocusable;
 exports.getLastFocusable = getLastFocusable;
 exports.getNextFocusable = getNextFocusable;
+exports.isNestedLayerFocused = isNestedLayerFocused;
+var _browserApis = require("@atlaskit/browser-apis");
 /**
  * Focusable element selectors and navigation helpers.
  *
@@ -25,9 +27,54 @@ var selectors = function () {
   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(','),
-    focused: focusable.join(':focus,') + ':focus'
+    // Build the `:focus` selector
+    focused: focusable.map(function (selector) {
+      return "".concat(selector, ":focus");
+    }).join(',')
   };
 }();
+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;
+}
+
+/**
+ * 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(_ref2) {
+  var _getDocument;
+  var container = _ref2.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 !isInSameLayer({
+    element: focused,
+    container: container
+  });
+}
 
 /**
  * An optional callback to restrict which focusable elements are included.
@@ -37,17 +84,21 @@ var selectors = function () {
 /**
  * Returns all focusable HTMLElements within the container, optionally filtered.
  *
- * Note: this searches the full subtree and does not stop at nested
- * popover/dialog boundaries. In practice this is fine because nested
- * popovers are not rendered until they are opened, so their content
- * is not in the DOM when the parent's initial focus runs. If that
- * assumption changes, this would need to be scoped to the current layer.
+ * 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;
+function getFocusables(_ref3) {
+  var container = _ref3.container,
+    filter = _ref3.filter;
   return Array.from(container.querySelectorAll(selectors.focusable)).filter(function (element) {
     return element instanceof HTMLElement;
+  }).filter(function (element) {
+    return isInSameLayer({
+      element: element,
+      container: container
+    });
   }).filter(function (element) {
     return !filter || filter(element, container);
   });
@@ -56,9 +107,10 @@ function getFocusables(_ref) {
 /**
  * Returns the first focusable element within the container.
  */
-function getFirstFocusable(_ref2) {
-  var container = _ref2.container,
-    filter = _ref2.filter;
+// eslint-disable-next-line @atlaskit/volt-strict-mode/no-multiple-exports
+function getFirstFocusable(_ref4) {
+  var container = _ref4.container,
+    filter = _ref4.filter;
   var items = getFocusables({
     container: container,
     filter: filter
@@ -70,9 +122,9 @@ function getFirstFocusable(_ref2) {
  * Returns the last focusable element within the container.
  */
 // eslint-disable-next-line @atlaskit/volt-strict-mode/no-multiple-exports
-function getLastFocusable(_ref3) {
-  var container = _ref3.container,
-    filter = _ref3.filter;
+function getLastFocusable(_ref5) {
+  var container = _ref5.container,
+    filter = _ref5.filter;
   var items = getFocusables({
     container: container,
     filter: filter
@@ -88,11 +140,11 @@ function getLastFocusable(_ref3) {
  * the focused element is not in the list of focusable elements.
  */
 // eslint-disable-next-line @atlaskit/volt-strict-mode/no-multiple-exports
-function getNextFocusable(_ref4) {
+function getNextFocusable(_ref6) {
   var _all$nextIndex;
-  var container = _ref4.container,
-    direction = _ref4.direction,
-    filter = _ref4.filter;
+  var container = _ref6.container,
+    direction = _ref6.direction,
+    filter = _ref6.filter;
   var all = getFocusables({
     container: container,
     filter: filter

package/dist/cjs/index.js

@@ -1,8 +1,7 @@
 // This file exists for module resolution purposes.
 // Not exporting anything from the root entry point.
-// Please use individual entry points for minimum bundle size:
 //
-//   import { Popup } from '@atlaskit/top-layer/popup';
-//   import { Dialog } from '@atlaskit/top-layer/dialog';
-//   import { Popover } from '@atlaskit/top-layer/popover';
+// Use individual entry points for minimum bundle size - the full list of
+// available subpaths is the `"exports"` field in this package's
+// `package.json`. The README documents the most common ones.
 "use strict";

package/dist/cjs/internal/resolve-css-length-to-pixels.js

@@ -4,6 +4,35 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.resolveCssLengthToPixels = resolveCssLengthToPixels;
+var elementCaches = new WeakMap();
+function canCacheResolvedLength(value) {
+  // Custom-property values can be retargeted by inline overrides on the
+  // consumer's wrapper, so we cannot prove a cached pixel value is still valid.
+  return !value.includes('var(');
+}
+function getCachedResolvedLength(_ref) {
+  var _cacheForElement$get;
+  var element = _ref.element,
+    value = _ref.value;
+  if (!canCacheResolvedLength(value)) {
+    return null;
+  }
+  var cacheForElement = elementCaches.get(element);
+  return (_cacheForElement$get = cacheForElement === null || cacheForElement === void 0 ? void 0 : cacheForElement.get(value)) !== null && _cacheForElement$get !== void 0 ? _cacheForElement$get : null;
+}
+function cacheResolvedLength(_ref2) {
+  var _elementCaches$get;
+  var element = _ref2.element,
+    value = _ref2.value,
+    result = _ref2.result;
+  if (!canCacheResolvedLength(value)) {
+    return;
+  }
+  var cacheForElement = (_elementCaches$get = elementCaches.get(element)) !== null && _elementCaches$get !== void 0 ? _elementCaches$get : new Map();
+  cacheForElement.set(value, result);
+  elementCaches.set(element, cacheForElement);
+}
+
 /**
  * Resolves a CSS length value to a pixel number using a hidden DOM probe.
  *
@@ -14,27 +43,39 @@ exports.resolveCssLengthToPixels = resolveCssLengthToPixels;
  * the browser do the math.
  *
  * The probe is appended to `container` so it inherits the same containing
- * block, font size, and custom-property scope as the popover. We use `width`
- * because it accepts any CSS length, including negative `calc()` results
- * (negative widths are clamped to 0 — see note below).
+ * block, font size, and custom-property scope as the popover.
  *
- * Cost: one synchronous reflow per call. The fallback only resolves on
- * placement/offset changes, not on every scroll/resize update, so this is
- * not a hot path.
+ * Cost: one synchronous reflow on first cacheable resolution per
+ * (container, value) pair, then a `WeakMap` lookup. Resolutions involving
+ * `var(` are intentionally not cached.
  */
-function resolveCssLengthToPixels(_ref) {
-  var value = _ref.value,
-    container = _ref.container;
+function resolveCssLengthToPixels(_ref3) {
+  var value = _ref3.value,
+    container = _ref3.container;
   if (typeof value === 'number') {
     return value;
   }
 
+  // Fast path: unitless zero is universally zero pixels - accept `'0'` and
+  // `'-0'` without a probe. (Consumers occasionally pass `'0'` instead of
+  // the number `0`.)
+  if (value === '0' || value === '-0') {
+    return 0;
+  }
+
   // Fast path: bare `${n}px` strings come from the consumer normalisation
   // in `getPlacement`. Avoid a reflow when we can.
   var pxMatch = value.match(/^(-?\d+(?:\.\d+)?)px$/);
   if (pxMatch) {
     return Number(pxMatch[1]);
   }
+  var cached = getCachedResolvedLength({
+    element: container,
+    value: value
+  });
+  if (cached !== null) {
+    return cached;
+  }
   var probe = container.ownerDocument.createElement('div');
   probe.style.position = 'absolute';
   probe.style.visibility = 'hidden';
@@ -46,8 +87,18 @@ function resolveCssLengthToPixels(_ref) {
   // preserved. `getComputedStyle` returns the resolved pixel value for
   // margin-* properties even when the source was a token / calc / var.
   probe.style.marginLeft = value;
+  // Hide the probe from assistive tech and event targeting; defensive
+  // against `getElementsByTagName('div')` walks in consumer code.
+  probe.setAttribute('aria-hidden', 'true');
+  probe.setAttribute('inert', '');
   container.appendChild(probe);
   var resolved = parseFloat(getComputedStyle(probe).marginLeft);
   container.removeChild(probe);
-  return Number.isFinite(resolved) ? resolved : 0;
+  var result = Number.isFinite(resolved) ? resolved : 0;
+  cacheResolvedLength({
+    element: container,
+    value: value,
+    result: result
+  });
+  return result;
 }