@atlaskit/editor-plugin-mentions 4.3.2 → 4.4.0

package/CHANGELOG.md

@@ -1,5 +1,27 @@
 # @atlaskit/editor-plugin-mentions
 
+## 4.4.0
+
+### Minor Changes
+
+- [#139139](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/139139)
+  [`7f6b665d778dd`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/7f6b665d778dd) -
+  [https://product-fabric.atlassian.net/browse/ED-27499](ED-27499) - the new
+  `@atlassian/confluence-presets` package with Confluence `full-page` preset is created
+
+### Patch Changes
+
+- Updated dependencies
+
+## 4.3.3
+
+### Patch Changes
+
+- [#138789](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/138789)
+  [`eeb167efe5e64`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/eeb167efe5e64) -
+  Setup focus trap for profile card provider in vanilla mention version
+- Updated dependencies
+
 ## 4.3.2
 
 ### Patch Changes

package/dist/cjs/nodeviews/mentionNodeView.js

@@ -4,7 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.mentionNodeView = void 0;
+exports.MentionNodeView = void 0;
 var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
 var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
 var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
@@ -16,7 +16,12 @@ var _model = require("@atlaskit/editor-prosemirror/model");
 var _resource = require("@atlaskit/mention/resource");
 var _types = require("@atlaskit/mention/types");
 var _profileCardRenderer2 = require("./profileCardRenderer");
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var primitiveClassName = 'editor-mention-primitive';
+var getAccessibilityLabelFromName = function getAccessibilityLabelFromName(name) {
+  return name.replace(/^@/, '');
+};
 var toDOM = function toDOM(node) {
   // packages/elements/mention/src/components/Mention/index.tsx
   var mentionAttrs = {
@@ -83,9 +88,10 @@ var getNewState = function getNewState(isHighlighted, isRestricted) {
   }
   return 'default';
 };
-var MentionNodeView = /*#__PURE__*/function () {
+var MentionNodeView = exports.MentionNodeView = /*#__PURE__*/function () {
   function MentionNodeView(node, config) {
-    var _api$mention$sharedSt,
+    var _this$domElement$quer,
+      _api$mention$sharedSt,
       _this = this;
     (0, _classCallCheck2.default)(this, MentionNodeView);
     (0, _defineProperty2.default)(this, "state", 'default');
@@ -99,6 +105,8 @@ var MentionNodeView = /*#__PURE__*/function () {
     this.contentDOM = contentDOM;
     this.config = config;
     this.node = node;
+    this.domElement = dom instanceof HTMLElement ? dom : undefined;
+    this.mentionPrimitiveElement = this.domElement ? (_this$domElement$quer = this.domElement.querySelector(".".concat(primitiveClassName))) !== null && _this$domElement$quer !== void 0 ? _this$domElement$quer : undefined : undefined;
     var _ref2 = (_api$mention$sharedSt = api === null || api === void 0 ? void 0 : api.mention.sharedState.currentState()) !== null && _api$mention$sharedSt !== void 0 ? _api$mention$sharedSt : {},
       mentionProvider = _ref2.mentionProvider;
     this.updateState(mentionProvider);
@@ -115,39 +123,38 @@ var MentionNodeView = /*#__PURE__*/function () {
       }),
       destroyProfileCard = _profileCardRenderer.destroyProfileCard,
       removeProfileCard = _profileCardRenderer.removeProfileCard;
+    // Accessibility attributes - based on `packages/people-and-teams/profilecard/src/components/User/ProfileCardTrigger.tsx`
+    if (this.domElement && options !== null && options !== void 0 && options.profilecardProvider) {
+      if (node.attrs.text) {
+        this.domElement.setAttribute('aria-label', getAccessibilityLabelFromName(node.attrs.text));
+      }
+      this.domElement.setAttribute('aria-expanded', 'false');
+      this.domElement.setAttribute('role', 'button');
+      this.domElement.setAttribute('tabindex', '0');
+      this.domElement.setAttribute('aria-haspopup', 'dialog');
+    }
     this.destroyProfileCard = destroyProfileCard;
     this.removeProfileCard = removeProfileCard;
   }
   return (0, _createClass2.default)(MentionNodeView, [{
     key: "setClassList",
     value: function setClassList(state) {
-      var mentionElement = this.getMentionPrimitive();
-      mentionElement === null || mentionElement === void 0 || mentionElement.classList.toggle('mention-self', state === 'self');
-      mentionElement === null || mentionElement === void 0 || mentionElement.classList.toggle('mention-restricted', state === 'restricted');
-    }
-  }, {
-    key: "getMentionPrimitive",
-    value: function getMentionPrimitive() {
-      var _this$dom$querySelect;
-      return this.dom instanceof HTMLElement ? (_this$dom$querySelect = this.dom.querySelector(".".concat(primitiveClassName))) !== null && _this$dom$querySelect !== void 0 ? _this$dom$querySelect : undefined : undefined;
+      var _this$mentionPrimitiv, _this$mentionPrimitiv2;
+      (_this$mentionPrimitiv = this.mentionPrimitiveElement) === null || _this$mentionPrimitiv === void 0 || _this$mentionPrimitiv.classList.toggle('mention-self', state === 'self');
+      (_this$mentionPrimitiv2 = this.mentionPrimitiveElement) === null || _this$mentionPrimitiv2 === void 0 || _this$mentionPrimitiv2.classList.toggle('mention-restricted', state === 'restricted');
     }
   }, {
     key: "setTextContent",
     value: function setTextContent(name) {
-      var _this$config$options;
-      if (!(this.dom instanceof HTMLElement)) {
-        return;
-      }
-      var mentionPrimitive = this.getMentionPrimitive();
-      if (mentionPrimitive && name && !this.node.attrs.text && (_this$config$options = this.config.options) !== null && _this$config$options !== void 0 && _this$config$options.sanitizePrivateContent) {
-        mentionPrimitive.textContent = name;
+      if (name && !this.node.attrs.text && this.mentionPrimitiveElement) {
+        this.mentionPrimitiveElement.textContent = name;
       }
     }
   }, {
     key: "updateState",
     value: function () {
       var _updateState = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee2(mentionProvider) {
-        var _mentionProvider$shou;
+        var _mentionProvider$shou, _this$config$options;
         var isHighlighted, newState, name;
         return _regenerator.default.wrap(function _callee2$(_context2) {
           while (1) switch (_context2.prev = _context2.next) {
@@ -165,7 +172,10 @@ var MentionNodeView = /*#__PURE__*/function () {
             case 5:
               name = _context2.sent;
               this.setTextContent(name);
-            case 7:
+              if (name && this.domElement && (_this$config$options = this.config.options) !== null && _this$config$options !== void 0 && _this$config$options.profilecardProvider) {
+                this.domElement.setAttribute('aria-label', getAccessibilityLabelFromName(name));
+              }
+            case 8:
             case "end":
               return _context2.stop();
           }
@@ -176,6 +186,28 @@ var MentionNodeView = /*#__PURE__*/function () {
       }
       return updateState;
     }()
+  }, {
+    key: "nodeIsEqual",
+    value: function nodeIsEqual(nextNode) {
+      var _this$config$options2;
+      if ((_this$config$options2 = this.config.options) !== null && _this$config$options2 !== void 0 && _this$config$options2.sanitizePrivateContent) {
+        // Compare nodes but ignore the text parameter as it may be sanitized
+        var nextNodeAttrs = _objectSpread(_objectSpread({}, nextNode.attrs), {}, {
+          text: this.node.attrs.text
+        });
+        return this.node.hasMarkup(nextNode.type, nextNodeAttrs, nextNode.marks);
+      }
+      return this.node.sameMarkup(nextNode);
+    }
+  }, {
+    key: "update",
+    value: function update(node) {
+      if (!this.nodeIsEqual(node)) {
+        return false;
+      }
+      this.node = node;
+      return true;
+    }
   }, {
     key: "destroy",
     value: function destroy() {
@@ -190,9 +222,4 @@ var MentionNodeView = /*#__PURE__*/function () {
       (_this$removeProfileCa = this.removeProfileCard) === null || _this$removeProfileCa === void 0 || _this$removeProfileCa.call(this);
     }
   }]);
-}();
-var mentionNodeView = exports.mentionNodeView = function mentionNodeView(config) {
-  return function (node) {
-    return new MentionNodeView(node, config);
-  };
-};
+}();

package/dist/cjs/nodeviews/profileCardRenderer.js

@@ -21,6 +21,9 @@ var profileCardRenderer = exports.profileCardRenderer = function profileCardRend
   var cleanupSelection;
   var removeProfileCard = function removeProfileCard() {
     var _cleanupSelection;
+    if (dom instanceof HTMLElement) {
+      dom.setAttribute('aria-expanded', 'false');
+    }
     portalProviderAPI.remove(key);
     renderingProfileCard = false;
     (_cleanupSelection = cleanupSelection) === null || _cleanupSelection === void 0 || _cleanupSelection();
@@ -30,6 +33,7 @@ var profileCardRenderer = exports.profileCardRenderer = function profileCardRend
     listener: function listener() {
       if (dom instanceof HTMLElement && options !== null && options !== void 0 && options.profilecardProvider && !renderingProfileCard) {
         var _api$selection;
+        dom.setAttribute('aria-expanded', 'true');
         renderingProfileCard = true;
         portalProviderAPI.render(function () {
           return /*#__PURE__*/_react.default.createElement(_ProfileCardComponent.ProfileCardComponent, {

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.2";
+var PACKAGE_VERSION = "4.4.0";
 var setProvider = function setProvider(provider) {
   return function (state, dispatch) {
     if (dispatch) {
@@ -102,11 +102,13 @@ function createMentionPlugin(_ref) {
     props: {
       nodeViews: {
         mention: function mention(node, view, getPos, decorations, innerDecorations) {
-          return (0, _experiments.editorExperiment)('platform_editor_vanilla_dom', true) ? (0, _mentionNodeView.mentionNodeView)({
+          return (0, _experiments.editorExperiment)('platform_editor_vanilla_dom', true, {
+            exposure: true
+          }) ? new _mentionNodeView.MentionNodeView(node, {
             options: options,
             api: api,
             portalProviderAPI: pmPluginFactoryParams.portalProviderAPI
-          })(node, view, getPos, decorations, innerDecorations) : (0, _reactNodeView.getInlineNodeViewProducer)({
+          }) : (0, _reactNodeView.getInlineNodeViewProducer)({
             pmPluginFactoryParams: pmPluginFactoryParams,
             Component: _mention.MentionNodeView,
             extraComponentProps: {

package/dist/cjs/types/index.js

@@ -5,4 +5,10 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.MENTION_PROVIDER_UNDEFINED = exports.MENTION_PROVIDER_REJECTED = void 0;
 var MENTION_PROVIDER_REJECTED = exports.MENTION_PROVIDER_REJECTED = 'REJECTED';
-var MENTION_PROVIDER_UNDEFINED = exports.MENTION_PROVIDER_UNDEFINED = 'UNDEFINED';
+var MENTION_PROVIDER_UNDEFINED = exports.MENTION_PROVIDER_UNDEFINED = 'UNDEFINED';
+
+/**
+ * @private
+ * @deprecated Use {@link MentionsPluginOptions} instead.
+ * @see https://product-fabric.atlassian.net/browse/ED-27496
+ */

package/dist/cjs/ui/PopperWrapper.js

@@ -5,9 +5,11 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.Popup = Popup;
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _react = _interopRequireDefault(require("react"));
 var _popper = require("@atlaskit/popper");
 var _portal = _interopRequireDefault(require("@atlaskit/portal"));
+var _useFocusTrap = require("./useFocusTrap");
 /**
  * A popup wrapper to match the behaviour of `@atlaskit/popup`
  *
@@ -22,21 +24,35 @@ var _portal = _interopRequireDefault(require("@atlaskit/portal"));
 function Popup(_ref) {
   var referenceElement = _ref.referenceElement,
     children = _ref.children;
+  var _React$useState = _react.default.useState(null),
+    _React$useState2 = (0, _slicedToArray2.default)(_React$useState, 2),
+    targetRef = _React$useState2[0],
+    setPopupRef = _React$useState2[1];
+  (0, _useFocusTrap.useFocusTrap)({
+    targetRef: targetRef
+  });
   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,
+    var _ref3 = _ref2.ref,
       style = _ref2.style;
-    return (
-      /*#__PURE__*/
+    return /*#__PURE__*/_react.default.createElement("div", {
+      ref: function ref(node) {
+        if (node) {
+          if (typeof _ref3 === 'function') {
+            _ref3(node);
+          } else {
+            _ref3.current = node;
+          }
+          setPopupRef(node);
+        }
+      }
       // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
-      _react.default.createElement("div", {
-        ref: ref,
-        style: style
-      }, children)
-    );
+      ,
+      style: style
+    }, children);
   }));
 }

package/dist/cjs/ui/useFocusTrap.js

@@ -0,0 +1,44 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useFocusTrap = void 0;
+var _react = require("react");
+var _focusTrap = _interopRequireDefault(require("focus-trap"));
+/**
+ * Custom hook to add focus trap
+ * used for focus trap in ReactionPicker
+ * copied from useFocusManager in @atlaskit/popup
+ */
+
+var useFocusTrap = exports.useFocusTrap = function useFocusTrap(_ref) {
+  var targetRef = _ref.targetRef;
+  (0, _react.useEffect)(function () {
+    if (!targetRef) {
+      return;
+    }
+    var trapConfig = {
+      clickOutsideDeactivates: true,
+      escapeDeactivates: true,
+      initialFocus: targetRef,
+      fallbackFocus: targetRef,
+      returnFocusOnDeactivate: true
+    };
+    var focusTrap = (0, _focusTrap.default)(targetRef, trapConfig);
+
+    // wait for the popup to reposition itself before we focus
+    var frameId = requestAnimationFrame(function () {
+      frameId = null;
+      focusTrap.activate();
+    });
+    return function () {
+      if (frameId !== null) {
+        cancelAnimationFrame(frameId);
+        frameId = null;
+      }
+      focusTrap.deactivate();
+    };
+  }, [targetRef]);
+};

package/dist/es2019/nodeviews/mentionNodeView.js

@@ -6,6 +6,7 @@ import { isResolvingMentionProvider, MentionNameStatus } from '@atlaskit/mention
 import { isRestricted } from '@atlaskit/mention/types';
 import { profileCardRenderer } from './profileCardRenderer';
 const primitiveClassName = 'editor-mention-primitive';
+const getAccessibilityLabelFromName = name => name.replace(/^@/u, '');
 const toDOM = node => {
   // packages/elements/mention/src/components/Mention/index.tsx
   const mentionAttrs = {
@@ -53,9 +54,9 @@ const getNewState = (isHighlighted, isRestricted) => {
   }
   return 'default';
 };
-class MentionNodeView {
+export class MentionNodeView {
   constructor(node, config) {
-    var _api$mention$sharedSt;
+    var _this$domElement$quer, _api$mention$sharedSt;
     _defineProperty(this, "state", 'default');
     const {
       options,
@@ -70,6 +71,8 @@ class MentionNodeView {
     this.contentDOM = contentDOM;
     this.config = config;
     this.node = node;
+    this.domElement = dom instanceof HTMLElement ? dom : undefined;
+    this.mentionPrimitiveElement = this.domElement ? (_this$domElement$quer = this.domElement.querySelector(`.${primitiveClassName}`)) !== null && _this$domElement$quer !== void 0 ? _this$domElement$quer : undefined : undefined;
     const {
       mentionProvider
     } = (_api$mention$sharedSt = api === null || api === void 0 ? void 0 : api.mention.sharedState.currentState()) !== null && _api$mention$sharedSt !== void 0 ? _api$mention$sharedSt : {};
@@ -89,30 +92,31 @@ class MentionNodeView {
       node,
       api
     });
+    // Accessibility attributes - based on `packages/people-and-teams/profilecard/src/components/User/ProfileCardTrigger.tsx`
+    if (this.domElement && options !== null && options !== void 0 && options.profilecardProvider) {
+      if (node.attrs.text) {
+        this.domElement.setAttribute('aria-label', getAccessibilityLabelFromName(node.attrs.text));
+      }
+      this.domElement.setAttribute('aria-expanded', 'false');
+      this.domElement.setAttribute('role', 'button');
+      this.domElement.setAttribute('tabindex', '0');
+      this.domElement.setAttribute('aria-haspopup', 'dialog');
+    }
     this.destroyProfileCard = destroyProfileCard;
     this.removeProfileCard = removeProfileCard;
   }
   setClassList(state) {
-    const mentionElement = this.getMentionPrimitive();
-    mentionElement === null || mentionElement === void 0 ? void 0 : mentionElement.classList.toggle('mention-self', state === 'self');
-    mentionElement === null || mentionElement === void 0 ? void 0 : mentionElement.classList.toggle('mention-restricted', state === 'restricted');
-  }
-  getMentionPrimitive() {
-    var _this$dom$querySelect;
-    return this.dom instanceof HTMLElement ? (_this$dom$querySelect = this.dom.querySelector(`.${primitiveClassName}`)) !== null && _this$dom$querySelect !== void 0 ? _this$dom$querySelect : undefined : undefined;
+    var _this$mentionPrimitiv, _this$mentionPrimitiv2;
+    (_this$mentionPrimitiv = this.mentionPrimitiveElement) === null || _this$mentionPrimitiv === void 0 ? void 0 : _this$mentionPrimitiv.classList.toggle('mention-self', state === 'self');
+    (_this$mentionPrimitiv2 = this.mentionPrimitiveElement) === null || _this$mentionPrimitiv2 === void 0 ? void 0 : _this$mentionPrimitiv2.classList.toggle('mention-restricted', state === 'restricted');
   }
   setTextContent(name) {
-    var _this$config$options;
-    if (!(this.dom instanceof HTMLElement)) {
-      return;
-    }
-    const mentionPrimitive = this.getMentionPrimitive();
-    if (mentionPrimitive && name && !this.node.attrs.text && (_this$config$options = this.config.options) !== null && _this$config$options !== void 0 && _this$config$options.sanitizePrivateContent) {
-      mentionPrimitive.textContent = name;
+    if (name && !this.node.attrs.text && this.mentionPrimitiveElement) {
+      this.mentionPrimitiveElement.textContent = name;
     }
   }
   async updateState(mentionProvider) {
-    var _mentionProvider$shou;
+    var _mentionProvider$shou, _this$config$options;
     const isHighlighted = (_mentionProvider$shou = mentionProvider === null || mentionProvider === void 0 ? void 0 : mentionProvider.shouldHighlightMention({
       id: this.node.attrs.id
     })) !== null && _mentionProvider$shou !== void 0 ? _mentionProvider$shou : false;
@@ -123,6 +127,28 @@ class MentionNodeView {
     }
     const name = await handleProviderName(mentionProvider, this.node);
     this.setTextContent(name);
+    if (name && this.domElement && (_this$config$options = this.config.options) !== null && _this$config$options !== void 0 && _this$config$options.profilecardProvider) {
+      this.domElement.setAttribute('aria-label', getAccessibilityLabelFromName(name));
+    }
+  }
+  nodeIsEqual(nextNode) {
+    var _this$config$options2;
+    if ((_this$config$options2 = this.config.options) !== null && _this$config$options2 !== void 0 && _this$config$options2.sanitizePrivateContent) {
+      // Compare nodes but ignore the text parameter as it may be sanitized
+      const nextNodeAttrs = {
+        ...nextNode.attrs,
+        text: this.node.attrs.text
+      };
+      return this.node.hasMarkup(nextNode.type, nextNodeAttrs, nextNode.marks);
+    }
+    return this.node.sameMarkup(nextNode);
+  }
+  update(node) {
+    if (!this.nodeIsEqual(node)) {
+      return false;
+    }
+    this.node = node;
+    return true;
   }
   destroy() {
     var _this$cleanup, _this$destroyProfileC;
@@ -133,7 +159,4 @@ class MentionNodeView {
     var _this$removeProfileCa;
     (_this$removeProfileCa = this.removeProfileCard) === null || _this$removeProfileCa === void 0 ? void 0 : _this$removeProfileCa.call(this);
   }
-}
-export const mentionNodeView = config => node => {
-  return new MentionNodeView(node, config);
-};
+}

package/dist/es2019/nodeviews/profileCardRenderer.js

@@ -15,6 +15,9 @@ export const profileCardRenderer = ({
   let cleanupSelection;
   const removeProfileCard = () => {
     var _cleanupSelection;
+    if (dom instanceof HTMLElement) {
+      dom.setAttribute('aria-expanded', 'false');
+    }
     portalProviderAPI.remove(key);
     renderingProfileCard = false;
     (_cleanupSelection = cleanupSelection) === null || _cleanupSelection === void 0 ? void 0 : _cleanupSelection();
@@ -24,6 +27,7 @@ export const profileCardRenderer = ({
     listener: () => {
       if (dom instanceof HTMLElement && options !== null && options !== void 0 && options.profilecardProvider && !renderingProfileCard) {
         var _api$selection;
+        dom.setAttribute('aria-expanded', 'true');
         renderingProfileCard = true;
         portalProviderAPI.render(() => /*#__PURE__*/React.createElement(ProfileCardComponent, {
           activeMention: node,

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

@@ -7,7 +7,7 @@ import { ComponentNames } from '@atlaskit/mention/types';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { MentionNodeView } from '../nodeviews/mention';
-import { mentionNodeView } from '../nodeviews/mentionNodeView';
+import { MentionNodeView as VanillaMentionNodeView } from '../nodeviews/mentionNodeView';
 import { MENTION_PROVIDER_REJECTED, MENTION_PROVIDER_UNDEFINED } from '../types';
 import { mentionPluginKey } from './key';
 import { canMentionBeCreatedInRange } from './utils';
@@ -15,7 +15,7 @@ export const ACTIONS = {
   SET_PROVIDER: 'SET_PROVIDER'
 };
 const PACKAGE_NAME = "@atlaskit/editor-plugin-mentions";
-const PACKAGE_VERSION = "4.3.2";
+const PACKAGE_VERSION = "4.4.0";
 const setProvider = provider => (state, dispatch) => {
   if (dispatch) {
     dispatch(state.tr.setMeta(mentionPluginKey, {
@@ -94,11 +94,13 @@ export function createMentionPlugin({
     props: {
       nodeViews: {
         mention: (node, view, getPos, decorations, innerDecorations) => {
-          return editorExperiment('platform_editor_vanilla_dom', true) ? mentionNodeView({
+          return editorExperiment('platform_editor_vanilla_dom', true, {
+            exposure: true
+          }) ? new VanillaMentionNodeView(node, {
             options,
             api,
             portalProviderAPI: pmPluginFactoryParams.portalProviderAPI
-          })(node, view, getPos, decorations, innerDecorations) : getInlineNodeViewProducer({
+          }) : getInlineNodeViewProducer({
             pmPluginFactoryParams,
             Component: MentionNodeView,
             extraComponentProps: {

package/dist/es2019/types/index.js

@@ -1,2 +1,8 @@
 export const MENTION_PROVIDER_REJECTED = 'REJECTED';
-export const MENTION_PROVIDER_UNDEFINED = 'UNDEFINED';
+export const MENTION_PROVIDER_UNDEFINED = 'UNDEFINED';
+
+/**
+ * @private
+ * @deprecated Use {@link MentionsPluginOptions} instead.
+ * @see https://product-fabric.atlassian.net/browse/ED-27496
+ */

package/dist/es2019/ui/PopperWrapper.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import { Popper as ReactPopper } from '@atlaskit/popper';
 import Portal from '@atlaskit/portal';
+import { useFocusTrap } from './useFocusTrap';
 /**
  * A popup wrapper to match the behaviour of `@atlaskit/popup`
  *
@@ -16,6 +17,10 @@ export function Popup({
   referenceElement,
   children
 }) {
+  const [targetRef, setPopupRef] = React.useState(null);
+  useFocusTrap({
+    targetRef: targetRef
+  });
   return /*#__PURE__*/React.createElement(Portal, null, /*#__PURE__*/React.createElement(ReactPopper, {
     referenceElement: referenceElement,
     offset: [0, 8],
@@ -24,11 +29,19 @@ export function Popup({
   }, ({
     ref,
     style
-  }) =>
-  /*#__PURE__*/
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
-  React.createElement("div", {
-    ref: ref,
+  }) => /*#__PURE__*/React.createElement("div", {
+    ref: node => {
+      if (node) {
+        if (typeof ref === 'function') {
+          ref(node);
+        } else {
+          ref.current = node;
+        }
+        setPopupRef(node);
+      }
+    }
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
+    ,
     style: style
   }, children)));
 }

package/dist/es2019/ui/useFocusTrap.js

@@ -0,0 +1,37 @@
+/**
+ * Custom hook to add focus trap
+ * used for focus trap in ReactionPicker
+ * copied from useFocusManager in @atlaskit/popup
+ */
+import { useEffect } from 'react';
+import createFocusTrap from 'focus-trap';
+export const useFocusTrap = ({
+  targetRef
+}) => {
+  useEffect(() => {
+    if (!targetRef) {
+      return;
+    }
+    const trapConfig = {
+      clickOutsideDeactivates: true,
+      escapeDeactivates: true,
+      initialFocus: targetRef,
+      fallbackFocus: targetRef,
+      returnFocusOnDeactivate: true
+    };
+    const focusTrap = createFocusTrap(targetRef, trapConfig);
+
+    // wait for the popup to reposition itself before we focus
+    let frameId = requestAnimationFrame(() => {
+      frameId = null;
+      focusTrap.activate();
+    });
+    return () => {
+      if (frameId !== null) {
+        cancelAnimationFrame(frameId);
+        frameId = null;
+      }
+      focusTrap.deactivate();
+    };
+  }, [targetRef]);
+};

package/dist/esm/nodeviews/mentionNodeView.js

@@ -2,6 +2,8 @@ import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
 import _createClass from "@babel/runtime/helpers/createClass";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 import _regeneratorRuntime from "@babel/runtime/regenerator";
 import { browser } from '@atlaskit/editor-common/browser';
 import { ZERO_WIDTH_SPACE } from '@atlaskit/editor-common/whitespace';
@@ -10,6 +12,9 @@ import { isResolvingMentionProvider, MentionNameStatus } from '@atlaskit/mention
 import { isRestricted } from '@atlaskit/mention/types';
 import { profileCardRenderer } from './profileCardRenderer';
 var primitiveClassName = 'editor-mention-primitive';
+var getAccessibilityLabelFromName = function getAccessibilityLabelFromName(name) {
+  return name.replace(/^@/, '');
+};
 var toDOM = function toDOM(node) {
   // packages/elements/mention/src/components/Mention/index.tsx
   var mentionAttrs = {
@@ -76,9 +81,10 @@ var getNewState = function getNewState(isHighlighted, isRestricted) {
   }
   return 'default';
 };
-var MentionNodeView = /*#__PURE__*/function () {
+export var MentionNodeView = /*#__PURE__*/function () {
   function MentionNodeView(node, config) {
-    var _api$mention$sharedSt,
+    var _this$domElement$quer,
+      _api$mention$sharedSt,
       _this = this;
     _classCallCheck(this, MentionNodeView);
     _defineProperty(this, "state", 'default');
@@ -92,6 +98,8 @@ var MentionNodeView = /*#__PURE__*/function () {
     this.contentDOM = contentDOM;
     this.config = config;
     this.node = node;
+    this.domElement = dom instanceof HTMLElement ? dom : undefined;
+    this.mentionPrimitiveElement = this.domElement ? (_this$domElement$quer = this.domElement.querySelector(".".concat(primitiveClassName))) !== null && _this$domElement$quer !== void 0 ? _this$domElement$quer : undefined : undefined;
     var _ref2 = (_api$mention$sharedSt = api === null || api === void 0 ? void 0 : api.mention.sharedState.currentState()) !== null && _api$mention$sharedSt !== void 0 ? _api$mention$sharedSt : {},
       mentionProvider = _ref2.mentionProvider;
     this.updateState(mentionProvider);
@@ -108,39 +116,38 @@ var MentionNodeView = /*#__PURE__*/function () {
       }),
       destroyProfileCard = _profileCardRenderer.destroyProfileCard,
       removeProfileCard = _profileCardRenderer.removeProfileCard;
+    // Accessibility attributes - based on `packages/people-and-teams/profilecard/src/components/User/ProfileCardTrigger.tsx`
+    if (this.domElement && options !== null && options !== void 0 && options.profilecardProvider) {
+      if (node.attrs.text) {
+        this.domElement.setAttribute('aria-label', getAccessibilityLabelFromName(node.attrs.text));
+      }
+      this.domElement.setAttribute('aria-expanded', 'false');
+      this.domElement.setAttribute('role', 'button');
+      this.domElement.setAttribute('tabindex', '0');
+      this.domElement.setAttribute('aria-haspopup', 'dialog');
+    }
     this.destroyProfileCard = destroyProfileCard;
     this.removeProfileCard = removeProfileCard;
   }
   return _createClass(MentionNodeView, [{
     key: "setClassList",
     value: function setClassList(state) {
-      var mentionElement = this.getMentionPrimitive();
-      mentionElement === null || mentionElement === void 0 || mentionElement.classList.toggle('mention-self', state === 'self');
-      mentionElement === null || mentionElement === void 0 || mentionElement.classList.toggle('mention-restricted', state === 'restricted');
-    }
-  }, {
-    key: "getMentionPrimitive",
-    value: function getMentionPrimitive() {
-      var _this$dom$querySelect;
-      return this.dom instanceof HTMLElement ? (_this$dom$querySelect = this.dom.querySelector(".".concat(primitiveClassName))) !== null && _this$dom$querySelect !== void 0 ? _this$dom$querySelect : undefined : undefined;
+      var _this$mentionPrimitiv, _this$mentionPrimitiv2;
+      (_this$mentionPrimitiv = this.mentionPrimitiveElement) === null || _this$mentionPrimitiv === void 0 || _this$mentionPrimitiv.classList.toggle('mention-self', state === 'self');
+      (_this$mentionPrimitiv2 = this.mentionPrimitiveElement) === null || _this$mentionPrimitiv2 === void 0 || _this$mentionPrimitiv2.classList.toggle('mention-restricted', state === 'restricted');
     }
   }, {
     key: "setTextContent",
     value: function setTextContent(name) {
-      var _this$config$options;
-      if (!(this.dom instanceof HTMLElement)) {
-        return;
-      }
-      var mentionPrimitive = this.getMentionPrimitive();
-      if (mentionPrimitive && name && !this.node.attrs.text && (_this$config$options = this.config.options) !== null && _this$config$options !== void 0 && _this$config$options.sanitizePrivateContent) {
-        mentionPrimitive.textContent = name;
+      if (name && !this.node.attrs.text && this.mentionPrimitiveElement) {
+        this.mentionPrimitiveElement.textContent = name;
       }
     }
   }, {
     key: "updateState",
     value: function () {
       var _updateState = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2(mentionProvider) {
-        var _mentionProvider$shou;
+        var _mentionProvider$shou, _this$config$options;
         var isHighlighted, newState, name;
         return _regeneratorRuntime.wrap(function _callee2$(_context2) {
           while (1) switch (_context2.prev = _context2.next) {
@@ -158,7 +165,10 @@ var MentionNodeView = /*#__PURE__*/function () {
             case 5:
               name = _context2.sent;
               this.setTextContent(name);
-            case 7:
+              if (name && this.domElement && (_this$config$options = this.config.options) !== null && _this$config$options !== void 0 && _this$config$options.profilecardProvider) {
+                this.domElement.setAttribute('aria-label', getAccessibilityLabelFromName(name));
+              }
+            case 8:
             case "end":
               return _context2.stop();
           }
@@ -169,6 +179,28 @@ var MentionNodeView = /*#__PURE__*/function () {
       }
       return updateState;
     }()
+  }, {
+    key: "nodeIsEqual",
+    value: function nodeIsEqual(nextNode) {
+      var _this$config$options2;
+      if ((_this$config$options2 = this.config.options) !== null && _this$config$options2 !== void 0 && _this$config$options2.sanitizePrivateContent) {
+        // Compare nodes but ignore the text parameter as it may be sanitized
+        var nextNodeAttrs = _objectSpread(_objectSpread({}, nextNode.attrs), {}, {
+          text: this.node.attrs.text
+        });
+        return this.node.hasMarkup(nextNode.type, nextNodeAttrs, nextNode.marks);
+      }
+      return this.node.sameMarkup(nextNode);
+    }
+  }, {
+    key: "update",
+    value: function update(node) {
+      if (!this.nodeIsEqual(node)) {
+        return false;
+      }
+      this.node = node;
+      return true;
+    }
   }, {
     key: "destroy",
     value: function destroy() {
@@ -183,9 +215,4 @@ var MentionNodeView = /*#__PURE__*/function () {
       (_this$removeProfileCa = this.removeProfileCard) === null || _this$removeProfileCa === void 0 || _this$removeProfileCa.call(this);
     }
   }]);
-}();
-export var mentionNodeView = function mentionNodeView(config) {
-  return function (node) {
-    return new MentionNodeView(node, config);
-  };
-};
+}();

package/dist/esm/nodeviews/profileCardRenderer.js

@@ -14,6 +14,9 @@ export var profileCardRenderer = function profileCardRenderer(_ref) {
   var cleanupSelection;
   var removeProfileCard = function removeProfileCard() {
     var _cleanupSelection;
+    if (dom instanceof HTMLElement) {
+      dom.setAttribute('aria-expanded', 'false');
+    }
     portalProviderAPI.remove(key);
     renderingProfileCard = false;
     (_cleanupSelection = cleanupSelection) === null || _cleanupSelection === void 0 || _cleanupSelection();
@@ -23,6 +26,7 @@ export var profileCardRenderer = function profileCardRenderer(_ref) {
     listener: function listener() {
       if (dom instanceof HTMLElement && options !== null && options !== void 0 && options.profilecardProvider && !renderingProfileCard) {
         var _api$selection;
+        dom.setAttribute('aria-expanded', 'true');
         renderingProfileCard = true;
         portalProviderAPI.render(function () {
           return /*#__PURE__*/React.createElement(ProfileCardComponent, {

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

@@ -10,7 +10,7 @@ import { ComponentNames } from '@atlaskit/mention/types';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { MentionNodeView } from '../nodeviews/mention';
-import { mentionNodeView } from '../nodeviews/mentionNodeView';
+import { MentionNodeView as VanillaMentionNodeView } from '../nodeviews/mentionNodeView';
 import { MENTION_PROVIDER_REJECTED, MENTION_PROVIDER_UNDEFINED } from '../types';
 import { mentionPluginKey } from './key';
 import { canMentionBeCreatedInRange } from './utils';
@@ -18,7 +18,7 @@ export var ACTIONS = {
   SET_PROVIDER: 'SET_PROVIDER'
 };
 var PACKAGE_NAME = "@atlaskit/editor-plugin-mentions";
-var PACKAGE_VERSION = "4.3.2";
+var PACKAGE_VERSION = "4.4.0";
 var setProvider = function setProvider(provider) {
   return function (state, dispatch) {
     if (dispatch) {
@@ -94,11 +94,13 @@ export function createMentionPlugin(_ref) {
     props: {
       nodeViews: {
         mention: function mention(node, view, getPos, decorations, innerDecorations) {
-          return editorExperiment('platform_editor_vanilla_dom', true) ? mentionNodeView({
+          return editorExperiment('platform_editor_vanilla_dom', true, {
+            exposure: true
+          }) ? new VanillaMentionNodeView(node, {
             options: options,
             api: api,
             portalProviderAPI: pmPluginFactoryParams.portalProviderAPI
-          })(node, view, getPos, decorations, innerDecorations) : getInlineNodeViewProducer({
+          }) : getInlineNodeViewProducer({
             pmPluginFactoryParams: pmPluginFactoryParams,
             Component: MentionNodeView,
             extraComponentProps: {

package/dist/esm/types/index.js

@@ -1,2 +1,8 @@
 export var MENTION_PROVIDER_REJECTED = 'REJECTED';
-export var MENTION_PROVIDER_UNDEFINED = 'UNDEFINED';
+export var MENTION_PROVIDER_UNDEFINED = 'UNDEFINED';
+
+/**
+ * @private
+ * @deprecated Use {@link MentionsPluginOptions} instead.
+ * @see https://product-fabric.atlassian.net/browse/ED-27496
+ */

package/dist/esm/ui/PopperWrapper.js

@@ -1,6 +1,8 @@
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import React from 'react';
 import { Popper as ReactPopper } from '@atlaskit/popper';
 import Portal from '@atlaskit/portal';
+import { useFocusTrap } from './useFocusTrap';
 /**
  * A popup wrapper to match the behaviour of `@atlaskit/popup`
  *
@@ -15,21 +17,35 @@ import Portal from '@atlaskit/portal';
 export function Popup(_ref) {
   var referenceElement = _ref.referenceElement,
     children = _ref.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(Portal, null, /*#__PURE__*/React.createElement(ReactPopper, {
     referenceElement: referenceElement,
     offset: [0, 8],
     placement: "bottom-end",
     strategy: "fixed"
   }, function (_ref2) {
-    var ref = _ref2.ref,
+    var _ref3 = _ref2.ref,
       style = _ref2.style;
-    return (
-      /*#__PURE__*/
+    return /*#__PURE__*/React.createElement("div", {
+      ref: function ref(node) {
+        if (node) {
+          if (typeof _ref3 === 'function') {
+            _ref3(node);
+          } else {
+            _ref3.current = node;
+          }
+          setPopupRef(node);
+        }
+      }
       // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
-      React.createElement("div", {
-        ref: ref,
-        style: style
-      }, children)
-    );
+      ,
+      style: style
+    }, children);
   }));
 }

package/dist/esm/ui/useFocusTrap.js

@@ -0,0 +1,36 @@
+/**
+ * Custom hook to add focus trap
+ * used for focus trap in ReactionPicker
+ * copied from useFocusManager in @atlaskit/popup
+ */
+import { useEffect } from 'react';
+import createFocusTrap from 'focus-trap';
+export var useFocusTrap = function useFocusTrap(_ref) {
+  var targetRef = _ref.targetRef;
+  useEffect(function () {
+    if (!targetRef) {
+      return;
+    }
+    var trapConfig = {
+      clickOutsideDeactivates: true,
+      escapeDeactivates: true,
+      initialFocus: targetRef,
+      fallbackFocus: targetRef,
+      returnFocusOnDeactivate: true
+    };
+    var focusTrap = createFocusTrap(targetRef, trapConfig);
+
+    // wait for the popup to reposition itself before we focus
+    var frameId = requestAnimationFrame(function () {
+      frameId = null;
+      focusTrap.activate();
+    });
+    return function () {
+      if (frameId !== null) {
+        cancelAnimationFrame(frameId);
+        frameId = null;
+      }
+      focusTrap.deactivate();
+    };
+  }, [targetRef]);
+};

package/dist/types/index.d.ts

@@ -1,3 +1,3 @@
 export { mentionsPlugin } from './mentionsPlugin';
 export type { MentionsPlugin } from './mentionsPluginType';
-export type { MentionPluginConfig, MentionPluginOptions, MentionSharedState } from './types';
+export type { MentionPluginConfig, MentionPluginOptions, MentionsPluginOptions, MentionSharedState, } from './types';

package/dist/types/nodeviews/mentionNodeView.d.ts

@@ -1,6 +1,7 @@
-import type { NodeViewConstructor } from '@atlaskit/editor-common/lazy-node-view';
 import { type PortalProviderAPI } from '@atlaskit/editor-common/portal';
 import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
+import { Node as PMNode } from '@atlaskit/editor-prosemirror/model';
+import type { NodeView } from '@atlaskit/editor-prosemirror/view';
 import type { MentionsPlugin } from '../mentionsPluginType';
 import { type MentionPluginOptions } from '../types';
 interface MentionNodeViewProps {
@@ -8,5 +9,24 @@ interface MentionNodeViewProps {
     api: ExtractInjectionAPI<MentionsPlugin> | undefined;
     portalProviderAPI: PortalProviderAPI;
 }
-export declare const mentionNodeView: (config: MentionNodeViewProps) => NodeViewConstructor;
+export declare class MentionNodeView implements NodeView {
+    private state;
+    dom: Node;
+    domElement: HTMLElement | undefined;
+    contentDOM: HTMLElement | undefined;
+    private config;
+    private node;
+    private cleanup;
+    private destroyProfileCard;
+    private removeProfileCard;
+    private mentionPrimitiveElement;
+    constructor(node: PMNode, config: MentionNodeViewProps);
+    private setClassList;
+    private setTextContent;
+    private updateState;
+    private nodeIsEqual;
+    update(node: PMNode): boolean;
+    destroy(): void;
+    deselectNode(): void;
+}
 export {};

package/dist/types/nodeviews/profileCardRenderer.d.ts

@@ -5,7 +5,7 @@ import type { MentionsPlugin } from '../mentionsPluginType';
 import { type MentionPluginOptions } from '../types';
 export declare const profileCardRenderer: ({ dom, options, portalProviderAPI, node, api, }: {
     dom: Node;
-    options?: MentionPluginOptions | undefined;
+    options?: import("../types").MentionsPluginOptions | undefined;
     portalProviderAPI: PortalProviderAPI;
     node: PMNode;
     api: ExtractInjectionAPI<MentionsPlugin> | undefined;

package/dist/types/types/index.d.ts

@@ -15,7 +15,7 @@ export interface MentionPluginConfig {
     insertDisplayName?: boolean;
     profilecardProvider?: Promise<ProfilecardProvider>;
 }
-export interface MentionPluginOptions extends MentionPluginConfig {
+export interface MentionsPluginOptions extends MentionPluginConfig {
     mentionProvider?: Providers['mentionProvider'];
     sanitizePrivateContent?: boolean;
     allowZeroWidthSpaceAfter?: boolean;
@@ -26,6 +26,12 @@ export interface MentionPluginOptions extends MentionPluginConfig {
         taskLocalId?: string;
     }[]) => void;
 }
+/**
+ * @private
+ * @deprecated Use {@link MentionsPluginOptions} instead.
+ * @see https://product-fabric.atlassian.net/browse/ED-27496
+ */
+export type MentionPluginOptions = MentionsPluginOptions;
 export type MentionPluginState = {
     mentionProvider?: MentionProvider;
     mentions?: Array<MentionDescription>;

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

@@ -0,0 +1,4 @@
+export type FocusManagerHook = {
+    targetRef: HTMLDivElement | null;
+};
+export declare const useFocusTrap: ({ targetRef }: FocusManagerHook) => void;

package/dist/types-ts4.5/index.d.ts

@@ -1,3 +1,3 @@
 export { mentionsPlugin } from './mentionsPlugin';
 export type { MentionsPlugin } from './mentionsPluginType';
-export type { MentionPluginConfig, MentionPluginOptions, MentionSharedState } from './types';
+export type { MentionPluginConfig, MentionPluginOptions, MentionsPluginOptions, MentionSharedState, } from './types';

package/dist/types-ts4.5/nodeviews/mentionNodeView.d.ts

@@ -1,6 +1,7 @@
-import type { NodeViewConstructor } from '@atlaskit/editor-common/lazy-node-view';
 import { type PortalProviderAPI } from '@atlaskit/editor-common/portal';
 import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
+import { Node as PMNode } from '@atlaskit/editor-prosemirror/model';
+import type { NodeView } from '@atlaskit/editor-prosemirror/view';
 import type { MentionsPlugin } from '../mentionsPluginType';
 import { type MentionPluginOptions } from '../types';
 interface MentionNodeViewProps {
@@ -8,5 +9,24 @@ interface MentionNodeViewProps {
     api: ExtractInjectionAPI<MentionsPlugin> | undefined;
     portalProviderAPI: PortalProviderAPI;
 }
-export declare const mentionNodeView: (config: MentionNodeViewProps) => NodeViewConstructor;
+export declare class MentionNodeView implements NodeView {
+    private state;
+    dom: Node;
+    domElement: HTMLElement | undefined;
+    contentDOM: HTMLElement | undefined;
+    private config;
+    private node;
+    private cleanup;
+    private destroyProfileCard;
+    private removeProfileCard;
+    private mentionPrimitiveElement;
+    constructor(node: PMNode, config: MentionNodeViewProps);
+    private setClassList;
+    private setTextContent;
+    private updateState;
+    private nodeIsEqual;
+    update(node: PMNode): boolean;
+    destroy(): void;
+    deselectNode(): void;
+}
 export {};

package/dist/types-ts4.5/nodeviews/profileCardRenderer.d.ts

@@ -5,7 +5,7 @@ import type { MentionsPlugin } from '../mentionsPluginType';
 import { type MentionPluginOptions } from '../types';
 export declare const profileCardRenderer: ({ dom, options, portalProviderAPI, node, api, }: {
     dom: Node;
-    options?: MentionPluginOptions | undefined;
+    options?: import("../types").MentionsPluginOptions | undefined;
     portalProviderAPI: PortalProviderAPI;
     node: PMNode;
     api: ExtractInjectionAPI<MentionsPlugin> | undefined;

package/dist/types-ts4.5/types/index.d.ts

@@ -15,7 +15,7 @@ export interface MentionPluginConfig {
     insertDisplayName?: boolean;
     profilecardProvider?: Promise<ProfilecardProvider>;
 }
-export interface MentionPluginOptions extends MentionPluginConfig {
+export interface MentionsPluginOptions extends MentionPluginConfig {
     mentionProvider?: Providers['mentionProvider'];
     sanitizePrivateContent?: boolean;
     allowZeroWidthSpaceAfter?: boolean;
@@ -26,6 +26,12 @@ export interface MentionPluginOptions extends MentionPluginConfig {
         taskLocalId?: string;
     }[]) => void;
 }
+/**
+ * @private
+ * @deprecated Use {@link MentionsPluginOptions} instead.
+ * @see https://product-fabric.atlassian.net/browse/ED-27496
+ */
+export type MentionPluginOptions = MentionsPluginOptions;
 export type MentionPluginState = {
     mentionProvider?: MentionProvider;
     mentions?: Array<MentionDescription>;

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

@@ -0,0 +1,4 @@
+export type FocusManagerHook = {
+    targetRef: HTMLDivElement | null;
+};
+export declare const useFocusTrap: ({ targetRef }: FocusManagerHook) => void;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-mentions",
-	"version": "4.3.2",
+	"version": "4.4.0",
 	"description": "Mentions plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -35,10 +35,10 @@
 	"dependencies": {
 		"@atlaskit/adf-schema": "^47.6.0",
 		"@atlaskit/css": "^0.10.0",
-		"@atlaskit/editor-common": "^103.0.0",
+		"@atlaskit/editor-common": "^103.4.0",
 		"@atlaskit/editor-plugin-analytics": "^2.2.0",
 		"@atlaskit/editor-plugin-base": "^2.3.0",
-		"@atlaskit/editor-plugin-context-identifier": "^2.0.0",
+		"@atlaskit/editor-plugin-context-identifier": "^2.1.0",
 		"@atlaskit/editor-plugin-selection": "^2.1.0",
 		"@atlaskit/editor-plugin-type-ahead": "^2.3.0",
 		"@atlaskit/editor-prosemirror": "7.0.0",
@@ -54,6 +54,7 @@
 		"@babel/runtime": "^7.0.0",
 		"@compiled/react": "^0.18.3",
 		"bind-event-listener": "^3.0.0",
+		"focus-trap": "^2.4.5",
 		"uuid": "^3.1.0"
 	},
 	"peerDependencies": {