@atlaskit/mention 24.2.18 → 24.3.1

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # @atlaskit/mention
 
+## 24.3.1
+
+### Patch Changes
+
+- Updated dependencies
+
+## 24.3.0
+
+### Minor Changes
+
+- [`af63bbf99740e`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/af63bbf99740e) -
+  Migrate deprecated react-dom APIs to React 19 compatible: findDOMNode and unmountComponentAtNode
+  behind FG(mentions-migrate-react-dom)
+
 ## 24.2.18
 
 ### Patch Changes

package/dist/cjs/components/MentionItem/index.js

@@ -10,7 +10,8 @@ Object.defineProperty(exports, "MENTION_ITEM_HEIGHT", {
     return _styles.MENTION_ITEM_HEIGHT;
   }
 });
-exports.default = void 0;
+exports.default = exports.MentionItemWithRef = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
 var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
 var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
@@ -88,7 +89,8 @@ var MentionItem = exports.default = /*#__PURE__*/function (_React$PureComponent)
     value: function render() {
       var _this$props = this.props,
         mention = _this$props.mention,
-        selected = _this$props.selected;
+        selected = _this$props.selected,
+        forwardedRef = _this$props.forwardedRef;
       var id = mention.id,
         highlight = mention.highlight,
         avatarUrl = mention.avatarUrl,
@@ -114,7 +116,8 @@ var MentionItem = exports.default = /*#__PURE__*/function (_React$PureComponent)
         "data-testid": "mention-item-".concat(id),
         "data-mention-id": id,
         "data-mention-name": mentionName,
-        "data-selected": selected
+        "data-selected": selected,
+        ref: forwardedRef
       }, /*#__PURE__*/_react.default.createElement(_styles.RowStyle, null, /*#__PURE__*/_react.default.createElement(_styles.AvatarStyle, {
         restricted: restricted
       }, (0, _platformFeatureFlags.fg)('team-avatar-in-mention-picker') ? /*#__PURE__*/_react.default.createElement(_MentionAvatar.MentionAvatar, {
@@ -145,4 +148,9 @@ var MentionItem = exports.default = /*#__PURE__*/function (_React$PureComponent)
       }))));
     }
   }]);
-}(_react.default.PureComponent);
+}(_react.default.PureComponent);
+var MentionItemWithRef = exports.MentionItemWithRef = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
+  return /*#__PURE__*/_react.default.createElement(MentionItem, (0, _extends2.default)({}, props, {
+    forwardedRef: ref
+  }));
+});

package/dist/cjs/components/MentionList/index.js

@@ -1,6 +1,7 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -12,13 +13,15 @@ var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/ge
 var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = _interopRequireDefault(require("react"));
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _logger = _interopRequireDefault(require("../../util/logger"));
 var _mouse = require("../../util/mouse");
-var _MentionItem = _interopRequireDefault(require("../MentionItem"));
+var _MentionItem = _interopRequireWildcard(require("../MentionItem"));
 var _MentionListError = _interopRequireDefault(require("../MentionListError"));
 var _MessagesIntlProvider = _interopRequireDefault(require("../MessagesIntlProvider"));
 var _Scrollable = _interopRequireDefault(require("../Scrollable"));
 var _styles = require("./styles");
