@atlaskit/editor-common 61.0.1 → 62.0.0

package/CHANGELOG.md

@@ -1,5 +1,51 @@
 # @atlaskit/editor-common
 
+## 62.0.0
+
+### Major Changes
+
+- [`47f58da5946`](https://bitbucket.org/atlassian/atlassian-frontend/commits/47f58da5946) - ED-13322, ED-13324, ED-13326, ED-13323, ED-13204: Upgrade and support react-intl@^5.18.1 including breaking API changes, types and tests in atlassian-frontend packages
+
+  What changed: Upgraded our react-intl support from ^2.6.0 to ^5.18.1. This means editor packages now rely on consumers installing ^5.18.1, otherwise editor usage of react-intl will mismatch with actual installed react-intl APIs.
+  Why change was made: As part of a coordinated upgrade effort across AF packages, as react-intl v2 is quite dated.
+  How consumer should update their code: Ensure react-intl ^5.18.1 is installed in consuming applications.
+
+  Upgrade guide: To consume atlassian-frontend packages that use react-intl5 setup a second provider for the new version, using an npm alias
+
+  ```js
+  "react-intl": "^2.6.0",
+  "react-intl-next": "npm:react-intl@^5.18.1",
+  ```
+
+  ```js
+  import { IntlProvider } from 'react-intl';
+  import { IntlProvider as IntlNextProvider } from 'react-intl-next';
+
+  return (
+    <IntlProvider
+      key={locale}
+      data-test-language={locale}
+      locale={locale}
+      defaultLocale={DEFAULT_LOCALE}
+      messages={messages}
+    >
+      <IntlNextProvider
+        key={locale}
+        data-test-language={locale}
+        locale={locale}
+        defaultLocale={DEFAULT_LOCALE}
+        messages={messages}
+      >
+        {children}
+      </IntlNextProvider>
+    </IntlProvider>
+  );
+  ```
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 61.0.1
 
 ### Patch Changes

package/dist/cjs/index.js

@@ -117,6 +117,24 @@ Object.defineProperty(exports, "HelperMessage", {
     return _ui.HelperMessage;
   }
 });
