@atlaskit/editor-plugin-mentions/dist/cjs/ui/PopperWrapper.js

Mentions plugin for @atlaskit/editor-core

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
var _typeof = require("@babel/runtime/helpers/typeof");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.Popup = Popup;
exports.RepositionOnUpdate = void 0;
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
var _react = _interopRequireWildcard(require("react"));
var _fg = require("@atlaskit/platform-feature-flags/fg");
var _main = require("@atlaskit/popper/main");
var _portal = _interopRequireDefault(require("@atlaskit/portal/portal"));
var _constants = require("@atlaskit/theme/constants");
var _expVal = require("@atlaskit/tmp-editor-statsig/expVal");
var _useFocusTrap = require("./useFocusTrap");
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); }
// From `packages/design-system/popup/src/reposition-on-update.tsx`
var RepositionOnUpdate = exports.RepositionOnUpdate = function RepositionOnUpdate(_ref) {
  var children = _ref.children,
    update = _ref.update;
  // Ref used here to skip update on first render (when refs haven't been set)
  var isFirstRenderRef = (0, _react.useRef)(true);
  (0, _react.useEffect)(function () {
    if (isFirstRenderRef.current) {
      isFirstRenderRef.current = false;
      return;
    }
    // callback function from popper that repositions pop-up on content Update
    update();
  }, [update, children]);
  return children;
};

/**
 * Hook that attaches a ResizeObserver to the popup container div and calls
 * forceUpdate whenever the popup's size changes. This handles the case where
 * the popup content changes size due to internal state changes (e.g. the agent
 * profile card transitioning from loading → loaded), which cannot be detected
 * via the `children` prop dependency alone.
 */
function useResizeAwarePopper(_ref2) {
  var popupRef = _ref2.popupRef,
    forceUpdate = _ref2.forceUpdate;
  var forceUpdateRef = (0, _react.useRef)(forceUpdate);
  (0, _react.useLayoutEffect)(function () {
    forceUpdateRef.current = forceUpdate;
  }, [forceUpdate]);
  (0, _react.useEffect)(function () {
    // No-op when forceUpdate is not provided (e.g. when the gate is off).
    // This ensures the ResizeObserver is not created unnecessarily.
    if (typeof forceUpdateRef.current !== 'function' && (0, _fg.fg)('platform_editor_agent_mentions_drop_one_fixes')) {
      return;
    }
    if (!popupRef || typeof ResizeObserver === 'undefined') {
      return;
    }
    var observer = new ResizeObserver(function () {
      // forceUpdate is synchronous unlike update() which is debounced.
      // This ensures Popper recalculates position (and flips if needed)
      // immediately when the popup content grows, before the browser repaints.
      if (typeof forceUpdateRef.current === 'function') {
        forceUpdateRef.current();
      }
    });
    observer.observe(popupRef);
    return function () {
      return observer.disconnect();
    };
  }, [popupRef]);
}

/**
 * A popup wrapper to match the behaviour of `@atlaskit/popup`
 *
 * Why not `@atlaskit/popup` directly? It requires a trigger element.
 * We can use this when we have a direct reference to the element
 * and it is more convenient to work directly with the lower level API.
 *
 * @param referenceElement HTMLElement - Replacement reference element to position popper relative to.
 * @param children React.ReactNode - Returns the element to be positioned.
 * @returns React popper component
 */
function Popup(_ref3) {
  var referenceElement = _ref3.referenceElement,
    children = _ref3.children,
    _ref3$placement = _ref3.placement,
    placement = _ref3$placement === void 0 ? 'bottom-end' : _ref3$placement,
    _ref3$offset = _ref3.offset,
    offset = _ref3$offset === void 0 ? [0, 8] : _ref3$offset,
    _ref3$disableFocusTra = _ref3.disableFocusTrap,
    disableFocusTrap = _ref3$disableFocusTra === void 0 ? false : _ref3$disableFocusTra;
  var _React$useState = _react.default.useState(null),
    _React$useState2 = (0, _slicedToArray2.default)(_React$useState, 2),
    targetRef = _React$useState2[0],
    setPopupRef = _React$useState2[1];
  (0, _useFocusTrap.useFocusTrap)({
    targetRef: targetRef,
    enabled: !disableFocusTrap
  });
  return /*#__PURE__*/_react.default.createElement(_react.Suspense, null, /*#__PURE__*/_react.default.createElement(_portal.default, {
    zIndex: _constants.layers.modal()
  }, /*#__PURE__*/_react.default.createElement(_main.Popper, {
    referenceElement: referenceElement,
    offset: offset,
    placement: placement,
    strategy: "fixed"
    // eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
    ,
    modifiers: (0, _expVal.expVal)('platform_editor_agent_mentions', 'isEnabled', false) ? [{
      name: 'flip',
      options: {
        rootBoundary: 'viewport',
        padding: 5
      }
    }, {
      name: 'preventOverflow',
      options: {
        rootBoundary: 'viewport',
        padding: 5
      }
    }] : []
  }, function (_ref4) {
    var ref = _ref4.ref,
      style = _ref4.style,
      update = _ref4.update,
      forceUpdate = _ref4.forceUpdate;
    return /*#__PURE__*/_react.default.createElement(PopupInner, {
      ref: ref,
      style: style,
      update: update,
      forceUpdate: (0, _expVal.expVal)('platform_editor_agent_mentions', 'isEnabled', false) ? forceUpdate : undefined,
      setPopupRef: setPopupRef
    }, children);
  })));
}
var PopupInner = /*#__PURE__*/_react.default.forwardRef(function (_ref5, _ref6) {
  var style = _ref5.style,
    update = _ref5.update,
    forceUpdate = _ref5.forceUpdate,
    setPopupRef = _ref5.setPopupRef,
    children = _ref5.children;
  var _React$useState3 = _react.default.useState(null),
    _React$useState4 = (0, _slicedToArray2.default)(_React$useState3, 2),
    popupDiv = _React$useState4[0],
    setPopupDiv = _React$useState4[1];
  useResizeAwarePopper({
    popupRef: popupDiv,
    forceUpdate: forceUpdate
  });
  return /*#__PURE__*/_react.default.createElement("div", {
    ref: function ref(node) {
      if (node) {
        if (typeof _ref6 === 'function') {
          _ref6(node);
        } else if (_ref6) {
          _ref6.current = node;
        }
        setPopupRef(node);
        setPopupDiv(node);
      }
    }
    // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
    ,
    style: style
  }, /*#__PURE__*/_react.default.createElement(RepositionOnUpdate, {
    update: update
  }, children));
});