@atlaskit/popper 8.0.1 → 8.1.0

package/dist/es2019/reference.js

@@ -0,0 +1,35 @@
+import React, { useMemo } from 'react';
+import { Reference as ReactPopperReference } from 'react-popper';
+import mergeRefs from '@atlaskit/ds-lib/merge-refs';
+import { useManagerAnchorSetter } from './internal/use-manager-anchor-setter';
+
+// `react-popper`'s `Reference` exposes a loosely-typed callback ref so
+// consumers can attach it to any host element. We mirror that shape
+// instead of locking the children ref to `HTMLElement`, which would
+// break legacy consumers that pass it to `<button>` / `<div>` directly.
+// eslint-disable-next-line @typescript-eslint/no-explicit-any -- mirroring react-popper's public ref shape
+
+/**
+ * Wraps `react-popper`'s `<Reference>` so the anchor element it captures
+ * is also published through `@atlaskit/popper`'s own bridge context.
+ * The bridge lets the FF-on top-layer adapter discover the anchor even
+ * when `react-popper`'s CJS and ESM builds resolve to different context
+ * instances (Jest vs production bundlers).
+ *
+ * The bridge + consumer refs are composed into a single stable callback and
+ * passed to `react-popper` as `innerRef`, so the (stable) ref `react-popper`
+ * hands to `children` never changes identity. Composing inline instead would
+ * produce a new ref callback every render, making React detach/reattach the
+ * anchor each commit — firing `publishAnchor(null)` then `publishAnchor(el)`
+ * and churning the `Manager`.
+ */
+export function Reference({
+  children,
+  innerRef
+}) {
+  const publishAnchor = useManagerAnchorSetter();
+  const composedRef = useMemo(() => mergeRefs([publishAnchor, innerRef]), [publishAnchor, innerRef]);
+  return /*#__PURE__*/React.createElement(ReactPopperReference, {
+    innerRef: composedRef
+  }, children);
+}

package/dist/esm/index.js

@@ -1,2 +1,7 @@
 export { Popper, placements } from './popper';
-export { Manager, Reference } from 'react-popper';
+// `Manager` and `Reference` are re-exported through our own wrappers so
+// the anchor element captured by `<Reference>` reaches `<Popper>` via a
+// single shared context instance, sidestepping the dual CJS/ESM context
+// duplication shipped by `react-popper`.
+export { Manager } from './manager';
+export { Reference } from './reference';

package/dist/esm/internal/anchor-context.js

@@ -0,0 +1,12 @@
+import { createContext } from 'react';
+
+/**
+ * Module-private context used to bridge the anchor element from our
+ * `<Reference>` wrapper to `<Popper>`. Deliberately separate from
+ * `react-popper`'s own `ManagerReferenceNodeContext`: `react-popper`
+ * ships dual CJS and ESM builds, each with its own
+ * `React.createContext()` instance, and bundlers and Jest can resolve
+ * different builds. Bridging through a context we control guarantees a
+ * single shared instance across every consumer of `@atlaskit/popper`.
+ */
+export var AnchorContext = /*#__PURE__*/createContext(null);

package/dist/esm/internal/anchor-setter-context.js

@@ -0,0 +1,11 @@
+import { createContext } from 'react';
+/**
+ * Module-private context that exposes the anchor setter to descendant
+ * `<Reference>` instances inside the same `<Manager>` subtree. The
+ * setter forwards the captured element into `AnchorContext` so
+ * descendant `<Popper>` instances can discover the anchor without
+ * reaching into `react-popper`'s internal context.
+ */
+export var AnchorSetterContext = /*#__PURE__*/createContext(function () {
+  return undefined;
+});

package/dist/esm/internal/read-viewport.js

@@ -0,0 +1,25 @@
+/**
+ * Returns the current viewport size in CSS pixels, preferring the visual
+ * viewport (which accounts for pinch-zoom on touch devices) over the
+ * layout viewport. Returns `{ width: 0, height: 0 }` in non-DOM
+ * environments so callers can use the result unconditionally.
+ */
+export function readViewport() {
+  if (typeof window === 'undefined') {
+    return {
+      width: 0,
+      height: 0
+    };
+  }
+  var visual = window.visualViewport;
+  if (visual) {
+    return {
+      width: visual.width,
+      height: visual.height
+    };
+  }
+  return {
+    width: window.innerWidth,
+    height: window.innerHeight
+  };
+}

