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

A popup displays brief content in an overlay.

import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
import { useState } from 'react';
import { fg } from '@atlaskit/platform-feature-flags/fg';
import { UNSAFE_useMediaQuery as useMediaQuery } from '@atlaskit/primitives/compiled';

/**
 * **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.
 */
export function usePopupAppearance(_ref) {
  var _appearance = _ref.appearance,
    _shouldRenderToParent = _ref.shouldRenderToParent;
  var canBecomeModal = _appearance === 'UNSAFE_modal-below-sm';

  /**
   * This gate removes unnecessary state changes across the below-sm boundary
   * The state change is only needed if the popup can become a modal - and this is maintained
   */
  var shouldUseMediaQuery = !fg('platform_dst_popup_media_query_perf_fix') || canBecomeModal;
  var mq = useMediaQuery('below.sm', shouldUseMediaQuery ? function (e) {
    setIsSmallViewport(!!e.matches);
  } : undefined);
  var _useState = useState(!!(mq !== null && mq !== void 0 && mq.matches)),
    _useState2 = _slicedToArray(_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
  };
}