@atlaskit/editor-common 69.2.2 → 69.3.1

package/dist/cjs/ui/Layer/index.js

@@ -0,0 +1,245 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+
+var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
+
+var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
+
+var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
+
+var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _popper = _interopRequireDefault(require("popper.js"));
+
+var _rafSchd = _interopRequireDefault(require("raf-schd"));
+
+var _helpers = require("./internal/helpers");
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(this, result); }; }
+
+function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
+
+var defaultState = {
+  hasExtractedStyles: false,
+  // We set these default offsets to prevent a flash of popper content in the wrong position
+  // which can cause incorrect height calculations. Popper will calculate these values
+  offsets: {
+    popper: {
+      left: -9999,
+      top: -9999,
+      position: null
+    }
+  },
+  // fix Safari parent width: https://product-fabric.atlassian.net/browse/ED-1784
+  cssPosition: 'absolute',
+  originalHeight: null,
+  maxHeight: null
+};
+
+var Layer = /*#__PURE__*/function (_Component) {
+  (0, _inherits2.default)(Layer, _Component);
+
+  var _super = _createSuper(Layer);
+
+  // working with extract-react-types
+  function Layer(props) {
+    var _this;
+
+    (0, _classCallCheck2.default)(this, Layer);
+    _this = _super.call(this, props);
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "targetRef", /*#__PURE__*/_react.default.createRef());
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "contentRef", /*#__PURE__*/_react.default.createRef());
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "extractStyles", function (state) {
+      if (state) {
+        var popperHeight = state.offsets.popper.height;
+        var left = Math.round(state.offsets.popper.left);
+        var top = Math.round(state.offsets.popper.top);
+        var cssPosition = 'absolute';
+        var originalHeight = _this.state.originalHeight || popperHeight;
+
+        var maxHeight = _this.calculateMaxHeight(originalHeight, popperHeight, top, cssPosition);
+
+        _this.setState({
+          // position: fixed or absolute
+          cssPosition: cssPosition,
+          hasExtractedStyles: true,
+          transform: "translate3d(".concat(left, "px, ").concat(top, "px, 0px)"),
+          originalHeight: originalHeight,
+          maxHeight: maxHeight
+        });
+      }
+    });
+    _this.state = defaultState;
+    _this.extractStyles = (0, _rafSchd.default)(_this.extractStyles.bind((0, _assertThisInitialized2.default)(_this)));
+    return _this;
+  }
+
+  (0, _createClass2.default)(Layer, [{
+    key: "componentDidMount",
+    value: function componentDidMount() {
+      this.applyPopper(this.props);
+    }
+  }, {
+    key: "UNSAFE_componentWillReceiveProps",
+    value: function UNSAFE_componentWillReceiveProps(nextProps) {
+      this.applyPopper(nextProps);
+    }
+  }, {
+    key: "componentDidUpdate",
+    value: function componentDidUpdate(prevProps, prevState) {
+      var onPositioned = this.props.onPositioned;
+      var hasExtractedStyles = this.state.hasExtractedStyles; // This flag is set the first time the position is calculated from Popper and applied to the content
+
+      if (!prevState.hasExtractedStyles && hasExtractedStyles && onPositioned) {
+        onPositioned();
+      }
+    }
+  }, {
+    key: "componentWillUnmount",
+    value: function componentWillUnmount() {
+      // this.extractStyles.cancel();
+      if (this.popper) {
+        this.popper.destroy();
+      }
+    }
+    /* Calculate the max height of the popper if it's height is greater than the viewport to prevent
+     * the bottom of the popper not being viewable.
+     * Only works if the popper uses viewport as the boundary and has a fixed position ancestor.
+     */
+
+  }, {
+    key: "calculateMaxHeight",
+    value: function calculateMaxHeight(originalHeight, currentHeight, positionTop, cssPosition) {
+      var DocumentElementClientHeight = 0;
+
+      if (document.documentElement) {
+        DocumentElementClientHeight = document.documentElement.clientHeight;
+      }
+
+      if (cssPosition !== 'fixed') {
+        return null;
+      }
+
+      var viewportHeight = Math.max(DocumentElementClientHeight, window.innerHeight || 0);
+      return viewportHeight < originalHeight && currentHeight + positionTop >= viewportHeight - 50 ? // allow some spacing either side of viewport height
+      viewportHeight - 12 : null;
+    }
+  }, {
+    key: "applyPopper",
+    value: function applyPopper(props) {
+      if (!this.targetRef.current || !this.contentRef.current) {
+        return;
+      }
+
+      if (this.popper) {
+        this.popper.destroy();
+      } // "new Popper(...)" operation is very expensive when called on virtual DOM.
+      // This condition reduces the number of calls so we can run our tests faster
+      // (time was reduced from 100s to 13s).
+
+
+      if (!props.content) {
+        return;
+      } // we wrap our target in a div so that we can safely get a reference to it, but we pass the
+      // actual target to popper
+
+
+      var isAlwaysFixed = false;
+      var actualTarget = this.targetRef.current.children[0];
+      var popperOpts = {
+        placement: (0, _helpers.positionPropToPopperPosition)(props.position),
+        onCreate: this.extractStyles,
+        onUpdate: this.extractStyles,
+        modifiers: {
+          applyStyle: {
+            enabled: false
+          },
+          hide: {
+            enabled: false
+          },
+          offset: {
+            enabled: true,
+            offset: this.props.offset
+          },
+          flip: {
+            enabled: false,
+            flipVariations: true,
+            boundariesElement: 'viewport',
+            padding: 0 // leave 0 pixels between popper and the boundariesElement
+
+          },
+          preventOverflow: {
+            enabled: false,
+            escapeWithReference: true
+          }
+        },
+        positionFixed: isAlwaysFixed
+      };
+
+      if (actualTarget) {
+        this.popper = new _popper.default(actualTarget, this.contentRef.current, popperOpts);
+      }
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var _this$state = this.state,
+          transform = _this$state.transform,
+          hasExtractedStyles = _this$state.hasExtractedStyles,
+          maxHeight = _this$state.maxHeight;
+      var opacity = hasExtractedStyles ? {} : {
+        opacity: 0
+      };
+      return /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("div", {
+        ref: this.targetRef
+      }, this.props.children), /*#__PURE__*/_react.default.createElement("div", {
+        ref: this.contentRef,
+        style: _objectSpread({
+          top: 0,
+          left: 0,
+          position: 'absolute',
+          transform: transform,
+          maxHeight: maxHeight ? maxHeight : 'auto'
+        }, opacity)
+      }, this.props.content));
+    }
+  }]);
+  return Layer;
+}(_react.Component);
+
+exports.default = Layer;
+(0, _defineProperty2.default)(Layer, "defaultProps", {
+  boundariesElement: 'viewport',
+  children: null,
+  content: null,
+  offset: '0, 0',
+  position: 'right middle',
+  zIndex: 400,
+  lockScroll: false,
+  isAlwaysFixed: false,
+  onPositioned: function onPositioned() {}
+});

