@atlaskit/top-layer 4.4.5 → 5.0.0

package/dist/es2019/internal/use-anchor-position.js

@@ -1,480 +0,0 @@
-/**
- * Anchor positioning for top-layer popovers. See
- * `notes/architecture/positioning.md` for the full model.
- *
- * Two runtime paths: CSS Anchor Positioning (modern browsers) and a JS
- * fallback that measures the trigger and writes `top`/`left`.
- *
- * Both paths honour `offset.gap` and `offset.crossAxisShift`. The
- * CSS path passes the values through as strings; the JS fallback resolves
- * them to pixels via a hidden DOM probe (see `resolveCssLengthToPixels`)
- * so tokens, `calc()`, `var()`, etc all work. The JS fallback hides the
- * popover with `opacity: 0` until the first measurement completes, so it
- * is never painted at the wrong location.
- */
-import { useId, useLayoutEffect, useMemo } from 'react';
-import { bind } from 'bind-event-listener';
-import rafSchedule from 'raf-schd';
-import once from '@atlaskit/ds-lib/once';
-import { computeFallbackPosition } from './anchor-positioning-fallback';
-import { combine } from './combine';
-import { placementToPositionArea } from './placement-to-position-area';
-import { placementToTryFallbacks } from './placement-to-try-fallbacks';
-import { resolveCssLengthToPixels } from './resolve-css-length-to-pixels';
-import { resolvePlacement } from './resolve-placement';
-import { setStyle } from './set-style';
-
-// `resolvePlacement` is intentionally NOT re-exported here - import it directly
-// from `./resolve-placement` so search-and-jump lands at the source of truth.
-
-/**
- * Module-scope no-op `ResizeObserver` used in non-DOM jest environments where
- * `ResizeObserver` is `undefined`. Hoisted out of the effect to avoid
- * allocating a new class declaration on every run.
- */
-const NoopResizeObserver = class {
-  observe() {}
-  unobserve() {}
-  disconnect() {}
-};
-
-/**
- * Returns true when the popover is currently open. Wrapped because the
- * `:popover-open` pseudo-class is not implemented in some test environments
- * (e.g. jsdom), where `matches` throws on unknown selectors.
- */
-function isPopoverOpen(popover) {
-  try {
-    return popover.matches(':popover-open');
-  } catch {
-    return false;
-  }
-}
-
-/**
- * Detects whether the browser supports CSS Anchor Positioning.
- * Uses `once()` for lazy evaluation: safe for SSR and avoids hydration mismatches.
- */
-const supportsAnchorPositioning = once(() => {
-  if (typeof window === 'undefined' || typeof CSS === 'undefined' || typeof CSS.supports !== 'function') {
-    return false;
-  }
-  return CSS.supports('anchor-name', '--a');
-});
-
-/**
- * Every logical margin property this module can write: one per axis, per side.
- *
- * Deriving the union from `TPlacementAxis` and `TPlacementEdge` rather than
- * writing the four names out keeps it in step with the placement model, and
- * makes `CROSS_AXIS_SHIFT_CUSTOM_PROPERTY` below exhaustive by construction.
- */
-
-/**
- * The custom property mirroring each cross-axis shift margin.
- *
- * These are written for the planned named arrow `@position-try` rules. Nothing
- * reads them yet, and the shift no longer depends on them: the antisymmetric
- * margins written by `crossAxisShiftMargins` survive a cross-axis slide on
- * their own.
- *
- * Keyed on `TLogicalMarginProperty` and not on `string`, so a margin property
- * that has no custom property (or a custom property whose margin no longer
- * exists) is a compile error rather than an `undefined` lookup that reaches
- * `setStyle` as `{ property: undefined, value }`.
- */
-const CROSS_AXIS_SHIFT_CUSTOM_PROPERTY = {
-  'margin-inline-start': '--ds-cross-axis-shift-margin-start',
-  'margin-inline-end': '--ds-cross-axis-shift-margin-end',
-  'margin-block-start': '--ds-cross-axis-shift-margin-block-start',
-  'margin-block-end': '--ds-cross-axis-shift-margin-block-end'
-};
-const ZEROED_CROSS_AXIS_SHIFT_CUSTOM_PROPERTIES = Object.values(CROSS_AXIS_SHIFT_CUSTOM_PROPERTY).map(property => ({
-  property,
-  value: '0px'
-}));
-
-/**
- * Returns the CSS margin declaration that creates a gap between the
- * popover and its trigger on the side facing the anchor.
- *
- * For example, a `block-end` placement (popover below) gets
- * `margin-block-start: 8px` to push it away from the trigger's bottom edge.
- */
-function edgeMargin({
-  placement,
-  offset
-}) {
-  const {
-    axis,
-    edge
-  } = placement;
-  // The gap sits on the side FACING the anchor, which is always the side
-  // opposite the placement edge.
-  const anchorFacingEdge = edge === 'end' ? 'start' : 'end';
-  return {
-    property: `margin-${axis}-${anchorFacingEdge}`,
-    value: offset
-  };
-}
-
-/**
- * **The cross-axis shift margins.**
- *
- * The shift is written antisymmetrically on BOTH cross-axis sides
- * (`start: +value`, `end: -value`) rather than as a single margin on the side
- * picked from `align`. Two separate behaviours require it:
- *
- * 1. **`align: 'center'` is centered with `anchor-center`, which centers the
- *    popover's MARGIN box on the anchor.** A single-sided margin widens the
- *    margin box, so it displaces the border box by only half its value. An
- *    antisymmetric pair leaves the margin box width unchanged (`+value` and
- *    `-value` sum to zero) while moving its center by the full value.
- * 2. **`position-try-fallbacks` can slide the popover onto the opposite
- *    cross-axis side.** A `<position-area>` fallback keeps the base style's
- *    margins, and margin on the un-anchored side has no effect, so a
- *    single-sided margin is silently dropped once the browser slides across the
- *    cross axis. With both sides written, whichever side ends up anchored moves
- *    the popover the same physical direction.
- *
- * Leaving the margin box width unchanged also means the shift does not move
- * the point at which `position-try-fallbacks` decides the popover overflows.
- *
- * A `<try-tactic>` fallback (`flip-block`, `flip-inline`) behaves differently to
- * a `<position-area>` one: it SWAPS the start and end margins rather than
- * keeping them, which is what preserves the gap through a flip. So a flip across
- * the cross axis mirrors the shift along with the rest of the placement, rather
- * than preserving its physical direction. Only the diagonal fallback does that,
- * and only for `align: 'start' | 'end'`. See `placementToTryFallbacks`.
- *
- * A positive value always moves the popover toward the cross-axis END, so
- * `direction: 'forwards'` means the same thing for every `align` value. See
- * `notes/decisions/placement-offset.md`.
- */
-function crossAxisShiftMargins({
-  placement,
-  crossAxisShiftCssValue,
-  direction
-}) {
-  const crossAxis = placement.axis === 'block' ? 'inline' : 'block';
-  // Wrap any string in calc() with the sign factor. CSS handles the math,
-  // so opaque values such as design tokens negate correctly.
-  const negated = `calc(-1 * ${crossAxisShiftCssValue})`;
-  const isForwards = direction === 'forwards';
-  return [{
-    property: `margin-${crossAxis}-start`,
-    value: isForwards ? crossAxisShiftCssValue : negated
-  }, {
-    property: `margin-${crossAxis}-end`,
-    value: isForwards ? negated : crossAxisShiftCssValue
-  }];
-}
-
-/**
- * Returns a referentially-stable, fully-resolved `TPlacement`. The memo is
- * keyed on the resolved primitive fields so a fresh inline `placement` object
- * (or undefined fields vs explicit defaults) does not produce a fresh result.
- */
-function useStablePlacement(placement) {
-  const resolved = resolvePlacement({
-    placement
-  });
-  const axis = resolved.axis;
-  const edge = resolved.edge;
-  const align = resolved.align;
-  const gap = resolved.offset.gap;
-  const shiftValue = resolved.offset.crossAxisShift.value;
-  const shiftDirection = resolved.offset.crossAxisShift.direction;
-  // Rebuild inside the memo from primitive deps so the factory does not
-  // close over the outer `resolved` reference and exhaustive-deps can verify.
-  return useMemo(() => ({
-    axis,
-    edge,
-    align,
-    offset: {
-      gap,
-      crossAxisShift: {
-        value: shiftValue,
-        direction: shiftDirection
-      }
-    }
-  }), [axis, edge, align, gap, shiftValue, shiftDirection]);
-}
-
-/**
- * Hook that positions an element relative to an anchor element using
- * CSS Anchor Positioning (with a JS fallback for older browsers).
- *
- * This hook is the positioning primitive. It has no knowledge of popovers,
- * visibility, or animation. Compose it with `Popover` for anchor-positioned
- * top-layer content.
- *
- * When CSS Anchor Positioning is supported, it sets CSS properties
- * (`anchor-name`, `position-anchor`, `position-area`, `position-try-fallbacks`)
- * directly on the elements via `el.style.setProperty()`.
- *
- * When not supported, it falls back to JavaScript-based positioning using
- * `position: fixed` with measured coordinates, re-running on scroll (capture)
- * and resize events.
- */
-// eslint-disable-next-line @atlaskit/volt-strict-mode/no-multiple-exports
-export function useAnchorPosition({
-  anchorRef,
-  popoverRef,
-  placement = {},
-  forceFallbackPositioning = false,
-  isEnabled = true,
-  isOpen
-}) {
-  const id = useId();
-  const stablePlacement = useStablePlacement(placement);
-  useLayoutEffect(() => {
-    if (!isEnabled) {
-      return;
-    }
-    const trigger = anchorRef.current;
-    const popover = popoverRef.current;
-    if (!trigger || !popover) {
-      return;
-    }
-    const gapCssValue = stablePlacement.offset.gap;
-    const crossAxisShiftCssValue = stablePlacement.offset.crossAxisShift.value;
-    const shouldForceFallback = Boolean(forceFallbackPositioning);
-    if (supportsAnchorPositioning() && !shouldForceFallback) {
-      // Reuse an existing `anchor-name` if the element already has one.
-      // Another popover might already be anchored to the old name.
-      const anchorName = trigger.style.getPropertyValue('anchor-name') || `--anchor-${id.replace(/:/g, '')}`;
-      const gap = edgeMargin({
-        placement: stablePlacement,
-        offset: gapCssValue
-      });
-      // Computed once; also mirrored into the
-      // `--ds-cross-axis-shift-margin-*` custom properties below.
-      const crossAxisShift = crossAxisShiftMargins({
-        placement: stablePlacement,
-        crossAxisShiftCssValue,
-        direction: stablePlacement.offset.crossAxisShift.direction
-      });
-      const popoverStyles = [{
-        property: 'position-anchor',
-        value: anchorName
-      }, {
-        property: 'position-area',
-        value: placementToPositionArea({
-          placement: stablePlacement
-        })
-      }, {
-        property: 'position-try-fallbacks',
-        value: placementToTryFallbacks({
-          placement: stablePlacement
-        })
-      },
-      // Reset browser default popover positioning that conflicts
-      // with anchor positioning (UA: `inset: 0; margin: auto;`)
-      {
-        property: 'margin',
-        value: '0'
-      }, {
-        property: 'inset',
-        value: 'auto'
-      }, gap, ...crossAxisShift,
-      // Zero every side first so the two sides that are NOT on the
-      // active cross axis do not keep a value from a previous placement.
-      ...ZEROED_CROSS_AXIS_SHIFT_CUSTOM_PROPERTIES, ...crossAxisShift.map(({
-        property,
-        value
-      }) => ({
-        property: CROSS_AXIS_SHIFT_CUSTOM_PROPERTY[property],
-        value
-      }))];
-
-      /**
-       * **We are never cleaning up anchor names**
-       *
-       * _Rationale_
-       *
-       * - Multiple popovers can share the same anchor element.
-       * - Sometimes the `useAnchorPosition` hook and `Popover`
-       *   are not in the same component.
-       * - There can be times when, even with reference counting, we
-       *   could remove the anchor-name while it is still being used
-       *   by something else - especially with async react updates
-       *   which can cause tearing
-       *
-       * _More_
-       *
-       * See `notes/decisions/anchor-name-lifetime.md`
-       */
-      trigger.style.setProperty('anchor-name', anchorName);
-      return setStyle({
-        element: popover,
-        styles: popoverStyles
-      });
-    }
-
-    // JS fallback. The popover is already in the top layer via
-    // popover="auto", so we only reset UA defaults and set top/left
-    // based on measurements.
-    const cleanupBaseStyles = setStyle({
-      element: popover,
-      styles: [{
-        property: 'margin',
-        value: '0'
-      }, {
-        property: 'inset',
-        value: 'auto'
-      }]
-    });
-
-    // The popover can be consumer-owned (`@atlaskit/popper`'s `createPopper`),
-    // so restore prior inline values rather than removing ours.
-    let undoPosition;
-    let undoHide;
-
-    // `opacity: 0` not `visibility: hidden`: Firefox skips visibility-hidden
-    // elements during `<dialog>` initial-focus traversal.
-    function hideUntilPositioned() {
-      // Keep the first snapshot, else we capture our own `opacity: 0`.
-      // (`!popover` is for TS: narrowing does not reach nested functions.)
-      if (!popover || undoHide) {
-        return;
-      }
-      undoHide = setStyle({
-        element: popover,
-        styles: [{
-          property: 'opacity',
-          value: '0'
-        }]
-      });
-    }
-    function reveal() {
-      var _undoHide;
-      (_undoHide = undoHide) === null || _undoHide === void 0 ? void 0 : _undoHide();
-      undoHide = undefined;
-    }
-    function restorePosition() {
-      var _undoPosition;
-      (_undoPosition = undoPosition) === null || _undoPosition === void 0 ? void 0 : _undoPosition();
-      undoPosition = undefined;
-    }
-    function update() {
-      if (!trigger || !popover) {
-        return;
-      }
-      const triggerRect = trigger.getBoundingClientRect();
-      const viewport = {
-        width: window.innerWidth,
-        height: window.innerHeight
-      };
-
-      // Resolve consumer-supplied CSS length strings (tokens, calc, var,
-      // px, rem, etc) to pixels. The probe is mounted INSIDE the popover
-      // itself so the resolved length matches the scope a token would
-      // resolve against from inside the popover content. (The popover
-      // lives in the top layer, not the trigger's DOM tree, so probing
-      // at `popover.parentElement` would resolve in a different scope
-      // than the consumer's token authoring expects.)
-      const gapPx = resolveCssLengthToPixels({
-        value: gapCssValue,
-        container: popover
-      });
-      const crossAxisShiftPx = resolveCssLengthToPixels({
-        value: crossAxisShiftCssValue,
-        container: popover
-      });
-      const {
-        top,
-        left
-      } = computeFallbackPosition({
-        triggerRect,
-        popoverEl: popover,
-        placement: stablePlacement,
-        viewport,
-        gap: gapPx,
-        crossAxisShift: {
-          value: crossAxisShiftPx,
-          direction: stablePlacement.offset.crossAxisShift.direction
-        }
-      });
-
-      // Restore first so the snapshot stays the consumer's value.
-      restorePosition();
-      undoPosition = setStyle({
-        element: popover,
-        styles: [{
-          property: 'top',
-          value: `${top}px`
-        }, {
-          property: 'left',
-          value: `${left}px`
-        }]
-      });
-      reveal();
-    }
-
-    // Throttle scroll/resize updates to one per animation frame
-    const scheduledUpdate = rafSchedule(update);
-
-    // Wait for the FIRST valid layout before measuring: the popover
-    // is `display: none` until `showPopover()`, and some browsers
-    // fire `toggle` before layout, so RAF-after-toggle is unreliable.
-    // ResizeObserver fires once the browser has real dimensions.
-    // Self-disconnects after one valid measurement; ongoing
-    // scroll/resize is handled by the window listeners below.
-    // `ResizeObserver` is missing in some non-DOM jest environments
-    // (e.g. post-office's `node` environment). Fall back to a no-op
-    // observer there. The scroll/resize listeners below still keep
-    // the popover positioned in the rare case the consumer also
-    // polyfilled `showPopover` but not `ResizeObserver`. Real
-    // browsers always have it. The `NoopResizeObserver` class is
-    // hoisted to module scope (see top of file) so we do not allocate
-    // a new constructor on every effect run.
-    const ResizeObserverImpl = typeof ResizeObserver !== 'undefined' ? ResizeObserver : NoopResizeObserver;
-    const resizeObserver = new ResizeObserverImpl(() => {
-      if (popover.offsetWidth > 0 && popover.offsetHeight > 0) {
-        update();
-        resizeObserver.disconnect();
-      }
-    });
-
-    // If the popover is already open by the time this effect runs (for
-    // example, the parent `useAnchorPosition` effect runs after the child
-    // `Popover` effect that called `showPopover()`), the initial `toggle`
-    // event has already fired and our listener below would miss it. Start
-    // observing immediately so the first measurement still happens.
-    if (isPopoverOpen(popover)) {
-      hideUntilPositioned();
-      resizeObserver.observe(popover);
-    }
-    const undoPositioning = combine(cleanupBaseStyles,
-    // Each open needs a fresh measurement, so hide and re-observe.
-    bind(popover, {
-      type: 'toggle',
-      listener: event => {
-        const toggleEvent = event;
-        if (toggleEvent.newState === 'open') {
-          hideUntilPositioned();
-          resizeObserver.observe(popover);
-        }
-      }
-    }), () => resizeObserver.disconnect(), bind(window, {
-      type: 'scroll',
-      listener: scheduledUpdate,
-      options: {
-        capture: true,
-        passive: true
-      }
-    }), bind(window, {
-      type: 'resize',
-      listener: scheduledUpdate,
-      options: {
-        passive: true
-      }
-    }), () => {
-      scheduledUpdate.cancel();
-      restorePosition();
-      reveal();
-    });
-    return undoPositioning;
-  }, [anchorRef, popoverRef, stablePlacement, forceFallbackPositioning, isEnabled, id, isOpen]);
-}

