react-intl 2.2.0 → 2.3.0

package/lib/index.es.js

@@ -1,5 +1,5 @@
 /*
- * Copyright 2016, Yahoo Inc.
+ * Copyright 2017, Yahoo Inc.
  * Copyrights licensed under the New BSD License.
  * See the accompanying LICENSE file for terms.
  */
@@ -7,7 +7,8 @@
 import allLocaleData from '../locale-data/index.js';
 import IntlMessageFormat from 'intl-messageformat';
 import IntlRelativeFormat from 'intl-relativeformat';
-import React, { Children, Component, PropTypes, isValidElement } from 'react';
+import PropTypes from 'prop-types';
+import React, { Children, Component, createElement, isValidElement } from 'react';
 import invariant from 'invariant';
 import memoizeIntlConstructor from 'intl-format-cache';
 
@@ -65,257 +66,15 @@ var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol
   return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj;
 };
 
-var jsx = function () {
-  var REACT_ELEMENT_TYPE = typeof Symbol === "function" && Symbol.for && Symbol.for("react.element") || 0xeac7;
-  return function createRawReactElement(type, props, key, children) {
-    var defaultProps = type && type.defaultProps;
-    var childrenLength = arguments.length - 3;
 
-    if (!props && childrenLength !== 0) {
-      props = {};
-    }
-
-    if (props && defaultProps) {
-      for (var propName in defaultProps) {
-        if (props[propName] === void 0) {
-          props[propName] = defaultProps[propName];
-        }
-      }
-    } else if (!props) {
-      props = defaultProps || {};
-    }
-
-    if (childrenLength === 1) {
-      props.children = children;
-    } else if (childrenLength > 1) {
-      var childArray = Array(childrenLength);
-
-      for (var i = 0; i < childrenLength; i++) {
-        childArray[i] = arguments[i + 3];
-      }
-
-      props.children = childArray;
-    }
-
-    return {
-      $$typeof: REACT_ELEMENT_TYPE,
-      type: type,
-      key: key === undefined ? null : '' + key,
-      ref: null,
-      props: props,
-      _owner: null
-    };
-  };
-}();
-
-var asyncIterator = function (iterable) {
-  if (typeof Symbol === "function") {
-    if (Symbol.asyncIterator) {
-      var method = iterable[Symbol.asyncIterator];
-      if (method != null) return method.call(iterable);
-    }
-
-    if (Symbol.iterator) {
-      return iterable[Symbol.iterator]();
-    }
-  }
-
-  throw new TypeError("Object is not async iterable");
-};
-
-var asyncGenerator = function () {
-  function AwaitValue(value) {
-    this.value = value;
-  }
-
-  function AsyncGenerator(gen) {
-    var front, back;
-
-    function send(key, arg) {
-      return new Promise(function (resolve, reject) {
-        var request = {
-          key: key,
-          arg: arg,
-          resolve: resolve,
-          reject: reject,
-          next: null
-        };
-
-        if (back) {
-          back = back.next = request;
-        } else {
-          front = back = request;
-          resume(key, arg);
-        }
-      });
-    }
-
-    function resume(key, arg) {
-      try {
-        var result = gen[key](arg);
-        var value = result.value;
-
-        if (value instanceof AwaitValue) {
-          Promise.resolve(value.value).then(function (arg) {
-            resume("next", arg);
-          }, function (arg) {
-            resume("throw", arg);
-          });
-        } else {
-          settle(result.done ? "return" : "normal", result.value);
-        }
-      } catch (err) {
-        settle("throw", err);
-      }
-    }
-
-    function settle(type, value) {
-      switch (type) {
-        case "return":
-          front.resolve({
-            value: value,
-            done: true
-          });
-          break;
 
-        case "throw":
-          front.reject(value);
-          break;
 
-        default:
-          front.resolve({
-            value: value,
-            done: false
-          });
-          break;
-      }
 
-      front = front.next;
 
-      if (front) {
-        resume(front.key, front.arg);
-      } else {
-        back = null;
-      }
-    }
 
-    this._invoke = send;
 
-    if (typeof gen.return !== "function") {
-      this.return = undefined;
-    }
-  }
 
-  if (typeof Symbol === "function" && Symbol.asyncIterator) {
-    AsyncGenerator.prototype[Symbol.asyncIterator] = function () {
-      return this;
-    };
-  }
-
-  AsyncGenerator.prototype.next = function (arg) {
-    return this._invoke("next", arg);
-  };
-
-  AsyncGenerator.prototype.throw = function (arg) {
-    return this._invoke("throw", arg);
-  };
-
-  AsyncGenerator.prototype.return = function (arg) {
-    return this._invoke("return", arg);
-  };
-
-  return {
-    wrap: function (fn) {
-      return function () {
-        return new AsyncGenerator(fn.apply(this, arguments));
-      };
-    },
-    await: function (value) {
-      return new AwaitValue(value);
-    }
-  };
-}();
-
-var asyncGeneratorDelegate = function (inner, awaitWrap) {
-  var iter = {},
-      waiting = false;
-
-  function pump(key, value) {
-    waiting = true;
-    value = new Promise(function (resolve) {
-      resolve(inner[key](value));
-    });
-    return {
-      done: false,
-      value: awaitWrap(value)
-    };
-  }
-
-  
-
-  if (typeof Symbol === "function" && Symbol.iterator) {
-    iter[Symbol.iterator] = function () {
-      return this;
-    };
-  }
-
-  iter.next = function (value) {
-    if (waiting) {
-      waiting = false;
-      return value;
-    }
-
-    return pump("next", value);
-  };
-
-  if (typeof inner.throw === "function") {
-    iter.throw = function (value) {
-      if (waiting) {
-        waiting = false;
-        throw value;
-      }
-
-      return pump("throw", value);
-    };
-  }
-
-  if (typeof inner.return === "function") {
-    iter.return = function (value) {
-      return pump("return", value);
-    };
-  }
-
-  return iter;
-};
-
-var asyncToGenerator = function (fn) {
-  return function () {
-    var gen = fn.apply(this, arguments);
-    return new Promise(function (resolve, reject) {
-      function step(key, arg) {
-        try {
-          var info = gen[key](arg);
-          var value = info.value;
-        } catch (error) {
-          reject(error);
-          return;
-        }
-
-        if (info.done) {
-          resolve(value);
-        } else {
-          return Promise.resolve(value).then(function (value) {
-            step("next", value);
-          }, function (err) {
-            step("throw", err);
-          });
-        }
-      }
 
-      return step("next");
-    });
-  };
-};
 
 var classCallCheck = function (instance, Constructor) {
   if (!(instance instanceof Constructor)) {
@@ -341,31 +100,9 @@ var createClass = function () {
   };
 }();
 
-var defineEnumerableProperties = function (obj, descs) {
-  for (var key in descs) {
-    var desc = descs[key];
-    desc.configurable = desc.enumerable = true;
-    if ("value" in desc) desc.writable = true;
-    Object.defineProperty(obj, key, desc);
-  }
-
-  return obj;
-};
-
-var defaults = function (obj, defaults) {
-  var keys = Object.getOwnPropertyNames(defaults);
 
-  for (var i = 0; i < keys.length; i++) {
-    var key = keys[i];
-    var value = Object.getOwnPropertyDescriptor(defaults, key);
 
-    if (value && value.configurable && obj[key] === undefined) {
-      Object.defineProperty(obj, key, value);
-    }
-  }
 
-  return obj;
-};
 
 var defineProperty = function (obj, key, value) {
   if (key in obj) {
@@ -396,30 +133,7 @@ var _extends = Object.assign || function (target) {
   return target;
 };
 
-var get = function get(object, property, receiver) {
-  if (object === null) object = Function.prototype;
-  var desc = Object.getOwnPropertyDescriptor(object, property);
-
-  if (desc === undefined) {
-    var parent = Object.getPrototypeOf(object);
-
-    if (parent === null) {
-      return undefined;
-    } else {
-      return get(parent, property, receiver);
-    }
-  } else if ("value" in desc) {
-    return desc.value;
-  } else {
-    var getter = desc.get;
-
-    if (getter === undefined) {
-      return undefined;
-    }
 
-    return getter.call(receiver);
-  }
-};
 
 var inherits = function (subClass, superClass) {
   if (typeof superClass !== "function" && superClass !== null) {
@@ -437,46 +151,13 @@ var inherits = function (subClass, superClass) {
   if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass;
 };
 
-var _instanceof = function (left, right) {
-  if (right != null && typeof Symbol !== "undefined" && right[Symbol.hasInstance]) {
-    return right[Symbol.hasInstance](left);
-  } else {
-    return left instanceof right;
-  }
-};
 
-var interopRequireDefault = function (obj) {
-  return obj && obj.__esModule ? obj : {
-    default: obj
-  };
-};
 
-var interopRequireWildcard = function (obj) {
-  if (obj && obj.__esModule) {
-    return obj;
-  } else {
-    var newObj = {};
 
-    if (obj != null) {
-      for (var key in obj) {
-        if (Object.prototype.hasOwnProperty.call(obj, key)) newObj[key] = obj[key];
-      }
-    }
 
-    newObj.default = obj;
-    return newObj;
-  }
-};
 
-var newArrowCheck = function (innerThis, boundThis) {
-  if (innerThis !== boundThis) {
-    throw new TypeError("Cannot instantiate an arrow function");
-  }
-};
 
-var objectDestructuringEmpty = function (obj) {
-  if (obj == null) throw new TypeError("Cannot destructure undefined");
-};
+
 
 var objectWithoutProperties = function (obj, keys) {
   var target = {};
@@ -498,112 +179,23 @@ var possibleConstructorReturn = function (self, call) {
   return call && (typeof call === "object" || typeof call === "function") ? call : self;
 };
 
-var selfGlobal = typeof global === "undefined" ? self : global;
 
-var set = function set(object, property, value, receiver) {
-  var desc = Object.getOwnPropertyDescriptor(object, property);
 
-  if (desc === undefined) {
-    var parent = Object.getPrototypeOf(object);
 
-    if (parent !== null) {
-      set(parent, property, value, receiver);
-    }
-  } else if ("value" in desc && desc.writable) {
-    desc.value = value;
-  } else {
-    var setter = desc.set;
 
-    if (setter !== undefined) {
-      setter.call(receiver, value);
-    }
-  }
 
-  return value;
-};
 
-var slicedToArray = function () {
-  function sliceIterator(arr, i) {
-    var _arr = [];
-    var _n = true;
-    var _d = false;
-    var _e = undefined;
 
-    try {
-      for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) {
-        _arr.push(_s.value);
 
-        if (i && _arr.length === i) break;
-      }
-    } catch (err) {
-      _d = true;
-      _e = err;
-    } finally {
-      try {
-        if (!_n && _i["return"]) _i["return"]();
-      } finally {
-        if (_d) throw _e;
-      }
-    }
 
-    return _arr;
-  }
 
-  return function (arr, i) {
-    if (Array.isArray(arr)) {
-      return arr;
-    } else if (Symbol.iterator in Object(arr)) {
-      return sliceIterator(arr, i);
-    } else {
-      throw new TypeError("Invalid attempt to destructure non-iterable instance");
-    }
-  };
-}();
 
-var slicedToArrayLoose = function (arr, i) {
-  if (Array.isArray(arr)) {
-    return arr;
-  } else if (Symbol.iterator in Object(arr)) {
-    var _arr = [];
 
-    for (var _iterator = arr[Symbol.iterator](), _step; !(_step = _iterator.next()).done;) {
-      _arr.push(_step.value);
 
-      if (i && _arr.length === i) break;
-    }
 
-    return _arr;
-  } else {
-    throw new TypeError("Invalid attempt to destructure non-iterable instance");
-  }
-};
 
-var taggedTemplateLiteral = function (strings, raw) {
-  return Object.freeze(Object.defineProperties(strings, {
-    raw: {
-      value: Object.freeze(raw)
-    }
-  }));
-};
 
-var taggedTemplateLiteralLoose = function (strings, raw) {
-  strings.raw = raw;
-  return strings;
-};
 
-var temporalRef = function (val, name, undef) {
-  if (val === undef) {
-    throw new ReferenceError(name + " is not defined - temporal dead zone");
-  } else {
-    return val;
-  }
-};
-
-var temporalUndefined = {};
-
-var toArray = function (arr) {
-  return Array.isArray(arr) ? arr : Array.from(arr);
-};
 
 var toConsumableArray = function (arr) {
   if (Array.isArray(arr)) {
@@ -615,42 +207,6 @@ var toConsumableArray = function (arr) {
   }
 };
 
-
-
-var babelHelpers$1 = Object.freeze({
-	jsx: jsx,
-	asyncIterator: asyncIterator,
-	asyncGenerator: asyncGenerator,
-	asyncGeneratorDelegate: asyncGeneratorDelegate,
-	asyncToGenerator: asyncToGenerator,
-	classCallCheck: classCallCheck,
-	createClass: createClass,
-	defineEnumerableProperties: defineEnumerableProperties,
-	defaults: defaults,
-	defineProperty: defineProperty,
-	get: get,
-	inherits: inherits,
-	interopRequireDefault: interopRequireDefault,
-	interopRequireWildcard: interopRequireWildcard,
-	newArrowCheck: newArrowCheck,
-	objectDestructuringEmpty: objectDestructuringEmpty,
-	objectWithoutProperties: objectWithoutProperties,
-	possibleConstructorReturn: possibleConstructorReturn,
-	selfGlobal: selfGlobal,
-	set: set,
-	slicedToArray: slicedToArray,
-	slicedToArrayLoose: slicedToArrayLoose,
-	taggedTemplateLiteral: taggedTemplateLiteral,
-	taggedTemplateLiteralLoose: taggedTemplateLiteralLoose,
-	temporalRef: temporalRef,
-	temporalUndefined: temporalUndefined,
-	toArray: toArray,
-	toConsumableArray: toConsumableArray,
-	typeof: _typeof,
-	extends: _extends,
-	instanceof: _instanceof
-});
-
 /*
  * Copyright 2015, Yahoo Inc.
  * Copyrights licensed under the New BSD License.
@@ -664,7 +220,7 @@ var func = PropTypes.func;
 var object = PropTypes.object;
 var oneOf = PropTypes.oneOf;
 var shape = PropTypes.shape;
-var node = PropTypes.node;
+var any = PropTypes.any;
 
 var localeMatcher = oneOf(['best fit', 'lookup']);
 var narrowShortLong = oneOf(['narrow', 'short', 'long']);
@@ -675,7 +231,7 @@ var intlConfigPropTypes = {
     locale: string,
     formats: object,
     messages: object,
-    textComponent: node,
+    textComponent: any,
 
     defaultLocale: string,
     defaultFormats: object
@@ -691,7 +247,7 @@ var intlFormatPropTypes = {
     formatHTMLMessage: funcReq
 };
 
-var intlShape = shape(babelHelpers$1['extends']({}, intlConfigPropTypes, intlFormatPropTypes, {
+var intlShape = shape(_extends({}, intlConfigPropTypes, intlFormatPropTypes, {
     formatters: object,
     now: funcReq
 }));
@@ -799,7 +355,7 @@ function shallowEquals(objA, objB) {
         return true;
     }
 
-    if ((typeof objA === 'undefined' ? 'undefined' : babelHelpers$1['typeof'](objA)) !== 'object' || objA === null || (typeof objB === 'undefined' ? 'undefined' : babelHelpers$1['typeof'](objB)) !== 'object' || objB === null) {
+    if ((typeof objA === 'undefined' ? 'undefined' : _typeof(objA)) !== 'object' || objA === null || (typeof objB === 'undefined' ? 'undefined' : _typeof(objB)) !== 'object' || objB === null) {
         return false;
     }
 
@@ -878,7 +434,7 @@ function injectIntl(WrappedComponent) {
         }, {
             key: 'render',
             value: function render() {
-                return React.createElement(WrappedComponent, babelHelpers$1['extends']({}, this.props, defineProperty({}, intlPropName, this.context.intl), {
+                return React.createElement(WrappedComponent, _extends({}, this.props, defineProperty({}, intlPropName, this.context.intl), {
                     ref: withRef ? 'wrappedInstance' : null
                 }));
             }
@@ -1011,7 +567,7 @@ function formatTime(config, state, value) {
 
     if (!filteredOptions.hour && !filteredOptions.minute && !filteredOptions.second) {
         // Add default formatting options if hour, minute, or second isn't defined.
-        filteredOptions = babelHelpers$1['extends']({}, filteredOptions, { hour: 'numeric', minute: 'numeric' });
+        filteredOptions = _extends({}, filteredOptions, { hour: 'numeric', minute: 'numeric' });
     }
 
     try {
@@ -1039,7 +595,7 @@ function formatRelative(config, state, value) {
 
     // Capture the current threshold values, then temporarily override them with
     // specific values just for this render.
-    var oldThresholds = babelHelpers$1['extends']({}, IntlRelativeFormat.thresholds);
+    var oldThresholds = _extends({}, IntlRelativeFormat.thresholds);
     updateRelativeFormatThresholds(RELATIVE_FORMAT_THRESHOLDS);
 
     try {
@@ -1253,7 +809,7 @@ var IntlProvider = function (_Component) {
             getPluralFormat: memoizeIntlConstructor(IntlPluralFormat)
         } : _ref$formatters;
 
-        _this.state = babelHelpers$1['extends']({}, formatters, {
+        _this.state = _extends({}, formatters, {
 
             // Wrapper to provide stable "now" time for initial render.
             now: function now() {
@@ -1298,7 +854,7 @@ var IntlProvider = function (_Component) {
                 // The `messages` are overridden to the `defaultProps` empty object
                 // to maintain referential equality across re-renders. It's assumed
                 // each <FormattedMessage> contains a `defaultMessage` prop.
-                config = babelHelpers$1['extends']({}, config, {
+                config = _extends({}, config, {
                     locale: defaultLocale,
                     formats: defaultFormats,
                     messages: defaultProps.messages
@@ -1329,7 +885,7 @@ var IntlProvider = function (_Component) {
 
 
             return {
-                intl: babelHelpers$1['extends']({}, config, boundFormatFns, {
+                intl: _extends({}, config, boundFormatFns, {
                     formatters: formatters,
                     now: now
                 })
@@ -1365,7 +921,7 @@ IntlProvider.contextTypes = {
 IntlProvider.childContextTypes = {
     intl: intlShape.isRequired
 };
-process.env.NODE_ENV !== "production" ? IntlProvider.propTypes = babelHelpers$1['extends']({}, intlConfigPropTypes, {
+process.env.NODE_ENV !== "production" ? IntlProvider.propTypes = _extends({}, intlConfigPropTypes, {
     children: PropTypes.element.isRequired,
     initialNow: PropTypes.any
 }) : void 0;
@@ -1428,7 +984,7 @@ FormattedDate.displayName = 'FormattedDate';
 FormattedDate.contextTypes = {
     intl: intlShape
 };
-process.env.NODE_ENV !== "production" ? FormattedDate.propTypes = babelHelpers$1['extends']({}, dateTimeFormatPropTypes, {
+process.env.NODE_ENV !== "production" ? FormattedDate.propTypes = _extends({}, dateTimeFormatPropTypes, {
     value: PropTypes.any.isRequired,
     format: PropTypes.string,
     children: PropTypes.func
@@ -1492,7 +1048,7 @@ FormattedTime.displayName = 'FormattedTime';
 FormattedTime.contextTypes = {
     intl: intlShape
 };
-process.env.NODE_ENV !== "production" ? FormattedTime.propTypes = babelHelpers$1['extends']({}, dateTimeFormatPropTypes, {
+process.env.NODE_ENV !== "production" ? FormattedTime.propTypes = _extends({}, dateTimeFormatPropTypes, {
     value: PropTypes.any.isRequired,
     format: PropTypes.string,
     children: PropTypes.func
@@ -1582,20 +1138,24 @@ var FormattedRelative = function (_Component) {
         value: function scheduleNextUpdate(props, state) {
             var _this2 = this;
 
-            var updateInterval = props.updateInterval;
+            // Cancel and pending update because we're scheduling a new update.
+            clearTimeout(this._timer);
+
+            var value = props.value,
+                units = props.units,
+                updateInterval = props.updateInterval;
 
-            // If the `updateInterval` is falsy, including `0`, then auto updates
-            // have been turned off, so we bail and skip scheduling an update.
+            var time = new Date(value).getTime();
 
-            if (!updateInterval) {
+            // If the `updateInterval` is falsy, including `0` or we don't have a
+            // valid date, then auto updates have been turned off, so we bail and
+            // skip scheduling an update.
+            if (!updateInterval || !isFinite(time)) {
                 return;
             }
 
-            var time = new Date(props.value).getTime();
             var delta = time - state.now;
-            var units = props.units || selectUnits(delta);
-
-            var unitDelay = getUnitDelay(units);
+            var unitDelay = getUnitDelay(units || selectUnits(delta));
             var unitRemainder = Math.abs(delta % unitDelay);
 
             // We want the largest possible timer delay which will still display
@@ -1604,8 +1164,6 @@ var FormattedRelative = function (_Component) {
             // "1 minute ago" to "2 minutes ago" when the delta is 120,000ms.
             var delay = delta < 0 ? Math.max(updateInterval, unitDelay - unitRemainder) : Math.max(updateInterval, unitRemainder);
 
-            clearTimeout(this._timer);
-
             this._timer = setTimeout(function () {
                 _this2.setState({ now: _this2.context.intl.now() });
             }, delay);
@@ -1656,7 +1214,7 @@ var FormattedRelative = function (_Component) {
                 children = _props.children;
 
 
-            var formattedRelative = formatRelative(value, babelHelpers$1['extends']({}, this.props, this.state));
+            var formattedRelative = formatRelative(value, _extends({}, this.props, this.state));
 
             if (typeof children === 'function') {
                 return children(formattedRelative);
@@ -1679,7 +1237,7 @@ FormattedRelative.contextTypes = {
 FormattedRelative.defaultProps = {
     updateInterval: 1000 * 10
 };
-process.env.NODE_ENV !== "production" ? FormattedRelative.propTypes = babelHelpers$1['extends']({}, relativeFormatPropTypes, {
+process.env.NODE_ENV !== "production" ? FormattedRelative.propTypes = _extends({}, relativeFormatPropTypes, {
     value: PropTypes.any.isRequired,
     format: PropTypes.string,
     updateInterval: PropTypes.number,
@@ -1745,7 +1303,7 @@ FormattedNumber.displayName = 'FormattedNumber';
 FormattedNumber.contextTypes = {
     intl: intlShape
 };
-process.env.NODE_ENV !== "production" ? FormattedNumber.propTypes = babelHelpers$1['extends']({}, numberFormatPropTypes, {
+process.env.NODE_ENV !== "production" ? FormattedNumber.propTypes = _extends({}, numberFormatPropTypes, {
     value: PropTypes.any.isRequired,
     format: PropTypes.string,
     children: PropTypes.func
@@ -1814,7 +1372,7 @@ FormattedPlural.contextTypes = {
 FormattedPlural.defaultProps = {
     style: 'cardinal'
 };
-process.env.NODE_ENV !== "production" ? FormattedPlural.propTypes = babelHelpers$1['extends']({}, pluralFormatPropTypes, {
+process.env.NODE_ENV !== "production" ? FormattedPlural.propTypes = _extends({}, pluralFormatPropTypes, {
     value: PropTypes.any.isRequired,
 
     other: PropTypes.node.isRequired,
@@ -1859,7 +1417,7 @@ var FormattedMessage = function (_Component) {
             // Since `values` has already been checked, we know they're not
             // different, so the current `values` are carried over so the shallow
             // equals comparison on the other props isn't affected by the `values`.
-            var nextPropsToCheck = babelHelpers$1['extends']({}, nextProps, {
+            var nextPropsToCheck = _extends({}, nextProps, {
                 values: values
             });
 
@@ -1891,42 +1449,40 @@ var FormattedMessage = function (_Component) {
 
             var hasValues = values && Object.keys(values).length > 0;
             if (hasValues) {
-                (function () {
-                    // Creates a token with a random UID that should not be guessable or
-                    // conflict with other parts of the `message` string.
-                    var uid = Math.floor(Math.random() * 0x10000000000).toString(16);
-
-                    var generateToken = function () {
-                        var counter = 0;
-                        return function () {
-                            return 'ELEMENT-' + uid + '-' + (counter += 1);
-                        };
-                    }();
-
-                    // Splitting with a delimiter to support IE8. When using a regex
-                    // with a capture group IE8 does not include the capture group in
-                    // the resulting array.
-                    tokenDelimiter = '@__' + uid + '__@';
-                    tokenizedValues = {};
-                    elements = {};
-
-                    // Iterates over the `props` to keep track of any React Element
-                    // values so they can be represented by the `token` as a placeholder
-                    // when the `message` is formatted. This allows the formatted
-                    // message to then be broken-up into parts with references to the
-                    // React Elements inserted back in.
-                    Object.keys(values).forEach(function (name) {
-                        var value = values[name];
-
-                        if (isValidElement(value)) {
-                            var token = generateToken();
-                            tokenizedValues[name] = tokenDelimiter + token + tokenDelimiter;
-                            elements[token] = value;
-                        } else {
-                            tokenizedValues[name] = value;
-                        }
-                    });
-                })();
+                // Creates a token with a random UID that should not be guessable or
+                // conflict with other parts of the `message` string.
+                var uid = Math.floor(Math.random() * 0x10000000000).toString(16);
+
+                var generateToken = function () {
+                    var counter = 0;
+                    return function () {
+                        return 'ELEMENT-' + uid + '-' + (counter += 1);
+                    };
+                }();
+
+                // Splitting with a delimiter to support IE8. When using a regex
+                // with a capture group IE8 does not include the capture group in
+                // the resulting array.
+                tokenDelimiter = '@__' + uid + '__@';
+                tokenizedValues = {};
+                elements = {};
+
+                // Iterates over the `props` to keep track of any React Element
+                // values so they can be represented by the `token` as a placeholder
+                // when the `message` is formatted. This allows the formatted
+                // message to then be broken-up into parts with references to the
+                // React Elements inserted back in.
+                Object.keys(values).forEach(function (name) {
+                    var value = values[name];
+
+                    if (isValidElement(value)) {
+                        var token = generateToken();
+                        tokenizedValues[name] = tokenDelimiter + token + tokenDelimiter;
+                        elements[token] = value;
+                    } else {
+                        tokenizedValues[name] = value;
+                    }
+                });
             }
 
             var descriptor = { id: id, description: description, defaultMessage: defaultMessage };
@@ -1953,11 +1509,9 @@ var FormattedMessage = function (_Component) {
                 return children.apply(undefined, toConsumableArray(nodes));
             }
 
-            return React.createElement(
-                Component$$1,
-                null,
-                nodes
-            );
+            // Needs to use `createElement()` instead of JSX, otherwise React will
+            // warn about a missing `key` prop with rich-text message formatting.
+            return createElement.apply(undefined, [Component$$1, null].concat(toConsumableArray(nodes)));
         }
     }]);
     return FormattedMessage;
@@ -1970,7 +1524,7 @@ FormattedMessage.contextTypes = {
 FormattedMessage.defaultProps = {
     values: {}
 };
-process.env.NODE_ENV !== "production" ? FormattedMessage.propTypes = babelHelpers$1['extends']({}, messageDescriptorPropTypes, {
+process.env.NODE_ENV !== "production" ? FormattedMessage.propTypes = _extends({}, messageDescriptorPropTypes, {
     values: PropTypes.object,
     tagName: PropTypes.string,
     children: PropTypes.func
@@ -2008,7 +1562,7 @@ var FormattedHTMLMessage = function (_Component) {
             // Since `values` has already been checked, we know they're not
             // different, so the current `values` are carried over so the shallow
             // equals comparison on the other props isn't affected by the `values`.
-            var nextPropsToCheck = babelHelpers$1['extends']({}, nextProps, {
+            var nextPropsToCheck = _extends({}, nextProps, {
                 values: values
             });
 
@@ -2063,7 +1617,7 @@ FormattedHTMLMessage.contextTypes = {
 FormattedHTMLMessage.defaultProps = {
     values: {}
 };
-process.env.NODE_ENV !== "production" ? FormattedHTMLMessage.propTypes = babelHelpers$1['extends']({}, messageDescriptorPropTypes, {
+process.env.NODE_ENV !== "production" ? FormattedHTMLMessage.propTypes = _extends({}, messageDescriptorPropTypes, {
     values: PropTypes.object,
     tagName: PropTypes.string,
     children: PropTypes.func