@commercetools-uikit/money-input 20.5.0 → 20.6.1

package/README.md

@@ -1,5 +1,5 @@
 <!-- THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY. -->
-<!-- This file is created by the `yarn generate-readme` script. -->
+<!-- This file is created by the `pnpm generate-readme` script. -->
 
 # MoneyInput
 
@@ -10,7 +10,7 @@ A controlled input component for money values with validation states.
 ## Installation
 
 ```
-yarn add @commercetools-uikit/money-input
+pnpm add @commercetools-uikit/money-input
 ```
 
 ```
@@ -20,7 +20,7 @@ npm --save install @commercetools-uikit/money-input
 Additionally install the peer dependencies (if not present)
 
 ```
-yarn add react react-dom react-intl
+pnpm add react react-dom react-intl
 ```
 
 ```

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

@@ -22,7 +22,6 @@ var _parseInt = require('@babel/runtime-corejs3/core-js-stable/parse-int');
 var _trimInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/trim');
 var _mapInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/map');
 var _findInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/find');
-var _concatInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/concat');
 var react$1 = require('react');
 var ReactDOM = require('react-dom');
 var has = require('lodash/has');
@@ -58,7 +57,6 @@ var _parseInt__default = /*#__PURE__*/_interopDefault(_parseInt);
 var _trimInstanceProperty__default = /*#__PURE__*/_interopDefault(_trimInstanceProperty);
 var _mapInstanceProperty__default = /*#__PURE__*/_interopDefault(_mapInstanceProperty);
 var _findInstanceProperty__default = /*#__PURE__*/_interopDefault(_findInstanceProperty);
-var _concatInstanceProperty__default = /*#__PURE__*/_interopDefault(_concatInstanceProperty);
 var ReactDOM__default = /*#__PURE__*/_interopDefault(ReactDOM);
 var has__default = /*#__PURE__*/_interopDefault(has);
 var Select__default = /*#__PURE__*/_interopDefault(Select);
