@atlaskit/top-layer 0.12.1 → 0.13.0

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

@@ -0,0 +1,127 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useAnchorPositionAtPoint = useAnchorPositionAtPoint;
+var _react = require("react");
+var _useAnchorPosition = require("./use-anchor-position");
+/**
+ * A point in viewport coordinates (CSS pixels) at which the synthetic
+ * anchor should be placed.
+ *
+ * Axis-named (`x`/`y`) rather than edge-named (`left`/`top`) so the
+ * shape is unambiguous in RTL writing modes — there is no ambiguity
+ * about whether a coordinate is logical (`inline-start`/`block-start`)
+ * or physical (`left`/`top`). Viewport coordinates are always
+ * physical, so we name them with the physical axis labels.
+ */
+
+/**
+ * Styles the synthetic anchor as an invisible, zero-size point.
+ * Dynamic `inset-*` overrides are written by the positioning effect.
+ *
+ * Uses `Object.assign` rather than Compiled CSS (element is outside the React tree)
+ * or the internal `setStyle` helper (we own this element entirely — it is created
+ * and removed by this hook — so the snapshot/restore semantics `setStyle`
+ * provides for caller-owned elements would be dead work here).
+ */
+function applyStaticAnchorStyles(el) {
+  Object.assign(el.style, {
+    position: 'fixed',
+    // `top`/`left` rather than `inset-block-start`/`inset-inline-start`
+    // for consistency with the dynamic positioning effect below, which
+    // uses physical properties (see comment there for the rationale).
+    top: '0',
+    left: '0',
+    // Zero size — placement decides which side the popover sits on.
+    width: '0',
+    height: '0',
+    // Prevent the overlay from intercepting pointer events.
+    pointerEvents: 'none'
+  });
+}
+
+// `useAnchorPosition` requires a real DOM element. When the caller only
+// has a viewport coordinate (e.g. cursor at hover time), this hook
+// manages a hidden `<div>` at that point and delegates the rest.
+//
+// The `<div>` is appended directly to `document.body` to escape any
+// transformed ancestor, which would otherwise break `position: fixed`
+// viewport-relative resolution.
+
+/**
+ * Positions a popover at a consumer-supplied viewport coordinate using a
+ * hidden synthetic anchor.
+ *
+ * @example
+ * ```tsx
+ * function PointPositionedPopover({ popoverRef, placement, mousePos }) {
+ *   useAnchorPositionAtPoint({
+ *     popoverRef,
+ *     placement,
+ *     isEnabled: Boolean(mousePos),
+ *     getPoint: () => {
+ *       if (!mousePos) return null;
+ *       return { x: mousePos.clientX, y: mousePos.clientY };
+ *     },
+ *   });
+ *   return <Popover ref={popoverRef}>...</Popover>;
+ * }
+ * ```
+ */
+function useAnchorPositionAtPoint(_ref) {
+  var popoverRef = _ref.popoverRef,
+    placement = _ref.placement,
+    getPoint = _ref.getPoint,
+    _ref$isEnabled = _ref.isEnabled,
+    isEnabled = _ref$isEnabled === void 0 ? true : _ref$isEnabled;
+  var syntheticAnchorRef = (0, _react.useRef)(null);
+
+  // `getPoint` is kept in a ref so the layout effect can call the
+  // latest version without listing it as a dep — that would re-fire
+  // on every render and re-latch the point.
+  var getPointRef = (0, _react.useRef)(getPoint);
+  getPointRef.current = getPoint;
+
+  // Lazy element creation: the `<div>` is only created when both
+  // `isEnabled` is true AND `getPoint()` returns a non-null point.
+  // `useLayoutEffect` ensures the element exists before the inner
+  // `useAnchorPosition` (also a layout effect) reads the ref.
+  (0, _react.useLayoutEffect)(function () {
+    if (!isEnabled) {
+      return;
+    }
+    var point = getPointRef.current();
+    if (!point) {
+      return;
+    }
+    var anchor = document.createElement('div');
+    anchor.setAttribute('aria-hidden', 'true');
+    applyStaticAnchorStyles(anchor);
+    // `point.x`/`y` are physical viewport coordinates (from
+    // `MouseEvent.clientX/Y`), so map directly onto physical
+    // `left`/`top`. This is RTL-safe: `position: fixed` + physical
+    // insets is direction-independent. Using logical
+    // `inset-inline-start` would need `viewportWidth - point.x` in
+    // RTL to land at the same physical pixel.
+    anchor.style.top = "".concat(point.y, "px");
+    anchor.style.left = "".concat(point.x, "px");
+    document.body.appendChild(anchor);
+    syntheticAnchorRef.current = anchor;
+    return function cleanup() {
+      anchor.remove();
+      syntheticAnchorRef.current = null;
+    };
+  }, [isEnabled]);
+
+  // Mirror `isEnabled` so both hooks stay in sync — when disabled,
+  // neither this hook nor the inner one touches the popover, leaving
+  // any other positioning the consumer has set up free to take effect.
+  (0, _useAnchorPosition.useAnchorPosition)({
+    anchorRef: syntheticAnchorRef,
+    popoverRef: popoverRef,
+    placement: placement,
+    isEnabled: isEnabled
+  });
+}

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

