@atlaskit/top-layer 0.12.2 → 0.13.0

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

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

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

@@ -197,18 +197,21 @@ function useStablePlacement(placement) {
  * comparison is used internally so re-runs are skipped when the resolved
  * placement shape is unchanged.
  */
-// eslint-disable-next-line @atlaskit/volt-strict-mode/no-multiple-exports
 export function useAnchorPosition({
   anchorRef,
   popoverRef,
   placement = {},
-  forceFallbackPositioning = false
+  forceFallbackPositioning = false,
+  isEnabled = true
 }) {
   const id = useId();
   // Stabilize `placement` object so the same object literal
   // value returns an object with the same reference
   const stablePlacement = useStablePlacement(placement);
   useLayoutEffect(() => {
+    if (!isEnabled) {
+      return;
+    }
     const trigger = anchorRef.current;
     const popover = popoverRef.current;
     if (!trigger || !popover) {
@@ -456,5 +459,5 @@ export function useAnchorPosition({
       popover.style.removeProperty('opacity');
     });
     return undoPositioning;
-  }, [anchorRef, popoverRef, stablePlacement, forceFallbackPositioning, id]);
+  }, [anchorRef, popoverRef, stablePlacement, forceFallbackPositioning, isEnabled, id]);
 }

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

@@ -1,6 +1,9 @@
 import { useEffect } from 'react';
 import { bind } from 'bind-event-listener';
-import { getFirstFocusable, getLastFocusable, getNextFocusable, isNestedLayerFocused } from '../focus/focus';
+import { getFirstFocusable } from '../focus/get-first-focusable';
+import { getLastFocusable } from '../focus/get-last-focusable';
+import { getNextFocusable } from '../focus/get-next-focusable';
+import { isNestedLayerFocused } from '../focus/is-nested-layer-focused';
 
 /**
  * Roles that require focus wrapping per WAI-ARIA APG.

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

@@ -1,5 +1,5 @@
 import { useEffect, useRef } from 'react';
-import { getFirstFocusable } from '../focus/focus';
+import { getFirstFocusable } from '../focus/get-first-focusable';
 
 /**
  * Determines the correct element to receive initial focus within a popover,

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

@@ -1,4 +1,4 @@
-import { placementMapping } from './legacy-placements';
+import { placementMapping } from './placement-mapping';
 
 /**
  * Maps legacy Popper.js placement values to the new object-based

package/dist/es2019/placement-map/legacy-placements.js

@@ -5,103 +5,4 @@
  * to enumerate every placement (e.g. for a settings dropdown). New code
  * should use the object-based `TPlacementOptions` directly.
  */
-// eslint-disable-next-line @atlaskit/volt-strict-mode/no-multiple-exports
-export const LEGACY_PLACEMENTS = ['auto', 'auto-start', 'auto-end', 'top', 'top-start', 'top-center', 'top-end', 'bottom', 'bottom-start', 'bottom-center', 'bottom-end', 'right', 'right-start', 'right-end', 'left', 'left-start', 'left-end'];
-/**
- * The full mapping record. Internal - use `fromLegacyPlacement` from the
- * public entry-point so the offset-tuple translation is applied consistently.
- *
- * Note: `auto`, `auto-start`, `auto-end` map to `block-end` placements. This
- * is a reduction in expressiveness vs Popper.js (which picked the best
- * placement at runtime). CSS `position-try-fallbacks` flips at the edge but
- * the initial placement is fixed. Migration consumers who relied on Popper's
- * dynamic auto-flip should pick an explicit placement instead.
- */
-// eslint-disable-next-line @atlaskit/volt-strict-mode/no-multiple-exports
-export const placementMapping = {
-  top: {
-    axis: 'block',
-    edge: 'start',
-    align: 'center'
-  },
-  'top-start': {
-    axis: 'block',
-    edge: 'start',
-    align: 'start'
-  },
-  'top-center': {
-    axis: 'block',
-    edge: 'start',
-    align: 'center'
-  },
-  'top-end': {
-    axis: 'block',
-    edge: 'start',
-    align: 'end'
-  },
-  bottom: {
-    axis: 'block',
-    edge: 'end',
-    align: 'center'
-  },
-  'bottom-start': {
-    axis: 'block',
-    edge: 'end',
-    align: 'start'
-  },
-  'bottom-center': {
-    axis: 'block',
-    edge: 'end',
-    align: 'center'
-  },
-  'bottom-end': {
-    axis: 'block',
-    edge: 'end',
-    align: 'end'
-  },
-  right: {
-    axis: 'inline',
-    edge: 'end',
-    align: 'center'
-  },
-  'right-start': {
-    axis: 'inline',
-    edge: 'end',
-    align: 'start'
-  },
-  'right-end': {
-    axis: 'inline',
-    edge: 'end',
-    align: 'end'
-  },
-  left: {
-    axis: 'inline',
-    edge: 'start',
-    align: 'center'
-  },
-  'left-start': {
-    axis: 'inline',
-    edge: 'start',
-    align: 'start'
-  },
-  'left-end': {
-    axis: 'inline',
-    edge: 'start',
-    align: 'end'
-  },
-  auto: {
-    axis: 'block',
-    edge: 'end',
-    align: 'center'
-  },
-  'auto-start': {
-    axis: 'block',
-    edge: 'end',
-    align: 'start'
-  },
-  'auto-end': {
-    axis: 'block',
-    edge: 'end',
-    align: 'end'
-  }
-};
+export const LEGACY_PLACEMENTS = ['auto', 'auto-start', 'auto-end', 'top', 'top-start', 'top-center', 'top-end', 'bottom', 'bottom-start', 'bottom-center', 'bottom-end', 'right', 'right-start', 'right-end', 'left', 'left-start', 'left-end'];

