@atlaskit/spotlight/dist/cjs/ui/popover-content/placement-map.js

A spotlight introduces users to points of interest, from focused messages to multi-step tours.

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.placementMap = void 0;
var GAP = "var(--ds-space-050, 4px)";

/**
 * Cross-axis shift toward target centre on block-axis placements (CSS anchor path).
 */
var INLINE_TARGET_CENTER_SHIFT = 'calc(anchor-size(width) / 2 - 28px)';
/**
 * Cross-axis shift toward target centre on inline-axis placements (CSS anchor path).
 */
var BLOCK_TARGET_CENTER_SHIFT = 'calc(anchor-size(height) / 2 - 22px)';
var placementMap = exports.placementMap = {
  'top-start': {
    axis: 'block',
    edge: 'start',
    align: 'end',
    offset: {
      gap: GAP,
      crossAxisShift: {
        value: INLINE_TARGET_CENTER_SHIFT,
        direction: 'backwards'
      }
    }
  },
  'top-center': {
    axis: 'block',
    edge: 'start',
    align: 'center',
    offset: {
      gap: GAP
    }
  },
  'top-end': {
    axis: 'block',
    edge: 'start',
    align: 'start',
    offset: {
      gap: GAP,
      crossAxisShift: {
        value: INLINE_TARGET_CENTER_SHIFT,
        direction: 'forwards'
      }
    }
  },
  'bottom-start': {
    axis: 'block',
    edge: 'end',
    align: 'end',
    offset: {
      gap: GAP,
      crossAxisShift: {
        value: INLINE_TARGET_CENTER_SHIFT,
        direction: 'backwards'
      }
    }
  },
  'bottom-center': {
    axis: 'block',
    edge: 'end',
    align: 'center',
    offset: {
      gap: GAP
    }
  },
  'bottom-end': {
    axis: 'block',
    edge: 'end',
    align: 'start',
    offset: {
      gap: GAP,
      crossAxisShift: {
        value: INLINE_TARGET_CENTER_SHIFT,
        direction: 'forwards'
      }
    }
  },
  'right-start': {
    axis: 'inline',
    edge: 'end',
    align: 'end',
    offset: {
      gap: GAP,
      crossAxisShift: {
        value: BLOCK_TARGET_CENTER_SHIFT,
        direction: 'backwards'
      }
    }
  },
  'right-end': {
    axis: 'inline',
    edge: 'end',
    align: 'start',
    offset: {
      gap: GAP,
      crossAxisShift: {
        value: "calc(".concat(BLOCK_TARGET_CENTER_SHIFT, " - 4px)"),
        direction: 'forwards'
      }
    }
  },
  'left-start': {
    axis: 'inline',
    edge: 'start',
    align: 'end',
    offset: {
      gap: GAP,
      crossAxisShift: {
        value: BLOCK_TARGET_CENTER_SHIFT,
        direction: 'backwards'
      }
    }
  },
  'left-end': {
    axis: 'inline',
    edge: 'start',
    align: 'start',
    offset: {
      gap: GAP,
      crossAxisShift: {
        value: "calc(".concat(BLOCK_TARGET_CENTER_SHIFT, " - 4px)"),
        direction: 'forwards'
      }
    }
  }
};