@atlaskit/popup/dist/cjs/use-appearance.js

A popup displays brief content in an overlay.

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.usePopupAppearance = usePopupAppearance;
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
var _react = require("react");
var _useMediaQuery = require("@atlaskit/primitives/compiled/use-media-query");
/**
 * **usePopupAppearance()**
 *
 * Abstracts away calculating the appearance for a popup including if it should
 * be portalled or not, this is done to ensure that if the popup needs to render
 * as a modal that it is also forcibly portalled. If it's not portalled when rendering
 * as a modal it will appear below the top bar.
 */
function usePopupAppearance(_ref) {
  var _appearance = _ref.appearance,
    _shouldRenderToParent = _ref.shouldRenderToParent;
  var canBecomeModal = _appearance === 'UNSAFE_modal-below-sm';

  /**
   * Only subscribe to the below-sm boundary when the popup can become a modal,
   * to avoid unnecessary state changes for every other popup
   */
  var mq = (0, _useMediaQuery.UNSAFE_useMediaQuery)('below.sm', canBecomeModal ? function (e) {
    setIsSmallViewport(!!e.matches);
  } : undefined);
  var _useState = (0, _react.useState)(!!(mq !== null && mq !== void 0 && mq.matches)),
    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
    isSmallViewport = _useState2[0],
    setIsSmallViewport = _useState2[1];
  var appearance = canBecomeModal && isSmallViewport ? 'UNSAFE_modal-below-sm' : 'default';
  var shouldRenderToParent = _shouldRenderToParent && appearance === 'default';
  return {
    appearance: appearance,
    shouldRenderToParent: shouldRenderToParent
  };
}