@commercetools-uikit/money-input 13.0.3 → 13.0.4

package/dist/commercetools-uikit-money-input.cjs.prod.js

@@ -873,35 +873,39 @@ var createCurrencySelectStyles = function createCurrencySelectStyles(_ref4, them
       };
     }
   });
-}; // The MoneyInput component always operates on a value consisting of:
-//   { amount: String, currencyCode: String }
+};
+
+// The MoneyInput component always operates on a value consisting of:
+// ```
+// { amount: String, currencyCode: String }
+// ```
 //
 // The amount may only use a dot as the decimal separator.
-// The currencyCode must be supported by the API.
+// The `currencyCode` must be supported by the API.
 //
-// The MoneyInput does not do any validation on its own. It only serves as a way
-// to get the amount and currencyCode input from the user. Validation is always
+// The `MoneyInput` does not do any validation on its own. It only serves as a way
+// to get the amount and `currencyCode` input from the user. Validation is always
 // up to the parent.
 //
-// The CTP API supports prices two types of prices: centPrecision and
-// highPrecision. The MoneyInput itself does not know about these. However,
-// it has two static methods defined (convertToMoneyValue and parseMoneyValue),
-// which can be used to convert between MoneyInput value and the MoneyValue
+// The CTP API supports two types of prices: `centPrecision` and `highPrecision`.
+// The `MoneyInput` itself does not know about these. However,
+// it has two static methods defined (`convertToMoneyValue` and `parseMoneyValue`),
+// which can be used to convert between `MoneyInput` value and the `MoneyValue`
 // supported by the API.
-// Some places in the API do not support highPrecision prices, but the
-// convertToMoneyValue will always return either a centPrecision or a
-// highPrecision price. It's up the MoneyInput's parent to show a validation
-// error in case a highPrecision price is used.
+// Some places in the API do not support `highPrecision` prices, but the
+// `convertToMoneyValue `will always return either a `centPrecision `or a
+// `highPrecision` price. It's up the `MoneyInput`'s parent to show a validation
+// error in case a `highPrecision` price is used.
 //
-// A value is considered as to have highPrecision when the number of supplied
+// A value is considered as to have `highPrecision` when the number of supplied
 // fraction digits exceed the number of fraction digits the currency uses. For
-// example, 42.00 € is always a centPrecision price, while 42.001 € is always a
-// highPrecision price. It is not possible to hae 42.00 € as a highPrecision
+// example, `EUR 42.00` is always a `centPrecision` price, while `EUR 42.001` is always a
+// `highPrecision` price. It is not possible to have `EUR 42.00` as a `highPrecision`
 // price.
 //
-// The first time the component renders, we want to try to show the centAmount
-// as a formatted number. To achieve this, the parseMoneyValue function can
-// be used to turn the API value into a value the MoneyInput understands.
+// The first time the component renders, we want to try to show the `centAmount`
+// as a formatted number. To achieve this, the `parseMoneyValue` function can
+// be used to turn the API value into a value the `MoneyInput` understands.
 // During this transformation, the money value will get formatted into "amount".
 //
 // When the user changes the value, we don't want to format again. We only format