package/dist/cjs/ui/Layer/internal/helpers.js

@@ -0,0 +1,70 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.POSITION_ATTRIBUTE_ENUM = void 0;
+exports.positionPropToPopperPosition = positionPropToPopperPosition;
+var positionMap = {
+  'top left': {
+    position: 'top-start',
+    animation: 'top'
+  },
+  'top center': {
+    position: 'top',
+    animation: 'top'
+  },
+  'top right': {
+    position: 'top-end',
+    animation: 'top'
+  },
+  'right top': {
+    position: 'right-start',
+    animation: 'right'
+  },
+  'right middle': {
+    position: 'right',
+    animation: 'right'
+  },
+  'right bottom': {
+    position: 'right-end',
+    animation: 'right'
+  },
+  'bottom left': {
+    position: 'bottom-start',
+    animation: 'bottom'
+  },
+  'bottom center': {
+    position: 'bottom',
+    animation: 'bottom'
+  },
+  'bottom right': {
+    position: 'bottom-end',
+    animation: 'bottom'
+  },
+  'left top': {
+    position: 'left-start',
+    animation: 'left'
+  },
+  'left middle': {
+    position: 'left',
+    animation: 'left'
+  },
+  'left bottom': {
+    position: 'left-end',
+    animation: 'left'
+  }
+};
+var POSITION_ATTRIBUTE_ENUM = {
+  values: ['top left', 'top center', 'top right', 'right top', 'right middle', 'right bottom', 'bottom left', 'bottom center', 'bottom right', 'left top', 'left middle', 'left bottom'],
+  default: 'right middle'
+};
+exports.POSITION_ATTRIBUTE_ENUM = POSITION_ATTRIBUTE_ENUM;
+
+function positionToPopper(position) {
+  return position && positionMap[position] ? positionMap[position].position : null;
+}
+
+function positionPropToPopperPosition(position) {
+  return positionToPopper(position) || positionMap[POSITION_ATTRIBUTE_ENUM.default].position;
+}

