@atlaskit/popup/dist/cjs/compositional/popup.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.Popup = void 0;
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
var _react = _interopRequireWildcard(require("react"));
var _useId = require("@atlaskit/ds-lib/use-id");
var _fg = require("@atlaskit/platform-feature-flags/fg");
var _manager = require("@atlaskit/popper/manager");
var _idContext = require("./id-context");
var _isInsidePopupContext = require("./is-inside-popup-context");
var _isOpenContext = require("./is-open-context");
var _roleContext = require("./role-context");
var _setTriggerRefContext = require("./set-trigger-ref-context");
var _triggerRefContext = require("./trigger-ref-context");
var _triggerRefObjectContext = require("./trigger-ref-object-context");
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); }
/**
 * __Popup__
 *
 * Popup is a composable component that provides the context for the trigger and content components.
 *
 * Usage example:
 * ```jsx
 * <Popup>
 *   <PopupTrigger>
 *     {(props) => (
 *       <button type="button" {...props}>Click me</button>
 *      )}
 *   </PopupTrigger>
 *   <PopupContent>
 *     {(props) => <div>Hello world</div>}
 *   </PopupContent>
 * </Popup>
 * ```
 */
var Popup = exports.Popup = function Popup(_ref) {
  var children = _ref.children,
    providedId = _ref.id,
    _ref$isOpen = _ref.isOpen,
    isOpen = _ref$isOpen === void 0 ? false : _ref$isOpen,
    role = _ref.role;
  var _useState = (0, _react.useState)(null),
    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
    triggerRef = _useState2[0],
    setTriggerRef = _useState2[1];

  // When the top-layer flag is on, we maintain a stable RefObject for the
  // trigger element, provided through TriggerRefObjectContext. Unlike the
  // state-based triggerRef (which causes a re-render when the trigger mounts),
  // this ref has a stable identity so useAnchoredPopover's useLayoutEffect dep
  // array never changes — the effect runs once on mount when the trigger element
  // is already populated. PopupTrigger sets this ref directly instead of calling
  // the state setter, avoiding an unnecessary re-render.
  var triggerRefObject = (0, _react.useRef)(null);
  var generatedId = (0, _useId.useId)();
  var id = providedId || generatedId;
  return /*#__PURE__*/_react.default.createElement(_roleContext.RoleContext.Provider, {
    value: role
  }, /*#__PURE__*/_react.default.createElement(_isInsidePopupContext.EnsureIsInsidePopupContext.Provider, {
    value: true
  }, /*#__PURE__*/_react.default.createElement(_idContext.IdContext.Provider, {
    value: id
  }, /*#__PURE__*/_react.default.createElement(_triggerRefContext.TriggerRefContext.Provider, {
    value: triggerRef
  }, /*#__PURE__*/_react.default.createElement(_setTriggerRefContext.SetTriggerRefContext.Provider, {
    value: setTriggerRef
  }, /*#__PURE__*/_react.default.createElement(_isOpenContext.IsOpenContext.Provider, {
    value: isOpen
  }, (0, _fg.fg)('platform-dst-top-layer') ?
  /*#__PURE__*/
  // Skip Popper's <Manager> when Top Layer is being used.
  _react.default.createElement(_triggerRefObjectContext.TriggerRefObjectContext.Provider, {
    value: triggerRefObject
  }, children) : /*#__PURE__*/_react.default.createElement(_manager.Manager, null, children)))))));
};