@atlaskit/popup/dist/cjs/compositional/popup-content.js

A popup displays brief content in an overlay.

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
var _typeof = require("@babel/runtime/helpers/typeof");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.PopupContent = PopupContent;
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _react = _interopRequireWildcard(require("react"));
var _layering = require("@atlaskit/layering/layering");
var _useNotifyOpenLayerObserver = require("@atlaskit/layering/use-notify-open-layer-observer");
var _fg = require("@atlaskit/platform-feature-flags/fg");
var _portal = _interopRequireDefault(require("@atlaskit/portal/portal"));
var _popperWrapper = _interopRequireDefault(require("../popper-wrapper"));
var _useAppearance = require("../use-appearance");
var _idContext = require("./id-context");
var _isOpenContext = require("./is-open-context");
var _popupContentTopLayer = require("./popup-content-top-layer");
var _triggerRefContext = require("./trigger-ref-context");
var _useEnsureIsInsidePopup = require("./use-ensure-is-inside-popup");
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
var defaultLayer = 400;
var shouldDisableGpuAccelerationModifiers = [{
  name: 'computeStyles',
  options: {
    gpuAcceleration: false
  }
}];
/**
 * Legacy (Popper + Portal) implementation of the compositional PopupContent.
 *
 * Renders when the `platform-dst-top-layer` flag is off. This component owns
 * the open layer observer registration, which on the top-layer path is handled
 * by the `Popover` primitive inside `PopupContentTopLayer` instead.
 */
function PopupContentLegacy(_ref) {
  var xcss = _ref.xcss,
    _ref$appearance = _ref.appearance,
    inAppearance = _ref$appearance === void 0 ? 'default' : _ref$appearance,
    children = _ref.children,
    boundary = _ref.boundary,
    offset = _ref.offset,
    strategy = _ref.strategy,
    onClose = _ref.onClose,
    testId = _ref.testId,
    _ref$rootBoundary = _ref.rootBoundary,
    rootBoundary = _ref$rootBoundary === void 0 ? 'viewport' : _ref$rootBoundary,
    _ref$shouldFlip = _ref.shouldFlip,
    shouldFlip = _ref$shouldFlip === void 0 ? true : _ref$shouldFlip,
    _ref$placement = _ref.placement,
    placement = _ref$placement === void 0 ? 'auto' : _ref$placement,
    fallbackPlacements = _ref.fallbackPlacements,
    popupComponent = _ref.popupComponent,
    _ref$autoFocus = _ref.autoFocus,
    autoFocus = _ref$autoFocus === void 0 ? true : _ref$autoFocus,
    _ref$zIndex = _ref.zIndex,
    zIndex = _ref$zIndex === void 0 ? defaultLayer : _ref$zIndex,
    _ref$shouldUseCapture = _ref.shouldUseCaptureOnOutsideClick,
    shouldUseCaptureOnOutsideClick = _ref$shouldUseCapture === void 0 ? false : _ref$shouldUseCapture,
    shouldIgnoreCloseEvent = _ref.shouldIgnoreCloseEvent,
    inShouldRenderToParent = _ref.shouldRenderToParent,
    _ref$shouldDisableFoc = _ref.shouldDisableFocusLock,
    shouldDisableFocusLock = _ref$shouldDisableFoc === void 0 ? false : _ref$shouldDisableFoc,
    shouldFitContainer = _ref.shouldFitContainer,
    shouldFitViewport = _ref.shouldFitViewport,
    _ref$shouldDisableGpu = _ref.shouldDisableGpuAcceleration,
    shouldDisableGpuAcceleration = _ref$shouldDisableGpu === void 0 ? false : _ref$shouldDisableGpu,
    role = _ref.role,
    titleId = _ref.titleId,
    isOpen = _ref.isOpen,
    id = _ref.id;
  var triggerRef = (0, _react.useContext)(_triggerRefContext.TriggerRefContext);
  var _usePopupAppearance = (0, _useAppearance.usePopupAppearance)({
      appearance: inAppearance,
      shouldRenderToParent: inShouldRenderToParent
    }),
    appearance = _usePopupAppearance.appearance,
    shouldRenderToParent = _usePopupAppearance.shouldRenderToParent;
  var handleOpenLayerObserverCloseSignal = (0, _react.useCallback)(function () {
    onClose === null || onClose === void 0 || onClose(null);
  }, [onClose]);
  (0, _useNotifyOpenLayerObserver.useNotifyOpenLayerObserver)({
    isOpen: isOpen,
    onClose: handleOpenLayerObserverCloseSignal,
    type: 'popup'
  });
  if (!isOpen) {
    return null;
  }
  var popperWrapper = /*#__PURE__*/_react.default.createElement(_layering.Layering, {
    isDisabled: false
  }, /*#__PURE__*/_react.default.createElement(_popperWrapper.default, {
    xcss: xcss,
    appearance: appearance,
    content: children,
    isOpen: isOpen,
    placement: placement,
    fallbackPlacements: fallbackPlacements,
    boundary: boundary,
    rootBoundary: rootBoundary,
    shouldFlip: shouldFlip,
    offset: offset,
    popupComponent: popupComponent,
    id: id,
    testId: testId,
    onClose: onClose,
    autoFocus: autoFocus,
    shouldFitContainer: shouldFitContainer,
    shouldUseCaptureOnOutsideClick: shouldUseCaptureOnOutsideClick,
    shouldIgnoreCloseEvent: shouldIgnoreCloseEvent,
    shouldRenderToParent: shouldRenderToParent,
    shouldDisableFocusLock: shouldDisableFocusLock,
    triggerRef: triggerRef,
    strategy: strategy,
    shouldFitViewport: shouldFitViewport,
    modifiers: shouldDisableGpuAcceleration ? shouldDisableGpuAccelerationModifiers : undefined,
    role: role,
    titleId: titleId
  }));
  if (shouldRenderToParent) {
    return popperWrapper;
  }
  return /*#__PURE__*/_react.default.createElement(_portal.default, {
    zIndex: zIndex
  }, popperWrapper);
}

/**
 * __Popup content__
 *
 * Popup content is the component that renders the content of the popup.
 *
 * It must be a child of the Popup component.
 */
function PopupContent(props) {
  (0, _useEnsureIsInsidePopup.useEnsureIsInsidePopup)();
  var isOpen = (0, _react.useContext)(_isOpenContext.IsOpenContext);
  var id = (0, _react.useContext)(_idContext.IdContext);

  // Select the rendering implementation at the component boundary rather than
  // gating hooks inside a single component. Each implementation owns its own
  // hooks, so a runtime feature-flag change swaps component types (a clean
  // remount) instead of changing the hook order of a mounted component.
  //
  // Forwarding the full props onto the chosen implementation is intentional:
  // both implementations declare explicit prop types, so the forward is type
  // checked rather than an unbounded API.
  if ((0, _fg.fg)('platform-dst-top-layer')) {
    // The top-layer Popover registers with the open layer observer itself.
    // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props -- intentional forward to a typed implementation
    return /*#__PURE__*/_react.default.createElement(_popupContentTopLayer.PopupContentTopLayer, (0, _extends2.default)({}, props, {
      isOpen: isOpen,
      id: id
    }));
  }

  // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props -- intentional forward to a typed implementation
  return /*#__PURE__*/_react.default.createElement(PopupContentLegacy, (0, _extends2.default)({}, props, {
    isOpen: isOpen,
    id: id
  }));
}