package/dist/cjs/ui/PortalProvider/PortalProviderThemesProvider.js

@@ -0,0 +1,60 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.PortalProviderThemeProviders = PortalProviderThemeProviders;
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _react2 = require("@emotion/react");
+
+var _components = _interopRequireDefault(require("@atlaskit/theme/components"));
+
+var _constants = require("@atlaskit/theme/constants");
+
+function PortalProviderThemeProviders(props) {
+  var children = props.children,
+      mode = props.mode;
+
+  var styledComponentsAndEmotionTheme = _react.default.useMemo( // This return value should only be one of the following
+  // - { [CHANNEL]: { mode },
+  // - { theme: { [CHANNEL]: { mode } }
+  // However, it appears that consumers have inconsistent expectations
+  // regarding the shape.
+  // This can be revisited in future work, and for the purposes of
+  // fixing https://product-fabric.atlassian.net/browse/ED-14956
+  // we are merging the two shapes consumers expect.
+  function () {
+    var _ref;
+
+    return _ref = {}, (0, _defineProperty2.default)(_ref, _constants.CHANNEL, {
+      mode: mode
+    }), (0, _defineProperty2.default)(_ref, "theme", (0, _defineProperty2.default)({}, _constants.CHANNEL, {
+      mode: mode
+    })), _ref;
+  }, [mode]);
+
+  var atlaskitTheme = _react.default.useCallback(function () {
+    return {
+      mode: mode
+    };
+  }, [mode]);
+
+  return (
+    /*#__PURE__*/
+    // TODO: ED-15585
+    // import { ThemeProvider as DeprectateStyledComponentsProvider } from 'styled-components';
+    // <DeprectateStyledComponentsProvider theme={styledComponentsAndEmotionTheme}>
+    // </DeprectateStyledComponentsProvider>
+    _react.default.createElement(_react2.ThemeProvider, {
+      theme: styledComponentsAndEmotionTheme
+    }, /*#__PURE__*/_react.default.createElement(_components.default.Provider, {
+      value: atlaskitTheme
+    }, children))
+  );
+}

package/dist/cjs/ui/PortalProvider/index.js

