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

Mentions plugin for @atlaskit/editor-core

import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
import React, { useRef, useLayoutEffect, useEffect, Suspense } from 'react';
import { fg } from '@atlaskit/platform-feature-flags/fg';
import { Popper as ReactPopper } from '@atlaskit/popper/main';
import Portal from '@atlaskit/portal/portal';
import { layers } from '@atlaskit/theme/constants';
import { expVal } from '@atlaskit/tmp-editor-statsig/expVal';
import { useFocusTrap } from './useFocusTrap';
// From `packages/design-system/popup/src/reposition-on-update.tsx`
export var 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 = useRef(true);
  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 = useRef(forceUpdate);
  useLayoutEffect(function () {
    forceUpdateRef.current = forceUpdate;
  }, [forceUpdate]);
  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' && 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
 */
export 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.useState(null),
    _React$useState2 = _slicedToArray(_React$useState, 2),
    targetRef = _React$useState2[0],
    setPopupRef = _React$useState2[1];
  useFocusTrap({
    targetRef: targetRef,
    enabled: !disableFocusTrap
  });
  return /*#__PURE__*/React.createElement(Suspense, null, /*#__PURE__*/React.createElement(Portal, {
    zIndex: layers.modal()
  }, /*#__PURE__*/React.createElement(ReactPopper, {
    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: 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.createElement(PopupInner, {
      ref: ref,
      style: style,
      update: update,
      forceUpdate: expVal('platform_editor_agent_mentions', 'isEnabled', false) ? forceUpdate : undefined,
      setPopupRef: setPopupRef
    }, children);
  })));
}
var PopupInner = /*#__PURE__*/React.forwardRef(function (_ref5, _ref6) {
  var style = _ref5.style,
    update = _ref5.update,
    forceUpdate = _ref5.forceUpdate,
    setPopupRef = _ref5.setPopupRef,
    children = _ref5.children;
  var _React$useState3 = React.useState(null),
    _React$useState4 = _slicedToArray(_React$useState3, 2),
    popupDiv = _React$useState4[0],
    setPopupDiv = _React$useState4[1];
  useResizeAwarePopper({
    popupRef: popupDiv,
    forceUpdate: forceUpdate
  });
  return /*#__PURE__*/React.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.createElement(RepositionOnUpdate, {
    update: update
  }, children));
});