@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, useEffect, Suspense } from 'react';
import { Popper as ReactPopper } from '@atlaskit/popper';
import Portal from '@atlaskit/portal';
import { layers } from '@atlaskit/theme/constants';
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;
};

/**
 * 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(_ref2) {
  var referenceElement = _ref2.referenceElement,
    children = _ref2.children;
  var _React$useState = React.useState(null),
    _React$useState2 = _slicedToArray(_React$useState, 2),
    targetRef = _React$useState2[0],
    setPopupRef = _React$useState2[1];
  useFocusTrap({
    targetRef: targetRef
  });
  return /*#__PURE__*/React.createElement(Suspense, null, /*#__PURE__*/React.createElement(Portal, {
    zIndex: layers.modal()
  }, /*#__PURE__*/React.createElement(ReactPopper, {
    referenceElement: referenceElement
    // eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
    ,
    offset: [0, 8],
    placement: "bottom-end",
    strategy: "fixed"
  }, function (_ref3) {
    var _ref4 = _ref3.ref,
      style = _ref3.style,
      update = _ref3.update;
    return /*#__PURE__*/React.createElement("div", {
      ref: function ref(node) {
        if (node) {
          if (typeof _ref4 === 'function') {
            _ref4(node);
          } else {
            _ref4.current = node;
          }
          setPopupRef(node);
        }
      }
      // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
      ,
      style: style
    }, /*#__PURE__*/React.createElement(RepositionOnUpdate, {
      update: update
    }, children));
  })));
}