@atlaskit/top-layer 4.4.5 → 5.0.1

package/dist/esm/internal/anchored-popover-size.js

@@ -0,0 +1,338 @@
+/**
+ * The space kept clear between a popover and the viewport edge. Matches legacy
+ * `@atlaskit/popper`'s `preventOverflow` padding of `5`.
+ */
+export var VIEWPORT_PADDING = '5px';
+
+/**
+ * The upper bound for the default placement-axis floor while fitting. A capped
+ * popover never overflows, so it never flips; this floor makes the margin box
+ * overflow a too-small cell so `position-try-fallbacks` fires. A flip driver and
+ * nothing else, so the JavaScript fallback, which has no cell to overflow, never
+ * writes it. See `getPlacementAxisFloor`.
+ *
+ * 150px is the value the flip was measured with, not a design constant
+ * (`notes/plans/should-fit-viewport.md`). Deliberately not a `space.*` token:
+ * theming it would move the flip threshold, and so change which side a popover
+ * lands on.
+ */
+export var FALLBACK_MINIMUM_MAIN_AXIS_SIZE = '150px';
+
+/**
+ * Which way the POPOVER's inline axis runs; `'vertical'` covers the `vertical-*`
+ * and `sideways-*` writing modes. Measured rather than assumed, because every
+ * logical property this module writes resolves against the popover's own writing
+ * mode, and so must the viewport unit paired with it.
+ */
+
+/**
+ * The dynamic viewport unit for one of the popover's axes. Not `dvi` / `dvb`:
+ * css-values-4 defines those against the ROOT element's writing mode, while the
+ * `max-{axis}-size` they are written to follows the popover's, so a popover in a
+ * `vertical-rl` subtree of a horizontal document would be capped by the wrong
+ * dimension.
+ */
+function viewportUnit(_ref) {
+  var axis = _ref.axis,
+    writingMode = _ref.writingMode;
+  var isHorizontalAxis = axis === 'inline' === (writingMode === 'horizontal');
+  return isHorizontalAxis ? 'dvw' : 'dvh';
+}
+
+/**
+ * How one axis of an anchored popover is sized. Both axes take these four values
+ * under identical rules.
+ *
+ * - `'content'`: sized by its content. Named after `flex-basis: content`; NOT
+ *   `'auto'`, whose CSS meaning for a positioned box is shrink-to-fit, the very
+ *   behaviour rule 4 removes.
+ * - `'match-anchor'`: exactly the anchor's size on this axis.
+ * - `'min-anchor'`: at least the anchor's size on this axis, free to grow.
+ * - `'max-available'`: at most the space between the anchor and the viewport
+ *   edge, content-sized below that. Capped by the `position-area` cell on the
+ *   placement axis and by the viewport on the cross axis (a `span-*` cell is
+ *   narrower than the viewport, so capping to it would wrap content that fits on
+ *   screen).
+ *
+ * Four rules apply on top:
+ *
+ * 1. Fitting one axis fills a `'content'` other axis with `'max-available'` too.
+ *    An explicit value is never overridden, so caps stay strictly per-axis.
+ * 2. Fitting either axis floors the placement axis, because flipping is a
+ *    whole-popover outcome. See `getPlacementAxisFloor`.
+ * 3. The viewport cap is unconditional, so a non-fitting axis still cannot
+ *    overhang the screen. `'max-available'` and `'content'` are therefore
+ *    indistinguishable on the cross axis.
+ * 4. A non-anchor-relative inline axis gets `inline-size: max-content`. Under
+ *    `position-area` the containing block is the cell, so a CSS `auto` inline
+ *    size shrink-to-fits a too-narrow cell and WRAPS into it, never overflowing
+ *    and so never sliding to the roomier side. The caps still beat it, because a
+ *    max beats a definite size. Not needed on the block axis, which does not
+ *    wrap, nor on the JavaScript fallback, whose containing block is the
+ *    viewport. Consumers opt out with `shouldPreserveInlineSize`.
+ *
+ * See `notes/decisions/fit-available-space.md`.
+ */
+
+/**
+ * Narrowed rather than `string`, so a typo cannot reach `setStyle` as a
+ * silently-ignored property name.
+ */
+
+/**
+ * The anchor's size along each axis, as a CSS length. `null` when nothing needs
+ * it, so the measurement is skipped.
+ *
+ * The CSS path uses the `self-` keywords, whose axes are the POPOVER's, so each
+ * value matches the axis of the property it is set on (`anchor-size(inline)` and
+ * `anchor-size(width)` are both silently wrong in a vertical writing mode). The
+ * JavaScript fallback uses a measured pixel length, because `anchor-size()` needs
+ * a `position-anchor` that path never sets. See
+ * `notes/decisions/width-from-anchor-floors.md`.
+ */
+
+function getCrossAxis(axis) {
+  return axis === 'block' ? 'inline' : 'block';
+}
+
+/**
+ * The whole viewport, less the reserved padding on both sides. Rule 3's backstop.
+ */
+function viewportCap(_ref2) {
+  var axis = _ref2.axis,
+    writingMode = _ref2.writingMode;
+  return "calc(100".concat(viewportUnit({
+    axis: axis,
+    writingMode: writingMode
+  }), " - 2 * ").concat(VIEWPORT_PADDING, ")");
+}
+
+/**
+ * The position-area cell cap, for the placement axis only. The host carries
+ * `position-area`, so per css-anchor-position-1 the cell is its containing block:
+ * `100%` is the anchor edge to the viewport edge, and it follows whichever side
+ * `position-try-fallbacks` settles on. Percentages do not subtract margins, so
+ * the gap is subtracted here.
+ *
+ * Meaningless on the JavaScript fallback, whose containing block is the viewport,
+ * so that path gets `viewportCap` on both axes.
+ */
+function cellCap(_ref3) {
+  var gap = _ref3.gap;
+  return "calc(100% - ".concat(VIEWPORT_PADDING, " - ").concat(gap, ")");
+}
+
+/**
+ * The anchor term of the placement-axis floor, and the one place it is capped.
+ *
+ * `'match-anchor'` earns a floor only where it can flip: a definite size clamps to
+ * the cap and shrinks below the anchor instead of flipping.
+ *
+ * The `canFlip` clamp is deliberate both ways. With no flip in play an unclamped
+ * floor beats `max-{axis}-size` (CSS resolves `min` last), making the viewport
+ * backstop inert. With a flip in play, clamping would stop the floor exceeding
+ * the cell cap, which is what drives the flip.
+ */
+function getPlacementAxisAnchorFloor(_ref4) {
+  var placementAxis = _ref4.placementAxis,
+    placementAxisSize = _ref4.placementAxisSize,
+    anchorValue = _ref4.anchorValue,
+    canFlip = _ref4.canFlip,
+    writingMode = _ref4.writingMode;
+  var hasAnchorFloor = placementAxisSize === 'min-anchor' || placementAxisSize === 'match-anchor' && canFlip;
+  if (!hasAnchorFloor || anchorValue === null) {
+    return undefined;
+  }
+  if (canFlip) {
+    return anchorValue;
+  }
+  return "min(".concat(anchorValue, ", ").concat(viewportCap({
+    axis: placementAxis,
+    writingMode: writingMode
+  }), ")");
+}
+
+/**
+ * The default flip floor, clamped so that SOME cell can always hold it.
+ *
+ * The two cells either side of the anchor add up to the viewport less the anchor,
+ * so the roomier one is at least half of that. A floor whose margin box fits
+ * inside that half is guaranteed a cell somewhere in the fallback chain.
+ * Unclamped, a short viewport with a centred anchor has NO cell that holds
+ * 150px: every try-fallback overflows, the browser reverts to the base position,
+ * and the floor pushes the popover past the viewport edge.
+ *
+ * This is NOT the `min(floor, cellCap)` that suppresses flipping: it is relative
+ * to the VIEWPORT, so a small base cell still overflows it. `max(0px, …)` states
+ * the lower bound for an anchor taller than the viewport.
+ */
+function getDefaultPlacementAxisFloor(_ref5) {
+  var placementAxis = _ref5.placementAxis,
+    anchorValue = _ref5.anchorValue,
+    gap = _ref5.gap,
+    writingMode = _ref5.writingMode;
+  if (anchorValue === null) {
+    return FALLBACK_MINIMUM_MAIN_AXIS_SIZE;
+  }
+  // The viewport term and the anchor term must measure the SAME axis; see
+  // `viewportUnit`.
+  var viewport = "100".concat(viewportUnit({
+    axis: placementAxis,
+    writingMode: writingMode
+  }));
+  var halfOfRemainingViewport = "calc((".concat(viewport, " - ").concat(anchorValue, ") / 2 - ").concat(gap, " - ").concat(VIEWPORT_PADDING, ")");
+  return "min(".concat(FALLBACK_MINIMUM_MAIN_AXIS_SIZE, ", max(0px, ").concat(halfOfRemainingViewport, "))");
+}
+
+/**
+ * The placement-axis floor: explicit minimums COMPOSE, the default does not.
+ *
+ * `placement.minSize` and the anchor term are both explicit requests, so they
+ * compose as `max()`. `FALLBACK_MINIMUM_MAIN_AXIS_SIZE` never composes: it only
+ * ever won by overriding a size the consumer asked for, and the anchor term drives
+ * the flip on its own. Knock-on, intended: `minSize: 0` no longer removes an
+ * anchor floor, because `max(0px, anchor)` IS the anchor.
+ */
+function getPlacementAxisFloor(_ref6) {
+  var minSize = _ref6.minSize,
+    placementAxis = _ref6.placementAxis,
+    placementAxisSize = _ref6.placementAxisSize,
+    anchorValue = _ref6.anchorValue,
+    gap = _ref6.gap,
+    canFlip = _ref6.canFlip,
+    writingMode = _ref6.writingMode;
+  var anchorFloor = getPlacementAxisAnchorFloor({
+    placementAxis: placementAxis,
+    placementAxisSize: placementAxisSize,
+    anchorValue: anchorValue,
+    canFlip: canFlip,
+    writingMode: writingMode
+  });
+  if (minSize !== undefined) {
+    return anchorFloor === undefined ? minSize : "max(".concat(minSize, ", ").concat(anchorFloor, ")");
+  }
+  if (anchorFloor !== undefined) {
+    return anchorFloor;
+  }
+  if (!canFlip) {
+    return undefined;
+  }
+  return getDefaultPlacementAxisFloor({
+    placementAxis: placementAxis,
+    anchorValue: anchorValue,
+    gap: gap,
+    writingMode: writingMode
+  });
+}
+
+/**
+ * The whole size recipe for an anchored popover, in one place. Pure, so the truth
+ * table is unit-testable without a browser, and every size property on the
+ * popover host has exactly one writer.
+ *
+ * While anything is fitting on the CSS path, the placement-axis floor is never
+ * clamped to the CELL cap. Its whole job is to exceed it: overflow detection
+ * reads the margin box AFTER the clamp (css-anchor-position-1 §6.5), so
+ * `min(floor, cap)` suppresses `position-try-fallbacks` entirely. The cross-axis
+ * floor is always clamped, because there it is a size contract rather than a flip
+ * driver.
+ *
+ * See `notes/decisions/fit-available-space.md` for the full recipe and the
+ * measured evidence.
+ */
+export function getAnchoredPopoverSizeDeclarations(_ref7) {
+  var placement = _ref7.placement,
+    inlineSize = _ref7.inlineSize,
+    blockSize = _ref7.blockSize,
+    isUsingCssAnchorPositioning = _ref7.isUsingCssAnchorPositioning,
+    anchorSize = _ref7.anchorSize,
+    writingMode = _ref7.writingMode,
+    _ref7$shouldPreserveI = _ref7.shouldPreserveInlineSize,
+    shouldPreserveInlineSize = _ref7$shouldPreserveI === void 0 ? false : _ref7$shouldPreserveI;
+  var placementAxis = placement.axis;
+  var crossAxis = getCrossAxis(placementAxis);
+
+  // Rule 1. Feeds the per-axis CAPS only.
+  var size = {
+    inline: inlineSize === 'content' && blockSize === 'max-available' ? 'max-available' : inlineSize,
+    block: blockSize === 'content' && inlineSize === 'max-available' ? 'max-available' : blockSize
+  };
+
+  // Rule 2 reads the requested values instead, un-mirrored: flipping is a
+  // whole-popover outcome, so a fit request on either axis turns the floor on.
+  var isFitting = inlineSize === 'max-available' || blockSize === 'max-available';
+
+  // ...but only where the floor is what causes the flip. On the JavaScript
+  // fallback a floor only inflates the measured size the side is picked from, so
+  // it would flip a popover that fits.
+  var canFlip = isFitting && isUsingCssAnchorPositioning;
+  var declarations = [
+  // Rule 3: both caps are always written. Only the placement axis can take the
+  // cell cap.
+  {
+    property: "max-".concat(placementAxis, "-size"),
+    value: size[placementAxis] === 'max-available' && isUsingCssAnchorPositioning ? cellCap({
+      gap: placement.offset.gap
+    }) : viewportCap({
+      axis: placementAxis,
+      writingMode: writingMode
+    })
+  }, {
+    property: "max-".concat(crossAxis, "-size"),
+    value: viewportCap({
+      axis: crossAxis,
+      writingMode: writingMode
+    })
+  }];
+
+  // Rule 4. Only for a non-anchor-relative inline axis, so `'match-anchor'` below
+  // stays the one writer of `inline-size` when it applies. CSS path only: the
+  // fallback's containing block is the viewport, where shrink-to-fit already IS
+  // the natural width for anything that fits on screen.
+  if (isUsingCssAnchorPositioning && !shouldPreserveInlineSize && (size.inline === 'content' || size.inline === 'max-available')) {
+    declarations.push({
+      property: 'inline-size',
+      value: 'max-content'
+    });
+  }
+
+  // A max beats a definite size, so the caps above still win over this.
+  for (var _i = 0, _arr = [placementAxis, crossAxis]; _i < _arr.length; _i++) {
+    var axis = _arr[_i];
+    var anchorValue = anchorSize[axis];
+    if (size[axis] === 'match-anchor' && anchorValue !== null) {
+      declarations.push({
+        property: "".concat(axis, "-size"),
+        value: anchorValue
+      });
+    }
+  }
+  var placementAxisFloor = getPlacementAxisFloor({
+    minSize: placement.minSize,
+    placementAxis: placementAxis,
+    placementAxisSize: size[placementAxis],
+    anchorValue: anchorSize[placementAxis],
+    gap: placement.offset.gap,
+    canFlip: canFlip,
+    writingMode: writingMode
+  });
+  if (placementAxisFloor !== undefined) {
+    declarations.push({
+      property: "min-".concat(placementAxis, "-size"),
+      value: placementAxisFloor
+    });
+  }
+
+  // A size contract, not a flip driver, so it is clamped to the cap.
+  var crossAxisAnchorValue = anchorSize[crossAxis];
+  if (size[crossAxis] === 'min-anchor' && crossAxisAnchorValue !== null) {
+    declarations.push({
+      property: "min-".concat(crossAxis, "-size"),
+      value: "min(".concat(crossAxisAnchorValue, ", ").concat(viewportCap({
+        axis: crossAxis,
+        writingMode: writingMode
+      }), ")")
+    });
+  }
+  return declarations;
+}

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