@@ -5,8 +5,6 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.useAnchorPosition = useAnchorPosition;
-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"));
@@ -37,25 +35,15 @@ var _setStyle = require("./set-style");
 // 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
+ * Module-scope no-op `ResizeObserver` stub 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.
+ * re-allocating 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() {}
-  }]);
-}();
+var noopResizeObserver = {
+  observe: function observe() {},
+  unobserve: function unobserve() {},
+  disconnect: function disconnect() {}
+};
 
 /**
  * Returns true when the popover is currently open. Wrapped because the
@@ -212,19 +200,23 @@ function useStablePlacement(placement) {
  * comparison is used internally so re-runs are skipped when the resolved
  * placement shape is unchanged.
  */
-// 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;
+    forceFallbackPositioning = _ref3$forceFallbackPo === void 0 ? false : _ref3$forceFallbackPo,
+    _ref3$isEnabled = _ref3.isEnabled,
+    isEnabled = _ref3$isEnabled === void 0 ? true : _ref3$isEnabled;
   var id = (0, _react.useId)();
   // Stabilize `placement` object so the same object literal
   // value returns an object with the same reference
   var stablePlacement = useStablePlacement(placement);
   (0, _react.useLayoutEffect)(function () {
+    if (!isEnabled) {
+      return;
+    }
     var trigger = anchorRef.current;
     var popover = popoverRef.current;
     if (!trigger || !popover) {
@@ -345,7 +337,7 @@ function useAnchorPosition(_ref3) {
       return _undoPositioning;
     }
 
-    // ── JS fallback ──
+    // JS fallback
     // The popover is already in the browser's top layer via popover="auto",
     // so it does not need position:fixed. We only reset the UA defaults
     // (inset: 0; margin: auto) and set top/left based on measurements.
@@ -414,20 +406,17 @@ function useAnchorPosition(_ref3) {
     // 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 () {
+    // (e.g. post-office's `node` environment). Fall back to the
+    // module-scope `noopResizeObserver` stub 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.
+    var resizeObserver = typeof ResizeObserver !== 'undefined' ? new ResizeObserver(function () {
       if (popover.offsetWidth > 0 && popover.offsetHeight > 0) {
         update();
         resizeObserver.disconnect();
       }
-    });
+    }) : noopResizeObserver;
 
     // If the popover is already open by the time this effect runs (for
     // example, the parent `useAnchorPosition` effect runs after the child
@@ -476,5 +465,5 @@ function useAnchorPosition(_ref3) {
       popover.style.removeProperty('opacity');
     });
     return undoPositioning;
-  }, [anchorRef, popoverRef, stablePlacement, forceFallbackPositioning, id]);
+  }, [anchorRef, popoverRef, stablePlacement, forceFallbackPositioning, isEnabled, id]);
 }

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

