@atlaskit/mention 24.3.2 → 24.4.0

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # @atlaskit/mention
 
+## 24.4.0
+
+### Minor Changes
+
+- [`7b39403f28495`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/7b39403f28495) -
+  Clean up FG(mentions-migrate-react-dom) which migrates deprecated react-dom APIs findDOMNode,
+  unmountComponentAtNode via usage of createPortal
+
+## 24.3.3
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 24.3.2
 
 ### Patch Changes

package/afm-products/tsconfig.json

@@ -0,0 +1,72 @@
+{
+	"extends": "../../../../tsconfig.entry-points.products.json",
+	"compilerOptions": {
+		"declaration": true,
+		"target": "es5",
+		"outDir": "../../../../../tsDist/@atlaskit__mention/app",
+		"rootDir": "../",
+		"composite": true
+	},
+	"include": [
+		"../src/**/*.ts",
+		"../src/**/*.tsx"
+	],
+	"exclude": [
+		"../src/**/__tests__/*",
+		"../src/**/*.test.*",
+		"../src/**/test.*",
+		"../src/**/examples.*",
+		"../src/**/examples/*",
+		"../src/**/examples/**/*",
+		"../src/**/*.stories.*",
+		"../src/**/stories/*",
+		"../src/**/stories/**/*"
+	],
+	"references": [
+		{
+			"path": "../../../analytics/analytics-gas-types/afm-products/tsconfig.json"
+		},
+		{
+			"path": "../../../analytics/analytics-next/afm-products/tsconfig.json"
+		},
+		{
+			"path": "../../../design-system/avatar/afm-products/tsconfig.json"
+		},
+		{
+			"path": "../../../design-system/focus-ring/afm-products/tsconfig.json"
+		},
+		{
+			"path": "../../../design-system/heading/afm-products/tsconfig.json"
+		},
+		{
+			"path": "../../../design-system/icon/afm-products/tsconfig.json"
+		},
+		{
+			"path": "../../../design-system/lozenge/afm-products/tsconfig.json"
+		},
+		{
+			"path": "../../../platform/feature-flags/afm-products/tsconfig.json"
+		},
+		{
+			"path": "../../../design-system/primitives/afm-products/tsconfig.json"
+		},
+		{
+			"path": "../../../people-and-teams/teams-avatar/afm-products/tsconfig.json"
+		},
+		{
+			"path": "../../../design-system/theme/afm-products/tsconfig.json"
+		},
+		{
+			"path": "../../../design-system/tokens/afm-products/tsconfig.json"
+		},
+		{
+			"path": "../../../design-system/tooltip/afm-products/tsconfig.json"
+		},
+		{
+			"path": "../../../data/ufo-external/afm-products/tsconfig.json"
+		},
+		{
+			"path": "../../util-service-support/afm-products/tsconfig.json"
+		}
+	]
+}

package/compass.yml

@@ -7,6 +7,9 @@ ownerId: 'ari:cloud:teams::team/8c518cea-39e4-4a9e-976b-2eec1db07eb2'
 fields:
   tier: 2
 links:
+  - name: Root Repository
+    type: REPOSITORY
+    url: https://bitbucket.org/atlassian/atlassian-frontend-monorepo/src/master
   - name: ''
     type: REPOSITORY
     url: 'https://bitbucket.org/atlassian/atlassian-frontend/src/master/packages/elements/mention/'

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

@@ -1,7 +1,6 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -13,15 +12,13 @@ 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 = _interopRequireWildcard(require("../MentionItem"));
+var _MentionItem = 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) {
@@ -170,16 +167,9 @@ var MentionList = exports.default = /*#__PURE__*/function (_React$PureComponent)
     value:
     // Internal
     function revealItem(key) {
-      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);
-        }
+      var itemRef = this.getItemRef(key);
+      if (itemRef && this.scrollable) {
+        itemRef && this.scrollable.revealRef(itemRef);
       }
     }
 
@@ -200,43 +190,21 @@ var MentionList = exports.default = /*#__PURE__*/function (_React$PureComponent)
       var _this2 = this;
       var mentions = this.props.mentions;
       if (mentions && mentions.length) {
-        this.items = {};
         return /*#__PURE__*/_react.default.createElement("div", null, this.props.initialHighlightElement, mentions.map(function (mention, idx) {
           var key = mention.id;
           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;
-          }
+          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;
         }));
       }
       return null;

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

