@atlaskit/editor-plugin-mentions 18.2.5 → 18.2.7

package/CHANGELOG.md

@@ -1,5 +1,32 @@
 # @atlaskit/editor-plugin-mentions
 
+## 18.2.7
+
+### Patch Changes
+
+- Updated dependencies
+
+## 18.2.6
+
+### Patch Changes
+
+- [`3ae04490ac0f4`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/3ae04490ac0f4) -
+  Render the disabled mention chip tooltip without React. Behind the
+  `platform_editor_use_vanilla_components` experiment, with no visual change.
+  - Disabled mention chips no longer mount a React tooltip, its portal, and the DOM-to-React event
+    bridge that fed it.
+  - Tooltips release their positioning instance when they close, rather than keeping one alive per
+    hovered chip.
+  - Tooltips remove their own element and attributes when destroyed, so mention and emoji chips no
+    longer leave orphaned popovers behind.
+  - Re-hovering a tooltip while it is closing keeps it open, matching `@atlaskit/tooltip`.
+    Previously the pending hide still landed and the tooltip disappeared under the pointer.
+  - Tooltips close when they hide, instead of waiting on a transition that nothing declares.
+    Required by the change above: releasing the positioning instance while the popover was still
+    open left it behind as an invisible hit target over the content.
+
+- Updated dependencies
+
 ## 18.2.5
 
 ### Patch Changes

package/dist/cjs/nodeviews/mentionNodeSpec.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.mentionNodeSpec = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-var _adfSchema = require("@atlaskit/adf-schema");
+var _mention = require("@atlaskit/adf-schema/mention");
 var _lazyNodeView = require("@atlaskit/editor-common/lazy-node-view");
 var _expVal = require("@atlaskit/tmp-editor-statsig/expVal");
 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; }