+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); }
 function _callSuper(t, o, e) { return o = (0, _getPrototypeOf2.default)(o), (0, _possibleConstructorReturn2.default)(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], (0, _getPrototypeOf2.default)(t).constructor) : o.apply(t, e)); }
 function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
 function wrapIndex(mentions, index) {
@@ -109,11 +112,24 @@ var MentionList = exports.default = /*#__PURE__*/function (_React$PureComponent)
     (0, _defineProperty2.default)(_this, "handleScrollableRef", function (ref) {
       _this.scrollable = ref;
     });
+    _this.itemsRefs = new Map();
     _this.setDefaultSelectionState();
     return _this;
   }
   (0, _inherits2.default)(MentionList, _React$PureComponent);
   return (0, _createClass2.default)(MentionList, [{
+    key: "createItemRef",
+    value: function createItemRef(key) {
+      var itemRef = /*#__PURE__*/_react.default.createRef();
+      this.itemsRefs.set(key, itemRef);
+      return itemRef;
+    }
+  }, {
+    key: "getItemRef",
+    value: function getItemRef(key) {
+      return this.itemsRefs.get(key);
+    }
+  }, {
     key: "UNSAFE_componentWillReceiveProps",
     value: function UNSAFE_componentWillReceiveProps(nextProps) {
       // adjust selection
@@ -154,9 +170,16 @@ var MentionList = exports.default = /*#__PURE__*/function (_React$PureComponent)
     value:
     // Internal
     function revealItem(key) {
-      var item = this.items[key];
-      if (item && this.scrollable) {
-        this.scrollable.reveal(item);
+      if ((0, _platformFeatureFlags.fg)('mentions-migrate-react-dom')) {
+        var itemRef = this.getItemRef(key);
+        if (itemRef && this.scrollable) {
+          itemRef && this.scrollable.revealRef(itemRef);
+        }
+      } else {
+        var item = this.items[key];
+        if (item && this.scrollable) {
+          this.scrollable.reveal(item);
+        }
       }
     }
 
@@ -180,24 +203,40 @@ var MentionList = exports.default = /*#__PURE__*/function (_React$PureComponent)
         this.items = {};
         return /*#__PURE__*/_react.default.createElement("div", null, this.props.initialHighlightElement, mentions.map(function (mention, idx) {
           var key = mention.id;
-          var item = /*#__PURE__*/_react.default.createElement(_MentionItem.default, {
-            mention: mention,
-            selected: _this2.isSelectedMention(mention, idx),
-            key: key,
-            onMouseMove: _this2.selectIndexOnHover
-            /* Cannot use onclick, as onblur will close the element, and prevent
-             * onClick from firing.
-             */,
-            onSelection: _this2.itemSelected,
-            ref: function ref(_ref) {
-              if (_ref) {
-                _this2.items[key] = _ref;
-              } else {
-                delete _this2.items[key];
+          var ref = _this2.createItemRef(key);
+          if ((0, _platformFeatureFlags.fg)('mentions-migrate-react-dom')) {
+            var item = /*#__PURE__*/_react.default.createElement(_MentionItem.MentionItemWithRef, {
+              mention: mention,
+              selected: _this2.isSelectedMention(mention, idx),
+              key: key,
+              onMouseMove: _this2.selectIndexOnHover
+              /* Cannot use onclick, as onblur will close the element, and prevent
+               * onClick from firing.
+               */,
+              onSelection: _this2.itemSelected,
+              ref: ref
+            });
+            return item;
+          } else {
+            var _item = /*#__PURE__*/_react.default.createElement(_MentionItem.default, {
+              mention: mention,
+              selected: _this2.isSelectedMention(mention, idx),
+              key: key,
+              onMouseMove: _this2.selectIndexOnHover
+              /* Cannot use onclick, as onblur will close the element, and prevent
+               * onClick from firing.
+               */,
+              onSelection: _this2.itemSelected,
+              ref: function ref(_ref) {
+                if (_ref) {
+                  _this2.items[key] = _ref;
+                } else {
+                  delete _this2.items[key];
+                }
               }
-            }
-          });
-          return item;
+            });
+            return _item;
+          }
         }));
       }
       return null;

package/dist/cjs/components/MentionPicker/index.js

@@ -11,10 +11,10 @@ var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime
 var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
 var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-var _compiled = require("@atlaskit/primitives/compiled");
-var _withAnalyticsEvents = _interopRequireDefault(require("@atlaskit/analytics-next/withAnalyticsEvents"));
 var _react = _interopRequireDefault(require("react"));
 var _reactIntlNext = require("react-intl-next");
+var _compiled = require("@atlaskit/primitives/compiled");
+var _withAnalyticsEvents = _interopRequireDefault(require("@atlaskit/analytics-next/withAnalyticsEvents"));
 var _analytics = require("../../util/analytics");
 var _id = _interopRequireDefault(require("../../util/id"));
 var _logger = _interopRequireDefault(require("../../util/logger"));

package/dist/cjs/components/Popup/index.js

@@ -1,6 +1,7 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -12,24 +13,44 @@ var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/ge
 var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = _interopRequireDefault(require("react"));
-var _reactDom = _interopRequireDefault(require("react-dom"));
+var _reactDom = _interopRequireWildcard(require("react-dom"));
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
+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); }
+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; }
 function _callSuper(t, o, e) { return o = (0, _getPrototypeOf2.default)(o), (0, _possibleConstructorReturn2.default)(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], (0, _getPrototypeOf2.default)(t).constructor) : o.apply(t, e)); }
 function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
 /*
  * Simple implementation of popup while waiting for ak-inline-dialog
  */
 var Popup = exports.default = /*#__PURE__*/function (_React$PureComponent) {
-  function Popup() {
+  function Popup(props) {
+    var _this;
     (0, _classCallCheck2.default)(this, Popup);
-    return _callSuper(this, Popup, arguments);
+    _this = _callSuper(this, Popup, [props]);
+    _this.portalStyles = {
+      position: 'absolute',
+      top: null,
+      bottom: null,
+      left: null,
+      zIndex: null
+    };
+    return _this;
   }
   (0, _inherits2.default)(Popup, _React$PureComponent);
   return (0, _createClass2.default)(Popup, [{
+    key: "setPortalStyles",
+    value: function setPortalStyles(styles) {
+      this.portalStyles = _objectSpread(_objectSpread({}, this.portalStyles), styles);
+    }
+  }, {
     key: "componentDidMount",
     value: function componentDidMount() {
-      this.popup = document.createElement('div');
-      document.body.appendChild(this.popup);
-      this.popup.style.position = 'absolute';
+      if (!(0, _platformFeatureFlags.fg)('mentions-migrate-react-dom')) {
+        this.popup = document.createElement('div');
+        document.body.appendChild(this.popup);
+        this.popup.style.position = 'absolute';
+      }
       this._applyAbsolutePosition();
       this._renderContent();
     }
@@ -41,9 +62,11 @@ var Popup = exports.default = /*#__PURE__*/function (_React$PureComponent) {
   }, {
     key: "componentWillUnmount",
     value: function componentWillUnmount() {
-      if (this.popup) {
-        _reactDom.default.unmountComponentAtNode(this.popup);
-        document.body.removeChild(this.popup);
+      if (!(0, _platformFeatureFlags.fg)('mentions-migrate-react-dom')) {
+        if (this.popup) {
+          _reactDom.default.unmountComponentAtNode(this.popup);
+          document.body.removeChild(this.popup);
+        }
       }
     }
   }, {
@@ -54,10 +77,18 @@ var Popup = exports.default = /*#__PURE__*/function (_React$PureComponent) {
         var box = targetNode.getBoundingClientRect();
         var top = box.bottom + (this.props.offsetY || 0);
         var left = box.left + (this.props.offsetX || 0);
-        if (this.popup) {
-          this.popup.style.top = "".concat(top, "px");
-          this.popup.style.bottom = '';
-          this.popup.style.left = "".concat(left, "px");
+        if ((0, _platformFeatureFlags.fg)('mentions-migrate-react-dom')) {
+          this.setPortalStyles({
+            top: "".concat(top, "px"),
+            bottom: '',
+            left: "".concat(left, "px")
+          });
+        } else {
+          if (this.popup) {
+            this.popup.style.top = "".concat(top, "px");
+            this.popup.style.bottom = '';
+            this.popup.style.left = "".concat(left, "px");
+          }
         }
       }
     }
@@ -69,10 +100,18 @@ var Popup = exports.default = /*#__PURE__*/function (_React$PureComponent) {
         var box = targetNode.getBoundingClientRect();
         var bottom = window.innerHeight - box.top + (this.props.offsetY || 0);
         var left = box.left + (this.props.offsetX || 0);
-        if (this.popup) {
-          this.popup.style.top = '';
-          this.popup.style.bottom = "".concat(bottom, "px");
-          this.popup.style.left = "".concat(left, "px");
+        if ((0, _platformFeatureFlags.fg)('mentions-migrate-react-dom')) {
+          this.setPortalStyles({
+            top: '',
+            bottom: "".concat(bottom, "px"),
+            left: "".concat(left, "px")
+          });
+        } else {
+          if (this.popup) {
+            this.popup.style.top = '';
+            this.popup.style.bottom = "".concat(bottom, "px");
+            this.popup.style.left = "".concat(left, "px");
+          }
         }
       }
     }
@@ -95,22 +134,41 @@ var Popup = exports.default = /*#__PURE__*/function (_React$PureComponent) {
           }
         }
       }
-      if (this.props.zIndex && this.popup) {
-        this.popup.style.zIndex = "".concat(this.props.zIndex);
+      if ((0, _platformFeatureFlags.fg)('mentions-migrate-react-dom')) {
+        if (this.props.zIndex) {
+          this.setPortalStyles({
+            zIndex: this.props.zIndex
+          });
+        }
+      } else {
+        if (this.props.zIndex && this.popup) {
+          this.popup.style.zIndex = "".concat(this.props.zIndex);
+        }
       }
     }
   }, {
     key: "_renderContent",
     value: function _renderContent() {
-      if (this.popup) {
-        _reactDom.default.render(this.props.children, this.popup);
+      if (!(0, _platformFeatureFlags.fg)('mentions-migrate-react-dom')) {
+        if (this.popup) {
+          _reactDom.default.render(this.props.children, this.popup);
+        }
       }
     }
   }, {
     key: "render",
     value: function render() {
-      // Placeholder element for react to render inplace
-      return /*#__PURE__*/_react.default.createElement("div", null);
+      if ((0, _platformFeatureFlags.fg)('mentions-migrate-react-dom')) {
+        // https://atlassian.design/components/eslint-plugin-ui-styling-standard/migration-guide#dynamic-styles
+        // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
+        var content = /*#__PURE__*/_react.default.createElement("div", {
+          style: this.portalStyles
+        }, this.props.children);
+        return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/(0, _reactDom.createPortal)(content, document.body));
+      } else {
+        // Placeholder element for react to render inplace
+        /*#__PURE__*/_react.default.createElement("div", null);
+      }
     }
   }]);
 }(_react.default.PureComponent);

package/dist/cjs/components/Scrollable/index.js

@@ -24,7 +24,7 @@ var Scrollable = exports.default = /*#__PURE__*/function (_React$PureComponent)
       args[_key] = arguments[_key];
     }
     _this = _callSuper(this, Scrollable, [].concat(args));