@@ -909,16 +913,19 @@ var createCurrencySelectStyles = function createCurrencySelectStyles(_ref4, them
 // formatting would mess with the user's input.
 //
 //
-// A full example of an MoneyValue with centPrecision would be
+// A full example of an `MoneyValue` with `centPrecision` would be
+// ```
 // {
 //   "type": "centPrecision",
 //   "currencyCode": "EUR",
 //   "centAmount": 4200,
 //   "fractionDigits": 2
 // }
-// which equals 42.00 €
+// ```
+// which equals `EUR 42.00`.
 //
-// A full example of an MoneyValue with highPrecision would be
+// A full example of an `MoneyValue` with `highPrecision` would be
+// ```
 // {
 //  "type": "highPrecision",
 //  "currencyCode": "EUR",
@@ -926,7 +933,8 @@ var createCurrencySelectStyles = function createCurrencySelectStyles(_ref4, them
 //  "preciseAmount": 123456,
 //  "fractionDigits": 7
 // }
-// which equals 0.0123456 €
+// ```
+// which equals `EUR 0.0123456`
 // Parsing
 // Since most users are not careful about how they enter values, we will parse
 // both `.` and `,` as decimal separators.
@@ -934,10 +942,7 @@ var createCurrencySelectStyles = function createCurrencySelectStyles(_ref4, them
 // When a value is `1,000.00` we also parse it as `1000`.
 //
 // This means the highest amount always wins. We do this by comparing the last
-// position of `.` and `,`. Whatever occurs later is used as the decimal
-// separator.
-
-
+// position of `.` and `,`. Whatever occurs later is used as the decimal separator.
 var parseRawAmountToNumber = function parseRawAmountToNumber(rawAmount, locale) {
   var fractionsSeparator;
 
@@ -974,7 +979,7 @@ var parseRawAmountToNumber = function parseRawAmountToNumber(rawAmount, locale)
 //
 // This function expects the "amount" to be a trimmed value.
 
-var createMoneyValue = function createMoneyValue(currencyCode, rawAmount, locale) {
+var createMoneyValue = function createMoneyValue(rawAmount, locale, currencyCode) {
   var _context3, _context4;
 
   if (!currencyCode) return null;
@@ -1030,17 +1035,23 @@ var createMoneyValue = function createMoneyValue(currencyCode, rawAmount, locale
   };
 };
 
+var createEmptyMoneyValue = function createEmptyMoneyValue(currencyCode) {
+  return {
+    type: 'centPrecision',
+    currencyCode: currencyCode,
+    centAmount: NaN,
+    fractionDigits: 2
+  };
+};
+
 var getAmountAsNumberFromMoneyValue = function getAmountAsNumberFromMoneyValue(moneyValue) {
   return moneyValue.type === 'highPrecision' ? moneyValue.preciseAmount / Math.pow(10, moneyValue.fractionDigits) : moneyValue.centAmount / Math.pow(10, currencies[moneyValue.currencyCode].fractionDigits);
 }; // gets called with a string and should return a formatted string
 
 
-var formatAmount = function formatAmount(rawAmount, currencyCode, locale) {
+var formatAmount = function formatAmount(rawAmount, locale, currencyCode) {
   // fallback in case the user didn't enter an amount yet (or it's invalid)
-  var moneyValue = createMoneyValue(currencyCode, rawAmount, locale) || {
-    currencyCode: currencyCode,
-    centAmount: NaN
-  };
+  var moneyValue = createMoneyValue(rawAmount, locale, currencyCode) || createEmptyMoneyValue(currencyCode);
   var amount = getAmountAsNumberFromMoneyValue(moneyValue);
   var fractionDigits = moneyValue.preciseAmount ? moneyValue.fractionDigits : currencies[moneyValue.currencyCode].fractionDigits;
   return isNaN(amount) ? '' : amount.toLocaleString(locale, {
@@ -1112,8 +1123,8 @@ var MoneyInput = function MoneyInput(props) {
     toggleAmountHasFocus(false); // Skip formatting for empty value or when the input is used with an
     // unknown currency.
 
-    if (amount.length > 0 && currencies[props.value.currencyCode]) {
-      var formattedAmount = formatAmount(amount, props.value.currencyCode, intl.locale); // When the user entered a value with centPrecision, we can format
+    if (amount.length > 0 && props.value.currencyCode && currencies[props.value.currencyCode]) {
+      var formattedAmount = formatAmount(amount, intl.locale, props.value.currencyCode); // When the user entered a value with centPrecision, we can format
       // the resulting value to that currency, e.g. 20.1 to 20.10
 
       if (String(formattedAmount) !== amount) {
@@ -1154,7 +1165,7 @@ var MoneyInput = function MoneyInput(props) {
       // currency's number of fraction digits.
       // When the currency was a high-precision price, then no digits should
       // be lost
-      var formattedAmount = formatAmount(_trimInstanceProperty__default["default"](_context6 = props.value.amount).call(_context6), currencyCode, intl.locale); // The user could be changing the currency before entering any amount,
+      var formattedAmount = formatAmount(_trimInstanceProperty__default["default"](_context6 = props.value.amount).call(_context6), intl.locale, currencyCode); // The user could be changing the currency before entering any amount,
       // or while the amount is invalid. In these cases, we don't attempt to
       // format the amount.
 
@@ -1301,7 +1312,7 @@ var MoneyInput = function MoneyInput(props) {
         "data-testid": "currency-dropdown"
       }), jsxRuntime.jsxs("div", {
         css: _ref,
-        children: [jsxRuntime.jsx("input", _objectSpread({
+        children: [jsxRuntime.jsx("input", _objectSpread(_objectSpread({
           ref: amountInputRef,
           id: MoneyInput.getAmountInputId(moneyInputId),
           autoComplete: props.autoComplete,
@@ -1319,7 +1330,11 @@ var MoneyInput = function MoneyInput(props) {
           disabled: props.isDisabled,
           readOnly: props.isReadOnly,
           autoFocus: props.isAutofocussed
-        }, utils.filterDataAttributes(props))), props.hasHighPrecisionBadge && isHighPrecision && jsxRuntime.jsxs(jsxRuntime.Fragment, {
+        }, utils.filterDataAttributes(props)), {}, {
+          /* ARIA */
+          "aria-invalid": props['aria-invalid'],
+          "aria-errormessage": props['aria-errormessage']
+        })), props.hasHighPrecisionBadge && isHighPrecision && jsxRuntime.jsxs(jsxRuntime.Fragment, {
           children: [!props.isDisabled && jsxRuntime.jsx("div", {
             id: getPortalId(props.id)
           }), jsxRuntime.jsx("div", {
@@ -1362,7 +1377,7 @@ MoneyInput.getCurrencyDropdownId = getCurrencyDropdownName;
 MoneyInput.convertToMoneyValue = function (value, locale) {
   var _context11;
 
-  return createMoneyValue(value.currencyCode, typeof value.amount === 'string' ? _trimInstanceProperty__default["default"](_context11 = value.amount).call(_context11) : '', locale);
+  return createMoneyValue(typeof value.amount === 'string' ? _trimInstanceProperty__default["default"](_context11 = value.amount).call(_context11) : '', locale, value.currencyCode);
 };
 
 MoneyInput.parseMoneyValue = function (moneyValue, locale) {
@@ -1372,7 +1387,7 @@ MoneyInput.parseMoneyValue = function (moneyValue, locale) {
   };
   var amount = formatAmount(getAmountAsNumberFromMoneyValue(moneyValue).toLocaleString(locale, {
     minimumFractionDigits: moneyValue.fractionDigits
-  }), moneyValue.currencyCode, locale);
+  }), locale, moneyValue.currencyCode);
   return {
     amount: amount,
     currencyCode: moneyValue.currencyCode
@@ -1387,7 +1402,7 @@ MoneyInput.isEmpty = function (formValue) {
 
 MoneyInput.isHighPrecision = function (formValue, locale) {
   var moneyValue = MoneyInput.convertToMoneyValue(formValue, locale);
-  return moneyValue && moneyValue.type === 'highPrecision';
+  return (moneyValue === null || moneyValue === void 0 ? void 0 : moneyValue.type) === 'highPrecision';
 };
 
 MoneyInput.isTouched = function (touched) {
@@ -1398,7 +1413,7 @@ MoneyInput.defaultProps = defaultProps;
 var MoneyInput$1 = MoneyInput;
 
 // NOTE: This string will be replaced on build time with the package version.
-var version = "13.0.3";
+var version = "13.0.4";
 
 exports["default"] = MoneyInput$1;
 exports.version = version;