@atlaskit/editor-plugin-mentions 4.2.0 → 4.3.0

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @atlaskit/editor-plugin-mentions
 
+## 4.3.0
+
+### Minor Changes
+
+- [#134205](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/134205)
+  [`7751c880c8ebf`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/7751c880c8ebf) -
+  Refactor mentions node view to vanilla javascript.
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 4.2.0
 
 ### Minor Changes

package/dist/cjs/nodeviews/mentionNodeView.js

@@ -0,0 +1,198 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+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"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
+var _browser = require("@atlaskit/editor-common/browser");
+var _whitespace = require("@atlaskit/editor-common/whitespace");
+var _model = require("@atlaskit/editor-prosemirror/model");
+var _resource = require("@atlaskit/mention/resource");
+var _types = require("@atlaskit/mention/types");
+var _profileCardRenderer2 = require("./profileCardRenderer");
+var primitiveClassName = 'editor-mention-primitive';
+var toDOM = function toDOM(node) {
+  // packages/elements/mention/src/components/Mention/index.tsx
+  var mentionAttrs = {
+    contenteditable: 'false',
+    'data-access-level': node.attrs.accessLevel,
+    'data-mention-id': node.attrs.id,
+    'data-prosemirror-content-type': 'node',
+    'data-prosemirror-node-inline': 'true',
+    'data-prosemirror-node-name': 'mention',
+    'data-prosemirror-node-view-type': 'vanilla',
+    class: 'mentionView-content-wrap inlineNodeView'
+  };
+  return ['span', mentionAttrs, ['span', {
+    class: 'zeroWidthSpaceContainer'
+  }, ['span', {
+    class: 'inlineNodeViewAddZeroWidthSpace'
+  }, _whitespace.ZERO_WIDTH_SPACE]], ['span', {
+    spellcheck: 'false',
+    class: primitiveClassName
+  }, node.attrs.text || '@…'], _browser.browser.android ? ['span', {
+    class: 'zeroWidthSpaceContainer',
+    contenteditable: 'false'
+  }, ['span', {
+    class: 'inlineNodeViewAddZeroWidthSpace'
+  }, _whitespace.ZERO_WIDTH_SPACE]] : ['span', {
+    class: 'inlineNodeViewAddZeroWidthSpace'
+  }, _whitespace.ZERO_WIDTH_SPACE]];
+};
+var processName = function processName(name) {
+  return name.status === _resource.MentionNameStatus.OK ? "@".concat(name.name || '') : "@_|unknown|_";
+};
+var handleProviderName = /*#__PURE__*/function () {
+  var _ref = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee(mentionProvider, node) {
+    var nameDetail, resolvedNameDetail;
+    return _regenerator.default.wrap(function _callee$(_context) {
+      while (1) switch (_context.prev = _context.next) {
+        case 0:
+          if (!((0, _resource.isResolvingMentionProvider)(mentionProvider) && node.attrs.id && !node.attrs.text)) {
+            _context.next = 6;
+            break;
+          }
+          nameDetail = mentionProvider === null || mentionProvider === void 0 ? void 0 : mentionProvider.resolveMentionName(node.attrs.id);
+          _context.next = 4;
+          return nameDetail;
+        case 4:
+          resolvedNameDetail = _context.sent;
+          return _context.abrupt("return", processName(resolvedNameDetail));
+        case 6:
+        case "end":
+          return _context.stop();
+      }
+    }, _callee);
+  }));
+  return function handleProviderName(_x, _x2) {
+    return _ref.apply(this, arguments);
+  };
+}();
+var getNewState = function getNewState(isHighlighted, isRestricted) {
+  if (isHighlighted) {
+    return 'self';
+  }
+  if (isRestricted) {
+    return 'restricted';
+  }
+  return 'default';
+};
+var MentionNodeView = /*#__PURE__*/function () {
+  function MentionNodeView(node, config) {
+    var _api$mention$sharedSt,
+      _this = this;
+    (0, _classCallCheck2.default)(this, MentionNodeView);
+    (0, _defineProperty2.default)(this, "state", 'default');
+    var options = config.options,
+      api = config.api,
+      portalProviderAPI = config.portalProviderAPI;
+    var _DOMSerializer$render = _model.DOMSerializer.renderSpec(document, toDOM(node)),
+      dom = _DOMSerializer$render.dom,
+      contentDOM = _DOMSerializer$render.contentDOM;
+    this.dom = dom;
+    this.contentDOM = contentDOM;
+    this.config = config;
+    this.node = node;
+    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);
+    this.cleanup = api === null || api === void 0 ? void 0 : api.mention.sharedState.onChange(function (_ref3) {
+      var nextSharedState = _ref3.nextSharedState;
+      _this.updateState(nextSharedState === null || nextSharedState === void 0 ? void 0 : nextSharedState.mentionProvider);
+    });
+    var _profileCardRenderer = (0, _profileCardRenderer2.profileCardRenderer)({
+        dom: dom,
+        options: options,
+        portalProviderAPI: portalProviderAPI,
+        node: node,
+        api: api
+      }),
+      destroyProfileCard = _profileCardRenderer.destroyProfileCard,
+      removeProfileCard = _profileCardRenderer.removeProfileCard;
+    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;
+    }
+  }, {
+    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;
+      }
+    }
+  }, {
+    key: "updateState",
+    value: function () {
+      var _updateState = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee2(mentionProvider) {
+        var _mentionProvider$shou;
+        var isHighlighted, newState, name;
+        return _regenerator.default.wrap(function _callee2$(_context2) {
+          while (1) switch (_context2.prev = _context2.next) {
+            case 0:
+              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;
+              newState = getNewState(isHighlighted, (0, _types.isRestricted)(this.node.attrs.accessLevel));
+              if (newState !== this.state) {
+                this.setClassList(newState);
+                this.state = newState;
+              }
+              _context2.next = 5;
+              return handleProviderName(mentionProvider, this.node);
+            case 5:
+              name = _context2.sent;
+              this.setTextContent(name);
+            case 7:
+            case "end":
+              return _context2.stop();
+          }
+        }, _callee2, this);
+      }));
+      function updateState(_x3) {
+        return _updateState.apply(this, arguments);
+      }
+      return updateState;
+    }()
+  }, {
+    key: "destroy",
+    value: function destroy() {
+      var _this$cleanup, _this$destroyProfileC;
+      (_this$cleanup = this.cleanup) === null || _this$cleanup === void 0 || _this$cleanup.call(this);
+      (_this$destroyProfileC = this.destroyProfileCard) === null || _this$destroyProfileC === void 0 || _this$destroyProfileC.call(this);
+    }
+  }, {
+    key: "deselectNode",
+    value: function deselectNode() {
+      var _this$removeProfileCa;
+      (_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

@@ -0,0 +1,63 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.profileCardRenderer = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _bindEventListener = require("bind-event-listener");
+var _v = _interopRequireDefault(require("uuid/v4"));
+var _state = require("@atlaskit/editor-prosemirror/state");
+var _ProfileCardComponent = require("../ui/ProfileCardComponent");
+var profileCardRenderer = exports.profileCardRenderer = function profileCardRenderer(_ref) {
+  var dom = _ref.dom,
+    options = _ref.options,
+    portalProviderAPI = _ref.portalProviderAPI,
+    node = _ref.node,
+    api = _ref.api;
+  var renderingProfileCard = false;
+  var key = (0, _v.default)();
+  var cleanupSelection;
+  var removeProfileCard = function removeProfileCard() {
+    var _cleanupSelection;
+    portalProviderAPI.remove(key);
+    renderingProfileCard = false;
+    (_cleanupSelection = cleanupSelection) === null || _cleanupSelection === void 0 || _cleanupSelection();
+  };
+  var listenerCleanup = (0, _bindEventListener.bind)(dom, {
+    type: 'click',
+    listener: function listener() {
+      if (dom instanceof HTMLElement && options !== null && options !== void 0 && options.profilecardProvider && !renderingProfileCard) {
+        var _api$selection;
+        renderingProfileCard = true;
+        portalProviderAPI.render(function () {
+          return /*#__PURE__*/_react.default.createElement(_ProfileCardComponent.ProfileCardComponent, {
+            activeMention: node,
+            profilecardProvider: options === null || options === void 0 ? void 0 : options.profilecardProvider,
+            dom: dom,
+            closeComponent: removeProfileCard
+          });
+        }, dom, key);
+        // If we change the selection we should also remove the profile card. The "deselectNode"
+        // should usually catch this, but it's possible (ie. on triple click) for this not to be called
+        // which means the profile card gets stuck open until you click + change selection
+        cleanupSelection = api === null || api === void 0 || (_api$selection = api.selection) === null || _api$selection === void 0 ? void 0 : _api$selection.sharedState.onChange(function (_ref2) {
+          var nextSharedState = _ref2.nextSharedState;
+          var selection = nextSharedState === null || nextSharedState === void 0 ? void 0 : nextSharedState.selection;
+          if (selection instanceof _state.NodeSelection ? selection.node === node : false) {
+            return;
+          }
+          removeProfileCard === null || removeProfileCard === void 0 || removeProfileCard();
+        });
+      }
+    }
+  });
+  return {
+    destroyProfileCard: function destroyProfileCard() {
+      listenerCleanup();
+      removeProfileCard === null || removeProfileCard === void 0 || removeProfileCard();
+    },
+    removeProfileCard: removeProfileCard
+  };
+};

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

@@ -14,7 +14,9 @@ var _utils = require("@atlaskit/editor-prosemirror/utils");
 var _resource = require("@atlaskit/mention/resource");
 var _types = require("@atlaskit/mention/types");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
+var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
 var _mention = require("../nodeviews/mention");
+var _mentionNodeView = require("../nodeviews/mentionNodeView");
 var _types2 = require("../types");
 var _key = require("./key");
 var _utils2 = require("./utils");
@@ -24,7 +26,7 @@ var ACTIONS = exports.ACTIONS = {
   SET_PROVIDER: 'SET_PROVIDER'
 };
 var PACKAGE_NAME = "@atlaskit/editor-plugin-mentions";
-var PACKAGE_VERSION = "4.2.0";
+var PACKAGE_VERSION = "4.3.0";
 var setProvider = function setProvider(provider) {
   return function (state, dispatch) {
     if (dispatch) {
@@ -99,15 +101,21 @@ function createMentionPlugin(_ref) {
     },
     props: {
       nodeViews: {
-        mention: (0, _reactNodeView.getInlineNodeViewProducer)({
-          pmPluginFactoryParams: pmPluginFactoryParams,
-          Component: _mention.MentionNodeView,
-          extraComponentProps: {
-            providerFactory: pmPluginFactoryParams.providerFactory,
-            pluginInjectionApi: api,
-            options: options
-          }
-        })
+        mention: function mention(node, view, getPos, decorations, innerDecorations) {
+          return (0, _experiments.editorExperiment)('platform_editor_vanilla_dom', true) ? (0, _mentionNodeView.mentionNodeView)({
+            options: options,
+            api: api,
+            portalProviderAPI: pmPluginFactoryParams.portalProviderAPI
+          })(node, view, getPos, decorations, innerDecorations) : (0, _reactNodeView.getInlineNodeViewProducer)({
+            pmPluginFactoryParams: pmPluginFactoryParams,
+            Component: _mention.MentionNodeView,
+            extraComponentProps: {
+              providerFactory: pmPluginFactoryParams.providerFactory,
+              pluginInjectionApi: api,
+              options: options
+            }
+          })(node, view, getPos, decorations);
+        }
       }
     },
     view: function view(editorView) {
@@ -166,7 +174,7 @@ function createMentionPlugin(_ref) {
         },
         update: function update(view, prevState) {
           var newState = view.state;
-          if (options !== null && options !== void 0 && options.handleMentionsChanged && (0, _platformFeatureFlags.fg)('confluence_updated_mentions_livepages')) {
+          if (options !== null && options !== void 0 && options.handleMentionsChanged) {
             var mentionSchema = newState.schema.nodes.mention;
             var mentionNodesBefore = (0, _utils.findChildrenByType)(prevState.doc, mentionSchema);
             var mentionLocalIdsAfter = new Set((0, _utils.findChildrenByType)(newState.doc, mentionSchema).map(function (_ref3) {

package/dist/cjs/ui/ProfileCardComponent.compiled.css

@@ -0,0 +1,2 @@
+
+._2rkoglpi{border-radius:var(--ds-border-radius,4px)}._16qs1cd0{box-shadow:var(--ds-shadow-overlay,0 8px 9pt #091e4226,0 0 1px #091e424f)}

package/dist/cjs/ui/ProfileCardComponent.js

@@ -0,0 +1,205 @@
+/* ProfileCardComponent.tsx generated by @compiled/babel-plugin v0.36.1 */
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ProfileCardComponent = ProfileCardComponent;
+exports.useProfileCardState = void 0;
+require("./ProfileCardComponent.compiled.css");
+var _react = _interopRequireWildcard(require("react"));
+var React = _react;
+var _runtime = require("@compiled/react/runtime");
+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");
+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 = {
+  loadingStyles: "_2rkoglpi _16qs1cd0"
+};
+var LoadingWrapper = function LoadingWrapper(_ref) {
+  var children = _ref.children,
+    isLoading = _ref.isLoading;
+  return isLoading ? /*#__PURE__*/React.createElement("div", {
+    className: (0, _runtime.ax)([styles.loadingStyles])
+  }, children) : children;
+};
+var useProfileCardState = exports.useProfileCardState = function useProfileCardState(_ref2) {
+  var id = _ref2.id,
+    provider = _ref2.provider;
+  var _useState = (0, _react.useState)(),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    data = _useState2[0],
+    setData = _useState2[1];
+  var _useState3 = (0, _react.useState)(undefined),
+    _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+    reportingLinesData = _useState4[0],
+    setReportingLinesData = _useState4[1];
+  var _useState5 = (0, _react.useState)(false),
+    _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
+    shouldShowGiveKudos = _useState6[0],
+    setShouldShowGiveKudos = _useState6[1];
+  var _useState7 = (0, _react.useState)(undefined),
+    _useState8 = (0, _slicedToArray2.default)(_useState7, 2),
+    teamCentralBaseUrl = _useState8[0],
+    setTeamCentralBaseUrl = _useState8[1];
+  var _useState9 = (0, _react.useState)(false),
+    _useState10 = (0, _slicedToArray2.default)(_useState9, 2),
+    isLoading = _useState10[0],
+    setIsLoading = _useState10[1];
+  var _useState11 = (0, _react.useState)(false),
+    _useState12 = (0, _slicedToArray2.default)(_useState11, 2),
+    hasError = _useState12[0],
+    setHasError = _useState12[1];
+
+  // From: packages/people-and-teams/profilecard/src/components/User/ProfileCardTrigger.tsx
+  (0, _react.useEffect)(function () {
+    var fetchData = /*#__PURE__*/function () {
+      var _ref3 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee() {
+        var _yield$Promise$all, _yield$Promise$all2, _data, reportingLines, shouldGiveKudos, _teamCentralBaseUrl;
+        return _regenerator.default.wrap(function _callee$(_context) {
+          while (1) switch (_context.prev = _context.next) {
+            case 0:
+              if (!(!id || !provider)) {
+                _context.next = 2;
+                break;
+              }
+              return _context.abrupt("return");
+            case 2:
+              setIsLoading(true);
+              _context.prev = 3;
+              _context.next = 6;
+              return Promise.all([provider === null || provider === void 0 ? void 0 : provider.resourceClient.getProfile((provider === null || provider === void 0 ? void 0 : provider.cloudId) || '', id, function () {}), provider === null || provider === void 0 ? void 0 : provider.resourceClient.getReportingLines(id), provider === null || provider === void 0 ? void 0 : provider.resourceClient.shouldShowGiveKudos(), provider === null || provider === void 0 ? void 0 : provider.resourceClient.getTeamCentralBaseUrl({
+                withOrgContext: true,
+                withSiteContext: true
+              })]);
+            case 6:
+              _yield$Promise$all = _context.sent;
+              _yield$Promise$all2 = (0, _slicedToArray2.default)(_yield$Promise$all, 4);
+              _data = _yield$Promise$all2[0];
+              reportingLines = _yield$Promise$all2[1];
+              shouldGiveKudos = _yield$Promise$all2[2];
+              _teamCentralBaseUrl = _yield$Promise$all2[3];
+              setData(_data);
+              setReportingLinesData(reportingLines);
+              setShouldShowGiveKudos(shouldGiveKudos !== null && shouldGiveKudos !== void 0 ? shouldGiveKudos : false);
+              setTeamCentralBaseUrl(_teamCentralBaseUrl);
+              setHasError(false);
+              _context.next = 22;
+              break;
+            case 19:
+              _context.prev = 19;
+              _context.t0 = _context["catch"](3);
+              setHasError(true);
+            case 22:
+              _context.prev = 22;
+              setIsLoading(false);
+              return _context.finish(22);
+            case 25:
+            case "end":
+              return _context.stop();
+          }
+        }, _callee, null, [[3, 19, 22, 25]]);
+      }));
+      return function fetchData() {
+        return _ref3.apply(this, arguments);
+      };
+    }();
+    fetchData();
+  }, [id, provider]);
+  return {
+    data: data,
+    reportingLinesData: reportingLinesData,
+    shouldShowGiveKudos: shouldShowGiveKudos,
+    teamCentralBaseUrl: teamCentralBaseUrl,
+    isLoading: isLoading,
+    hasError: hasError
+  };
+};
+function ProfileCardComponent(_ref4) {
+  var _ref6;
+  var profilecardProvider = _ref4.profilecardProvider,
+    activeMention = _ref4.activeMention,
+    dom = _ref4.dom,
+    closeComponent = _ref4.closeComponent;
+  var _useState13 = (0, _react.useState)(undefined),
+    _useState14 = (0, _slicedToArray2.default)(_useState13, 2),
+    provider = _useState14[0],
+    setProvider = _useState14[1];
+  (0, _react.useEffect)(function () {
+    profilecardProvider === null || profilecardProvider === void 0 || profilecardProvider.then(function (p) {
+      setProvider(p);
+    });
+  }, [profilecardProvider]);
+  var _ref5 = (_ref6 = activeMention.attrs) !== null && _ref6 !== void 0 ? _ref6 : {},
+    id = _ref5.id,
+    text = _ref5.text,
+    accessLevel = _ref5.accessLevel;
+  var actions = (0, _react.useMemo)(function () {
+    return provider === null || provider === void 0 ? void 0 : provider.getActions(id, text !== null && text !== void 0 ? text : '', accessLevel);
+  }, [accessLevel, id, provider, text]);
+  var _useProfileCardState = useProfileCardState({
+      id: id,
+      provider: provider
+    }),
+    data = _useProfileCardState.data,
+    reportingLinesData = _useProfileCardState.reportingLinesData,
+    shouldShowGiveKudos = _useProfileCardState.shouldShowGiveKudos,
+    teamCentralBaseUrl = _useProfileCardState.teamCentralBaseUrl,
+    isLoading = _useProfileCardState.isLoading,
+    hasError = _useProfileCardState.hasError;
+  (0, _react.useEffect)(function () {
+    return (0, _bindEventListener.bind)(window, {
+      type: 'keydown',
+      listener: function listener(e) {
+        if (e.key === 'Escape') {
+          closeComponent();
+        }
+      }
+    });
+  });
+  if (!provider || !activeMention) {
+    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
+  }, /*#__PURE__*/React.createElement(LoadingWrapper, {
+    isLoading: isLoading
+  }, /*#__PURE__*/React.createElement(_user.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,
+    statusModifiedDate: data === null || data === void 0 ? void 0 : data.statusModifiedDate,
+    timestring: data === null || data === void 0 ? void 0 : data.timestring,
+    isCurrentUser: data === null || data === void 0 ? void 0 : data.isCurrentUser,
+    isBot: data === null || data === void 0 ? void 0 : data.isBot,
+    fullName: data === null || data === void 0 ? void 0 : data.fullName,
+    userId: id,
+    cloudId: cloudId,
+    actions: actions,
+    isLoading: isLoading,
+    location: data === null || data === void 0 ? void 0 : data.location,
+    companyName: data === null || data === void 0 ? void 0 : data.companyName,
+    customLozenges: data === null || data === void 0 ? void 0 : data.customLozenges,
+    nickname: data === null || data === void 0 ? void 0 : data.nickname,
+    email: data === null || data === void 0 ? void 0 : data.email,
+    hasError: hasError,
+    reportingLines: reportingLinesData,
+    isKudosEnabled: shouldShowGiveKudos,
+    teamCentralBaseUrl: teamCentralBaseUrl
+  })))));
+}