@@ -0,0 +1,295 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.PortalRenderer = exports.PortalProviderWithThemeProviders = exports.PortalProviderAPI = exports.PortalProvider = void 0;
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+
+var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
+
+var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
+
+var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
+
+var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _reactDom = require("react-dom");
+
+var _reactIntlNext = require("react-intl-next");
+
+var _analyticsNextStableReactContext = _interopRequireDefault(require("@atlaskit/analytics-next-stable-react-context"));
+
+var _components = require("@atlaskit/theme/components");
+
+var _analytics = require("../../analytics");
+
+var _eventDispatcher = require("../../event-dispatcher");
+
+var _PortalProviderThemesProvider = require("./PortalProviderThemesProvider");
+
+function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(this, result); }; }
+
+function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
+
+var PortalProviderAPI = /*#__PURE__*/function (_EventDispatcher) {
+  (0, _inherits2.default)(PortalProviderAPI, _EventDispatcher);
+
+  var _super = _createSuper(PortalProviderAPI);
+
+  function PortalProviderAPI(intl, onAnalyticsEvent, analyticsContext, themeMode) {
+    var _this;
+
+    (0, _classCallCheck2.default)(this, PortalProviderAPI);
+    _this = _super.call(this);
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "portals", new Map());
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "setContext", function (context) {
+      _this.context = context;
+    });
+    _this.intl = intl;
+    _this.onAnalyticsEvent = onAnalyticsEvent;
+    _this.useAnalyticsContext = analyticsContext;
+    _this.themeMode = themeMode;
+    return _this;
+  }
+
+  (0, _createClass2.default)(PortalProviderAPI, [{
+    key: "render",
+    value: function render(children, container) {
+      var _this2 = this;
+
+      var hasAnalyticsContext = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
+      var hasIntlContext = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : false;
+      this.portals.set(container, {
+        children: children,
+        hasAnalyticsContext: hasAnalyticsContext,
+        hasIntlContext: hasIntlContext
+      });
+
+      var childrenWithThemeProviders = function childrenWithThemeProviders() {
+        return /*#__PURE__*/_react.default.createElement(_PortalProviderThemesProvider.PortalProviderThemeProviders, {
+          mode: _this2.themeMode
+        }, children());
+      };
+
+      var wrappedChildren = this.useAnalyticsContext ? /*#__PURE__*/_react.default.createElement(AnalyticsContextWrapper, null, childrenWithThemeProviders()) : childrenWithThemeProviders();
+
+      if (hasIntlContext) {
+        wrappedChildren = /*#__PURE__*/_react.default.createElement(_reactIntlNext.RawIntlProvider, {
+          value: this.intl
+        }, wrappedChildren);
+      }
+
+      (0, _reactDom.unstable_renderSubtreeIntoContainer)(this.context, wrappedChildren, container);
+    } // TODO: until https://product-fabric.atlassian.net/browse/ED-5013
+    // we (unfortunately) need to re-render to pass down any updated context.
+    // selectively do this for nodeviews that opt-in via `hasAnalyticsContext`
+
+  }, {
+    key: "forceUpdate",
+    value: function forceUpdate(_ref) {
+      var _this3 = this;
+
+      var intl = _ref.intl,
+          themeMode = _ref.themeMode;
+      this.intl = intl;
+      this.themeMode = themeMode;
+      this.portals.forEach(function (portal, container) {
+        if (!portal.hasAnalyticsContext && !_this3.useAnalyticsContext && !portal.hasIntlContext) {
+          return;
+        }
+
+        var wrappedChildren = portal.children();
+
+        var childrenWithThemeProviders = function childrenWithThemeProviders() {
+          return /*#__PURE__*/_react.default.createElement(_PortalProviderThemesProvider.PortalProviderThemeProviders, {
+            mode: themeMode
+          }, wrappedChildren);
+        };
+
+        if (portal.hasAnalyticsContext && _this3.useAnalyticsContext) {
+          wrappedChildren = /*#__PURE__*/_react.default.createElement(AnalyticsContextWrapper, null, childrenWithThemeProviders());
+        }
+
+        if (portal.hasIntlContext) {
+          wrappedChildren = /*#__PURE__*/_react.default.createElement(_reactIntlNext.RawIntlProvider, {
+            value: _this3.intl
+          }, childrenWithThemeProviders());
+        }
+
+        (0, _reactDom.unstable_renderSubtreeIntoContainer)(_this3.context, wrappedChildren, container);
+      });
+    }
+  }, {
+    key: "remove",
+    value: function remove(container) {
+      this.portals.delete(container); // There is a race condition that can happen caused by Prosemirror vs React,
+      // where Prosemirror removes the container from the DOM before React gets
+      // around to removing the child from the container
+      // This will throw a NotFoundError: The node to be removed is not a child of this node
+      // Both Prosemirror and React remove the elements asynchronously, and in edge
+      // cases Prosemirror beats React
+
+      try {
+        (0, _reactDom.unmountComponentAtNode)(container);
+      } catch (error) {
+        if (this.onAnalyticsEvent) {
+          this.onAnalyticsEvent({
+            // @ts-expect-error
+            payload: {
+              action: _analytics.ACTION.FAILED_TO_UNMOUNT,
+              actionSubject: _analytics.ACTION_SUBJECT.EDITOR,
+              actionSubjectId: _analytics.ACTION_SUBJECT_ID.REACT_NODE_VIEW,
+              attributes: {
+                error: error,
+                domNodes: {
+                  container: container ? container.className : undefined,
+                  child: container.firstElementChild ? container.firstElementChild.className : undefined
+                }
+              },
+              eventType: _analytics.EVENT_TYPE.OPERATIONAL
+            }
+          });
+        }
+      }
+    }
+  }]);
+  return PortalProviderAPI;
+}(_eventDispatcher.EventDispatcher);
+
+exports.PortalProviderAPI = PortalProviderAPI;
+
+var BasePortalProvider = /*#__PURE__*/function (_React$Component) {
+  (0, _inherits2.default)(BasePortalProvider, _React$Component);
+
+  var _super2 = _createSuper(BasePortalProvider);
+
+  function BasePortalProvider(props) {
+    var _this4;
+
+    (0, _classCallCheck2.default)(this, BasePortalProvider);
+    _this4 = _super2.call(this, props);
+    _this4.portalProviderAPI = new PortalProviderAPI(props.intl, props.onAnalyticsEvent, props.useAnalyticsContext, props.themeMode);
+    return _this4;
+  }
+
+  (0, _createClass2.default)(BasePortalProvider, [{
+    key: "render",
+    value: function render() {
+      return this.props.render(this.portalProviderAPI);
+    }
+  }, {
+    key: "componentDidUpdate",
+    value: function componentDidUpdate() {
+      this.portalProviderAPI.forceUpdate({
+        intl: this.props.intl,
+        themeMode: this.props.themeMode
+      });
+    }
+  }]);
+  return BasePortalProvider;
+}(_react.default.Component);
+
+(0, _defineProperty2.default)(BasePortalProvider, "displayName", 'PortalProvider');
+var PortalProvider = (0, _reactIntlNext.injectIntl)(BasePortalProvider);
+exports.PortalProvider = PortalProvider;
+
+var PortalProviderWithThemeProviders = function PortalProviderWithThemeProviders(props) {
+  var intl = (0, _reactIntlNext.useIntl)();
+  var globalTheme = (0, _components.useGlobalTheme)();
+  return /*#__PURE__*/_react.default.createElement(BasePortalProvider, {
+    intl: intl,
+    themeMode: globalTheme.mode,
+    onAnalyticsEvent: props.onAnalyticsEvent,
+    useAnalyticsContext: props.useAnalyticsContext,
+    render: props.render
+  });
+};
+
+exports.PortalProviderWithThemeProviders = PortalProviderWithThemeProviders;
+
+var PortalRenderer = /*#__PURE__*/function (_React$Component2) {
+  (0, _inherits2.default)(PortalRenderer, _React$Component2);
+
+  var _super3 = _createSuper(PortalRenderer);
+
+  function PortalRenderer(props) {
+    var _this5;
+
+    (0, _classCallCheck2.default)(this, PortalRenderer);
+    _this5 = _super3.call(this, props);
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this5), "handleUpdate", function (portals) {
+      return _this5.setState({
+        portals: portals
+      });
+    });
+    props.portalProviderAPI.setContext((0, _assertThisInitialized2.default)(_this5));
+    props.portalProviderAPI.on('update', _this5.handleUpdate);
+    _this5.state = {
+      portals: new Map()
+    };
+    return _this5;
+  }
+
+  (0, _createClass2.default)(PortalRenderer, [{
+    key: "render",
+    value: function render() {
+      var portals = this.state.portals;
+      return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, Array.from(portals.entries()).map(function (_ref2) {
+        var _ref3 = (0, _slicedToArray2.default)(_ref2, 2),
+            container = _ref3[0],
+            children = _ref3[1];
+
+        return /*#__PURE__*/(0, _reactDom.createPortal)(children, container);
+      }));
+    }
+  }]);
+  return PortalRenderer;
+}(_react.default.Component);
+/**
+ * Wrapper to re-provide modern analytics context to ReactNodeViews.
+ */
+
+
+exports.PortalRenderer = PortalRenderer;
+var dummyAnalyticsContext = {
+  getAtlaskitAnalyticsContext: function getAtlaskitAnalyticsContext() {},
+  getAtlaskitAnalyticsEventHandlers: function getAtlaskitAnalyticsEventHandlers() {}
+};
+
+var AnalyticsContextWrapper = /*#__PURE__*/function (_React$Component3) {
+  (0, _inherits2.default)(AnalyticsContextWrapper, _React$Component3);
+
+  var _super4 = _createSuper(AnalyticsContextWrapper);
+
+  function AnalyticsContextWrapper() {
+    (0, _classCallCheck2.default)(this, AnalyticsContextWrapper);
+    return _super4.apply(this, arguments);
+  }
+
+  (0, _createClass2.default)(AnalyticsContextWrapper, [{
+    key: "render",
+    value: function render() {
+      var _ref4 = this.context.contextAdapter.analytics || {
+        value: dummyAnalyticsContext
+      },
+          value = _ref4.value;
+
+      return /*#__PURE__*/_react.default.createElement(_analyticsNextStableReactContext.default.Provider, {
+        value: value
+      }, this.props.children);
+    }
+  }]);
+  return AnalyticsContextWrapper;
+}(_react.default.Component);