package/dist/esm/internal/rect-point-for-placement.js

@@ -0,0 +1,87 @@
+/**
+ * Reduces an anchor rect to the single viewport point that, wrapped in a
+ * zero-size synthetic anchor, produces the same popover position
+ * `useAnchorPosition` would for the given placement. This works because
+ * `useAnchorPosition` only reads the edge / alignment corner of the rect,
+ * so a coincident zero-size point is geometrically equivalent.
+ *
+ * RTL is resolved here so the downstream synthetic anchor only sees physical
+ * coordinates. Defaults mirror `getPlacement` in
+ * `@atlaskit/top-layer/placement-map` (`axis: 'block'`, `edge: 'end'`,
+ * `align: 'center'`).
+ */
+export function rectPointForPlacement(_ref) {
+  var _placement$axis, _placement$edge, _placement$align;
+  var rect = _ref.rect,
+    placement = _ref.placement,
+    isRtl = _ref.isRtl;
+  var axis = (_placement$axis = placement.axis) !== null && _placement$axis !== void 0 ? _placement$axis : 'block';
+  var edge = (_placement$edge = placement.edge) !== null && _placement$edge !== void 0 ? _placement$edge : 'end';
+  var align = (_placement$align = placement.align) !== null && _placement$align !== void 0 ? _placement$align : 'center';
+  if (axis === 'block') {
+    // Popover sits above (`edge: 'start'`) or below (`edge: 'end'`)
+    // the anchor. Hug the matching horizontal edge; align along x.
+    var _y = edge === 'start' ? rect.top : rect.bottom;
+    var _x = horizontalForAlign({
+      rect: rect,
+      align: align,
+      isRtl: isRtl
+    });
+    return {
+      x: _x,
+      y: _y
+    };
+  }
+
+  // `axis: 'inline'`: popover sits inline-start or inline-end of the
+  // anchor. Hug the matching vertical edge; align along y.
+  var x = inlineEdgeX({
+    rect: rect,
+    edge: edge,
+    isRtl: isRtl
+  });
+  var y = verticalForAlign({
+    rect: rect,
+    align: align
+  });
+  return {
+    x: x,
+    y: y
+  };
+}
+function horizontalForAlign(_ref2) {
+  var rect = _ref2.rect,
+    align = _ref2.align,
+    isRtl = _ref2.isRtl;
+  if (align === 'center') {
+    return rect.left + rect.width / 2;
+  }
+  // `start` / `end` are logical. In LTR, `start` is the left edge.
+  // In RTL, `start` is the right edge.
+  var isStartLeft = !isRtl;
+  if (align === 'start') {
+    return isStartLeft ? rect.left : rect.right;
+  }
+  return isStartLeft ? rect.right : rect.left;
+}
+function verticalForAlign(_ref3) {
+  var rect = _ref3.rect,
+    align = _ref3.align;
+  if (align === 'center') {
+    return rect.top + rect.height / 2;
+  }
+  if (align === 'start') {
+    return rect.top;
+  }
+  return rect.bottom;
+}
+function inlineEdgeX(_ref4) {
+  var rect = _ref4.rect,
+    edge = _ref4.edge,
+    isRtl = _ref4.isRtl;
+  var isStartLeft = !isRtl;
+  if (edge === 'start') {
+    return isStartLeft ? rect.left : rect.right;
+  }
+  return isStartLeft ? rect.right : rect.left;
+}

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

