@atlaskit/top-layer 0.1.0

package/dist/cjs/internal/anchor-positioning-fallback.js

@@ -0,0 +1,154 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.computeFallbackPosition = computeFallbackPosition;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+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) { (0, _defineProperty2.default)(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; }
+/**
+ * Computes the base {top, left} position based on the primary edge,
+ * flipping to the opposite side when there is not enough space.
+ */
+function computeEdgePosition(_ref) {
+  var axis = _ref.axis,
+    edge = _ref.edge,
+    triggerRect = _ref.triggerRect,
+    popoverWidth = _ref.popoverWidth,
+    popoverHeight = _ref.popoverHeight,
+    viewport = _ref.viewport,
+    offset = _ref.offset;
+  if (axis === 'block' && edge === 'end') {
+    // Below trigger
+    var spaceBelow = viewport.height - triggerRect.bottom;
+    var spaceAbove = triggerRect.top;
+    return {
+      top: spaceBelow >= popoverHeight + offset || spaceBelow >= spaceAbove ? triggerRect.bottom + offset : triggerRect.top - popoverHeight - offset,
+      left: triggerRect.left + triggerRect.width / 2 - popoverWidth / 2
+    };
+  }
+  if (axis === 'block' && edge === 'start') {
+    // Above trigger
+    var _spaceAbove = triggerRect.top;
+    var _spaceBelow = viewport.height - triggerRect.bottom;
+    return {
+      top: _spaceAbove >= popoverHeight + offset || _spaceAbove >= _spaceBelow ? triggerRect.top - popoverHeight - offset : triggerRect.bottom + offset,
+      left: triggerRect.left + triggerRect.width / 2 - popoverWidth / 2
+    };
+  }
+  if (axis === 'inline' && edge === 'end') {
+    // Right of trigger
+    var spaceRight = viewport.width - triggerRect.right;
+    var spaceLeft = triggerRect.left;
+    return {
+      top: triggerRect.top + triggerRect.height / 2 - popoverHeight / 2,
+      left: spaceRight >= popoverWidth + offset || spaceRight >= spaceLeft ? triggerRect.right + offset : triggerRect.left - popoverWidth - offset
+    };
+  }
+  if (axis === 'inline' && edge === 'start') {
+    // Left of trigger
+    var _spaceLeft = triggerRect.left;
+    var _spaceRight = viewport.width - triggerRect.right;
+    return {
+      top: triggerRect.top + triggerRect.height / 2 - popoverHeight / 2,
+      left: _spaceLeft >= popoverWidth + offset || _spaceLeft >= _spaceRight ? triggerRect.left - popoverWidth - offset : triggerRect.right + offset
+    };
+  }
+
+  // Unreachable for valid placements; defaults to below trigger
+  return {
+    top: triggerRect.bottom + offset,
+    left: triggerRect.left + triggerRect.width / 2 - popoverWidth / 2
+  };
+}
+
+/**
+ * Adjusts the base (centered) position for non-center alignments.
+ *
+ * `align: 'start'` → popover start edge at trigger start edge
+ * `align: 'end'`   → popover end edge at trigger end edge
+ */
+function applyAlignment(_ref2) {
+  var position = _ref2.position,
+    axis = _ref2.axis,
+    align = _ref2.align,
+    triggerRect = _ref2.triggerRect,
+    popoverWidth = _ref2.popoverWidth,
+    popoverHeight = _ref2.popoverHeight;
+  if (align === 'center') {
+    return position;
+  }
+  if (axis === 'block') {
+    // Block-axis placement → cross-axis is inline (left/right)
+    if (align === 'start') {
+      return _objectSpread(_objectSpread({}, position), {}, {
+        left: triggerRect.left
+      });
+    }
+    // align === 'end'
+    return _objectSpread(_objectSpread({}, position), {}, {
+      left: triggerRect.right - popoverWidth
+    });
+  }
+
+  // Inline-axis placement → cross-axis is block (top/bottom)
+  if (align === 'start') {
+    return _objectSpread(_objectSpread({}, position), {}, {
+      top: triggerRect.top
+    });
+  }
+  // align === 'end'
+  return _objectSpread(_objectSpread({}, position), {}, {
+    top: triggerRect.bottom - popoverHeight
+  });
+}
+
+/**
+ * JS fallback: compute popover position from trigger rect and viewport.
+ *
+ * Placement algorithm (from the document):
+ * - "block" placement: show above/below, picking the side with more space if flipping needed
+ * - "inline" placement: show left/right, picking the side with more space if flipping needed
+ * - "auto" placement: show on the edge with the most available space
+ *
+ * Re-runs on scroll (capture on window) and resize events.
+ */
+function computeFallbackPosition(_ref3) {
+  var triggerRect = _ref3.triggerRect,
+    popoverEl = _ref3.popoverEl,
+    placement = _ref3.placement,
+    viewport = _ref3.viewport,
+    offset = _ref3.offset;
+  var axis = placement.axis,
+    edge = placement.edge,
+    align = placement.align;
+
+  // Measure popover dimensions (it might not have layout yet if just shown)
+  var popoverWidth = popoverEl.offsetWidth;
+  var popoverHeight = popoverEl.offsetHeight;
+  var basePosition = computeEdgePosition({
+    axis: axis,
+    edge: edge,
+    triggerRect: triggerRect,
+    popoverWidth: popoverWidth,
+    popoverHeight: popoverHeight,
+    viewport: viewport,
+    offset: offset
+  });
+  var alignedPosition = applyAlignment({
+    position: basePosition,
+    axis: axis,
+    align: align,
+    triggerRect: triggerRect,
+    popoverWidth: popoverWidth,
+    popoverHeight: popoverHeight
+  });
+
+  // Clamp to viewport so the popover is never offscreen
+  return {
+    top: Math.max(0, Math.min(alignedPosition.top, viewport.height - popoverHeight)),
+    left: Math.max(0, Math.min(alignedPosition.left, viewport.width - popoverWidth))
+  };
+}

package/dist/cjs/internal/combine.js

@@ -0,0 +1,29 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.combine = combine;
+/**
+ * Combine multiple cleanup functions into a single cleanup function.
+ *
+ * @example
+ * ```ts
+ * useEffect(() => {
+ *   return combine(
+ *     bind(window, { type: 'resize', listener: onResize }),
+ *     bind(window, { type: 'scroll', listener: onScroll, options: { capture: true } }),
+ *   );
+ * }, []);
+ * ```
+ */
+function combine() {
+  for (var _len = arguments.length, cleanupFns = new Array(_len), _key = 0; _key < _len; _key++) {
+    cleanupFns[_key] = arguments[_key];
+  }
+  return function cleanup() {
+    cleanupFns.forEach(function (fn) {
+      return fn === null || fn === void 0 ? void 0 : fn();
+    });
+  };
+}

package/dist/cjs/internal/ensure-preset-styles.js

@@ -0,0 +1,34 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ensurePresetStyles = ensurePresetStyles;
+/**
+ * Per-preset CSS injection.
+ *
+ * Each preset's CSS is injected at most once into `<head>`.
+ * Shared by both PopoverContent and DialogContent.
+ *
+ * Note: injected `<style>` elements and the tracking Set are append-only —
+ * they are never removed. This is intentional: the number of distinct
+ * presets is bounded (handful of animation + arrow presets), so the
+ * memory footprint is negligible. Removing styles would risk breaking
+ * other instances of the same preset that are still mounted.
+ *
+ * Decision (2026-03-17 audit): Accepted as a non-issue. The bounded
+ * preset count (~5 presets) makes cleanup unnecessary. We plan to move
+ * to a Compiled-based solution which will handle style injection and
+ * deduplication natively.
+ */
+var injectedPresets = new Set();
+function ensurePresetStyles(_ref) {
+  var preset = _ref.preset;
+  if (injectedPresets.has(preset.name) || typeof document === 'undefined') {
+    return;
+  }
+  injectedPresets.add(preset.name);
+  var style = document.createElement('style');
+  style.textContent = preset.css;
+  document.head.appendChild(style);
+}

package/dist/cjs/internal/reduced-motion.js

@@ -0,0 +1,27 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.prefersReducedMotion = void 0;
+var _once = _interopRequireDefault(require("@atlaskit/ds-lib/once"));
+/**
+ * Returns `true` when the user prefers reduced motion.
+ *
+ * Safe for SSR (returns `false` when `window` is unavailable).
+ *
+ * The result is cached after the first call via `once`. This avoids
+ * calling `matchMedia` on every render. The trade-off is that if a user
+ * toggles the OS reduced-motion setting mid-session, the change won't
+ * take effect until the next page load. This is acceptable because
+ * toggling this system-level preference mid-session is extremely rare,
+ * and a page refresh is a reasonable expectation for system accessibility
+ * settings to take effect.
+ */
+var prefersReducedMotion = exports.prefersReducedMotion = (0, _once.default)(function () {
+  if (typeof window === 'undefined' || !('matchMedia' in window)) {
+    return false;
+  }
+  return window.matchMedia('(prefers-reduced-motion: reduce)').matches;
+});

package/dist/cjs/internal/resolve-placement.js

@@ -0,0 +1,24 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getPlacement = getPlacement;
+/**
+ * Fully-resolved placement (internal). All fields are required.
+ * Use getPlacement({ placement: partial }) to obtain from partial input.
+ */
+
+/**
+ * Resolves a partial placement to its fully-specified form.
+ * Defaults: `axis: 'block'`, `edge: 'end'`, `align: 'center'`.
+ */
+function getPlacement(_ref) {
+  var _placement$axis, _placement$edge, _placement$align;
+  var placement = _ref.placement;
+  return {
+    axis: (_placement$axis = placement.axis) !== null && _placement$axis !== void 0 ? _placement$axis : 'block',
+    edge: (_placement$edge = placement.edge) !== null && _placement$edge !== void 0 ? _placement$edge : 'end',
+    align: (_placement$align = placement.align) !== null && _placement$align !== void 0 ? _placement$align : 'center'
+  };
+}

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

@@ -0,0 +1,66 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.roleToAriaHasPopup = roleToAriaHasPopup;
+/**
+ * Valid values for the `aria-haspopup` attribute.
+ * Derived from the HTML spec — maps popover roles to what the trigger announces.
+ */
+
+/**
+ * Roles that require an accessible name (`label` or `labelledBy`) per WCAG 4.1.2.
+ * Without a name, assistive technology cannot identify these landmarks.
+ */
+
+/**
+ * Roles where the accessible name is derived from content or provided externally
+ * (e.g. a combobox labels its listbox, tooltip content IS the accessible name).
+ */
+
+// ── Shared ARIA role discrimination types ──
+//
+// These encode the WCAG 4.1.2 constraint: roles like `dialog`, `alertdialog`,
+// and `menu` MUST have an accessible name (either `label` or `labelledBy`).
+// TypeScript enforces this at compile time via discriminated unions.
+
+/**
+ * ARIA role props where a role is always required.
+ *
+ * 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
+ * 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.
+ */
+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';
+  }
+  // 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';
+}

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

