react-intl 3.11.0 → 3.12.0

package/CHANGELOG.md

@@ -2,6 +2,13 @@
 
 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)
 
 

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

@@ -20,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/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 {
@@ -75,7 +76,7 @@ function createIntl(config, cache) {
         // each <FormattedMessage> contains a `defaultMessage` prop.
         resolvedConfig.locale = resolvedConfig.defaultLocale || 'en';
     }
-    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) });
+    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/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/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,6 +20,9 @@ export declare const FormattedNumber: React.FC<UnifiedNumberFormatOptions & Cust
 export declare const FormattedList: React.FC<IntlListFormatOptions & {
     value: React.ReactNode[];
 }>;
+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;

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)
@@ -63,6 +69,11 @@ export const FormattedDateParts: React.FC<Intl.DateTimeFormatOptions & CustomFor
     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)
@@ -165,6 +176,8 @@ export const FormattedTimeParts: React.FC<Intl.DateTimeFormatOptions & CustomFor
 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;

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;
@@ -86,6 +91,10 @@ export declare const FormattedDateParts: React.FC<Intl.DateTimeFormatOptions & C
     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: {
@@ -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 {

package/dist/react-intl.js

@@ -4335,7 +4335,8 @@
 	    message: {},
 	    relativeTime: {},
 	    pluralRules: {},
-	    list: {}
+	    list: {},
+	    displayNames: {}
 	  };
 	}
 	/**
@@ -4347,13 +4348,15 @@
 	  var cache = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : createIntlCache();
 	  var RelativeTimeFormat = Intl.RelativeTimeFormat;
 	  var ListFormat = Intl.ListFormat;
+	  var DisplayNames = Intl.DisplayNames;
 	  return {
 	    getDateTimeFormat: memoizeFormatConstructor(Intl.DateTimeFormat, cache.dateTime),
 	    getNumberFormat: memoizeFormatConstructor(Intl.NumberFormat, cache.number),
 	    getMessageFormat: memoizeFormatConstructor(IntlMessageFormat, cache.message),
 	    getRelativeTimeFormat: memoizeFormatConstructor(RelativeTimeFormat, cache.relativeTime),
 	    getPluralRules: memoizeFormatConstructor(Intl.PluralRules, cache.pluralRules),
-	    getListFormat: memoizeFormatConstructor(ListFormat, cache.list)
+	    getListFormat: memoizeFormatConstructor(ListFormat, cache.list),
+	    getDisplayNames: memoizeFormatConstructor(DisplayNames, cache.displayNames)
 	  };
 	}
 	function getNamedFormat(formats, type, name, onError) {
@@ -4815,7 +4818,10 @@
 	  DisplayName["formatDate"] = "FormattedDate";
 	  DisplayName["formatTime"] = "FormattedTime";
 	  DisplayName["formatNumber"] = "FormattedNumber";
-	  DisplayName["formatList"] = "FormattedList";
+	  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;
@@ -5291,6 +5297,26 @@
 	  return values;
 	}
 
+	var DISPLAY_NAMES_OPTONS = ['localeMatcher', 'style', 'type', 'fallback'];
+	function formatDisplayName(_ref, getDisplayNames, value) {
+	  var locale = _ref.locale,
+	      onError = _ref.onError;
+	  var options = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : {};
+	  var DisplayNames = Intl.DisplayNames;
+
+	  if (!DisplayNames) {
+	    onError(createError("Intl.DisplayNames is not available in this environment.\nTry polyfilling it using \"@formatjs/intl-displaynames\"\n"));
+	  }
+
+	  var filteredOptions = filterProps(options, DISPLAY_NAMES_OPTONS);
+
+	  try {
+	    return getDisplayNames(locale, filteredOptions).of(value);
+	  } catch (e) {
+	    onError(createError('Error formatting display name.', e));
+	  }
+	}
+
 	var shallowEquals = objects || shallowEquals_;
 
 	function processIntlConfig(config) {
@@ -5345,7 +5371,8 @@
 	    formatPlural: formatPlural.bind(null, resolvedConfig, formatters.getPluralRules),
 	    formatMessage: formatMessage.bind(null, resolvedConfig, formatters),
 	    formatHTMLMessage: formatHTMLMessage$1.bind(null, resolvedConfig, formatters),
-	    formatList: formatList.bind(null, resolvedConfig, formatters.getListFormat)
+	    formatList: formatList.bind(null, resolvedConfig, formatters.getListFormat),
+	    formatDisplayName: formatDisplayName.bind(null, resolvedConfig, formatters.getDisplayNames)
 	  });
 	}
 
@@ -5814,11 +5841,13 @@
 	var FormattedTime = createFormattedComponent('formatTime');
 	var FormattedNumber = createFormattedComponent('formatNumber');
 	var FormattedList = createFormattedComponent('formatList');
+	var FormattedDisplayName = createFormattedComponent('formatDisplayName');
 	var FormattedDateParts = createFormattedDateTimePartsComponent('formatDate');
 	var FormattedTimeParts = createFormattedDateTimePartsComponent('formatTime');
 
 	exports.FormattedDate = FormattedDate;
 	exports.FormattedDateParts = FormattedDateParts;
+	exports.FormattedDisplayName = FormattedDisplayName;
 	exports.FormattedHTMLMessage = FormattedHTMLMessage;
 	exports.FormattedList = FormattedList;
 	exports.FormattedMessage = FormattedMessage;