@@ -0,0 +1,37 @@
+/**
+ * Sets inline styles on an element and returns a cleanup function that
+ * restores the prior inline values (so we do not stomp consumer styles).
+ *
+ * Copied from `@atlaskit/top-layer`'s internal `setStyle` (not exported there
+ * yet); inline here until top-layer exposes it via a subpath export.
+ */
+export function setStyle(_ref) {
+  var element = _ref.element,
+    styles = _ref.styles;
+  // Snapshot the prior inline value (NOT the computed style - we only want
+  // to restore values that the consumer/our previous run inlined). An empty
+  // string means "no inline value", in which case cleanup uses removeProperty.
+  var priorValues = styles.map(function (_ref2) {
+    var property = _ref2.property;
+    return {
+      property: property,
+      value: element.style.getPropertyValue(property)
+    };
+  });
+  styles.forEach(function (_ref3) {
+    var property = _ref3.property,
+      value = _ref3.value;
+    element.style.setProperty(property, value);
+  });
+  return function cleanup() {
+    priorValues.forEach(function (_ref4) {
+      var property = _ref4.property,
+        value = _ref4.value;
+      if (value === '') {
+        element.style.removeProperty(property);
+        return;
+      }
+      element.style.setProperty(property, value);
+    });
+  };
+}

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

@@ -0,0 +1,16 @@
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import { useState } from 'react';
+/**
+ * Returns the local state used by `<Manager>` to publish the anchor
+ * captured by `<Reference>` to descendant `<Popper>` instances.
+ */
+export function useAnchorState() {
+  var _useState = useState(null),
+    _useState2 = _slicedToArray(_useState, 2),
+    anchor = _useState2[0],
+    setAnchor = _useState2[1];
+  return {
+    anchor: anchor,
+    setAnchor: setAnchor
+  };
+}

package/dist/esm/internal/use-fit-viewport-max-size.js

