@atlaskit/top-layer 0.8.0 → 0.10.0

package/dist/esm/focus/focus.js

@@ -10,6 +10,7 @@
  * restrict which focusable elements are included.
  */
 
+import { getDocument } from '@atlaskit/browser-apis';
 var selectors = function () {
   // Common exclusion filter applied to every selector.
   var not = ':not([tabindex="-1"]):not([aria-disabled="true"]):not([aria-hidden="true"])';
@@ -17,9 +18,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`).
+ */
+export function isNestedLayerFocused(_ref2) {
+  var _getDocument;
+  var container = _ref2.container;
+  var 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: container
+  });
+}
 
 /**
  * An optional callback to restrict which focusable elements are included.
@@ -29,17 +75,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);
   });
@@ -48,9 +98,10 @@ function getFocusables(_ref) {
 /**
  * Returns the first focusable element within the container.
  */
-export function getFirstFocusable(_ref2) {
-  var container = _ref2.container,
-    filter = _ref2.filter;
+// eslint-disable-next-line @atlaskit/volt-strict-mode/no-multiple-exports
+export function getFirstFocusable(_ref4) {
+  var container = _ref4.container,
+    filter = _ref4.filter;
   var items = getFocusables({
     container: container,
     filter: filter
@@ -61,9 +112,10 @@ export function getFirstFocusable(_ref2) {
 /**
  * Returns the last focusable element within the container.
  */
-export function getLastFocusable(_ref3) {
-  var container = _ref3.container,
-    filter = _ref3.filter;
+// eslint-disable-next-line @atlaskit/volt-strict-mode/no-multiple-exports
+export function getLastFocusable(_ref5) {
+  var container = _ref5.container,
+    filter = _ref5.filter;
   var items = getFocusables({
     container: container,
     filter: filter
@@ -78,11 +130,12 @@ export function getLastFocusable(_ref3) {
  * Returns `null` if there is no focused element within the container or if
  * the focused element is not in the list of focusable elements.
  */
-export function getNextFocusable(_ref4) {
+// eslint-disable-next-line @atlaskit/volt-strict-mode/no-multiple-exports
+export 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/esm/index.js

@@ -1,7 +1,6 @@
 // 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.

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

@@ -1,3 +1,32 @@
+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.
  *
@@ -8,27 +37,39 @@
  * 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.
  */
-export function resolveCssLengthToPixels(_ref) {
-  var value = _ref.value,
-    container = _ref.container;
+export 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';
@@ -40,8 +81,18 @@ export 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;
 }

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

@@ -1,6 +1,15 @@
 /**
  * Valid values for the `aria-haspopup` attribute.
- * Derived from the HTML spec — maps popover roles to what the trigger announces.
+ *
+ * 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.
  */
 
 /**
@@ -22,21 +31,27 @@
 /**
  * ARIA role props where a role is always required.
  *
- * Used by `TPopupContentProps` — popup content must always declare
+ * 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
+ * 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
 export function roleToAriaHasPopup(_ref) {
   var role = _ref.role;
   if (role === 'menu') {
@@ -51,10 +66,25 @@ export function roleToAriaHasPopup(_ref) {
   if (role === 'grid') {
     return 'grid';
   }
-  // Default: return 'dialog' for all unmapped roles (tooltip, alertdialog,
-  // note, status, alert, log, etc). This is a kinder API — rather than
-  // throwing on unknown roles, we fall back to the most common popup type.
-  // New roles that need specific aria-haspopup values should be added
-  // as explicit cases above.
-  return 'dialog';
+  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
+export function shouldFocusIntoPopover(_ref2) {
+  var role = _ref2.role;
+  if (!role) {
+    return false;
+  }
+  return rolesThatMoveFocus.has(role);
 }

package/dist/esm/internal/set-style.js

@@ -1,36 +1,34 @@
 /**
- * Sets inline styles on an element and returns a cleanup function
- * that removes only the styles that were applied.
- *
- * Uses `style.setProperty()` / `style.removeProperty()` so that
- * hyphenated CSS property names (e.g. `position-area`, `anchor-name`)
- * work correctly. These newer properties do not have camelCase
- * mappings in `CSSStyleDeclaration` yet.
- *
- * @example
- * ```ts
- * const cleanup = setStyle({ el: popover, styles: [
- *   { property: 'position-anchor', value: '--my-anchor' },
- *   { property: 'position-area', value: 'block-end' },
- *   { property: 'margin', value: '0' },
- * ] });
- *
- * // Later: removes all three properties
- * cleanup();
- * ```
+ * Sets inline styles on an element and returns a cleanup function that
+ * restores the prior inline values (so we do not stomp consumer styles).
  */
 export function setStyle(_ref) {
   var el = _ref.el,
     styles = _ref.styles;
-  styles.forEach(function (_ref2) {
-    var property = _ref2.property,
-      value = _ref2.value;
+  // Snapshot the prior inline value (NOT the computed style - we only want
+  // to restore values that the consumer/our previous run inlined). An empty
+  // string means "no inline value", in which case cleanup uses removeProperty.
+  var priorValues = styles.map(function (_ref2) {
+    var property = _ref2.property;
+    return {
+      property: property,
+      value: el.style.getPropertyValue(property)
+    };
+  });
+  styles.forEach(function (_ref3) {
+    var property = _ref3.property,
+      value = _ref3.value;
     el.style.setProperty(property, value);
   });
   return function cleanup() {
-    styles.forEach(function (_ref3) {
-      var property = _ref3.property;
-      el.style.removeProperty(property);
+    priorValues.forEach(function (_ref4) {
+      var property = _ref4.property,
+        value = _ref4.value;
+      if (value === '') {
+        el.style.removeProperty(property);
+        return;
+      }
+      el.style.setProperty(property, value);
     });
   };
 }