@commercetools-uikit/money-input 20.4.0 → 20.6.0

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);
@@ -727,6 +725,25 @@ const currencies = {
   },
   ZWR: {
     fractionDigits: 2
+  },
+  // Zero-fraction variants (non-ISO): base currency with 0 decimal places.
+  CZK0: {
+    fractionDigits: 0
+  },
+  HUF0: {
+    fractionDigits: 0
+  },
+  ILS0: {
+    fractionDigits: 0
+  },
+  KZT0: {
+    fractionDigits: 0
+  },
+  TRY0: {
+    fractionDigits: 0
+  },
+  TWD0: {
+    fractionDigits: 0
   }
 };
 var allCurrencies = currencies;
@@ -760,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"
 } )({
@@ -768,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) {
@@ -813,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) {
@@ -831,7 +848,7 @@ const createCurrencySelectStyles = _ref4 => {
       })(),
       cursor: (() => {
         if (isDisabled) return 'not-allowed';
-        if (isReadOnly) return "default";
+        if (isReadOnly) return `default`;
         return 'pointer';
       })(),
       backgroundColor: (() => {
@@ -944,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);
@@ -1021,7 +1038,7 @@ const createEmptyMoneyValue = currencyCode => ({
   type: 'centPrecision',
   currencyCode,
   centAmount: NaN,
-  fractionDigits: 2
+  fractionDigits: allCurrencies[currencyCode].fractionDigits ?? 2
 });
 const getAmountAsNumberFromMoneyValue = moneyValue => moneyValue.type === 'highPrecision' ? moneyValue.preciseAmount / 10 ** moneyValue.fractionDigits : moneyValue.centAmount / 10 ** allCurrencies[moneyValue.currencyCode].fractionDigits;
 
@@ -1035,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%"
@@ -1046,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,
@@ -1104,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
         }
       });
     }
@@ -1125,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
@@ -1147,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),
@@ -1160,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(() => {
@@ -1204,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),
@@ -1307,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),
@@ -1329,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 {
@@ -1346,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.4.0";
+var version = "20.6.0";
 
 exports["default"] = MoneyInput$1;
 exports.version = version;