@@ -0,0 +1,149 @@
+import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
+import { useLayoutEffect } from 'react';
+import { setStyle } from './set-style';
+
+/**
+ * Applies the `shouldFitViewport` size caps directly to the
+ * `position-area`-anchored popover host. Pure CSS — the browser owns every
+ * value, so there is no measurement, no scroll/resize listeners, and no
+ * `--ds-popper-anchor-*` custom properties.
+ *
+ * **Primary (placement) axis** is capped to `calc(100% - 5px - gap)`. Because
+ * the host carries `position-area`, its containing block *is* the position-area
+ * cell — the region between the anchor edge and the viewport edge — so `100%`
+ * resolves to that distance. The popover is pushed `gap` into the cell by its
+ * offset margin (`margin-*`, set by `useAnchorPosition`), so the gap is
+ * subtracted as well to keep the legacy `viewportPadding = 5` on the far edge.
+ * The cap is also more correct than measuring the requested placement: the cell
+ * follows whichever side `position-try-fallbacks` actually flips to, so it
+ * tracks the flip automatically.
+ *
+ * **Cross axis** is capped to `calc(100dvw|dvh - 10px)` (viewport, legacy
+ * `2 * viewportPadding`). `display: flex` (plus a `min-*-size: 0` reset on the
+ * child) lets an oversized child shrink and reflow to the cap. The host stays
+ * `overflow: visible` so it never clips the consumer surface's `box-shadow`;
+ * scrolling content that cannot reflow is the consumer surface's own
+ * responsibility (it owns `overflow`), matching legacy `react-popper`, which
+ * applied the cap to the consumer's own element.
+ *
+ * `min-inline-size` is reset to `0`. `useWidthFromAnchor({ mode: 'none' })`
+ * floors the host at `max-content` so a too-narrow span overflows and drives
+ * `position-try-fallbacks` rather than wrapping. That floor is the opposite of
+ * fitting: when it exceeds a cap, CSS min/max resolution lets the min win and
+ * the host overflows the viewport. In fit mode the caps must win, so the floor
+ * is neutralised here; `setStyle` restores the prior inline value on cleanup.
+ *
+ * Verified in Chromium: `max-block-size: calc(100% - …)` on a `position: fixed`
+ * + `position-area` element resolves `100%` to the cell, not the viewport.
+ */
+
+var CROSS_INLINE_CAP = 'calc(100dvw - 10px)';
+var CROSS_BLOCK_CAP = 'calc(100dvh - 10px)';
+
+/**
+ * Legacy `viewportPadding` (`preventOverflow` padding) the popover kept from
+ * every viewport edge under `react-popper`. The caps above already *reserve*
+ * this space (`- 5px` on the primary far edge, `- 10px` = `2 * 5px` on the
+ * cross axis), but nothing makes the reservation land on the viewport side:
+ * the anchor-side gap is a real margin (`useAnchorPosition`'s `edgeMargin`),
+ * the viewport side has none, so a capped popover packs flush against the
+ * viewport edge it slid/flipped to. Re-applying the padding as a margin on the
+ * three non-anchor sides puts the reserved space back on the viewport side.
+ * `position-try` flips mirror margins and slides keep them per-side, so the
+ * gap tracks whichever edge the browser settles on.
+ */
+var VIEWPORT_PADDING = '5px';
+
+/**
+ * The popover's three non-anchor margin sides for a given placement axis — the
+ * primary *far* side plus both cross sides. The remaining (anchor-facing) side
+ * already carries the offset gap from `useAnchorPosition` and is left alone.
+ */
+var NON_ANCHOR_MARGIN_SIDES = {
+  top: ['margin-block-start', 'margin-inline-start', 'margin-inline-end'],
+  bottom: ['margin-block-end', 'margin-inline-start', 'margin-inline-end'],
+  left: ['margin-inline-start', 'margin-block-start', 'margin-block-end'],
+  right: ['margin-inline-end', 'margin-block-start', 'margin-block-end']
+};
+
+/**
+ * @param target        the `position-area`-anchored popover host
+ * @param placementAxis the primary axis derived from the popper placement
+ * @param gap           the offset distance the popover is pushed from the
+ *                      anchor (CSS length), subtracted from the primary cap
+ * @param isEnabled     mirrors the consumer's `shouldFitViewport` prop
+ * @param isOpen        re-applies the caps after the host unmounts/remounts
+ *                      across open cycles (the host is torn down on exit)
+ */
+export function useFitViewportMaxSize(_ref) {
+  var target = _ref.target,
+    placementAxis = _ref.placementAxis,
+    gap = _ref.gap,
+    isEnabled = _ref.isEnabled,
+    isOpen = _ref.isOpen;
+  useLayoutEffect(function () {
+    var element = target.current;
+    if (!element || !isEnabled) {
+      return;
+    }
+    var isBlockAxis = placementAxis === 'top' || placementAxis === 'bottom';
+    var primaryAxisCap = "calc(100% - 5px - ".concat(gap, ")");
+    var cleanupHost = setStyle({
+      element: element,
+      styles: [{
+        property: 'display',
+        value: 'flex'
+      },
+      // Neutralise `useWidthFromAnchor`'s `min-inline-size: max-content`
+      // floor so the caps below win and content reflows. `setStyle`
+      // restores the floor on cleanup.
+      {
+        property: 'min-inline-size',
+        value: '0'
+      }, isBlockAxis ? {
+        property: 'max-block-size',
+        value: primaryAxisCap
+      } : {
+        property: 'max-inline-size',
+        value: primaryAxisCap
+      }, isBlockAxis ? {
+        property: 'max-inline-size',
+        value: CROSS_INLINE_CAP
+      } : {
+        property: 'max-block-size',
+        value: CROSS_BLOCK_CAP
+      }].concat(_toConsumableArray(NON_ANCHOR_MARGIN_SIDES[placementAxis].map(function (property) {
+        return {
+          property: property,
+          value: VIEWPORT_PADDING
+        };
+      })))
+    });
+
+    // The host deliberately stays `overflow: visible`. An ancestor with
+    // `overflow: auto` clips a descendant's `box-shadow`, so capping and
+    // scrolling on the host would strip the elevation shadow from the
+    // consumer surface. Instead the host only constrains size; scrolling
+    // oversized content is the consumer surface's own responsibility,
+    // matching the contract `@atlaskit/top-layer`'s `PopoverSurface` follows
+    // (shadow and `overflow` on one element). For that surface (the host's
+    // flex child) to be clamped to the cap and scroll its own content, it
+    // must be allowed to shrink below its intrinsic size, so reset its
+    // min-size floor.
+    var child = element.firstElementChild;
+    var cleanupChild = child instanceof HTMLElement ? setStyle({
+      element: child,
+      styles: [{
+        property: 'min-block-size',
+        value: '0'
+      }, {
+        property: 'min-inline-size',
+        value: '0'
+      }]
+    }) : undefined;
+    return function () {
+      cleanupHost();
+      cleanupChild === null || cleanupChild === void 0 || cleanupChild();
+    };
+  }, [target, placementAxis, gap, isEnabled, isOpen]);
+}

