@atlaskit/top-layer 1.0.1 → 1.1.0

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @atlaskit/top-layer
 
+## 1.1.0
+
+### Minor Changes
+
+- [`ff76ce8167751`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/ff76ce8167751) -
+  Internal refactoring. No behaviour change.
+
+## 1.0.2
+
+### Patch Changes
+
+- [`ee28cf33718b0`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/ee28cf33718b0) -
+  Add @atlassian/react-compiler-gating as a runtime dependency to enable React Compiler platform
+  gating.
+- Updated dependencies
+
 ## 1.0.1
 
 ### Patch Changes

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

@@ -1,82 +1,108 @@
 "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.
+ * 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.
  *
- * 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.
+ * @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'
  */
-function placementToTryFallbacks(_ref) {
-  var placement = _ref.placement;
-  var _getPlacement = (0, _resolvePlacement.getPlacement)({
-      placement: placement
-    }),
-    axis = _getPlacement.axis,
-    edge = _getPlacement.edge,
-    align = _getPlacement.align;
+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 = (0, _resolvePlacement.getPlacement)({
+    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 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';
+  var sameEdgeArea = "".concat(axis, "-").concat(edge);
+  var oppositeEdgeArea = "".concat(axis, "-").concat(flippedEdge);
+  var flipOnMainAxis = axis === 'block' ? 'flip-block' : 'flip-inline';
 
-  // 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(', ');
-  }
+  /**
+   * **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
+   */
 
-  // 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(', ');
+  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(', ');
 }

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

@@ -1,77 +1,108 @@
 import { getPlacement } from './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.
+ * 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({
+  align,
+  edgeKey,
+  crossAxis
+}) {
+  if (align === 'center') {
+    return [`${edgeKey} span-${crossAxis}-end`, `${edgeKey} span-${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.
+  const near = align === 'start' ? 'end' : 'start';
+  const far = align === 'start' ? 'start' : 'end';
+  return [`${edgeKey} span-${crossAxis}-${near}`, edgeKey, `${edgeKey} span-${crossAxis}-${far}`];
+}
+function flipDiagonally({
+  axis
+}) {
+  const flipOnMainAxis = axis === 'block' ? 'flip-block' : 'flip-inline';
+  const flipToCrossAxis = axis === 'block' ? 'flip-inline' : 'flip-block';
+  return `${flipOnMainAxis} ${flipToCrossAxis}`;
+}
+
+/**
+ * Returns the `position-try-fallbacks` value for a placement.
  *
- * 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.
+ * @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({
   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.
+   */
+
+  const resolved = getPlacement({
+    placement
+  });
   const {
     axis,
     edge,
     align
-  } = getPlacement({
-    placement
-  });
+  } = resolved;
   const crossAxis = axis === 'block' ? 'inline' : 'block';
   const flippedEdge = edge === 'start' ? 'end' : 'start';
-  const sameEdge = `${axis}-${edge}`;
-  const oppositeEdge = `${axis}-${flippedEdge}`;
-  const flipKeyword = axis === 'block' ? 'flip-block' : 'flip-inline';
-  const flipCrossKeyword = axis === 'block' ? 'flip-inline' : 'flip-block';
+  const sameEdgeArea = `${axis}-${edge}`;
+  const oppositeEdgeArea = `${axis}-${flippedEdge}`;
+  const flipOnMainAxis = axis === 'block' ? 'flip-block' : 'flip-inline';
 
-  // 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 [`${edgeKey} span-${crossAxis}-end`, `${edgeKey} span-${crossAxis}-start`];
-    }
-    const near = baseAlign === 'start' ? 'end' : 'start';
-    const far = baseAlign === 'start' ? 'start' : 'end';
-    return [`${edgeKey} span-${crossAxis}-${near}`, edgeKey, `${edgeKey} span-${crossAxis}-${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 [...shifts(align, sameEdge), flipKeyword, `${flipKeyword} ${flipCrossKeyword}`, ...shifts(align, oppositeEdge)].join(', ');
-  }
+  /**
+   * **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
+   */
 
-  // 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 [...shifts('center', sameEdge), flipKeyword, ...shifts('center', oppositeEdge)].join(', ');
+  return [slideOnEdge({
+    align,
+    edgeKey: sameEdgeArea,
+    crossAxis
+  }), flipOnMainAxis, align !== 'center' ? flipDiagonally({
+    axis
+  }) : null, slideOnEdge({
+    align,
+    edgeKey: oppositeEdgeArea,
+    crossAxis
+  })].filter(Boolean).flat().join(', ');
 }

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

@@ -1,76 +1,103 @@
-import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
 import { getPlacement } from './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.
+ * 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.
  *
- * 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.
+ * @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(_ref) {
-  var placement = _ref.placement;
-  var _getPlacement = getPlacement({
-      placement: placement
-    }),
-    axis = _getPlacement.axis,
-    edge = _getPlacement.edge,
-    align = _getPlacement.align;
+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 = getPlacement({
+    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 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';
+  var sameEdgeArea = "".concat(axis, "-").concat(edge);
+  var oppositeEdgeArea = "".concat(axis, "-").concat(flippedEdge);
+  var flipOnMainAxis = axis === 'block' ? 'flip-block' : 'flip-inline';
 
-  // 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(_toConsumableArray(shifts(align, sameEdge)), [flipKeyword, "".concat(flipKeyword, " ").concat(flipCrossKeyword)], _toConsumableArray(shifts(align, oppositeEdge))).join(', ');
-  }
+  /**
+   * **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
+   */
 
-  // 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(_toConsumableArray(shifts('center', sameEdge)), [flipKeyword], _toConsumableArray(shifts('center', oppositeEdge))).join(', ');
+  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(', ');
 }

package/dist/types/internal/placement-to-try-fallbacks.d.ts

@@ -1,35 +1,12 @@
-import { type TPlacementOptions } from '../internal/resolve-placement';
+import { type TPlacementOptions } from './resolve-placement';
 /**
- * Returns `position-try-fallbacks` value based on placement.
+ * Returns the `position-try-fallbacks` value for a 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.
+ * @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 declare function placementToTryFallbacks({ placement }: {
     placement: TPlacementOptions;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/top-layer",
-	"version": "1.0.1",
+	"version": "1.1.0",
 	"description": "Low-level layering primitives based on popover and dialog",
 	"homepage": "https://atlassian.design/components/top-layer",
 	"repository": "https://bitbucket.org/atlassian/atlassian-frontend-mirror",
@@ -38,7 +38,8 @@
 		"@atlaskit/css": "^1.0.0",
 		"@atlaskit/ds-lib": "^8.0.0",
 		"@atlaskit/layering": "^4.0.0",
-		"@atlaskit/tokens": "^14.0.0",
+		"@atlaskit/tokens": "^15.0.0",
+		"@atlassian/react-compiler-gating": "^0.2.0",
 		"@babel/runtime": "^7.0.0",
 		"@compiled/react": "^0.20.0",
 		"bind-event-listener": "^3.0.0",
@@ -57,7 +58,6 @@
 		"@atlaskit/primitives": "^20.0.0",
 		"@atlaskit/ssr": "workspace:^",
 		"@atlaskit/textfield": "^9.0.0",
-		"@atlassian/react-compiler-gating": "workspace:^",
 		"@atlassian/ssr-tests": "workspace:^",
 		"@atlassian/testing-library": "^0.6.0",
 		"@testing-library/jest-dom": "^6.4.5",