-    // API
+    // Cleanup when removing mentions-migrate-react-dom
     (0, _defineProperty2.default)(_this, "reveal", function (child) {
       if (child && _this.scrollableDiv) {
         var childNode = (0, _reactDom.findDOMNode)(child);
@@ -39,6 +39,19 @@ var Scrollable = exports.default = /*#__PURE__*/function (_React$PureComponent)
         }
       }
     });
+    (0, _defineProperty2.default)(_this, "revealRef", function (ref) {
+      if (ref && ref.current && _this.scrollableDiv) {
+        // Not using Element.scrollIntoView as it scrolls even to top/bottom of view even if
+        // already visible
+        var scrollableRect = _this.scrollableDiv.getBoundingClientRect();
+        var elementRect = ref.current.getBoundingClientRect();
+        if (elementRect.top < scrollableRect.top) {
+          _this.scrollableDiv.scrollTop += elementRect.top - scrollableRect.top;
+        } else if (elementRect.bottom > scrollableRect.bottom) {
+          _this.scrollableDiv.scrollTop += elementRect.bottom - scrollableRect.bottom;
+        }
+      }
+    });
     (0, _defineProperty2.default)(_this, "handleRef", function (ref) {
       _this.scrollableDiv = ref;
     });

package/dist/cjs/util/analytics.js

