@commercetools-uikit/money-input 13.0.1 → 13.0.2

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

@@ -763,6 +763,8 @@ var TooltipWrapper = _styled__default["default"]("div", {
   styles: "display:flex"
 } );
 
+var moneyInputSequentialId = utils.createSequentialId('money-input-');
+
 var getPortalId = function getPortalId(id) {
   return "portal-".concat(id);
 };
@@ -1087,6 +1089,7 @@ var MoneyInput = function MoneyInput(props) {
 
   var containerRef = react$1.useRef(null);
   var amountInputRef = react$1.useRef(null);
+  var moneyInputId = hooks.useFieldId(props.id, moneyInputSequentialId);
 
   if (!props.isReadOnly) ;
 
@@ -1094,12 +1097,12 @@ var MoneyInput = function MoneyInput(props) {
   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;
@@ -1118,7 +1121,7 @@ var MoneyInput = function MoneyInput(props) {
         var fakeEvent = {
           persist: function persist() {},
           target: {
-            id: MoneyInput.getAmountInputId(props.id),
+            id: MoneyInput.getAmountInputId(moneyInputId),
             name: getAmountInputName(props.name),
             value: formattedAmount
           }
@@ -1126,19 +1129,19 @@ 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({
         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;
 
@@ -1160,7 +1163,7 @@ var MoneyInput = function MoneyInput(props) {
       var fakeCurrencyEvent = {
         persist: function persist() {},
         target: {
-          id: MoneyInput.getCurrencyDropdownId(props.id),
+          id: MoneyInput.getCurrencyDropdownId(moneyInputId),
           name: getCurrencyDropdownName(props.name),
           value: currencyCode || ''
         }
@@ -1171,7 +1174,7 @@ var MoneyInput = function MoneyInput(props) {
         onChange({
           persist: function persist() {},
           target: {
-            id: MoneyInput.getAmountInputId(props.id),
+            id: MoneyInput.getAmountInputId(moneyInputId),
             name: getAmountInputName(props.name),
             value: nextAmount
           }
@@ -1180,16 +1183,16 @@ var MoneyInput = function MoneyInput(props) {
 
       (_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]);
@@ -1229,7 +1232,6 @@ 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) {
@@ -1240,18 +1242,18 @@ var MoneyInput = function MoneyInput(props) {
     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
@@ -1265,11 +1267,11 @@ 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,
@@ -1277,7 +1279,7 @@ var MoneyInput = function MoneyInput(props) {
         components: {
           SingleValue: function SingleValue(innerProps) {
             return jsxRuntime.jsx(_SingleValue, _objectSpread(_objectSpread({}, innerProps), {}, {
-              id: id
+              id: MoneyInput.getCurrencyDropdownId(moneyInputId)
             }));
           },
           Input: function Input(ownProps) {
@@ -1301,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",
@@ -1396,7 +1398,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.1";
+var version = "13.0.2";
 
 exports["default"] = MoneyInput$1;
 exports.version = version;