@mapbox/mr-ui/popover/popover.js

UI components for Mapbox projects

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = Popover;
var _react = _interopRequireWildcard(require("react"));
var _classnames = _interopRequireDefault(require("classnames"));
var _propTypes = _interopRequireDefault(require("prop-types"));
var _querySelectorContainsNode = _interopRequireDefault(require("@mapbox/query-selector-contains-node"));
var PopoverPrimitive = _interopRequireWildcard(require("@radix-ui/react-popover"));
var _styles = require("../utils/styles");
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
/**
 * Display a popover. The popover is positioned relative to an anchor element
 */
function Popover(_ref) {
  let {
    coloring = 'light',
    placement = 'right',
    alignment = 'center',
    padding = 'medium',
    active = false,
    hasPointer = true,
    zIndex = 'auto',
    hideWhenAnchorIsOffscreen = false,
    allowPlacementAxisChange = true,
    clickOutsideCloses = true,
    escapeCloses = true,
    getInitialFocus = e => e.preventDefault(),
    offsetFromAnchor = 6,
    passthroughProps,
    onExit,
    children,
    content
  } = _ref;
  const {
    background,
    borderColor,
    color,
    fill
  } = (0, _styles.getTheme)(coloring);
  const triggerRef = (0, _react.useRef)(null);
  const bodyClasses = (0, _classnames.default)(`${background} ${borderColor} ${color} border shadow-darken25 round`, {
    'px12 py12': padding === 'medium',
    'px12 py6': padding === 'small',
    [`border border-1 border--${borderColor}`]: borderColor
  });
  const bodyStyle = {
    zIndex
  };
  const getContent = () => {
    if (typeof content === 'function') {
      return content();
    }
    return content;
  };
  const onDown = e => {
    if (!clickOutsideCloses) {
      return;
    }
    // Don't call onExit if it wasn't provided.
    if (!onExit) {
      return;
    }

    // If event target contains the trigger element, assume onExit is handled
    // on its own so don't re-fire it.
    if (triggerRef.current && triggerRef.current.contains(e.target)) {
      return;
    }

    // Check if the event target contains the following data attribute. If it
    // does, do not call onExit.
    if ((0, _querySelectorContainsNode.default)('[data-popover-ignore-clicks]', e.target)) {
      return;
    }
    onExit();
  };
  return /*#__PURE__*/_react.default.createElement(PopoverPrimitive.Root, {
    open: active
  }, /*#__PURE__*/_react.default.createElement("span", {
    ref: triggerRef,
    style: {
      display: 'contents'
    }
  }, /*#__PURE__*/_react.default.createElement(PopoverPrimitive.Trigger, {
    asChild: true
  }, children)), /*#__PURE__*/_react.default.createElement(PopoverPrimitive.Portal, null, /*#__PURE__*/_react.default.createElement(PopoverPrimitive.Content, _extends({
    sideOffset: offsetFromAnchor,
    className: bodyClasses,
    style: bodyStyle,
    onEscapeKeyDown: escapeCloses && onExit,
    onPointerDownOutside: onDown,
    onOpenAutoFocus: getInitialFocus,
    align: alignment,
    side: placement,
    sticky: 'always',
    hideWhenDetached: hideWhenAnchorIsOffscreen,
    avoidCollisions: allowPlacementAxisChange
  }, passthroughProps), getContent(), hasPointer && /*#__PURE__*/_react.default.createElement(PopoverPrimitive.Arrow, {
    width: 12,
    height: 6,
    offset: 6,
    fill: fill
  }))));
}
Popover.propTypes = {
  /**
   * The trigger element.
   */
  children: _propTypes.default.node.isRequired,
  /**
   * Triggers the active state of the popover. When true, the popover appears.
   */
  active: _propTypes.default.bool.isRequired,
  /**
   * The popover content. This can either be a string, valid JSX, or a function
   * returning either.
   */
  content: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.node]).isRequired,
  /**
   * Preferred placement of the popover in relation to the anchor.
   * Adjusted according to available space.
   */
  placement: _propTypes.default.oneOf(['top', 'bottom', 'left', 'right']),
  /**
   * `'center'`, `'start'`, `'end'` Alignment of the popover edge in relation to the trigger element.
   */
  alignment: _propTypes.default.oneOf(['center', 'start', 'end']),
  /**
   * `'light'`, `'dark'`, `'warning'`, or `'error'`.
   */
  coloring: _propTypes.default.oneOf(['light', 'dark', 'warning', 'error']),
  /**
   * `'medium'`, `'small'`, or `'none'`.
   */
  padding: _propTypes.default.oneOf(['medium', 'small', 'none']),
  /**
   * z-index of the popover.
   */
  zIndex: _propTypes.default.number,
  /**
   * Whether or not the popover has a triangle pointer.
   */
  hasPointer: _propTypes.default.bool,
  /**
   * If `true`, the popover will hide when its anchor is scrolled offscreen.
   * By default, the popover will follow its anchor wherever it goes.
   *
   * If your anchor is within an internally scrolling area, you may want to
   * use `true`, so the popover doesn't existing in a disembodied state after
   * its anchor is scrolled away.
   */
  hideWhenAnchorIsOffscreen: _propTypes.default.bool,
  /**
   * If `false`, the popover is *not* allowed to change axes on the anchor when
   * modifying its position to fit available space. By default, popovers on the
   * `left` and `right`, for example, might change to `bottom` is there is
   * neither space on the left nor the right.
   */
  allowPlacementAxisChange: _propTypes.default.bool,
  /**
   * If `false`, clicking outside the popover will not close it.
   * By default, it does.
   */
  clickOutsideCloses: _propTypes.default.bool,
  /**
   * If `false`, hitting Escape will not close the popover. By default, it does.
   */
  escapeCloses: _propTypes.default.bool,
  /**
   * A function called when popover is dismissed. You need to use this callback
   * to remove the Popover from the rendered page.
   */
  onExit: _propTypes.default.func,
  /**
   * A function that returns a DOM node. Use to specify which element should
   * receive focus when popover is first rendered.
   */
  getInitialFocus: _propTypes.default.func,
  /**
   * Number of pixels by which the popover should be offset from its anchor.
   */
  offsetFromAnchor: _propTypes.default.number,
  /**
   * Props to pass directly to popover content options from `@radix-ui/react-popover`.
   */
  passthroughProps: _propTypes.default.object
};