@@ -12,7 +12,7 @@ var _types = require("../types");
 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 packageName = "@atlaskit/mention";
-var packageVersion = "24.2.17";
+var packageVersion = "0.0.0-development";
 var SLI_EVENT_TYPE = exports.SLI_EVENT_TYPE = 'sli';
 var SMART_EVENT_TYPE = exports.SMART_EVENT_TYPE = 'smart';
 var fireAnalyticsMentionTypeaheadEvent = exports.fireAnalyticsMentionTypeaheadEvent = function fireAnalyticsMentionTypeaheadEvent(props) {

package/dist/es2019/components/MentionItem/index.js

@@ -1,3 +1,4 @@
+import _extends from "@babel/runtime/helpers/extends";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import Avatar from '@atlaskit/avatar';
 import Lozenge from '@atlaskit/lozenge';
@@ -61,7 +62,8 @@ export default class MentionItem extends React.PureComponent {
   render() {
     const {
       mention,
-      selected
+      selected,
+      forwardedRef
     } = this.props;
     const {
       id,
@@ -91,7 +93,8 @@ export default class MentionItem extends React.PureComponent {
       "data-testid": `mention-item-${id}`,
       "data-mention-id": id,
       "data-mention-name": mentionName,
-      "data-selected": selected
+      "data-selected": selected,
+      ref: forwardedRef
     }, /*#__PURE__*/React.createElement(RowStyle, null, /*#__PURE__*/React.createElement(AvatarStyle, {
       restricted: restricted
     }, fg('team-avatar-in-mention-picker') ? /*#__PURE__*/React.createElement(MentionAvatar, {
@@ -119,4 +122,9 @@ export default class MentionItem extends React.PureComponent {
       label: ''
     }))));
   }
-}
+}
+export const MentionItemWithRef = /*#__PURE__*/React.forwardRef((props, ref) => {
+  return /*#__PURE__*/React.createElement(MentionItem, _extends({}, props, {
+    forwardedRef: ref
+  }));
+});

package/dist/es2019/components/MentionList/index.js

@@ -1,8 +1,9 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import React from 'react';
+import { fg } from '@atlaskit/platform-feature-flags';
 import debug from '../../util/logger';
 import { actualMouseMove, mouseLocation } from '../../util/mouse';
-import MentionItem from '../MentionItem';
+import MentionItem, { MentionItemWithRef } from '../MentionItem';
 import MentionListError from '../MentionListError';
 import MessagesIntlProvider from '../MessagesIntlProvider';
 import Scrollable from '../Scrollable';
@@ -102,8 +103,17 @@ export default class MentionList extends React.PureComponent {
     _defineProperty(this, "handleScrollableRef", ref => {
       this.scrollable = ref;
     });
+    this.itemsRefs = new Map();
     this.setDefaultSelectionState();
   }
+  createItemRef(key) {
+    const itemRef = /*#__PURE__*/React.createRef();
+    this.itemsRefs.set(key, itemRef);
+    return itemRef;
+  }
+  getItemRef(key) {
+    return this.itemsRefs.get(key);
+  }
   UNSAFE_componentWillReceiveProps(nextProps) {
     // adjust selection
     const {
@@ -147,9 +157,16 @@ export default class MentionList extends React.PureComponent {
 
   // Internal
   revealItem(key) {
-    const item = this.items[key];
-    if (item && this.scrollable) {
-      this.scrollable.reveal(item);
+    if (fg('mentions-migrate-react-dom')) {
+      const itemRef = this.getItemRef(key);
+      if (itemRef && this.scrollable) {
+        itemRef && this.scrollable.revealRef(itemRef);
+      }
+    } else {
+      const item = this.items[key];
+      if (item && this.scrollable) {
+        this.scrollable.reveal(item);
+      }
     }
   }
 
@@ -170,24 +187,40 @@ export default class MentionList extends React.PureComponent {
       this.items = {};
       return /*#__PURE__*/React.createElement("div", null, this.props.initialHighlightElement, mentions.map((mention, idx) => {
         const key = mention.id;
-        const item = /*#__PURE__*/React.createElement(MentionItem, {
-          mention: mention,
-          selected: this.isSelectedMention(mention, idx),
-          key: key,
-          onMouseMove: this.selectIndexOnHover
-          /* Cannot use onclick, as onblur will close the element, and prevent
-           * onClick from firing.
-           */,
-          onSelection: this.itemSelected,
-          ref: ref => {
-            if (ref) {
-              this.items[key] = ref;
-            } else {
-              delete this.items[key];
+        const ref = this.createItemRef(key);
+        if (fg('mentions-migrate-react-dom')) {
+          const item = /*#__PURE__*/React.createElement(MentionItemWithRef, {
+            mention: mention,
+            selected: this.isSelectedMention(mention, idx),
+            key: key,
+            onMouseMove: this.selectIndexOnHover
+            /* Cannot use onclick, as onblur will close the element, and prevent
+             * onClick from firing.
+             */,
+            onSelection: this.itemSelected,
+            ref: ref
+          });
+          return item;
+        } else {
+          const item = /*#__PURE__*/React.createElement(MentionItem, {
+            mention: mention,
+            selected: this.isSelectedMention(mention, idx),
+            key: key,
+            onMouseMove: this.selectIndexOnHover
+            /* Cannot use onclick, as onblur will close the element, and prevent
+             * onClick from firing.
+             */,
+            onSelection: this.itemSelected,
+            ref: ref => {
+              if (ref) {
+                this.items[key] = ref;
+              } else {
+                delete this.items[key];
+              }
             }
-          }
-        });
-        return item;
+          });
+          return item;
+        }
       }));
     }
     return null;

package/dist/es2019/components/MentionPicker/index.js

@@ -1,8 +1,8 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
-import { Text } from '@atlaskit/primitives/compiled';
-import withAnalyticsEvents from '@atlaskit/analytics-next/withAnalyticsEvents';
 import React from 'react';
 import { IntlProvider, injectIntl } from 'react-intl-next';
+import { Text } from '@atlaskit/primitives/compiled';
+import withAnalyticsEvents from '@atlaskit/analytics-next/withAnalyticsEvents';
 import { fireAnalyticsMentionTypeaheadEvent } from '../../util/analytics';
 import uniqueId from '../../util/id';
 import debug from '../../util/logger';