package/dist/es2019/placement-map/placement-mapping.js

@@ -0,0 +1,97 @@
+/**
+ * The full mapping record. Internal - use `fromLegacyPlacement` from the
+ * public entry-point so the offset-tuple translation is applied consistently.
+ *
+ * Note: `auto`, `auto-start`, `auto-end` map to `block-end` placements. This
+ * is a reduction in expressiveness vs Popper.js (which picked the best
+ * placement at runtime). CSS `position-try-fallbacks` flips at the edge but
+ * the initial placement is fixed. Migration consumers who relied on Popper's
+ * dynamic auto-flip should pick an explicit placement instead.
+ */
+export const placementMapping = {
+  top: {
+    axis: 'block',
+    edge: 'start',
+    align: 'center'
+  },
+  'top-start': {
+    axis: 'block',
+    edge: 'start',
+    align: 'start'
+  },
+  'top-center': {
+    axis: 'block',
+    edge: 'start',
+    align: 'center'
+  },
+  'top-end': {
+    axis: 'block',
+    edge: 'start',
+    align: 'end'
+  },
+  bottom: {
+    axis: 'block',
+    edge: 'end',
+    align: 'center'
+  },
+  'bottom-start': {
+    axis: 'block',
+    edge: 'end',
+    align: 'start'
+  },
+  'bottom-center': {
+    axis: 'block',
+    edge: 'end',
+    align: 'center'
+  },
+  'bottom-end': {
+    axis: 'block',
+    edge: 'end',
+    align: 'end'
+  },
+  right: {
+    axis: 'inline',
+    edge: 'end',
+    align: 'center'
+  },
+  'right-start': {
+    axis: 'inline',
+    edge: 'end',
+    align: 'start'
+  },
+  'right-end': {
+    axis: 'inline',
+    edge: 'end',
+    align: 'end'
+  },
+  left: {
+    axis: 'inline',
+    edge: 'start',
+    align: 'center'
+  },
+  'left-start': {
+    axis: 'inline',
+    edge: 'start',
+    align: 'start'
+  },
+  'left-end': {
+    axis: 'inline',
+    edge: 'start',
+    align: 'end'
+  },
+  auto: {
+    axis: 'block',
+    edge: 'end',
+    align: 'center'
+  },
+  'auto-start': {
+    axis: 'block',
+    edge: 'end',
+    align: 'start'
+  },
+  'auto-end': {
+    axis: 'block',
+    edge: 'end',
+    align: 'end'
+  }
+};

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

@@ -4,7 +4,8 @@ import { ax, ix } from "@compiled/react/runtime";
 import React, { forwardRef, useCallback, useLayoutEffect, useRef } from 'react';
 import mergeRefs from '@atlaskit/ds-lib/merge-refs';
 import { prefersReducedMotion } from '../internal/reduced-motion';
-import { roleToAriaHasPopup, shouldFocusIntoPopover } from '../internal/role-types';
+import { roleToAriaHasPopup } from '../internal/role-to-aria-has-popup';
+import { shouldFocusIntoPopover } from '../internal/should-focus-into-popover';
 import { useAnchorPosition } from '../internal/use-anchor-position';
 import { useWidthFromAnchor } from '../internal/use-width-from-anchor';
 import { Popover } from '../popover/popover';

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

@@ -2,7 +2,9 @@ import { useCallback, useEffect } from 'react';
 import { bind } from 'bind-event-listener';
 import { getDocument } from '@atlaskit/browser-apis';
 import { KEY_DOWN, KEY_END, KEY_HOME, KEY_TAB, KEY_UP } from '@atlaskit/ds-lib/keycodes';
-import { getFirstFocusable, getLastFocusable, getNextFocusable } from '../focus';
+import { getFirstFocusable } from '../focus/get-first-focusable';
+import { getLastFocusable } from '../focus/get-last-focusable';
+import { getNextFocusable } from '../focus/get-next-focusable';
 const menuScope = '[role="menu"]';
 
 /**

package/dist/esm/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/esm/entry-points/use-anchor-position-at-point.js

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

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

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

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

@@ -0,0 +1,24 @@
+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(_ref) {
+  var container = _ref.container,
+    filter = _ref.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);
+  });
+}

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

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

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

@@ -0,0 +1,37 @@
+/**
+ * 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(_ref) {
+  var _all$nextIndex;
+  var container = _ref.container,
+    direction = _ref.direction,
+    filter = _ref.filter;
+  var all = getFocusables({
+    container: container,
+    filter: filter
+  });
+  var current = container.querySelector(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/esm/focus/is-in-same-layer.js

@@ -0,0 +1,17 @@
+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).
+ */
+export 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/esm/focus/is-nested-layer-focused.js

@@ -0,0 +1,27 @@
+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(_ref) {
+  var _getDocument;
+  var container = _ref.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
+  });
+}

package/dist/esm/focus/selectors.js

@@ -0,0 +1,13 @@
+export var 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/esm/internal/role-to-aria-has-popup.js

@@ -0,0 +1,31 @@
+/**
+ * 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(_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;
+}