@atlaskit/editor-plugin-mentions 14.5.17 → 14.5.18

package/CHANGELOG.md

@@ -1,5 +1,12 @@
 # @atlaskit/editor-plugin-mentions
 
+## 14.5.18
+
+### Patch Changes
+
+- [`2395ac6f0f1e1`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/2395ac6f0f1e1) -
+  Ensures agent profile card remains within viewport
+
 ## 14.5.17
 
 ### Patch Changes

package/dist/cjs/pm-plugins/main.js

@@ -53,7 +53,7 @@ var AI_STREAMING_TRANSFORMATION_META_KEY = 'isAIStreamingTransformation';
 var AGENT_MENTION_INACTIVITY_MS = 3000;
 var MAX_PENDING_TYPED_AGENT_MENTION_FOCUS_DEFERS = 20;
 var PACKAGE_NAME = "@atlaskit/editor-plugin-mentions";
-var PACKAGE_VERSION = "14.5.16";
+var PACKAGE_VERSION = "14.5.17";
 var setProvider = function setProvider(provider) {
   return function (state, dispatch) {
     if (dispatch) {

package/dist/cjs/ui/PopperWrapper.js

@@ -12,6 +12,7 @@ var _react = _interopRequireWildcard(require("react"));
 var _popper = require("@atlaskit/popper");
 var _portal = _interopRequireDefault(require("@atlaskit/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`
@@ -31,6 +32,39 @@ var RepositionOnUpdate = exports.RepositionOnUpdate = function RepositionOnUpdat
   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 () {
+    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`
  *
@@ -42,9 +76,9 @@ var RepositionOnUpdate = exports.RepositionOnUpdate = function RepositionOnUpdat
  * @param children React.ReactNode - Returns the element to be positioned.
  * @returns React popper component
  */
-function Popup(_ref2) {
-  var referenceElement = _ref2.referenceElement,
-    children = _ref2.children;
+function Popup(_ref3) {
+  var referenceElement = _ref3.referenceElement,
+    children = _ref3.children;
   var _React$useState = _react.default.useState(null),
     _React$useState2 = (0, _slicedToArray2.default)(_React$useState, 2),
     targetRef = _React$useState2[0],
@@ -61,26 +95,65 @@ function Popup(_ref2) {
     offset: [0, 8],
     placement: "bottom-end",
     strategy: "fixed"
-  }, function (_ref3) {
-    var _ref4 = _ref3.ref,
-      style = _ref3.style,
-      update = _ref3.update;
-    return /*#__PURE__*/_react.default.createElement("div", {
-      ref: function ref(node) {
-        if (node) {
-          if (typeof _ref4 === 'function') {
-            _ref4(node);
-          } else {
-            _ref4.current = node;
-          }
-          setPopupRef(node);
-        }
+    // 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
       }
-      // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
-      ,
-      style: style
-    }, /*#__PURE__*/_react.default.createElement(RepositionOnUpdate, {
-      update: update
-    }, children));
+    }, {
+      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));
+});

package/dist/es2019/pm-plugins/main.js

@@ -38,7 +38,7 @@ const AI_STREAMING_TRANSFORMATION_META_KEY = 'isAIStreamingTransformation';
 const AGENT_MENTION_INACTIVITY_MS = 3000;
 const MAX_PENDING_TYPED_AGENT_MENTION_FOCUS_DEFERS = 20;
 const PACKAGE_NAME = "@atlaskit/editor-plugin-mentions";
-const PACKAGE_VERSION = "14.5.16";
+const PACKAGE_VERSION = "14.5.17";
 const setProvider = provider => (state, dispatch) => {
   if (dispatch) {
     dispatch(state.tr.setMeta(mentionPluginKey, {

package/dist/es2019/ui/PopperWrapper.js

@@ -1,7 +1,8 @@
-import React, { useRef, useEffect, Suspense } from 'react';
+import React, { useRef, useLayoutEffect, useEffect, Suspense } from 'react';
 import { Popper as ReactPopper } from '@atlaskit/popper';
 import Portal from '@atlaskit/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 = ({
@@ -21,6 +22,38 @@ export const RepositionOnUpdate = ({
   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(() => {
+    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`
  *
@@ -49,19 +82,56 @@ export function Popup({
     offset: [0, 8],
     placement: "bottom-end",
     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
-  }) => /*#__PURE__*/React.createElement("div", {
+    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 {
+        } else if (ref) {
           ref.current = node;
         }
         setPopupRef(node);
+        setPopupDiv(node);
       }
     }
     // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
@@ -69,5 +139,5 @@ export function Popup({
     style: style
   }, /*#__PURE__*/React.createElement(RepositionOnUpdate, {
     update: update
-  }, children)))));
-}
+  }, children));
+});

package/dist/esm/pm-plugins/main.js

@@ -45,7 +45,7 @@ var AI_STREAMING_TRANSFORMATION_META_KEY = 'isAIStreamingTransformation';
 var AGENT_MENTION_INACTIVITY_MS = 3000;
 var MAX_PENDING_TYPED_AGENT_MENTION_FOCUS_DEFERS = 20;
 var PACKAGE_NAME = "@atlaskit/editor-plugin-mentions";
-var PACKAGE_VERSION = "14.5.16";
+var PACKAGE_VERSION = "14.5.17";
 var setProvider = function setProvider(provider) {
   return function (state, dispatch) {
     if (dispatch) {

package/dist/esm/ui/PopperWrapper.js

@@ -1,8 +1,9 @@
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
-import React, { useRef, useEffect, Suspense } from 'react';
+import React, { useRef, useLayoutEffect, useEffect, Suspense } from 'react';
 import { Popper as ReactPopper } from '@atlaskit/popper';
 import Portal from '@atlaskit/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) {
@@ -21,6 +22,39 @@ export var RepositionOnUpdate = function RepositionOnUpdate(_ref) {
   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 () {
+    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`
  *
@@ -32,9 +66,9 @@ export var RepositionOnUpdate = function RepositionOnUpdate(_ref) {
  * @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;
+export function Popup(_ref3) {
+  var referenceElement = _ref3.referenceElement,
+    children = _ref3.children;
   var _React$useState = React.useState(null),
     _React$useState2 = _slicedToArray(_React$useState, 2),
     targetRef = _React$useState2[0],
@@ -51,26 +85,65 @@ export function Popup(_ref2) {
     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 @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
       }
-      // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
-      ,
-      style: style
-    }, /*#__PURE__*/React.createElement(RepositionOnUpdate, {
-      update: update
-    }, children));
+    }, {
+      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));
+});

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-mentions",
-	"version": "14.5.17",
+	"version": "14.5.18",
 	"description": "Mentions plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",