@atlaskit/popper 8.0.1 → 8.2.0

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

@@ -0,0 +1,151 @@
+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.
+ */
+
+const CROSS_INLINE_CAP = 'calc(100dvw - 10px)';
+const 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.
+ */
+const 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.
+ */
+const 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({
+  target,
+  placementAxis,
+  gap,
+  isEnabled,
+  isOpen
+}) {
+  useLayoutEffect(() => {
+    const element = target.current;
+    if (!element || !isEnabled) {
+      return;
+    }
+    const isBlockAxis = placementAxis === 'top' || placementAxis === 'bottom';
+    const primaryAxisCap = `calc(100% - 5px - ${gap})`;
+    const cleanupHost = setStyle({
+      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
+      },
+      // Park the reserved viewport padding on the non-anchor sides so a
+      // capped popover keeps the legacy `viewportPadding` gap from the
+      // viewport edge instead of sitting flush against it.
+      ...NON_ANCHOR_MARGIN_SIDES[placementAxis].map(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.
+    const child = element.firstElementChild;
+    const cleanupChild = child instanceof HTMLElement ? setStyle({
+      element: child,
+      styles: [{
+        property: 'min-block-size',
+        value: '0'
+      }, {
+        property: 'min-inline-size',
+        value: '0'
+      }]
+    }) : undefined;
+    return () => {
+      cleanupHost();
+      cleanupChild === null || cleanupChild === void 0 ? void 0 : cleanupChild();
+    };
+  }, [target, placementAxis, gap, isEnabled, isOpen]);
+}

package/dist/es2019/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/es2019/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/es2019/internal/use-reference-visibility.js

@@ -0,0 +1,146 @@
+import { useCallback, useLayoutEffect, useState } from 'react';
+import { bind, bindAll } from 'bind-event-listener';
+import { readViewport } from './read-viewport';
+const 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) {
+  const rect = element.getBoundingClientRect();
+  let 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`.
+    const style = window.getComputedStyle(parent);
+    const clipsHorizontally = isClippingOverflow(style.overflowX);
+    const clipsVertically = isClippingOverflow(style.overflowY);
+    if (clipsHorizontally || clipsVertically) {
+      const parentRect = parent.getBoundingClientRect();
+      const horizontallyOutside = rect.right <= parentRect.left || rect.left >= parentRect.right;
+      const 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({
+  anchor,
+  popoverRef
+}) {
+  const [visibility, setVisibility] = useState(INITIAL);
+  const measure = useCallback(() => {
+    if (!anchor) {
+      setVisibility(previous => previous.isReferenceHidden === false && previous.hasPopperEscaped === false ? previous : INITIAL);
+      return;
+    }
+    const viewport = readViewport();
+    const anchorRect = anchor.getBoundingClientRect();
+    const isReferenceHidden = isFullyOutsideViewport(anchorRect, viewport) || isClippedByAncestors(anchor);
+    const popoverElement = popoverRef.current;
+    const hasPopperEscaped = popoverElement ? isFullyOutsideViewport(popoverElement.getBoundingClientRect(), viewport) : false;
+    setVisibility(previous => {
+      if (previous.isReferenceHidden === isReferenceHidden && previous.hasPopperEscaped === hasPopperEscaped) {
+        return previous;
+      }
+      return {
+        isReferenceHidden,
+        hasPopperEscaped
+      };
+    });
+  }, [anchor, popoverRef]);
+  useLayoutEffect(() => {
+    measure();
+    if (typeof window === 'undefined') {
+      return undefined;
+    }
+    const cleanups = [];
+
+    // Resize observer on the anchor so layout changes update visibility.
+    if (anchor && typeof ResizeObserver !== 'undefined') {
+      const observer = new ResizeObserver(() => measure());
+      observer.observe(anchor);
+      cleanups.push(() => 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
+      }
+    }]));
+    const visual = window.visualViewport;
+    if (visual) {
+      cleanups.push(bind(visual, {
+        type: 'resize',
+        listener: measure,
+        options: {
+          passive: true
+        }
+      }));
+    }
+    return () => {
+      cleanups.forEach(cleanup => cleanup());
+    };
+  }, [anchor, measure]);
+  return visibility;
+}

package/dist/es2019/manager.js

@@ -0,0 +1,33 @@
+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({
+  children
+}) {
+  // `setAnchor` is the `useState` setter, which React guarantees is stable
+  // across renders, so it can be passed straight to the context provider.
+  const {
+    anchor,
+    setAnchor
+  } = useAnchorState();
+  return /*#__PURE__*/React.createElement(ReactPopperManager, null, /*#__PURE__*/React.createElement(AnchorSetterContext.Provider, {
+    value: setAnchor
+  }, /*#__PURE__*/React.createElement(AnchorContext.Provider, {
+    value: anchor
+  }, children)));
+}

package/dist/es2019/popper-top-layer.js

@@ -0,0 +1,267 @@
+/* popper-top-layer.tsx generated by @compiled/babel-plugin v0.39.1 */
+import { ax, ix } from "@compiled/react/runtime";
+import React, { useMemo, useRef, useState } from 'react';
+import { getDocument } from '@atlaskit/browser-apis';
+import noop from '@atlaskit/ds-lib/noop';
+import { fromLegacyPlacement } from '@atlaskit/top-layer/placement-map';
+import { Popover } from '@atlaskit/top-layer/popover';
+import { useAnchorPosition } from '@atlaskit/top-layer/use-anchor-position';
+import { useAnchorPositionAtPoint } from '@atlaskit/top-layer/use-anchor-position-at-point';
+import { usePopoverId } from '@atlaskit/top-layer/use-popover-id';
+import { useWidthFromAnchor } from '@atlaskit/top-layer/use-width-from-anchor';
+import { rectPointForPlacement } from './internal/rect-point-for-placement';
+import { useFitViewportMaxSize } from './internal/use-fit-viewport-max-size';
+import { useManagerAnchor } from './internal/use-manager-anchor';
+import { useReferenceVisibility } from './internal/use-reference-visibility';
+/**
+ * Inert render-prop values. The browser owns positioning under CSS Anchor
+ * Positioning, so `style` / `ref` / `arrowProps` / `update` / `forceUpdate`
+ * are no-ops that consumers can safely spread. Module scope keeps identities
+ * stable for effect dep arrays.
+ */
+const noopStyle = {};
+const noopSetRef = noop;
+const noopUpdate = () => Promise.resolve(null);
+const noopForceUpdate = () => ({});
+
+/**
+ * `react-popper` stamps `data-popper-arrow` on the arrow element at runtime
+ * but does not declare it on `arrowProps`. Widen the type so consumers that
+ * rely on the attribute (CSS selectors, snapshots, tests) keep working.
+ */
+
+const noopArrowProps = {
+  ref: noopSetRef,
+  style: noopStyle,
+  'data-popper-arrow': true
+};
+
+/**
+ * Returns whether the current page is laid out right-to-left.
+ */
+function isPageRtl() {
+  const document = getDocument();
+  if (!document) {
+    return false;
+  }
+  return document.dir === 'rtl' || document.body.dir === 'rtl' || document.documentElement.dir === 'rtl';
+}
+
+/**
+ * `@popperjs/core`'s `Placement` union is a strict subset of
+ * `TLegacyPlacement` (the placement-map adds `top-center` /
+ * `bottom-center` on top of popper's enum), so every value popper hands
+ * us is a valid legacy placement. The cast keeps the runtime path free
+ * of an extra module-level lookup that bundlers can occasionally fail
+ * to wire up (observed as `Cannot read properties of undefined (reading
+ * 'includes')` in component-test bundles).
+ */
+function toLegacyPlacement(placement) {
+  return placement;
+}
+
+/**
+ * Returns the primary axis (`top` / `bottom` / `left` / `right`) of a popper
+ * placement, used to pick which axis `useFitViewportMaxSize` caps to the
+ * anchor edge.
+ */
+function getPlacementAxis(placement) {
+  if (placement.startsWith('top')) {
+    return 'top';
+  }
+  if (placement.startsWith('bottom')) {
+    return 'bottom';
+  }
+  if (placement.startsWith('left')) {
+    return 'left';
+  }
+  if (placement.startsWith('right')) {
+    return 'right';
+  }
+  // `auto*` placements have no fixed axis. Default to `bottom` to match the
+  // `auto -> block-end` mapping in `fromLegacyPlacement`.
+  return 'bottom';
+}
+
+/**
+ * Normalises popper's `[along, away]` offset (which may include `null` or
+ * `undefined` entries) into the `[along, away]` number tuple
+ * `fromLegacyPlacement` expects.
+ */
+function popperToTopLayerOffset(offset) {
+  if (!offset) {
+    return undefined;
+  }
+  const [along, away] = offset;
+  if (along == null && away == null) {
+    return undefined;
+  }
+  return [along !== null && along !== void 0 ? along : 0, away !== null && away !== void 0 ? away : 0];
+}
+
+/**
+ * FF-on implementation of `@atlaskit/popper`'s `<Popper>` primitive.
+ *
+ * Renders the consumer's render-prop output into a `<Popover>` from
+ * `@atlaskit/top-layer`, which lifts the element into the browser top
+ * layer and positions it via CSS Anchor Positioning. The render-prop
+ * contract (`PopperChildrenProps`) is preserved at the type level;
+ * `style` and `arrowProps.style` are inert at runtime because the
+ * browser owns positioning.
+ *
+ * Gated behind the `platform-dst-top-layer` feature flag from
+ * `popper.tsx`.
+ */
+export function PopperTopLayer({
+  children,
+  offset,
+  placement = 'bottom-start',
+  referenceElement,
+  shouldFitViewport = false
+}) {
+  var _ref;
+  // `modifiers` and `strategy` are accepted for source compatibility but have
+  // no runtime effect; CSS Anchor Positioning + top-layer rendering replaces
+  // them. See `top-layer/notes/migrations/popper-migration.md`.
+
+  // Anchor resolution: `referenceElement` prop, then `<Manager>` context.
+  const managerAnchor = useManagerAnchor();
+  const effectiveReference = (_ref = referenceElement !== null && referenceElement !== void 0 ? referenceElement : managerAnchor) !== null && _ref !== void 0 ? _ref : undefined;
+
+  // Real DOM nodes go to `useAnchorPosition`; popper `VirtualElement`s are
+  // bridged through `useAnchorPositionAtPoint`, which owns its own synthetic
+  // anchor.
+  const htmlAnchor = effectiveReference instanceof HTMLElement ? effectiveReference : null;
+  const virtualReference = effectiveReference != null && !(effectiveReference instanceof HTMLElement) ? effectiveReference : null;
+  const htmlAnchorRef = useRef(htmlAnchor);
+  htmlAnchorRef.current = htmlAnchor;
+  const popoverRef = useRef(null);
+  const popoverId = usePopoverId();
+
+  // Track the resolved DOM anchor in state so visibility / max-size hooks
+  // re-run when its identity changes. Virtual anchors do not feed these
+  // hooks because their probe is outside the consumer's DOM.
+  //
+  // Adjust state during render by comparing against the state itself: the
+  // conditional guard means `setResolvedAnchor` is skipped once they match,
+  // so it converges in one extra render. This is the React-documented pattern
+  // and is side-effect-free — no ref mutation during render.
+  const [resolvedAnchor, setResolvedAnchor] = useState(htmlAnchor);
+  if (resolvedAnchor !== htmlAnchor) {
+    setResolvedAnchor(htmlAnchor);
+  }
+  const topLayerPlacement = useMemo(() => {
+    return fromLegacyPlacement({
+      legacy: toLegacyPlacement(placement),
+      offset: popperToTopLayerOffset(offset)
+    });
+  }, [placement, offset]);
+  const isOpen = effectiveReference != null;
+
+  // HTML-element path. No-op when the reference is virtual or absent.
+  useAnchorPosition({
+    anchorRef: htmlAnchorRef,
+    popoverRef,
+    placement: topLayerPlacement,
+    isEnabled: htmlAnchor != null,
+    isOpen
+  });
+
+  // Virtual-element path. `useAnchorPositionAtPoint` owns a synthetic
+  // anchor in `document.body` and latches `getPoint` once per
+  // `isEnabled` activation. Reading the latest `virtualReference` and
+  // `topLayerPlacement` via refs ensures the latched closure always
+  // sees the current values rather than the ones captured at first
+  // activation, which would otherwise go stale if either prop changes
+  // while the popper stays open.
+  const virtualReferenceRef = useRef(virtualReference);
+  virtualReferenceRef.current = virtualReference;
+  const topLayerPlacementRef = useRef(topLayerPlacement);
+  topLayerPlacementRef.current = topLayerPlacement;
+  const isVirtualEnabled = virtualReference != null;
+  useAnchorPositionAtPoint({
+    popoverRef,
+    placement: topLayerPlacement,
+    isEnabled: isVirtualEnabled,
+    isOpen,
+    getPoint: () => {
+      const current = virtualReferenceRef.current;
+      if (!current) {
+        return null;
+      }
+      return rectPointForPlacement({
+        rect: current.getBoundingClientRect(),
+        placement: topLayerPlacementRef.current,
+        isRtl: isPageRtl()
+      });
+    }
+  });
+  const {
+    isReferenceHidden,
+    hasPopperEscaped
+  } = useReferenceVisibility({
+    anchor: resolvedAnchor,
+    popoverRef
+  });
+
+  // Restore legacy `react-popper`'s natural-width behaviour. Under CSS
+  // Anchor Positioning the `position-area` grid cell becomes the popover
+  // host's containing block, so an auto-width host shrinks to that cell.
+  // When the anchor sits near a viewport edge the cell is narrow, so the
+  // content wraps far more than it did under `react-popper` (which kept the
+  // content's natural width and shifted/flipped to stay on screen).
+  // `min-inline-size: max-content` (mode `'none'`) floors the host at its
+  // content's intrinsic width, so a too-narrow span overflows the viewport
+  // (driving `position-try-fallbacks`) instead of wrapping. This is safe
+  // alongside `shouldFitViewport`: the fit caps clamp the host on both axes,
+  // so the host never exceeds the viewport / anchor-edge cap.
+  useWidthFromAnchor({
+    mode: 'none',
+    popoverRef,
+    anchorRef: htmlAnchorRef,
+    isOpen
+  });
+
+  // `shouldFitViewport` caps are applied directly to the `position-area`
+  // host, whose containing block is the cell between the anchor edge and the
+  // viewport edge — so a pure-CSS `calc(100% - 5px - gap)` reproduces the
+  // legacy per-placement anchor-edge cap with no measurement. The gap mirrors
+  // `getPlacement`: an omitted offset resolves to `space.100`, otherwise the
+  // consumer's `away` value.
+  const resolvedOffset = popperToTopLayerOffset(offset);
+  const fitGap = resolvedOffset ? `${resolvedOffset[1]}px` : "var(--ds-space-100, 8px)";
+  const placementAxis = getPlacementAxis(placement);
+  useFitViewportMaxSize({
+    target: popoverRef,
+    placementAxis,
+    gap: fitGap,
+    isEnabled: shouldFitViewport,
+    isOpen
+  });
+  const renderChildren = children;
+  if (typeof renderChildren !== 'function') {
+    return null;
+  }
+  const renderPropArg = {
+    ref: noopSetRef,
+    style: noopStyle,
+    placement,
+    isReferenceHidden,
+    hasPopperEscaped,
+    update: noopUpdate,
+    forceUpdate: noopForceUpdate,
+    arrowProps: noopArrowProps
+  };
+  const content = renderChildren(renderPropArg);
+
+  // The `shouldFitViewport` size caps live on the `<Popover>` host itself
+  // (applied by `useFitViewportMaxSize` above), so the consumer's content is
+  // rendered directly with no intermediate wrapper.
+  return /*#__PURE__*/React.createElement(Popover, {
+    ref: popoverRef,
+    id: popoverId,
+    isOpen: isOpen,
+    mode: "manual",
+    animate: false
+  }, content);
+}

package/dist/es2019/popper.js

@@ -1,6 +1,8 @@
 import React, { useMemo } from 'react';
 import { Popper as ReactPopper } from 'react-popper';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { getMaxSizeModifiers } from './max-size';
+import { PopperTopLayer } from './popper-top-layer';
 export { placements } from '@popperjs/core';
 // Export types from PopperJS / React Popper
 
@@ -19,6 +21,41 @@ function defaultChildrenFn() {
 }
 const defaultOffset = [0, 8];
 export function Popper({
+  children,
+  offset,
+  placement,
+  referenceElement,
+  modifiers,
+  strategy,
+  shouldFitViewport
+}) {
+  // The FF check sits at the very top of the public Popper so the
+  // rest of the function (which has its own hooks) does not violate
+  // the rules of hooks. Each branch is its own component with its
+  // own complete hook order. Props are forwarded explicitly to
+  // satisfy `no-unsafe-spread-props`.
+  if (fg('platform-dst-top-layer')) {
+    return /*#__PURE__*/React.createElement(PopperTopLayer, {
+      children: children,
+      offset: offset,
+      placement: placement,
+      referenceElement: referenceElement,
+      modifiers: modifiers,
+      strategy: strategy,
+      shouldFitViewport: shouldFitViewport
+    });
+  }
+  return /*#__PURE__*/React.createElement(LegacyPopper, {
+    children: children,
+    offset: offset,
+    placement: placement,
+    referenceElement: referenceElement,
+    modifiers: modifiers,
+    strategy: strategy,
+    shouldFitViewport: shouldFitViewport
+  });
+}
+function LegacyPopper({
   children = defaultChildrenFn,
   offset = defaultOffset,
   placement = 'bottom-start',