@atlaskit/top-layer 0.12.2 → 0.14.0

package/dist/esm/internal/get-aria-for-trigger.js

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

package/dist/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;
+}

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

@@ -42,38 +42,6 @@
  * 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') {
-    return 'menu';
-  }
-  if (role === 'listbox') {
-    return 'listbox';
-  }
-  if (role === 'tree') {
-    return 'tree';
-  }
-  if (role === 'grid') {
-    return 'grid';
-  }
-  if (role === 'dialog' || role === 'alertdialog') {
-    return 'dialog';
-  }
-  // Non-popup roles (tooltip, note, status, alert, log) and the
-  // no-role case: omit `aria-haspopup` entirely. React drops the
-  // attribute when the value is `undefined`.
-  return undefined;
-}
 var rolesThatMoveFocus = new Set(['dialog', 'alertdialog', 'menu', 'listbox', 'tree', 'grid']);
 
 /**
@@ -81,8 +49,8 @@ var rolesThatMoveFocus = new Set(['dialog', 'alertdialog', 'menu', 'listbox', 't
  * on open, and `false` otherwise (including when `role` is `undefined`).
  */
 // eslint-disable-next-line @atlaskit/volt-strict-mode/no-multiple-exports
-export function shouldFocusIntoPopover(_ref2) {
-  var role = _ref2.role;
+export function shouldFocusIntoPopover(_ref) {
+  var role = _ref.role;
   if (!role) {
     return false;
   }

package/dist/esm/internal/should-focus-into-popover.js

@@ -0,0 +1,13 @@
+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`).
+ */
+export function shouldFocusIntoPopover(_ref) {
+  var role = _ref.role;
+  if (!role) {
+    return false;
+  }
+  return rolesThatMoveFocus.has(role);
+}

package/dist/esm/internal/slot.js

@@ -46,7 +46,7 @@ function isSlotChild(child) {
 export var Slot = /*#__PURE__*/forwardRef(function Slot(slotProps, ref) {
   var rawChildren = slotProps.children,
     props = _objectWithoutProperties(slotProps, _excluded);
-  // `TSlotProps` intersects `Record<string, unknown>`, so `children` is typed as `unknown`.
+  // `SlotProps` intersects `Record<string, unknown>`, so `children` is typed as `unknown`.
   var children = rawChildren;
   if (!isSlotChild(children)) {
     return children;

package/dist/esm/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(_ref) {
+  var popoverRef = _ref.popoverRef,
+    placement = _ref.placement,
+    getPoint = _ref.getPoint,
+    _ref$isEnabled = _ref.isEnabled,
+    isEnabled = _ref$isEnabled === void 0 ? true : _ref$isEnabled;
+  var 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.
+  var 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(function () {
+    if (!isEnabled) {
+      return;
+    }
+    var point = getPointRef.current();
+    if (!point) {
+      return;
+    }
+    var 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 = "".concat(point.y, "px");
+    anchor.style.left = "".concat(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: popoverRef,
+    placement: placement,
+    isEnabled: isEnabled
+  });
+}

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

@@ -1,3 +1,5 @@
+import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
+import _createClass from "@babel/runtime/helpers/createClass";
 /**
  * Anchor positioning for top-layer popovers. See
  * `notes/architecture/positioning.md` for the full model.
@@ -28,15 +30,25 @@ import { setStyle } from './set-style';
 // from `./resolve-placement` so search-and-jump lands at the source of truth.
 
 /**
- * Module-scope no-op `ResizeObserver` stub used in non-DOM jest environments where
+ * Module-scope no-op `ResizeObserver` used in non-DOM jest environments where
  * `ResizeObserver` is `undefined`. Hoisted out of the effect to avoid
- * re-allocating on every run.
+ * allocating a new class declaration on every run.
  */
-var noopResizeObserver = {
-  observe: function observe() {},
-  unobserve: function unobserve() {},
-  disconnect: function disconnect() {}
-};
+var NoopResizeObserver = /*#__PURE__*/function () {
+  function NoopResizeObserver() {
+    _classCallCheck(this, NoopResizeObserver);
+  }
+  return _createClass(NoopResizeObserver, [{
+    key: "observe",
+    value: function observe() {}
+  }, {
+    key: "unobserve",
+    value: function unobserve() {}
+  }, {
+    key: "disconnect",
+    value: function disconnect() {}
+  }]);
+}();
 
 /**
  * Returns true when the popover is currently open. Wrapped because the
@@ -200,12 +212,17 @@ export function useAnchorPosition(_ref3) {
     _ref3$placement = _ref3.placement,
     placement = _ref3$placement === void 0 ? {} : _ref3$placement,
     _ref3$forceFallbackPo = _ref3.forceFallbackPositioning,
-    forceFallbackPositioning = _ref3$forceFallbackPo === void 0 ? false : _ref3$forceFallbackPo;
+    forceFallbackPositioning = _ref3$forceFallbackPo === void 0 ? false : _ref3$forceFallbackPo,
+    _ref3$isEnabled = _ref3.isEnabled,
+    isEnabled = _ref3$isEnabled === void 0 ? true : _ref3$isEnabled;
   var id = useId();
   // Stabilize `placement` object so the same object literal
   // value returns an object with the same reference
   var stablePlacement = useStablePlacement(placement);
   useLayoutEffect(function () {
+    if (!isEnabled) {
+      return;
+    }
     var trigger = anchorRef.current;
     var popover = popoverRef.current;
     if (!trigger || !popover) {
@@ -395,17 +412,20 @@ export function useAnchorPosition(_ref3) {
     // Self-disconnects after one valid measurement; ongoing
     // scroll/resize is handled by the window listeners below.
     // `ResizeObserver` is missing in some non-DOM jest environments
-    // (e.g. post-office's `node` environment). Fall back to the
-    // module-scope `noopResizeObserver` stub there. The scroll/resize
-    // listeners below still keep the popover positioned in the rare
-    // case the consumer also polyfilled `showPopover` but not
-    // `ResizeObserver`. Real browsers always have it.
-    var resizeObserver = typeof ResizeObserver !== 'undefined' ? new ResizeObserver(function () {
+    // (e.g. post-office's `node` environment). Fall back to a no-op
+    // observer there. The scroll/resize listeners below still keep
+    // the popover positioned in the rare case the consumer also
+    // polyfilled `showPopover` but not `ResizeObserver`. Real
+    // browsers always have it. The `NoopResizeObserver` class is
+    // hoisted to module scope (see top of file) so we do not allocate
+    // a new constructor on every effect run.
+    var ResizeObserverImpl = typeof ResizeObserver !== 'undefined' ? ResizeObserver : NoopResizeObserver;
+    var resizeObserver = new ResizeObserverImpl(function () {
       if (popover.offsetWidth > 0 && popover.offsetHeight > 0) {
         update();
         resizeObserver.disconnect();
       }
-    }) : noopResizeObserver;
+    });
 
     // If the popover is already open by the time this effect runs (for
     // example, the parent `useAnchorPosition` effect runs after the child
@@ -454,5 +474,5 @@ export function useAnchorPosition(_ref3) {
       popover.style.removeProperty('opacity');
     });
     return undoPositioning;
-  }, [anchorRef, popoverRef, stablePlacement, forceFallbackPositioning, id]);
+  }, [anchorRef, popoverRef, stablePlacement, forceFallbackPositioning, isEnabled, id]);
 }

package/dist/esm/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/esm/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/esm/placement-map/index.js

@@ -2,7 +2,7 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-import { placementMapping } from './legacy-placements';
+import { placementMapping } from './placement-mapping';
 
 /**
  * Maps legacy Popper.js placement values to the new object-based

package/dist/esm/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 var 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 var 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 var 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/esm/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 var 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'
+  }
+};