@atlaskit/mention 24.2.17 → 24.3.0

package/CHANGELOG.md

@@ -1,5 +1,20 @@
 # @atlaskit/mention
 
+## 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
+
+- [`56ac0cf74b37d`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/56ac0cf74b37d) -
+  Migrated teams assets to new service
+
 ## 24.2.17
 
 ### 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/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';

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

@@ -1,14 +1,33 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import React from 'react';
-import ReactDOM from 'react-dom';
+import ReactDOM, { createPortal } from 'react-dom';
+import { fg } from '@atlaskit/platform-feature-flags';
 /*
  * Simple implementation of popup while waiting for ak-inline-dialog
  */
 export default class Popup extends React.PureComponent {
+  constructor(props) {
+    super(props);
+    this.portalStyles = {
+      position: 'absolute',
+      top: null,
+      bottom: null,
+      left: null,
+      zIndex: null
+    };
+  }
+  setPortalStyles(styles) {
+    this.portalStyles = {
+      ...this.portalStyles,
+      ...styles
+    };
+  }
   componentDidMount() {
-    this.popup = document.createElement('div');
-    document.body.appendChild(this.popup);
-    this.popup.style.position = 'absolute';
+    if (!fg('mentions-migrate-react-dom')) {
+      this.popup = document.createElement('div');
+      document.body.appendChild(this.popup);
+      this.popup.style.position = 'absolute';
+    }
     this._applyAbsolutePosition();
     this._renderContent();
   }
@@ -16,9 +35,11 @@ export default class Popup extends React.PureComponent {
     this._renderContent();
   }
   componentWillUnmount() {
-    if (this.popup) {
-      ReactDOM.unmountComponentAtNode(this.popup);
-      document.body.removeChild(this.popup);
+    if (!fg('mentions-migrate-react-dom')) {
+      if (this.popup) {
+        ReactDOM.unmountComponentAtNode(this.popup);
+        document.body.removeChild(this.popup);
+      }
     }
   }
   _applyBelowPosition() {
@@ -27,10 +48,18 @@ export default class Popup extends React.PureComponent {
       const box = targetNode.getBoundingClientRect();
       const top = box.bottom + (this.props.offsetY || 0);
       const left = box.left + (this.props.offsetX || 0);
-      if (this.popup) {
-        this.popup.style.top = `${top}px`;
-        this.popup.style.bottom = '';
-        this.popup.style.left = `${left}px`;
+      if (fg('mentions-migrate-react-dom')) {
+        this.setPortalStyles({
+          top: `${top}px`,
+          bottom: '',
+          left: `${left}px`
+        });
+      } else {
+        if (this.popup) {
+          this.popup.style.top = `${top}px`;
+          this.popup.style.bottom = '';
+          this.popup.style.left = `${left}px`;
+        }
       }
     }
   }
@@ -40,10 +69,18 @@ export default class Popup extends React.PureComponent {
       const box = targetNode.getBoundingClientRect();
       const bottom = window.innerHeight - box.top + (this.props.offsetY || 0);
       const left = box.left + (this.props.offsetX || 0);
-      if (this.popup) {
-        this.popup.style.top = '';
-        this.popup.style.bottom = `${bottom}px`;
-        this.popup.style.left = `${left}px`;
+      if (fg('mentions-migrate-react-dom')) {
+        this.setPortalStyles({
+          top: '',
+          bottom: `${bottom}px`,
+          left: `${left}px`
+        });
+      } else {
+        if (this.popup) {
+          this.popup.style.top = '';
+          this.popup.style.bottom = `${bottom}px`;
+          this.popup.style.left = `${left}px`;
+        }
       }
     }
   }
@@ -64,18 +101,37 @@ export default class Popup extends React.PureComponent {
         }
       }
     }
-    if (this.props.zIndex && this.popup) {
-      this.popup.style.zIndex = `${this.props.zIndex}`;
+    if (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 = `${this.props.zIndex}`;
+      }
     }
   }
   _renderContent() {
-    if (this.popup) {
-      ReactDOM.render(this.props.children, this.popup);
+    if (!fg('mentions-migrate-react-dom')) {
+      if (this.popup) {
+        ReactDOM.render(this.props.children, this.popup);
+      }
     }
   }
   render() {
-    // Placeholder element for react to render inplace
-    return /*#__PURE__*/React.createElement("div", null);
+    if (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
+      const content = /*#__PURE__*/React.createElement("div", {
+        style: this.portalStyles
+      }, this.props.children);
+      return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/createPortal(content, document.body));
+    } else {
+      // Placeholder element for react to render inplace
+      /*#__PURE__*/React.createElement("div", null);
+    }
   }
 }
 _defineProperty(Popup, "defaultProps", {

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

@@ -5,7 +5,7 @@ import { ScrollableStyle } from './styles';
 export default class Scrollable extends React.PureComponent {
   constructor(...args) {
     super(...args);
-    // API
+    // Cleanup when removing mentions-migrate-react-dom
     _defineProperty(this, "reveal", child => {
       if (child && this.scrollableDiv) {
         const childNode = findDOMNode(child);
@@ -20,6 +20,19 @@ export default class Scrollable extends React.PureComponent {
         }
       }
     });
+    _defineProperty(this, "revealRef", ref => {
+      if (ref && ref.current && this.scrollableDiv) {
+        // Not using Element.scrollIntoView as it scrolls even to top/bottom of view even if
+        // already visible
+        const scrollableRect = this.scrollableDiv.getBoundingClientRect();
+        const 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;
+        }
+      }
+    });
     _defineProperty(this, "handleRef", ref => {
       this.scrollableDiv = ref;
     });

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

@@ -1,3 +1,4 @@
+import _extends from "@babel/runtime/helpers/extends";
 import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
 import _createClass from "@babel/runtime/helpers/createClass";
 import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
@@ -76,7 +77,8 @@ var MentionItem = /*#__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,
@@ -102,7 +104,8 @@ var MentionItem = /*#__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.createElement(RowStyle, null, /*#__PURE__*/React.createElement(AvatarStyle, {
         restricted: restricted
       }, fg('team-avatar-in-mention-picker') ? /*#__PURE__*/React.createElement(MentionAvatar, {
@@ -134,4 +137,9 @@ var MentionItem = /*#__PURE__*/function (_React$PureComponent) {
     }
   }]);
 }(React.PureComponent);
-export { MentionItem as default };
+export { MentionItem as default };
+export var MentionItemWithRef = /*#__PURE__*/React.forwardRef(function (props, ref) {
+  return /*#__PURE__*/React.createElement(MentionItem, _extends({}, props, {
+    forwardedRef: ref
+  }));
+});

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

@@ -7,9 +7,10 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 function _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(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; })(); }
 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,11 +103,24 @@ var MentionList = /*#__PURE__*/function (_React$PureComponent) {
     _defineProperty(_this, "handleScrollableRef", function (ref) {
       _this.scrollable = ref;
     });
+    _this.itemsRefs = new Map();
     _this.setDefaultSelectionState();
     return _this;
   }
   _inherits(MentionList, _React$PureComponent);
   return _createClass(MentionList, [{
+    key: "createItemRef",
+    value: function createItemRef(key) {
+      var itemRef = /*#__PURE__*/React.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
@@ -147,9 +161,16 @@ var MentionList = /*#__PURE__*/function (_React$PureComponent) {
     value:
     // Internal
     function revealItem(key) {
-      var item = this.items[key];
-      if (item && this.scrollable) {
-        this.scrollable.reveal(item);
+      if (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);
+        }
       }
     }
 
@@ -173,24 +194,40 @@ var MentionList = /*#__PURE__*/function (_React$PureComponent) {
         this.items = {};
         return /*#__PURE__*/React.createElement("div", null, this.props.initialHighlightElement, mentions.map(function (mention, idx) {
           var key = mention.id;
-          var item = /*#__PURE__*/React.createElement(MentionItem, {
-            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 (fg('mentions-migrate-react-dom')) {
+            var item = /*#__PURE__*/React.createElement(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.createElement(MentionItem, {
+              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/esm/components/MentionPicker/index.js

@@ -6,10 +6,10 @@ import _inherits from "@babel/runtime/helpers/inherits";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 function _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(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; })(); }
-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';

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

@@ -4,25 +4,44 @@ import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstruct
 import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
 import _inherits from "@babel/runtime/helpers/inherits";
 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; }
 function _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(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; })(); }
 import React from 'react';
-import ReactDOM from 'react-dom';
+import ReactDOM, { createPortal } from 'react-dom';
+import { fg } from '@atlaskit/platform-feature-flags';
 /*
  * Simple implementation of popup while waiting for ak-inline-dialog
  */
 var Popup = /*#__PURE__*/function (_React$PureComponent) {
-  function Popup() {
+  function Popup(props) {
+    var _this;
     _classCallCheck(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;
   }
   _inherits(Popup, _React$PureComponent);
   return _createClass(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 (!fg('mentions-migrate-react-dom')) {
+        this.popup = document.createElement('div');
+        document.body.appendChild(this.popup);
+        this.popup.style.position = 'absolute';
+      }
       this._applyAbsolutePosition();
       this._renderContent();
     }
@@ -34,9 +53,11 @@ var Popup = /*#__PURE__*/function (_React$PureComponent) {
   }, {
     key: "componentWillUnmount",
     value: function componentWillUnmount() {
-      if (this.popup) {
-        ReactDOM.unmountComponentAtNode(this.popup);
-        document.body.removeChild(this.popup);
+      if (!fg('mentions-migrate-react-dom')) {
+        if (this.popup) {
+          ReactDOM.unmountComponentAtNode(this.popup);
+          document.body.removeChild(this.popup);
+        }
       }
     }
   }, {
@@ -47,10 +68,18 @@ var Popup = /*#__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 (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");
+          }
         }
       }
     }
@@ -62,10 +91,18 @@ var Popup = /*#__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 (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");
+          }
         }
       }
     }
@@ -88,22 +125,41 @@ var Popup = /*#__PURE__*/function (_React$PureComponent) {
           }
         }
       }
-      if (this.props.zIndex && this.popup) {
-        this.popup.style.zIndex = "".concat(this.props.zIndex);
+      if (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.render(this.props.children, this.popup);
+      if (!fg('mentions-migrate-react-dom')) {
+        if (this.popup) {
+          ReactDOM.render(this.props.children, this.popup);
+        }
       }
     }
   }, {
     key: "render",
     value: function render() {
-      // Placeholder element for react to render inplace
-      return /*#__PURE__*/React.createElement("div", null);
+      if (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.createElement("div", {
+          style: this.portalStyles
+        }, this.props.children);
+        return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/createPortal(content, document.body));
+      } else {
+        // Placeholder element for react to render inplace
+        /*#__PURE__*/React.createElement("div", null);
+      }
     }
   }]);
 }(React.PureComponent);

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

@@ -17,7 +17,7 @@ var Scrollable = /*#__PURE__*/function (_React$PureComponent) {
       args[_key] = arguments[_key];
     }
     _this = _callSuper(this, Scrollable, [].concat(args));
-    // API
+    // Cleanup when removing mentions-migrate-react-dom
     _defineProperty(_this, "reveal", function (child) {
       if (child && _this.scrollableDiv) {
         var childNode = findDOMNode(child);
@@ -32,6 +32,19 @@ var Scrollable = /*#__PURE__*/function (_React$PureComponent) {
         }
       }
     });
+    _defineProperty(_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;
+        }
+      }
+    });
     _defineProperty(_this, "handleRef", function (ref) {
       _this.scrollableDiv = ref;
     });

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

@@ -2,6 +2,7 @@ import React from 'react';
 import { type MentionDescription, type OnMentionEvent } from '../../types';
 export { MENTION_ITEM_HEIGHT } from './styles';
 export interface Props {
+    forwardedRef?: React.Ref<HTMLDivElement>;
     mention: MentionDescription;
     onMouseEnter?: OnMentionEvent;
     onMouseMove?: OnMentionEvent;
@@ -14,3 +15,4 @@ export default class MentionItem extends React.PureComponent<Props, {}> {
     private onMentionMenuItemMouseEnter;
     render(): React.JSX.Element;
 }
+export declare const MentionItemWithRef: React.ForwardRefExoticComponent<Omit<Props, "forwardedRef"> & React.RefAttributes<HTMLDivElement>>;

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

@@ -18,7 +18,10 @@ export default class MentionList extends React.PureComponent<Props, State> {
     private lastMousePosition;
     private scrollable?;
     private items;
+    private itemsRefs;
     constructor(props: Props);
+    createItemRef(key: string): React.RefObject<HTMLDivElement>;
+    getItemRef(key: string): React.RefObject<HTMLDivElement> | undefined;
     UNSAFE_componentWillReceiveProps(nextProps: Props): void;
     componentDidUpdate(): void;
     selectNext: () => void;

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

@@ -1,6 +1,6 @@
-import { type WithAnalyticsEventsProps } from '@atlaskit/analytics-next/withAnalyticsEvents';
 import React from 'react';
 import { type IntlShape } from 'react-intl-next';
+import { type WithAnalyticsEventsProps } from '@atlaskit/analytics-next/withAnalyticsEvents';
 import { type MentionProvider } from '../../api/MentionResource';
 import { type PresenceProvider } from '../../api/PresenceResource';
 import { type OnMentionEvent } from '../../types';

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

@@ -9,6 +9,9 @@ export interface Props {
 }
 export default class Popup extends React.PureComponent<Props, {}> {
     private popup?;
+    private portalStyles;
+    constructor(props: Props);
+    setPortalStyles(styles: Record<string, string | number | null>): void;
     static defaultProps: {
         relativePosition: string;
         offsetX: number;
@@ -22,5 +25,5 @@ export default class Popup extends React.PureComponent<Props, {}> {
     _applyAbovePosition(): void;
     _applyAbsolutePosition(): void;
     _renderContent(): void;
-    render(): React.JSX.Element;
+    render(): React.JSX.Element | undefined;
 }

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

@@ -6,6 +6,7 @@ export interface Props {
 export default class Scrollable extends React.PureComponent<Props, {}> {
     private scrollableDiv?;
     reveal: (child: MentionItem) => void;
+    revealRef: (ref: React.RefObject<HTMLDivElement>) => void;
     private handleRef;
     render(): React.JSX.Element;
 }

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

@@ -2,6 +2,7 @@ import React from 'react';
 import { type MentionDescription, type OnMentionEvent } from '../../types';
 export { MENTION_ITEM_HEIGHT } from './styles';
 export interface Props {
+    forwardedRef?: React.Ref<HTMLDivElement>;
     mention: MentionDescription;
     onMouseEnter?: OnMentionEvent;
     onMouseMove?: OnMentionEvent;
@@ -14,3 +15,4 @@ export default class MentionItem extends React.PureComponent<Props, {}> {
     private onMentionMenuItemMouseEnter;
     render(): React.JSX.Element;
 }
+export declare const MentionItemWithRef: React.ForwardRefExoticComponent<Omit<Props, "forwardedRef"> & React.RefAttributes<HTMLDivElement>>;

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

@@ -18,7 +18,10 @@ export default class MentionList extends React.PureComponent<Props, State> {
     private lastMousePosition;
     private scrollable?;
     private items;
+    private itemsRefs;
     constructor(props: Props);
+    createItemRef(key: string): React.RefObject<HTMLDivElement>;
+    getItemRef(key: string): React.RefObject<HTMLDivElement> | undefined;
     UNSAFE_componentWillReceiveProps(nextProps: Props): void;
     componentDidUpdate(): void;
     selectNext: () => void;

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

@@ -1,6 +1,6 @@
-import { type WithAnalyticsEventsProps } from '@atlaskit/analytics-next/withAnalyticsEvents';
 import React from 'react';
 import { type IntlShape } from 'react-intl-next';
+import { type WithAnalyticsEventsProps } from '@atlaskit/analytics-next/withAnalyticsEvents';
 import { type MentionProvider } from '../../api/MentionResource';
 import { type PresenceProvider } from '../../api/PresenceResource';
 import { type OnMentionEvent } from '../../types';

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

@@ -9,6 +9,9 @@ export interface Props {
 }
 export default class Popup extends React.PureComponent<Props, {}> {
     private popup?;
+    private portalStyles;
+    constructor(props: Props);
+    setPortalStyles(styles: Record<string, string | number | null>): void;
     static defaultProps: {
         relativePosition: string;
         offsetX: number;
@@ -22,5 +25,5 @@ export default class Popup extends React.PureComponent<Props, {}> {
     _applyAbovePosition(): void;
     _applyAbsolutePosition(): void;
     _renderContent(): void;
-    render(): React.JSX.Element;
+    render(): React.JSX.Element | undefined;
 }

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

@@ -6,6 +6,7 @@ export interface Props {
 export default class Scrollable extends React.PureComponent<Props, {}> {
     private scrollableDiv?;
     reveal: (child: MentionItem) => void;
+    revealRef: (ref: React.RefObject<HTMLDivElement>) => void;
     private handleRef;
     render(): React.JSX.Element;
 }

package/package.json

@@ -22,17 +22,17 @@
 		"@atlaskit/afm-i18n-platform-elements-mention": "2.7.0",
 		"@atlaskit/analytics-gas-types": "^5.1.0",
 		"@atlaskit/analytics-next": "^11.1.0",
-		"@atlaskit/avatar": "^25.1.0",
+		"@atlaskit/avatar": "^25.3.0",
 		"@atlaskit/focus-ring": "^3.0.0",
 		"@atlaskit/heading": "^5.2.0",
-		"@atlaskit/icon": "^28.2.0",
+		"@atlaskit/icon": "^28.5.0",
 		"@atlaskit/lozenge": "^13.0.0",
 		"@atlaskit/platform-feature-flags": "^1.1.0",
 		"@atlaskit/primitives": "^14.15.0",
 		"@atlaskit/teams-avatar": "^2.3.0",
 		"@atlaskit/theme": "^21.0.0",
-		"@atlaskit/tokens": "^6.3.0",
-		"@atlaskit/tooltip": "^20.4.0",
+		"@atlaskit/tokens": "^6.4.0",
+		"@atlaskit/tooltip": "^20.5.0",
 		"@atlaskit/ufo": "^0.4.0",
 		"@atlaskit/util-service-support": "^6.3.0",
 		"@babel/runtime": "^7.0.0",
@@ -78,6 +78,9 @@
 	"platform-feature-flags": {
 		"team-avatar-in-mention-picker": {
 			"type": "boolean"
+		},
+		"mentions-migrate-react-dom": {
+			"type": "boolean"
 		}
 	},
 	"publishConfig": {
@@ -105,5 +108,5 @@
 			]
 		}
 	},
-	"version": "24.2.17"
+	"version": "24.3.0"
 }