+Object.defineProperty(exports, "IntlLegacyFallbackProvider", {
+  enumerable: true,
+  get: function get() {
+    return _ui.IntlLegacyFallbackProvider;
+  }
+});
+Object.defineProperty(exports, "IntlNextErrorBoundary", {
+  enumerable: true,
+  get: function get() {
+    return _ui.IntlNextErrorBoundary;
+  }
+});
+Object.defineProperty(exports, "LegacyToNextIntlProvider", {
+  enumerable: true,
+  get: function get() {
+    return _ui.LegacyToNextIntlProvider;
+  }
+});
 Object.defineProperty(exports, "MediaLink", {
   enumerable: true,
   get: function get() {
@@ -171,6 +189,12 @@ Object.defineProperty(exports, "ProviderFactory", {
     return _providerFactory.ProviderFactory;
   }
 });
+Object.defineProperty(exports, "REACT_INTL_ERROR_MESSAGE", {
+  enumerable: true,
+  get: function get() {
+    return _ui.REACT_INTL_ERROR_MESSAGE;
+  }
+});
 Object.defineProperty(exports, "RenderCountProfiler", {
   enumerable: true,
   get: function get() {

package/dist/cjs/messages/codeBidiWarning.js

@@ -5,9 +5,9 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.codeBidiWarningMessages = void 0;
 
-var _reactIntl = require("react-intl");
+var _reactIntlNext = require("react-intl-next");
 
-var codeBidiWarningMessages = (0, _reactIntl.defineMessages)({
+var codeBidiWarningMessages = (0, _reactIntlNext.defineMessages)({
   /**
    * Message taken from
    * https://hello.atlassian.net/wiki/spaces/~tswan/pages/1366555782/PSHELP-2943+Investigate+Trojan+Source+Attack+Vulnerability+design

package/dist/cjs/messages/link.js

@@ -5,9 +5,9 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.linkMessages = void 0;
 
-var _reactIntl = require("react-intl");
+var _reactIntlNext = require("react-intl-next");
 
-var linkMessages = (0, _reactIntl.defineMessages)({
+var linkMessages = (0, _reactIntlNext.defineMessages)({
   openLink: {
     id: 'fabric.editor.openLink',
     defaultMessage: 'Open link in a new tab',

package/dist/cjs/messages/unsupportedContent.js

@@ -5,9 +5,9 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.unsupportedContentMessages = void 0;
 
-var _reactIntl = require("react-intl");
+var _reactIntlNext = require("react-intl-next");
 
-var unsupportedContentMessages = (0, _reactIntl.defineMessages)({
+var unsupportedContentMessages = (0, _reactIntlNext.defineMessages)({
   unsupportedInlineContent: {
     id: 'fabric.editor.unsupportedInlineContent',
     defaultMessage: 'Unsupported content',

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

@@ -23,7 +23,7 @@ var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/hel
 
 var _react = _interopRequireDefault(require("react"));
 
-var _reactIntl = require("react-intl");
+var _reactIntlNext = require("react-intl-next");
 
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 
@@ -72,6 +72,6 @@ var CaptionComponent = /*#__PURE__*/function (_React$Component) {
 
 exports.CaptionComponent = CaptionComponent;
 
-var _default = (0, _reactIntl.injectIntl)(CaptionComponent);
+var _default = (0, _reactIntlNext.injectIntl)(CaptionComponent);
 
 exports.default = _default;

package/dist/cjs/ui/Caption/messages.js

@@ -5,9 +5,9 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.messages = void 0;
 
-var _reactIntl = require("react-intl");
+var _reactIntlNext = require("react-intl-next");
 
-var messages = (0, _reactIntl.defineMessages)({
+var messages = (0, _reactIntlNext.defineMessages)({
   placeholder: {
     id: 'fabric.editor.captionPlaceholder',
     defaultMessage: 'Add a caption',

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

@@ -11,7 +11,7 @@ exports.sharedExpandStyles = exports.messages = exports.ExpandLayoutWrapper = ex
 
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 
-var _reactIntl = require("react-intl");
+var _reactIntlNext = require("react-intl-next");
 
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
 
@@ -29,7 +29,7 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 
 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; }
 
-var messages = (0, _reactIntl.defineMessages)({
+var messages = (0, _reactIntlNext.defineMessages)({
   collapseNode: {
     id: 'fabric.editor.collapseNode',
     defaultMessage: 'Collapse content',

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

@@ -0,0 +1,60 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.IntlLegacyFallbackProvider = void 0;
+
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+
+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 _reactIntl = require("react-intl");
+
+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 IntlLegacyFallbackProvider = /*#__PURE__*/function (_React$Component) {
+  (0, _inherits2.default)(IntlLegacyFallbackProvider, _React$Component);
+
+  var _super = _createSuper(IntlLegacyFallbackProvider);
+
+  function IntlLegacyFallbackProvider() {
+    (0, _classCallCheck2.default)(this, IntlLegacyFallbackProvider);
+    return _super.apply(this, arguments);
+  }
+
+  (0, _createClass2.default)(IntlLegacyFallbackProvider, [{
+    key: "render",
+    value: function render() {
+      var oldIntl = this.context.intl;
+
+      if (!oldIntl) {
+        return /*#__PURE__*/_react.default.createElement(_reactIntl.IntlProvider, {
+          locale: "en"
+        }, this.props.children);
+      }
+
+      return this.props.children;
+    }
+  }]);
+  return IntlLegacyFallbackProvider;
+}(_react.default.Component);
+
+exports.IntlLegacyFallbackProvider = IntlLegacyFallbackProvider;
+(0, _defineProperty2.default)(IntlLegacyFallbackProvider, "contextTypes", {
+  intl: _reactIntl.intlShape
+});

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

@@ -0,0 +1,90 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.REACT_INTL_ERROR_MESSAGE = exports.IntlNextErrorBoundary = 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 = _interopRequireDefault(require("react"));
+
+var _reactIntlNext = require("react-intl-next");
+
+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 REACT_INTL_ERROR_MESSAGE = '<IntlProvider> needs to exist in the component ancestry';
+exports.REACT_INTL_ERROR_MESSAGE = REACT_INTL_ERROR_MESSAGE;
+
+var isMissingIntlProviderInAncestryError = function isMissingIntlProviderInAncestryError(err) {
+  var _err$toString;
+
+  return err === null || err === void 0 ? void 0 : (_err$toString = err.toString()) === null || _err$toString === void 0 ? void 0 : _err$toString.includes('<IntlProvider> needs to exist in the component ancestry');
+};
+
+var IntlNextErrorBoundary = /*#__PURE__*/function (_React$Component) {
+  (0, _inherits2.default)(IntlNextErrorBoundary, _React$Component);
+
+  var _super = _createSuper(IntlNextErrorBoundary);
+
+  function IntlNextErrorBoundary() {
+    var _this;
+
+    (0, _classCallCheck2.default)(this, IntlNextErrorBoundary);
+
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+
+    _this = _super.call.apply(_super, [this].concat(args));
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "state", {
+      missingIntlProviderInAncestry: false
+    });
+    return _this;
+  }
+
+  (0, _createClass2.default)(IntlNextErrorBoundary, [{
+    key: "componentDidCatch",
+    value: function componentDidCatch(error, errorInfo) {
+      // if missing IntlProvider in ancestry, we setup a fallback IntlProvider ourselves
+      if (isMissingIntlProviderInAncestryError(error)) {
+        this.setState({
+          missingIntlProviderInAncestry: true
+        });
+      } else {
+        // else we re-propagate the non-react-intl-next error
+        throw error;
+      }
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      if (this.state.missingIntlProviderInAncestry) {
+        return /*#__PURE__*/_react.default.createElement(_reactIntlNext.IntlProvider, {
+          locale: "en"
+        }, this.props.children);
+      }
+
+      return this.props.children;
+    }
+  }]);
+  return IntlNextErrorBoundary;
+}(_react.default.Component);
+
+exports.IntlNextErrorBoundary = IntlNextErrorBoundary;

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

@@ -0,0 +1,67 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.LegacyToNextIntlProvider = void 0;
+
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+
+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 _reactIntl = require("react-intl");
+
+var _reactIntlNext = require("react-intl-next");
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (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 = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { 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 LegacyToNextIntlProvider = /*#__PURE__*/function (_React$Component) {
+  (0, _inherits2.default)(LegacyToNextIntlProvider, _React$Component);
+
+  var _super = _createSuper(LegacyToNextIntlProvider);
+
+  function LegacyToNextIntlProvider() {
+    (0, _classCallCheck2.default)(this, LegacyToNextIntlProvider);
+    return _super.apply(this, arguments);
+  }
+
+  (0, _createClass2.default)(LegacyToNextIntlProvider, [{
+    key: "render",
+    value: function render() {
+      var oldIntl = this.context.intl;
+
+      if (oldIntl) {
+        var nextIntl = (0, _reactIntlNext.createIntl)(_objectSpread({}, oldIntl));
+        return /*#__PURE__*/_react.default.createElement(_reactIntlNext.RawIntlProvider, {
+          value: nextIntl
+        }, this.props.children);
+      }
+
+      return this.props.children;
+    }
+  }]);
+  return LegacyToNextIntlProvider;
+}(_react.default.Component);
+
+exports.LegacyToNextIntlProvider = LegacyToNextIntlProvider;
+(0, _defineProperty2.default)(LegacyToNextIntlProvider, "contextTypes", {
+  intl: _reactIntl.intlShape
+});

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

@@ -13,7 +13,7 @@ var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/hel
 
 var _react = _interopRequireWildcard(require("react"));
 
-var _reactIntl = require("react-intl");
+var _reactIntlNext = require("react-intl-next");
 
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 
@@ -73,6 +73,6 @@ var UnsupportedBlockNode = function UnsupportedBlockNode(_ref) {
   }))));
 };
 
-var _default = (0, _reactIntl.injectIntl)(UnsupportedBlockNode);
+var _default = (0, _reactIntlNext.injectIntl)(UnsupportedBlockNode);
 
 exports.default = _default;

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

@@ -13,7 +13,7 @@ var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/hel
 
 var _react = _interopRequireWildcard(require("react"));
 
-var _reactIntl = require("react-intl");
+var _reactIntlNext = require("react-intl-next");
 
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 
@@ -73,6 +73,6 @@ var UnsupportedInlineNode = function UnsupportedInlineNode(_ref) {
   }))));
 };
 
-var _default = (0, _reactIntl.injectIntl)(UnsupportedInlineNode);
+var _default = (0, _reactIntlNext.injectIntl)(UnsupportedInlineNode);
 
 exports.default = _default;

package/dist/cjs/ui/index.js

@@ -67,6 +67,24 @@ Object.defineProperty(exports, "HelperMessage", {
     return _Messages.HelperMessage;
   }
 });
+Object.defineProperty(exports, "IntlLegacyFallbackProvider", {
+  enumerable: true,
+  get: function get() {
+    return _IntlLegacyFallbackProvider.IntlLegacyFallbackProvider;
+  }
+});
+Object.defineProperty(exports, "IntlNextErrorBoundary", {
+  enumerable: true,
+  get: function get() {
+    return _IntlNextErrorBoundary.IntlNextErrorBoundary;
+  }
+});
+Object.defineProperty(exports, "LegacyToNextIntlProvider", {
+  enumerable: true,
+  get: function get() {
+    return _LegacyToNextIntlProvider.LegacyToNextIntlProvider;
+  }
+});
 Object.defineProperty(exports, "MediaLink", {
   enumerable: true,
   get: function get() {
@@ -97,6 +115,12 @@ Object.defineProperty(exports, "Popup", {
     return _Popup.default;
   }
 });
+Object.defineProperty(exports, "REACT_INTL_ERROR_MESSAGE", {
+  enumerable: true,
+  get: function get() {
+    return _IntlNextErrorBoundary.REACT_INTL_ERROR_MESSAGE;
+  }
+});
 Object.defineProperty(exports, "UnsupportedBlock", {
   enumerable: true,
   get: function get() {
@@ -266,6 +290,12 @@ var _Messages = require("./Messages");
 
 var _clearNextSiblingMarginTop = require("./clear-next-sibling-margin-top");
 
+var _IntlNextErrorBoundary = require("./IntlNextErrorBoundary");
+
+var _IntlLegacyFallbackProvider = require("./IntlLegacyFallbackProvider");
+
+var _LegacyToNextIntlProvider = require("./LegacyToNextIntlProvider");
+
 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; }

package/dist/cjs/utils/date.js

@@ -95,9 +95,8 @@ var timestampToTaskContext = function timestampToTaskContext(timestamp, intl) {
   var sameYear = givenDate.getUTCFullYear() === curDate.getUTCFullYear();
 
   if (intl && [-1, 0, 1].indexOf(distance) > -1) {
-    return capitalizeFirstLetter(intl.formatRelative(givenDate, {
-      units: 'day',
-      now: Number(todayTimestampInUTC())
+    return capitalizeFirstLetter(intl.formatRelativeTime(distance, 'day', {
+      numeric: 'auto'
     }));
   }
 

package/dist/cjs/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/editor-common",
-	"version": "61.0.1",
+	"version": "62.0.0",
 	"sideEffects": false
 }

package/dist/es2019/index.js

@@ -19,7 +19,7 @@ StatusSharedCssClassName, smartCardSharedStyles, SmartCardSharedCssClassName } f
 
 export { BaseTheme, Caption, ClearNextSiblingMarginTop, DEFAULT_IMAGE_HEIGHT, DEFAULT_IMAGE_WIDTH, Emoji, //exported from ./src/emoji.ts
 ErrorMessage, ExpandIconWrapper, ExpandLayoutWrapper, HelperMessage, MediaSingle, MediaSingleDimensionHelper, Mention, //exported from ./src/mention.ts
-Popup, UnsupportedBlock, UnsupportedInline, ValidMessage, WidthConsumer, WidthProvider, WithCreateAnalyticsEvent, calcColumnsFromPx, calcPctFromPx, calcPxFromColumns, calcPxFromPct, expandMessages, findOverflowScrollParent, getBreakpoint, layoutSupportsWidth, mapBreakpointToLayoutMaxWidth, overflowShadow, shadowClassNames, sharedExpandStyles, snapToGrid, withOuterListeners, MediaLink, wrappedLayouts, shouldAddDefaultWrappedWidth } from './ui'; // new child entry point ./ui/index.tsx
+Popup, UnsupportedBlock, UnsupportedInline, ValidMessage, WidthConsumer, WidthProvider, WithCreateAnalyticsEvent, calcColumnsFromPx, calcPctFromPx, calcPxFromColumns, calcPxFromPct, expandMessages, findOverflowScrollParent, getBreakpoint, layoutSupportsWidth, mapBreakpointToLayoutMaxWidth, overflowShadow, shadowClassNames, sharedExpandStyles, snapToGrid, withOuterListeners, MediaLink, wrappedLayouts, shouldAddDefaultWrappedWidth, IntlNextErrorBoundary, REACT_INTL_ERROR_MESSAGE, IntlLegacyFallbackProvider, LegacyToNextIntlProvider } from './ui'; // new child entry point ./ui/index.tsx
 
 // already exported by ./messages/index.ts
 export { linkMessages } from './messages/link'; // new child entry point in ./utils/index.ts

package/dist/es2019/messages/codeBidiWarning.js

@@ -1,4 +1,4 @@
-import { defineMessages } from 'react-intl';
+import { defineMessages } from 'react-intl-next';
 export const codeBidiWarningMessages = defineMessages({
   /**
    * Message taken from

package/dist/es2019/messages/link.js

@@ -1,4 +1,4 @@
-import { defineMessages } from 'react-intl';
+import { defineMessages } from 'react-intl-next';
 export const linkMessages = defineMessages({
   openLink: {
     id: 'fabric.editor.openLink',

package/dist/es2019/messages/unsupportedContent.js

@@ -1,4 +1,4 @@
-import { defineMessages } from 'react-intl';
+import { defineMessages } from 'react-intl-next';
 export const unsupportedContentMessages = defineMessages({
   unsupportedInlineContent: {
     id: 'fabric.editor.unsupportedInlineContent',

package/dist/es2019/ui/Caption/index.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/extends";
 import React from 'react';
-import { injectIntl } from 'react-intl';
+import { injectIntl } from 'react-intl-next';
 import styled from 'styled-components';
 import { N200, N400 } from '@atlaskit/theme/colors';
 import { messages } from './messages';

package/dist/es2019/ui/Caption/messages.js

@@ -1,4 +1,4 @@
-import { defineMessages } from 'react-intl';
+import { defineMessages } from 'react-intl-next';
 export const messages = defineMessages({
   placeholder: {
     id: 'fabric.editor.captionPlaceholder',

package/dist/es2019/ui/Expand/index.js

@@ -1,4 +1,4 @@
-import { defineMessages } from 'react-intl';
+import { defineMessages } from 'react-intl-next';
 import styled, { css } from 'styled-components';
 import { akEditorLineHeight, akEditorSwoopCubicBezier, akLayoutGutterOffset, relativeFontSizeToBase16 } from '@atlaskit/editor-shared-styles';
 import * as colors from '@atlaskit/theme/colors';

package/dist/es2019/ui/IntlLegacyFallbackProvider/index.js

@@ -0,0 +1,21 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import React from 'react';
+import { IntlProvider, intlShape } from 'react-intl';
+export class IntlLegacyFallbackProvider extends React.Component {
+  render() {
+    const oldIntl = this.context.intl;
+
+    if (!oldIntl) {
+      return /*#__PURE__*/React.createElement(IntlProvider, {
+        locale: "en"
+      }, this.props.children);
+    }
+
+    return this.props.children;
+  }
+
+}
+
+_defineProperty(IntlLegacyFallbackProvider, "contextTypes", {
+  intl: intlShape
+});

package/dist/es2019/ui/IntlNextErrorBoundary/index.js

@@ -0,0 +1,43 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import React from 'react';
+import { IntlProvider } from 'react-intl-next';
+export const REACT_INTL_ERROR_MESSAGE = '<IntlProvider> needs to exist in the component ancestry';
+
+const isMissingIntlProviderInAncestryError = err => {
+  var _err$toString;
+
+  return err === null || err === void 0 ? void 0 : (_err$toString = err.toString()) === null || _err$toString === void 0 ? void 0 : _err$toString.includes('<IntlProvider> needs to exist in the component ancestry');
+};
+
+export class IntlNextErrorBoundary extends React.Component {
+  constructor(...args) {
+    super(...args);
+
+    _defineProperty(this, "state", {
+      missingIntlProviderInAncestry: false
+    });
+  }
+
+  componentDidCatch(error, errorInfo) {
+    // if missing IntlProvider in ancestry, we setup a fallback IntlProvider ourselves
+    if (isMissingIntlProviderInAncestryError(error)) {
+      this.setState({
+        missingIntlProviderInAncestry: true
+      });
+    } else {
+      // else we re-propagate the non-react-intl-next error
+      throw error;
+    }
+  }
+
+  render() {
+    if (this.state.missingIntlProviderInAncestry) {
+      return /*#__PURE__*/React.createElement(IntlProvider, {
+        locale: "en"
+      }, this.props.children);
+    }
+
+    return this.props.children;
+  }
+
+}

package/dist/es2019/ui/LegacyToNextIntlProvider/index.js

@@ -0,0 +1,24 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import React from 'react';
+import { intlShape } from 'react-intl';
+import { createIntl, RawIntlProvider } from 'react-intl-next';
+export class LegacyToNextIntlProvider extends React.Component {
+  render() {
+    const oldIntl = this.context.intl;
+
+    if (oldIntl) {
+      const nextIntl = createIntl({ ...oldIntl
+      });
+      return /*#__PURE__*/React.createElement(RawIntlProvider, {
+        value: nextIntl
+      }, this.props.children);
+    }
+
+    return this.props.children;
+  }
+
+}
+
+_defineProperty(LegacyToNextIntlProvider, "contextTypes", {
+  intl: intlShape
+});

package/dist/es2019/ui/UnsupportedBlock/index.js

@@ -1,5 +1,5 @@
 import React, { useCallback, useRef } from 'react';
-import { injectIntl } from 'react-intl';
+import { injectIntl } from 'react-intl-next';
 import styled from 'styled-components';
 import { relativeFontSizeToBase16 } from '@atlaskit/editor-shared-styles';
 import QuestionsIcon from '@atlaskit/icon/glyph/question-circle';

package/dist/es2019/ui/UnsupportedInline/index.js

@@ -1,5 +1,5 @@
 import React, { useCallback, useRef } from 'react';
-import { injectIntl } from 'react-intl';
+import { injectIntl } from 'react-intl-next';
 import styled from 'styled-components';
 import { relativeFontSizeToBase16 } from '@atlaskit/editor-shared-styles';
 import QuestionsIcon from '@atlaskit/icon/glyph/question-circle';

package/dist/es2019/ui/index.js

@@ -20,4 +20,7 @@ export { default as overflowShadow, shadowClassNames } from './OverflowShadow';
 export { WithCreateAnalyticsEvent } from './WithCreateAnalyticsEvent';
 export { messages as expandMessages, sharedExpandStyles, ExpandIconWrapper, ExpandLayoutWrapper } from './Expand';
 export { ErrorMessage, HelperMessage, ValidMessage } from './Messages';
-export { ClearNextSiblingMarginTop } from './clear-next-sibling-margin-top';
+export { ClearNextSiblingMarginTop } from './clear-next-sibling-margin-top';
+export { IntlNextErrorBoundary, REACT_INTL_ERROR_MESSAGE } from './IntlNextErrorBoundary';
+export { IntlLegacyFallbackProvider } from './IntlLegacyFallbackProvider';
+export { LegacyToNextIntlProvider } from './LegacyToNextIntlProvider';

package/dist/es2019/utils/date.js

@@ -70,9 +70,8 @@ export const timestampToTaskContext = (timestamp, intl) => {
   const sameYear = givenDate.getUTCFullYear() === curDate.getUTCFullYear();
 
   if (intl && [-1, 0, 1].indexOf(distance) > -1) {
-    return capitalizeFirstLetter(intl.formatRelative(givenDate, {
-      units: 'day',
-      now: Number(todayTimestampInUTC())
+    return capitalizeFirstLetter(intl.formatRelativeTime(distance, 'day', {
+      numeric: 'auto'
     }));
   }
 

package/dist/es2019/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/editor-common",
-	"version": "61.0.1",
+	"version": "62.0.0",
 	"sideEffects": false
 }

package/dist/esm/index.js

@@ -19,7 +19,7 @@ StatusSharedCssClassName, smartCardSharedStyles, SmartCardSharedCssClassName } f
 
 export { BaseTheme, Caption, ClearNextSiblingMarginTop, DEFAULT_IMAGE_HEIGHT, DEFAULT_IMAGE_WIDTH, Emoji, //exported from ./src/emoji.ts
 ErrorMessage, ExpandIconWrapper, ExpandLayoutWrapper, HelperMessage, MediaSingle, MediaSingleDimensionHelper, Mention, //exported from ./src/mention.ts
-Popup, UnsupportedBlock, UnsupportedInline, ValidMessage, WidthConsumer, WidthProvider, WithCreateAnalyticsEvent, calcColumnsFromPx, calcPctFromPx, calcPxFromColumns, calcPxFromPct, expandMessages, findOverflowScrollParent, getBreakpoint, layoutSupportsWidth, mapBreakpointToLayoutMaxWidth, overflowShadow, shadowClassNames, sharedExpandStyles, snapToGrid, withOuterListeners, MediaLink, wrappedLayouts, shouldAddDefaultWrappedWidth } from './ui'; // new child entry point ./ui/index.tsx
+Popup, UnsupportedBlock, UnsupportedInline, ValidMessage, WidthConsumer, WidthProvider, WithCreateAnalyticsEvent, calcColumnsFromPx, calcPctFromPx, calcPxFromColumns, calcPxFromPct, expandMessages, findOverflowScrollParent, getBreakpoint, layoutSupportsWidth, mapBreakpointToLayoutMaxWidth, overflowShadow, shadowClassNames, sharedExpandStyles, snapToGrid, withOuterListeners, MediaLink, wrappedLayouts, shouldAddDefaultWrappedWidth, IntlNextErrorBoundary, REACT_INTL_ERROR_MESSAGE, IntlLegacyFallbackProvider, LegacyToNextIntlProvider } from './ui'; // new child entry point ./ui/index.tsx
 
 // already exported by ./messages/index.ts
 export { linkMessages } from './messages/link'; // new child entry point in ./utils/index.ts

package/dist/esm/messages/codeBidiWarning.js

@@ -1,4 +1,4 @@
-import { defineMessages } from 'react-intl';
+import { defineMessages } from 'react-intl-next';
 export var codeBidiWarningMessages = defineMessages({
   /**
    * Message taken from

package/dist/esm/messages/link.js

@@ -1,4 +1,4 @@
-import { defineMessages } from 'react-intl';
+import { defineMessages } from 'react-intl-next';
 export var linkMessages = defineMessages({
   openLink: {
     id: 'fabric.editor.openLink',

package/dist/esm/messages/unsupportedContent.js

@@ -1,4 +1,4 @@
-import { defineMessages } from 'react-intl';
+import { defineMessages } from 'react-intl-next';
 export var unsupportedContentMessages = defineMessages({
   unsupportedInlineContent: {
     id: 'fabric.editor.unsupportedInlineContent',

package/dist/esm/ui/Caption/index.js

@@ -13,7 +13,7 @@ function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflec
 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; } }
 
 import React from 'react';
-import { injectIntl } from 'react-intl';
+import { injectIntl } from 'react-intl-next';
 import styled from 'styled-components';
 import { N200, N400 } from '@atlaskit/theme/colors';
 import { messages } from './messages';

package/dist/esm/ui/Caption/messages.js

@@ -1,4 +1,4 @@
-import { defineMessages } from 'react-intl';
+import { defineMessages } from 'react-intl-next';
 export var messages = defineMessages({
   placeholder: {
     id: 'fabric.editor.captionPlaceholder',

package/dist/esm/ui/Expand/index.js

@@ -2,7 +2,7 @@ import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral
 
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7;
 
-import { defineMessages } from 'react-intl';
+import { defineMessages } from 'react-intl-next';
 import styled, { css } from 'styled-components';
 import { akEditorLineHeight, akEditorSwoopCubicBezier, akLayoutGutterOffset, relativeFontSizeToBase16 } from '@atlaskit/editor-shared-styles';
 import * as colors from '@atlaskit/theme/colors';

package/dist/esm/ui/IntlLegacyFallbackProvider/index.js

@@ -0,0 +1,45 @@
+import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
+import _createClass from "@babel/runtime/helpers/createClass";
+import _inherits from "@babel/runtime/helpers/inherits";
+import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
+import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+
+function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(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; } }
+
+import React from 'react';
+import { IntlProvider, intlShape } from 'react-intl';
+export var IntlLegacyFallbackProvider = /*#__PURE__*/function (_React$Component) {
+  _inherits(IntlLegacyFallbackProvider, _React$Component);
+
+  var _super = _createSuper(IntlLegacyFallbackProvider);
+
+  function IntlLegacyFallbackProvider() {
+    _classCallCheck(this, IntlLegacyFallbackProvider);
+
+    return _super.apply(this, arguments);
+  }
+
+  _createClass(IntlLegacyFallbackProvider, [{
+    key: "render",
+    value: function render() {
+      var oldIntl = this.context.intl;
+
+      if (!oldIntl) {
+        return /*#__PURE__*/React.createElement(IntlProvider, {
+          locale: "en"
+        }, this.props.children);
+      }
+
+      return this.props.children;
+    }
+  }]);
+
+  return IntlLegacyFallbackProvider;
+}(React.Component);
+
+_defineProperty(IntlLegacyFallbackProvider, "contextTypes", {
+  intl: intlShape
+});

package/dist/esm/ui/IntlNextErrorBoundary/index.js

@@ -0,0 +1,73 @@
+import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
+import _createClass from "@babel/runtime/helpers/createClass";
+import _assertThisInitialized from "@babel/runtime/helpers/assertThisInitialized";
+import _inherits from "@babel/runtime/helpers/inherits";
+import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
+import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+
+function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(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; } }
+
+import React from 'react';
+import { IntlProvider } from 'react-intl-next';
+export var REACT_INTL_ERROR_MESSAGE = '<IntlProvider> needs to exist in the component ancestry';
+
+var isMissingIntlProviderInAncestryError = function isMissingIntlProviderInAncestryError(err) {
+  var _err$toString;
+
+  return err === null || err === void 0 ? void 0 : (_err$toString = err.toString()) === null || _err$toString === void 0 ? void 0 : _err$toString.includes('<IntlProvider> needs to exist in the component ancestry');
+};
+
+export var IntlNextErrorBoundary = /*#__PURE__*/function (_React$Component) {
+  _inherits(IntlNextErrorBoundary, _React$Component);
+
+  var _super = _createSuper(IntlNextErrorBoundary);
+
+  function IntlNextErrorBoundary() {
+    var _this;
+
+    _classCallCheck(this, IntlNextErrorBoundary);
+
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+
+    _this = _super.call.apply(_super, [this].concat(args));
+
+    _defineProperty(_assertThisInitialized(_this), "state", {
+      missingIntlProviderInAncestry: false
+    });
+
+    return _this;
+  }
+
+  _createClass(IntlNextErrorBoundary, [{
+    key: "componentDidCatch",
+    value: function componentDidCatch(error, errorInfo) {
+      // if missing IntlProvider in ancestry, we setup a fallback IntlProvider ourselves
+      if (isMissingIntlProviderInAncestryError(error)) {
+        this.setState({
+          missingIntlProviderInAncestry: true
+        });
+      } else {
+        // else we re-propagate the non-react-intl-next error
+        throw error;
+      }
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      if (this.state.missingIntlProviderInAncestry) {
+        return /*#__PURE__*/React.createElement(IntlProvider, {
+          locale: "en"
+        }, this.props.children);
+      }
+
+      return this.props.children;
+    }
+  }]);
+
+  return IntlNextErrorBoundary;
+}(React.Component);

package/dist/esm/ui/LegacyToNextIntlProvider/index.js

@@ -0,0 +1,51 @@
+import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
+import _createClass from "@babel/runtime/helpers/createClass";
+import _inherits from "@babel/runtime/helpers/inherits";
+import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
+import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (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 = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { 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 = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(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; } }
+
+import React from 'react';
+import { intlShape } from 'react-intl';
+import { createIntl, RawIntlProvider } from 'react-intl-next';
+export var LegacyToNextIntlProvider = /*#__PURE__*/function (_React$Component) {
+  _inherits(LegacyToNextIntlProvider, _React$Component);
+
+  var _super = _createSuper(LegacyToNextIntlProvider);
+
+  function LegacyToNextIntlProvider() {
+    _classCallCheck(this, LegacyToNextIntlProvider);
+
+    return _super.apply(this, arguments);
+  }
+
+  _createClass(LegacyToNextIntlProvider, [{
+    key: "render",
+    value: function render() {
+      var oldIntl = this.context.intl;
+
+      if (oldIntl) {
+        var nextIntl = createIntl(_objectSpread({}, oldIntl));
+        return /*#__PURE__*/React.createElement(RawIntlProvider, {
+          value: nextIntl
+        }, this.props.children);
+      }
+
+      return this.props.children;
+    }
+  }]);
+
+  return LegacyToNextIntlProvider;
+}(React.Component);
+
+_defineProperty(LegacyToNextIntlProvider, "contextTypes", {
+  intl: intlShape
+});

package/dist/esm/ui/UnsupportedBlock/index.js

@@ -3,7 +3,7 @@ import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral
 var _templateObject;
 
 import React, { useCallback, useRef } from 'react';
-import { injectIntl } from 'react-intl';
+import { injectIntl } from 'react-intl-next';
 import styled from 'styled-components';
 import { relativeFontSizeToBase16 } from '@atlaskit/editor-shared-styles';
 import QuestionsIcon from '@atlaskit/icon/glyph/question-circle';

package/dist/esm/ui/UnsupportedInline/index.js

@@ -3,7 +3,7 @@ import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral
 var _templateObject;
 
 import React, { useCallback, useRef } from 'react';
-import { injectIntl } from 'react-intl';
+import { injectIntl } from 'react-intl-next';
 import styled from 'styled-components';
 import { relativeFontSizeToBase16 } from '@atlaskit/editor-shared-styles';
 import QuestionsIcon from '@atlaskit/icon/glyph/question-circle';

package/dist/esm/ui/index.js

@@ -20,4 +20,7 @@ export { default as overflowShadow, shadowClassNames } from './OverflowShadow';
 export { WithCreateAnalyticsEvent } from './WithCreateAnalyticsEvent';
 export { messages as expandMessages, sharedExpandStyles, ExpandIconWrapper, ExpandLayoutWrapper } from './Expand';
 export { ErrorMessage, HelperMessage, ValidMessage } from './Messages';
-export { ClearNextSiblingMarginTop } from './clear-next-sibling-margin-top';
+export { ClearNextSiblingMarginTop } from './clear-next-sibling-margin-top';
+export { IntlNextErrorBoundary, REACT_INTL_ERROR_MESSAGE } from './IntlNextErrorBoundary';
+export { IntlLegacyFallbackProvider } from './IntlLegacyFallbackProvider';
+export { LegacyToNextIntlProvider } from './LegacyToNextIntlProvider';

package/dist/esm/utils/date.js

@@ -70,9 +70,8 @@ export var timestampToTaskContext = function timestampToTaskContext(timestamp, i
   var sameYear = givenDate.getUTCFullYear() === curDate.getUTCFullYear();
 
   if (intl && [-1, 0, 1].indexOf(distance) > -1) {
-    return capitalizeFirstLetter(intl.formatRelative(givenDate, {
-      units: 'day',
-      now: Number(todayTimestampInUTC())
+    return capitalizeFirstLetter(intl.formatRelativeTime(distance, 'day', {
+      numeric: 'auto'
     }));
   }
 

package/dist/esm/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/editor-common",
-	"version": "61.0.1",
+	"version": "62.0.0",
 	"sideEffects": false
 }

package/dist/types/extensions/types/extension-handler.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { ADFEntity } from '@atlaskit/adf-utils';
 import { Parameters } from './extension-parameters';
 export interface ExtensionParams<T extends Parameters> {

package/dist/types/index.d.ts

@@ -15,7 +15,7 @@ EmojiSharedCssClassName, //exported from ./src/emoji.ts
 StatusSharedCssClassName, smartCardSharedStyles, SmartCardSharedCssClassName, } from './styles';
 export { BaseTheme, Caption, ClearNextSiblingMarginTop, DEFAULT_IMAGE_HEIGHT, DEFAULT_IMAGE_WIDTH, Emoji, //exported from ./src/emoji.ts
 ErrorMessage, ExpandIconWrapper, ExpandLayoutWrapper, HelperMessage, MediaSingle, MediaSingleDimensionHelper, Mention, //exported from ./src/mention.ts
-Popup, UnsupportedBlock, UnsupportedInline, ValidMessage, WidthConsumer, WidthProvider, WithCreateAnalyticsEvent, calcColumnsFromPx, calcPctFromPx, calcPxFromColumns, calcPxFromPct, expandMessages, findOverflowScrollParent, getBreakpoint, layoutSupportsWidth, mapBreakpointToLayoutMaxWidth, overflowShadow, shadowClassNames, sharedExpandStyles, snapToGrid, withOuterListeners, MediaLink, wrappedLayouts, shouldAddDefaultWrappedWidth, } from './ui';
+Popup, UnsupportedBlock, UnsupportedInline, ValidMessage, WidthConsumer, WidthProvider, WithCreateAnalyticsEvent, calcColumnsFromPx, calcPctFromPx, calcPxFromColumns, calcPxFromPct, expandMessages, findOverflowScrollParent, getBreakpoint, layoutSupportsWidth, mapBreakpointToLayoutMaxWidth, overflowShadow, shadowClassNames, sharedExpandStyles, snapToGrid, withOuterListeners, MediaLink, wrappedLayouts, shouldAddDefaultWrappedWidth, IntlNextErrorBoundary, REACT_INTL_ERROR_MESSAGE, IntlLegacyFallbackProvider, LegacyToNextIntlProvider, } from './ui';
 export type { CardEventClickHandler, CardSurroundings, EmojiProps, EventHandlers, LinkEventClickHandler, MediaSingleDimensionHelperProps, MediaSingleProps, MentionEventHandler, MentionEventHandlers, OverflowShadowOptions, OverflowShadowProps, OverflowShadowState, PopupPosition, PopupProps, SmartCardEventClickHandler, WidthConsumerContext, ExpandStyleProps, } from './ui';
 export { linkMessages } from './messages/link';
 export { validateADFEntity, validationErrorHandler, } from './utils/validate-using-spec';

package/dist/types/ui/Caption/index.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { InjectedIntlProps } from 'react-intl';
+import { WrappedComponentProps } from 'react-intl-next';
 declare type Props = {
     selected?: boolean;
     hasContent?: boolean;
@@ -8,10 +8,10 @@ declare type Props = {
         'data-renderer-start-pos': number;
     };
 };
-export declare class CaptionComponent extends React.Component<Props & InjectedIntlProps> {
+export declare class CaptionComponent extends React.Component<Props & WrappedComponentProps> {
     render(): JSX.Element;
 }
-declare const _default: React.ComponentClass<Props, any> & {
-    WrappedComponent: ReactIntl.ComponentConstructor<Props & InjectedIntlProps>;
+declare const _default: React.FC<import("react-intl-next").WithIntlProps<Props & WrappedComponentProps<"intl">>> & {
+    WrappedComponent: React.ComponentType<Props & WrappedComponentProps<"intl">>;
 };
 export default _default;

package/dist/types/ui/IntlLegacyFallbackProvider/index.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react-intl" />
+import React from 'react';
+export declare class IntlLegacyFallbackProvider extends React.Component {
+    static contextTypes: {
+        intl: ReactIntl.IntlShape;
+    };
+    render(): {} | null | undefined;
+}

package/dist/types/ui/IntlNextErrorBoundary/index.d.ts

@@ -0,0 +1,15 @@
+import React from 'react';
+interface ErrorBoundaryProps {
+}
+interface ErrorBoundaryState {
+    missingIntlProviderInAncestry: boolean;
+}
+export declare const REACT_INTL_ERROR_MESSAGE = "<IntlProvider> needs to exist in the component ancestry";
+export declare class IntlNextErrorBoundary extends React.Component<ErrorBoundaryProps, ErrorBoundaryState> {
+    state: {
+        missingIntlProviderInAncestry: boolean;
+    };
+    componentDidCatch(error: Error, errorInfo: React.ErrorInfo): void;
+    render(): {} | null | undefined;
+}
+export {};

package/dist/types/ui/LegacyToNextIntlProvider/index.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react-intl" />
+import React from 'react';
+export declare class LegacyToNextIntlProvider extends React.Component {
+    static contextTypes: {
+        intl: ReactIntl.IntlShape;
+    };
+    render(): {} | null | undefined;
+}

package/dist/types/ui/UnsupportedBlock/index.d.ts

@@ -1,13 +1,13 @@
 import React from 'react';
 import { Node as PMNode } from 'prosemirror-model';
-import { InjectedIntlProps } from 'react-intl';
+import { WrappedComponentProps } from 'react-intl-next';
 import { UnsupportedContentTooltipPayload } from '../../utils';
 export interface Props {
     node?: PMNode;
     children?: React.ReactNode;
     dispatchAnalyticsEvent?: (payload: UnsupportedContentTooltipPayload) => void;
 }
-declare const _default: React.ComponentClass<Props, any> & {
-    WrappedComponent: ReactIntl.ComponentConstructor<Props & InjectedIntlProps>;
+declare const _default: React.FC<import("react-intl-next").WithIntlProps<Props & WrappedComponentProps<"intl">>> & {
+    WrappedComponent: React.ComponentType<Props & WrappedComponentProps<"intl">>;
 };
 export default _default;

package/dist/types/ui/UnsupportedInline/index.d.ts

@@ -1,13 +1,13 @@
 import React from 'react';
 import { Node as PMNode } from 'prosemirror-model';
-import { InjectedIntlProps } from 'react-intl';
+import { WrappedComponentProps } from 'react-intl-next';
 import { UnsupportedContentTooltipPayload } from '../../utils';
 export interface Props {
     node?: PMNode;
     children?: React.ReactNode;
     dispatchAnalyticsEvent?: (payload: UnsupportedContentTooltipPayload) => void;
 }
-declare const _default: React.ComponentClass<Props, any> & {
-    WrappedComponent: ReactIntl.ComponentConstructor<Props & InjectedIntlProps>;
+declare const _default: React.FC<import("react-intl-next").WithIntlProps<Props & WrappedComponentProps<"intl">>> & {
+    WrappedComponent: React.ComponentType<Props & WrappedComponentProps<"intl">>;
 };
 export default _default;

package/dist/types/ui/index.d.ts

@@ -24,3 +24,6 @@ export { messages as expandMessages, sharedExpandStyles, ExpandIconWrapper, Expa
 export type { StyleProps as ExpandStyleProps } from './Expand';
 export { ErrorMessage, HelperMessage, ValidMessage } from './Messages';
 export { ClearNextSiblingMarginTop } from './clear-next-sibling-margin-top';
+export { IntlNextErrorBoundary, REACT_INTL_ERROR_MESSAGE, } from './IntlNextErrorBoundary';
+export { IntlLegacyFallbackProvider } from './IntlLegacyFallbackProvider';
+export { LegacyToNextIntlProvider } from './LegacyToNextIntlProvider';

package/dist/types/ui/unsupported-content-helper.d.ts

@@ -1,3 +1,3 @@
 import { Node as PMNode } from 'prosemirror-model';
-import { InjectedIntl } from 'react-intl';
-export declare function getUnsupportedContent(message: any, prefix: string, node?: PMNode, intl?: InjectedIntl): any;
+import { IntlShape } from 'react-intl-next';
+export declare function getUnsupportedContent(message: any, prefix: string, node?: PMNode, intl?: IntlShape): any;

package/dist/types/utils/date.d.ts

@@ -1,4 +1,4 @@
-import { InjectedIntl } from 'react-intl';
+import { IntlShape } from 'react-intl-next';
 declare enum FORMATS {
     ISO_FORMAT = "YYYY-MM-DD",
     CURRENT_YEAR_FORMAT_WITHOUT_YEAR = "CURRENT_YEAR_FORMAT_WITHOUT_YEAR",
@@ -11,8 +11,8 @@ export interface Date {
 }
 export declare const timestampToUTCDate: (timestamp: string | number) => Date;
 export declare const todayTimestampInUTC: () => string;
-export declare const timestampToString: (timestamp: string | number, intl: InjectedIntl | null, pattern?: FORMATS | undefined) => string;
+export declare const timestampToString: (timestamp: string | number, intl: IntlShape | null, pattern?: FORMATS | undefined) => string;
 export declare const timestampToIsoFormat: (timestamp: string | number) => string;
 export declare const isPastDate: (timestamp: string | number) => boolean;
-export declare const timestampToTaskContext: (timestamp: string | number, intl: InjectedIntl) => string;
+export declare const timestampToTaskContext: (timestamp: string | number, intl: IntlShape) => string;
 export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/editor-common",
-  "version": "61.0.1",
+  "version": "62.0.0",
   "description": "A package that contains common classes and components for editor and renderer",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -49,20 +49,20 @@
     "@atlaskit/code": "^14.3.0",
     "@atlaskit/editor-json-transformer": "^8.7.0",
     "@atlaskit/editor-shared-styles": "^1.6.0",
-    "@atlaskit/emoji": "^63.1.0",
+    "@atlaskit/emoji": "^64.0.0",
     "@atlaskit/icon": "^21.9.0",
     "@atlaskit/in-product-testing": "^0.1.0",
-    "@atlaskit/media-card": "^72.1.0",
+    "@atlaskit/media-card": "^73.0.0",
     "@atlaskit/media-client": "^14.3.0",
-    "@atlaskit/media-picker": "^58.1.0",
+    "@atlaskit/media-picker": "^59.0.0",
     "@atlaskit/mention": "^19.7.0",
-    "@atlaskit/profilecard": "^15.8.0",
-    "@atlaskit/smart-card": "^16.3.0",
+    "@atlaskit/profilecard": "^16.0.0",
+    "@atlaskit/smart-card": "^17.0.0",
     "@atlaskit/task-decision": "^17.2.0",
     "@atlaskit/theme": "^12.0.0",
     "@atlaskit/tooltip": "^17.5.0",
     "@atlaskit/ufo": "^0.0.6",
-    "@atlaskit/user-picker": "^7.3.0",
+    "@atlaskit/user-picker": "^8.0.0",
     "@atlaskit/width-detector": "^3.0.0",
     "@babel/runtime": "^7.0.0",
     "@types/prosemirror-model": "^1.11.0",
@@ -85,11 +85,12 @@
     "react": "^16.8.0",
     "react-dom": "^16.8.0",
     "react-intl": "^2.6.0",
+    "react-intl-next": "npm:react-intl@^5.18.1",
     "styled-components": "^3.2.6"
   },
   "devDependencies": {
     "@atlaskit/editor-json-transformer": "^8.7.0",
-    "@atlaskit/editor-test-helpers": "^15.6.0",
+    "@atlaskit/editor-test-helpers": "^16.0.0",
     "@atlaskit/media-core": "^32.2.0",
     "@atlaskit/util-data-test": "^17.0.0",
     "@atlaskit/visual-regression": "*",