@@ -0,0 +1,42 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.setStyle = setStyle;
+/**
+ * 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();
+ * ```
+ */
+function setStyle(_ref) {
+  var el = _ref.el,
+    styles = _ref.styles;
+  styles.forEach(function (_ref2) {
+    var property = _ref2.property,
+      value = _ref2.value;
+    el.style.setProperty(property, value);
+  });
+  return function cleanup() {
+    styles.forEach(function (_ref3) {
+      var property = _ref3.property;
+      el.style.removeProperty(property);
+    });
+  };
+}

package/dist/cjs/internal/slot.js

@@ -0,0 +1,65 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Slot = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _react = require("react");
+var _mergeRefs = _interopRequireDefault(require("@atlaskit/ds-lib/merge-refs"));
+var _excluded = ["children"];
+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) { (0, _defineProperty2.default)(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; }
+/**
+ * Extra DOM/event props are passed through to the cloned child.
+ */
+
+/**
+ * Single element child: merge the caller ref with `child.ref`.
+ *
+ * Do not read `child.props.ref`: React keeps a `ref` key on `props` for
+ * host elements but accessing it logs a warning and returns `undefined`
+ * (ref lives on the element as `child.ref`).
+ */
+
+function isSlotChild(child) {
+  return /*#__PURE__*/(0, _react.isValidElement)(child);
+}
+
+/**
+ * Merges props (including ref) onto a single React element child.
+ *
+ * A safer alternative to raw `cloneElement` that:
+ * 1. Guards with `isValidElement` — non-element children (strings,
+ *    fragments, null) are returned as-is instead of crashing.
+ * 2. Merges refs via `mergeRefs` so both the caller's ref and the
+ *    child's existing ref are honoured.
+ * 3. Spreads any additional props (ARIA attributes, event handlers, etc.)
+ *    onto the child element.
+ *
+ * Event handlers (e.g. `onClick`) are **not** auto-merged — the caller's
+ * handler replaces the child's. Compose handlers before passing them in.
+ *
+ * @example
+ * ```tsx
+ * <Slot ref={triggerRef} onClick={handleClick} aria-expanded={isOpen}>
+ *   <button>Open</button>
+ * </Slot>
+ * ```
+ */
+var Slot = exports.Slot = /*#__PURE__*/(0, _react.forwardRef)(function Slot(slotProps, ref) {
+  var rawChildren = slotProps.children,
+    props = (0, _objectWithoutProperties2.default)(slotProps, _excluded);
+  // `SlotProps` intersects `Record<string, unknown>`, so `children` is typed as `unknown`.
+  var children = rawChildren;
+  if (!isSlotChild(children)) {
+    return children;
+  }
+
+  // eslint-disable-next-line @repo/internal/react/no-clone-element -- Slot is a controlled wrapper around cloneElement with isValidElement guard
+  return /*#__PURE__*/(0, _react.cloneElement)(children, _objectSpread(_objectSpread({}, props), {}, {
+    ref: (0, _mergeRefs.default)([ref, children.ref])
+  }));
+});