react-intl 3.9.3 → 3.12.1

package/dist/types.d.ts

@@ -4,6 +4,7 @@ import IntlRelativeTimeFormat, { IntlRelativeTimeFormatOptions } from '@formatjs
 import { MessageFormatElement } from 'intl-messageformat-parser';
 import { UnifiedNumberFormatOptions } from '@formatjs/intl-unified-numberformat';
 import IntlListFormat, { IntlListFormatOptions } from '@formatjs/intl-listformat';
+import { DisplayNames, DisplayNamesOptions } from '@formatjs/intl-displaynames';
 export interface IntlConfig {
     locale: string;
     timeZone?: string;
@@ -25,6 +26,7 @@ export declare type FormatNumberOptions = Exclude<UnifiedNumberFormatOptions, 'l
 export declare type FormatRelativeTimeOptions = Exclude<IntlRelativeTimeFormatOptions, 'localeMatcher'> & CustomFormatConfig;
 export declare type FormatPluralOptions = Exclude<Intl.PluralRulesOptions, 'localeMatcher'> & CustomFormatConfig;
 export declare type FormatListOptions = Exclude<IntlListFormatOptions, 'localeMatcher'>;
+export declare type FormatDisplayNameOptions = Exclude<DisplayNamesOptions, 'localeMatcher'>;
 export interface IntlFormatters {
     formatDate(value: Parameters<Intl.DateTimeFormat['format']>[0] | string, opts?: FormatDateOptions): string;
     formatTime(value: Parameters<Intl.DateTimeFormat['format']>[0] | string, opts?: FormatDateOptions): string;
@@ -39,6 +41,7 @@ export interface IntlFormatters {
     formatHTMLMessage(descriptor: MessageDescriptor, values?: Record<string, PrimitiveType>): React.ReactNode;
     formatList(values: Array<string>, opts?: FormatListOptions): string;
     formatList(values: Array<string | React.ReactNode>, opts?: FormatListOptions): React.ReactNode;
+    formatDisplayName(value: Parameters<DisplayNames['of']>[0], opts?: FormatDisplayNameOptions): string | undefined;
 }
 export interface Formatters {
     getDateTimeFormat(...args: ConstructorParameters<typeof Intl.DateTimeFormat>): Intl.DateTimeFormat;
@@ -47,6 +50,7 @@ export interface Formatters {
     getRelativeTimeFormat(...args: ConstructorParameters<typeof IntlRelativeTimeFormat>): IntlRelativeTimeFormat;
     getPluralRules(...args: ConstructorParameters<typeof Intl.PluralRules>): Intl.PluralRules;
     getListFormat(...args: ConstructorParameters<typeof IntlListFormat>): IntlListFormat;
+    getDisplayNames(...args: ConstructorParameters<typeof DisplayNames>): DisplayNames;
 }
 export interface IntlShape extends IntlConfig, IntlFormatters {
     formatters: Formatters;
@@ -58,9 +62,10 @@ export interface IntlCache {
     relativeTime: Record<string, IntlRelativeTimeFormat>;
     pluralRules: Record<string, Intl.PluralRules>;
     list: Record<string, IntlListFormat>;
+    displayNames: Record<string, DisplayNames>;
 }
 export interface MessageDescriptor {
-    id?: string;
+    id?: string | number;
     description?: string | object;
     defaultMessage?: string;
 }

package/dist/utils.d.ts

@@ -2,7 +2,7 @@ import { IntlConfig, IntlCache, CustomFormats, Formatters } from './types';
 import { IntlRelativeTimeFormatOptions } from '@formatjs/intl-relativetimeformat';
 export declare function escape(str: string): string;
 export declare function filterProps<T extends Record<string, any>, K extends string>(props: T, whitelist: Array<K>, defaults?: Partial<T>): Pick<T, K>;
-export declare function invariantIntlContext(intl?: any): void;
+export declare function invariantIntlContext(intl?: any): asserts intl;
 export declare function createError(message: string, exception?: Error): string;
 export declare function defaultErrorHandler(error: string): void;
 export declare const DEFAULT_INTL_CONFIG: Pick<IntlConfig, 'formats' | 'messages' | 'timeZone' | 'textComponent' | 'defaultLocale' | 'defaultFormats' | 'onError'>;

package/dist/utils.js

@@ -13,12 +13,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 var React = require("react");
 var intl_messageformat_1 = require("intl-messageformat");
 var intl_format_cache_1 = require("intl-format-cache");
-// Since rollup cannot deal with namespace being a function,
-// this is to interop with TypeScript since `invariant`
-// does not export a default
-// https://github.com/rollup/rollup/issues/1267
-var invariant_ = require("invariant");
-var invariant = invariant_.default || invariant_;
+var intl_utils_1 = require("@formatjs/intl-utils");
 var ESCAPED_CHARS = {
     38: '&',
     62: '>',
@@ -45,7 +40,7 @@ function filterProps(props, whitelist, defaults) {
 }
 exports.filterProps = filterProps;
 function invariantIntlContext(intl) {
-    invariant(intl, '[React Intl] Could not find required `intl` object. ' +
+    intl_utils_1.invariant(intl, '[React Intl] Could not find required `intl` object. ' +
         '<IntlProvider> needs to exist in the component ancestry.');
 }
 exports.invariantIntlContext = invariantIntlContext;
@@ -77,6 +72,7 @@ function createIntlCache() {
         relativeTime: {},
         pluralRules: {},
         list: {},
+        displayNames: {},
     };
 }
 exports.createIntlCache = createIntlCache;
@@ -88,6 +84,7 @@ function createFormatters(cache) {
     if (cache === void 0) { cache = createIntlCache(); }
     var RelativeTimeFormat = Intl.RelativeTimeFormat;
     var ListFormat = Intl.ListFormat;
+    var DisplayNames = Intl.DisplayNames;
     return {
         getDateTimeFormat: intl_format_cache_1.default(Intl.DateTimeFormat, cache.dateTime),
         getNumberFormat: intl_format_cache_1.default(Intl.NumberFormat, cache.number),
@@ -95,6 +92,7 @@ function createFormatters(cache) {
         getRelativeTimeFormat: intl_format_cache_1.default(RelativeTimeFormat, cache.relativeTime),
         getPluralRules: intl_format_cache_1.default(Intl.PluralRules, cache.pluralRules),
         getListFormat: intl_format_cache_1.default(ListFormat, cache.list),
+        getDisplayNames: intl_format_cache_1.default(DisplayNames, cache.displayNames),
     };
 }
 exports.createFormatters = createFormatters;

package/lib/components/createFormattedComponent.d.ts

@@ -1,10 +1,11 @@
 import * as React from 'react';
-import { IntlShape, FormatDateOptions, FormatNumberOptions, FormatListOptions } from '../types';
+import { IntlShape, FormatDateOptions, FormatNumberOptions, FormatListOptions, FormatDisplayNameOptions } from '../types';
 declare type Formatter = {
     formatDate: FormatDateOptions;
     formatTime: FormatDateOptions;
     formatNumber: FormatNumberOptions;
     formatList: FormatListOptions;
+    formatDisplayName: FormatDisplayNameOptions;
 };
 export declare const FormattedNumberParts: React.FC<Formatter['formatNumber'] & {
     value: Parameters<IntlShape['formatNumber']>[0];

package/lib/components/createFormattedComponent.js

@@ -3,8 +3,10 @@ var __rest = (this && this.__rest) || function (s, e) {
     for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
         t[p] = s[p];
     if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) if (e.indexOf(p[i]) < 0)
-            t[p[i]] = s[p[i]];
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
     return t;
 };
 import * as React from 'react';
@@ -16,6 +18,9 @@ var DisplayName;
     DisplayName["formatTime"] = "FormattedTime";
     DisplayName["formatNumber"] = "FormattedNumber";
     DisplayName["formatList"] = "FormattedList";
+    // Note that this DisplayName is the locale display name, not to be confused with
+    // the name of the enum, which is for React component display name in dev tools.
+    DisplayName["formatDisplayName"] = "FormattedDisplayName";
 })(DisplayName || (DisplayName = {}));
 var DisplayNameParts;
 (function (DisplayNameParts) {

package/lib/components/html-message.js

@@ -39,5 +39,5 @@ class FormattedHTMLMessage extends FormattedMessage {
     }
 }
 FormattedHTMLMessage.displayName = 'FormattedHTMLMessage';
-FormattedHTMLMessage.defaultProps = Object.assign({}, FormattedMessage.defaultProps, { tagName: 'span' });
+FormattedHTMLMessage.defaultProps = Object.assign(Object.assign({}, FormattedMessage.defaultProps), { tagName: 'span' });
 export default FormattedHTMLMessage;

package/lib/components/injectIntl.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { IntlShape, Omit } from '../types';
-export declare const Provider: React.ProviderExoticComponent<React.ProviderProps<IntlShape>>;
+export declare const Provider: React.Provider<IntlShape>;
 export declare const Context: React.Context<IntlShape>;
 export interface Opts<IntlPropName extends string = 'intl', ForwardRef extends boolean = false> {
     intlPropName?: IntlPropName;

package/lib/components/message.js

@@ -8,8 +8,10 @@ var __rest = (this && this.__rest) || function (s, e) {
     for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
         t[p] = s[p];
     if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) if (e.indexOf(p[i]) < 0)
-            t[p[i]] = s[p[i]];
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
     return t;
 };
 import * as React from 'react';
@@ -22,7 +24,7 @@ const defaultFormatMessage = (descriptor, values) => {
     if (process.env.NODE_ENV !== 'production') {
         console.error('[React Intl] Could not find required `intl` object. <IntlProvider> needs to exist in the component ancestry. Using default message as fallback.');
     }
-    return formatMessage(Object.assign({}, DEFAULT_INTL_CONFIG, { locale: 'en' }), createFormatters(), descriptor, values);
+    return formatMessage(Object.assign(Object.assign({}, DEFAULT_INTL_CONFIG), { locale: 'en' }), createFormatters(), descriptor, values);
 };
 class FormattedMessage extends React.Component {
     shouldComponentUpdate(nextProps) {

package/lib/components/plural.d.ts

@@ -11,7 +11,7 @@ interface Props extends FormatPluralOptions {
     many?: React.ReactNode;
     children?(value: React.ReactNode): React.ReactElement | null;
 }
-declare const _default: React.ForwardRefExoticComponent<Pick<Props, "children" | "other" | "zero" | "one" | "two" | "few" | "many" | "localeMatcher" | "type" | "format" | "value"> & {
+declare const _default: React.ForwardRefExoticComponent<Pick<Props, "children" | "other" | "zero" | "one" | "two" | "few" | "many" | "localeMatcher" | "format" | "type" | "value"> & {
     forwardedRef?: ((instance: any) => void) | React.RefObject<any> | null | undefined;
 } & React.RefAttributes<any>> & {
     WrappedComponent: React.ComponentType<Props>;

package/lib/components/provider.js

@@ -6,7 +6,6 @@
 import * as React from 'react';
 import { Provider } from './injectIntl';
 import { createError, DEFAULT_INTL_CONFIG, createFormatters, invariantIntlContext, createIntlCache, } from '../utils';
-import areIntlLocalesSupported from 'intl-locales-supported';
 import { formatNumber, formatNumberToParts } from '../formatters/number';
 import { formatRelativeTime } from '../formatters/relativeTime';
 import { formatDate, formatTime, formatDateToParts, formatTimeToParts, } from '../formatters/dateTime';
@@ -14,6 +13,7 @@ import { formatPlural } from '../formatters/plural';
 import { formatMessage, formatHTMLMessage } from '../formatters/message';
 import * as shallowEquals_ from 'shallow-equal/objects';
 import { formatList } from '../formatters/list';
+import { formatDisplayName } from '../formatters/displayName';
 const shallowEquals = shallowEquals_.default || shallowEquals_;
 function processIntlConfig(config) {
     return {
@@ -34,13 +34,11 @@ function processIntlConfig(config) {
  */
 export function createIntl(config, cache) {
     const formatters = createFormatters(cache);
-    const resolvedConfig = Object.assign({}, DEFAULT_INTL_CONFIG, config);
-    if (!resolvedConfig.locale ||
-        !areIntlLocalesSupported(resolvedConfig.locale)) {
-        const { locale, defaultLocale, onError } = resolvedConfig;
-        if (typeof onError === 'function') {
-            onError(createError(`Missing locale data for locale: "${locale}". ` +
-                `Using default locale: "${defaultLocale}" as fallback.`));
+    const resolvedConfig = Object.assign(Object.assign({}, DEFAULT_INTL_CONFIG), config);
+    const { locale, defaultLocale, onError } = resolvedConfig;
+    if (!locale) {
+        if (onError) {
+            onError(createError(`"locale" was not configured, using "${defaultLocale}" as fallback. See https://github.com/formatjs/react-intl/blob/master/docs/API.md#intlshape for more details`));
         }
         // Since there's no registered locale data for `locale`, this will
         // fallback to the `defaultLocale` to make sure things can render.
@@ -49,7 +47,14 @@ export function createIntl(config, cache) {
         // each <FormattedMessage> contains a `defaultMessage` prop.
         resolvedConfig.locale = resolvedConfig.defaultLocale || 'en';
     }
-    return Object.assign({}, resolvedConfig, { formatters, formatNumber: formatNumber.bind(null, resolvedConfig, formatters.getNumberFormat), formatNumberToParts: formatNumberToParts.bind(null, resolvedConfig, formatters.getNumberFormat), formatRelativeTime: formatRelativeTime.bind(null, resolvedConfig, formatters.getRelativeTimeFormat), formatDate: formatDate.bind(null, resolvedConfig, formatters.getDateTimeFormat), formatDateToParts: formatDateToParts.bind(null, resolvedConfig, formatters.getDateTimeFormat), formatTime: formatTime.bind(null, resolvedConfig, formatters.getDateTimeFormat), formatTimeToParts: formatTimeToParts.bind(null, resolvedConfig, formatters.getDateTimeFormat), formatPlural: formatPlural.bind(null, resolvedConfig, formatters.getPluralRules), formatMessage: formatMessage.bind(null, resolvedConfig, formatters), formatHTMLMessage: formatHTMLMessage.bind(null, resolvedConfig, formatters), formatList: formatList.bind(null, resolvedConfig, formatters.getListFormat) });
+    else if (!Intl.NumberFormat.supportedLocalesOf(locale).length && onError) {
+        onError(createError(`Missing locale data for locale: "${locale}" in Intl.NumberFormat. Using default locale: "${defaultLocale}" as fallback. See https://github.com/formatjs/react-intl/blob/master/docs/Getting-Started.md#runtime-requirements for more details`));
+    }
+    else if (!Intl.DateTimeFormat.supportedLocalesOf(locale).length &&
+        onError) {
+        onError(createError(`Missing locale data for locale: "${locale}" in Intl.DateTimeFormat. Using default locale: "${defaultLocale}" as fallback. See https://github.com/formatjs/react-intl/blob/master/docs/Getting-Started.md#runtime-requirements for more details`));
+    }
+    return Object.assign(Object.assign({}, resolvedConfig), { formatters, formatNumber: formatNumber.bind(null, resolvedConfig, formatters.getNumberFormat), formatNumberToParts: formatNumberToParts.bind(null, resolvedConfig, formatters.getNumberFormat), formatRelativeTime: formatRelativeTime.bind(null, resolvedConfig, formatters.getRelativeTimeFormat), formatDate: formatDate.bind(null, resolvedConfig, formatters.getDateTimeFormat), formatDateToParts: formatDateToParts.bind(null, resolvedConfig, formatters.getDateTimeFormat), formatTime: formatTime.bind(null, resolvedConfig, formatters.getDateTimeFormat), formatTimeToParts: formatTimeToParts.bind(null, resolvedConfig, formatters.getDateTimeFormat), formatPlural: formatPlural.bind(null, resolvedConfig, formatters.getPluralRules), formatMessage: formatMessage.bind(null, resolvedConfig, formatters), formatHTMLMessage: formatHTMLMessage.bind(null, resolvedConfig, formatters), formatList: formatList.bind(null, resolvedConfig, formatters.getListFormat), formatDisplayName: formatDisplayName.bind(null, resolvedConfig, formatters.getDisplayNames) });
 }
 export default class IntlProvider extends React.PureComponent {
     constructor() {

package/lib/components/relative.js

@@ -6,12 +6,7 @@
 import * as React from 'react';
 import { Context } from './injectIntl';
 import { invariantIntlContext } from '../utils';
-// Since rollup cannot deal with namespace being a function,
-// this is to interop with TypeScript since `invariant`
-// does not export a default
-// https://github.com/rollup/rollup/issues/1267
-import * as invariant_ from 'invariant';
-const invariant = invariant_.default || invariant_;
+import { invariant } from '@formatjs/intl-utils';
 const MINUTE = 60;
 const HOUR = 60 * 60;
 const DAY = 60 * 60 * 24;
@@ -57,9 +52,6 @@ const INCREMENTABLE_UNITS = ['second', 'minute', 'hour'];
 function canIncrement(unit = 'second') {
     return INCREMENTABLE_UNITS.includes(unit);
 }
-function verifyProps(updateIntervalInSeconds, unit) {
-    invariant(!updateIntervalInSeconds || (updateIntervalInSeconds && canIncrement(unit)), 'Cannot schedule update with unit longer than hour');
-}
 export class FormattedRelativeTime extends React.PureComponent {
     constructor(props) {
         super(props);
@@ -72,7 +64,8 @@ export class FormattedRelativeTime extends React.PureComponent {
                 ? valueToSeconds(this.props.value, this.props.unit)
                 : 0,
         };
-        verifyProps(props.updateIntervalInSeconds, props.unit);
+        invariant(!props.updateIntervalInSeconds ||
+            !!(props.updateIntervalInSeconds && canIncrement(props.unit)), 'Cannot schedule update with unit longer than hour');
     }
     scheduleNextUpdate({ updateIntervalInSeconds, unit }, { currentValueInSeconds }) {
         clearTimeout(this._updateTimer);

package/lib/formatters/dateTime.js

@@ -21,14 +21,14 @@ const DATE_TIME_FORMAT_OPTIONS = [
 ];
 export function getFormatter({ locale, formats, onError, timeZone, }, type, getDateTimeFormat, options = {}) {
     const { format } = options;
-    const defaults = Object.assign({}, (timeZone && { timeZone }), (format && getNamedFormat(formats, type, format, onError)));
+    const defaults = Object.assign(Object.assign({}, (timeZone && { timeZone })), (format && getNamedFormat(formats, type, format, onError)));
     let filteredOptions = filterProps(options, DATE_TIME_FORMAT_OPTIONS, defaults);
     if (type === 'time' &&
         !filteredOptions.hour &&
         !filteredOptions.minute &&
         !filteredOptions.second) {
         // Add default formatting options if hour, minute, or second isn't defined.
-        filteredOptions = Object.assign({}, filteredOptions, { hour: 'numeric', minute: 'numeric' });
+        filteredOptions = Object.assign(Object.assign({}, filteredOptions), { hour: 'numeric', minute: 'numeric' });
     }
     return getDateTimeFormat(locale, filteredOptions);
 }

package/lib/formatters/displayName.d.ts

@@ -0,0 +1,2 @@
+import { IntlConfig, Formatters, IntlFormatters } from '../types';
+export declare function formatDisplayName({ locale, onError }: Pick<IntlConfig, 'locale' | 'onError'>, getDisplayNames: Formatters['getDisplayNames'], value: Parameters<IntlFormatters['formatDisplayName']>[0], options?: Parameters<IntlFormatters['formatDisplayName']>[1]): string | undefined;

package/lib/formatters/displayName.js

@@ -0,0 +1,22 @@
+import { filterProps, createError } from '../utils';
+const DISPLAY_NAMES_OPTONS = [
+    'localeMatcher',
+    'style',
+    'type',
+    'fallback',
+];
+export function formatDisplayName({ locale, onError }, getDisplayNames, value, options = {}) {
+    const DisplayNames = Intl.DisplayNames;
+    if (!DisplayNames) {
+        onError(createError(`Intl.DisplayNames is not available in this environment.
+Try polyfilling it using "@formatjs/intl-displaynames"
+`));
+    }
+    const filteredOptions = filterProps(options, DISPLAY_NAMES_OPTONS);
+    try {
+        return getDisplayNames(locale, filteredOptions).of(value);
+    }
+    catch (e) {
+        onError(createError('Error formatting display name.', e));
+    }
+}

package/lib/formatters/message.d.ts

@@ -1,5 +1,6 @@
 import * as React from 'react';
 import { Formatters, IntlConfig, MessageDescriptor } from '../types';
 import { PrimitiveType } from 'intl-messageformat';
+export declare const prepareIntlMessageFormatHtmlOutput: (chunks: (string | object)[]) => React.ReactElement<any, string | ((props: any) => React.ReactElement<any, string | any | (new (props: any) => React.Component<any, any, any>)> | null) | (new (props: any) => React.Component<any, any, any>)>;
 export declare function formatMessage({ locale, formats, messages, defaultLocale, defaultFormats, onError, }: Pick<IntlConfig, 'locale' | 'formats' | 'messages' | 'defaultLocale' | 'defaultFormats' | 'onError'>, state: Formatters, messageDescriptor?: MessageDescriptor, values?: Record<string, PrimitiveType>): string;
 export declare function formatHTMLMessage(config: Pick<IntlConfig, 'locale' | 'formats' | 'messages' | 'defaultLocale' | 'defaultFormats' | 'onError'>, state: Formatters, messageDescriptor?: MessageDescriptor, rawValues?: Record<string, PrimitiveType>): React.ReactNode;

package/lib/formatters/message.js

@@ -3,12 +3,8 @@
  * Copyrights licensed under the New BSD License.
  * See the accompanying LICENSE file for terms.
  */
-// Since rollup cannot deal with namespace being a function,
-// this is to interop with TypeScript since `invariant`
-// does not export a default
-// https://github.com/rollup/rollup/issues/1267
-import * as invariant_ from 'invariant';
-const invariant = invariant_.default || invariant_;
+import * as React from 'react';
+import { invariant } from '@formatjs/intl-utils';
 import { createError, escape } from '../utils';
 import IntlMessageFormat from 'intl-messageformat';
 function setTimeZoneInOptions(opts, timeZone) {
@@ -18,9 +14,9 @@ function setTimeZoneInOptions(opts, timeZone) {
     }, {});
 }
 function deepMergeOptions(opts1, opts2) {
-    const keys = Object.keys(Object.assign({}, opts1, opts2));
+    const keys = Object.keys(Object.assign(Object.assign({}, opts1), opts2));
     return keys.reduce((all, k) => {
-        all[k] = Object.assign({}, (opts1[k] || {}), (opts2[k] || {}));
+        all[k] = Object.assign(Object.assign({}, (opts1[k] || {})), (opts2[k] || {}));
         return all;
     }, {});
 }
@@ -29,16 +25,14 @@ function deepMergeFormatsAndSetTimeZone(f1, timeZone) {
         return f1;
     }
     const mfFormats = IntlMessageFormat.formats;
-    return Object.assign({}, mfFormats, f1, { date: deepMergeOptions(setTimeZoneInOptions(mfFormats.date, timeZone), setTimeZoneInOptions(f1.date || {}, timeZone)), time: deepMergeOptions(setTimeZoneInOptions(mfFormats.time, timeZone), setTimeZoneInOptions(f1.time || {}, timeZone)) });
+    return Object.assign(Object.assign(Object.assign({}, mfFormats), f1), { date: deepMergeOptions(setTimeZoneInOptions(mfFormats.date, timeZone), setTimeZoneInOptions(f1.date || {}, timeZone)), time: deepMergeOptions(setTimeZoneInOptions(mfFormats.time, timeZone), setTimeZoneInOptions(f1.time || {}, timeZone)) });
 }
+export const prepareIntlMessageFormatHtmlOutput = (chunks) => React.createElement(React.Fragment, null, ...chunks);
 export function formatMessage({ locale, formats, messages, defaultLocale, defaultFormats, onError, timeZone, }, state, messageDescriptor = { id: '' }, values = {}) {
     const { id, defaultMessage } = messageDescriptor;
     // `id` is a required field of a Message Descriptor.
-    invariant(id, '[React Intl] An `id` must be provided to format a message.');
-    if (!id) {
-        throw new Error('[React Intl] An `id` must be provided to format a message.');
-    }
-    const message = messages && messages[id];
+    invariant(!!id, '[React Intl] An `id` must be provided to format a message.');
+    const message = messages && messages[String(id)];
     formats = deepMergeFormatsAndSetTimeZone(formats, timeZone);
     defaultFormats = deepMergeFormatsAndSetTimeZone(defaultFormats, timeZone);
     let formattedMessageParts = [];
@@ -77,15 +71,15 @@ export function formatMessage({ locale, formats, messages, defaultLocale, defaul
         onError(createError(`Cannot format message: "${id}", ` +
             `using message ${message || defaultMessage ? 'source' : 'id'} as fallback.`));
         if (typeof message === 'string') {
-            return message || defaultMessage || id;
+            return message || defaultMessage || String(id);
         }
-        return defaultMessage || id;
+        return defaultMessage || String(id);
     }
     if (formattedMessageParts.length === 1 &&
         typeof formattedMessageParts[0] === 'string') {
-        return formattedMessageParts[0] || defaultMessage || id;
+        return formattedMessageParts[0] || defaultMessage || String(id);
     }
-    return formattedMessageParts;
+    return prepareIntlMessageFormatHtmlOutput(formattedMessageParts);
 }
 export function formatHTMLMessage(config, state, messageDescriptor = { id: '' }, rawValues = {}) {
     // Process all the values before they are used when formatting the ICU

package/lib/index.d.ts

@@ -1,9 +1,10 @@
 import * as React from 'react';
 export * from './types';
-export { defineMessages } from '@formatjs/macro';
+export declare function defineMessages<T, U extends Record<string, T>>(msgs: U): U;
 import { CustomFormatConfig } from './types';
 import { UnifiedNumberFormatOptions } from '@formatjs/intl-unified-numberformat';
 import { IntlListFormatOptions } from '@formatjs/intl-listformat';
+import { DisplayNamesOptions } from '@formatjs/intl-displaynames/lib';
 export { default as injectIntl, Provider as RawIntlProvider, Context as IntlContext, WithIntlProps, WrappedComponentProps, } from './components/injectIntl';
 export { default as useIntl } from './components/useIntl';
 export { default as IntlProvider, createIntl } from './components/provider';
@@ -19,11 +20,14 @@ export declare const FormattedNumber: React.FC<UnifiedNumberFormatOptions & Cust
 export declare const FormattedList: React.FC<IntlListFormatOptions & {
     value: React.ReactNode[];
 }>;
-export declare const FormattedDateParts: React.FunctionComponent<Intl.DateTimeFormatOptions & CustomFormatConfig & {
+export declare const FormattedDisplayName: React.FC<DisplayNamesOptions & {
+    value: string | number | object;
+}>;
+export declare const FormattedDateParts: React.FC<Intl.DateTimeFormatOptions & CustomFormatConfig & {
     value: string | number | Date | undefined;
     children(val: Intl.DateTimeFormatPart[]): React.ReactElement<any, string | ((props: any) => React.ReactElement<any, string | any | (new (props: any) => React.Component<any, any, any>)> | null) | (new (props: any) => React.Component<any, any, any>)> | null;
 }>;
-export declare const FormattedTimeParts: React.FunctionComponent<Intl.DateTimeFormatOptions & CustomFormatConfig & {
+export declare const FormattedTimeParts: React.FC<Intl.DateTimeFormatOptions & CustomFormatConfig & {
     value: string | number | Date | undefined;
     children(val: Intl.DateTimeFormatPart[]): React.ReactElement<any, string | ((props: any) => React.ReactElement<any, string | any | (new (props: any) => React.Component<any, any, any>)> | null) | (new (props: any) => React.Component<any, any, any>)> | null;
 }>;

package/lib/index.js

@@ -1,4 +1,6 @@
-export { defineMessages } from '@formatjs/macro';
+export function defineMessages(msgs) {
+    return msgs;
+}
 import { createFormattedComponent, createFormattedDateTimePartsComponent, } from './components/createFormattedComponent';
 export { default as injectIntl, Provider as RawIntlProvider, Context as IntlContext, } from './components/injectIntl';
 export { default as useIntl } from './components/useIntl';
@@ -8,6 +10,7 @@ export const FormattedDate = createFormattedComponent('formatDate');
 export const FormattedTime = createFormattedComponent('formatTime');
 export const FormattedNumber = createFormattedComponent('formatNumber');
 export const FormattedList = createFormattedComponent('formatList');
+export const FormattedDisplayName = createFormattedComponent('formatDisplayName');
 export const FormattedDateParts = createFormattedDateTimePartsComponent('formatDate');
 export const FormattedTimeParts = createFormattedDateTimePartsComponent('formatTime');
 export { FormattedNumberParts } from './components/createFormattedComponent';

package/lib/react-intl.d.ts

@@ -1,4 +1,6 @@
-import { defineMessages } from '@formatjs/macro';
+import { DisplayNames } from '@formatjs/intl-displaynames';
+import { DisplayNamesOptions } from '@formatjs/intl-displaynames';
+import { DisplayNamesOptions as DisplayNamesOptions_2 } from '@formatjs/intl-displaynames/lib';
 import { Formats } from 'intl-messageformat';
 import { FormatXMLElementFn } from 'intl-messageformat';
 import IntlListFormat from '@formatjs/intl-listformat';
@@ -30,10 +32,13 @@ export declare interface CustomFormats extends Partial<Formats> {
 }
 
 declare const DEFAULT_INTL_CONFIG: Pick<IntlConfig, 'formats' | 'messages' | 'timeZone' | 'textComponent' | 'defaultLocale' | 'defaultFormats' | 'onError'>;
-export { defineMessages }
+
+export declare function defineMessages<T, U extends Record<string, T>>(msgs: U): U;
 
 export declare type FormatDateOptions = Exclude<Intl.DateTimeFormatOptions, 'localeMatcher'> & CustomFormatConfig;
 
+export declare type FormatDisplayNameOptions = Exclude<DisplayNamesOptions, 'localeMatcher'>;
+
 export declare type FormatListOptions = Exclude<IntlListFormatOptions, 'localeMatcher'>;
 
 export declare type FormatNumberOptions = Exclude<UnifiedNumberFormatOptions, 'localeMatcher'> & CustomFormatConfig;
@@ -46,11 +51,15 @@ export declare const FormattedDate: React.FC<Intl.DateTimeFormatOptions & Custom
     value: string | number | Date | undefined;
 }>;
 
-export declare const FormattedDateParts: React.FunctionComponent<Intl.DateTimeFormatOptions & CustomFormatConfig & {
+export declare const FormattedDateParts: React.FC<Intl.DateTimeFormatOptions & CustomFormatConfig & {
     value: string | number | Date | undefined;
     children(val: Intl.DateTimeFormatPart[]): React.ReactElement<any, string | ((props: any) => React.ReactElement<any, string | any | (new (props: any) => React.Component<any, any, any>)> | null) | (new (props: any) => React.Component<any, any, any>)> | null;
 }>;
 
+export declare const FormattedDisplayName: React.FC<DisplayNamesOptions_2 & {
+    value: string | number | object;
+}>;
+
 export declare class FormattedHTMLMessage extends FormattedMessage<Record<string, PrimitiveType>> {
     static displayName: string;
     static defaultProps: {
@@ -82,7 +91,7 @@ export declare const FormattedNumberParts: React.FC<Formatter['formatNumber'] &
     children(val: Intl.NumberFormatPart[]): React.ReactElement | null;
 }>;
 
-export declare const FormattedPlural: React.ForwardRefExoticComponent<Pick<Props_2, "children" | "other" | "zero" | "one" | "two" | "few" | "many" | "localeMatcher" | "type" | "format" | "value"> & {
+export declare const FormattedPlural: React.ForwardRefExoticComponent<Pick<Props_2, "children" | "other" | "zero" | "one" | "two" | "few" | "many" | "localeMatcher" | "format" | "type" | "value"> & {
     forwardedRef?: ((instance: any) => void) | React.RefObject<any> | null | undefined;
 } & React.RefAttributes<any>> & {
     WrappedComponent: React.ComponentType<Props_2>;
@@ -106,7 +115,7 @@ export declare const FormattedTime: React.FC<Intl.DateTimeFormatOptions & Custom
     value: string | number | Date | undefined;
 }>;
 
-export declare const FormattedTimeParts: React.FunctionComponent<Intl.DateTimeFormatOptions & CustomFormatConfig & {
+export declare const FormattedTimeParts: React.FC<Intl.DateTimeFormatOptions & CustomFormatConfig & {
     value: string | number | Date | undefined;
     children(val: Intl.DateTimeFormatPart[]): React.ReactElement<any, string | ((props: any) => React.ReactElement<any, string | any | (new (props: any) => React.Component<any, any, any>)> | null) | (new (props: any) => React.Component<any, any, any>)> | null;
 }>;
@@ -116,6 +125,7 @@ declare type Formatter = {
     formatTime: FormatDateOptions;
     formatNumber: FormatNumberOptions;
     formatList: FormatListOptions;
+    formatDisplayName: FormatDisplayNameOptions;
 };
 
 export declare interface Formatters {
@@ -125,6 +135,7 @@ export declare interface Formatters {
     getRelativeTimeFormat(...args: ConstructorParameters<typeof IntlRelativeTimeFormat>): IntlRelativeTimeFormat;
     getPluralRules(...args: ConstructorParameters<typeof Intl.PluralRules>): Intl.PluralRules;
     getListFormat(...args: ConstructorParameters<typeof IntlListFormat>): IntlListFormat;
+    getDisplayNames(...args: ConstructorParameters<typeof DisplayNames>): DisplayNames;
 }
 
 export declare function injectIntl<IntlPropName extends string, P extends WrappedComponentProps<IntlPropName> = WrappedComponentProps<any>>(WrappedComponent: React.ComponentType<P>, options?: Opts<IntlPropName, false>): React.FC<WithIntlProps<P>> & {
@@ -142,6 +153,7 @@ export declare interface IntlCache {
     relativeTime: Record<string, IntlRelativeTimeFormat>;
     pluralRules: Record<string, Intl.PluralRules>;
     list: Record<string, IntlListFormat>;
+    displayNames: Record<string, DisplayNames>;
 }
 
 export declare interface IntlConfig {
@@ -171,6 +183,7 @@ export declare interface IntlFormatters {
     formatHTMLMessage(descriptor: MessageDescriptor, values?: Record<string, PrimitiveType>): React.ReactNode;
     formatList(values: Array<string>, opts?: FormatListOptions): string;
     formatList(values: Array<string | React.ReactNode>, opts?: FormatListOptions): React.ReactNode;
+    formatDisplayName(value: Parameters<DisplayNames['of']>[0], opts?: FormatDisplayNameOptions): string | undefined;
 }
 
 export declare class IntlProvider extends React.PureComponent<OptionalIntlConfig, State> {
@@ -187,7 +200,7 @@ export declare interface IntlShape extends IntlConfig, IntlFormatters {
 }
 
 export declare interface MessageDescriptor {
-    id?: string;
+    id?: string | number;
     description?: string | object;
     defaultMessage?: string;
 }
@@ -227,7 +240,7 @@ declare interface Props_3<V extends Record<string, any> = Record<string, React.R
     children?(...nodes: React.ReactNodeArray): React.ReactNode;
 }
 
-export declare const RawIntlProvider: React.ProviderExoticComponent<React.ProviderProps<IntlShape>>;
+export declare const RawIntlProvider: React.Provider<IntlShape>;
 
 declare interface State {
     /**

package/lib/tsdoc-metadata.json

@@ -5,7 +5,7 @@
   "toolPackages": [
     {
       "packageName": "@microsoft/api-extractor",
-      "packageVersion": "7.7.0"
+      "packageVersion": "7.7.8"
     }
   ]
 }

package/lib/types.d.ts

@@ -4,6 +4,7 @@ import IntlRelativeTimeFormat, { IntlRelativeTimeFormatOptions } from '@formatjs
 import { MessageFormatElement } from 'intl-messageformat-parser';
 import { UnifiedNumberFormatOptions } from '@formatjs/intl-unified-numberformat';
 import IntlListFormat, { IntlListFormatOptions } from '@formatjs/intl-listformat';
+import { DisplayNames, DisplayNamesOptions } from '@formatjs/intl-displaynames';
 export interface IntlConfig {
     locale: string;
     timeZone?: string;
@@ -25,6 +26,7 @@ export declare type FormatNumberOptions = Exclude<UnifiedNumberFormatOptions, 'l
 export declare type FormatRelativeTimeOptions = Exclude<IntlRelativeTimeFormatOptions, 'localeMatcher'> & CustomFormatConfig;
 export declare type FormatPluralOptions = Exclude<Intl.PluralRulesOptions, 'localeMatcher'> & CustomFormatConfig;
 export declare type FormatListOptions = Exclude<IntlListFormatOptions, 'localeMatcher'>;
+export declare type FormatDisplayNameOptions = Exclude<DisplayNamesOptions, 'localeMatcher'>;
 export interface IntlFormatters {
     formatDate(value: Parameters<Intl.DateTimeFormat['format']>[0] | string, opts?: FormatDateOptions): string;
     formatTime(value: Parameters<Intl.DateTimeFormat['format']>[0] | string, opts?: FormatDateOptions): string;
@@ -39,6 +41,7 @@ export interface IntlFormatters {
     formatHTMLMessage(descriptor: MessageDescriptor, values?: Record<string, PrimitiveType>): React.ReactNode;
     formatList(values: Array<string>, opts?: FormatListOptions): string;
     formatList(values: Array<string | React.ReactNode>, opts?: FormatListOptions): React.ReactNode;
+    formatDisplayName(value: Parameters<DisplayNames['of']>[0], opts?: FormatDisplayNameOptions): string | undefined;
 }
 export interface Formatters {
     getDateTimeFormat(...args: ConstructorParameters<typeof Intl.DateTimeFormat>): Intl.DateTimeFormat;
@@ -47,6 +50,7 @@ export interface Formatters {
     getRelativeTimeFormat(...args: ConstructorParameters<typeof IntlRelativeTimeFormat>): IntlRelativeTimeFormat;
     getPluralRules(...args: ConstructorParameters<typeof Intl.PluralRules>): Intl.PluralRules;
     getListFormat(...args: ConstructorParameters<typeof IntlListFormat>): IntlListFormat;
+    getDisplayNames(...args: ConstructorParameters<typeof DisplayNames>): DisplayNames;
 }
 export interface IntlShape extends IntlConfig, IntlFormatters {
     formatters: Formatters;
@@ -58,9 +62,10 @@ export interface IntlCache {
     relativeTime: Record<string, IntlRelativeTimeFormat>;
     pluralRules: Record<string, Intl.PluralRules>;
     list: Record<string, IntlListFormat>;
+    displayNames: Record<string, DisplayNames>;
 }
 export interface MessageDescriptor {
-    id?: string;
+    id?: string | number;
     description?: string | object;
     defaultMessage?: string;
 }

package/lib/utils.d.ts

@@ -2,7 +2,7 @@ import { IntlConfig, IntlCache, CustomFormats, Formatters } from './types';
 import { IntlRelativeTimeFormatOptions } from '@formatjs/intl-relativetimeformat';
 export declare function escape(str: string): string;
 export declare function filterProps<T extends Record<string, any>, K extends string>(props: T, whitelist: Array<K>, defaults?: Partial<T>): Pick<T, K>;
-export declare function invariantIntlContext(intl?: any): void;
+export declare function invariantIntlContext(intl?: any): asserts intl;
 export declare function createError(message: string, exception?: Error): string;
 export declare function defaultErrorHandler(error: string): void;
 export declare const DEFAULT_INTL_CONFIG: Pick<IntlConfig, 'formats' | 'messages' | 'timeZone' | 'textComponent' | 'defaultLocale' | 'defaultFormats' | 'onError'>;