baseui/popover/constants.js

A React Component library implementing the Base design language

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.TRIGGER_TYPE = exports.STATE_CHANGE_TYPE = exports.POPOVER_MARGIN = exports.PLACEMENT = exports.ARROW_WIDTH = exports.ARROW_SIZE = exports.ANIMATE_OUT_TIME = exports.ANIMATE_IN_TIME = exports.ACCESSIBILITY_TYPE = void 0;
/*
Copyright (c) Uber Technologies, Inc.

This source code is licensed under the MIT license found in the
LICENSE file in the root directory of this source tree.
*/
const PLACEMENT = exports.PLACEMENT = {
  auto: 'auto',
  topLeft: 'topLeft',
  top: 'top',
  topRight: 'topRight',
  rightTop: 'rightTop',
  right: 'right',
  rightBottom: 'rightBottom',
  bottomRight: 'bottomRight',
  bottom: 'bottom',
  bottomLeft: 'bottomLeft',
  leftBottom: 'leftBottom',
  left: 'left',
  leftTop: 'leftTop'
};
const TRIGGER_TYPE = exports.TRIGGER_TYPE = {
  click: 'click',
  hover: 'hover'
};
const STATE_CHANGE_TYPE = exports.STATE_CHANGE_TYPE = {
  open: 'open',
  close: 'close'
};
const ACCESSIBILITY_TYPE = exports.ACCESSIBILITY_TYPE = {
  none: 'none',
  menu: 'menu',
  tooltip: 'tooltip'
};
const POPOVER_MARGIN = exports.POPOVER_MARGIN = 8;
const ARROW_SIZE = exports.ARROW_SIZE = 6;
const ANIMATE_OUT_TIME = exports.ANIMATE_OUT_TIME = 0;
const ANIMATE_IN_TIME = exports.ANIMATE_IN_TIME = 20;

/**
 * Since we use a 45-degree rotated div to render the arrow, the
 * width/height of this div is different than the arrow size itself
 *
 * The arrow size is essentially half the diagonal of the rotated div,
 * using pythagorean theorem:
 *   width^2 + height^2 = (arrow_size * 2)^2
 * In this case width = height so:
 *   2 * width^2 = (arrow_size * 2)^2
 * Simplifies to:
 *   width = √((arrow_size * 2)^2 / 2)
 */
const ARROW_WIDTH = exports.ARROW_WIDTH = Math.ceil(Math.sqrt((ARROW_SIZE * 2) ** 2 / 2));