@atlaskit/editor-plugin-mentions 4.3.0 → 4.3.2

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # @atlaskit/editor-plugin-mentions
 
+## 4.3.2
+
+### Patch Changes
+
+- Updated dependencies
+
+## 4.3.1
+
+### Patch Changes
+
+- [#137012](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/137012)
+  [`4dc7b6496e62c`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/4dc7b6496e62c) -
+  [ux] Match the popup behaviour in vanilla mention node to the existing behaviour.
+
 ## 4.3.0
 
 ### Minor 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.3.0";
+var PACKAGE_VERSION = "4.3.2";
 var setProvider = function setProvider(provider) {
   return function (state, dispatch) {
     if (dispatch) {

package/dist/cjs/ui/PopperWrapper.js

@@ -0,0 +1,42 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Popup = Popup;
+var _react = _interopRequireDefault(require("react"));
+var _popper = require("@atlaskit/popper");
+var _portal = _interopRequireDefault(require("@atlaskit/portal"));
+/**
+ * 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
+ */
+function Popup(_ref) {
+  var referenceElement = _ref.referenceElement,
+    children = _ref.children;
+  return /*#__PURE__*/_react.default.createElement(_portal.default, null, /*#__PURE__*/_react.default.createElement(_popper.Popper, {
+    referenceElement: referenceElement,
+    offset: [0, 8],
+    placement: "bottom-end",
+    strategy: "fixed"
+  }, function (_ref2) {
+    var ref = _ref2.ref,
+      style = _ref2.style;
+    return (
+      /*#__PURE__*/
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
+      _react.default.createElement("div", {
+        ref: ref,
+        style: style
+      }, children)
+    );
+  }));
+}

package/dist/cjs/ui/ProfileCardComponent.js

@@ -16,9 +16,8 @@ var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"))
 var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _bindEventListener = require("bind-event-listener");
-var _ui = require("@atlaskit/editor-common/ui");
-var _portal = _interopRequireDefault(require("@atlaskit/portal"));
 var _user = require("@atlaskit/profilecard/user");
+var _PopperWrapper = require("./PopperWrapper");
 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; }
 var styles = {
@@ -169,14 +168,8 @@ function ProfileCardComponent(_ref4) {
     return null;
   }
   var cloudId = provider.cloudId;
-  return /*#__PURE__*/React.createElement(_portal.default, null, /*#__PURE__*/React.createElement(_ui.Popup, {
-    target: dom,
-    absoluteOffset: {
-      top: 8
-    },
-    stick: true
-  }, /*#__PURE__*/React.createElement(_react.Suspense, {
-    fallback: null
+  return /*#__PURE__*/React.createElement(_PopperWrapper.Popup, {
+    referenceElement: dom
   }, /*#__PURE__*/React.createElement(LoadingWrapper, {
     isLoading: isLoading
   }, /*#__PURE__*/React.createElement(_user.ProfileCardLazy, {
@@ -201,5 +194,5 @@ function ProfileCardComponent(_ref4) {
     reportingLines: reportingLinesData,
     isKudosEnabled: shouldShowGiveKudos,
     teamCentralBaseUrl: teamCentralBaseUrl
-  })))));
+  })));
 }

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.3.0";
+const PACKAGE_VERSION = "4.3.2";
 const setProvider = provider => (state, dispatch) => {
   if (dispatch) {
     dispatch(state.tr.setMeta(mentionPluginKey, {

package/dist/es2019/ui/PopperWrapper.js

@@ -0,0 +1,34 @@
+import React from 'react';
+import { Popper as ReactPopper } from '@atlaskit/popper';
+import Portal from '@atlaskit/portal';
+/**
+ * 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
+}) {
+  return /*#__PURE__*/React.createElement(Portal, null, /*#__PURE__*/React.createElement(ReactPopper, {
+    referenceElement: referenceElement,
+    offset: [0, 8],
+    placement: "bottom-end",
+    strategy: "fixed"
+  }, ({
+    ref,
+    style
+  }) =>
+  /*#__PURE__*/
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
+  React.createElement("div", {
+    ref: ref,
+    style: style
+  }, children)));
+}

package/dist/es2019/ui/ProfileCardComponent.js

@@ -2,11 +2,10 @@
 import "./ProfileCardComponent.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";
-import { useEffect, useState, useMemo, Suspense } from 'react';
+import { useEffect, useState, useMemo } from 'react';
 import { bind } from 'bind-event-listener';
-import { Popup } from '@atlaskit/editor-common/ui';
-import Portal from '@atlaskit/portal';
 import { ProfileCardLazy } from '@atlaskit/profilecard/user';
+import { Popup } from './PopperWrapper';
 const styles = {
   loadingStyles: "_2rkoglpi _16qs1cd0"
 };
@@ -107,14 +106,8 @@ export function ProfileCardComponent({
   const {
     cloudId
   } = provider;
-  return /*#__PURE__*/React.createElement(Portal, null, /*#__PURE__*/React.createElement(Popup, {
-    target: dom,
-    absoluteOffset: {
-      top: 8
-    },
-    stick: true
-  }, /*#__PURE__*/React.createElement(Suspense, {
-    fallback: null
+  return /*#__PURE__*/React.createElement(Popup, {
+    referenceElement: dom
   }, /*#__PURE__*/React.createElement(LoadingWrapper, {
     isLoading: isLoading
   }, /*#__PURE__*/React.createElement(ProfileCardLazy, {
@@ -139,5 +132,5 @@ export function ProfileCardComponent({
     reportingLines: reportingLinesData,
     isKudosEnabled: shouldShowGiveKudos,
     teamCentralBaseUrl: teamCentralBaseUrl
-  })))));
+  })));
 }

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.3.0";
+var PACKAGE_VERSION = "4.3.2";
 var setProvider = function setProvider(provider) {
   return function (state, dispatch) {
     if (dispatch) {

package/dist/esm/ui/PopperWrapper.js

@@ -0,0 +1,35 @@
+import React from 'react';
+import { Popper as ReactPopper } from '@atlaskit/popper';
+import Portal from '@atlaskit/portal';
+/**
+ * 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(_ref) {
+  var referenceElement = _ref.referenceElement,
+    children = _ref.children;
+  return /*#__PURE__*/React.createElement(Portal, null, /*#__PURE__*/React.createElement(ReactPopper, {
+    referenceElement: referenceElement,
+    offset: [0, 8],
+    placement: "bottom-end",
+    strategy: "fixed"
+  }, function (_ref2) {
+    var ref = _ref2.ref,
+      style = _ref2.style;
+    return (
+      /*#__PURE__*/
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
+      React.createElement("div", {
+        ref: ref,
+        style: style
+      }, children)
+    );
+  }));
+}

package/dist/esm/ui/ProfileCardComponent.js

@@ -5,11 +5,10 @@ import "./ProfileCardComponent.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";
 import _regeneratorRuntime from "@babel/runtime/regenerator";
-import { useEffect, useState, useMemo, Suspense } from 'react';
+import { useEffect, useState, useMemo } from 'react';
 import { bind } from 'bind-event-listener';
-import { Popup } from '@atlaskit/editor-common/ui';
-import Portal from '@atlaskit/portal';
 import { ProfileCardLazy } from '@atlaskit/profilecard/user';
+import { Popup } from './PopperWrapper';
 var styles = {
   loadingStyles: "_2rkoglpi _16qs1cd0"
 };
@@ -158,14 +157,8 @@ export function ProfileCardComponent(_ref4) {
     return null;
   }
   var cloudId = provider.cloudId;
-  return /*#__PURE__*/React.createElement(Portal, null, /*#__PURE__*/React.createElement(Popup, {
-    target: dom,
-    absoluteOffset: {
-      top: 8
-    },
-    stick: true
-  }, /*#__PURE__*/React.createElement(Suspense, {
-    fallback: null
+  return /*#__PURE__*/React.createElement(Popup, {
+    referenceElement: dom
   }, /*#__PURE__*/React.createElement(LoadingWrapper, {
     isLoading: isLoading
   }, /*#__PURE__*/React.createElement(ProfileCardLazy, {
@@ -190,5 +183,5 @@ export function ProfileCardComponent(_ref4) {
     reportingLines: reportingLinesData,
     isKudosEnabled: shouldShowGiveKudos,
     teamCentralBaseUrl: teamCentralBaseUrl
-  })))));
+  })));
 }

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

@@ -0,0 +1,24 @@
+import React from 'react';
+interface Props {
+    /**
+     * Replacement reference element to position popper relative to.
+     */
+    referenceElement: HTMLElement;
+    /**
+     * Returns the element to be positioned.
+     */
+    children: React.ReactNode;
+}
+/**
+ * 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 declare function Popup({ referenceElement, children }: Props): React.JSX.Element;
+export {};

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

@@ -0,0 +1,24 @@
+import React from 'react';
+interface Props {
+    /**
+     * Replacement reference element to position popper relative to.
+     */
+    referenceElement: HTMLElement;
+    /**
+     * Returns the element to be positioned.
+     */
+    children: React.ReactNode;
+}
+/**
+ * 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 declare function Popup({ referenceElement, children }: Props): React.JSX.Element;
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-mentions",
-	"version": "4.3.0",
+	"version": "4.3.2",
 	"description": "Mentions plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -35,7 +35,7 @@
 	"dependencies": {
 		"@atlaskit/adf-schema": "^47.6.0",
 		"@atlaskit/css": "^0.10.0",
-		"@atlaskit/editor-common": "^102.18.0",
+		"@atlaskit/editor-common": "^103.0.0",
 		"@atlaskit/editor-plugin-analytics": "^2.2.0",
 		"@atlaskit/editor-plugin-base": "^2.3.0",
 		"@atlaskit/editor-plugin-context-identifier": "^2.0.0",
@@ -45,11 +45,12 @@
 		"@atlaskit/icon": "^25.5.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/theme": "^18.0.0",
 		"@atlaskit/tmp-editor-statsig": "^4.6.0",
-		"@atlaskit/tokens": "^4.6.0",
+		"@atlaskit/tokens": "^4.7.0",
 		"@babel/runtime": "^7.0.0",
 		"@compiled/react": "^0.18.3",
 		"bind-event-listener": "^3.0.0",