package/dist/esm/internal/use-manager-anchor-setter.js

@@ -0,0 +1,11 @@
+import { useContext } from 'react';
+import { AnchorSetterContext } from './anchor-setter-context';
+
+/**
+ * Returns the setter that an ancestor `<Manager>` exposes to publish
+ * the anchor element from `<Reference>`. Returns a no-op when there is
+ * no surrounding `<Manager>`.
+ */
+export function useManagerAnchorSetter() {
+  return useContext(AnchorSetterContext);
+}

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

@@ -0,0 +1,11 @@
+import { useContext } from 'react';
+import { AnchorContext } from './anchor-context';
+
+/**
+ * Returns the current anchor element published by an ancestor
+ * `<Reference>` via the shared `<Manager>` provider. Returns `null`
+ * when there is no surrounding `<Manager>` / `<Reference>` pair.
+ */
+export function useManagerAnchor() {
+  return useContext(AnchorContext);
+}

package/dist/esm/internal/use-reference-visibility.js

@@ -0,0 +1,157 @@
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import { useCallback, useLayoutEffect, useState } from 'react';
+import { bind, bindAll } from 'bind-event-listener';
+import { readViewport } from './read-viewport';
+var INITIAL = {
+  isReferenceHidden: false,
+  hasPopperEscaped: false
+};
+function isFullyOutsideViewport(rect, viewport) {
+  if (rect.width === 0 && rect.height === 0) {
+    return true;
+  }
+  if (rect.bottom <= 0) {
+    return true;
+  }
+  if (rect.right <= 0) {
+    return true;
+  }
+  if (rect.top >= viewport.height) {
+    return true;
+  }
+  if (rect.left >= viewport.width) {
+    return true;
+  }
+  return false;
+}
+function isClippingOverflow(value) {
+  return value === 'auto' || value === 'scroll' || value === 'hidden' || value === 'clip';
+}
+function isClippedByAncestors(element) {
+  var rect = element.getBoundingClientRect();
+  var parent = element.parentElement;
+  while (parent) {
+    // Read the longhand axis properties directly. The `overflow` shorthand
+    // is only populated when both axes share the same value, so reading it
+    // alone misses ancestors that set only `overflow-x` or `overflow-y`.
+    var style = window.getComputedStyle(parent);
+    var clipsHorizontally = isClippingOverflow(style.overflowX);
+    var clipsVertically = isClippingOverflow(style.overflowY);
+    if (clipsHorizontally || clipsVertically) {
+      var parentRect = parent.getBoundingClientRect();
+      var horizontallyOutside = rect.right <= parentRect.left || rect.left >= parentRect.right;
+      var verticallyOutside = rect.bottom <= parentRect.top || rect.top >= parentRect.bottom;
+      if (clipsHorizontally && horizontallyOutside) {
+        return true;
+      }
+      if (clipsVertically && verticallyOutside) {
+        return true;
+      }
+    }
+    parent = parent.parentElement;
+  }
+  return false;
+}
+
+/**
+ * Exists **only** to preserve API parity with the legacy popper.js
+ * implementation. The top-layer popper does not natively expose
+ * popper.js's `isReferenceHidden` / `hasPopperEscaped` render-prop
+ * modifiers, but existing consumers still branch on those values, so
+ * this hook reconstructs them from live DOM measurement.
+ *
+ * Do not reach for this hook in new code. If you find yourself wanting
+ * these signals for a new feature, prefer a first-class top-layer or
+ * anchor-positioning primitive instead.
+ *
+ * - `isReferenceHidden`: the anchor's bounding rect is fully outside the
+ *   visual viewport OR is clipped to zero area by any scrollable
+ *   ancestor.
+ * - `hasPopperEscaped`: the popover surface's rect is fully outside the
+ *   visual viewport.
+ *
+ * Measurement runs in a `useLayoutEffect` so the first paint already
+ * reflects the correct values, preventing consumers from animating
+ * from `opacity: 1` to `opacity: 0` on mount.
+ */
+export function useReferenceVisibility(_ref) {
+  var anchor = _ref.anchor,
+    popoverRef = _ref.popoverRef;
+  var _useState = useState(INITIAL),
+    _useState2 = _slicedToArray(_useState, 2),
+    visibility = _useState2[0],
+    setVisibility = _useState2[1];
+  var measure = useCallback(function () {
+    if (!anchor) {
+      setVisibility(function (previous) {
+        return previous.isReferenceHidden === false && previous.hasPopperEscaped === false ? previous : INITIAL;
+      });
+      return;
+    }
+    var viewport = readViewport();
+    var anchorRect = anchor.getBoundingClientRect();
+    var isReferenceHidden = isFullyOutsideViewport(anchorRect, viewport) || isClippedByAncestors(anchor);
+    var popoverElement = popoverRef.current;
+    var hasPopperEscaped = popoverElement ? isFullyOutsideViewport(popoverElement.getBoundingClientRect(), viewport) : false;
+    setVisibility(function (previous) {
+      if (previous.isReferenceHidden === isReferenceHidden && previous.hasPopperEscaped === hasPopperEscaped) {
+        return previous;
+      }
+      return {
+        isReferenceHidden: isReferenceHidden,
+        hasPopperEscaped: hasPopperEscaped
+      };
+    });
+  }, [anchor, popoverRef]);
+  useLayoutEffect(function () {
+    measure();
+    if (typeof window === 'undefined') {
+      return undefined;
+    }
+    var cleanups = [];
+
+    // Resize observer on the anchor so layout changes update visibility.
+    if (anchor && typeof ResizeObserver !== 'undefined') {
+      var observer = new ResizeObserver(function () {
+        return measure();
+      });
+      observer.observe(anchor);
+      cleanups.push(function () {
+        return observer.disconnect();
+      });
+    }
+
+    // Scroll + resize: any scroll event in the document can move the
+    // anchor in/out of any scrollable ancestor's viewport.
+    cleanups.push(bindAll(window, [{
+      type: 'scroll',
+      listener: measure,
+      options: {
+        capture: true,
+        passive: true
+      }
+    }, {
+      type: 'resize',
+      listener: measure,
+      options: {
+        passive: true
+      }
+    }]));
+    var visual = window.visualViewport;
+    if (visual) {
+      cleanups.push(bind(visual, {
+        type: 'resize',
+        listener: measure,
+        options: {
+          passive: true
+        }
+      }));
+    }
+    return function () {
+      cleanups.forEach(function (cleanup) {
+        return cleanup();
+      });
+    };
+  }, [anchor, measure]);
+  return visibility;
+}