@@ -21,9 +21,9 @@ var isSSR = Boolean(process.env.REACT_SSR);
  */
 var mentionNodeSpec = exports.mentionNodeSpec = function mentionNodeSpec() {
   if (isSSR) {
-    return _adfSchema.mention;
+    return _mention.mention;
   }
-  return _objectSpread(_objectSpread({}, _adfSchema.mention), {}, {
+  return _objectSpread(_objectSpread({}, _mention.mention), {}, {
     toDOM: function toDOM(node) {
       // packages/elements/mention/src/components/Mention/index.tsx
       var mentionAttrs = {

package/dist/cjs/nodeviews/mentionNodeView.js

@@ -11,6 +11,8 @@ var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/creat
 var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _browser = require("@atlaskit/editor-common/browser");
+var _coreUtils = require("@atlaskit/editor-common/core-utils");
+var _vanillaTooltip = require("@atlaskit/editor-common/vanilla-tooltip");
 var _whitespace = require("@atlaskit/editor-common/whitespace");
 var _model = require("@atlaskit/editor-prosemirror/model");
 var _constants = require("@atlaskit/mention/constants");
@@ -29,6 +31,12 @@ var primitiveClassName = 'editor-mention-primitive';
 var primitiveWithAvatarClassName = 'editor-mention-primitive-with-avatar';
 var avatarContainerClassName = 'editor-mention-avatar';
 var mentionTextClassName = 'editor-mention-text';
+/**
+ * Classes applied to the disabled-reason tooltip. `ak-editor-vanilla-tooltip-default` opts into
+ * the shared `VanillaTooltip` look, defined as `vanillaTooltipDefaultStyles` in both
+ * EditorContentContainer stylesheets — keep them in sync when renaming.
+ */
+var disabledTooltipClassNames = 'ak-editor-vanilla-tooltip-default mention-disabled-tooltip';
 var genericMentionIds = ['HipChat', 'all', 'here'];
 var unknownMentionText = "@".concat(_constants.UNKNOWN_USER_ID);
 // eslint-disable-next-line require-unicode-regexp
@@ -291,6 +299,32 @@ var MentionNodeView = exports.MentionNodeView = /*#__PURE__*/function () {
         _this2.updateState(_this2.subscribedProvider);
       });
     }
+
+    /**
+     * Bind to `this.domElement`, the node-view wrapper. `VanillaTooltip` appends the popover to
+     * its trigger and listens for hover/focus there. This wrapper is also where `role`,
+     * `tabindex`, and aria are set, so `aria-describedby` belongs on it — not on the inner
+     * `.editor-mention-primitive` that the React tooltip still wraps.
+     */
+  }, {
+    key: "syncVanillaDisabledTooltip",
+    value: function syncVanillaDisabledTooltip(tooltipText) {
+      var _this$vanillaDisabled;
+      var trigger = this.domElement;
+      if (!trigger || tooltipText === this.vanillaDisabledTooltipText) {
+        return;
+      }
+
+      // A changed reason rebuilds rather than re-texting, so nothing out here has to reach into
+      // the element `VanillaTooltip` owns. `destroy()` takes that element with it.
+      (_this$vanillaDisabled = this.vanillaDisabledTooltip) === null || _this$vanillaDisabled === void 0 || _this$vanillaDisabled.destroy();
+      this.vanillaDisabledTooltip = undefined;
+      this.vanillaDisabledTooltipText = tooltipText;
+      if ((0, _coreUtils.isSSR)() || !tooltipText) {
+        return;
+      }
+      this.vanillaDisabledTooltip = new _vanillaTooltip.VanillaTooltip(trigger, tooltipText, undefined, disabledTooltipClassNames);
+    }
   }, {
     key: "syncDisabledTooltip",
     value: function syncDisabledTooltip(disabledState) {
@@ -298,6 +332,10 @@ var MentionNodeView = exports.MentionNodeView = /*#__PURE__*/function () {
       // branch on a truthy string instead of re-asserting non-null fields
       // off of `disabledState`.
       var tooltipText = disabledState !== null && disabledState !== void 0 && disabledState.disabled ? disabledState.tooltip : undefined;
+      if ((0, _isExperimentEnabled.isExperimentEnabled)('platform_editor_use_vanilla_components')) {
+        this.syncVanillaDisabledTooltip(tooltipText);
+        return;
+      }
       var chip = this.mentionPrimitiveElement;
       var portalProviderAPI = this.config.portalProviderAPI;
       if (!chip || !portalProviderAPI) {
@@ -473,6 +511,12 @@ var MentionNodeView = exports.MentionNodeView = /*#__PURE__*/function () {
       this.mentionAvatar = undefined;
       (_this$disabledTooltip = this.disabledTooltip) === null || _this$disabledTooltip === void 0 || _this$disabledTooltip.destroy();
       this.disabledTooltip = undefined;
+      if ((0, _isExperimentEnabled.isExperimentEnabled)('platform_editor_use_vanilla_components')) {
+        var _this$vanillaDisabled2;
+        (_this$vanillaDisabled2 = this.vanillaDisabledTooltip) === null || _this$vanillaDisabled2 === void 0 || _this$vanillaDisabled2.destroy();
+        this.vanillaDisabledTooltip = undefined;
+        this.vanillaDisabledTooltipText = undefined;
+      }
       (_this$unsubscribeFrom2 = this.unsubscribeFromDisabledStateChanges) === null || _this$unsubscribeFrom2 === void 0 || _this$unsubscribeFrom2.call(this);
       this.unsubscribeFromDisabledStateChanges = undefined;
       this.subscribedProvider = undefined;

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

@@ -74,7 +74,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 = "18.2.4";
+var PACKAGE_VERSION = "18.2.6";
 var setProvider = function setProvider(provider) {
   return function (state, dispatch) {
     if (dispatch) {
@@ -607,7 +607,9 @@ function createMentionPlugin(_ref2) {
                     from = _step$value[0],
                     to = _step$value[1];
                   var clampedTo = Math.min(to, newState.doc.content.size);
-                  if (from >= clampedTo) continue;
+                  if (from >= clampedTo) {
+                    continue;
+                  }
                   newState.doc.nodesBetween(from, clampedTo, function (node, pos) {
                     if (node.type !== _mentionSchema || !isAgentUserType(node.attrs.userType)) {
                       return true;
@@ -649,7 +651,9 @@ function createMentionPlugin(_ref2) {
                     _from = _step2$value[0],
                     _to = _step2$value[1];
                   var clampedOldTo = Math.min(_to, oldState.doc.content.size);
-                  if (_from >= clampedOldTo) continue;
+                  if (_from >= clampedOldTo) {
+                    continue;
+                  }
                   oldState.doc.nodesBetween(_from, clampedOldTo, function (node) {
                     if (node.type !== _mentionSchema || !isAgentUserType(node.attrs.userType)) {
                       return true;

package/dist/cjs/ui/InviteItem/InviteItemWithEmailDomain.js

@@ -16,7 +16,7 @@ var _reactIntl = require("react-intl");
 var _messages = require("@atlaskit/editor-common/messages");
 var _email = _interopRequireDefault(require("@atlaskit/icon/core/email"));
 var _statusError = _interopRequireDefault(require("@atlaskit/icon/core/status-error"));
-var _userPicker = require("@atlaskit/user-picker");
+var _emailValidation = require("@atlaskit/user-picker/components/email-validation");
 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); }
 var mentionItemStyle = null;
 var mentionItemSelectedStyle = null;
@@ -88,7 +88,7 @@ var getInviteOption = function getInviteOption(inputValue, suggestedEmailDomain)
   if (inputValue.includes(' ') && inputValue.includes('@')) {
     return truncateInviteOption(inputValue);
   }
-  var isEmail = inputValue && [VALID_OPTION, POTENTIAL_OPTION].includes((0, _userPicker.isValidEmail)(inputValue));
+  var isEmail = inputValue && [VALID_OPTION, POTENTIAL_OPTION].includes((0, _emailValidation.isValidEmail)(inputValue));
   if (isEmail || !suggestedEmailDomain) {
     return truncateInviteOption(inputValue);
   }

package/dist/cjs/ui/ProfileCardComponent.js

@@ -18,7 +18,7 @@ var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/sli
 var _bindEventListener = require("bind-event-listener");
 var _reactLoadable = _interopRequireDefault(require("react-loadable"));
 var _fg = require("@atlaskit/platform-feature-flags/fg");
-var _user = require("@atlaskit/profilecard/user");
+var _lazyProfileCard = require("@atlaskit/profilecard/lazy-profile-card");
 var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
 var _expVal = require("@atlaskit/tmp-editor-statsig/expVal");
 var _PopperWrapper = require("./PopperWrapper");
@@ -246,7 +246,7 @@ var UserProfileCardContent = function UserProfileCardContent(_ref8) {
     hasError = _useProfileCardState.hasError;
   return /*#__PURE__*/React.createElement(LoadingWrapper, {
     isLoading: isLoading
-  }, /*#__PURE__*/React.createElement(_user.ProfileCardLazy, {
+  }, /*#__PURE__*/React.createElement(_lazyProfileCard.ProfileCardLazy, {
     avatarUrl: data === null || data === void 0 ? void 0 : data.avatarUrl,
     accountType: data === null || data === void 0 ? void 0 : data.accountType,
     status: data === null || data === void 0 ? void 0 : data.status,

package/dist/es2019/nodeviews/mentionNodeSpec.js

@@ -1,4 +1,4 @@
-import { mention } from '@atlaskit/adf-schema';
+import { mention } from '@atlaskit/adf-schema/mention';
 import { convertToInlineCss } from '@atlaskit/editor-common/lazy-node-view';
 import { expVal } from '@atlaskit/tmp-editor-statsig/expVal';
 const isSSR = Boolean(process.env.REACT_SSR);

package/dist/es2019/nodeviews/mentionNodeView.js

@@ -1,5 +1,7 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import { getBrowserInfo } from '@atlaskit/editor-common/browser';
+import { isSSR } from '@atlaskit/editor-common/core-utils';
+import { VanillaTooltip } from '@atlaskit/editor-common/vanilla-tooltip';
 import { ZERO_WIDTH_SPACE } from '@atlaskit/editor-common/whitespace';
 import { DOMSerializer } from '@atlaskit/editor-prosemirror/model';
 // oxlint-disable-next-line import/no-duplicates
@@ -18,6 +20,12 @@ const primitiveClassName = 'editor-mention-primitive';
 const primitiveWithAvatarClassName = 'editor-mention-primitive-with-avatar';
 const avatarContainerClassName = 'editor-mention-avatar';
 const mentionTextClassName = 'editor-mention-text';
+/**
+ * Classes applied to the disabled-reason tooltip. `ak-editor-vanilla-tooltip-default` opts into
+ * the shared `VanillaTooltip` look, defined as `vanillaTooltipDefaultStyles` in both
+ * EditorContentContainer stylesheets — keep them in sync when renaming.
+ */
+const disabledTooltipClassNames = 'ak-editor-vanilla-tooltip-default mention-disabled-tooltip';
 const genericMentionIds = ['HipChat', 'all', 'here'];
 const unknownMentionText = `@${UNKNOWN_USER_ID}`;
 // eslint-disable-next-line require-unicode-regexp
@@ -251,11 +259,39 @@ export class MentionNodeView {
       this.updateState(this.subscribedProvider);
     });
   }
+
+  /**
+   * Bind to `this.domElement`, the node-view wrapper. `VanillaTooltip` appends the popover to
+   * its trigger and listens for hover/focus there. This wrapper is also where `role`,
+   * `tabindex`, and aria are set, so `aria-describedby` belongs on it — not on the inner
+   * `.editor-mention-primitive` that the React tooltip still wraps.
+   */
+  syncVanillaDisabledTooltip(tooltipText) {
+    var _this$vanillaDisabled;
+    const trigger = this.domElement;
+    if (!trigger || tooltipText === this.vanillaDisabledTooltipText) {
+      return;
+    }
+
+    // A changed reason rebuilds rather than re-texting, so nothing out here has to reach into
+    // the element `VanillaTooltip` owns. `destroy()` takes that element with it.
+    (_this$vanillaDisabled = this.vanillaDisabledTooltip) === null || _this$vanillaDisabled === void 0 ? void 0 : _this$vanillaDisabled.destroy();
+    this.vanillaDisabledTooltip = undefined;
+    this.vanillaDisabledTooltipText = tooltipText;
+    if (isSSR() || !tooltipText) {
+      return;
+    }
+    this.vanillaDisabledTooltip = new VanillaTooltip(trigger, tooltipText, undefined, disabledTooltipClassNames);
+  }
   syncDisabledTooltip(disabledState) {
     // Capture the tooltip text into a local so the rest of the method can
     // branch on a truthy string instead of re-asserting non-null fields
     // off of `disabledState`.
     const tooltipText = disabledState !== null && disabledState !== void 0 && disabledState.disabled ? disabledState.tooltip : undefined;
+    if (isExperimentEnabled('platform_editor_use_vanilla_components')) {
+      this.syncVanillaDisabledTooltip(tooltipText);
+      return;
+    }
     const chip = this.mentionPrimitiveElement;
     const {
       portalProviderAPI
@@ -401,6 +437,12 @@ export class MentionNodeView {
     this.mentionAvatar = undefined;
     (_this$disabledTooltip = this.disabledTooltip) === null || _this$disabledTooltip === void 0 ? void 0 : _this$disabledTooltip.destroy();
     this.disabledTooltip = undefined;
+    if (isExperimentEnabled('platform_editor_use_vanilla_components')) {
+      var _this$vanillaDisabled2;
+      (_this$vanillaDisabled2 = this.vanillaDisabledTooltip) === null || _this$vanillaDisabled2 === void 0 ? void 0 : _this$vanillaDisabled2.destroy();
+      this.vanillaDisabledTooltip = undefined;
+      this.vanillaDisabledTooltipText = undefined;
+    }
     (_this$unsubscribeFrom2 = this.unsubscribeFromDisabledStateChanges) === null || _this$unsubscribeFrom2 === void 0 ? void 0 : _this$unsubscribeFrom2.call(this);
     this.unsubscribeFromDisabledStateChanges = undefined;
     this.subscribedProvider = undefined;

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

@@ -58,7 +58,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 = "18.2.4";
+const PACKAGE_VERSION = "18.2.6";
 const setProvider = provider => (state, dispatch) => {
   if (dispatch) {
     dispatch(state.tr.setMeta(mentionPluginKey, {
@@ -584,7 +584,9 @@ export function createMentionPlugin({
             if (stepsTouchMentions) {
               for (const [from, to] of newDocRanges) {
                 const clampedTo = Math.min(to, newState.doc.content.size);
-                if (from >= clampedTo) continue;
+                if (from >= clampedTo) {
+                  continue;
+                }
                 newState.doc.nodesBetween(from, clampedTo, (node, pos) => {
                   if (node.type !== mentionSchema || !isAgentUserType(node.attrs.userType)) {
                     return true;
@@ -611,7 +613,9 @@ export function createMentionPlugin({
               }
               for (const [from, to] of oldDocRanges) {
                 const clampedOldTo = Math.min(to, oldState.doc.content.size);
-                if (from >= clampedOldTo) continue;
+                if (from >= clampedOldTo) {
+                  continue;
+                }
                 oldState.doc.nodesBetween(from, clampedOldTo, node => {
                   if (node.type !== mentionSchema || !isAgentUserType(node.attrs.userType)) {
                     return true;

package/dist/es2019/ui/InviteItem/InviteItemWithEmailDomain.js

@@ -7,7 +7,7 @@ import { FormattedMessage, injectIntl } from 'react-intl';
 import { mentionMessages as messages } from '@atlaskit/editor-common/messages';
 import EmailIcon from '@atlaskit/icon/core/email';
 import StatusErrorIcon from '@atlaskit/icon/core/status-error';
-import { isValidEmail } from '@atlaskit/user-picker';
+import { isValidEmail } from '@atlaskit/user-picker/components/email-validation';
 const mentionItemStyle = null;
 const mentionItemSelectedStyle = null;
 const displayNameStyles = {

package/dist/es2019/ui/ProfileCardComponent.js

@@ -6,7 +6,7 @@ import { useEffect, useMemo, useState } from 'react';
 import { bind } from 'bind-event-listener';
 import Loadable from 'react-loadable';
 import { fg } from '@atlaskit/platform-feature-flags/fg';
-import { ProfileCardLazy } from '@atlaskit/profilecard/user';
+import { ProfileCardLazy } from '@atlaskit/profilecard/lazy-profile-card';
 import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { expVal } from '@atlaskit/tmp-editor-statsig/expVal';
 import { Popup } from './PopperWrapper';

package/dist/esm/nodeviews/mentionNodeSpec.js

@@ -1,7 +1,7 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 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 { mention } from '@atlaskit/adf-schema';
+import { mention } from '@atlaskit/adf-schema/mention';
 import { convertToInlineCss } from '@atlaskit/editor-common/lazy-node-view';
 import { expVal } from '@atlaskit/tmp-editor-statsig/expVal';
 var isSSR = Boolean(process.env.REACT_SSR);

package/dist/esm/nodeviews/mentionNodeView.js

@@ -6,6 +6,8 @@ import _regeneratorRuntime from "@babel/runtime/regenerator";
 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 { getBrowserInfo } from '@atlaskit/editor-common/browser';
+import { isSSR } from '@atlaskit/editor-common/core-utils';
+import { VanillaTooltip } from '@atlaskit/editor-common/vanilla-tooltip';
 import { ZERO_WIDTH_SPACE } from '@atlaskit/editor-common/whitespace';
 import { DOMSerializer } from '@atlaskit/editor-prosemirror/model';
 // oxlint-disable-next-line import/no-duplicates
@@ -24,6 +26,12 @@ var primitiveClassName = 'editor-mention-primitive';
 var primitiveWithAvatarClassName = 'editor-mention-primitive-with-avatar';
 var avatarContainerClassName = 'editor-mention-avatar';
 var mentionTextClassName = 'editor-mention-text';
+/**
+ * Classes applied to the disabled-reason tooltip. `ak-editor-vanilla-tooltip-default` opts into
+ * the shared `VanillaTooltip` look, defined as `vanillaTooltipDefaultStyles` in both
+ * EditorContentContainer stylesheets — keep them in sync when renaming.
+ */
+var disabledTooltipClassNames = 'ak-editor-vanilla-tooltip-default mention-disabled-tooltip';
 var genericMentionIds = ['HipChat', 'all', 'here'];
 var unknownMentionText = "@".concat(UNKNOWN_USER_ID);
 // eslint-disable-next-line require-unicode-regexp
@@ -286,6 +294,32 @@ export var MentionNodeView = /*#__PURE__*/function () {
         _this2.updateState(_this2.subscribedProvider);
       });
     }
+
+    /**
+     * Bind to `this.domElement`, the node-view wrapper. `VanillaTooltip` appends the popover to
+     * its trigger and listens for hover/focus there. This wrapper is also where `role`,
+     * `tabindex`, and aria are set, so `aria-describedby` belongs on it — not on the inner
+     * `.editor-mention-primitive` that the React tooltip still wraps.
+     */
+  }, {
+    key: "syncVanillaDisabledTooltip",
+    value: function syncVanillaDisabledTooltip(tooltipText) {
+      var _this$vanillaDisabled;
+      var trigger = this.domElement;
+      if (!trigger || tooltipText === this.vanillaDisabledTooltipText) {
+        return;
+      }
+
+      // A changed reason rebuilds rather than re-texting, so nothing out here has to reach into
+      // the element `VanillaTooltip` owns. `destroy()` takes that element with it.
+      (_this$vanillaDisabled = this.vanillaDisabledTooltip) === null || _this$vanillaDisabled === void 0 || _this$vanillaDisabled.destroy();
+      this.vanillaDisabledTooltip = undefined;
+      this.vanillaDisabledTooltipText = tooltipText;
+      if (isSSR() || !tooltipText) {
+        return;
+      }
+      this.vanillaDisabledTooltip = new VanillaTooltip(trigger, tooltipText, undefined, disabledTooltipClassNames);
+    }
   }, {
     key: "syncDisabledTooltip",
     value: function syncDisabledTooltip(disabledState) {
@@ -293,6 +327,10 @@ export var MentionNodeView = /*#__PURE__*/function () {
       // branch on a truthy string instead of re-asserting non-null fields
       // off of `disabledState`.
       var tooltipText = disabledState !== null && disabledState !== void 0 && disabledState.disabled ? disabledState.tooltip : undefined;
+      if (isExperimentEnabled('platform_editor_use_vanilla_components')) {
+        this.syncVanillaDisabledTooltip(tooltipText);
+        return;
+      }
       var chip = this.mentionPrimitiveElement;
       var portalProviderAPI = this.config.portalProviderAPI;
       if (!chip || !portalProviderAPI) {
@@ -468,6 +506,12 @@ export var MentionNodeView = /*#__PURE__*/function () {
       this.mentionAvatar = undefined;
       (_this$disabledTooltip = this.disabledTooltip) === null || _this$disabledTooltip === void 0 || _this$disabledTooltip.destroy();
       this.disabledTooltip = undefined;
+      if (isExperimentEnabled('platform_editor_use_vanilla_components')) {
+        var _this$vanillaDisabled2;
+        (_this$vanillaDisabled2 = this.vanillaDisabledTooltip) === null || _this$vanillaDisabled2 === void 0 || _this$vanillaDisabled2.destroy();
+        this.vanillaDisabledTooltip = undefined;
+        this.vanillaDisabledTooltipText = undefined;
+      }
       (_this$unsubscribeFrom2 = this.unsubscribeFromDisabledStateChanges) === null || _this$unsubscribeFrom2 === void 0 || _this$unsubscribeFrom2.call(this);
       this.unsubscribeFromDisabledStateChanges = undefined;
       this.subscribedProvider = undefined;

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

@@ -65,7 +65,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 = "18.2.4";
+var PACKAGE_VERSION = "18.2.6";
 var setProvider = function setProvider(provider) {
   return function (state, dispatch) {
     if (dispatch) {
@@ -598,7 +598,9 @@ export function createMentionPlugin(_ref2) {
                     from = _step$value[0],
                     to = _step$value[1];
                   var clampedTo = Math.min(to, newState.doc.content.size);
-                  if (from >= clampedTo) continue;
+                  if (from >= clampedTo) {
+                    continue;
+                  }
                   newState.doc.nodesBetween(from, clampedTo, function (node, pos) {
                     if (node.type !== _mentionSchema || !isAgentUserType(node.attrs.userType)) {
                       return true;
@@ -640,7 +642,9 @@ export function createMentionPlugin(_ref2) {
                     _from = _step2$value[0],
                     _to = _step2$value[1];
                   var clampedOldTo = Math.min(_to, oldState.doc.content.size);
-                  if (_from >= clampedOldTo) continue;
+                  if (_from >= clampedOldTo) {
+                    continue;
+                  }
                   oldState.doc.nodesBetween(_from, clampedOldTo, function (node) {
                     if (node.type !== _mentionSchema || !isAgentUserType(node.attrs.userType)) {
                       return true;

package/dist/esm/ui/InviteItem/InviteItemWithEmailDomain.js

@@ -8,7 +8,7 @@ import { FormattedMessage, injectIntl } from 'react-intl';
 import { mentionMessages as messages } from '@atlaskit/editor-common/messages';
 import EmailIcon from '@atlaskit/icon/core/email';
 import StatusErrorIcon from '@atlaskit/icon/core/status-error';
-import { isValidEmail } from '@atlaskit/user-picker';
+import { isValidEmail } from '@atlaskit/user-picker/components/email-validation';
 var mentionItemStyle = null;
 var mentionItemSelectedStyle = null;
 var displayNameStyles = {

package/dist/esm/ui/ProfileCardComponent.js

@@ -9,7 +9,7 @@ import { useEffect, useMemo, useState } from 'react';
 import { bind } from 'bind-event-listener';
 import Loadable from 'react-loadable';
 import { fg } from '@atlaskit/platform-feature-flags/fg';
-import { ProfileCardLazy } from '@atlaskit/profilecard/user';
+import { ProfileCardLazy } from '@atlaskit/profilecard/lazy-profile-card';
 import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { expVal } from '@atlaskit/tmp-editor-statsig/expVal';
 import { Popup } from './PopperWrapper';

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

@@ -26,6 +26,8 @@ export declare class MentionNodeView implements NodeView {
     private hasAvatarSlot;
     private isDestroyed;
     private disabledTooltip;
+    private vanillaDisabledTooltip;
+    private vanillaDisabledTooltipText;
     private unsubscribeFromDisabledStateChanges;
     private subscribedProvider;
     constructor(node: PMNode, config: MentionNodeViewProps);
@@ -44,6 +46,13 @@ export declare class MentionNodeView implements NodeView {
      * `onChange` handler when the editor swaps providers.
      */
     private subscribeToProviderDisabledStateChanges;
+    /**
+     * Bind to `this.domElement`, the node-view wrapper. `VanillaTooltip` appends the popover to
+     * its trigger and listens for hover/focus there. This wrapper is also where `role`,
+     * `tabindex`, and aria are set, so `aria-describedby` belongs on it — not on the inner
+     * `.editor-mention-primitive` that the React tooltip still wraps.
+     */
+    private syncVanillaDisabledTooltip;
     private syncDisabledTooltip;
     private setTextContent;
     private setVisibleText;

package/dist/types/pm-plugins/agent-mention-context.d.ts

@@ -1,4 +1,4 @@
-import type { DocNode } from '@atlaskit/adf-schema';
+import type { DocNode } from '@atlaskit/adf-schema/doc';
 import type { Node as PMNode } from '@atlaskit/editor-prosemirror/model';
 /**
  * Returns the direct parent content of an inserted agent mention as prompt ADF.

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

@@ -1,4 +1,4 @@
-import type { DocNode } from '@atlaskit/adf-schema';
+import type { DocNode } from '@atlaskit/adf-schema/doc';
 import type { AnalyticsEventPayload } from '@atlaskit/editor-common/analytics';
 import type { MentionNodeDataProvider } from '@atlaskit/editor-common/mention';
 import type { Providers, ProfilecardProvider } from '@atlaskit/editor-common/provider-factory';

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

@@ -1,5 +1,5 @@
 import type { MentionAttributes } from '@atlaskit/adf-schema/mention';
-import type { DocNode } from '@atlaskit/adf-schema/schema';
+import type { DocNode } from '@atlaskit/adf-schema/doc';
 import type { ProfilecardProvider } from '@atlaskit/editor-common/provider-factory';
 import type { Placement } from '@atlaskit/popper/main';
 import type { ProfileCardClientData, TeamCentralReportingLinesData } from '@atlaskit/profilecard/types';

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-mentions",
-	"version": "18.2.5",
+	"version": "18.2.7",
 	"description": "Mentions plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -47,7 +47,7 @@
 		"@atlaskit/section-message": "^10.2.0",
 		"@atlaskit/teams-app-config": "^3.0.0",
 		"@atlaskit/theme": "^28.2.0",
-		"@atlaskit/tmp-editor-statsig": "^172.0.0",
+		"@atlaskit/tmp-editor-statsig": "^173.0.0",
 		"@atlaskit/tokens": "^16.11.0",
 		"@atlaskit/tooltip": "^24.3.0",
 		"@atlaskit/user-picker": "^13.12.0",