@atlaskit/top-layer 0.12.2 → 0.14.0

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/get-aria-for-trigger.js

@@ -0,0 +1,84 @@
+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({
+  role,
+  isOpen,
+  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.
+  const ariaHasPopup = roleToAriaHasPopup({
+    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/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;
+}

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

@@ -42,39 +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({
-  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;
-}
 const rolesThatMoveFocus = new Set(['dialog', 'alertdialog', 'menu', 'listbox', 'tree', 'grid']);
 
 /**

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

@@ -0,0 +1,14 @@
+const 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({
+  role
+}) {
+  if (!role) {
+    return false;
+  }
+  return rolesThatMoveFocus.has(role);
+}

package/dist/es2019/internal/slot.js

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

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

@@ -28,13 +28,13 @@ 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.
  */
-const noopResizeObserver = {
-  observe() {},
-  unobserve() {},
+const NoopResizeObserver = class {
+  observe() {}
+  unobserve() {}
   disconnect() {}
 };
 
@@ -202,13 +202,17 @@ 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) {
@@ -399,17 +403,20 @@ export function useAnchorPosition({
     // 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.
-    const resizeObserver = typeof ResizeObserver !== 'undefined' ? new ResizeObserver(() => {
+    // (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.
+    const ResizeObserverImpl = typeof ResizeObserver !== 'undefined' ? ResizeObserver : NoopResizeObserver;
+    const resizeObserver = new ResizeObserverImpl(() => {
       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
@@ -456,5 +463,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'
+  }
+};