@@ -15,19 +15,19 @@ var _usePresetStyles = require("./use-preset-styles");
  *
  * Used by both `Popover` and `Dialog` to share the same animation lifecycle
  * logic. Those components own their own show/hide mechanisms (showPopover /
- * hidePopover vs showModal / close) and event handling — this hook only
+ * hidePopover vs showModal / close) and event handling - this hook only
  * manages the relationship between `isOpen` and when children are rendered.
  *
  * ## Problem
  *
  * We want to delay the unmount of children until a CSS exit transition has
  * finished playing. If we unmount children the moment `isOpen` becomes
- * `false`, the exit animation is never visible — the content just disappears.
+ * `false`, the exit animation is never visible - the content just disappears.
  *
  * ## How it works
  *
  * `showChildren` tracks whether the consumer's children should be in the DOM.
- * It does not mirror `isOpen` exactly — it intentionally lags behind during
+ * It does not mirror `isOpen` exactly - it intentionally lags behind during
  * exit animations:
  *
  * ```
@@ -63,12 +63,12 @@ function useAnimatedVisibility(_ref) {
   // or the user has enabled the "prefers reduced motion" OS setting.
   var willAnimate = Boolean(animate) && !(0, _reducedMotion.prefersReducedMotion)();
 
-  // ── showChildren state ──
+  // showChildren state
   //
   // This is the core of the hook. `showChildren` controls whether the
   // consumer's children are in the DOM. The two `if` blocks below are
   // intentionally written as synchronous state updates during render
-  // (React supports this pattern — setState during render is treated as
+  // (React supports this pattern - setState during render is treated as
   // a synchronous re-render before the browser paints).
   //
   // Mount path:  isOpen went true but showChildren is still false → mount.
@@ -95,7 +95,7 @@ function useAnimatedVisibility(_ref) {
   var onExitFinishRef = (0, _react.useRef)(onExitFinish);
   onExitFinishRef.current = onExitFinish;
 
-  // ── Animated entry effect ──
+  // Animated entry effect
   //
   // Fires `onEnterFinish` after the entry transition completes.
   // When there is no animation, fires it immediately via a separate effect.
@@ -144,7 +144,7 @@ function useAnimatedVisibility(_ref) {
     };
   }, [isOpen, showChildren, willAnimate, preset === null || preset === void 0 ? void 0 : preset.enterDurationMs, elementRef]);
 
-  // ── Non-animated entry callback ──
+  // Non-animated entry callback
   //
   // When there is no animation, fire `onEnterFinish` immediately on mount and after `isOpen` goes false->true.
   // The initial value is false to make sure it fires on mount if the current `isOpen` is true.
@@ -158,7 +158,7 @@ function useAnimatedVisibility(_ref) {
     }
   }, [isOpen, willAnimate]);
 
-  // ── Animated exit effect ──
+  // Animated exit effect
   //
   // Runs when all three conditions are true:
   //   • `isOpen` is false  (consumer wants to close)
@@ -221,10 +221,10 @@ function useAnimatedVisibility(_ref) {
     };
   }, [isOpen, showChildren, willAnimate, preset === null || preset === void 0 ? void 0 : preset.exitDurationMs, elementRef]);
 
-  // ── Non-animated exit callback ──
+  // Non-animated exit callback
   //
   // When there is no animation, children unmount synchronously (handled
-  // by the `if` block above). But `onExitFinish` still needs to fire —
+  // by the `if` block above). But `onExitFinish` still needs to fire -
   // we do that in a follow-up effect so the consumer can react to it.
   //
   // Uses a previous-value ref (`wasOpenRef`) to detect the exact

package/dist/cjs/internal/use-animation-preset.js

@@ -9,7 +9,7 @@ var _ensurePresetStyles = require("./ensure-preset-styles");
 /**
  * Normalizes the `animate` prop to a preset (or null) and ensures its CSS
  * is injected once into document.head. Used by PopupContent, Popover, and
- * DialogContent so they don't duplicate this logic.
+ * DialogContent so they do not duplicate this logic.
  */
 function useAnimationPreset(animate) {
   var preset = animate != null && animate !== false ? animate : null;

package/dist/cjs/internal/use-focus-wrap.js

@@ -6,7 +6,10 @@ Object.defineProperty(exports, "__esModule", {
 exports.useFocusWrap = useFocusWrap;
 var _react = require("react");
 var _bindEventListener = require("bind-event-listener");
-var _focus = require("../focus/focus");
+var _getFirstFocusable = require("../focus/get-first-focusable");
+var _getLastFocusable = require("../focus/get-last-focusable");
+var _getNextFocusable = require("../focus/get-next-focusable");
+var _isNestedLayerFocused = require("../focus/is-nested-layer-focused");
 /**
  * Roles that require focus wrapping per WAI-ARIA APG.
  *
@@ -62,7 +65,7 @@ function useFocusWrap(_ref) {
 
         // If focus is already in a nested layer, then
         // we continue to let that nested layer own focus
-        if ((0, _focus.isNestedLayerFocused)({
+        if ((0, _isNestedLayerFocused.isNestedLayerFocused)({
           container: element
         })) {
           return;
@@ -75,7 +78,7 @@ function useFocusWrap(_ref) {
 
         // Try to move to the next/previous focusable element relative
         // to the currently focused element within the container.
-        var next = (0, _focus.getNextFocusable)({
+        var next = (0, _getNextFocusable.getNextFocusable)({
           container: element,
           direction: direction
         });
@@ -87,9 +90,9 @@ function useFocusWrap(_ref) {
         // Nothing is currently focused inside the container (or the
         // focused element is not in the focusable list). Fall back to
         // the first or last focusable element depending on direction.
-        var fallback = direction === 'forwards' ? (0, _focus.getFirstFocusable)({
+        var fallback = direction === 'forwards' ? (0, _getFirstFocusable.getFirstFocusable)({
           container: element
-        }) : (0, _focus.getLastFocusable)({
+        }) : (0, _getLastFocusable.getLastFocusable)({
           container: element
         });
         if (fallback) {

package/dist/cjs/internal/use-initial-focus.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.useInitialFocus = useInitialFocus;
 var _react = require("react");
-var _focus = require("../focus/focus");
+var _getFirstFocusable = require("../focus/get-first-focusable");
 /**
  * Determines the correct element to receive initial focus within a popover,
  * based on its ARIA role.
@@ -33,7 +33,7 @@ function getInitialFocusTarget(_ref) {
       return autofocusEl;
     }
     // Fall back to first focusable element
-    return (0, _focus.getFirstFocusable)({
+    return (0, _getFirstFocusable.getFirstFocusable)({
       container: container
     });
   }
@@ -44,7 +44,7 @@ function getInitialFocusTarget(_ref) {
     // of the consumer component (e.g. dropdown-menu), because menu keyboard
     // behavior varies by context (orientation, nesting, item type, control
     // pattern). See: notes/outputs/menu-keyboard-decision.md
-    return (0, _focus.getFirstFocusable)({
+    return (0, _getFirstFocusable.getFirstFocusable)({
       container: container
     });
   }
@@ -54,7 +54,7 @@ function getInitialFocusTarget(_ref) {
     if (selectedOption) {
       return selectedOption;
     }
-    return (0, _focus.getFirstFocusable)({
+    return (0, _getFirstFocusable.getFirstFocusable)({
       container: container
     });
   }

package/dist/cjs/internal/use-preset-styles.js

@@ -10,7 +10,7 @@ var _ensurePresetStyles = require("./ensure-preset-styles");
  * Normalizes a preset prop to a value (or null) and ensures its CSS
  * is injected once into `document.head`.
  *
- * Works with any preset that has `{ css, name }` — animation presets
+ * Works with any preset that has `{ css, name }` - animation presets
  * (TAnimationPreset) satisfies this shape.
  */
 function usePresetStyles(_ref) {

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

@@ -9,8 +9,8 @@ var _setStyle = require("./set-style");
 /**
  * Sets the width of a popover element relative to its anchor element.
  *
- * - `'match-anchor'` → `width: anchor-size(width)` — popover matches anchor width exactly.
- * - `'min-anchor'`   → `min-width: anchor-size(width)` — popover is at least as wide as anchor,
+ * - `'match-anchor'` → `width: anchor-size(width)` - popover matches anchor width exactly.
+ * - `'min-anchor'`   → `min-width: anchor-size(width)` - popover is at least as wide as anchor,
  *   but can grow wider.
  * - `'none'`         → no explicit width is set (default behaviour)
  *
@@ -35,7 +35,7 @@ function useWidthFromAnchor(_ref) {
     var supportsAnchorSize = typeof CSS !== 'undefined' && typeof CSS.supports === 'function' && CSS.supports('width', 'anchor-size(width)');
     if (mode === 'match-anchor') {
       // Set an exact width matching the anchor.
-      // `min-inline-size` is intentionally NOT set here — it would override the
+      // `min-inline-size` is intentionally NOT set here - it would override the
       // explicit width constraint, allowing the popover to grow past the anchor's width.
       if (supportsAnchorSize) {
         return (0, _setStyle.setStyle)({
@@ -91,7 +91,7 @@ function useWidthFromAnchor(_ref) {
         });
       }
 
-      // No anchor available in JS fallback — still apply min-inline-size.
+      // No anchor available in JS fallback - still apply min-inline-size.
       return (0, _setStyle.setStyle)({
         el: node,
         styles: [minInlineSizeStyle]

package/dist/cjs/placement-map/index.js

@@ -7,7 +7,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.fromLegacyPlacement = fromLegacyPlacement;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
-var _legacyPlacements = require("./legacy-placements");
+var _placementMapping = require("./placement-mapping");
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 /**
@@ -54,7 +54,7 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
 function fromLegacyPlacement(_ref) {
   var legacy = _ref.legacy,
     offset = _ref.offset;
-  var basePlacement = _legacyPlacements.placementMapping[legacy];
+  var basePlacement = _placementMapping.placementMapping[legacy];
   if (!offset) {
     return basePlacement;
   }

package/dist/cjs/placement-map/legacy-placements.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.placementMapping = exports.LEGACY_PLACEMENTS = void 0;
+exports.LEGACY_PLACEMENTS = void 0;
 /**
  * Legacy Popper.js placement values (used by `@atlaskit/popper`,
  * `@atlaskit/popup`, `@atlaskit/tooltip`, etc.). Re-exported from
@@ -11,103 +11,4 @@ exports.placementMapping = exports.LEGACY_PLACEMENTS = void 0;
  * to enumerate every placement (e.g. for a settings dropdown). New code
  * should use the object-based `TPlacementOptions` directly.
  */
-// eslint-disable-next-line @atlaskit/volt-strict-mode/no-multiple-exports
-var LEGACY_PLACEMENTS = exports.LEGACY_PLACEMENTS = ['auto', 'auto-start', 'auto-end', 'top', 'top-start', 'top-center', 'top-end', 'bottom', 'bottom-start', 'bottom-center', 'bottom-end', 'right', 'right-start', 'right-end', 'left', 'left-start', 'left-end'];
-/**
- * The full mapping record. Internal - use `fromLegacyPlacement` from the
- * public entry-point so the offset-tuple translation is applied consistently.
- *
- * Note: `auto`, `auto-start`, `auto-end` map to `block-end` placements. This
- * is a reduction in expressiveness vs Popper.js (which picked the best
- * placement at runtime). CSS `position-try-fallbacks` flips at the edge but
- * the initial placement is fixed. Migration consumers who relied on Popper's
- * dynamic auto-flip should pick an explicit placement instead.
- */
-// eslint-disable-next-line @atlaskit/volt-strict-mode/no-multiple-exports
-var placementMapping = exports.placementMapping = {
-  top: {
-    axis: 'block',
-    edge: 'start',
-    align: 'center'
-  },
-  'top-start': {
-    axis: 'block',
-    edge: 'start',
-    align: 'start'
-  },
-  'top-center': {
-    axis: 'block',
-    edge: 'start',
-    align: 'center'
-  },
-  'top-end': {
-    axis: 'block',
-    edge: 'start',
-    align: 'end'
-  },
-  bottom: {
-    axis: 'block',
-    edge: 'end',
-    align: 'center'
-  },
-  'bottom-start': {
-    axis: 'block',
-    edge: 'end',
-    align: 'start'
-  },
-  'bottom-center': {
-    axis: 'block',
-    edge: 'end',
-    align: 'center'
-  },
-  'bottom-end': {
-    axis: 'block',
-    edge: 'end',
-    align: 'end'
-  },
-  right: {
-    axis: 'inline',
-    edge: 'end',
-    align: 'center'
-  },
-  'right-start': {
-    axis: 'inline',
-    edge: 'end',
-    align: 'start'
-  },
-  'right-end': {
-    axis: 'inline',
-    edge: 'end',
-    align: 'end'
-  },
-  left: {
-    axis: 'inline',
-    edge: 'start',
-    align: 'center'
-  },
-  'left-start': {
-    axis: 'inline',
-    edge: 'start',
-    align: 'start'
-  },
-  'left-end': {
-    axis: 'inline',
-    edge: 'start',
-    align: 'end'
-  },
-  auto: {
-    axis: 'block',
-    edge: 'end',
-    align: 'center'
-  },
-  'auto-start': {
-    axis: 'block',
-    edge: 'end',
-    align: 'start'
-  },
-  'auto-end': {
-    axis: 'block',
-    edge: 'end',
-    align: 'end'
-  }
-};
+var LEGACY_PLACEMENTS = exports.LEGACY_PLACEMENTS = ['auto', 'auto-start', 'auto-end', 'top', 'top-start', 'top-center', 'top-end', 'bottom', 'bottom-start', 'bottom-center', 'bottom-end', 'right', 'right-start', 'right-end', 'left', 'left-start', 'left-end'];

package/dist/cjs/placement-map/placement-mapping.js

@@ -0,0 +1,103 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.placementMapping = void 0;
+/**
+ * The full mapping record. Internal - use `fromLegacyPlacement` from the
+ * public entry-point so the offset-tuple translation is applied consistently.
+ *
+ * Note: `auto`, `auto-start`, `auto-end` map to `block-end` placements. This
+ * is a reduction in expressiveness vs Popper.js (which picked the best
+ * placement at runtime). CSS `position-try-fallbacks` flips at the edge but
+ * the initial placement is fixed. Migration consumers who relied on Popper's
+ * dynamic auto-flip should pick an explicit placement instead.
+ */
+var placementMapping = exports.placementMapping = {
+  top: {
+    axis: 'block',
+    edge: 'start',
+    align: 'center'
+  },
+  'top-start': {
+    axis: 'block',
+    edge: 'start',
+    align: 'start'
+  },
+  'top-center': {
+    axis: 'block',
+    edge: 'start',
+    align: 'center'
+  },
+  'top-end': {
+    axis: 'block',
+    edge: 'start',
+    align: 'end'
+  },
+  bottom: {
+    axis: 'block',
+    edge: 'end',
+    align: 'center'
+  },
+  'bottom-start': {
+    axis: 'block',
+    edge: 'end',
+    align: 'start'
+  },
+  'bottom-center': {
+    axis: 'block',
+    edge: 'end',
+    align: 'center'
+  },
+  'bottom-end': {
+    axis: 'block',
+    edge: 'end',
+    align: 'end'
+  },
+  right: {
+    axis: 'inline',
+    edge: 'end',
+    align: 'center'
+  },
+  'right-start': {
+    axis: 'inline',
+    edge: 'end',
+    align: 'start'
+  },
+  'right-end': {
+    axis: 'inline',
+    edge: 'end',
+    align: 'end'
+  },
+  left: {
+    axis: 'inline',
+    edge: 'start',
+    align: 'center'
+  },
+  'left-start': {
+    axis: 'inline',
+    edge: 'start',
+    align: 'start'
+  },
+  'left-end': {
+    axis: 'inline',
+    edge: 'start',
+    align: 'end'
+  },
+  auto: {
+    axis: 'block',
+    edge: 'end',
+    align: 'center'
+  },
+  'auto-start': {
+    axis: 'block',
+    edge: 'end',
+    align: 'start'
+  },
+  'auto-end': {
+    axis: 'block',
+    edge: 'end',
+    align: 'end'
+  }
+};