react-intl 7.1.6 → 7.1.8

package/lib/src/components/createIntl.js

@@ -6,8 +6,7 @@
 import { __assign, __rest, __spreadArray } from "tslib";
 import { createIntl as coreCreateIntl, formatMessage as coreFormatMessage, } from '@formatjs/intl';
 import { isFormatXMLElementFn, } from 'intl-messageformat';
-import * as React from 'react';
-import { DEFAULT_INTL_CONFIG, assignUniqueKeysToParts } from '../utils';
+import { DEFAULT_INTL_CONFIG, assignUniqueKeysToParts, toKeyedReactNodeArray, } from '../utils';
 function assignUniqueKeysToFormatXMLElementFnArgument(values) {
     if (!values) {
         return values;
@@ -30,10 +29,7 @@ var formatMessage = function (config, formatters, descriptor, rawValues) {
         formatters,
         descriptor,
         values], rest, false));
-    if (Array.isArray(chunks)) {
-        return React.Children.toArray(chunks);
-    }
-    return chunks;
+    return toKeyedReactNodeArray(chunks);
 };
 /**
  * Create intl object

package/lib/src/components/message.js

@@ -22,10 +22,10 @@ function FormattedMessage(props) {
         ignoreTag: ignoreTag,
     });
     if (typeof children === 'function') {
-        return children(Array.isArray(nodes) ? nodes : [nodes]);
+        return children(nodes);
     }
     if (Component) {
-        return React.createElement(Component, null, React.Children.toArray(nodes));
+        return React.createElement(Component, null, nodes);
     }
     return React.createElement(React.Fragment, null, nodes);
 }

package/lib/src/utils.d.ts

@@ -5,6 +5,16 @@ export declare function invariant(condition: boolean, message: string, Err?: any
 export declare function invariantIntlContext(intl?: any): asserts intl;
 export type DefaultIntlConfig = Pick<ResolvedIntlConfig, 'fallbackOnEmptyString' | 'formats' | 'messages' | 'timeZone' | 'textComponent' | 'defaultLocale' | 'defaultFormats' | 'onError'>;
 export declare const DEFAULT_INTL_CONFIG: DefaultIntlConfig;
+/**
+ * Builds an array of {@link React.ReactNode}s with index-based keys, similar to
+ * {@link React.Children.toArray}. However, this function tells React that it
+ * was intentional, so they won't produce a bunch of warnings about it.
+ *
+ * React doesn't recommend doing this because it makes reordering inefficient,
+ * but we mostly need this for message chunks, which don't tend to reorder to
+ * begin with.
+ */
+export declare const toKeyedReactNodeArray: typeof React.Children.toArray;
 /**
  * Takes a `formatXMLElementFn`, and composes it in function, which passes
  * argument `parts` through, assigning unique key to each part, to prevent

package/lib/src/utils.js

@@ -12,6 +12,28 @@ export function invariantIntlContext(intl) {
         '<IntlProvider> needs to exist in the component ancestry.');
 }
 export var DEFAULT_INTL_CONFIG = __assign(__assign({}, CORE_DEFAULT_INTL_CONFIG), { textComponent: React.Fragment });
+var arbitraryKeyProps = { key: 42 };
+var toArbitrarilyKeyedReactNode = function (reactNode) {
+    return React.isValidElement(reactNode)
+        ? React.createElement(React.Fragment, arbitraryKeyProps, reactNode)
+        : reactNode;
+};
+/**
+ * Builds an array of {@link React.ReactNode}s with index-based keys, similar to
+ * {@link React.Children.toArray}. However, this function tells React that it
+ * was intentional, so they won't produce a bunch of warnings about it.
+ *
+ * React doesn't recommend doing this because it makes reordering inefficient,
+ * but we mostly need this for message chunks, which don't tend to reorder to
+ * begin with.
+ */
+export var toKeyedReactNodeArray = function (children) { var _a; 
+/**
+ * Note: {@link React.Children.map} will add its own index-based prefix to
+ * every key anyway, so the auto-injected one doesn't even have to be unique.
+ * This basically just tells React that it's explicit/intentional.
+ */
+return (_a = React.Children.map(children, toArbitrarilyKeyedReactNode)) !== null && _a !== void 0 ? _a : []; };
 /**
  * Takes a `formatXMLElementFn`, and composes it in function, which passes
  * argument `parts` through, assigning unique key to each part, to prevent

package/package.json

@@ -1,22 +1,29 @@
 {
   "name": "react-intl",
-  "version": "7.1.6",
   "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",
-    "i18n",
-    "internationalization",
-    "locale",
-    "localization",
-    "globalization",
-    "react",
-    "reactjs",
-    "format",
-    "formatting",
-    "translate",
-    "translation"
-  ],
+  "version": "7.1.8",
+  "license": "BSD-3-Clause",
   "author": "Eric Ferraiuolo <edf@ericf.me>",
+  "sideEffects": false,
+  "types": "index.d.ts",
+  "dependencies": {
+    "@types/hoist-non-react-statics": "^3.3.1",
+    "@types/react": "16 || 17 || 18 || 19",
+    "hoist-non-react-statics": "^3.3.2",
+    "tslib": "^2.8.0",
+    "intl-messageformat": "10.7.16",
+    "@formatjs/ecma402-abstract": "2.3.4",
+    "@formatjs/icu-messageformat-parser": "2.11.2",
+    "@formatjs/intl": "3.1.5"
+  },
+  "peerDependencies": {
+    "react": "16 || 17 || 18 || 19",
+    "typescript": "5.8.2"
+  },
+  "browserslist": [
+    "ie 11"
+  ],
+  "bugs": "https://github.com/formatjs/formatjs/issues",
   "contributors": [
     "Aarni Koskela <akx@iki.fi>",
     "Alexis Deveria <adeveria@gmail.com>",
@@ -56,6 +63,7 @@
     "Jiayi Hu <steph.jiayi@gmail.com>",
     "Jimmy Jia <tesrin@gmail.com>",
     "Joe Lencioni <joe.lencioni@gmail.com>",
+    "Johannes Wüller <johanneswueller@gmail.com>",
     "Jonas Antonelli <jonas.antonelli@gmail.com>",
     "Jose G <josegranafdez@gmail.com>",
     "Juan Ignacio Dopazo <juan@dopazo.me>",
@@ -114,40 +122,28 @@
     "Yang Su <yang@quip.com>",
     "zouxuoz <zouxuoz@gmail.com>"
   ],
-  "license": "BSD-3-Clause",
+  "gitHead": "773d6ebf881357f6e4c2dd7e8984b1bd0f69b4ca",
   "homepage": "https://formatjs.github.io/docs/react-intl",
-  "bugs": {
-    "url": "https://github.com/formatjs/formatjs/issues"
-  },
-  "repository": {
-    "type": "git",
-    "url": "git@github.com:formatjs/formatjs.git"
-  },
+  "keywords": [
+    "format",
+    "formatting",
+    "globalization",
+    "i18n",
+    "internationalization",
+    "intl",
+    "locale",
+    "localization",
+    "react",
+    "reactjs",
+    "translate",
+    "translation"
+  ],
   "main": "index.js",
   "module": "lib/index.js",
-  "types": "index.d.ts",
-  "sideEffects": false,
-  "dependencies": {
-    "@types/hoist-non-react-statics": "3",
-    "@types/react": "16 || 17 || 18 || 19",
-    "hoist-non-react-statics": "3",
-    "tslib": "2",
-    "@formatjs/ecma402-abstract": "2.3.3",
-    "@formatjs/intl": "3.1.4",
-    "intl-messageformat": "10.7.15",
-    "@formatjs/icu-messageformat-parser": "2.11.1"
-  },
-  "peerDependencies": {
-    "react": "^16.6.0 || 17 || 18 || 19",
-    "typescript": "5"
-  },
   "peerDependenciesMeta": {
     "typescript": {
       "optional": true
     }
   },
-  "browserslist": [
-    "ie 11"
-  ],
-  "gitHead": "773d6ebf881357f6e4c2dd7e8984b1bd0f69b4ca"
+  "repository": "git@github.com:formatjs/formatjs.git"
 }

package/react-intl.iife.js

@@ -4394,6 +4394,19 @@ var ReactIntl = (() => {
   var DEFAULT_INTL_CONFIG2 = __spreadProps(__spreadValues({}, DEFAULT_INTL_CONFIG), {
     textComponent: React.Fragment
   });
+  var arbitraryKeyProps = { key: 42 };
+  var toArbitrarilyKeyedReactNode = (reactNode) => React.isValidElement(reactNode) ? React.createElement(React.Fragment, arbitraryKeyProps, reactNode) : reactNode;
+  var toKeyedReactNodeArray = (children) => {
+    var _a2;
+    return (
+      /**
+       * Note: {@link React.Children.map} will add its own index-based prefix to
+       * every key anyway, so the auto-injected one doesn't even have to be unique.
+       * This basically just tells React that it's explicit/intentional.
+       */
+      (_a2 = React.Children.map(children, toArbitrarilyKeyedReactNode)) != null ? _a2 : []
+    );
+  };
   function assignUniqueKeysToParts(formatXMLElementFn) {
     return function(parts) {
       return formatXMLElementFn(React.Children.toArray(parts));
@@ -4525,7 +4538,6 @@ var ReactIntl = (() => {
   }
 
   // packages/react-intl/src/components/createIntl.ts
-  var React5 = __toESM(window.React);
   function assignUniqueKeysToFormatXMLElementFnArgument(values) {
     if (!values) {
       return values;
@@ -4545,10 +4557,7 @@ var ReactIntl = (() => {
       values,
       ...rest
     );
-    if (Array.isArray(chunks)) {
-      return React5.Children.toArray(chunks);
-    }
-    return chunks;
+    return toKeyedReactNodeArray(chunks);
   };
   var createIntl2 = (_a2, cache) => {
     var _b = _a2, { defaultRichTextElements: rawDefaultRichTextElements } = _b, config = __objRest(_b, ["defaultRichTextElements"]);
@@ -4583,7 +4592,7 @@ var ReactIntl = (() => {
   };
 
   // packages/react-intl/src/components/dateTimeRange.tsx
-  var React6 = __toESM(window.React);
+  var React5 = __toESM(window.React);
   var FormattedDateTimeRange = (props) => {
     const intl = useIntl();
     const _a2 = props, { from, to, children } = _a2, formatProps = __objRest(_a2, ["from", "to", "children"]);
@@ -4591,14 +4600,14 @@ var ReactIntl = (() => {
     if (typeof children === "function") {
       return children(formattedValue);
     }
-    const Text = intl.textComponent || React6.Fragment;
-    return React6.createElement(Text, null, formattedValue);
+    const Text = intl.textComponent || React5.Fragment;
+    return React5.createElement(Text, null, formattedValue);
   };
   FormattedDateTimeRange.displayName = "FormattedDateTimeRange";
   var dateTimeRange_default = FormattedDateTimeRange;
 
   // packages/react-intl/src/components/message.tsx
-  var React7 = __toESM(window.React);
+  var React6 = __toESM(window.React);
   function areEqual(prevProps, nextProps) {
     const _a2 = prevProps, { values } = _a2, otherProps = __objRest(_a2, ["values"]);
     const _b = nextProps, { values: nextValues } = _b, nextOtherProps = __objRest(_b, ["values"]);
@@ -4606,7 +4615,7 @@ var ReactIntl = (() => {
   }
   function FormattedMessage(props) {
     const intl = useIntl();
-    const { formatMessage: formatMessage3, textComponent: Text = React7.Fragment } = intl;
+    const { formatMessage: formatMessage3, textComponent: Text = React6.Fragment } = intl;
     const {
       id,
       description,
@@ -4617,19 +4626,19 @@ var ReactIntl = (() => {
       ignoreTag
     } = props;
     const descriptor = { id, description, defaultMessage };
-    let nodes = formatMessage3(descriptor, values, {
+    const nodes = formatMessage3(descriptor, values, {
       ignoreTag
     });
     if (typeof children === "function") {
-      return children(Array.isArray(nodes) ? nodes : [nodes]);
+      return children(nodes);
     }
     if (Component) {
-      return React7.createElement(Component, null, React7.Children.toArray(nodes));
+      return React6.createElement(Component, null, nodes);
     }
-    return React7.createElement(React7.Fragment, null, nodes);
+    return React6.createElement(React6.Fragment, null, nodes);
   }
   FormattedMessage.displayName = "FormattedMessage";
-  var MemoizedFormattedMessage = React7.memo(
+  var MemoizedFormattedMessage = React6.memo(
     FormattedMessage,
     areEqual
   );
@@ -4637,7 +4646,7 @@ var ReactIntl = (() => {
   var message_default = MemoizedFormattedMessage;
 
   // packages/react-intl/src/components/plural.tsx
-  var React8 = __toESM(window.React);
+  var React7 = __toESM(window.React);
   var FormattedPlural = (props) => {
     const { formatPlural: formatPlural2, textComponent: Text } = useIntl();
     const { value, other, children } = props;
@@ -4647,7 +4656,7 @@ var ReactIntl = (() => {
       return children(formattedPlural);
     }
     if (Text) {
-      return React8.createElement(Text, null, formattedPlural);
+      return React7.createElement(Text, null, formattedPlural);
     }
     return formattedPlural;
   };
@@ -4655,7 +4664,7 @@ var ReactIntl = (() => {
   var plural_default = FormattedPlural;
 
   // packages/react-intl/src/components/provider.tsx
-  var React9 = __toESM(window.React);
+  var React8 = __toESM(window.React);
   function processIntlConfig(config) {
     return {
       locale: config.locale,
@@ -4672,7 +4681,7 @@ var ReactIntl = (() => {
       defaultRichTextElements: config.defaultRichTextElements
     };
   }
-  var IntlProvider2 = class extends React9.PureComponent {
+  var IntlProvider2 = class extends React8.PureComponent {
     constructor() {
       super(...arguments);
       __publicField(this, "cache", createIntlCache());
@@ -4694,14 +4703,14 @@ var ReactIntl = (() => {
     }
     render() {
       invariantIntlContext(this.state.intl);
-      return React9.createElement(Provider, { value: this.state.intl }, this.props.children);
+      return React8.createElement(Provider, { value: this.state.intl }, this.props.children);
     }
   };
   __publicField(IntlProvider2, "displayName", "IntlProvider");
   __publicField(IntlProvider2, "defaultProps", DEFAULT_INTL_CONFIG2);
 
   // packages/react-intl/src/components/relative.tsx
-  var React10 = __toESM(window.React);
+  var React9 = __toESM(window.React);
   var MINUTE = 60;
   var HOUR = 60 * 60;
   var DAY = 60 * 60 * 24;
@@ -4759,9 +4768,9 @@ var ReactIntl = (() => {
       return children(formattedRelativeTime);
     }
     if (Text) {
-      return React10.createElement(Text, null, formattedRelativeTime);
+      return React9.createElement(Text, null, formattedRelativeTime);
     }
-    return React10.createElement(React10.Fragment, null, formattedRelativeTime);
+    return React9.createElement(React9.Fragment, null, formattedRelativeTime);
   };
   var FormattedRelativeTime = (_a2) => {
     var _b = _a2, {
@@ -4777,9 +4786,9 @@ var ReactIntl = (() => {
       !updateIntervalInSeconds || !!(updateIntervalInSeconds && canIncrement(unit)),
       "Cannot schedule update with unit longer than hour"
     );
-    const [prevUnit, setPrevUnit] = React10.useState();
-    const [prevValue, setPrevValue] = React10.useState(0);
-    const [currentValueInSeconds, setCurrentValueInSeconds] = React10.useState(0);
+    const [prevUnit, setPrevUnit] = React9.useState();
+    const [prevValue, setPrevValue] = React9.useState(0);
+    const [currentValueInSeconds, setCurrentValueInSeconds] = React9.useState(0);
     let updateTimer;
     if (unit !== prevUnit || value !== prevValue) {
       setPrevValue(value || 0);
@@ -4788,7 +4797,7 @@ var ReactIntl = (() => {
         canIncrement(unit) ? valueToSeconds(value, unit) : 0
       );
     }
-    React10.useEffect(() => {
+    React9.useEffect(() => {
       function clearUpdateTimer() {
         clearTimeout(updateTimer);
       }
@@ -4823,7 +4832,7 @@ var ReactIntl = (() => {
       const unitDuration = getDurationInSeconds(currentUnit);
       currentValue = Math.round(currentValueInSeconds / unitDuration);
     }
-    return React10.createElement(
+    return React9.createElement(
       SimpleFormattedRelativeTime,
       __spreadValues({
         value: currentValue,

package/src/components/createIntl.js

@@ -9,7 +9,6 @@ exports.createIntl = void 0;
 var tslib_1 = require("tslib");
 var intl_1 = require("@formatjs/intl");
 var intl_messageformat_1 = require("intl-messageformat");
-var React = tslib_1.__importStar(require("react"));
 var utils_1 = require("../utils");
 function assignUniqueKeysToFormatXMLElementFnArgument(values) {
     if (!values) {
@@ -33,10 +32,7 @@ var formatMessage = function (config, formatters, descriptor, rawValues) {
         formatters,
         descriptor,
         values], rest, false));
-    if (Array.isArray(chunks)) {
-        return React.Children.toArray(chunks);
-    }
-    return chunks;
+    return (0, utils_1.toKeyedReactNodeArray)(chunks);
 };
 /**
  * Create intl object

package/src/components/message.js

@@ -24,10 +24,10 @@ function FormattedMessage(props) {
         ignoreTag: ignoreTag,
     });
     if (typeof children === 'function') {
-        return children(Array.isArray(nodes) ? nodes : [nodes]);
+        return children(nodes);
     }
     if (Component) {
-        return React.createElement(Component, null, React.Children.toArray(nodes));
+        return React.createElement(Component, null, nodes);
     }
     return React.createElement(React.Fragment, null, nodes);
 }

package/src/utils.d.ts

@@ -5,6 +5,16 @@ export declare function invariant(condition: boolean, message: string, Err?: any
 export declare function invariantIntlContext(intl?: any): asserts intl;
 export type DefaultIntlConfig = Pick<ResolvedIntlConfig, 'fallbackOnEmptyString' | 'formats' | 'messages' | 'timeZone' | 'textComponent' | 'defaultLocale' | 'defaultFormats' | 'onError'>;
 export declare const DEFAULT_INTL_CONFIG: DefaultIntlConfig;
+/**
+ * Builds an array of {@link React.ReactNode}s with index-based keys, similar to
+ * {@link React.Children.toArray}. However, this function tells React that it
+ * was intentional, so they won't produce a bunch of warnings about it.
+ *
+ * React doesn't recommend doing this because it makes reordering inefficient,
+ * but we mostly need this for message chunks, which don't tend to reorder to
+ * begin with.
+ */
+export declare const toKeyedReactNodeArray: typeof React.Children.toArray;
 /**
  * Takes a `formatXMLElementFn`, and composes it in function, which passes
  * argument `parts` through, assigning unique key to each part, to prevent

package/src/utils.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.DEFAULT_INTL_CONFIG = void 0;
+exports.toKeyedReactNodeArray = exports.DEFAULT_INTL_CONFIG = void 0;
 exports.invariant = invariant;
 exports.invariantIntlContext = invariantIntlContext;
 exports.assignUniqueKeysToParts = assignUniqueKeysToParts;
@@ -19,6 +19,29 @@ function invariantIntlContext(intl) {
         '<IntlProvider> needs to exist in the component ancestry.');
 }
 exports.DEFAULT_INTL_CONFIG = tslib_1.__assign(tslib_1.__assign({}, intl_1.DEFAULT_INTL_CONFIG), { textComponent: React.Fragment });
+var arbitraryKeyProps = { key: 42 };
+var toArbitrarilyKeyedReactNode = function (reactNode) {
+    return React.isValidElement(reactNode)
+        ? React.createElement(React.Fragment, arbitraryKeyProps, reactNode)
+        : reactNode;
+};
+/**
+ * Builds an array of {@link React.ReactNode}s with index-based keys, similar to
+ * {@link React.Children.toArray}. However, this function tells React that it
+ * was intentional, so they won't produce a bunch of warnings about it.
+ *
+ * React doesn't recommend doing this because it makes reordering inefficient,
+ * but we mostly need this for message chunks, which don't tend to reorder to
+ * begin with.
+ */
+var toKeyedReactNodeArray = function (children) { var _a; 
+/**
+ * Note: {@link React.Children.map} will add its own index-based prefix to
+ * every key anyway, so the auto-injected one doesn't even have to be unique.
+ * This basically just tells React that it's explicit/intentional.
+ */
+return (_a = React.Children.map(children, toArbitrarilyKeyedReactNode)) !== null && _a !== void 0 ? _a : []; };
+exports.toKeyedReactNodeArray = toKeyedReactNodeArray;
 /**
  * Takes a `formatXMLElementFn`, and composes it in function, which passes
  * argument `parts` through, assigning unique key to each part, to prevent