@@ -1,7 +1,6 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -13,16 +12,11 @@ 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 = _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); }
+var _reactDom = require("react-dom");
 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(props) {
     var _this;
@@ -46,28 +40,7 @@ var Popup = exports.default = /*#__PURE__*/function (_React$PureComponent) {
   }, {
     key: "componentDidMount",
     value: function componentDidMount() {
-      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();
-    }
-  }, {
-    key: "componentDidUpdate",
-    value: function componentDidUpdate() {
-      this._renderContent();
-    }
-  }, {
-    key: "componentWillUnmount",
-    value: function componentWillUnmount() {
-      if (!(0, _platformFeatureFlags.fg)('mentions-migrate-react-dom')) {
-        if (this.popup) {
-          _reactDom.default.unmountComponentAtNode(this.popup);
-          document.body.removeChild(this.popup);
-        }
-      }
     }
   }, {
     key: "_applyBelowPosition",
@@ -77,19 +50,11 @@ 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 ((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");
-          }
-        }
+        this.setPortalStyles({
+          top: "".concat(top, "px"),
+          bottom: '',
+          left: "".concat(left, "px")
+        });
       }
     }
   }, {
@@ -100,19 +65,11 @@ 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 ((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");
-          }
-        }
+        this.setPortalStyles({
+          top: '',
+          bottom: "".concat(bottom, "px"),
+          left: "".concat(left, "px")
+        });
       }
     }
   }, {
@@ -134,41 +91,21 @@ var Popup = exports.default = /*#__PURE__*/function (_React$PureComponent) {
           }
         }
       }
-      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 (!(0, _platformFeatureFlags.fg)('mentions-migrate-react-dom')) {
-        if (this.popup) {
-          _reactDom.default.render(this.props.children, this.popup);
-        }
+      if (this.props.zIndex) {
+        this.setPortalStyles({
+          zIndex: this.props.zIndex
+        });
       }
     }
   }, {
     key: "render",
     value: function render() {
-      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);
-      }
+      // 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));
     }
   }]);
 }(_react.default.PureComponent);

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

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

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

@@ -1,9 +1,8 @@
 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, { MentionItemWithRef } from '../MentionItem';
+import { MentionItemWithRef } from '../MentionItem';
 import MentionListError from '../MentionListError';
 import MessagesIntlProvider from '../MessagesIntlProvider';
 import Scrollable from '../Scrollable';
@@ -157,16 +156,9 @@ export default class MentionList extends React.PureComponent {
 
   // Internal
   revealItem(key) {
-    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);
-      }
+    const itemRef = this.getItemRef(key);
+    if (itemRef && this.scrollable) {
+      itemRef && this.scrollable.revealRef(itemRef);
     }
   }
 
@@ -184,43 +176,21 @@ export default class MentionList extends React.PureComponent {
       mentions
     } = this.props;
     if (mentions && mentions.length) {
-      this.items = {};
       return /*#__PURE__*/React.createElement("div", null, this.props.initialHighlightElement, mentions.map((mention, idx) => {
         const key = mention.id;
         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;
-        }
+        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;
       }));
     }
     return null;

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

@@ -1,10 +1,6 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import React from 'react';
-import ReactDOM, { createPortal } from 'react-dom';
-import { fg } from '@atlaskit/platform-feature-flags';
-/*
- * Simple implementation of popup while waiting for ak-inline-dialog
- */
+import { createPortal } from 'react-dom';
 export default class Popup extends React.PureComponent {
   constructor(props) {
     super(props);
@@ -23,24 +19,7 @@ export default class Popup extends React.PureComponent {
     };
   }
   componentDidMount() {
-    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();
-  }
-  componentDidUpdate() {
-    this._renderContent();
-  }
-  componentWillUnmount() {
-    if (!fg('mentions-migrate-react-dom')) {
-      if (this.popup) {
-        ReactDOM.unmountComponentAtNode(this.popup);
-        document.body.removeChild(this.popup);
-      }
-    }
   }
   _applyBelowPosition() {
     const targetNode = this.props.target && document.getElementById(this.props.target);
@@ -48,19 +27,11 @@ 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 (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`;
-        }
-      }
+      this.setPortalStyles({
+        top: `${top}px`,
+        bottom: '',
+        left: `${left}px`
+      });
     }
   }
   _applyAbovePosition() {
@@ -69,19 +40,11 @@ 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 (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`;
-        }
-      }
+      this.setPortalStyles({
+        top: '',
+        bottom: `${bottom}px`,
+        left: `${left}px`
+      });
     }
   }
   _applyAbsolutePosition() {
@@ -101,37 +64,19 @@ export default class Popup extends React.PureComponent {
         }
       }
     }
-    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 (!fg('mentions-migrate-react-dom')) {
-      if (this.popup) {
-        ReactDOM.render(this.props.children, this.popup);
-      }
+    if (this.props.zIndex) {
+      this.setPortalStyles({
+        zIndex: this.props.zIndex
+      });
     }
   }
   render() {
-    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);
-    }
+    // 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));
   }
 }
 _defineProperty(Popup, "defaultProps", {

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

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