@@ -8,25 +8,19 @@
  */
 
 /**
- * Valid values for the `aria-haspopup` attribute.
+ * Maps each supported popover role to its `aria-haspopup` value.
  *
  * Derived from the HTML spec - maps popover roles to what the trigger
- * announces. `undefined` means the attribute is omitted entirely (used for
+ * announces. Roles that do not produce a popup use `undefined` instead (for
  * non-popup roles like `tooltip`/`status`/`alert`/`note`/`log` where
- * `aria-haspopup` would be misleading).
+ * `aria-haspopup` would be misleading), so they are intentionally excluded
+ * from this mapping and from `getAriaForTrigger`.
  *
- * `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
+ * `true` is intentionally not a value in this mapping. The runtime only ever
+ * produces the explicit string forms, so allowing it would invite consumers
+ * to pass `true` and get an `aria-haspopup="true"` serialisation that the
  * runtime no longer emits.
  */
-
-/**
- * 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.
- */
-
 var roleToAriaHasPopup = {
   dialog: 'dialog',
   alertdialog: 'dialog',

package/dist/esm/internal/is-native-element-open.js

@@ -0,0 +1,13 @@
+export function isNativeElementOpen(_ref) {
+  var element = _ref.element;
+  if (element instanceof HTMLDialogElement) {
+    return element.open;
+  }
+
+  // Some DOM implementations throw for unsupported pseudo-classes.
+  try {
+    return element.matches(':popover-open');
+  } catch (_unused) {
+    return false;
+  }
+}

package/dist/esm/internal/{anchor-positioning-fallback.js → javascript-fallback/anchor-positioning-fallback.js}

@@ -1,29 +1,14 @@
 import _defineProperty from "@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) { _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; }
-/**
- * JS fallback positioning math. Used only when the browser does not
- * support CSS Anchor Positioning (less than 6% of users).
- *
- * Consumer-supplied `offset.gap` and `offset.crossAxisShift` are
- * honored: the caller (`useAnchorPosition`) resolves CSS length strings
- * (tokens, calc, var, etc) to pixels via a DOM probe before passing them
- * in. The caller also keeps the popover hidden (`opacity: 0`) until the
- * first measurement completes, so the popover never paints at the wrong
- * position.
- */
-
 /**
  * A viewport-relative position, in pixels. Physical rather than logical
  * because it is written straight to `top` / `left`.
  */
 
 /**
- * The cross-axis shift with its length already resolved to pixels.
- *
- * Mirrors `TCrossAxisShiftOffset`, whose `value` is an unresolved CSS length
- * string. Only this module needs the pixel form, because only this module does
- * the arithmetic itself.
+ * `TCrossAxisShiftOffset` with its CSS length already resolved to pixels. Only
+ * this module needs the pixel form, because only this module does arithmetic.
  */
 
 /**
@@ -134,18 +119,13 @@ function applyAlignment(_ref2) {
 }
 
 /**
- * Applies the cross-axis shift offset.
- *
- * `forwards` always moves the popover toward the cross-axis END and
- * `backwards` toward the START, for every `align` value. See
- * `notes/decisions/placement-offset.md`.
+ * Applies the cross-axis shift offset. `forwards` always moves the popover
+ * toward the cross-axis END, for every `align` value.
  *
- * This is a coordinate, so the direction is the sign and nothing else. There
- * is deliberately no per-`align` sign inversion here: the CSS path inverts the
- * sign only because a margin on the END side pushes a box the opposite way to
- * a margin on the START side, which is a property of margins rather than of
- * the shift. Applying that inversion to a coordinate moved `align: 'end'`
- * popovers the wrong way.
+ * Do not add a per-`align` sign inversion here. This is a coordinate, so the
+ * direction is the sign and nothing else. The CSS path inverts only because an
+ * END-side margin pushes a box the opposite way to a START-side one, which is a
+ * property of margins.
  */
 function applyCrossAxisShift(_ref3) {
   var position = _ref3.position,
@@ -169,12 +149,11 @@ function applyCrossAxisShift(_ref3) {
 }
 
 /**
- * Computes popover position from trigger rect and viewport, flipping to
- * the side with more space when needed. Re-runs on scroll/resize.
+ * Computes the popover position from the trigger rect and viewport, flipping to
+ * the side with more space when needed.
  *
- * `gap` and `crossAxisShift` are pre-resolved to pixels by the
- * caller (see `resolveCssLengthToPixels`), so this function stays purely
- * numeric.
+ * `gap` and `crossAxisShift` arrive already resolved to pixels (see
+ * `resolveCssLengthToPixels`), so this stays purely numeric.
  */
 export function computeFallbackPosition(_ref4) {
   var triggerRect = _ref4.triggerRect,