@atlaskit/top-layer 4.4.5 → 5.0.0

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

@@ -1,501 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.useAnchorPosition = useAnchorPosition;
-var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
-var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
-var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
-var _react = require("react");
-var _bindEventListener = require("bind-event-listener");
-var _rafSchd = _interopRequireDefault(require("raf-schd"));
-var _once = _interopRequireDefault(require("@atlaskit/ds-lib/once"));
-var _anchorPositioningFallback = require("./anchor-positioning-fallback");
-var _combine = require("./combine");
-var _placementToPositionArea = require("./placement-to-position-area");
-var _placementToTryFallbacks = require("./placement-to-try-fallbacks");
-var _resolveCssLengthToPixels = require("./resolve-css-length-to-pixels");
-var _resolvePlacement = require("./resolve-placement");
-var _setStyle = require("./set-style");
-/**
- * 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.
- */
-
-// `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.
- */
-var NoopResizeObserver = /*#__PURE__*/function () {
-  function NoopResizeObserver() {
-    (0, _classCallCheck2.default)(this, NoopResizeObserver);
-  }
-  return (0, _createClass2.default)(NoopResizeObserver, [{
-    key: "observe",
-    value: function observe() {}
-  }, {
-    key: "unobserve",
-    value: function unobserve() {}
-  }, {
-    key: "disconnect",
-    value: function 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 (_unused) {
-    return false;
-  }
-}
-
-/**
- * Detects whether the browser supports CSS Anchor Positioning.
- * Uses `once()` for lazy evaluation: safe for SSR and avoids hydration mismatches.
- */
-var supportsAnchorPositioning = (0, _once.default)(function () {
-  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 }`.
- */
-var 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'
-};
-var ZEROED_CROSS_AXIS_SHIFT_CUSTOM_PROPERTIES = Object.values(CROSS_AXIS_SHIFT_CUSTOM_PROPERTY).map(function (property) {
-  return {
-    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(_ref) {
-  var placement = _ref.placement,
-    offset = _ref.offset;
-  var axis = placement.axis,
-    edge = placement.edge;
-  // The gap sits on the side FACING the anchor, which is always the side
-  // opposite the placement edge.
-  var anchorFacingEdge = edge === 'end' ? 'start' : 'end';
-  return {
-    property: "margin-".concat(axis, "-").concat(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(_ref2) {
-  var placement = _ref2.placement,
-    crossAxisShiftCssValue = _ref2.crossAxisShiftCssValue,
-    direction = _ref2.direction;
-  var 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.
-  var negated = "calc(-1 * ".concat(crossAxisShiftCssValue, ")");
-  var isForwards = direction === 'forwards';
-  return [{
-    property: "margin-".concat(crossAxis, "-start"),
-    value: isForwards ? crossAxisShiftCssValue : negated
-  }, {
-    property: "margin-".concat(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) {
-  var resolved = (0, _resolvePlacement.resolvePlacement)({
-    placement: placement
-  });
-  var axis = resolved.axis;
-  var edge = resolved.edge;
-  var align = resolved.align;
-  var gap = resolved.offset.gap;
-  var shiftValue = resolved.offset.crossAxisShift.value;
-  var 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 (0, _react.useMemo)(function () {
-    return {
-      axis: axis,
-      edge: edge,
-      align: align,
-      offset: {
-        gap: 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
-function useAnchorPosition(_ref3) {
-  var anchorRef = _ref3.anchorRef,
-    popoverRef = _ref3.popoverRef,
-    _ref3$placement = _ref3.placement,
-    placement = _ref3$placement === void 0 ? {} : _ref3$placement,
-    _ref3$forceFallbackPo = _ref3.forceFallbackPositioning,
-    forceFallbackPositioning = _ref3$forceFallbackPo === void 0 ? false : _ref3$forceFallbackPo,
-    _ref3$isEnabled = _ref3.isEnabled,
-    isEnabled = _ref3$isEnabled === void 0 ? true : _ref3$isEnabled,
-    isOpen = _ref3.isOpen;
-  var id = (0, _react.useId)();
-  var stablePlacement = useStablePlacement(placement);
-  (0, _react.useLayoutEffect)(function () {
-    if (!isEnabled) {
-      return;
-    }
-    var trigger = anchorRef.current;
-    var popover = popoverRef.current;
-    if (!trigger || !popover) {
-      return;
-    }
-    var gapCssValue = stablePlacement.offset.gap;
-    var crossAxisShiftCssValue = stablePlacement.offset.crossAxisShift.value;
-    var 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.
-      var anchorName = trigger.style.getPropertyValue('anchor-name') || "--anchor-".concat(id.replace(/:/g, ''));
-      var gap = edgeMargin({
-        placement: stablePlacement,
-        offset: gapCssValue
-      });
-      // Computed once; also mirrored into the
-      // `--ds-cross-axis-shift-margin-*` custom properties below.
-      var crossAxisShift = crossAxisShiftMargins({
-        placement: stablePlacement,
-        crossAxisShiftCssValue: crossAxisShiftCssValue,
-        direction: stablePlacement.offset.crossAxisShift.direction
-      });
-      var popoverStyles = [{
-        property: 'position-anchor',
-        value: anchorName
-      }, {
-        property: 'position-area',
-        value: (0, _placementToPositionArea.placementToPositionArea)({
-          placement: stablePlacement
-        })
-      }, {
-        property: 'position-try-fallbacks',
-        value: (0, _placementToTryFallbacks.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].concat((0, _toConsumableArray2.default)(crossAxisShift), (0, _toConsumableArray2.default)(ZEROED_CROSS_AXIS_SHIFT_CUSTOM_PROPERTIES), (0, _toConsumableArray2.default)(crossAxisShift.map(function (_ref4) {
-        var property = _ref4.property,
-          value = _ref4.value;
-        return {
-          property: CROSS_AXIS_SHIFT_CUSTOM_PROPERTY[property],
-          value: 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 (0, _setStyle.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.
-    var cleanupBaseStyles = (0, _setStyle.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.
-    var undoPosition;
-    var 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 = (0, _setStyle.setStyle)({
-        element: popover,
-        styles: [{
-          property: 'opacity',
-          value: '0'
-        }]
-      });
-    }
-    function reveal() {
-      var _undoHide;
-      (_undoHide = undoHide) === null || _undoHide === void 0 || _undoHide();
-      undoHide = undefined;
-    }
-    function restorePosition() {
-      var _undoPosition;
-      (_undoPosition = undoPosition) === null || _undoPosition === void 0 || _undoPosition();
-      undoPosition = undefined;
-    }
-    function update() {
-      if (!trigger || !popover) {
-        return;
-      }
-      var triggerRect = trigger.getBoundingClientRect();
-      var 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.)
-      var gapPx = (0, _resolveCssLengthToPixels.resolveCssLengthToPixels)({
-        value: gapCssValue,
-        container: popover
-      });
-      var crossAxisShiftPx = (0, _resolveCssLengthToPixels.resolveCssLengthToPixels)({
-        value: crossAxisShiftCssValue,
-        container: popover
-      });
-      var _computeFallbackPosit = (0, _anchorPositioningFallback.computeFallbackPosition)({
-          triggerRect: triggerRect,
-          popoverEl: popover,
-          placement: stablePlacement,
-          viewport: viewport,
-          gap: gapPx,
-          crossAxisShift: {
-            value: crossAxisShiftPx,
-            direction: stablePlacement.offset.crossAxisShift.direction
-          }
-        }),
-        top = _computeFallbackPosit.top,
-        left = _computeFallbackPosit.left;
-
-      // Restore first so the snapshot stays the consumer's value.
-      restorePosition();
-      undoPosition = (0, _setStyle.setStyle)({
-        element: popover,
-        styles: [{
-          property: 'top',
-          value: "".concat(top, "px")
-        }, {
-          property: 'left',
-          value: "".concat(left, "px")
-        }]
-      });
-      reveal();
-    }
-
-    // Throttle scroll/resize updates to one per animation frame
-    var scheduledUpdate = (0, _rafSchd.default)(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.
-    var ResizeObserverImpl = typeof ResizeObserver !== 'undefined' ? ResizeObserver : NoopResizeObserver;
-    var resizeObserver = new ResizeObserverImpl(function () {
-      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);
-    }
-    var undoPositioning = (0, _combine.combine)(cleanupBaseStyles,
-    // Each open needs a fresh measurement, so hide and re-observe.
-    (0, _bindEventListener.bind)(popover, {
-      type: 'toggle',
-      listener: function listener(event) {
-        var toggleEvent = event;
-        if (toggleEvent.newState === 'open') {
-          hideUntilPositioned();
-          resizeObserver.observe(popover);
-        }
-      }
-    }), function () {
-      return resizeObserver.disconnect();
-    }, (0, _bindEventListener.bind)(window, {
-      type: 'scroll',
-      listener: scheduledUpdate,
-      options: {
-        capture: true,
-        passive: true
-      }
-    }), (0, _bindEventListener.bind)(window, {
-      type: 'resize',
-      listener: scheduledUpdate,
-      options: {
-        passive: true
-      }
-    }), function () {
-      scheduledUpdate.cancel();
-      restorePosition();
-      reveal();
-    });
-    return undoPositioning;
-  }, [anchorRef, popoverRef, stablePlacement, forceFallbackPositioning, isEnabled, id, isOpen]);
-}

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

@@ -1,124 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.useWidthFromAnchor = useWidthFromAnchor;
-var _react = require("react");
-var _once = _interopRequireDefault(require("@atlaskit/ds-lib/once"));
-var _setStyle = require("./set-style");
-/**
- * Probes anchor SIZING, separately from `anchor-name` (see
- * `supportsAnchorPositioning`): some browsers have positioning but not sizing.
- * `once()` for SSR safety.
- */
-var supportsAnchorSize = (0, _once.default)(function () {
-  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(_ref) {
-  var anchor = _ref.anchor,
-    popover = _ref.popover;
-  // `String()` because not every test environment implements `writing-mode`.
-  var writingMode = String(getComputedStyle(popover).writingMode);
-  var 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`.
- */
-function useWidthFromAnchor(_ref2) {
-  var mode = _ref2.mode,
-    popoverRef = _ref2.popoverRef,
-    anchorRef = _ref2.anchorRef,
-    isOpen = _ref2.isOpen;
-  (0, _react.useLayoutEffect)(function () {
-    var 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 (0, _setStyle.setStyle)({
-          element: node,
-          styles: [{
-            property: 'inline-size',
-            value: 'anchor-size(self-inline)'
-          }]
-        });
-      }
-      var anchor = anchorRef.current;
-      if (anchor) {
-        return (0, _setStyle.setStyle)({
-          element: node,
-          styles: [{
-            property: 'inline-size',
-            value: "".concat(getFallbackAnchorInlineSize({
-              anchor: 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 (0, _setStyle.setStyle)({
-          element: node,
-          styles: [{
-            property: 'min-inline-size',
-            value: 'anchor-size(self-inline)'
-          }]
-        });
-      }
-      var _anchor = anchorRef.current;
-      if (_anchor) {
-        return (0, _setStyle.setStyle)({
-          element: node,
-          styles: [{
-            property: 'min-inline-size',
-            value: "".concat(getFallbackAnchorInlineSize({
-              anchor: _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 (0, _setStyle.setStyle)({
-      element: node,
-      styles: [{
-        property: 'min-inline-size',
-        value: 'max-content'
-      }]
-    });
-  }, [mode, popoverRef, anchorRef, isOpen]);
-}