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

Mentions plugin for @atlaskit/editor-core

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 const RepositionOnUpdate = ({
  children,
  update
}) => {
  // Ref used here to skip update on first render (when refs haven't been set)
  const isFirstRenderRef = useRef(true);
  useEffect(() => {
    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({
  popupRef,
  forceUpdate
}) {
  const forceUpdateRef = useRef(forceUpdate);
  useLayoutEffect(() => {
    forceUpdateRef.current = forceUpdate;
  }, [forceUpdate]);
  useEffect(() => {
    // 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;
    }
    const observer = new ResizeObserver(() => {
      // 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 () => 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({
  referenceElement,
  children,
  placement = 'bottom-end',
  offset = [0, 8],
  disableFocusTrap = false
}) {
  const [targetRef, setPopupRef] = React.useState(null);
  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
      }
    }] : []
  }, ({
    ref,
    style,
    update,
    forceUpdate
  }) => /*#__PURE__*/React.createElement(PopupInner, {
    ref: ref,
    style: style,
    update: update,
    forceUpdate: expVal('platform_editor_agent_mentions', 'isEnabled', false) ? forceUpdate : undefined,
    setPopupRef: setPopupRef
  }, children))));
}
const PopupInner = /*#__PURE__*/React.forwardRef(({
  style,
  update,
  forceUpdate,
  setPopupRef,
  children
}, ref) => {
  const [popupDiv, setPopupDiv] = React.useState(null);
  useResizeAwarePopper({
    popupRef: popupDiv,
    forceUpdate
  });
  return /*#__PURE__*/React.createElement("div", {
    ref: node => {
      if (node) {
        if (typeof ref === 'function') {
          ref(node);
        } else if (ref) {
          ref.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));
});