@atlaskit/popper 8.0.1 → 8.2.0

package/CHANGELOG.md

@@ -1,11 +1,41 @@
 # @atlaskit/popper
 
+## 8.2.0
+
+### Minor Changes
+
+- [`cd097a2111788`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/cd097a2111788) -
+  Republish packages depending on `@atlaskit/react-compiler-gating` so their published dependency
+  reference is updated to the renamed `@atlaskit/react-compiler-gating` scope.
+
+  The earlier rename of `@atlassian/react-compiler-gating` to `@atlaskit/react-compiler-gating` only
+  bumped the renamed package itself, so dependent packages were never republished and their
+  published versions still referenced the old `@atlassian/react-compiler-gating` name, which is not
+  available in the public npm registry. This minor bump republishes all affected packages with the
+  corrected dependency.
+
+### Patch Changes
+
+- Updated dependencies
+
+## 8.1.0
+
+### Minor Changes
+
+- [`db3328ec580e4`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/db3328ec580e4) -
+  Behind the `"platform-dst-top-layer"` feature flag, `@atlaskit/popper` now renders into the
+  browser top layer via `@atlaskit/top-layer`. Public API and exported types are unchanged.
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 8.0.1
 
 ### Patch Changes
 
 - [`ee28cf33718b0`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/ee28cf33718b0) -
-  Add @atlassian/react-compiler-gating as a runtime dependency to enable React Compiler platform
+  Add @atlaskit/react-compiler-gating as a runtime dependency to enable React Compiler platform
   gating.
 - Updated dependencies
 

package/dist/cjs/index.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 Object.defineProperty(exports, "Manager", {
   enumerable: true,
   get: function get() {
-    return _reactPopper.Manager;
+    return _manager.Manager;
   }
 });
 Object.defineProperty(exports, "Popper", {
@@ -18,7 +18,7 @@ Object.defineProperty(exports, "Popper", {
 Object.defineProperty(exports, "Reference", {
   enumerable: true,
   get: function get() {
-    return _reactPopper.Reference;
+    return _reference.Reference;
   }
 });
 Object.defineProperty(exports, "placements", {
@@ -28,4 +28,5 @@ Object.defineProperty(exports, "placements", {
   }
 });
 var _popper = require("./popper");
-var _reactPopper = require("react-popper");
+var _manager = require("./manager");
+var _reference = require("./reference");

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

@@ -0,0 +1,17 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.AnchorContext = void 0;
+var _react = require("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`.
+ */
+var AnchorContext = exports.AnchorContext = /*#__PURE__*/(0, _react.createContext)(null);

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

@@ -0,0 +1,17 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.AnchorSetterContext = void 0;
+var _react = require("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.
+ */
+var AnchorSetterContext = exports.AnchorSetterContext = /*#__PURE__*/(0, _react.createContext)(function () {
+  return undefined;
+});

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

@@ -0,0 +1,31 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.readViewport = readViewport;
+/**
+ * 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.
+ */
+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/cjs/internal/rect-point-for-placement.js

@@ -0,0 +1,93 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.rectPointForPlacement = rectPointForPlacement;
+/**
+ * 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'`).
+ */
+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/cjs/internal/set-style.js

@@ -0,0 +1,43 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.setStyle = setStyle;
+/**
+ * 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.
+ */
+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/cjs/internal/use-anchor-state.js

@@ -0,0 +1,23 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useAnchorState = useAnchorState;
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _react = require("react");
+/**
+ * Returns the local state used by `<Manager>` to publish the anchor
+ * captured by `<Reference>` to descendant `<Popper>` instances.
+ */
+function useAnchorState() {
+  var _useState = (0, _react.useState)(null),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    anchor = _useState2[0],
+    setAnchor = _useState2[1];
+  return {
+    anchor: anchor,
+    setAnchor: setAnchor
+  };
+}

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

@@ -0,0 +1,155 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useFitViewportMaxSize = useFitViewportMaxSize;
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+var _react = require("react");
+var _setStyle = require("./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)
+ */
+function useFitViewportMaxSize(_ref) {
+  var target = _ref.target,
+    placementAxis = _ref.placementAxis,
+    gap = _ref.gap,
+    isEnabled = _ref.isEnabled,
+    isOpen = _ref.isOpen;
+  (0, _react.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 = (0, _setStyle.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((0, _toConsumableArray2.default)(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 ? (0, _setStyle.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/cjs/internal/use-manager-anchor-setter.js

@@ -0,0 +1,16 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useManagerAnchorSetter = useManagerAnchorSetter;
+var _react = require("react");
+var _anchorSetterContext = require("./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>`.
+ */
+function useManagerAnchorSetter() {
+  return (0, _react.useContext)(_anchorSetterContext.AnchorSetterContext);
+}

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

@@ -0,0 +1,16 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useManagerAnchor = useManagerAnchor;
+var _react = require("react");
+var _anchorContext = require("./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.
+ */
+function useManagerAnchor() {
+  return (0, _react.useContext)(_anchorContext.AnchorContext);
+}

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

@@ -0,0 +1,164 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useReferenceVisibility = useReferenceVisibility;
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _react = require("react");
+var _bindEventListener = require("bind-event-listener");
+var _readViewport = require("./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.
+ */
+function useReferenceVisibility(_ref) {
+  var anchor = _ref.anchor,
+    popoverRef = _ref.popoverRef;
+  var _useState = (0, _react.useState)(INITIAL),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    visibility = _useState2[0],
+    setVisibility = _useState2[1];
+  var measure = (0, _react.useCallback)(function () {
+    if (!anchor) {
+      setVisibility(function (previous) {
+        return previous.isReferenceHidden === false && previous.hasPopperEscaped === false ? previous : INITIAL;
+      });
+      return;
+    }
+    var viewport = (0, _readViewport.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]);
+  (0, _react.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((0, _bindEventListener.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((0, _bindEventListener.bind)(visual, {
+        type: 'resize',
+        listener: measure,
+        options: {
+          passive: true
+        }
+      }));
+    }
+    return function () {
+      cleanups.forEach(function (cleanup) {
+        return cleanup();
+      });
+    };
+  }, [anchor, measure]);
+  return visibility;
+}