react-intl 3.7.0 → 3.9.2

package/dist/types.d.ts

@@ -37,6 +37,7 @@ export interface IntlFormatters {
     formatMessage(descriptor: MessageDescriptor, values?: Record<string, PrimitiveType>): string;
     formatMessage(descriptor: MessageDescriptor, values?: Record<string, PrimitiveType | React.ReactElement | FormatXMLElementFn>): string | React.ReactNodeArray;
     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;
 }
 export interface Formatters {

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

package/lib/formatters/list.d.ts

@@ -1,3 +1,2 @@
-import * as React from 'react';
 import { IntlConfig, Formatters, IntlFormatters } from '../types';
-export declare function formatList({ locale, onError }: Pick<IntlConfig, 'locale' | 'onError'>, getListFormat: Formatters['getListFormat'], values: Parameters<IntlFormatters['formatList']>[0], options?: Parameters<IntlFormatters['formatList']>[1]): string | React.ReactNode;
+export declare function formatList({ locale, onError }: Pick<IntlConfig, 'locale' | 'onError'>, getListFormat: Formatters['getListFormat'], values: Array<string>, options: Parameters<IntlFormatters['formatList']>[1]): string;

package/lib/react-intl.d.ts

@@ -82,7 +82,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" | "type" | "localeMatcher" | "format" | "value"> & {
+export declare const FormattedPlural: React.ForwardRefExoticComponent<Pick<Props_2, "children" | "other" | "zero" | "one" | "two" | "few" | "many" | "localeMatcher" | "type" | "format" | "value"> & {
     forwardedRef?: ((instance: any) => void) | React.RefObject<any> | null | undefined;
 } & React.RefAttributes<any>> & {
     WrappedComponent: React.ComponentType<Props_2>;
@@ -169,6 +169,7 @@ export declare interface IntlFormatters {
     formatMessage(descriptor: MessageDescriptor, values?: Record<string, PrimitiveType>): string;
     formatMessage(descriptor: MessageDescriptor, values?: Record<string, PrimitiveType | React.ReactElement | FormatXMLElementFn>): string | React.ReactNodeArray;
     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;
 }
 

package/lib/tsdoc-metadata.json

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

package/lib/types.d.ts

@@ -37,6 +37,7 @@ export interface IntlFormatters {
     formatMessage(descriptor: MessageDescriptor, values?: Record<string, PrimitiveType>): string;
     formatMessage(descriptor: MessageDescriptor, values?: Record<string, PrimitiveType | React.ReactElement | FormatXMLElementFn>): string | React.ReactNodeArray;
     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;
 }
 export interface Formatters {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-intl",
-  "version": "3.7.0",
+  "version": "3.9.2",
   "description": "Internationalize React apps. This library provides React components and an API to format dates, numbers, and strings, including pluralization and handling translations.",
   "keywords": [
     "intl",
@@ -19,7 +19,8 @@
   "author": "Eric Ferraiuolo <edf@ericf.me>",
   "files": [
     "dist",
-    "lib"
+    "lib",
+    "src"
   ],
   "contributors": [
     "Aarni Koskela <akx@iki.fi>",
@@ -130,50 +131,50 @@
   "types": "./lib/react-intl.d.ts",
   "sideEffects": false,
   "dependencies": {
-    "@formatjs/intl-listformat": "^1.2.6",
-    "@formatjs/intl-relativetimeformat": "^4.4.5",
-    "@formatjs/intl-unified-numberformat": "^2.1.6",
-    "@formatjs/macro": "^0.2.5",
+    "@formatjs/intl-listformat": "^1.3.1",
+    "@formatjs/intl-relativetimeformat": "^4.5.1",
+    "@formatjs/intl-unified-numberformat": "^2.2.0",
+    "@formatjs/macro": "^0.2.6",
     "@types/hoist-non-react-statics": "^3.3.1",
     "@types/invariant": "^2.2.30",
     "hoist-non-react-statics": "^3.3.1",
-    "intl-format-cache": "^4.2.10",
-    "intl-locales-supported": "^1.8.3",
-    "intl-messageformat": "^7.6.0",
-    "intl-messageformat-parser": "^3.3.0",
+    "intl-format-cache": "^4.2.13",
+    "intl-locales-supported": "^1.8.4",
+    "intl-messageformat": "^7.7.2",
+    "intl-messageformat-parser": "^3.5.1",
     "invariant": "^2.1.1",
-    "shallow-equal": "^1.1.0"
+    "shallow-equal": "^1.2.1"
   },
   "peerDependencies": {
     "react": "^16.3.0"
   },
   "devDependencies": {
-    "@babel/core": "^7.7.4",
+    "@babel/core": "^7.7.5",
     "@babel/node": "^7.7.4",
     "@babel/plugin-proposal-class-properties": "^7.7.4",
-    "@babel/plugin-transform-modules-commonjs": "^7.7.4",
-    "@babel/preset-env": "^7.7.4",
+    "@babel/plugin-transform-modules-commonjs": "^7.7.5",
+    "@babel/preset-env": "^7.7.6",
     "@babel/preset-react": "^7.7.4",
-    "@formatjs/intl-pluralrules": "^1.3.6",
-    "@microsoft/api-documenter": "^7.7.0",
-    "@microsoft/api-extractor": "^7.6.2",
+    "@formatjs/intl-pluralrules": "^1.3.9",
+    "@microsoft/api-documenter": "^7.7.2",
+    "@microsoft/api-extractor": "^7.7.0",
     "@types/benchmark": "^1.0.31",
-    "@types/enzyme": "^3.10.3",
+    "@types/enzyme": "^3.10.4",
     "@types/jest": "^24.0.23",
     "@types/prop-types": "^15.7.3",
-    "@types/react": "^16.9.13",
+    "@types/react": "^16.9.16",
     "@types/react-dom": "^16.9.4",
-    "@typescript-eslint/eslint-plugin": "^2.9.0",
-    "@typescript-eslint/parser": "^2.9.0",
+    "@typescript-eslint/eslint-plugin": "^2.11.0",
+    "@typescript-eslint/parser": "^2.11.0",
     "babel-jest": "^24.9.0",
     "benchmark": "^2.1.0",
-    "core-js": "^3.4.2",
+    "core-js": "^3.4.8",
     "cross-env": "^6.0.3",
     "enzyme": "^3.6.0",
     "enzyme-adapter-react-16": "^1.15.1",
     "enzyme-to-json": "^3.4.3",
-    "eslint": "^6.7.1",
-    "eslint-plugin-react": "^7.16.0",
+    "eslint": "^6.7.2",
+    "eslint-plugin-react": "^7.17.0",
     "fs-extra": "^8.1.0",
     "full-icu": "^1.3.0",
     "glob": "^7.1.6",
@@ -186,16 +187,16 @@
     "react": "^16.12.0",
     "react-dom": "^16.12.0",
     "rimraf": "^3.0.0",
-    "rollup": "^1.27.5",
+    "rollup": "^1.27.9",
     "rollup-plugin-babel": "^4.3.3",
     "rollup-plugin-commonjs": "^10.1.0",
     "rollup-plugin-node-resolve": "^5.2.0",
     "rollup-plugin-replace": "^2.0.0",
-    "rollup-plugin-typescript2": "^0.25.0",
+    "rollup-plugin-typescript2": "^0.25.3",
     "rollup-plugin-uglify": "^6.0.3",
     "standard-version": "^7.0.1",
     "ts-jest": "^24.2.0",
-    "ts-node": "^8.5.2",
+    "ts-node": "^8.5.4",
     "tslib": "^1.9.3",
     "typescript": "~3.3.0"
   },

package/src/components/createFormattedComponent.tsx

@@ -0,0 +1,114 @@
+import * as React from 'react';
+import {invariantIntlContext} from '../utils';
+import {
+  IntlShape,
+  FormatDateOptions,
+  FormatNumberOptions,
+  FormatListOptions,
+} from '../types';
+import {Context} from './injectIntl';
+
+enum DisplayName {
+  formatDate = 'FormattedDate',
+  formatTime = 'FormattedTime',
+  formatNumber = 'FormattedNumber',
+  formatList = 'FormattedList',
+}
+
+enum DisplayNameParts {
+  formatDate = 'FormattedDateParts',
+  formatTime = 'FormattedTimeParts',
+  formatNumber = 'FormattedNumberParts',
+  formatList = 'FormattedListParts',
+}
+
+type Formatter = {
+  formatDate: FormatDateOptions;
+  formatTime: FormatDateOptions;
+  formatNumber: FormatNumberOptions;
+  formatList: FormatListOptions;
+};
+
+export const FormattedNumberParts: React.FC<Formatter['formatNumber'] & {
+  value: Parameters<IntlShape['formatNumber']>[0];
+
+  children(val: Intl.NumberFormatPart[]): React.ReactElement | null;
+}> = props => (
+  <Context.Consumer>
+    {(intl): React.ReactElement | null => {
+      invariantIntlContext(intl);
+      const {value, children, ...formatProps} = props;
+      return children(intl.formatNumberToParts(value, formatProps));
+    }}
+  </Context.Consumer>
+);
+FormattedNumberParts.displayName = 'FormattedNumberParts';
+
+export function createFormattedDateTimePartsComponent<
+  Name extends 'formatDate' | 'formatTime'
+>(
+  name: Name
+): React.FC<
+  Formatter[Name] & {
+    value: Parameters<IntlShape[Name]>[0];
+    children(val: Intl.DateTimeFormatPart[]): React.ReactElement | null;
+  }
+> {
+  type FormatFn = IntlShape[Name];
+  type Props = Formatter[Name] & {
+    value: Parameters<FormatFn>[0];
+    children(val: Intl.DateTimeFormatPart[]): React.ReactElement | null;
+  };
+
+  const ComponentParts: React.FC<Props> = props => (
+    <Context.Consumer>
+      {(intl): React.ReactElement | null => {
+        invariantIntlContext(intl);
+        const {value, children, ...formatProps} = props;
+        const date = typeof value === 'string' ? new Date(value || 0) : value;
+        const formattedParts: Intl.DateTimeFormatPart[] =
+          name === 'formatDate'
+            ? intl.formatDateToParts(date, formatProps)
+            : intl.formatTimeToParts(date, formatProps);
+
+        return children(formattedParts);
+      }}
+    </Context.Consumer>
+  );
+  ComponentParts.displayName = DisplayNameParts[name];
+  return ComponentParts;
+}
+
+export function createFormattedComponent<Name extends keyof Formatter>(
+  name: Name
+): React.FC<
+  Formatter[Name] & {
+    value: Parameters<IntlShape[Name]>[0];
+    children?(val: string): React.ReactElement | null;
+  }
+> {
+  type FormatFn = IntlShape[Name];
+  type Props = Formatter[Name] & {
+    value: Parameters<FormatFn>[0];
+    children?(val: string): React.ReactElement | null;
+  };
+
+  const Component: React.FC<Props> = props => (
+    <Context.Consumer>
+      {(intl): JSX.Element | null => {
+        invariantIntlContext(intl);
+        const {value, children, ...formatProps} = props;
+        // TODO: fix TS type definition for localeMatcher upstream
+        const formattedValue = intl[name](value as any, formatProps as any);
+
+        if (typeof children === 'function') {
+          return children(formattedValue as any);
+        }
+        const Text = intl.textComponent || React.Fragment;
+        return <Text>{formattedValue}</Text>;
+      }}
+    </Context.Consumer>
+  );
+  Component.displayName = DisplayName[name];
+  return Component;
+}

package/src/components/html-message.tsx

@@ -0,0 +1,68 @@
+/*
+ * Copyright 2015, Yahoo Inc.
+ * Copyrights licensed under the New BSD License.
+ * See the accompanying LICENSE file for terms.
+ */
+
+import * as React from 'react';
+import {PrimitiveType} from 'intl-messageformat';
+import FormattedMessage from './message';
+import {Context} from './injectIntl';
+import {invariantIntlContext} from '../utils';
+
+class FormattedHTMLMessage extends FormattedMessage<
+  Record<string, PrimitiveType>
+> {
+  static displayName = 'FormattedHTMLMessage';
+  static defaultProps = {
+    ...FormattedMessage.defaultProps,
+    tagName: 'span' as 'span',
+  };
+  render(): JSX.Element {
+    return (
+      <Context.Consumer>
+        {(intl): React.ReactNode => {
+          if (!this.props.defaultMessage) {
+            invariantIntlContext(intl);
+          }
+
+          const {formatHTMLMessage, textComponent} = intl;
+          const {
+            id,
+            description,
+            defaultMessage,
+            values: rawValues,
+            children,
+          } = this.props;
+
+          let {tagName: Component} = this.props;
+
+          // This is bc of TS3.3 doesn't recognize `defaultProps`
+          if (!Component) {
+            Component = textComponent || 'span';
+          }
+
+          const descriptor = {id, description, defaultMessage};
+          const formattedHTMLMessage = formatHTMLMessage(descriptor, rawValues);
+
+          if (typeof children === 'function') {
+            return children(formattedHTMLMessage);
+          }
+
+          // Since the message presumably has HTML in it, we need to set
+          // `innerHTML` in order for it to be rendered and not escaped by React.
+          // To be safe, all string prop values were escaped when formatting the
+          // message. It is assumed that the message is not UGC, and came from the
+          // developer making it more like a template.
+          //
+          // Note: There's a perf impact of using this component since there's no
+          // way for React to do its virtual DOM diffing.
+          const html = {__html: formattedHTMLMessage};
+          return <Component dangerouslySetInnerHTML={html} />;
+        }}
+      </Context.Consumer>
+    );
+  }
+}
+
+export default FormattedHTMLMessage;

package/src/components/injectIntl.tsx

@@ -0,0 +1,111 @@
+import * as React from 'react';
+import * as hoistNonReactStatics_ from 'hoist-non-react-statics';
+// 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
+const hoistNonReactStatics: typeof hoistNonReactStatics_ =
+  (hoistNonReactStatics_ as any).default || hoistNonReactStatics_;
+import {invariantIntlContext} from '../utils';
+import {IntlShape, Omit} from '../types';
+
+function getDisplayName(Component: React.ComponentType<any>): string {
+  return Component.displayName || Component.name || 'Component';
+}
+
+// TODO: We should provide initial value here
+const IntlContext = React.createContext<IntlShape>(null as any);
+const {Consumer: IntlConsumer, Provider: IntlProvider} = IntlContext;
+
+export const Provider = IntlProvider;
+export const Context = IntlContext;
+
+export interface Opts<
+  IntlPropName extends string = 'intl',
+  ForwardRef extends boolean = false
+> {
+  intlPropName?: IntlPropName;
+  forwardRef?: ForwardRef;
+  enforceContext?: boolean;
+}
+
+export type WrappedComponentProps<IntlPropName extends string = 'intl'> = {
+  [k in IntlPropName]: IntlShape;
+};
+
+export type WithIntlProps<P> = Omit<P, keyof WrappedComponentProps> & {
+  forwardedRef?: React.Ref<any>;
+};
+
+export default function injectIntl<
+  IntlPropName extends string,
+  P extends WrappedComponentProps<IntlPropName> = WrappedComponentProps<any>
+>(
+  WrappedComponent: React.ComponentType<P>,
+  options?: Opts<IntlPropName, false>
+): React.FC<WithIntlProps<P>> & {
+  WrappedComponent: React.ComponentType<P>;
+};
+export default function injectIntl<
+  IntlPropName extends string = 'intl',
+  P extends WrappedComponentProps<IntlPropName> = WrappedComponentProps<any>,
+  T extends React.ComponentType<P> = any
+>(
+  WrappedComponent: React.ComponentType<P>,
+  options?: Opts<IntlPropName, true>
+): React.ForwardRefExoticComponent<
+  React.PropsWithoutRef<WithIntlProps<P>> & React.RefAttributes<T>
+> & {
+  WrappedComponent: React.ComponentType<P>;
+};
+export default function injectIntl<
+  IntlPropName extends string = 'intl',
+  P extends WrappedComponentProps<IntlPropName> = WrappedComponentProps<any>,
+  ForwardRef extends boolean = false,
+  T extends React.ComponentType<P> = any
+>(
+  WrappedComponent: React.ComponentType<P>,
+  options?: Opts<IntlPropName, ForwardRef>
+): React.ForwardRefExoticComponent<
+  React.PropsWithoutRef<WithIntlProps<P>> & React.RefAttributes<T>
+> & {
+  WrappedComponent: React.ComponentType<P>;
+} {
+  const {intlPropName = 'intl', forwardRef = false, enforceContext = true} =
+    options || {};
+
+  const WithIntl: React.FC<P & {forwardedRef?: React.Ref<any>}> & {
+    WrappedComponent: React.ComponentType<P>;
+  } = props => (
+    <IntlConsumer>
+      {(intl): React.ReactNode => {
+        if (enforceContext) {
+          invariantIntlContext(intl);
+        }
+
+        return (
+          <WrappedComponent
+            {...props}
+            {...{
+              [intlPropName]: intl,
+            }}
+            ref={forwardRef ? props.forwardedRef : null}
+          />
+        );
+      }}
+    </IntlConsumer>
+  );
+  WithIntl.displayName = `injectIntl(${getDisplayName(WrappedComponent)})`;
+  WithIntl.WrappedComponent = WrappedComponent;
+
+  if (forwardRef) {
+    return hoistNonReactStatics(
+      React.forwardRef<T, P>((props: P, ref) => (
+        <WithIntl {...props} forwardedRef={ref} />
+      )),
+      WrappedComponent
+    ) as any;
+  }
+
+  return hoistNonReactStatics(WithIntl, WrappedComponent) as any;
+}

package/src/components/message.tsx

@@ -0,0 +1,120 @@
+/*
+ * Copyright 2015, Yahoo Inc.
+ * Copyrights licensed under the New BSD License.
+ * See the accompanying LICENSE file for terms.
+ */
+
+import * as React from 'react';
+import {PrimitiveType, FormatXMLElementFn} from 'intl-messageformat';
+import {Context} from './injectIntl';
+import {MessageDescriptor} from '../types';
+import {formatMessage} from '../formatters/message';
+import {
+  invariantIntlContext,
+  DEFAULT_INTL_CONFIG,
+  createFormatters,
+} from '../utils';
+import * as shallowEquals_ from 'shallow-equal/objects';
+const shallowEquals: typeof shallowEquals_ =
+  (shallowEquals_ as any).default || shallowEquals_;
+
+const defaultFormatMessage = (
+  descriptor: MessageDescriptor,
+  values?: Record<
+    string,
+    PrimitiveType | React.ReactElement | FormatXMLElementFn
+  >
+): string => {
+  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(
+    {
+      ...DEFAULT_INTL_CONFIG,
+      locale: 'en',
+    },
+    createFormatters(),
+    descriptor,
+    values as any
+  );
+};
+
+export interface Props<
+  V extends Record<string, any> = Record<string, React.ReactNode>
+> extends MessageDescriptor {
+  values?: V;
+  tagName?: React.ElementType<any>;
+  children?(...nodes: React.ReactNodeArray): React.ReactNode;
+}
+
+class FormattedMessage<
+  V extends Record<string, any> = Record<
+    string,
+    PrimitiveType | React.ReactElement | FormatXMLElementFn
+  >
+> extends React.Component<Props<V>> {
+  static displayName = 'FormattedMessage';
+  static defaultProps = {
+    values: {},
+  };
+
+  shouldComponentUpdate(nextProps: Props<V>): boolean {
+    const {values, ...otherProps} = this.props;
+    const {values: nextValues, ...nextOtherProps} = nextProps;
+    return (
+      !shallowEquals(nextValues, values) ||
+      !shallowEquals(otherProps, nextOtherProps)
+    );
+  }
+
+  render(): JSX.Element {
+    return (
+      <Context.Consumer>
+        {(intl): React.ReactNode => {
+          if (!this.props.defaultMessage) {
+            invariantIntlContext(intl);
+          }
+
+          const {
+            formatMessage = defaultFormatMessage,
+            textComponent: Text = React.Fragment,
+          } = intl || {};
+          const {
+            id,
+            description,
+            defaultMessage,
+            values,
+            children,
+            tagName: Component = Text,
+          } = this.props;
+
+          const descriptor = {id, description, defaultMessage};
+          let nodes: string | React.ReactNodeArray = formatMessage(
+            descriptor,
+            values
+          );
+
+          if (!Array.isArray(nodes)) {
+            nodes = [nodes];
+          }
+
+          if (typeof children === 'function') {
+            return children(...nodes);
+          }
+
+          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(Component, null, ...nodes);
+          }
+          return nodes;
+        }}
+      </Context.Consumer>
+    );
+  }
+}
+
+export default FormattedMessage;

package/src/components/plural.tsx

@@ -0,0 +1,50 @@
+/*
+ * Copyright 2015, Yahoo Inc.
+ * Copyrights licensed under the New BSD License.
+ * See the accompanying LICENSE file for terms.
+ */
+
+import * as React from 'react';
+import withIntl from './injectIntl';
+import {IntlShape, FormatPluralOptions} from '../types';
+
+interface Props extends FormatPluralOptions {
+  value: number;
+  intl: IntlShape;
+  other: React.ReactNode;
+  zero?: React.ReactNode;
+  one?: React.ReactNode;
+  two?: React.ReactNode;
+  few?: React.ReactNode;
+  many?: React.ReactNode;
+  children?(value: React.ReactNode): React.ReactElement | null;
+}
+
+const FormattedPlural: React.FC<Props> = props => {
+  const {
+    value,
+    other,
+    children,
+    intl: {formatPlural, textComponent: Text},
+  } = props;
+
+  const pluralCategory = formatPlural(value, props);
+  const formattedPlural = props[pluralCategory as 'one'] || other;
+
+  if (typeof children === 'function') {
+    return children(formattedPlural);
+  }
+  if (Text) {
+    return <Text>{formattedPlural}</Text>;
+  }
+  // Work around @types/react where React.FC cannot return string
+  return formattedPlural as any;
+};
+
+FormattedPlural.defaultProps = {
+  type: 'cardinal',
+};
+
+FormattedPlural.displayName = 'FormattedPlural';
+
+export default withIntl(FormattedPlural);