@atlaskit/top-layer 0.12.0 → 0.12.2

package/CHANGELOG.md

@@ -1,5 +1,20 @@
 # @atlaskit/top-layer
 
+## 0.12.2
+
+### Patch Changes
+
+- [`7210e88c14f95`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/7210e88c14f95) -
+  Internal: align package with house authoring rules (style-only refactors).
+
+## 0.12.1
+
+### Patch Changes
+
+- [`c3913985e2415`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/c3913985e2415) -
+  Internal: remove unused `src/arrow/` module. The `arrow()` preset and `TArrowPreset` type were
+  never exported from `package.json` and had no consumers in the codebase.
+
 ## 0.12.0
 
 ### Minor Changes

package/dist/cjs/animations/presets.js

@@ -9,7 +9,7 @@ exports.fade = fade;
 exports.scaleAndFade = scaleAndFade;
 exports.slideAndFade = slideAndFade;
 var _resolvePlacement = require("../internal/resolve-placement");
-// ── slideAndFade ──
+// slideAndFade
 
 function getSlideAndFadeProperties(_ref) {
   var placement = _ref.placement,
@@ -91,7 +91,7 @@ function slideAndFade(options) {
   };
 }
 
-// ── fade ──
+// fade
 
 var FADE_CSS = "\n[data-ds-popover-fade] {\n  opacity: 0;\n  transition:\n    opacity 175ms cubic-bezier(0.15, 1, 0.3, 1),\n    overlay 175ms allow-discrete,\n    display 175ms allow-discrete;\n}\n\n[data-ds-popover-fade]:popover-open {\n  opacity: 1;\n  transition-duration: 350ms;\n}\n\n@starting-style {\n  [data-ds-popover-fade]:popover-open {\n    opacity: 0;\n  }\n}\n\n@media (prefers-reduced-motion: reduce) {\n  [data-ds-popover-fade],\n  [data-ds-popover-fade]:popover-open {\n    transition-duration: 0s;\n  }\n}\n";
 
@@ -117,7 +117,7 @@ function fade() {
   };
 }
 
-// ── scaleAndFade ──
+// scaleAndFade
 
 var SCALE_AND_FADE_CSS = "\n[data-ds-popover-scale-and-fade] {\n  opacity: 0;\n  transform: scale(0.95);\n  transition:\n    opacity 175ms cubic-bezier(0.15, 1, 0.3, 1),\n    transform 175ms cubic-bezier(0.15, 1, 0.3, 1),\n    overlay 175ms allow-discrete,\n    display 175ms allow-discrete;\n}\n\n[data-ds-popover-scale-and-fade]:popover-open {\n  opacity: 1;\n  transform: none;\n  transition-duration: 350ms;\n}\n\n@starting-style {\n  [data-ds-popover-scale-and-fade]:popover-open {\n    opacity: 0;\n    transform: scale(0.95);\n  }\n}\n\n@media (prefers-reduced-motion: reduce) {\n  [data-ds-popover-scale-and-fade],\n  [data-ds-popover-scale-and-fade]:popover-open {\n    transition-duration: 0s;\n  }\n}\n";
 
@@ -147,7 +147,7 @@ function scaleAndFade() {
 // Dialog presets
 // ══════════════════════════════════════════════════════════════════════════════
 
-// ── dialogSlideUpAndFade ──
+// dialogSlideUpAndFade
 
 var DIALOG_SLIDE_UP_AND_FADE_CSS = "\n[data-ds-dialog-slide-up-and-fade] {\n  opacity: 0;\n  transform: translateY(calc(-1 * var(--ds-dialog-ty, 12px)));\n  transition:\n    opacity 175ms cubic-bezier(0.15, 1, 0.3, 1),\n    transform 175ms cubic-bezier(0.15, 1, 0.3, 1),\n    overlay 175ms allow-discrete,\n    display 175ms allow-discrete;\n}\n\n[data-ds-dialog-slide-up-and-fade][open] {\n  opacity: 1;\n  transform: none;\n  transition-duration: 350ms;\n}\n\n@starting-style {\n  [data-ds-dialog-slide-up-and-fade][open] {\n    opacity: 0;\n    transform: translateY(var(--ds-dialog-ty, 12px));\n  }\n}\n\n[data-ds-dialog-slide-up-and-fade]::backdrop {\n  background-color: transparent;\n  transition:\n    background-color 175ms cubic-bezier(0.15, 1, 0.3, 1),\n    overlay 175ms allow-discrete,\n    display 175ms allow-discrete;\n}\n\n[data-ds-dialog-slide-up-and-fade][open]::backdrop {\n  background-color: var(--ds-blanket, #050C1F75);\n  transition-duration: 350ms;\n}\n\n@starting-style {\n  [data-ds-dialog-slide-up-and-fade][open]::backdrop {\n    background-color: transparent;\n  }\n}\n\n@media (prefers-reduced-motion: reduce) {\n  [data-ds-dialog-slide-up-and-fade],\n  [data-ds-dialog-slide-up-and-fade][open],\n  [data-ds-dialog-slide-up-and-fade]::backdrop,\n  [data-ds-dialog-slide-up-and-fade][open]::backdrop {\n    transition-duration: 0s;\n  }\n}\n";
 
@@ -183,7 +183,7 @@ function dialogSlideUpAndFade(options) {
   };
 }
 
