@atlaskit/editor-plugin-mentions 4.4.1 → 4.4.2

package/CHANGELOG.md

@@ -1,5 +1,14 @@
 # @atlaskit/editor-plugin-mentions
 
+## 4.4.2
+
+### Patch Changes
+
+- [#143385](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/143385)
+  [`8c63cbda9b29f`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/8c63cbda9b29f) -
+  Fix initial position of mention profile card popup.
+- Updated dependencies
+
 ## 4.4.1
 
 ### Patch Changes

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

@@ -26,7 +26,7 @@ var ACTIONS = exports.ACTIONS = {
   SET_PROVIDER: 'SET_PROVIDER'
 };
 var PACKAGE_NAME = "@atlaskit/editor-plugin-mentions";
-var PACKAGE_VERSION = "4.4.1";
+var PACKAGE_VERSION = "4.4.2";
 var setProvider = function setProvider(provider) {
   return function (state, dispatch) {
     if (dispatch) {

package/dist/cjs/ui/PopperWrapper.js

@@ -1,15 +1,37 @@
 "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 = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 var _popper = require("@atlaskit/popper");
 var _portal = _interopRequireDefault(require("@atlaskit/portal"));
+var _constants = require("@atlaskit/theme/constants");
 var _useFocusTrap = require("./useFocusTrap");
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+// 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;
+};
+
 /**
  * A popup wrapper to match the behaviour of `@atlaskit/popup`
  *
@@ -21,9 +43,9 @@ var _useFocusTrap = require("./useFocusTrap");
  * @param children React.ReactNode - Returns the element to be positioned.
  * @returns React popper component
  */
-function Popup(_ref) {
-  var referenceElement = _ref.referenceElement,
-    children = _ref.children;
+function Popup(_ref2) {
+  var referenceElement = _ref2.referenceElement,
+    children = _ref2.children;
   var _React$useState = _react.default.useState(null),
     _React$useState2 = (0, _slicedToArray2.default)(_React$useState, 2),
     targetRef = _React$useState2[0],
@@ -31,21 +53,24 @@ function Popup(_ref) {
   (0, _useFocusTrap.useFocusTrap)({
     targetRef: targetRef
   });
-  return /*#__PURE__*/_react.default.createElement(_portal.default, null, /*#__PURE__*/_react.default.createElement(_popper.Popper, {
+  return /*#__PURE__*/_react.default.createElement(_portal.default, {
+    zIndex: _constants.layers.modal()
+  }, /*#__PURE__*/_react.default.createElement(_popper.Popper, {
     referenceElement: referenceElement,
     offset: [0, 8],
     placement: "bottom-end",
     strategy: "fixed"
-  }, function (_ref2) {
-    var _ref3 = _ref2.ref,
-      style = _ref2.style;
+  }, 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 _ref3 === 'function') {
-            _ref3(node);
+          if (typeof _ref4 === 'function') {
+            _ref4(node);
           } else {
-            _ref3.current = node;
+            _ref4.current = node;
           }
           setPopupRef(node);
         }
@@ -53,6 +78,8 @@ function Popup(_ref) {
       // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
       ,
       style: style
-    }, children);
+    }, /*#__PURE__*/_react.default.createElement(RepositionOnUpdate, {
+      update: update
+    }, children));
   }));
 }

package/dist/cjs/ui/ProfileCardComponent.js

@@ -164,10 +164,6 @@ function ProfileCardComponent(_ref4) {
       }
     });
   });
