react-intl 3.9.2 → 3.12.0

package/CHANGELOG.md

@@ -2,6 +2,33 @@
 
 All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
 
+## [3.12.0](https://github.com/formatjs/react-intl/compare/v3.11.0...v3.12.0) (2020-02-04)
+
+
+### Features
+
+* add formatDisplayName and FormattedDisplayName ([#1567](https://github.com/formatjs/react-intl/issues/1567)) ([10bcbe2](https://github.com/formatjs/react-intl/commit/10bcbe2e7e92902d60810a7c00568d3043b09db3)), closes [#1547](https://github.com/formatjs/react-intl/issues/1547)
+
+## [3.11.0](https://github.com/formatjs/react-intl/compare/v3.10.0...v3.11.0) (2020-01-09)
+
+
+### Features
+
+* Allow MessageDescriptor ID to be `number` ([#1553](https://github.com/formatjs/react-intl/issues/1553)) ([95298b2](https://github.com/formatjs/react-intl/commit/95298b2b5f09173258fe9648d49fc9fa1ad673fc))
+
+
+### Bug Fixes
+
+* add a parser for chunks emitted from formatHTMLMessage ([#1550](https://github.com/formatjs/react-intl/issues/1550)) ([8c3c5c7](https://github.com/formatjs/react-intl/commit/8c3c5c78afa16d605933c82571f3b92b15363c27))
+* update formatjs deps ([1745c21](https://github.com/formatjs/react-intl/commit/1745c21b9ae5e6443f1ad5209f77cc9cb6ad66eb))
+
+## [3.10.0](https://github.com/formatjs/react-intl/compare/v3.9.2...v3.10.0) (2019-12-26)
+
+
+### Features
+
+* Upgrade intl-unified-numberformat & TypeScript ([ddf411a](https://github.com/formatjs/react-intl/commit/ddf411a6089005671f3d1ab8d11e04564da0f2e7))
+
 ### [3.9.2](https://github.com/formatjs/react-intl/compare/v3.9.1...v3.9.2) (2019-12-10)
 
 

package/dist/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/dist/components/createFormattedComponent.js

@@ -4,8 +4,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;
 };
 Object.defineProperty(exports, "__esModule", { value: true });
@@ -18,6 +20,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/dist/components/html-message.js

@@ -69,7 +69,7 @@ var FormattedHTMLMessage = /** @class */ (function (_super) {
         }));
     };
     FormattedHTMLMessage.displayName = 'FormattedHTMLMessage';
-    FormattedHTMLMessage.defaultProps = __assign({}, message_1.default.defaultProps, { tagName: 'span' });
+    FormattedHTMLMessage.defaultProps = __assign(__assign({}, message_1.default.defaultProps), { tagName: 'span' });
     return FormattedHTMLMessage;
 }(message_1.default));
 exports.default = FormattedHTMLMessage;

package/dist/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/dist/components/message.js

@@ -33,10 +33,19 @@ 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;
 };
+var __spreadArrays = (this && this.__spreadArrays) || function () {
+    for (var s = 0, i = 0, il = arguments.length; i < il; i++) s += arguments[i].length;
+    for (var r = Array(s), k = 0, i = 0; i < il; i++)
+        for (var a = arguments[i], j = 0, jl = a.length; j < jl; j++, k++)
+            r[k] = a[j];
+    return r;
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 var React = require("react");
 var injectIntl_1 = require("./injectIntl");
@@ -48,7 +57,7 @@ var defaultFormatMessage = function (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 message_1.formatMessage(__assign({}, utils_1.DEFAULT_INTL_CONFIG, { locale: 'en' }), utils_1.createFormatters(), descriptor, values);
+    return message_1.formatMessage(__assign(__assign({}, utils_1.DEFAULT_INTL_CONFIG), { locale: 'en' }), utils_1.createFormatters(), descriptor, values);
 };
 var FormattedMessage = /** @class */ (function (_super) {
     __extends(FormattedMessage, _super);
@@ -80,7 +89,7 @@ var FormattedMessage = /** @class */ (function (_super) {
             if (Component) {
                 // Needs to use `createElement()` instead of JSX, otherwise React will
                 // warn about a missing `key` prop with rich-text message formatting.
-                return React.createElement.apply(React, [Component, null].concat(nodes));
+                return React.createElement.apply(React, __spreadArrays([Component, null], nodes));
             }
             return nodes;
         }));

package/dist/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" | "format" | "localeMatcher" | "type" | "value"> & {
     forwardedRef?: ((instance: any) => void) | React.RefObject<any> | null | undefined;
 } & React.RefAttributes<any>> & {
     WrappedComponent: React.ComponentType<Props>;

package/dist/components/provider.js

@@ -40,6 +40,7 @@ var plural_1 = require("../formatters/plural");
 var message_1 = require("../formatters/message");
 var shallowEquals_ = require("shallow-equal/objects");
 var list_1 = require("../formatters/list");
+var displayName_1 = require("../formatters/displayName");
 var shallowEquals = shallowEquals_.default || shallowEquals_;
 function processIntlConfig(config) {
     return {
@@ -60,7 +61,7 @@ function processIntlConfig(config) {
  */
 function createIntl(config, cache) {
     var formatters = utils_1.createFormatters(cache);
-    var resolvedConfig = __assign({}, utils_1.DEFAULT_INTL_CONFIG, config);
+    var resolvedConfig = __assign(__assign({}, utils_1.DEFAULT_INTL_CONFIG), config);
     if (!resolvedConfig.locale ||
         !intl_locales_supported_1.default(resolvedConfig.locale)) {
         var locale = resolvedConfig.locale, defaultLocale = resolvedConfig.defaultLocale, onError = resolvedConfig.onError;
@@ -75,7 +76,7 @@ function createIntl(config, cache) {
         // each <FormattedMessage> contains a `defaultMessage` prop.
         resolvedConfig.locale = resolvedConfig.defaultLocale || 'en';
     }
-    return __assign({}, resolvedConfig, { formatters: formatters, formatNumber: number_1.formatNumber.bind(null, resolvedConfig, formatters.getNumberFormat), formatNumberToParts: number_1.formatNumberToParts.bind(null, resolvedConfig, formatters.getNumberFormat), formatRelativeTime: relativeTime_1.formatRelativeTime.bind(null, resolvedConfig, formatters.getRelativeTimeFormat), formatDate: dateTime_1.formatDate.bind(null, resolvedConfig, formatters.getDateTimeFormat), formatDateToParts: dateTime_1.formatDateToParts.bind(null, resolvedConfig, formatters.getDateTimeFormat), formatTime: dateTime_1.formatTime.bind(null, resolvedConfig, formatters.getDateTimeFormat), formatTimeToParts: dateTime_1.formatTimeToParts.bind(null, resolvedConfig, formatters.getDateTimeFormat), formatPlural: plural_1.formatPlural.bind(null, resolvedConfig, formatters.getPluralRules), formatMessage: message_1.formatMessage.bind(null, resolvedConfig, formatters), formatHTMLMessage: message_1.formatHTMLMessage.bind(null, resolvedConfig, formatters), formatList: list_1.formatList.bind(null, resolvedConfig, formatters.getListFormat) });
+    return __assign(__assign({}, resolvedConfig), { formatters: formatters, formatNumber: number_1.formatNumber.bind(null, resolvedConfig, formatters.getNumberFormat), formatNumberToParts: number_1.formatNumberToParts.bind(null, resolvedConfig, formatters.getNumberFormat), formatRelativeTime: relativeTime_1.formatRelativeTime.bind(null, resolvedConfig, formatters.getRelativeTimeFormat), formatDate: dateTime_1.formatDate.bind(null, resolvedConfig, formatters.getDateTimeFormat), formatDateToParts: dateTime_1.formatDateToParts.bind(null, resolvedConfig, formatters.getDateTimeFormat), formatTime: dateTime_1.formatTime.bind(null, resolvedConfig, formatters.getDateTimeFormat), formatTimeToParts: dateTime_1.formatTimeToParts.bind(null, resolvedConfig, formatters.getDateTimeFormat), formatPlural: plural_1.formatPlural.bind(null, resolvedConfig, formatters.getPluralRules), formatMessage: message_1.formatMessage.bind(null, resolvedConfig, formatters), formatHTMLMessage: message_1.formatHTMLMessage.bind(null, resolvedConfig, formatters), formatList: list_1.formatList.bind(null, resolvedConfig, formatters.getListFormat), formatDisplayName: displayName_1.formatDisplayName.bind(null, resolvedConfig, formatters.getDisplayNames) });
 }
 exports.createIntl = createIntl;
 var IntlProvider = /** @class */ (function (_super) {

package/dist/components/relative.js

@@ -32,12 +32,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 var React = require("react");
 var injectIntl_1 = require("./injectIntl");
 var utils_1 = require("../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
-var invariant_ = require("invariant");
-var invariant = invariant_.default || invariant_;
+var intl_utils_1 = require("@formatjs/intl-utils");
 var MINUTE = 60;
 var HOUR = 60 * 60;
 var DAY = 60 * 60 * 24;
@@ -84,9 +79,6 @@ function canIncrement(unit) {
     if (unit === void 0) { unit = 'second'; }
     return INCREMENTABLE_UNITS.includes(unit);
 }
-function verifyProps(updateIntervalInSeconds, unit) {
-    invariant(!updateIntervalInSeconds || (updateIntervalInSeconds && canIncrement(unit)), 'Cannot schedule update with unit longer than hour');
-}
 var FormattedRelativeTime = /** @class */ (function (_super) {
     __extends(FormattedRelativeTime, _super);
     function FormattedRelativeTime(props) {
@@ -100,7 +92,8 @@ var FormattedRelativeTime = /** @class */ (function (_super) {
                 ? valueToSeconds(_this.props.value, _this.props.unit)
                 : 0,
         };
-        verifyProps(props.updateIntervalInSeconds, props.unit);
+        intl_utils_1.invariant(!props.updateIntervalInSeconds ||
+            !!(props.updateIntervalInSeconds && canIncrement(props.unit)), 'Cannot schedule update with unit longer than hour');
         return _this;
     }
     FormattedRelativeTime.prototype.scheduleNextUpdate = function (_a, _b) {

package/dist/formatters/dateTime.js

@@ -36,14 +36,14 @@ function getFormatter(_a, type, getDateTimeFormat, options) {
     var locale = _a.locale, formats = _a.formats, onError = _a.onError, timeZone = _a.timeZone;
     if (options === void 0) { options = {}; }
     var format = options.format;
-    var defaults = __assign({}, (timeZone && { timeZone: timeZone }), (format && utils_1.getNamedFormat(formats, type, format, onError)));
+    var defaults = __assign(__assign({}, (timeZone && { timeZone: timeZone })), (format && utils_1.getNamedFormat(formats, type, format, onError)));
     var filteredOptions = utils_1.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 = __assign({}, filteredOptions, { hour: 'numeric', minute: 'numeric' });
+        filteredOptions = __assign(__assign({}, filteredOptions), { hour: 'numeric', minute: 'numeric' });
     }
     return getDateTimeFormat(locale, filteredOptions);
 }

package/dist/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/dist/formatters/displayName.js

@@ -0,0 +1,25 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var utils_1 = require("../utils");
+var DISPLAY_NAMES_OPTONS = [
+    'localeMatcher',
+    'style',
+    'type',
+    'fallback',
+];
+function formatDisplayName(_a, getDisplayNames, value, options) {
+    var locale = _a.locale, onError = _a.onError;
+    if (options === void 0) { options = {}; }
+    var DisplayNames = Intl.DisplayNames;
+    if (!DisplayNames) {
+        onError(utils_1.createError("Intl.DisplayNames is not available in this environment.\nTry polyfilling it using \"@formatjs/intl-displaynames\"\n"));
+    }
+    var filteredOptions = utils_1.filterProps(options, DISPLAY_NAMES_OPTONS);
+    try {
+        return getDisplayNames(locale, filteredOptions).of(value);
+    }
+    catch (e) {
+        onError(utils_1.createError('Error formatting display name.', e));
+    }
+}
+exports.formatDisplayName = formatDisplayName;

package/dist/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/dist/formatters/message.js

@@ -15,13 +15,16 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
+var __spreadArrays = (this && this.__spreadArrays) || function () {
+    for (var s = 0, i = 0, il = arguments.length; i < il; i++) s += arguments[i].length;
+    for (var r = Array(s), k = 0, i = 0; i < il; i++)
+        for (var a = arguments[i], j = 0, jl = a.length; j < jl; j++, k++)
+            r[k] = a[j];
+    return r;
+};
 Object.defineProperty(exports, "__esModule", { value: true });
-// 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 React = require("react");
+var intl_utils_1 = require("@formatjs/intl-utils");
 var utils_1 = require("../utils");
 var intl_messageformat_1 = require("intl-messageformat");
 function setTimeZoneInOptions(opts, timeZone) {
@@ -31,9 +34,9 @@ function setTimeZoneInOptions(opts, timeZone) {
     }, {});
 }
 function deepMergeOptions(opts1, opts2) {
-    var keys = Object.keys(__assign({}, opts1, opts2));
+    var keys = Object.keys(__assign(__assign({}, opts1), opts2));
     return keys.reduce(function (all, k) {
-        all[k] = __assign({}, (opts1[k] || {}), (opts2[k] || {}));
+        all[k] = __assign(__assign({}, (opts1[k] || {})), (opts2[k] || {}));
         return all;
     }, {});
 }
@@ -42,19 +45,17 @@ function deepMergeFormatsAndSetTimeZone(f1, timeZone) {
         return f1;
     }
     var mfFormats = intl_messageformat_1.default.formats;
-    return __assign({}, mfFormats, f1, { date: deepMergeOptions(setTimeZoneInOptions(mfFormats.date, timeZone), setTimeZoneInOptions(f1.date || {}, timeZone)), time: deepMergeOptions(setTimeZoneInOptions(mfFormats.time, timeZone), setTimeZoneInOptions(f1.time || {}, timeZone)) });
+    return __assign(__assign(__assign({}, mfFormats), f1), { date: deepMergeOptions(setTimeZoneInOptions(mfFormats.date, timeZone), setTimeZoneInOptions(f1.date || {}, timeZone)), time: deepMergeOptions(setTimeZoneInOptions(mfFormats.time, timeZone), setTimeZoneInOptions(f1.time || {}, timeZone)) });
 }
+exports.prepareIntlMessageFormatHtmlOutput = function (chunks) { return React.createElement.apply(React, __spreadArrays([React.Fragment, null], chunks)); };
 function formatMessage(_a, state, messageDescriptor, values) {
     var locale = _a.locale, formats = _a.formats, messages = _a.messages, defaultLocale = _a.defaultLocale, defaultFormats = _a.defaultFormats, onError = _a.onError, timeZone = _a.timeZone;
     if (messageDescriptor === void 0) { messageDescriptor = { id: '' }; }
     if (values === void 0) { values = {}; }
     var id = messageDescriptor.id, defaultMessage = messageDescriptor.defaultMessage;
     // `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.');
-    }
-    var message = messages && messages[id];
+    intl_utils_1.invariant(!!id, '[React Intl] An `id` must be provided to format a message.');
+    var message = messages && messages[String(id)];
     formats = deepMergeFormatsAndSetTimeZone(formats, timeZone);
     defaultFormats = deepMergeFormatsAndSetTimeZone(defaultFormats, timeZone);
     var formattedMessageParts = [];
@@ -93,15 +94,15 @@ function formatMessage(_a, state, messageDescriptor, values) {
         onError(utils_1.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 exports.prepareIntlMessageFormatHtmlOutput(formattedMessageParts);
 }
 exports.formatMessage = formatMessage;
 function formatHTMLMessage(config, state, messageDescriptor, rawValues) {

package/dist/index.d.ts

@@ -4,6 +4,7 @@ export { defineMessages } from '@formatjs/macro';
 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/dist/index.js

@@ -17,6 +17,7 @@ exports.FormattedDate = createFormattedComponent_1.createFormattedComponent('for
 exports.FormattedTime = createFormattedComponent_1.createFormattedComponent('formatTime');
 exports.FormattedNumber = createFormattedComponent_1.createFormattedComponent('formatNumber');
 exports.FormattedList = createFormattedComponent_1.createFormattedComponent('formatList');
+exports.FormattedDisplayName = createFormattedComponent_1.createFormattedComponent('formatDisplayName');
 exports.FormattedDateParts = createFormattedComponent_1.createFormattedDateTimePartsComponent('formatDate');
 exports.FormattedTimeParts = createFormattedComponent_1.createFormattedDateTimePartsComponent('formatTime');
 var createFormattedComponent_2 = require("./components/createFormattedComponent");

package/dist/react-intl.api.md

@@ -4,6 +4,9 @@
 
 ```ts
 
+import { DisplayNames } from '@formatjs/intl-displaynames';
+import { DisplayNamesOptions } from '@formatjs/intl-displaynames';
+import { DisplayNamesOptions as DisplayNamesOptions_2 } from '@formatjs/intl-displaynames/lib';
 import * as React from 'react';
 
 // Warning: (ae-forgotten-export) The symbol "OptionalIntlConfig" needs to be exported by the entry point index.d.ts
@@ -36,6 +39,9 @@ export function defineMessages<T, U extends Record<string, T>>(msgs: U): U;
 // @public (undocumented)
 export type FormatDateOptions = Exclude<Intl.DateTimeFormatOptions, 'localeMatcher'> & CustomFormatConfig;
 
+// @public (undocumented)
+export type FormatDisplayNameOptions = Exclude<DisplayNamesOptions, 'localeMatcher'>;
+
 // Warning: (ae-forgotten-export) The symbol "IntlListFormatOptions" needs to be exported by the entry point index.d.ts
 //
 // @public (undocumented)
@@ -58,11 +64,16 @@ export const FormattedDate: React.FC<Intl.DateTimeFormatOptions & CustomFormatCo
 }>;
 
 // @public (undocumented)
-export const FormattedDateParts: React.FunctionComponent<Intl.DateTimeFormatOptions & CustomFormatConfig & {
+export 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;
 }>;
 
+// @public (undocumented)
+export const FormattedDisplayName: React.FC<DisplayNamesOptions_2 & {
+    value: string | number | object;
+}>;
+
 // Warning: (ae-forgotten-export) The symbol "PrimitiveType" needs to be exported by the entry point index.d.ts
 //
 // @public (undocumented)
@@ -116,7 +127,7 @@ export const FormattedNumberParts: React.FC<Formatter['formatNumber'] & {
 // Warning: (ae-forgotten-export) The symbol "Props" needs to be exported by the entry point index.d.ts
 //
 // @public (undocumented)
-export const FormattedPlural: React.ForwardRefExoticComponent<Pick<Props_2, "children" | "other" | "zero" | "one" | "two" | "few" | "many" | "localeMatcher" | "type" | "format" | "value"> & {
+export const FormattedPlural: React.ForwardRefExoticComponent<Pick<Props_2, "children" | "other" | "zero" | "one" | "two" | "few" | "many" | "format" | "localeMatcher" | "type" | "value"> & {
     forwardedRef?: ((instance: any) => void) | React.RefObject<any> | null | undefined;
 } & React.RefAttributes<any>> & {
     WrappedComponent: React.ComponentType<Props_2>;
@@ -156,7 +167,7 @@ export const FormattedTime: React.FC<Intl.DateTimeFormatOptions & CustomFormatCo
 }>;
 
 // @public (undocumented)
-export const FormattedTimeParts: React.FunctionComponent<Intl.DateTimeFormatOptions & CustomFormatConfig & {
+export 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;
 }>;
@@ -165,6 +176,8 @@ export const FormattedTimeParts: React.FunctionComponent<Intl.DateTimeFormatOpti
 export interface Formatters {
     // (undocumented)
     getDateTimeFormat(...args: ConstructorParameters<typeof Intl.DateTimeFormat>): Intl.DateTimeFormat;
+    // (undocumented)
+    getDisplayNames(...args: ConstructorParameters<typeof DisplayNames>): DisplayNames;
     // Warning: (ae-forgotten-export) The symbol "ListFormat" needs to be exported by the entry point index.d.ts
     //
     // (undocumented)
@@ -200,6 +213,8 @@ export interface IntlCache {
     // (undocumented)
     dateTime: Record<string, Intl.DateTimeFormat>;
     // (undocumented)
+    displayNames: Record<string, DisplayNames>;
+    // (undocumented)
     list: Record<string, ListFormat>;
     // (undocumented)
     message: Record<string, IntlMessageFormat>;
@@ -243,6 +258,8 @@ export interface IntlFormatters {
     // (undocumented)
     formatDateToParts(value: Parameters<Intl.DateTimeFormat['format']>[0] | string, opts?: FormatDateOptions): Intl.DateTimeFormatPart[];
     // (undocumented)
+    formatDisplayName(value: Parameters<DisplayNames['of']>[0], opts?: FormatDisplayNameOptions): string | undefined;
+    // (undocumented)
     formatHTMLMessage(descriptor: MessageDescriptor, values?: Record<string, PrimitiveType>): React.ReactNode;
     // (undocumented)
     formatList(values: Array<string>, opts?: FormatListOptions): string;
@@ -295,14 +312,14 @@ export interface MessageDescriptor {
     // (undocumented)
     description?: string | object;
     // (undocumented)
-    id?: string;
+    id?: string | number;
 }
 
 // @public (undocumented)
 export type Omit<T, K extends keyof any> = Pick<T, Exclude<keyof T, K>>;
 
 // @public (undocumented)
-export const RawIntlProvider: React.ProviderExoticComponent<React.ProviderProps<IntlShape>>;
+export const RawIntlProvider: React.Provider<IntlShape>;
 
 // @public (undocumented)
 export function useIntl(): IntlShape;

package/dist/react-intl.d.ts

@@ -1,3 +1,6 @@
+import { DisplayNames } from '@formatjs/intl-displaynames';
+import { DisplayNamesOptions } from '@formatjs/intl-displaynames';
+import { DisplayNamesOptions as DisplayNamesOptions_2 } from '@formatjs/intl-displaynames/lib';
 import * as React from 'react';
 
 declare type ArgumentElement = BaseElement<TYPE.argument>;
@@ -61,6 +64,8 @@ declare interface FieldData {
 
 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;
@@ -81,11 +86,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: {
@@ -117,7 +126,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" | "format" | "localeMatcher" | "type" | "value"> & {
     forwardedRef?: ((instance: any) => void) | React.RefObject<any> | null | undefined;
 } & React.RefAttributes<any>> & {
     WrappedComponent: React.ComponentType<Props_2>;
@@ -141,7 +150,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;
 }>;
@@ -151,6 +160,7 @@ declare type Formatter = {
     formatTime: FormatDateOptions;
     formatNumber: FormatNumberOptions;
     formatList: FormatListOptions;
+    formatDisplayName: FormatDisplayNameOptions;
 };
 
 export declare interface Formatters {
@@ -160,6 +170,7 @@ export declare interface Formatters {
     getRelativeTimeFormat(...args: ConstructorParameters<typeof RelativeTimeFormat>): RelativeTimeFormat;
     getPluralRules(...args: ConstructorParameters<typeof Intl.PluralRules>): Intl.PluralRules;
     getListFormat(...args: ConstructorParameters<typeof ListFormat>): ListFormat;
+    getDisplayNames(...args: ConstructorParameters<typeof DisplayNames>): DisplayNames;
 }
 
 declare interface Formatters_2 {
@@ -185,6 +196,7 @@ export declare interface IntlCache {
     relativeTime: Record<string, RelativeTimeFormat>;
     pluralRules: Record<string, Intl.PluralRules>;
     list: Record<string, ListFormat>;
+    displayNames: Record<string, DisplayNames>;
 }
 
 export declare interface IntlConfig {
@@ -214,6 +226,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;
 }
 
 declare interface IntlListFormatOptions {
@@ -441,17 +454,25 @@ declare interface LocationDetails {
 }
 
 export declare interface MessageDescriptor {
-    id?: string;
+    id?: string | number;
     description?: string | object;
     defaultMessage?: string;
 }
 
-declare type MessageFormatElement = LiteralElement | ArgumentElement | NumberElement | DateElement | TimeElement | SelectElement | PluralElement;
+declare type MessageFormatElement = LiteralElement | ArgumentElement | NumberElement | DateElement | TimeElement | SelectElement | PluralElement | PoundElement;
 
 declare type MessageFormatPart = LiteralPart_2 | ArgumentPart;
 
 declare type NumberElement = SimpleFormatElement<TYPE.number, NumberSkeleton>;
 
+declare interface NumberFormatDigitOptions {
+    minimumIntegerDigits?: number;
+    minimumFractionDigits?: number;
+    maximumFractionDigits?: number;
+    minimumSignificantDigits?: number;
+    maximumSignificantDigits?: number;
+}
+
 declare interface NumberSkeleton {
     type: SKELETON_TYPE.number;
     tokens: NumberSkeletonToken[];
@@ -515,6 +536,11 @@ declare interface PluralOrSelectOption {
     location?: Location;
 }
 
+declare interface PoundElement {
+    type: TYPE.pound;
+    location?: Location;
+}
+
 declare type PrimitiveType = string | number | boolean | null | undefined | Date;
 
 declare interface Props extends FormatRelativeTimeOptions {
@@ -542,7 +568,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 type RelativeTimeData = {
     [u in LDMLPluralRule]?: string;
@@ -683,10 +709,17 @@ declare enum TYPE {
     /**
      * Variable w/ plural format
      */
-    plural = 6
+    plural = 6,
+    /**
+     * Only possible within plural argument.
+     * This is the `#` symbol that will be substituted with the count.
+     */
+    pound = 7
 }
 
-declare interface UnifiedNumberFormatOptions extends Intl.NumberFormatOptions {
+declare type UnifiedNumberFormatOptions = Intl.NumberFormatOptions & NumberFormatDigitOptions & {
+    localeMatcher?: 'lookup' | 'best fit';
+    style?: 'decimal' | 'percent' | 'currency' | 'unit';
     compactDisplay?: 'short' | 'long';
     currencyDisplay?: 'symbol' | 'code' | 'name' | 'narrowSymbol';
     currencySign?: 'standard' | 'accounting';
@@ -694,7 +727,7 @@ declare interface UnifiedNumberFormatOptions extends Intl.NumberFormatOptions {
     signDisplay?: 'auto' | 'always' | 'never' | 'exceptZero';
     unit?: Unit_2;
     unitDisplay?: 'long' | 'short' | 'narrow';
-}
+};
 
 declare type Unit = 'second' | 'minute' | 'hour' | 'day' | 'week' | 'month' | 'quarter' | 'year';