-// ── dialogFade ──
+// dialogFade
 
 var DIALOG_FADE_CSS = "\n[data-ds-dialog-fade] {\n  opacity: 0;\n  transition:\n    opacity 175ms cubic-bezier(0.15, 1, 0.3, 1),\n    overlay 175ms allow-discrete,\n    display 175ms allow-discrete;\n}\n\n[data-ds-dialog-fade][open] {\n  opacity: 1;\n  transition-duration: 350ms;\n}\n\n@starting-style {\n  [data-ds-dialog-fade][open] {\n    opacity: 0;\n  }\n}\n\n[data-ds-dialog-fade]::backdrop {\n  background-color: transparent;\n  transition:\n    background-color 175ms cubic-bezier(0.15, 1, 0.3, 1),\n    overlay 175ms allow-discrete,\n    display 175ms allow-discrete;\n}\n\n[data-ds-dialog-fade][open]::backdrop {\n  background-color: var(--ds-blanket, #050C1F75);\n  transition-duration: 350ms;\n}\n\n@starting-style {\n  [data-ds-dialog-fade][open]::backdrop {\n    background-color: transparent;\n  }\n}\n\n@media (prefers-reduced-motion: reduce) {\n  [data-ds-dialog-fade],\n  [data-ds-dialog-fade][open],\n  [data-ds-dialog-fade]::backdrop,\n  [data-ds-dialog-fade][open]::backdrop {\n    transition-duration: 0s;\n  }\n}\n";
 

package/dist/cjs/dialog/create-close-event.js

@@ -8,7 +8,7 @@ exports.createCloseEvent = createCloseEvent;
  * Creates a synthetic DOM event from a `TDialogCloseReason`.
  *
  * Useful when bridging the Dialog primitive's `onClose({ reason })` callback
- * to a legacy API that expects a `KeyboardEvent` or `MouseEvent` — for example,
+ * to a legacy API that expects a `KeyboardEvent` or `MouseEvent` - for example,
  * `@atlaskit/modal-dialog`'s `onClose(event, analyticsEvent)` contract.
  *
  * - `'escape'` → `KeyboardEvent('keydown', { key: 'Escape' })`

package/dist/cjs/dialog/dialog-content.js

