@commercetools-uikit/money-input 12.2.9 → 13.0.3

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

@@ -10,11 +10,11 @@ var _forEachInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/in
 var _Object$getOwnPropertyDescriptors = require('@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors');
 var _Object$defineProperties = require('@babel/runtime-corejs3/core-js-stable/object/define-properties');
 var _Object$defineProperty = require('@babel/runtime-corejs3/core-js-stable/object/define-property');
-require('@babel/runtime-corejs3/helpers/typeof');
 var _slicedToArray = require('@babel/runtime-corejs3/helpers/slicedToArray');
 var _defineProperty = require('@babel/runtime-corejs3/helpers/defineProperty');
 var _objectWithoutProperties = require('@babel/runtime-corejs3/helpers/objectWithoutProperties');
 var _styled = require('@emotion/styled/base');
+var _pt = require('prop-types');
 var _lastIndexOfInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/last-index-of');
 var _parseFloat = require('@babel/runtime-corejs3/core-js-stable/parse-float');
 var _Math$trunc = require('@babel/runtime-corejs3/core-js-stable/math/trunc');
@@ -26,9 +26,7 @@ var _findInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/insta
 var _concatInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/concat');
 var react$1 = require('react');
 var ReactDOM = require('react-dom');
-require('prop-types');
 require('lodash/has');
-require('react-required-if');
 var Select = require('react-select');
 var reactIntl = require('react-intl');
 var react = require('@emotion/react');