package/dist/es2019/internal/use-width-from-anchor.js

@@ -1,120 +0,0 @@
-import { useLayoutEffect } from 'react';
-import once from '@atlaskit/ds-lib/once';
-import { setStyle } from './set-style';
-
-/**
- * Probes anchor SIZING, separately from `anchor-name` (see
- * `supportsAnchorPositioning`): some browsers have positioning but not sizing.
- * `once()` for SSR safety.
- */
-const supportsAnchorSize = once(() => {
-  if (typeof window === 'undefined' || typeof CSS === 'undefined' || typeof CSS.supports !== 'function') {
-    return false;
-  }
-  return CSS.supports('min-inline-size', 'anchor-size(self-inline)');
-});
-
-/**
- * The JS fallback's stand-in for `anchor-size(self-inline)`. `offsetWidth` / `offsetHeight` are
- * physical, so the axis is picked from the popover's `writing-mode`. Anything not horizontal is
- * treated as vertical, and an unknown or empty value falls back to `offsetWidth`.
- */
-function getFallbackAnchorInlineSize({
-  anchor,
-  popover
-}) {
-  // `String()` because not every test environment implements `writing-mode`.
-  const writingMode = String(getComputedStyle(popover).writingMode);
-  const isVertical = writingMode.startsWith('vertical') || writingMode.startsWith('sideways');
-  return isVertical ? anchor.offsetHeight : anchor.offsetWidth;
-}
-
-/**
- * Sets the width of a popover element relative to its anchor element.
- *
- * - `'match-anchor'` → `inline-size: anchor-size(self-inline)`, exact
- * - `'min-anchor'`   → `min-inline-size: anchor-size(self-inline)`, floor only
- * - `'none'`         → `min-inline-size: max-content`, content floor (default)
- *
- * `self-inline` is the inline axis of the element USING the function (the popover), never the
- * anchor, so it matches the axis `inline-size` constrains. See
- * `notes/decisions/width-from-anchor-floors.md`.
- */
-export function useWidthFromAnchor({
-  mode,
-  popoverRef,
-  anchorRef,
-  isOpen
-}) {
-  useLayoutEffect(() => {
-    const node = popoverRef.current;
-    if (!node) {
-      return;
-    }
-    if (mode === 'match-anchor') {
-      // No floor here: it would let the popover grow past the anchor.
-      if (supportsAnchorSize()) {
-        return setStyle({
-          element: node,
-          styles: [{
-            property: 'inline-size',
-            value: 'anchor-size(self-inline)'
-          }]
-        });
-      }
-      const anchor = anchorRef.current;
-      if (anchor) {
-        return setStyle({
-          element: node,
-          styles: [{
-            property: 'inline-size',
-            value: `${getFallbackAnchorInlineSize({
-              anchor,
-              popover: node
-            })}px`
-          }]
-        });
-      }
-      return;
-    }
-    if (mode === 'min-anchor') {
-      // One floor only. The content floor from mode 'none' deliberately does not also apply
-      // here, and cannot: it would need this same property. See the decision note.
-      if (supportsAnchorSize()) {
-        return setStyle({
-          element: node,
-          styles: [{
-            property: 'min-inline-size',
-            value: 'anchor-size(self-inline)'
-          }]
-        });
-      }
-      const anchor = anchorRef.current;
-      if (anchor) {
-        return setStyle({
-          element: node,
-          styles: [{
-            property: 'min-inline-size',
-            value: `${getFallbackAnchorInlineSize({
-              anchor,
-              popover: node
-            })}px`
-          }]
-        });
-      }
-
-      // Nothing to measure, so no floor.
-      return;
-    }
-
-    // Makes a too-narrow span overflow and drive `position-try-fallbacks` instead of wrapping.
-    // `@atlaskit/popper` resets this exact property to `0` for its fit-to-viewport mode.
-    return setStyle({
-      element: node,
-      styles: [{
-        property: 'min-inline-size',
-        value: 'max-content'
-      }]
-    });
-  }, [mode, popoverRef, anchorRef, isOpen]);
-}