-  if (!provider || !activeMention) {
-    return null;
-  }
-  var cloudId = provider.cloudId;
   return /*#__PURE__*/React.createElement(_PopperWrapper.Popup, {
     referenceElement: dom
   }, /*#__PURE__*/React.createElement(LoadingWrapper, {
@@ -182,7 +178,7 @@ function ProfileCardComponent(_ref4) {
     isBot: data === null || data === void 0 ? void 0 : data.isBot,
     fullName: data === null || data === void 0 ? void 0 : data.fullName,
     userId: id,
-    cloudId: cloudId,
+    cloudId: provider === null || provider === void 0 ? void 0 : provider.cloudId,
     actions: actions,
     isLoading: isLoading,
     location: data === null || data === void 0 ? void 0 : data.location,

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

@@ -15,7 +15,7 @@ export const ACTIONS = {
   SET_PROVIDER: 'SET_PROVIDER'
 };
 const PACKAGE_NAME = "@atlaskit/editor-plugin-mentions";
-const PACKAGE_VERSION = "4.4.1";
+const PACKAGE_VERSION = "4.4.2";
 const setProvider = provider => (state, dispatch) => {
   if (dispatch) {
     dispatch(state.tr.setMeta(mentionPluginKey, {

package/dist/es2019/ui/PopperWrapper.js

@@ -1,7 +1,26 @@
-import React from 'react';
+import React, { useRef, useEffect } 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 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;
+};
+
 /**
  * A popup wrapper to match the behaviour of `@atlaskit/popup`
  *
@@ -21,14 +40,17 @@ export function Popup({
   useFocusTrap({
     targetRef: targetRef
   });
-  return /*#__PURE__*/React.createElement(Portal, null, /*#__PURE__*/React.createElement(ReactPopper, {
+  return /*#__PURE__*/React.createElement(Portal, {
+    zIndex: layers.modal()
+  }, /*#__PURE__*/React.createElement(ReactPopper, {
     referenceElement: referenceElement,
     offset: [0, 8],
     placement: "bottom-end",
     strategy: "fixed"
   }, ({
     ref,
-    style
+    style,
+    update
   }) => /*#__PURE__*/React.createElement("div", {
     ref: node => {
       if (node) {
@@ -43,5 +65,7 @@ export function Popup({
     // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
     ,
     style: style
-  }, children)));
+  }, /*#__PURE__*/React.createElement(RepositionOnUpdate, {
+    update: update
+  }, children))));
 }

package/dist/es2019/ui/ProfileCardComponent.js

@@ -100,12 +100,6 @@ export function ProfileCardComponent({
       }
     });
   });
-  if (!provider || !activeMention) {
-    return null;
-  }
-  const {
-    cloudId
-  } = provider;
   return /*#__PURE__*/React.createElement(Popup, {
     referenceElement: dom
   }, /*#__PURE__*/React.createElement(LoadingWrapper, {
@@ -120,7 +114,7 @@ export function ProfileCardComponent({
     isBot: data === null || data === void 0 ? void 0 : data.isBot,
     fullName: data === null || data === void 0 ? void 0 : data.fullName,
     userId: id,
-    cloudId: cloudId,
+    cloudId: provider === null || provider === void 0 ? void 0 : provider.cloudId,
     actions: actions,
     isLoading: isLoading,
     location: data === null || data === void 0 ? void 0 : data.location,

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

@@ -18,7 +18,7 @@ export var ACTIONS = {
   SET_PROVIDER: 'SET_PROVIDER'
 };
 var PACKAGE_NAME = "@atlaskit/editor-plugin-mentions";
-var PACKAGE_VERSION = "4.4.1";
+var PACKAGE_VERSION = "4.4.2";
 var setProvider = function setProvider(provider) {
   return function (state, dispatch) {
     if (dispatch) {

package/dist/esm/ui/PopperWrapper.js

@@ -1,8 +1,26 @@
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
-import React from 'react';
+import React, { useRef, useEffect } 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`
  *
@@ -14,9 +32,9 @@ import { useFocusTrap } from './useFocusTrap';
  * @param children React.ReactNode - Returns the element to be positioned.
  * @returns React popper component
  */
-export function Popup(_ref) {
-  var referenceElement = _ref.referenceElement,
-    children = _ref.children;
+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],
@@ -24,21 +42,24 @@ export function Popup(_ref) {
   useFocusTrap({
     targetRef: targetRef
   });
-  return /*#__PURE__*/React.createElement(Portal, null, /*#__PURE__*/React.createElement(ReactPopper, {
+  return /*#__PURE__*/React.createElement(Portal, {
+    zIndex: layers.modal()
+  }, /*#__PURE__*/React.createElement(ReactPopper, {
     referenceElement: referenceElement,
     offset: [0, 8],
     placement: "bottom-end",
     strategy: "fixed"
-  }, function (_ref2) {
-    var _ref3 = _ref2.ref,
-      style = _ref2.style;
+  }, 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 _ref3 === 'function') {
-            _ref3(node);
+          if (typeof _ref4 === 'function') {
+            _ref4(node);
           } else {
-            _ref3.current = node;
+            _ref4.current = node;
           }
           setPopupRef(node);
         }
@@ -46,6 +67,8 @@ export function Popup(_ref) {
       // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
       ,
       style: style
-    }, children);
+    }, /*#__PURE__*/React.createElement(RepositionOnUpdate, {
+      update: update
+    }, children));
   }));
 }

package/dist/esm/ui/ProfileCardComponent.js

@@ -153,10 +153,6 @@ export function ProfileCardComponent(_ref4) {
       }
     });
   });
-  if (!provider || !activeMention) {
-    return null;
-  }
-  var cloudId = provider.cloudId;
   return /*#__PURE__*/React.createElement(Popup, {
     referenceElement: dom
   }, /*#__PURE__*/React.createElement(LoadingWrapper, {
@@ -171,7 +167,7 @@ export function ProfileCardComponent(_ref4) {
     isBot: data === null || data === void 0 ? void 0 : data.isBot,
     fullName: data === null || data === void 0 ? void 0 : data.fullName,
     userId: id,
-    cloudId: cloudId,
+    cloudId: provider === null || provider === void 0 ? void 0 : provider.cloudId,
     actions: actions,
     isLoading: isLoading,
     location: data === null || data === void 0 ? void 0 : data.location,

package/dist/types/ui/PopperWrapper.d.ts

@@ -1,4 +1,5 @@
-import React from 'react';
+import React, { type PropsWithChildren } from 'react';
+import { type PopperChildrenProps } from '@atlaskit/popper';
 interface Props {
     /**
      * Replacement reference element to position popper relative to.
@@ -9,6 +10,9 @@ interface Props {
      */
     children: React.ReactNode;
 }
+export declare const RepositionOnUpdate: ({ children, update, }: React.PropsWithChildren<{
+    update: PopperChildrenProps['update'];
+}>) => React.ReactNode;
 /**
  * A popup wrapper to match the behaviour of `@atlaskit/popup`
  *

package/dist/types/ui/ProfileCardComponent.d.ts

@@ -19,5 +19,5 @@ export declare function ProfileCardComponent({ profilecardProvider, activeMentio
     activeMention: PMNode;
     dom: HTMLElement;
     closeComponent: () => void;
-}): JSX.Element | null;
+}): JSX.Element;
 export {};

package/dist/types-ts4.5/ui/PopperWrapper.d.ts

@@ -1,4 +1,5 @@
-import React from 'react';
+import React, { type PropsWithChildren } from 'react';
+import { type PopperChildrenProps } from '@atlaskit/popper';
 interface Props {
     /**
      * Replacement reference element to position popper relative to.
@@ -9,6 +10,9 @@ interface Props {
      */
     children: React.ReactNode;
 }
+export declare const RepositionOnUpdate: ({ children, update, }: React.PropsWithChildren<{
+    update: PopperChildrenProps['update'];
+}>) => React.ReactNode;
 /**
  * A popup wrapper to match the behaviour of `@atlaskit/popup`
  *

package/dist/types-ts4.5/ui/ProfileCardComponent.d.ts

@@ -19,5 +19,5 @@ export declare function ProfileCardComponent({ profilecardProvider, activeMentio
     activeMention: PMNode;
     dom: HTMLElement;
     closeComponent: () => void;
-}): JSX.Element | null;
+}): JSX.Element;
 export {};

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-mentions",
-	"version": "4.4.1",
+	"version": "4.4.2",
 	"description": "Mentions plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -35,22 +35,22 @@
 	"dependencies": {
 		"@atlaskit/adf-schema": "^47.6.0",
 		"@atlaskit/css": "^0.10.0",
-		"@atlaskit/editor-common": "^103.6.0",
+		"@atlaskit/editor-common": "^103.10.0",
 		"@atlaskit/editor-plugin-analytics": "^2.2.0",
 		"@atlaskit/editor-plugin-base": "^2.3.0",
 		"@atlaskit/editor-plugin-context-identifier": "^2.1.0",
 		"@atlaskit/editor-plugin-selection": "^2.1.0",
-		"@atlaskit/editor-plugin-type-ahead": "^2.4.0",
+		"@atlaskit/editor-plugin-type-ahead": "^2.5.0",
 		"@atlaskit/editor-prosemirror": "7.0.0",
 		"@atlaskit/icon": "^25.6.0",
 		"@atlaskit/mention": "^24.1.0",
 		"@atlaskit/platform-feature-flags": "^1.1.0",
 		"@atlaskit/popper": "^7.0.0",
 		"@atlaskit/portal": "^5.1.0",
-		"@atlaskit/profilecard": "^23.7.0",
+		"@atlaskit/profilecard": "^23.8.0",
 		"@atlaskit/theme": "^18.0.0",
-		"@atlaskit/tmp-editor-statsig": "^4.8.0",
-		"@atlaskit/tokens": "^4.7.0",
+		"@atlaskit/tmp-editor-statsig": "^4.12.0",
+		"@atlaskit/tokens": "^4.8.0",
 		"@babel/runtime": "^7.0.0",
 		"@compiled/react": "^0.18.3",
 		"bind-event-listener": "^3.0.0",