npm - @atlaskit/top-layer - Versions diffs - 1.0.2 → 1.1.0 - Mend

@atlaskit/top-layer 1.0.2 → 1.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (6) hide show

package/CHANGELOG.md +7 -0
package/dist/cjs/internal/placement-to-try-fallbacks.js +93 -67
package/dist/es2019/internal/placement-to-try-fallbacks.js +91 -60
package/dist/esm/internal/placement-to-try-fallbacks.js +93 -66
package/dist/types/internal/placement-to-try-fallbacks.d.ts +7 -30
package/package.json +1 -1

package/CHANGELOG.md CHANGED Viewed

@@ -1,5 +1,12 @@
 # @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

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

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/top-layer",
-	"version": "1.0.2",
+	"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",