@@ -58,7 +58,7 @@ var Dialog = exports.Dialog = /*#__PURE__*/(0, _react.forwardRef)(function Dialo
   var ownRef = (0, _react.useRef)(null);
   var combinedRef = (0, _mergeRefs.default)([ownRef, ref]);
 
-  // ── Animation lifecycle ──
+  // Animation lifecycle
   var _useAnimatedVisibilit = (0, _useAnimatedVisibility.useAnimatedVisibility)({
       isOpen: isOpen,
       animate: animate,
@@ -68,7 +68,7 @@ var Dialog = exports.Dialog = /*#__PURE__*/(0, _react.forwardRef)(function Dialo
     showChildren = _useAnimatedVisibilit.showChildren,
     preset = _useAnimatedVisibilit.preset;
 
-  // ── Focus wrap ──
+  // Focus wrap
   // Native <dialog>.showModal() traps focus but wraps through <body> at
   // the boundary (A → B → C → body → A). This hook intercepts Tab to
   // wrap directly (A → B → C → A), matching the WAI-ARIA APG pattern.
@@ -77,7 +77,7 @@ var Dialog = exports.Dialog = /*#__PURE__*/(0, _react.forwardRef)(function Dialo
     role: 'dialog'
   });
 
-  // ── Open layer observer registration ──
+  // Open layer observer registration
   // Notifies the open layer observer so app-coordination features
   // (open-count subscriptions) work with top-layer dialogs.
   (0, _openLayerObserver.useNotifyOpenLayerObserver)({
@@ -108,7 +108,7 @@ var Dialog = exports.Dialog = /*#__PURE__*/(0, _react.forwardRef)(function Dialo
     }
   }, [isOpen]);
 
-  // ── Handle native Escape (cancel event) ──
+  // Handle native Escape (cancel event)
   var handleCancel = (0, _react.useCallback)(function (event) {
     event.preventDefault();
     onClose({
@@ -116,7 +116,7 @@ var Dialog = exports.Dialog = /*#__PURE__*/(0, _react.forwardRef)(function Dialo
     });
   }, [onClose]);
 
-  // ── Handle backdrop click ──
+  // Handle backdrop click
   // Attached via bind-event-listener rather than a React prop so we avoid
   // a11y lint suppressions on the <dialog> element.
   // Keyboard dismiss is already handled natively (Escape → onCancel above).

package/dist/cjs/entry-points/use-arrow-navigation.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 Object.defineProperty(exports, "isAtCurrentMenuLevel", {
   enumerable: true,
   get: function get() {
-    return _useArrowNavigation.isAtCurrentMenuLevel;
+    return _isAtCurrentMenuLevel.isAtCurrentMenuLevel;
   }
 });
 Object.defineProperty(exports, "useArrowNavigation", {
@@ -15,4 +15,5 @@ Object.defineProperty(exports, "useArrowNavigation", {
     return _useArrowNavigation.useArrowNavigation;
   }
 });
-var _useArrowNavigation = require("../use-arrow-navigation");
+var _useArrowNavigation = require("../use-arrow-navigation");
+var _isAtCurrentMenuLevel = require("../use-arrow-navigation/is-at-current-menu-level");

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

@@ -10,7 +10,7 @@ exports.ensurePresetStyles = ensurePresetStyles;
  * Each preset's CSS is injected at most once into `<head>`.
  * Shared by both PopoverContent and DialogContent.
  *
- * Note: injected `<style>` elements and the tracking Set are append-only —
+ * Note: injected `<style>` elements and the tracking Set are append-only -
  * they are never removed. This is intentional: the number of distinct
  * presets is bounded (handful of animation presets), so the
  * memory footprint is negligible. Removing styles would risk breaking

package/dist/cjs/internal/placement-to-position-area.js

@@ -0,0 +1,43 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.placementToPositionArea = placementToPositionArea;
+var _resolvePlacement = require("./resolve-placement");
+/**
+ * Resolves placement options to CSS `position-area` syntax.
+ *
+ * The `align` field represents the *visual* alignment:
+ * - `align: 'start'` means "aligned to the trigger's start edge" (left in LTR for block axis)
+ * - `align: 'end'` means "aligned to the trigger's end edge"
+ * - `align: 'center'` means centered (single-axis position-area)
+ *
+ * CSS `position-area` uses `span-*` keywords which indicate the *expansion direction*.
+ * Visual start-alignment requires `span-{cross-axis}-end` (expand toward end = start-aligned).
+ * This function handles the inversion internally.
+ *
+ * @example
+ * placementToPositionArea({ placement: { axis: 'block', edge: 'end', align: 'center' } }) // → 'block-end'
+ * placementToPositionArea({ placement: { axis: 'block', edge: 'end', align: 'start' } }) // → 'block-end span-inline-end'
+ * placementToPositionArea({ placement: { axis: 'block', edge: 'end', align: 'end' } })   // → 'block-end span-inline-start'
+ */
+function placementToPositionArea(_ref) {
+  var placement = _ref.placement;
+  var _getPlacement = (0, _resolvePlacement.getPlacement)({
+      placement: placement
+    }),
+    axis = _getPlacement.axis,
+    edge = _getPlacement.edge,
+    align = _getPlacement.align;
+  var edgeValue = "".concat(axis, "-").concat(edge);
+  if (align === 'center') {
+    return edgeValue;
+  }
+
+  // Cross-axis name: block ↔ inline
+  var crossAxis = axis === 'block' ? 'inline' : 'block';
+  // Invert align → CSS span direction: visual 'start' → span toward 'end'
+  var spanDir = align === 'start' ? 'end' : 'start';
+  return "".concat(edgeValue, " span-").concat(crossAxis, "-").concat(spanDir);
+}

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

@@ -0,0 +1,82 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.placementToTryFallbacks = placementToTryFallbacks;
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+var _resolvePlacement = require("./resolve-placement");
+/**
+ * Returns `position-try-fallbacks` value based on placement.
+ *
+ * For centered placements, includes cross-axis aligned position-area
+ * values so the browser can shift the popover along the cross-axis
+ * when the centered position would overflow the viewport edge.
+ *
+ * Fallback order for centered placements (e.g. `block-end`):
+ * 1. Same edge, start-aligned (shift for near-edge overflow)
+ * 2. Same edge, end-aligned (shift for far-edge overflow)
+ * 3. Flipped edge, centered
+ * 4. Flipped edge, start-aligned
+ * 5. Flipped edge, end-aligned
+ *
+ * For aligned placements (start/end), includes the same-edge centered
+ * position as fallbacks so the browser can try centering when the aligned
+ * position would overflow, before flipping to the opposite edge.
+ *
+ * **Why `flip-inline flip-block` (or `flip-block flip-inline`) is included:**
+ *
+ * When a popup is in a viewport corner (e.g. inline-end align-end at the
+ * top-right), flipping only the primary axis (`flip-inline`) moves the popup
+ * to the left but keeps the same cross-axis span direction (e.g. upward),
+ * which is still off-screen. The combined keyword `flip-inline flip-block`
+ * mirrors the popup diagonally. It flips BOTH the position-area AND both
+ * inline and block margins simultaneously, placing the popup at the
+ * diagonally opposite corner where there is always space.
+ *
+ * Named `position-area` entries (e.g. `inline-start span-block-end`) in
+ * `position-try-fallbacks` do NOT update margins, so only the `flip-*`
+ * tactic keywords correctly flip the gap margin along with the position.
+ */
+function placementToTryFallbacks(_ref) {
+  var placement = _ref.placement;
+  var _getPlacement = (0, _resolvePlacement.getPlacement)({
+      placement: placement
+    }),
+    axis = _getPlacement.axis,
+    edge = _getPlacement.edge,
+    align = _getPlacement.align;
+  var crossAxis = axis === 'block' ? 'inline' : 'block';
+  var flippedEdge = edge === 'start' ? 'end' : 'start';
+  var sameEdge = "".concat(axis, "-").concat(edge);
+  var oppositeEdge = "".concat(axis, "-").concat(flippedEdge);
+  var flipKeyword = axis === 'block' ? 'flip-block' : 'flip-inline';
+  var flipCrossKeyword = axis === 'block' ? 'flip-inline' : 'flip-block';
+
+  // Single algorithm: produce the shift list against any base alignment.
+  // For `align: 'start'` the "near" shift expands toward `end`; for
+  // `align: 'end'` it expands toward `start`; for `align: 'center'`
+  // either order is symmetric (we use end-then-start to match the
+  // historical fallback list).
+  function shifts(baseAlign, edgeKey) {
+    if (baseAlign === 'center') {
+      return ["".concat(edgeKey, " span-").concat(crossAxis, "-end"), "".concat(edgeKey, " span-").concat(crossAxis, "-start")];
+    }
+    var near = baseAlign === 'start' ? 'end' : 'start';
+    var far = baseAlign === 'start' ? 'start' : 'end';
+    return ["".concat(edgeKey, " span-").concat(crossAxis, "-").concat(near), edgeKey, "".concat(edgeKey, " span-").concat(crossAxis, "-").concat(far)];
+  }
+  if (align !== 'center') {
+    // Aligned (start/end): try same-edge shifts, then single-axis flip,
+    // then diagonal flip for corner overflow, then opposite-edge shifts.
+    // Legacy Popper fallback ordering for e.g. bottom-start:
+    // [bottom, bottom-end, top-start, top, top-end, auto].
+    return [].concat((0, _toConsumableArray2.default)(shifts(align, sameEdge)), [flipKeyword, "".concat(flipKeyword, " ").concat(flipCrossKeyword)], (0, _toConsumableArray2.default)(shifts(align, oppositeEdge))).join(', ');
+  }
+
+  // Centered: same-edge shifts, single-axis flip, opposite-edge shifts.
+  // Diagonal flip is unnecessary because centered placements expand
+  // equally in both cross-axis directions.
+  return [].concat((0, _toConsumableArray2.default)(shifts('center', sameEdge)), [flipKeyword], (0, _toConsumableArray2.default)(shifts('center', oppositeEdge))).join(', ');
+}

package/dist/cjs/internal/reduced-motion.js

@@ -13,7 +13,7 @@ var _once = _interopRequireDefault(require("@atlaskit/ds-lib/once"));
  *
  * The result is cached after the first call via `once`. This avoids
  * calling `matchMedia` on every render. The trade-off is that if a user
- * toggles the OS reduced-motion setting mid-session, the change won't
+ * toggles the OS reduced-motion setting mid-session, the change will not
  * take effect until the next page load. This is acceptable because
  * toggling this system-level preference mid-session is extremely rare,
  * and a page refresh is a reasonable expectation for system accessibility

package/dist/cjs/internal/resolve-placement.js

@@ -30,8 +30,8 @@ var DEFAULT_GAP = "var(--ds-space-100, 8px)";
  * CSS length string (e.g. `token('space.100')`).
  *
  * The two offset axes are named for clarity at the call site:
- *   - `gap`     — distance away from the trigger along the placement axis
- *   - `crossAxisShift`  — nudge along the trigger edge (perpendicular to the placement axis)
+ *   - `gap`     - distance away from the trigger along the placement axis
+ *   - `crossAxisShift`  - nudge along the trigger edge (perpendicular to the placement axis)
  */
 
 /**

package/dist/cjs/internal/role-types.js

@@ -29,7 +29,7 @@ exports.shouldFocusIntoPopover = shouldFocusIntoPopover;
  * (e.g. a combobox labels its listbox, tooltip content IS the accessible name).
  */
 
-// ── Shared ARIA role discrimination types ──
+// Shared ARIA role discrimination types
 //
 // These encode the WCAG 4.1.2 constraint: roles like `dialog`, `alertdialog`,
 // and `menu` MUST have an accessible name (either `label` or `labelledBy`).

package/dist/cjs/internal/slot.js

@@ -32,14 +32,14 @@ function isSlotChild(child) {
  * Merges props (including ref) onto a single React element child.
  *
  * A safer alternative to raw `cloneElement` that:
- * 1. Guards with `isValidElement` — non-element children (strings,
+ * 1. Guards with `isValidElement` - non-element children (strings,
  *    fragments, null) are returned as-is instead of crashing.
  * 2. Merges refs via `mergeRefs` so both the caller's ref and the
  *    child's existing ref are honoured.
  * 3. Spreads any additional props (ARIA attributes, event handlers, etc.)
  *    onto the child element.
  *
- * Event handlers (e.g. `onClick`) are **not** auto-merged — the caller's
+ * Event handlers (e.g. `onClick`) are **not** auto-merged - the caller's
  * handler replaces the child's. Compose handlers before passing them in.
  *
  * @example
@@ -52,7 +52,7 @@ function isSlotChild(child) {
 var Slot = exports.Slot = /*#__PURE__*/(0, _react.forwardRef)(function Slot(slotProps, ref) {
   var rawChildren = slotProps.children,
     props = (0, _objectWithoutProperties2.default)(slotProps, _excluded);
-  // `SlotProps` intersects `Record<string, unknown>`, so `children` is typed as `unknown`.
+  // `TSlotProps` intersects `Record<string, unknown>`, so `children` is typed as `unknown`.
   var children = rawChildren;
   if (!isSlotChild(children)) {
     return children;

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

@@ -4,18 +4,15 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.placementToPositionArea = placementToPositionArea;
-exports.placementToTryFallbacks = placementToTryFallbacks;
 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");
@@ -38,137 +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() {}
-  }]);
-}();
-
-/**
- * Resolves placement options to CSS `position-area` syntax.
- *
- * The `align` field represents the *visual* alignment:
- * - `align: 'start'` means "aligned to the trigger's start edge" (left in LTR for block axis)
- * - `align: 'end'` means "aligned to the trigger's end edge"
- * - `align: 'center'` means centered (single-axis position-area)
- *
- * CSS `position-area` uses `span-*` keywords which indicate the *expansion direction*.
- * Visual start-alignment requires `span-{cross-axis}-end` (expand toward end = start-aligned).
- * This function handles the inversion internally.
- *
- * @example
- * placementToPositionArea({ placement: { axis: 'block', edge: 'end', align: 'center' } }) // → 'block-end'
- * placementToPositionArea({ placement: { axis: 'block', edge: 'end', align: 'start' } }) // → 'block-end span-inline-end'
- * placementToPositionArea({ placement: { axis: 'block', edge: 'end', align: 'end' } })   // → 'block-end span-inline-start'
- */
-function placementToPositionArea(_ref) {
-  var placement = _ref.placement;
-  var _getPlacement = (0, _resolvePlacement.getPlacement)({
-      placement: placement
-    }),
-    axis = _getPlacement.axis,
-    edge = _getPlacement.edge,
-    align = _getPlacement.align;
-  var edgeValue = "".concat(axis, "-").concat(edge);
-  if (align === 'center') {
-    return edgeValue;
-  }
-
-  // Cross-axis name: block ↔ inline
-  var crossAxis = axis === 'block' ? 'inline' : 'block';
-  // Invert align → CSS span direction: visual 'start' → span toward 'end'
-  var spanDir = align === 'start' ? 'end' : 'start';
-  return "".concat(edgeValue, " span-").concat(crossAxis, "-").concat(spanDir);
-}
-
-/**
- * Returns `position-try-fallbacks` value based on placement.
- *
- * For centered placements, includes cross-axis aligned position-area
- * values so the browser can shift the popover along the cross-axis
- * when the centered position would overflow the viewport edge.
- *
- * Fallback order for centered placements (e.g. `block-end`):
- * 1. Same edge, start-aligned (shift for near-edge overflow)
- * 2. Same edge, end-aligned (shift for far-edge overflow)
- * 3. Flipped edge, centered
- * 4. Flipped edge, start-aligned
- * 5. Flipped edge, end-aligned
- *
- * For aligned placements (start/end), includes the same-edge centered
- * position as fallbacks so the browser can try centering when the aligned
- * position would overflow, before flipping to the opposite edge.
- *
- * **Why `flip-inline flip-block` (or `flip-block flip-inline`) is included:**
- *
- * When a popup is in a viewport corner (e.g. inline-end align-end at the
- * top-right), flipping only the primary axis (`flip-inline`) moves the popup
- * to the left but keeps the same cross-axis span direction (e.g. upward),
- * which is still off-screen. The combined keyword `flip-inline flip-block`
- * mirrors the popup diagonally. It flips BOTH the position-area AND both
- * inline and block margins simultaneously, placing the popup at the
- * diagonally opposite corner where there is always space.
- *
- * Named `position-area` entries (e.g. `inline-start span-block-end`) in
- * `position-try-fallbacks` do NOT update margins, so only the `flip-*`
- * tactic keywords correctly flip the gap margin along with the position.
- */
-// eslint-disable-next-line @atlaskit/volt-strict-mode/no-multiple-exports
-function placementToTryFallbacks(_ref2) {
-  var placement = _ref2.placement;
-  var _getPlacement2 = (0, _resolvePlacement.getPlacement)({
-      placement: placement
-    }),
-    axis = _getPlacement2.axis,
-    edge = _getPlacement2.edge,
-    align = _getPlacement2.align;
-  var crossAxis = axis === 'block' ? 'inline' : 'block';
-  var flippedEdge = edge === 'start' ? 'end' : 'start';
-  var sameEdge = "".concat(axis, "-").concat(edge);
-  var oppositeEdge = "".concat(axis, "-").concat(flippedEdge);
-  var flipKeyword = axis === 'block' ? 'flip-block' : 'flip-inline';
-  var flipCrossKeyword = axis === 'block' ? 'flip-inline' : 'flip-block';
-
-  // Single algorithm: produce the shift list against any base alignment.
-  // For `align: 'start'` the "near" shift expands toward `end`; for
-  // `align: 'end'` it expands toward `start`; for `align: 'center'`
-  // either order is symmetric (we use end-then-start to match the
-  // historical fallback list).
-  function shifts(baseAlign, edgeKey) {
-    if (baseAlign === 'center') {
-      return ["".concat(edgeKey, " span-").concat(crossAxis, "-end"), "".concat(edgeKey, " span-").concat(crossAxis, "-start")];
-    }
-    var near = baseAlign === 'start' ? 'end' : 'start';
-    var far = baseAlign === 'start' ? 'start' : 'end';
-    return ["".concat(edgeKey, " span-").concat(crossAxis, "-").concat(near), edgeKey, "".concat(edgeKey, " span-").concat(crossAxis, "-").concat(far)];
-  }
-  if (align !== 'center') {
-    // Aligned (start/end): try same-edge shifts, then single-axis flip,
-    // then diagonal flip for corner overflow, then opposite-edge shifts.
-    // Legacy Popper fallback ordering for e.g. bottom-start:
-    // [bottom, bottom-end, top-start, top, top-end, auto].
-    return [].concat((0, _toConsumableArray2.default)(shifts(align, sameEdge)), [flipKeyword, "".concat(flipKeyword, " ").concat(flipCrossKeyword)], (0, _toConsumableArray2.default)(shifts(align, oppositeEdge))).join(', ');
-  }
-
-  // Centered: same-edge shifts, single-axis flip, opposite-edge shifts.
-  // Diagonal flip is unnecessary because centered placements expand
-  // equally in both cross-axis directions.
-  return [].concat((0, _toConsumableArray2.default)(shifts('center', sameEdge)), [flipKeyword], (0, _toConsumableArray2.default)(shifts('center', oppositeEdge))).join(', ');
-}
+var noopResizeObserver = {
+  observe: function observe() {},
+  unobserve: function unobserve() {},
+  disconnect: function disconnect() {}
+};
 
 /**
  * Returns true when the popover is currently open. Wrapped because the
@@ -201,9 +76,9 @@ var supportsAnchorPositioning = (0, _once.default)(function () {
  * 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(_ref3) {
-  var placement = _ref3.placement,
-    offset = _ref3.offset;
+function edgeMargin(_ref) {
+  var placement = _ref.placement,
+    offset = _ref.offset;
   var axis = placement.axis,
     edge = placement.edge;
   var value = offset;
@@ -244,10 +119,10 @@ function edgeMargin(_ref3) {
  * positive), `align: 'center'` uses START. Margin on the un-anchored side
  * has no effect under CSS Anchor Positioning.
  */
-function crossAxisShiftMargin(_ref4) {
-  var placement = _ref4.placement,
-    crossAxisShiftCssValue = _ref4.crossAxisShiftCssValue,
-    direction = _ref4.direction;
+function crossAxisShiftMargin(_ref2) {
+  var placement = _ref2.placement,
+    crossAxisShiftCssValue = _ref2.crossAxisShiftCssValue,
+    direction = _ref2.direction;
   var axis = placement.axis,
     align = placement.align;
   var directionSign = direction === 'forwards' ? 1 : -1;
@@ -326,13 +201,13 @@ function useStablePlacement(placement) {
  * placement shape is unchanged.
  */
 // eslint-disable-next-line @atlaskit/volt-strict-mode/no-multiple-exports
-function useAnchorPosition(_ref5) {
-  var anchorRef = _ref5.anchorRef,
-    popoverRef = _ref5.popoverRef,
-    _ref5$placement = _ref5.placement,
-    placement = _ref5$placement === void 0 ? {} : _ref5$placement,
-    _ref5$forceFallbackPo = _ref5.forceFallbackPositioning,
-    forceFallbackPositioning = _ref5$forceFallbackPo === void 0 ? false : _ref5$forceFallbackPo;
+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;
   var id = (0, _react.useId)();
   // Stabilize `placement` object so the same object literal
   // value returns an object with the same reference
@@ -367,12 +242,12 @@ function useAnchorPosition(_ref5) {
         value: anchorName
       }, {
         property: 'position-area',
-        value: placementToPositionArea({
+        value: (0, _placementToPositionArea.placementToPositionArea)({
           placement: stablePlacement
         })
       }, {
         property: 'position-try-fallbacks',
-        value: placementToTryFallbacks({
+        value: (0, _placementToTryFallbacks.placementToTryFallbacks)({
           placement: stablePlacement
         })
       },
@@ -458,7 +333,7 @@ function useAnchorPosition(_ref5) {
       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.
@@ -527,20 +402,17 @@ function useAnchorPosition(_ref5) {
     // 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