@@ -780,7 +778,7 @@ var messages = reactIntl.defineMessages({
 const _excluded = ["id"],
   _excluded2 = ["currencies", "horizontalConstraint", "menuPortalZIndex"];
 function ownKeys(e, r) { var t = _Object$keys__default["default"](e); if (_Object$getOwnPropertySymbols__default["default"]) { var o = _Object$getOwnPropertySymbols__default["default"](e); r && (o = _filterInstanceProperty__default["default"](o).call(o, function (r) { return _Object$getOwnPropertyDescriptor__default["default"](e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var _context11, _context12; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty__default["default"](_context11 = ownKeys(Object(t), !0)).call(_context11, function (r) { _defineProperty(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](e, _Object$getOwnPropertyDescriptors__default["default"](t)) : _forEachInstanceProperty__default["default"](_context12 = ownKeys(Object(t))).call(_context12, function (r) { _Object$defineProperty__default["default"](e, r, _Object$getOwnPropertyDescriptor__default["default"](t, r)); }); } return e; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var _context1, _context10; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty__default["default"](_context1 = ownKeys(Object(t), !0)).call(_context1, function (r) { _defineProperty(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](e, _Object$getOwnPropertyDescriptors__default["default"](t)) : _forEachInstanceProperty__default["default"](_context10 = ownKeys(Object(t))).call(_context10, function (r) { _Object$defineProperty__default["default"](e, r, _Object$getOwnPropertyDescriptor__default["default"](t, r)); }); } return e; }
 function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
 const TooltipWrapper = /*#__PURE__*/_styled__default["default"]("div", process.env.NODE_ENV === "production" ? {
   target: "e1u90zjc0"
@@ -796,8 +794,8 @@ const TooltipWrapper = /*#__PURE__*/_styled__default["default"]("div", process.e
   toString: _EMOTION_STRINGIFIED_CSS_ERROR__
 });
 const moneyInputSequentialId = utils.createSequentialId('money-input-');
-const getPortalId = id => "portal-".concat(id);
-const getPortalNode = id => document.querySelector("#".concat(getPortalId(id)));
+const getPortalId = id => `portal-${id}`;
+const getPortalNode = id => document.querySelector(`#${getPortalId(id)}`);
 const Portal = props => {
   const domNode = getPortalNode(props.id);
   if (domNode) {
@@ -841,15 +839,15 @@ const createCurrencySelectStyles = _ref4 => {
   });
   return _objectSpread(_objectSpread({}, selectStyles), {}, {
     control: (base, state) => _objectSpread(_objectSpread({}, selectStyles.control(base, state)), {}, {
-      padding: "0 ".concat(designSystem.designTokens.spacing25),
+      padding: `0 ${designSystem.designTokens.spacing25}`,
       borderTopRightRadius: '0',
       borderBottomRightRadius: '0',
       borderRight: '0',
       minWidth: '80px',
       height: '100%',
       borderColor: (() => {
-        if (isDisabled) return "".concat(designSystem.designTokens.borderColorForInputWhenDisabled, " !important");
-        if (isReadOnly) return "".concat(designSystem.designTokens.borderColorForInputWhenReadonly, " !important");
+        if (isDisabled) return `${designSystem.designTokens.borderColorForInputWhenDisabled} !important`;
+        if (isReadOnly) return `${designSystem.designTokens.borderColorForInputWhenReadonly} !important`;
         if (hasError) return designSystem.designTokens.borderColorForInputWhenError;
         if (hasWarning) return designSystem.designTokens.borderColorForInputWhenWarning;
         if (currencyHasFocus) {
@@ -859,7 +857,7 @@ const createCurrencySelectStyles = _ref4 => {
       })(),
       cursor: (() => {
         if (isDisabled) return 'not-allowed';
-        if (isReadOnly) return "default";
+        if (isReadOnly) return `default`;
         return 'pointer';
       })(),
       backgroundColor: (() => {
@@ -972,7 +970,7 @@ const parseRawAmountToNumber = (rawAmount, locale) => {
   }
   fractionsSeparator = fractionsSeparator === '.' ? '\\.' : fractionsSeparator; // here we escape the '.' to use it as regex
   // The raw amount with only one sparator
-  const normalizedAmount = String(rawAmount).replace(new RegExp("[^-0-9".concat(fractionsSeparator, "]"), 'g'), '') // we just keep the numbers and the fraction symbol
+  const normalizedAmount = String(rawAmount).replace(new RegExp(`[^-0-9${fractionsSeparator}]`, 'g'), '') // we just keep the numbers and the fraction symbol
   .replace(fractionsSeparator, '.'); // then we change whatever `fractionsSeparator` was to `.` so we can parse it as float
 
   return _parseFloat__default["default"](normalizedAmount);
@@ -997,7 +995,7 @@ const createMoneyValue = (rawAmount, locale, currencyCode) => {
   if (!currency) return null;
   // The user may enter a value with a comma, dot, or apostrophe as the decimal separator.
   if (rawAmount.length === 0 || !utils.isNumberish(rawAmount)) return null;
-  process.env.NODE_ENV !== "production" ? utils.warning(locale || currency.fractionDigits !== 0, "MoneyInput: A locale must be provided when currency has no fraction digits (".concat(currencyCode, ")")) : void 0;
+  process.env.NODE_ENV !== "production" ? utils.warning(locale || currency.fractionDigits !== 0, `MoneyInput: A locale must be provided when currency has no fraction digits (${currencyCode})`) : void 0;
   const amountAsNumber = parseRawAmountToNumber(rawAmount, locale);
   if (isNaN(amountAsNumber)) return null;
 
@@ -1046,15 +1044,12 @@ const createMoneyValue = (rawAmount, locale, currencyCode) => {
     fractionDigits: currency.fractionDigits
   };
 };
-const createEmptyMoneyValue = currencyCode => {
-  var _allCurrencies$curren;
-  return {
-    type: 'centPrecision',
-    currencyCode,
-    centAmount: NaN,
-    fractionDigits: (_allCurrencies$curren = allCurrencies[currencyCode].fractionDigits) !== null && _allCurrencies$curren !== void 0 ? _allCurrencies$curren : 2
-  };
-};
+const createEmptyMoneyValue = currencyCode => ({
+  type: 'centPrecision',
+  currencyCode,
+  centAmount: NaN,
+  fractionDigits: allCurrencies[currencyCode].fractionDigits ?? 2
+});
 const getAmountAsNumberFromMoneyValue = moneyValue => moneyValue.type === 'highPrecision' ? moneyValue.preciseAmount / 10 ** moneyValue.fractionDigits : moneyValue.centAmount / 10 ** allCurrencies[moneyValue.currencyCode].fractionDigits;
 
 // gets called with a string and should return a formatted string
@@ -1067,8 +1062,8 @@ const formatAmount = (rawAmount, locale, currencyCode) => {
     minimumFractionDigits: fractionDigits
   });
 };
-const getAmountInputName = name => name ? "".concat(name, ".amount") : undefined;
-const getCurrencyDropdownName = name => name ? "".concat(name, ".currencyCode") : undefined;
+const getAmountInputName = name => name ? `${name}.amount` : undefined;
+const getCurrencyDropdownName = name => name ? `${name}.currencyCode` : undefined;
 var _ref = process.env.NODE_ENV === "production" ? {
   name: "pw7jst",
   styles: "position:relative;width:100%"
@@ -1086,7 +1081,6 @@ var _ref2 = process.env.NODE_ENV === "production" ? {
   toString: _EMOTION_STRINGIFIED_CSS_ERROR__
 };
 const MoneyInput = _ref5 => {
-  var _context8, _context9;
   let _ref5$currencies = _ref5.currencies,
     currencies = _ref5$currencies === void 0 ? [] : _ref5$currencies,
     _ref5$horizontalConst = _ref5.horizontalConstraint,
@@ -1146,20 +1140,18 @@ const MoneyInput = _ref5 => {
             value: formattedAmount
           }
         };
-        onChange === null || onChange === void 0 || onChange(fakeEvent);
+        onChange?.(fakeEvent);
       }
     }
   }, [intl.locale, onChange, moneyInputId, props.name, props.value.amount, props.value.currencyCode, toggleAmountHasFocus]);
   const handleAmountChange = react$1.useCallback(event => {
-    var _event$target;
-    if (utils.isNumberish((_event$target = event.target) === null || _event$target === void 0 ? void 0 : _event$target.value)) {
-      var _event$target2;
-      onChange === null || onChange === void 0 || onChange({
+    if (utils.isNumberish(event.target?.value)) {
+      onChange?.({
         persist: () => {},
         target: {
           id: MoneyInput.getAmountInputId(moneyInputId),
           name: getAmountInputName(props.name),
-          value: (_event$target2 = event.target) === null || _event$target2 === void 0 ? void 0 : _event$target2.value
+          value: event.target?.value
         }
       });
     }
@@ -1167,7 +1159,7 @@ const MoneyInput = _ref5 => {
   const handleCurrencyChange = react$1.useCallback(option => {
     const currencyCode = option.value;
     if (props.value.currencyCode !== currencyCode) {
-      var _context6, _amountInputRef$curre;
+      var _context6;
       // When the user changes from a currency with 3 fraction digits to
       // a currency with 2 fraction digits, and when the input value was
       // "9.000" (9), then it should change to "9.00" to reflect the new
@@ -1189,11 +1181,11 @@ const MoneyInput = _ref5 => {
           value: currencyCode || ''
         }
       };
-      onChange === null || onChange === void 0 || onChange(fakeCurrencyEvent);
+      onChange?.(fakeCurrencyEvent);
 
       // change amount if necessary
       if (props.value.amount !== nextAmount) {
-        onChange === null || onChange === void 0 || onChange({
+        onChange?.({
           persist: () => {},
           target: {
             id: MoneyInput.getAmountInputId(moneyInputId),
@@ -1202,7 +1194,7 @@ const MoneyInput = _ref5 => {
           }
         });
       }
-      (_amountInputRef$curre = amountInputRef.current) === null || _amountInputRef$curre === void 0 || _amountInputRef$curre.focus();
+      amountInputRef.current?.focus();
     }
   }, [intl.locale, onChange, moneyInputId, props.name, props.value.amount, props.value.currencyCode]);
   const handleCurrencyFocus = react$1.useCallback(() => {
@@ -1246,10 +1238,9 @@ const MoneyInput = _ref5 => {
   const isHighPrecision = !MoneyInput.isEmpty(props.value) && MoneyInput.isHighPrecision(props.value, intl.locale);
   const onBlur = props.onBlur;
   const handleContainerBlur = react$1.useCallback(event => {
-    var _containerRef$current;
     // ensures that both fields are marked as touched when one of them
     // is blurred
-    if (typeof onBlur === 'function' && !((_containerRef$current = containerRef.current) !== null && _containerRef$current !== void 0 && _containerRef$current.contains(event.relatedTarget))) {
+    if (typeof onBlur === 'function' && !containerRef.current?.contains(event.relatedTarget)) {
       onBlur({
         target: {
           id: MoneyInput.getCurrencyDropdownId(moneyInputId),
@@ -1349,7 +1340,7 @@ const MoneyInput = _ref5 => {
               ,
               styles: {
                 body: {
-                  margin: _concatInstanceProperty__default["default"](_context8 = _concatInstanceProperty__default["default"](_context9 = "".concat(designSystem.designTokens.spacing20, " -")).call(_context9, designSystem.designTokens.spacing10, " ")).call(_context8, designSystem.designTokens.spacing20, " 0")
+                  margin: `${designSystem.designTokens.spacing20} -${designSystem.designTokens.spacing10} ${designSystem.designTokens.spacing20} 0`
                 }
               },
               title: intl.formatMessage(messages.highPrecision),
@@ -1371,8 +1362,8 @@ MoneyInput.displayName = 'MoneyInput';
 MoneyInput.getAmountInputId = getAmountInputName;
 MoneyInput.getCurrencyDropdownId = getCurrencyDropdownName;
 MoneyInput.convertToMoneyValue = (value, locale) => {
-  var _context0;
-  return createMoneyValue(typeof value.amount === 'string' ? _trimInstanceProperty__default["default"](_context0 = value.amount).call(_context0) : '', locale, value.currencyCode);
+  var _context8;
+  return createMoneyValue(typeof value.amount === 'string' ? _trimInstanceProperty__default["default"](_context8 = value.amount).call(_context8) : '', locale, value.currencyCode);
 };
 MoneyInput.parseMoneyValue = (moneyValue, locale) => {
   if (!moneyValue) return {
@@ -1395,19 +1386,19 @@ MoneyInput.parseMoneyValue = (moneyValue, locale) => {
   };
 };
 MoneyInput.isEmpty = formValue => {
-  var _context1, _context10;
-  return !formValue || _trimInstanceProperty__default["default"](_context1 = formValue.amount).call(_context1) === '' || _trimInstanceProperty__default["default"](_context10 = formValue.currencyCode).call(_context10) === '';
+  var _context9, _context0;
+  return !formValue || _trimInstanceProperty__default["default"](_context9 = formValue.amount).call(_context9) === '' || _trimInstanceProperty__default["default"](_context0 = formValue.currencyCode).call(_context0) === '';
 };
 MoneyInput.isHighPrecision = (formValue, locale) => {
   process.env.NODE_ENV !== "production" ? utils.warning(!MoneyInput.isEmpty(formValue), 'MoneyValue.isHighPrecision may not be called with an empty money value.') : void 0;
   const moneyValue = MoneyInput.convertToMoneyValue(formValue, locale);
-  return (moneyValue === null || moneyValue === void 0 ? void 0 : moneyValue.type) === 'highPrecision';
+  return moneyValue?.type === 'highPrecision';
 };
 MoneyInput.isTouched = touched => Boolean(touched && touched.currencyCode && touched.amount);
 var MoneyInput$1 = MoneyInput;
 
 // NOTE: This string will be replaced on build time with the package version.
-var version = "20.5.0";
+var version = "20.6.1";
 
 exports["default"] = MoneyInput$1;
 exports.version = version;

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

@@ -22,7 +22,6 @@ var _parseInt = require('@babel/runtime-corejs3/core-js-stable/parse-int');
 var _trimInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/trim');
 var _mapInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/map');
 var _findInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/find');
-var _concatInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/concat');
 var react$1 = require('react');
 var ReactDOM = require('react-dom');
 require('lodash/has');
@@ -58,7 +57,6 @@ var _parseInt__default = /*#__PURE__*/_interopDefault(_parseInt);
 var _trimInstanceProperty__default = /*#__PURE__*/_interopDefault(_trimInstanceProperty);
 var _mapInstanceProperty__default = /*#__PURE__*/_interopDefault(_mapInstanceProperty);
 var _findInstanceProperty__default = /*#__PURE__*/_interopDefault(_findInstanceProperty);
-var _concatInstanceProperty__default = /*#__PURE__*/_interopDefault(_concatInstanceProperty);
 var ReactDOM__default = /*#__PURE__*/_interopDefault(ReactDOM);
 var Select__default = /*#__PURE__*/_interopDefault(Select);
 var Tooltip__default = /*#__PURE__*/_interopDefault(Tooltip);
@@ -779,7 +777,7 @@ var messages = reactIntl.defineMessages({
 const _excluded = ["id"],
   _excluded2 = ["currencies", "horizontalConstraint", "menuPortalZIndex"];
 function ownKeys(e, r) { var t = _Object$keys__default["default"](e); if (_Object$getOwnPropertySymbols__default["default"]) { var o = _Object$getOwnPropertySymbols__default["default"](e); r && (o = _filterInstanceProperty__default["default"](o).call(o, function (r) { return _Object$getOwnPropertyDescriptor__default["default"](e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var _context11, _context12; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty__default["default"](_context11 = ownKeys(Object(t), !0)).call(_context11, function (r) { _defineProperty(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](e, _Object$getOwnPropertyDescriptors__default["default"](t)) : _forEachInstanceProperty__default["default"](_context12 = ownKeys(Object(t))).call(_context12, function (r) { _Object$defineProperty__default["default"](e, r, _Object$getOwnPropertyDescriptor__default["default"](t, r)); }); } return e; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var _context1, _context10; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty__default["default"](_context1 = ownKeys(Object(t), !0)).call(_context1, function (r) { _defineProperty(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](e, _Object$getOwnPropertyDescriptors__default["default"](t)) : _forEachInstanceProperty__default["default"](_context10 = ownKeys(Object(t))).call(_context10, function (r) { _Object$defineProperty__default["default"](e, r, _Object$getOwnPropertyDescriptor__default["default"](t, r)); }); } return e; }
 const TooltipWrapper = /*#__PURE__*/_styled__default["default"]("div", {
   target: "e1u90zjc0"
 } )({
@@ -787,8 +785,8 @@ const TooltipWrapper = /*#__PURE__*/_styled__default["default"]("div", {
   styles: "display:flex"
 } );
 const moneyInputSequentialId = utils.createSequentialId('money-input-');
-const getPortalId = id => "portal-".concat(id);
-const getPortalNode = id => document.querySelector("#".concat(getPortalId(id)));
+const getPortalId = id => `portal-${id}`;
+const getPortalNode = id => document.querySelector(`#${getPortalId(id)}`);
 const Portal = props => {
   const domNode = getPortalNode(props.id);
   if (domNode) {
@@ -832,15 +830,15 @@ const createCurrencySelectStyles = _ref4 => {
   });
   return _objectSpread(_objectSpread({}, selectStyles), {}, {
     control: (base, state) => _objectSpread(_objectSpread({}, selectStyles.control(base, state)), {}, {
-      padding: "0 ".concat(designSystem.designTokens.spacing25),
+      padding: `0 ${designSystem.designTokens.spacing25}`,
       borderTopRightRadius: '0',
       borderBottomRightRadius: '0',
       borderRight: '0',
       minWidth: '80px',
       height: '100%',
       borderColor: (() => {
-        if (isDisabled) return "".concat(designSystem.designTokens.borderColorForInputWhenDisabled, " !important");
-        if (isReadOnly) return "".concat(designSystem.designTokens.borderColorForInputWhenReadonly, " !important");
+        if (isDisabled) return `${designSystem.designTokens.borderColorForInputWhenDisabled} !important`;
+        if (isReadOnly) return `${designSystem.designTokens.borderColorForInputWhenReadonly} !important`;
         if (hasError) return designSystem.designTokens.borderColorForInputWhenError;
         if (hasWarning) return designSystem.designTokens.borderColorForInputWhenWarning;
         if (currencyHasFocus) {
@@ -850,7 +848,7 @@ const createCurrencySelectStyles = _ref4 => {
       })(),
       cursor: (() => {
         if (isDisabled) return 'not-allowed';
-        if (isReadOnly) return "default";
+        if (isReadOnly) return `default`;
         return 'pointer';
       })(),
       backgroundColor: (() => {
@@ -963,7 +961,7 @@ const parseRawAmountToNumber = (rawAmount, locale) => {
   }
   fractionsSeparator = fractionsSeparator === '.' ? '\\.' : fractionsSeparator; // here we escape the '.' to use it as regex
   // The raw amount with only one sparator
-  const normalizedAmount = String(rawAmount).replace(new RegExp("[^-0-9".concat(fractionsSeparator, "]"), 'g'), '') // we just keep the numbers and the fraction symbol
+  const normalizedAmount = String(rawAmount).replace(new RegExp(`[^-0-9${fractionsSeparator}]`, 'g'), '') // we just keep the numbers and the fraction symbol
   .replace(fractionsSeparator, '.'); // then we change whatever `fractionsSeparator` was to `.` so we can parse it as float
 
   return _parseFloat__default["default"](normalizedAmount);
@@ -1036,15 +1034,12 @@ const createMoneyValue = (rawAmount, locale, currencyCode) => {
     fractionDigits: currency.fractionDigits
   };
 };
-const createEmptyMoneyValue = currencyCode => {
-  var _allCurrencies$curren;
-  return {
-    type: 'centPrecision',
-    currencyCode,
-    centAmount: NaN,
-    fractionDigits: (_allCurrencies$curren = allCurrencies[currencyCode].fractionDigits) !== null && _allCurrencies$curren !== void 0 ? _allCurrencies$curren : 2
-  };
-};
+const createEmptyMoneyValue = currencyCode => ({
+  type: 'centPrecision',
+  currencyCode,
+  centAmount: NaN,
+  fractionDigits: allCurrencies[currencyCode].fractionDigits ?? 2
+});
 const getAmountAsNumberFromMoneyValue = moneyValue => moneyValue.type === 'highPrecision' ? moneyValue.preciseAmount / 10 ** moneyValue.fractionDigits : moneyValue.centAmount / 10 ** allCurrencies[moneyValue.currencyCode].fractionDigits;
 
 // gets called with a string and should return a formatted string
@@ -1057,8 +1052,8 @@ const formatAmount = (rawAmount, locale, currencyCode) => {
     minimumFractionDigits: fractionDigits
   });
 };
-const getAmountInputName = name => name ? "".concat(name, ".amount") : undefined;
-const getCurrencyDropdownName = name => name ? "".concat(name, ".currencyCode") : undefined;
+const getAmountInputName = name => name ? `${name}.amount` : undefined;
+const getCurrencyDropdownName = name => name ? `${name}.currencyCode` : undefined;
 var _ref = {
   name: "pw7jst",
   styles: "position:relative;width:100%"
@@ -1068,7 +1063,6 @@ var _ref2 = {
   styles: "font-family:inherit;width:100%;position:relative;display:flex"
 } ;
 const MoneyInput = _ref5 => {
-  var _context8, _context9;
   let _ref5$currencies = _ref5.currencies,
     currencies = _ref5$currencies === void 0 ? [] : _ref5$currencies,
     _ref5$horizontalConst = _ref5.horizontalConstraint,
@@ -1126,20 +1120,18 @@ const MoneyInput = _ref5 => {
             value: formattedAmount
           }
         };
-        onChange === null || onChange === void 0 || onChange(fakeEvent);
+        onChange?.(fakeEvent);
       }
     }
   }, [intl.locale, onChange, moneyInputId, props.name, props.value.amount, props.value.currencyCode, toggleAmountHasFocus]);
   const handleAmountChange = react$1.useCallback(event => {
-    var _event$target;
-    if (utils.isNumberish((_event$target = event.target) === null || _event$target === void 0 ? void 0 : _event$target.value)) {
-      var _event$target2;
-      onChange === null || onChange === void 0 || onChange({
+    if (utils.isNumberish(event.target?.value)) {
+      onChange?.({
         persist: () => {},
         target: {
           id: MoneyInput.getAmountInputId(moneyInputId),
           name: getAmountInputName(props.name),
-          value: (_event$target2 = event.target) === null || _event$target2 === void 0 ? void 0 : _event$target2.value
+          value: event.target?.value
         }
       });
     }
@@ -1147,7 +1139,7 @@ const MoneyInput = _ref5 => {
   const handleCurrencyChange = react$1.useCallback(option => {
     const currencyCode = option.value;
     if (props.value.currencyCode !== currencyCode) {
-      var _context6, _amountInputRef$curre;
+      var _context6;
       // When the user changes from a currency with 3 fraction digits to
       // a currency with 2 fraction digits, and when the input value was
       // "9.000" (9), then it should change to "9.00" to reflect the new
@@ -1169,11 +1161,11 @@ const MoneyInput = _ref5 => {
           value: currencyCode || ''
         }
       };
-      onChange === null || onChange === void 0 || onChange(fakeCurrencyEvent);
+      onChange?.(fakeCurrencyEvent);
 
       // change amount if necessary
       if (props.value.amount !== nextAmount) {
-        onChange === null || onChange === void 0 || onChange({
+        onChange?.({
           persist: () => {},
           target: {
             id: MoneyInput.getAmountInputId(moneyInputId),
@@ -1182,7 +1174,7 @@ const MoneyInput = _ref5 => {
           }
         });
       }
-      (_amountInputRef$curre = amountInputRef.current) === null || _amountInputRef$curre === void 0 || _amountInputRef$curre.focus();
+      amountInputRef.current?.focus();
     }
   }, [intl.locale, onChange, moneyInputId, props.name, props.value.amount, props.value.currencyCode]);
   const handleCurrencyFocus = react$1.useCallback(() => {
@@ -1226,10 +1218,9 @@ const MoneyInput = _ref5 => {
   const isHighPrecision = !MoneyInput.isEmpty(props.value) && MoneyInput.isHighPrecision(props.value, intl.locale);
   const onBlur = props.onBlur;
   const handleContainerBlur = react$1.useCallback(event => {
-    var _containerRef$current;
     // ensures that both fields are marked as touched when one of them
     // is blurred
-    if (typeof onBlur === 'function' && !((_containerRef$current = containerRef.current) !== null && _containerRef$current !== void 0 && _containerRef$current.contains(event.relatedTarget))) {
+    if (typeof onBlur === 'function' && !containerRef.current?.contains(event.relatedTarget)) {
       onBlur({
         target: {
           id: MoneyInput.getCurrencyDropdownId(moneyInputId),
@@ -1329,7 +1320,7 @@ const MoneyInput = _ref5 => {
               ,
               styles: {
                 body: {
-                  margin: _concatInstanceProperty__default["default"](_context8 = _concatInstanceProperty__default["default"](_context9 = "".concat(designSystem.designTokens.spacing20, " -")).call(_context9, designSystem.designTokens.spacing10, " ")).call(_context8, designSystem.designTokens.spacing20, " 0")
+                  margin: `${designSystem.designTokens.spacing20} -${designSystem.designTokens.spacing10} ${designSystem.designTokens.spacing20} 0`
                 }
               },
               title: intl.formatMessage(messages.highPrecision),
@@ -1351,8 +1342,8 @@ MoneyInput.displayName = 'MoneyInput';
 MoneyInput.getAmountInputId = getAmountInputName;
 MoneyInput.getCurrencyDropdownId = getCurrencyDropdownName;
 MoneyInput.convertToMoneyValue = (value, locale) => {
-  var _context0;
-  return createMoneyValue(typeof value.amount === 'string' ? _trimInstanceProperty__default["default"](_context0 = value.amount).call(_context0) : '', locale, value.currencyCode);
+  var _context8;
+  return createMoneyValue(typeof value.amount === 'string' ? _trimInstanceProperty__default["default"](_context8 = value.amount).call(_context8) : '', locale, value.currencyCode);
 };
 MoneyInput.parseMoneyValue = (moneyValue, locale) => {
   if (!moneyValue) return {
@@ -1368,18 +1359,18 @@ MoneyInput.parseMoneyValue = (moneyValue, locale) => {
   };
 };
 MoneyInput.isEmpty = formValue => {
-  var _context1, _context10;
-  return !formValue || _trimInstanceProperty__default["default"](_context1 = formValue.amount).call(_context1) === '' || _trimInstanceProperty__default["default"](_context10 = formValue.currencyCode).call(_context10) === '';
+  var _context9, _context0;
+  return !formValue || _trimInstanceProperty__default["default"](_context9 = formValue.amount).call(_context9) === '' || _trimInstanceProperty__default["default"](_context0 = formValue.currencyCode).call(_context0) === '';
 };
 MoneyInput.isHighPrecision = (formValue, locale) => {
   const moneyValue = MoneyInput.convertToMoneyValue(formValue, locale);
-  return (moneyValue === null || moneyValue === void 0 ? void 0 : moneyValue.type) === 'highPrecision';
+  return moneyValue?.type === 'highPrecision';
 };
 MoneyInput.isTouched = touched => Boolean(touched && touched.currencyCode && touched.amount);
 var MoneyInput$1 = MoneyInput;
 
 // NOTE: This string will be replaced on build time with the package version.
-var version = "20.5.0";
+var version = "20.6.1";
 
 exports["default"] = MoneyInput$1;
 exports.version = version;

package/dist/commercetools-uikit-money-input.esm.js

@@ -18,7 +18,6 @@ import _parseInt from '@babel/runtime-corejs3/core-js-stable/parse-int';
 import _trimInstanceProperty from '@babel/runtime-corejs3/core-js-stable/instance/trim';
 import _mapInstanceProperty from '@babel/runtime-corejs3/core-js-stable/instance/map';
 import _findInstanceProperty from '@babel/runtime-corejs3/core-js-stable/instance/find';
-import _concatInstanceProperty from '@babel/runtime-corejs3/core-js-stable/instance/concat';
 import { useRef, useCallback } from 'react';
 import ReactDOM from 'react-dom';
 import has from 'lodash/has';
@@ -750,7 +749,7 @@ var messages = defineMessages({
 const _excluded = ["id"],
   _excluded2 = ["currencies", "horizontalConstraint", "menuPortalZIndex"];
 function ownKeys(e, r) { var t = _Object$keys(e); if (_Object$getOwnPropertySymbols) { var o = _Object$getOwnPropertySymbols(e); r && (o = _filterInstanceProperty(o).call(o, function (r) { return _Object$getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var _context11, _context12; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty(_context11 = ownKeys(Object(t), !0)).call(_context11, function (r) { _defineProperty(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(e, _Object$getOwnPropertyDescriptors(t)) : _forEachInstanceProperty(_context12 = ownKeys(Object(t))).call(_context12, function (r) { _Object$defineProperty(e, r, _Object$getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var _context1, _context10; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty(_context1 = ownKeys(Object(t), !0)).call(_context1, function (r) { _defineProperty(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(e, _Object$getOwnPropertyDescriptors(t)) : _forEachInstanceProperty(_context10 = ownKeys(Object(t))).call(_context10, function (r) { _Object$defineProperty(e, r, _Object$getOwnPropertyDescriptor(t, r)); }); } return e; }
 function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
 const TooltipWrapper = /*#__PURE__*/_styled("div", process.env.NODE_ENV === "production" ? {
   target: "e1u90zjc0"
@@ -766,8 +765,8 @@ const TooltipWrapper = /*#__PURE__*/_styled("div", process.env.NODE_ENV === "pro
   toString: _EMOTION_STRINGIFIED_CSS_ERROR__
 });
 const moneyInputSequentialId = createSequentialId('money-input-');
-const getPortalId = id => "portal-".concat(id);
-const getPortalNode = id => document.querySelector("#".concat(getPortalId(id)));
+const getPortalId = id => `portal-${id}`;
+const getPortalNode = id => document.querySelector(`#${getPortalId(id)}`);
 const Portal = props => {
   const domNode = getPortalNode(props.id);
   if (domNode) {
@@ -811,15 +810,15 @@ const createCurrencySelectStyles = _ref4 => {
   });
   return _objectSpread(_objectSpread({}, selectStyles), {}, {
     control: (base, state) => _objectSpread(_objectSpread({}, selectStyles.control(base, state)), {}, {
-      padding: "0 ".concat(designTokens.spacing25),
+      padding: `0 ${designTokens.spacing25}`,
       borderTopRightRadius: '0',
       borderBottomRightRadius: '0',
       borderRight: '0',
       minWidth: '80px',
       height: '100%',
       borderColor: (() => {
-        if (isDisabled) return "".concat(designTokens.borderColorForInputWhenDisabled, " !important");
-        if (isReadOnly) return "".concat(designTokens.borderColorForInputWhenReadonly, " !important");
+        if (isDisabled) return `${designTokens.borderColorForInputWhenDisabled} !important`;
+        if (isReadOnly) return `${designTokens.borderColorForInputWhenReadonly} !important`;
         if (hasError) return designTokens.borderColorForInputWhenError;
         if (hasWarning) return designTokens.borderColorForInputWhenWarning;
         if (currencyHasFocus) {
@@ -829,7 +828,7 @@ const createCurrencySelectStyles = _ref4 => {
       })(),
       cursor: (() => {
         if (isDisabled) return 'not-allowed';
-        if (isReadOnly) return "default";
+        if (isReadOnly) return `default`;
         return 'pointer';
       })(),
       backgroundColor: (() => {
@@ -942,7 +941,7 @@ const parseRawAmountToNumber = (rawAmount, locale) => {
   }
   fractionsSeparator = fractionsSeparator === '.' ? '\\.' : fractionsSeparator; // here we escape the '.' to use it as regex
   // The raw amount with only one sparator
-  const normalizedAmount = String(rawAmount).replace(new RegExp("[^-0-9".concat(fractionsSeparator, "]"), 'g'), '') // we just keep the numbers and the fraction symbol
+  const normalizedAmount = String(rawAmount).replace(new RegExp(`[^-0-9${fractionsSeparator}]`, 'g'), '') // we just keep the numbers and the fraction symbol
   .replace(fractionsSeparator, '.'); // then we change whatever `fractionsSeparator` was to `.` so we can parse it as float
 
   return _parseFloat(normalizedAmount);
@@ -967,7 +966,7 @@ const createMoneyValue = (rawAmount, locale, currencyCode) => {
   if (!currency) return null;
   // The user may enter a value with a comma, dot, or apostrophe as the decimal separator.
   if (rawAmount.length === 0 || !isNumberish(rawAmount)) return null;
-  process.env.NODE_ENV !== "production" ? warning(locale || currency.fractionDigits !== 0, "MoneyInput: A locale must be provided when currency has no fraction digits (".concat(currencyCode, ")")) : void 0;
+  process.env.NODE_ENV !== "production" ? warning(locale || currency.fractionDigits !== 0, `MoneyInput: A locale must be provided when currency has no fraction digits (${currencyCode})`) : void 0;
   const amountAsNumber = parseRawAmountToNumber(rawAmount, locale);
   if (isNaN(amountAsNumber)) return null;
 
@@ -1016,15 +1015,12 @@ const createMoneyValue = (rawAmount, locale, currencyCode) => {
     fractionDigits: currency.fractionDigits
   };
 };
-const createEmptyMoneyValue = currencyCode => {
-  var _allCurrencies$curren;
-  return {
-    type: 'centPrecision',
-    currencyCode,
-    centAmount: NaN,
-    fractionDigits: (_allCurrencies$curren = allCurrencies[currencyCode].fractionDigits) !== null && _allCurrencies$curren !== void 0 ? _allCurrencies$curren : 2
-  };
-};
+const createEmptyMoneyValue = currencyCode => ({
+  type: 'centPrecision',
+  currencyCode,
+  centAmount: NaN,
+  fractionDigits: allCurrencies[currencyCode].fractionDigits ?? 2
+});
 const getAmountAsNumberFromMoneyValue = moneyValue => moneyValue.type === 'highPrecision' ? moneyValue.preciseAmount / 10 ** moneyValue.fractionDigits : moneyValue.centAmount / 10 ** allCurrencies[moneyValue.currencyCode].fractionDigits;
 
 // gets called with a string and should return a formatted string
@@ -1037,8 +1033,8 @@ const formatAmount = (rawAmount, locale, currencyCode) => {
     minimumFractionDigits: fractionDigits
   });
 };
-const getAmountInputName = name => name ? "".concat(name, ".amount") : undefined;
-const getCurrencyDropdownName = name => name ? "".concat(name, ".currencyCode") : undefined;
+const getAmountInputName = name => name ? `${name}.amount` : undefined;
+const getCurrencyDropdownName = name => name ? `${name}.currencyCode` : undefined;
 var _ref = process.env.NODE_ENV === "production" ? {
   name: "pw7jst",
   styles: "position:relative;width:100%"
@@ -1056,7 +1052,6 @@ var _ref2 = process.env.NODE_ENV === "production" ? {
   toString: _EMOTION_STRINGIFIED_CSS_ERROR__
 };
 const MoneyInput = _ref5 => {
-  var _context8, _context9;
   let _ref5$currencies = _ref5.currencies,
     currencies = _ref5$currencies === void 0 ? [] : _ref5$currencies,
     _ref5$horizontalConst = _ref5.horizontalConstraint,
@@ -1116,20 +1111,18 @@ const MoneyInput = _ref5 => {
             value: formattedAmount
           }
         };
-        onChange === null || onChange === void 0 || onChange(fakeEvent);
+        onChange?.(fakeEvent);
       }
     }
   }, [intl.locale, onChange, moneyInputId, props.name, props.value.amount, props.value.currencyCode, toggleAmountHasFocus]);
   const handleAmountChange = useCallback(event => {
-    var _event$target;
-    if (isNumberish((_event$target = event.target) === null || _event$target === void 0 ? void 0 : _event$target.value)) {
-      var _event$target2;
-      onChange === null || onChange === void 0 || onChange({
+    if (isNumberish(event.target?.value)) {
+      onChange?.({
         persist: () => {},
         target: {
           id: MoneyInput.getAmountInputId(moneyInputId),
           name: getAmountInputName(props.name),
-          value: (_event$target2 = event.target) === null || _event$target2 === void 0 ? void 0 : _event$target2.value
+          value: event.target?.value
         }
       });
     }
@@ -1137,7 +1130,7 @@ const MoneyInput = _ref5 => {
   const handleCurrencyChange = useCallback(option => {
     const currencyCode = option.value;
     if (props.value.currencyCode !== currencyCode) {
-      var _context6, _amountInputRef$curre;
+      var _context6;
       // When the user changes from a currency with 3 fraction digits to
       // a currency with 2 fraction digits, and when the input value was
       // "9.000" (9), then it should change to "9.00" to reflect the new
@@ -1159,11 +1152,11 @@ const MoneyInput = _ref5 => {
           value: currencyCode || ''
         }
       };
-      onChange === null || onChange === void 0 || onChange(fakeCurrencyEvent);
+      onChange?.(fakeCurrencyEvent);
 
       // change amount if necessary
       if (props.value.amount !== nextAmount) {
-        onChange === null || onChange === void 0 || onChange({
+        onChange?.({
           persist: () => {},
           target: {
             id: MoneyInput.getAmountInputId(moneyInputId),
@@ -1172,7 +1165,7 @@ const MoneyInput = _ref5 => {
           }
         });
       }
-      (_amountInputRef$curre = amountInputRef.current) === null || _amountInputRef$curre === void 0 || _amountInputRef$curre.focus();
+      amountInputRef.current?.focus();
     }
   }, [intl.locale, onChange, moneyInputId, props.name, props.value.amount, props.value.currencyCode]);
   const handleCurrencyFocus = useCallback(() => {
@@ -1216,10 +1209,9 @@ const MoneyInput = _ref5 => {
   const isHighPrecision = !MoneyInput.isEmpty(props.value) && MoneyInput.isHighPrecision(props.value, intl.locale);
   const onBlur = props.onBlur;
   const handleContainerBlur = useCallback(event => {
-    var _containerRef$current;
     // ensures that both fields are marked as touched when one of them
     // is blurred
-    if (typeof onBlur === 'function' && !((_containerRef$current = containerRef.current) !== null && _containerRef$current !== void 0 && _containerRef$current.contains(event.relatedTarget))) {
+    if (typeof onBlur === 'function' && !containerRef.current?.contains(event.relatedTarget)) {
       onBlur({
         target: {
           id: MoneyInput.getCurrencyDropdownId(moneyInputId),
@@ -1319,7 +1311,7 @@ const MoneyInput = _ref5 => {
               ,
               styles: {
                 body: {
-                  margin: _concatInstanceProperty(_context8 = _concatInstanceProperty(_context9 = "".concat(designTokens.spacing20, " -")).call(_context9, designTokens.spacing10, " ")).call(_context8, designTokens.spacing20, " 0")
+                  margin: `${designTokens.spacing20} -${designTokens.spacing10} ${designTokens.spacing20} 0`
                 }
               },
               title: intl.formatMessage(messages.highPrecision),
@@ -1341,8 +1333,8 @@ MoneyInput.displayName = 'MoneyInput';
 MoneyInput.getAmountInputId = getAmountInputName;
 MoneyInput.getCurrencyDropdownId = getCurrencyDropdownName;
 MoneyInput.convertToMoneyValue = (value, locale) => {
-  var _context0;
-  return createMoneyValue(typeof value.amount === 'string' ? _trimInstanceProperty(_context0 = value.amount).call(_context0) : '', locale, value.currencyCode);
+  var _context8;
+  return createMoneyValue(typeof value.amount === 'string' ? _trimInstanceProperty(_context8 = value.amount).call(_context8) : '', locale, value.currencyCode);
 };
 MoneyInput.parseMoneyValue = (moneyValue, locale) => {
   if (!moneyValue) return {
@@ -1365,18 +1357,18 @@ MoneyInput.parseMoneyValue = (moneyValue, locale) => {
   };
 };
 MoneyInput.isEmpty = formValue => {
-  var _context1, _context10;
-  return !formValue || _trimInstanceProperty(_context1 = formValue.amount).call(_context1) === '' || _trimInstanceProperty(_context10 = formValue.currencyCode).call(_context10) === '';
+  var _context9, _context0;
+  return !formValue || _trimInstanceProperty(_context9 = formValue.amount).call(_context9) === '' || _trimInstanceProperty(_context0 = formValue.currencyCode).call(_context0) === '';
 };
 MoneyInput.isHighPrecision = (formValue, locale) => {
   process.env.NODE_ENV !== "production" ? warning(!MoneyInput.isEmpty(formValue), 'MoneyValue.isHighPrecision may not be called with an empty money value.') : void 0;
   const moneyValue = MoneyInput.convertToMoneyValue(formValue, locale);
-  return (moneyValue === null || moneyValue === void 0 ? void 0 : moneyValue.type) === 'highPrecision';
+  return moneyValue?.type === 'highPrecision';
 };
 MoneyInput.isTouched = touched => Boolean(touched && touched.currencyCode && touched.amount);
 var MoneyInput$1 = MoneyInput;
 
 // NOTE: This string will be replaced on build time with the package version.
-var version = "20.5.0";
+var version = "20.6.1";
 
 export { MoneyInput$1 as default, version };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@commercetools-uikit/money-input",
   "description": "A controlled input component for money values with validation states.",
-  "version": "20.5.0",
+  "version": "20.6.1",
   "bugs": "https://github.com/commercetools/ui-kit/issues",
   "repository": {
     "type": "git",
@@ -9,7 +9,13 @@
     "directory": "packages/components/inputs/money-input"
   },
   "homepage": "https://uikit.commercetools.com",
-  "keywords": ["javascript", "typescript", "design-system", "react", "uikit"],
+  "keywords": [
+    "javascript",
+    "typescript",
+    "design-system",
+    "react",
+    "uikit"
+  ],
   "license": "MIT",
   "publishConfig": {
     "access": "public"
@@ -17,26 +23,29 @@
   "sideEffects": false,
   "main": "dist/commercetools-uikit-money-input.cjs.js",
   "module": "dist/commercetools-uikit-money-input.esm.js",
-  "files": ["dist"],
+  "files": [
+    "dist"
+  ],
   "dependencies": {
     "@babel/runtime": "^7.20.13",
     "@babel/runtime-corejs3": "^7.20.13",
-    "@commercetools-uikit/constraints": "20.5.0",
-    "@commercetools-uikit/design-system": "20.5.0",
-    "@commercetools-uikit/hooks": "20.5.0",
-    "@commercetools-uikit/icons": "20.5.0",
-    "@commercetools-uikit/input-utils": "20.5.0",
-    "@commercetools-uikit/select-utils": "20.5.0",
-    "@commercetools-uikit/tooltip": "20.5.0",
-    "@commercetools-uikit/utils": "20.5.0",
     "@emotion/react": "^11.10.5",
     "@emotion/styled": "^11.10.5",
-    "lodash": "4.17.23",
-    "react-select": "5.10.2"
+    "lodash": "4.18.1",
+    "react-select": "5.10.2",
+    "@commercetools-uikit/constraints": "^20.6.1",
+    "@commercetools-uikit/design-system": "^20.6.1",
+    "@commercetools-uikit/hooks": "^20.6.1",
+    "@commercetools-uikit/icons": "^20.6.1",
+    "@commercetools-uikit/input-utils": "^20.6.1",
+    "@commercetools-uikit/select-utils": "^20.6.1",
+    "@commercetools-uikit/tooltip": "^20.6.1",
+    "@commercetools-uikit/utils": "^20.6.1"
   },
   "devDependencies": {
-    "react": "19.2.0",
-    "react-dom": "19.2.0",
+    "prop-types": "^15.8.1",
+    "react": "19.2.6",
+    "react-dom": "19.2.6",
     "react-intl": "^7.1.4"
   },
   "peerDependencies": {
@@ -44,4 +53,4 @@
     "react-dom": "19.x",
     "react-intl": "7.x"
   }
-}
+}