package/dist/esm/manager.js

@@ -0,0 +1,31 @@
+import React from 'react';
+import { Manager as ReactPopperManager } from 'react-popper';
+import { AnchorContext } from './internal/anchor-context';
+import { AnchorSetterContext } from './internal/anchor-setter-context';
+import { useAnchorState } from './internal/use-anchor-state';
+
+// Derive the wrapper's props from `react-popper`'s own `ManagerProps` so the
+// public surface provably accepts exactly what the underlying `<Manager>`
+// accepts (today just `children`) and stays in sync if that contract changes.
+
+/**
+ * Wraps `react-popper`'s `<Manager>` so the anchor that `<Reference>`
+ * captures is published through `@atlaskit/popper`'s own bridge context.
+ * Doing so insulates `<Popper>` consumers from `react-popper`'s dual
+ * CJS / ESM builds, which otherwise create two unrelated context
+ * instances that prevent the FF-on top-layer adapter from discovering
+ * the anchor.
+ */
+export function Manager(_ref) {
+  var children = _ref.children;
+  // `setAnchor` is the `useState` setter, which React guarantees is stable
+  // across renders, so it can be passed straight to the context provider.
+  var _useAnchorState = useAnchorState(),
+    anchor = _useAnchorState.anchor,
+    setAnchor = _useAnchorState.setAnchor;
+  return /*#__PURE__*/React.createElement(ReactPopperManager, null, /*#__PURE__*/React.createElement(AnchorSetterContext.Provider, {
+    value: setAnchor
+  }, /*#__PURE__*/React.createElement(AnchorContext.Provider, {
+    value: anchor
+  }, children)));
+}