@atlaskit/popup/dist/cjs/popup.js

A popup displays brief content in an overlay.

/* popup.tsx generated by @compiled/babel-plugin v3.0.2 */
"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;
require("./popup.compiled.css");
var _react = _interopRequireWildcard(require("react"));
var React = _react;
var _runtime = require("@compiled/react/runtime");
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
var _useId = require("@atlaskit/ds-lib/use-id");
var _layering = require("@atlaskit/layering/layering");
var _useNotifyOpenLayerObserver = require("@atlaskit/layering/use-notify-open-layer-observer");
var _exitingPersistence = _interopRequireDefault(require("@atlaskit/motion/exiting-persistence"));
var _fg = require("@atlaskit/platform-feature-flags/fg");
var _manager = require("@atlaskit/popper/manager");
var _reference = require("@atlaskit/popper/reference");
var _portal = _interopRequireDefault(require("@atlaskit/portal/portal"));
var _compiled = require("@atlaskit/primitives/compiled");
var _popperWrapper = _interopRequireDefault(require("./popper-wrapper"));
var _popupTopLayer = require("./popup-top-layer");
var _useAppearance = require("./use-appearance");
var _useGetMemoizedMergedTriggerRef = require("./use-get-memoized-merged-trigger-ref");
var _useGetMemoizedMergedTriggerRefNew = require("./use-get-memoized-merged-trigger-ref-new");
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); }
/* eslint-disable @repo/internal/react/require-jsdoc */
var defaultLayer = 400;
var wrapperStyles = {
  root: "_kqswh2mm"
};
var PopupLegacy = function PopupLegacy(props) {
  var xcss = props.xcss,
    _props$appearance = props.appearance,
    inAppearance = _props$appearance === void 0 ? 'default' : _props$appearance,
    isOpen = props.isOpen,
    providedId = props.id,
    offset = props.offset,
    testId = props.testId,
    trigger = props.trigger,
    content = props.content,
    onClose = props.onClose,
    boundary = props.boundary,
    _props$rootBoundary = props.rootBoundary,
    rootBoundary = _props$rootBoundary === void 0 ? 'viewport' : _props$rootBoundary,
    _props$shouldFlip = props.shouldFlip,
    shouldFlip = _props$shouldFlip === void 0 ? true : _props$shouldFlip,
    _props$placement = props.placement,
    placement = _props$placement === void 0 ? 'auto' : _props$placement,
    fallbackPlacements = props.fallbackPlacements,
    PopupContainer = props.popupComponent,
    _props$autoFocus = props.autoFocus,
    autoFocus = _props$autoFocus === void 0 ? true : _props$autoFocus,
    _props$zIndex = props.zIndex,
    zIndex = _props$zIndex === void 0 ? defaultLayer : _props$zIndex,
    _props$shouldUseCaptu = props.shouldUseCaptureOnOutsideClick,
    shouldUseCaptureOnOutsideClick = _props$shouldUseCaptu === void 0 ? false : _props$shouldUseCaptu,
    shouldIgnoreCloseEvent = props.shouldIgnoreCloseEvent,
    _props$shouldRenderTo = props.shouldRenderToParent,
    inShouldRenderToParent = _props$shouldRenderTo === void 0 ? false : _props$shouldRenderTo,
    _props$shouldFitConta = props.shouldFitContainer,
    shouldFitContainer = _props$shouldFitConta === void 0 ? false : _props$shouldFitConta,
    _props$shouldDisableF = props.shouldDisableFocusLock,
    shouldDisableFocusLock = _props$shouldDisableF === void 0 ? false : _props$shouldDisableF,
    _props$shouldReturnFo = props.shouldReturnFocus,
    shouldReturnFocus = _props$shouldReturnFo === void 0 ? true : _props$shouldReturnFo,
    strategy = props.strategy,
    role = props.role,
    label = props.label,
    titleId = props.titleId,
    modifiers = props.modifiers,
    shouldFitViewport = props.shouldFitViewport;
  var _useState = (0, _react.useState)(null),
    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
    triggerRef = _useState2[0],
    setTriggerRef = _useState2[1];
  var getMergedTriggerRef = (0, _useGetMemoizedMergedTriggerRef.useGetMemoizedMergedTriggerRef)();
  var getMergedTriggerRefNew = (0, _useGetMemoizedMergedTriggerRefNew.useGetMemoizedMergedTriggerRefNew)();
  var generatedId = (0, _useId.useId)();
  var _usePopupAppearance = (0, _useAppearance.usePopupAppearance)({
      appearance: inAppearance,
      shouldRenderToParent: inShouldRenderToParent
    }),
    appearance = _usePopupAppearance.appearance,
    shouldRenderToParent = _usePopupAppearance.shouldRenderToParent;
  var id = providedId || generatedId;
  var handleOpenLayerObserverCloseSignal = (0, _react.useCallback)(function () {
    onClose === null || onClose === void 0 || onClose(null);
  }, [onClose]);
  (0, _useNotifyOpenLayerObserver.useNotifyOpenLayerObserver)({
    isOpen: isOpen,
    onClose: handleOpenLayerObserverCloseSignal,
    type: 'popup'
  });

  // `xcss` is part of Popup's public API and is forwarded as-is to
  // the internal PopperWrapper, which rebuilds the inner styles. We
  // re-bind via a property accessor on a stable object so the
  // design-system css-prop lint rule's identifier-shape check no
  // longer flags it (avoiding a ratcheted lint suppression here).
  var xcssPassthrough = {
    value: xcss
  };
  var renderPopperWrapper = /*#__PURE__*/React.createElement(_layering.Layering, {
    isDisabled: false
  }, /*#__PURE__*/React.createElement(_popperWrapper.default, {
    xcss: xcssPassthrough.value,
    appearance: appearance,
    content: content,
    isOpen: isOpen,
    placement: placement,
    fallbackPlacements: fallbackPlacements,
    boundary: boundary,
    rootBoundary: rootBoundary,
    shouldFlip: shouldFlip,
    offset: offset,
    popupComponent: PopupContainer,
    id: id,
    testId: testId,
    onClose: onClose,
    autoFocus: autoFocus,
    shouldUseCaptureOnOutsideClick: shouldUseCaptureOnOutsideClick,
    shouldIgnoreCloseEvent: shouldIgnoreCloseEvent,
    shouldRenderToParent: shouldRenderToParent || shouldFitContainer,
    shouldFitContainer: shouldFitContainer,
    shouldDisableFocusLock: shouldDisableFocusLock,
    shouldReturnFocus: shouldReturnFocus,
    triggerRef: triggerRef,
    zIndex: zIndex,
    strategy: shouldFitContainer ? 'absolute' : strategy,
    role: role,
    label: label,
    titleId: titleId,
    modifiers: modifiers,
    shouldFitViewport: shouldFitViewport
  }));
  var popupContent = /*#__PURE__*/React.createElement(_manager.Manager, null, /*#__PURE__*/React.createElement(_reference.Reference, null, function (_ref) {
    var ref = _ref.ref;
    return trigger({
      ref: !(0, _fg.fg)('platform-design-system-popup-ref') ? getMergedTriggerRef(ref, setTriggerRef, isOpen) : getMergedTriggerRefNew(ref, setTriggerRef),
      'aria-controls': isOpen ? id : undefined,
      'aria-expanded': isOpen,
      'aria-haspopup': role === 'dialog' && (0, _fg.fg)('platform_dst_popup-disable-focuslock') ? 'dialog' : true
    });
  }), !(0, _fg.fg)('platform-dst-motion-uplift-popup') && isOpen && (shouldRenderToParent || shouldFitContainer ? renderPopperWrapper : /*#__PURE__*/React.createElement(_portal.default, {
    zIndex: zIndex
  }, renderPopperWrapper)), (0, _fg.fg)('platform-dst-motion-uplift-popup') && /*#__PURE__*/React.createElement(_exitingPersistence.default, {
    appear: true
  }, isOpen && (shouldRenderToParent || shouldFitContainer ? renderPopperWrapper : /*#__PURE__*/React.createElement(_portal.default, {
    zIndex: zIndex
  }, renderPopperWrapper))));
  if (shouldFitContainer) {
    return /*#__PURE__*/React.createElement(_compiled.Box, {
      xcss: wrapperStyles.root
    }, popupContent);
  }
  return popupContent;
};
var Popup = exports.Popup = /*#__PURE__*/(0, _react.memo)(function (props) {
  // Choose the rendering implementation at the component boundary rather than
  // gating hooks inside a single component. Each implementation owns its own
  // hooks unconditionally, so a runtime feature-flag change swaps component
  // types (a clean remount) instead of changing the hook order of a mounted
  // component.
  if ((0, _fg.fg)('platform-dst-top-layer')) {
    // Pass the original props object to preserve the discriminated union
    // (shouldFitContainer: true vs false) that is lost after destructuring.
    return /*#__PURE__*/React.createElement(_popupTopLayer.PopupTopLayer, props);
  }
  return /*#__PURE__*/React.createElement(PopupLegacy, props);
});