@@ -53,6 +51,7 @@ var _Object$getOwnPropertyDescriptors__default = /*#__PURE__*/_interopDefault(_O
 var _Object$defineProperties__default = /*#__PURE__*/_interopDefault(_Object$defineProperties);
 var _Object$defineProperty__default = /*#__PURE__*/_interopDefault(_Object$defineProperty);
 var _styled__default = /*#__PURE__*/_interopDefault(_styled);
+var _pt__default = /*#__PURE__*/_interopDefault(_pt);
 var _lastIndexOfInstanceProperty__default = /*#__PURE__*/_interopDefault(_lastIndexOfInstanceProperty);
 var _parseFloat__default = /*#__PURE__*/_interopDefault(_parseFloat);
 var _Math$trunc__default = /*#__PURE__*/_interopDefault(_Math$trunc);
@@ -753,17 +752,19 @@ var messages = reactIntl.defineMessages({
 
 var _excluded = ["id"];
 
-function ownKeys(object, enumerableOnly) { var keys = _Object$keys__default["default"](object); if (_Object$getOwnPropertySymbols__default["default"]) { var symbols = _Object$getOwnPropertySymbols__default["default"](object); if (enumerableOnly) { symbols = _filterInstanceProperty__default["default"](symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor__default["default"](object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+function ownKeys(object, enumerableOnly) { var keys = _Object$keys__default["default"](object); if (_Object$getOwnPropertySymbols__default["default"]) { var symbols = _Object$getOwnPropertySymbols__default["default"](object); enumerableOnly && (symbols = _filterInstanceProperty__default["default"](symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor__default["default"](object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { var _context14; _forEachInstanceProperty__default["default"](_context14 = ownKeys(Object(source), true)).call(_context14, function (key) { _defineProperty(target, key, source[key]); }); } else if (_Object$getOwnPropertyDescriptors__default["default"]) { _Object$defineProperties__default["default"](target, _Object$getOwnPropertyDescriptors__default["default"](source)); } else { var _context15; _forEachInstanceProperty__default["default"](_context15 = ownKeys(Object(source))).call(_context15, function (key) { _Object$defineProperty__default["default"](target, key, _Object$getOwnPropertyDescriptor__default["default"](source, key)); }); } } return target; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var _context14, _context15; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty__default["default"](_context14 = ownKeys(Object(source), !0)).call(_context14, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](target, _Object$getOwnPropertyDescriptors__default["default"](source)) : _forEachInstanceProperty__default["default"](_context15 = ownKeys(Object(source))).call(_context15, function (key) { _Object$defineProperty__default["default"](target, key, _Object$getOwnPropertyDescriptor__default["default"](source, key)); }); } return target; }
 
 var TooltipWrapper = _styled__default["default"]("div", {
-  target: "elvjg270"
+  target: "e1u90zjc0"
 } )({
   name: "zjik7",
   styles: "display:flex"
 } );
 
+var moneyInputSequentialId = utils.createSequentialId('money-input-');
+
 var getPortalId = function getPortalId(id) {
   return "portal-".concat(id);
 };
@@ -774,7 +775,18 @@ var getPortalNode = function getPortalNode(id) {
 
 var Portal = function Portal(props) {
   var domNode = getPortalNode(props.id);
-  return /*#__PURE__*/ReactDOM__default["default"].createPortal(props.children, domNode);
+
+  if (domNode) {
+    return /*#__PURE__*/ReactDOM__default["default"].createPortal(props.children, domNode);
+  }
+
+  return null;
+};
+
+Portal.propTypes = {
+  id: _pt__default["default"].string.isRequired,
+  children: _pt__default["default"].node,
+  isDisabled: _pt__default["default"].bool
 };
 
 var CurrencyLabel = function CurrencyLabel(props) {
@@ -785,8 +797,8 @@ var CurrencyLabel = function CurrencyLabel(props) {
   });
 };
 
-CurrencyLabel.displayName = 'CurrencyLabel';
 CurrencyLabel.propTypes = {};
+CurrencyLabel.displayName = 'CurrencyLabel';
 
 var _SingleValue = function SingleValue(_ref3) {
   var id = _ref3.id,
@@ -800,9 +812,10 @@ var _SingleValue = function SingleValue(_ref3) {
   }));
 };
 
+_SingleValue.propTypes = {};
 _SingleValue.displayName = 'SingleValue';
-_SingleValue.propTypes = {}; // overwrite styles of createSelectStyles
 
+// overwrite styles of createSelectStyles
 var createCurrencySelectStyles = function createCurrencySelectStyles(_ref4, theme) {
   var hasWarning = _ref4.hasWarning,
       hasError = _ref4.hasError,
@@ -948,7 +961,7 @@ var parseRawAmountToNumber = function parseRawAmountToNumber(rawAmount, locale)
   var normalizedAmount = String(rawAmount).replace(new RegExp("[^0-9".concat(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, 10);
+  return _parseFloat__default["default"](normalizedAmount);
 }; // Turns the user input into a value the MoneyInput can pass up through onChange
 // In case the number of fraction digits contained in "amount" exceeds the
 // number of fraction digits the currency uses, it will emit a price of
@@ -1043,6 +1056,12 @@ var getCurrencyDropdownName = function getCurrencyDropdownName(name) {
   return name ? "".concat(name, ".currencyCode") : undefined;
 };
 
+var defaultProps = {
+  currencies: [],
+  horizontalConstraint: 'scale',
+  menuPortalZIndex: 1
+};
+
 var _ref = {
   name: "pw7jst",
   styles: "position:relative;width:100%"
@@ -1068,18 +1087,22 @@ var MoneyInput = function MoneyInput(props) {
       amountHasFocus = _useToggleState4[0],
       toggleAmountHasFocus = _useToggleState4[1];
 
-  var containerRef = react$1.useRef();
-  var amountInputRef = react$1.useRef();
+  var containerRef = react$1.useRef(null);
+  var amountInputRef = react$1.useRef(null);
+  var moneyInputId = hooks.useFieldId(props.id, moneyInputSequentialId);
+
+  if (!props.isReadOnly) ;
+
   var onFocus = props.onFocus;
   var handleAmountFocus = react$1.useCallback(function () {
     if (onFocus) onFocus({
       target: {
-        id: MoneyInput.getAmountInputId(props.id),
+        id: MoneyInput.getAmountInputId(moneyInputId),
         name: getAmountInputName(props.name)
       }
     });
     toggleAmountHasFocus(true);
-  }, [toggleAmountHasFocus, onFocus, props.id, props.name]);
+  }, [toggleAmountHasFocus, onFocus, moneyInputId, props.name]);
   var onChange = props.onChange;
   var handleAmountBlur = react$1.useCallback(function () {
     var _context5;
@@ -1096,10 +1119,9 @@ var MoneyInput = function MoneyInput(props) {
       if (String(formattedAmount) !== amount) {
         // We need to emit an event with the now formatted value
         var fakeEvent = {
-          // eslint-disable-next-line @typescript-eslint/no-empty-function
           persist: function persist() {},
           target: {
-            id: MoneyInput.getAmountInputId(props.id),
+            id: MoneyInput.getAmountInputId(moneyInputId),
             name: getAmountInputName(props.name),
             value: formattedAmount
           }
@@ -1107,25 +1129,24 @@ var MoneyInput = function MoneyInput(props) {
         onChange(fakeEvent);
       }
     }
-  }, [intl.locale, onChange, props.id, props.name, props.value.amount, props.value.currencyCode, toggleAmountHasFocus]);
+  }, [intl.locale, onChange, moneyInputId, props.name, props.value.amount, props.value.currencyCode, toggleAmountHasFocus]);
   var handleAmountChange = react$1.useCallback(function (event) {
     if (utils.isNumberish(event.target.value)) {
       onChange({
-        // eslint-disable-next-line @typescript-eslint/no-empty-function
         persist: function persist() {},
         target: {
-          id: MoneyInput.getAmountInputId(props.id),
+          id: MoneyInput.getAmountInputId(moneyInputId),
           name: getAmountInputName(props.name),
           value: event.target.value
         }
       });
     }
-  }, [onChange, props.id, props.name]);
+  }, [onChange, moneyInputId, props.name]);
   var handleCurrencyChange = react$1.useCallback(function (option) {
     var currencyCode = option.value;
 
     if (props.value.currencyCode !== currencyCode) {
-      var _context6;
+      var _context6, _amountInputRef$curre;
 
       // When the user changes from a currency with 3 fraction digits to
       // a currency with 2 fraction digits, and when the input value was
@@ -1137,13 +1158,12 @@ var MoneyInput = function MoneyInput(props) {
       // or while the amount is invalid. In these cases, we don't attempt to
       // format the amount.
 
-      var nextAmount = isNaN(formattedAmount) ? props.value.amount : formattedAmount; // change currency code
+      var nextAmount = isNaN(Number(formattedAmount)) ? props.value.amount : formattedAmount; // change currency code
 
       var fakeCurrencyEvent = {
-        // eslint-disable-next-line @typescript-eslint/no-empty-function
         persist: function persist() {},
         target: {
-          id: MoneyInput.getCurrencyDropdownId(props.id),
+          id: MoneyInput.getCurrencyDropdownId(moneyInputId),
           name: getCurrencyDropdownName(props.name),
           value: currencyCode || ''
         }
@@ -1152,28 +1172,27 @@ var MoneyInput = function MoneyInput(props) {
 
       if (props.value.amount !== nextAmount) {
         onChange({
-          // eslint-disable-next-line @typescript-eslint/no-empty-function
           persist: function persist() {},
           target: {
-            id: MoneyInput.getAmountInputId(props.id),
+            id: MoneyInput.getAmountInputId(moneyInputId),
             name: getAmountInputName(props.name),
             value: nextAmount
           }
         });
       }
 
-      amountInputRef.current.focus();
+      (_amountInputRef$curre = amountInputRef.current) === null || _amountInputRef$curre === void 0 ? void 0 : _amountInputRef$curre.focus();
     }
-  }, [intl.locale, onChange, props.id, props.name, props.value.amount, props.value.currencyCode]);
+  }, [intl.locale, onChange, moneyInputId, props.name, props.value.amount, props.value.currencyCode]);
   var handleCurrencyFocus = react$1.useCallback(function () {
     if (onFocus) onFocus({
       target: {
-        id: MoneyInput.getCurrencyDropdownId(props.id),
+        id: MoneyInput.getCurrencyDropdownId(moneyInputId),
         name: getCurrencyDropdownName(props.name)
       }
     });
     toggleCurrencyHasFocus(true);
-  }, [onFocus, toggleCurrencyHasFocus, props.name, props.id]);
+  }, [onFocus, toggleCurrencyHasFocus, props.name, moneyInputId]);
   var handleCurrencyBlur = react$1.useCallback(function () {
     toggleCurrencyHasFocus(false);
   }, [toggleCurrencyHasFocus]);
@@ -1213,27 +1232,28 @@ var MoneyInput = function MoneyInput(props) {
     return null;
   }();
 
-  var id = MoneyInput.getCurrencyDropdownId(props.id);
   var isHighPrecision = !MoneyInput.isEmpty(props.value) && MoneyInput.isHighPrecision(props.value, intl.locale);
   var onBlur = props.onBlur;
   var handleContainerBlur = react$1.useCallback(function (event) {
+    var _containerRef$current;
+
     // ensures that both fields are marked as touched when one of them
     // is blurred
-    if (typeof onBlur === 'function' && !containerRef.current.contains(event.relatedTarget)) {
+    if (typeof onBlur === 'function' && !((_containerRef$current = containerRef.current) !== null && _containerRef$current !== void 0 && _containerRef$current.contains(event.relatedTarget))) {
       onBlur({
         target: {
-          id: MoneyInput.getCurrencyDropdownId(props.id),
+          id: MoneyInput.getCurrencyDropdownId(moneyInputId),
           name: getCurrencyDropdownName(props.name)
         }
       });
       onBlur({
         target: {
-          id: MoneyInput.getAmountInputId(props.id),
+          id: MoneyInput.getAmountInputId(moneyInputId),
           name: getAmountInputName(props.name)
         }
       });
     }
-  }, [onBlur, props.id, props.name]);
+  }, [onBlur, moneyInputId, props.name]);
   var TooltipPortal = react$1.useCallback(function (remainingProps) {
     return jsxRuntime.jsx(Portal, _objectSpread(_objectSpread({}, remainingProps), {}, {
       id: props.id
@@ -1247,29 +1267,25 @@ var MoneyInput = function MoneyInput(props) {
       "data-testid": "money-input-container",
       onBlur: handleContainerBlur,
       children: [hasNoCurrencies ? jsxRuntime.jsx(CurrencyLabel, {
-        id: MoneyInput.getAmountInputId(props.id),
+        id: MoneyInput.getAmountInputId(moneyInputId),
         isDisabled: props.isDisabled,
         children: option && option.label
       }) : jsxRuntime.jsx(Select__default["default"], {
-        inputId: id,
+        inputId: MoneyInput.getCurrencyDropdownId(moneyInputId),
         name: getCurrencyDropdownName(props.name),
         value: option,
         isDisabled: props.isDisabled,
         isSearchable: false,
         components: {
-          // eslint-disable-next-line react/display-name
           SingleValue: function SingleValue(innerProps) {
             return jsxRuntime.jsx(_SingleValue, _objectSpread(_objectSpread({}, innerProps), {}, {
-              id: id
+              id: MoneyInput.getCurrencyDropdownId(moneyInputId)
             }));
           },
-          // eslint-disable-next-line react/display-name
           Input: function Input(ownProps) {
-            return (// eslint-disable-next-line react/prop-types
-              jsxRuntime.jsx(Select.components.Input, _objectSpread(_objectSpread({}, ownProps), {}, {
-                readOnly: props.isReadOnly
-              }))
-            );
+            return jsxRuntime.jsx(Select.components.Input, _objectSpread(_objectSpread({}, ownProps), {}, {
+              readOnly: props.isReadOnly
+            }));
           },
           DropdownIndicator: selectUtils.DropdownIndicator
         },
@@ -1287,7 +1303,7 @@ var MoneyInput = function MoneyInput(props) {
         css: _ref,
         children: [jsxRuntime.jsx("input", _objectSpread({
           ref: amountInputRef,
-          id: MoneyInput.getAmountInputId(props.id),
+          id: MoneyInput.getAmountInputId(moneyInputId),
           autoComplete: props.autoComplete,
           name: getAmountInputName(props.name),
           type: "text",
@@ -1338,6 +1354,7 @@ var MoneyInput = function MoneyInput(props) {
   });
 };
 
+MoneyInput.propTypes = {};
 MoneyInput.displayName = 'MoneyInput';
 MoneyInput.getAmountInputId = getAmountInputName;
 MoneyInput.getCurrencyDropdownId = getCurrencyDropdownName;
@@ -1377,16 +1394,11 @@ MoneyInput.isTouched = function (touched) {
   return Boolean(touched && touched.currencyCode && touched.amount);
 };
 
-MoneyInput.propTypes = {};
-MoneyInput.defaultProps = {
-  currencies: [],
-  horizontalConstraint: 'scale',
-  menuPortalZIndex: 1
-};
+MoneyInput.defaultProps = defaultProps;
 var MoneyInput$1 = MoneyInput;
 
 // NOTE: This string will be replaced on build time with the package version.
-var version = "12.2.9";
+var version = "13.0.3";
 
 exports["default"] = MoneyInput$1;
 exports.version = version;