package/dist/esm/internal/placement-to-try-fallbacks.js

@@ -1,103 +0,0 @@
-import { resolvePlacement } from './resolve-placement';
-
-/**
- * A `position-area` primary edge — the placement axis joined to its edge, e.g.
- * `block-end` or `inline-start`. These are the four edges a popover can sit on.
- */
-
-function slideOnEdge(_ref) {
-  var align = _ref.align,
-    edgeKey = _ref.edgeKey,
-    crossAxis = _ref.crossAxis;
-  if (align === 'center') {
-    return ["".concat(edgeKey, " span-").concat(crossAxis, "-end"), "".concat(edgeKey, " span-").concat(crossAxis, "-start")];
-  }
-  // For `align: 'start'` the popover expands toward `end`, so the "near"
-  // span is `end` and the "far" span is `start`; `align: 'end'` mirrors
-  // this. The bare `edgeKey` (re-centered) sits between them.
-  var near = align === 'start' ? 'end' : 'start';
-  var far = align === 'start' ? 'start' : 'end';
-  return ["".concat(edgeKey, " span-").concat(crossAxis, "-").concat(near), edgeKey, "".concat(edgeKey, " span-").concat(crossAxis, "-").concat(far)];
-}
-function flipDiagonally(_ref2) {
-  var axis = _ref2.axis;
-  var flipOnMainAxis = axis === 'block' ? 'flip-block' : 'flip-inline';
-  var flipToCrossAxis = axis === 'block' ? 'flip-inline' : 'flip-block';
-  return "".concat(flipOnMainAxis, " ").concat(flipToCrossAxis);
-}
-
-/**
- * Returns the `position-try-fallbacks` value for a placement.
- *
- * @example
- * // Centered on the block-end edge (the default placement):
- * placementToTryFallbacks({ placement: { axis: 'block', edge: 'end', align: 'center' } });
- * // => 'block-end span-inline-end, block-end span-inline-start, flip-block,
- * //     block-start span-inline-end, block-start span-inline-start'
- */
-export function placementToTryFallbacks(_ref3) {
-  var placement = _ref3.placement;
-  /**
-   * **Build the fallback list**
-   *
-   * Each entry is a complete alternative position.
-   * The browser tries them _in order_ and uses the _first_ one that fits.
-   */
-
-  var resolved = resolvePlacement({
-    placement: placement
-  });
-  var axis = resolved.axis,
-    edge = resolved.edge,
-    align = resolved.align;
-  var crossAxis = axis === 'block' ? 'inline' : 'block';
-  var flippedEdge = edge === 'start' ? 'end' : 'start';
-  var sameEdgeArea = "".concat(axis, "-").concat(edge);
-  var oppositeEdgeArea = "".concat(axis, "-").concat(flippedEdge);
-  var flipOnMainAxis = axis === 'block' ? 'flip-block' : 'flip-inline';
-
-  /**
-   * **Fallback algorithm**
-   *
-   * We have two things we can do to keep something visible:
-   *
-   * 1. _Slide_ along edges
-   * 2. _Flip_ to another edge
-   *
-   * _Centered popover_
-   *
-   * Desired: Sits in middle of main edge
-   *
-   * Fallbacks:
-   *  1: _Slide_ along main edge on the cross axis
-   *  2: _Flip_ on main axis to opposite edge (centered)
-   *  3: _Slide_ along opposite edge on the cross axis
-   *
-   * _Start or end aligned popover_
-   *
-   * Desired: Sits at start / end of main edge
-   *
-   * Fallbacks:
-   *  1: _Slide_ along main edge on the cross axis
-   *  2: _Flip_ on main axis to opposite edge
-   *  3: _Flip_ on the diagonal (flip main axis + flip cross axis) into the
-   *     opposite corner. For start / end alignment, this is the clean escape
-   *     when the popover would otherwise land offscreen on both axes (ie in a
-   *     corner). Rule 4 gets the job done, but a slide drops the gap
-   *     as named position-area values don't carry margins).
-   *     The diagonal flip keeps the gap and the alignment.
-   *  4: _Slide_ along opposite edge on the cross axis
-   */
-
-  return [slideOnEdge({
-    align: align,
-    edgeKey: sameEdgeArea,
-    crossAxis: crossAxis
-  }), flipOnMainAxis, align !== 'center' ? flipDiagonally({
-    axis: axis
-  }) : null, slideOnEdge({
-    align: align,
-    edgeKey: oppositeEdgeArea,
-    crossAxis: crossAxis
-  })].filter(Boolean).flat().join(', ');
-}