@commercetools-uikit/money-input 20.5.0 → 20.6.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/README.md +3 -3
  2. package/dist/commercetools-uikit-money-input.cjs.dev.js +33 -42
  3. package/dist/commercetools-uikit-money-input.cjs.prod.js +32 -41
  4. package/dist/commercetools-uikit-money-input.esm.js +33 -41
  5. package/package.json +23 -14
package/README.md CHANGED
@@ -1,5 +1,5 @@
1
1
  <!-- THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY. -->
2
- <!-- This file is created by the `yarn generate-readme` script. -->
2
+ <!-- This file is created by the `pnpm generate-readme` script. -->
3
3
 
4
4
  # MoneyInput
5
5
 
@@ -10,7 +10,7 @@ A controlled input component for money values with validation states.
10
10
  ## Installation
11
11
 
12
12
  ```
13
- yarn add @commercetools-uikit/money-input
13
+ pnpm add @commercetools-uikit/money-input
14
14
  ```
15
15
 
16
16
  ```
@@ -20,7 +20,7 @@ npm --save install @commercetools-uikit/money-input
20
20
  Additionally install the peer dependencies (if not present)
21
21
 
22
22
  ```
23
- yarn add react react-dom react-intl
23
+ pnpm add react react-dom react-intl
24
24
  ```
25
25
 
26
26
  ```
package/dist/commercetools-uikit-money-input.cjs.dev.js CHANGED
@@ -22,7 +22,6 @@ var _parseInt = require('@babel/runtime-corejs3/core-js-stable/parse-int');
22
22
  var _trimInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/trim');
23
23
  var _mapInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/map');
24
24
  var _findInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/find');
25
- var _concatInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/concat');
26
25
  var react$1 = require('react');
27
26
  var ReactDOM = require('react-dom');
28
27
  var has = require('lodash/has');
@@ -58,7 +57,6 @@ var _parseInt__default = /*#__PURE__*/_interopDefault(_parseInt);
58
57
  var _trimInstanceProperty__default = /*#__PURE__*/_interopDefault(_trimInstanceProperty);
59
58
  var _mapInstanceProperty__default = /*#__PURE__*/_interopDefault(_mapInstanceProperty);
60
59
  var _findInstanceProperty__default = /*#__PURE__*/_interopDefault(_findInstanceProperty);
61
- var _concatInstanceProperty__default = /*#__PURE__*/_interopDefault(_concatInstanceProperty);
62
60
  var ReactDOM__default = /*#__PURE__*/_interopDefault(ReactDOM);
63
61
  var has__default = /*#__PURE__*/_interopDefault(has);
64
62
  var Select__default = /*#__PURE__*/_interopDefault(Select);
@@ -780,7 +778,7 @@ var messages = reactIntl.defineMessages({
780
778
  const _excluded = ["id"],
781
779
  _excluded2 = ["currencies", "horizontalConstraint", "menuPortalZIndex"];
782
780
  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; }
783
- 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; }
781
+ 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; }
784
782
  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)."; }
785
783
  const TooltipWrapper = /*#__PURE__*/_styled__default["default"]("div", process.env.NODE_ENV === "production" ? {
786
784
  target: "e1u90zjc0"
@@ -796,8 +794,8 @@ const TooltipWrapper = /*#__PURE__*/_styled__default["default"]("div", process.e
796
794
  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
797
795
  });
798
796
  const moneyInputSequentialId = utils.createSequentialId('money-input-');
799
- const getPortalId = id => "portal-".concat(id);
800
- const getPortalNode = id => document.querySelector("#".concat(getPortalId(id)));
797
+ const getPortalId = id => `portal-${id}`;
798
+ const getPortalNode = id => document.querySelector(`#${getPortalId(id)}`);
801
799
  const Portal = props => {
802
800
  const domNode = getPortalNode(props.id);
803
801
  if (domNode) {
@@ -841,15 +839,15 @@ const createCurrencySelectStyles = _ref4 => {
841
839
  });
842
840
  return _objectSpread(_objectSpread({}, selectStyles), {}, {
843
841
  control: (base, state) => _objectSpread(_objectSpread({}, selectStyles.control(base, state)), {}, {
844
- padding: "0 ".concat(designSystem.designTokens.spacing25),
842
+ padding: `0 ${designSystem.designTokens.spacing25}`,
845
843
  borderTopRightRadius: '0',
846
844
  borderBottomRightRadius: '0',
847
845
  borderRight: '0',
848
846
  minWidth: '80px',
849
847
  height: '100%',
850
848
  borderColor: (() => {
851
- if (isDisabled) return "".concat(designSystem.designTokens.borderColorForInputWhenDisabled, " !important");
852
- if (isReadOnly) return "".concat(designSystem.designTokens.borderColorForInputWhenReadonly, " !important");
849
+ if (isDisabled) return `${designSystem.designTokens.borderColorForInputWhenDisabled} !important`;
850
+ if (isReadOnly) return `${designSystem.designTokens.borderColorForInputWhenReadonly} !important`;
853
851
  if (hasError) return designSystem.designTokens.borderColorForInputWhenError;
854
852
  if (hasWarning) return designSystem.designTokens.borderColorForInputWhenWarning;
855
853
  if (currencyHasFocus) {
@@ -859,7 +857,7 @@ const createCurrencySelectStyles = _ref4 => {
859
857
  })(),
860
858
  cursor: (() => {
861
859
  if (isDisabled) return 'not-allowed';
862
- if (isReadOnly) return "default";
860
+ if (isReadOnly) return `default`;
863
861
  return 'pointer';
864
862
  })(),
865
863
  backgroundColor: (() => {
@@ -972,7 +970,7 @@ const parseRawAmountToNumber = (rawAmount, locale) => {
972
970
  }
973
971
  fractionsSeparator = fractionsSeparator === '.' ? '\\.' : fractionsSeparator; // here we escape the '.' to use it as regex
974
972
  // The raw amount with only one sparator
975
- const normalizedAmount = String(rawAmount).replace(new RegExp("[^-0-9".concat(fractionsSeparator, "]"), 'g'), '') // we just keep the numbers and the fraction symbol
973
+ const normalizedAmount = String(rawAmount).replace(new RegExp(`[^-0-9${fractionsSeparator}]`, 'g'), '') // we just keep the numbers and the fraction symbol
976
974
  .replace(fractionsSeparator, '.'); // then we change whatever `fractionsSeparator` was to `.` so we can parse it as float
977
975
 
978
976
  return _parseFloat__default["default"](normalizedAmount);
@@ -997,7 +995,7 @@ const createMoneyValue = (rawAmount, locale, currencyCode) => {
997
995
  if (!currency) return null;
998
996
  // The user may enter a value with a comma, dot, or apostrophe as the decimal separator.
999
997
  if (rawAmount.length === 0 || !utils.isNumberish(rawAmount)) return null;
1000
- 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;
998
+ 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;
1001
999
  const amountAsNumber = parseRawAmountToNumber(rawAmount, locale);
1002
1000
  if (isNaN(amountAsNumber)) return null;
1003
1001
 
@@ -1046,15 +1044,12 @@ const createMoneyValue = (rawAmount, locale, currencyCode) => {
1046
1044
  fractionDigits: currency.fractionDigits
1047
1045
  };
1048
1046
  };
1049
- const createEmptyMoneyValue = currencyCode => {
1050
- var _allCurrencies$curren;
1051
- return {
1052
- type: 'centPrecision',
1053
- currencyCode,
1054
- centAmount: NaN,
1055
- fractionDigits: (_allCurrencies$curren = allCurrencies[currencyCode].fractionDigits) !== null && _allCurrencies$curren !== void 0 ? _allCurrencies$curren : 2
1056
- };
1057
- };
1047
+ const createEmptyMoneyValue = currencyCode => ({
1048
+ type: 'centPrecision',
1049
+ currencyCode,
1050
+ centAmount: NaN,
1051
+ fractionDigits: allCurrencies[currencyCode].fractionDigits ?? 2
1052
+ });
1058
1053
  const getAmountAsNumberFromMoneyValue = moneyValue => moneyValue.type === 'highPrecision' ? moneyValue.preciseAmount / 10 ** moneyValue.fractionDigits : moneyValue.centAmount / 10 ** allCurrencies[moneyValue.currencyCode].fractionDigits;
1059
1054
 
1060
1055
  // gets called with a string and should return a formatted string
@@ -1067,8 +1062,8 @@ const formatAmount = (rawAmount, locale, currencyCode) => {
1067
1062
  minimumFractionDigits: fractionDigits
1068
1063
  });
1069
1064
  };
1070
- const getAmountInputName = name => name ? "".concat(name, ".amount") : undefined;
1071
- const getCurrencyDropdownName = name => name ? "".concat(name, ".currencyCode") : undefined;
1065
+ const getAmountInputName = name => name ? `${name}.amount` : undefined;
1066
+ const getCurrencyDropdownName = name => name ? `${name}.currencyCode` : undefined;
1072
1067
  var _ref = process.env.NODE_ENV === "production" ? {
1073
1068
  name: "pw7jst",
1074
1069
  styles: "position:relative;width:100%"
@@ -1086,7 +1081,6 @@ var _ref2 = process.env.NODE_ENV === "production" ? {
1086
1081
  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
1087
1082
  };
1088
1083
  const MoneyInput = _ref5 => {
1089
- var _context8, _context9;
1090
1084
  let _ref5$currencies = _ref5.currencies,
1091
1085
  currencies = _ref5$currencies === void 0 ? [] : _ref5$currencies,
1092
1086
  _ref5$horizontalConst = _ref5.horizontalConstraint,
@@ -1146,20 +1140,18 @@ const MoneyInput = _ref5 => {
1146
1140
  value: formattedAmount
1147
1141
  }
1148
1142
  };
1149
- onChange === null || onChange === void 0 || onChange(fakeEvent);
1143
+ onChange?.(fakeEvent);
1150
1144
  }
1151
1145
  }
1152
1146
  }, [intl.locale, onChange, moneyInputId, props.name, props.value.amount, props.value.currencyCode, toggleAmountHasFocus]);
1153
1147
  const handleAmountChange = react$1.useCallback(event => {
1154
- var _event$target;
1155
- if (utils.isNumberish((_event$target = event.target) === null || _event$target === void 0 ? void 0 : _event$target.value)) {
1156
- var _event$target2;
1157
- onChange === null || onChange === void 0 || onChange({
1148
+ if (utils.isNumberish(event.target?.value)) {
1149
+ onChange?.({
1158
1150
  persist: () => {},
1159
1151
  target: {
1160
1152
  id: MoneyInput.getAmountInputId(moneyInputId),
1161
1153
  name: getAmountInputName(props.name),
1162
- value: (_event$target2 = event.target) === null || _event$target2 === void 0 ? void 0 : _event$target2.value
1154
+ value: event.target?.value
1163
1155
  }
1164
1156
  });
1165
1157
  }
@@ -1167,7 +1159,7 @@ const MoneyInput = _ref5 => {
1167
1159
  const handleCurrencyChange = react$1.useCallback(option => {
1168
1160
  const currencyCode = option.value;
1169
1161
  if (props.value.currencyCode !== currencyCode) {
1170
- var _context6, _amountInputRef$curre;
1162
+ var _context6;
1171
1163
  // When the user changes from a currency with 3 fraction digits to
1172
1164
  // a currency with 2 fraction digits, and when the input value was
1173
1165
  // "9.000" (9), then it should change to "9.00" to reflect the new
@@ -1189,11 +1181,11 @@ const MoneyInput = _ref5 => {
1189
1181
  value: currencyCode || ''
1190
1182
  }
1191
1183
  };
1192
- onChange === null || onChange === void 0 || onChange(fakeCurrencyEvent);
1184
+ onChange?.(fakeCurrencyEvent);
1193
1185
 
1194
1186
  // change amount if necessary
1195
1187
  if (props.value.amount !== nextAmount) {
1196
- onChange === null || onChange === void 0 || onChange({
1188
+ onChange?.({
1197
1189
  persist: () => {},
1198
1190
  target: {
1199
1191
  id: MoneyInput.getAmountInputId(moneyInputId),
@@ -1202,7 +1194,7 @@ const MoneyInput = _ref5 => {
1202
1194
  }
1203
1195
  });
1204
1196
  }
1205
- (_amountInputRef$curre = amountInputRef.current) === null || _amountInputRef$curre === void 0 || _amountInputRef$curre.focus();
1197
+ amountInputRef.current?.focus();
1206
1198
  }
1207
1199
  }, [intl.locale, onChange, moneyInputId, props.name, props.value.amount, props.value.currencyCode]);
1208
1200
  const handleCurrencyFocus = react$1.useCallback(() => {
@@ -1246,10 +1238,9 @@ const MoneyInput = _ref5 => {
1246
1238
  const isHighPrecision = !MoneyInput.isEmpty(props.value) && MoneyInput.isHighPrecision(props.value, intl.locale);
1247
1239
  const onBlur = props.onBlur;
1248
1240
  const handleContainerBlur = react$1.useCallback(event => {
1249
- var _containerRef$current;
1250
1241
  // ensures that both fields are marked as touched when one of them
1251
1242
  // is blurred
1252
- if (typeof onBlur === 'function' && !((_containerRef$current = containerRef.current) !== null && _containerRef$current !== void 0 && _containerRef$current.contains(event.relatedTarget))) {
1243
+ if (typeof onBlur === 'function' && !containerRef.current?.contains(event.relatedTarget)) {
1253
1244
  onBlur({
1254
1245
  target: {
1255
1246
  id: MoneyInput.getCurrencyDropdownId(moneyInputId),
@@ -1349,7 +1340,7 @@ const MoneyInput = _ref5 => {
1349
1340
  ,
1350
1341
  styles: {
1351
1342
  body: {
1352
- margin: _concatInstanceProperty__default["default"](_context8 = _concatInstanceProperty__default["default"](_context9 = "".concat(designSystem.designTokens.spacing20, " -")).call(_context9, designSystem.designTokens.spacing10, " ")).call(_context8, designSystem.designTokens.spacing20, " 0")
1343
+ margin: `${designSystem.designTokens.spacing20} -${designSystem.designTokens.spacing10} ${designSystem.designTokens.spacing20} 0`
1353
1344
  }
1354
1345
  },
1355
1346
  title: intl.formatMessage(messages.highPrecision),
@@ -1371,8 +1362,8 @@ MoneyInput.displayName = 'MoneyInput';
1371
1362
  MoneyInput.getAmountInputId = getAmountInputName;
1372
1363
  MoneyInput.getCurrencyDropdownId = getCurrencyDropdownName;
1373
1364
  MoneyInput.convertToMoneyValue = (value, locale) => {
1374
- var _context0;
1375
- return createMoneyValue(typeof value.amount === 'string' ? _trimInstanceProperty__default["default"](_context0 = value.amount).call(_context0) : '', locale, value.currencyCode);
1365
+ var _context8;
1366
+ return createMoneyValue(typeof value.amount === 'string' ? _trimInstanceProperty__default["default"](_context8 = value.amount).call(_context8) : '', locale, value.currencyCode);
1376
1367
  };
1377
1368
  MoneyInput.parseMoneyValue = (moneyValue, locale) => {
1378
1369
  if (!moneyValue) return {
@@ -1395,19 +1386,19 @@ MoneyInput.parseMoneyValue = (moneyValue, locale) => {
1395
1386
  };
1396
1387
  };
1397
1388
  MoneyInput.isEmpty = formValue => {
1398
- var _context1, _context10;
1399
- return !formValue || _trimInstanceProperty__default["default"](_context1 = formValue.amount).call(_context1) === '' || _trimInstanceProperty__default["default"](_context10 = formValue.currencyCode).call(_context10) === '';
1389
+ var _context9, _context0;
1390
+ return !formValue || _trimInstanceProperty__default["default"](_context9 = formValue.amount).call(_context9) === '' || _trimInstanceProperty__default["default"](_context0 = formValue.currencyCode).call(_context0) === '';
1400
1391
  };
1401
1392
  MoneyInput.isHighPrecision = (formValue, locale) => {
1402
1393
  process.env.NODE_ENV !== "production" ? utils.warning(!MoneyInput.isEmpty(formValue), 'MoneyValue.isHighPrecision may not be called with an empty money value.') : void 0;
1403
1394
  const moneyValue = MoneyInput.convertToMoneyValue(formValue, locale);
1404
- return (moneyValue === null || moneyValue === void 0 ? void 0 : moneyValue.type) === 'highPrecision';
1395
+ return moneyValue?.type === 'highPrecision';
1405
1396
  };
1406
1397
  MoneyInput.isTouched = touched => Boolean(touched && touched.currencyCode && touched.amount);
1407
1398
  var MoneyInput$1 = MoneyInput;
1408
1399
 
1409
1400
  // NOTE: This string will be replaced on build time with the package version.
1410
- var version = "20.5.0";
1401
+ var version = "20.6.0";
1411
1402
 
1412
1403
  exports["default"] = MoneyInput$1;
1413
1404
  exports.version = version;
package/dist/commercetools-uikit-money-input.cjs.prod.js CHANGED
@@ -22,7 +22,6 @@ var _parseInt = require('@babel/runtime-corejs3/core-js-stable/parse-int');
22
22
  var _trimInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/trim');
23
23
  var _mapInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/map');
24
24
  var _findInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/find');
25
- var _concatInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/concat');
26
25
  var react$1 = require('react');
27
26
  var ReactDOM = require('react-dom');
28
27
  require('lodash/has');
@@ -58,7 +57,6 @@ var _parseInt__default = /*#__PURE__*/_interopDefault(_parseInt);
58
57
  var _trimInstanceProperty__default = /*#__PURE__*/_interopDefault(_trimInstanceProperty);
59
58
  var _mapInstanceProperty__default = /*#__PURE__*/_interopDefault(_mapInstanceProperty);
60
59
  var _findInstanceProperty__default = /*#__PURE__*/_interopDefault(_findInstanceProperty);
61
- var _concatInstanceProperty__default = /*#__PURE__*/_interopDefault(_concatInstanceProperty);
62
60
  var ReactDOM__default = /*#__PURE__*/_interopDefault(ReactDOM);
63
61
  var Select__default = /*#__PURE__*/_interopDefault(Select);
64
62
  var Tooltip__default = /*#__PURE__*/_interopDefault(Tooltip);
@@ -779,7 +777,7 @@ var messages = reactIntl.defineMessages({
779
777
  const _excluded = ["id"],
780
778
  _excluded2 = ["currencies", "horizontalConstraint", "menuPortalZIndex"];
781
779
  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; }
782
- 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; }
780
+ 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; }
783
781
  const TooltipWrapper = /*#__PURE__*/_styled__default["default"]("div", {
784
782
  target: "e1u90zjc0"
785
783
  } )({
@@ -787,8 +785,8 @@ const TooltipWrapper = /*#__PURE__*/_styled__default["default"]("div", {
787
785
  styles: "display:flex"
788
786
  } );
789
787
  const moneyInputSequentialId = utils.createSequentialId('money-input-');
790
- const getPortalId = id => "portal-".concat(id);
791
- const getPortalNode = id => document.querySelector("#".concat(getPortalId(id)));
788
+ const getPortalId = id => `portal-${id}`;
789
+ const getPortalNode = id => document.querySelector(`#${getPortalId(id)}`);
792
790
  const Portal = props => {
793
791
  const domNode = getPortalNode(props.id);
794
792
  if (domNode) {
@@ -832,15 +830,15 @@ const createCurrencySelectStyles = _ref4 => {
832
830
  });
833
831
  return _objectSpread(_objectSpread({}, selectStyles), {}, {
834
832
  control: (base, state) => _objectSpread(_objectSpread({}, selectStyles.control(base, state)), {}, {
835
- padding: "0 ".concat(designSystem.designTokens.spacing25),
833
+ padding: `0 ${designSystem.designTokens.spacing25}`,
836
834
  borderTopRightRadius: '0',
837
835
  borderBottomRightRadius: '0',
838
836
  borderRight: '0',
839
837
  minWidth: '80px',
840
838
  height: '100%',
841
839
  borderColor: (() => {
842
- if (isDisabled) return "".concat(designSystem.designTokens.borderColorForInputWhenDisabled, " !important");
843
- if (isReadOnly) return "".concat(designSystem.designTokens.borderColorForInputWhenReadonly, " !important");
840
+ if (isDisabled) return `${designSystem.designTokens.borderColorForInputWhenDisabled} !important`;
841
+ if (isReadOnly) return `${designSystem.designTokens.borderColorForInputWhenReadonly} !important`;
844
842
  if (hasError) return designSystem.designTokens.borderColorForInputWhenError;
845
843
  if (hasWarning) return designSystem.designTokens.borderColorForInputWhenWarning;
846
844
  if (currencyHasFocus) {
@@ -850,7 +848,7 @@ const createCurrencySelectStyles = _ref4 => {
850
848
  })(),
851
849
  cursor: (() => {
852
850
  if (isDisabled) return 'not-allowed';
853
- if (isReadOnly) return "default";
851
+ if (isReadOnly) return `default`;
854
852
  return 'pointer';
855
853
  })(),
856
854
  backgroundColor: (() => {
@@ -963,7 +961,7 @@ const parseRawAmountToNumber = (rawAmount, locale) => {
963
961
  }
964
962
  fractionsSeparator = fractionsSeparator === '.' ? '\\.' : fractionsSeparator; // here we escape the '.' to use it as regex
965
963
  // The raw amount with only one sparator
966
- const normalizedAmount = String(rawAmount).replace(new RegExp("[^-0-9".concat(fractionsSeparator, "]"), 'g'), '') // we just keep the numbers and the fraction symbol
964
+ const normalizedAmount = String(rawAmount).replace(new RegExp(`[^-0-9${fractionsSeparator}]`, 'g'), '') // we just keep the numbers and the fraction symbol
967
965
  .replace(fractionsSeparator, '.'); // then we change whatever `fractionsSeparator` was to `.` so we can parse it as float
968
966
 
969
967
  return _parseFloat__default["default"](normalizedAmount);
@@ -1036,15 +1034,12 @@ const createMoneyValue = (rawAmount, locale, currencyCode) => {
1036
1034
  fractionDigits: currency.fractionDigits
1037
1035
  };
1038
1036
  };
1039
- const createEmptyMoneyValue = currencyCode => {
1040
- var _allCurrencies$curren;
1041
- return {
1042
- type: 'centPrecision',
1043
- currencyCode,
1044
- centAmount: NaN,
1045
- fractionDigits: (_allCurrencies$curren = allCurrencies[currencyCode].fractionDigits) !== null && _allCurrencies$curren !== void 0 ? _allCurrencies$curren : 2
1046
- };
1047
- };
1037
+ const createEmptyMoneyValue = currencyCode => ({
1038
+ type: 'centPrecision',
1039
+ currencyCode,
1040
+ centAmount: NaN,
1041
+ fractionDigits: allCurrencies[currencyCode].fractionDigits ?? 2
1042
+ });
1048
1043
  const getAmountAsNumberFromMoneyValue = moneyValue => moneyValue.type === 'highPrecision' ? moneyValue.preciseAmount / 10 ** moneyValue.fractionDigits : moneyValue.centAmount / 10 ** allCurrencies[moneyValue.currencyCode].fractionDigits;
1049
1044
 
1050
1045
  // gets called with a string and should return a formatted string
@@ -1057,8 +1052,8 @@ const formatAmount = (rawAmount, locale, currencyCode) => {
1057
1052
  minimumFractionDigits: fractionDigits
1058
1053
  });
1059
1054
  };
1060
- const getAmountInputName = name => name ? "".concat(name, ".amount") : undefined;
1061
- const getCurrencyDropdownName = name => name ? "".concat(name, ".currencyCode") : undefined;
1055
+ const getAmountInputName = name => name ? `${name}.amount` : undefined;
1056
+ const getCurrencyDropdownName = name => name ? `${name}.currencyCode` : undefined;
1062
1057
  var _ref = {
1063
1058
  name: "pw7jst",
1064
1059
  styles: "position:relative;width:100%"
@@ -1068,7 +1063,6 @@ var _ref2 = {
1068
1063
  styles: "font-family:inherit;width:100%;position:relative;display:flex"
1069
1064
  } ;
1070
1065
  const MoneyInput = _ref5 => {
1071
- var _context8, _context9;
1072
1066
  let _ref5$currencies = _ref5.currencies,
1073
1067
  currencies = _ref5$currencies === void 0 ? [] : _ref5$currencies,
1074
1068
  _ref5$horizontalConst = _ref5.horizontalConstraint,
@@ -1126,20 +1120,18 @@ const MoneyInput = _ref5 => {
1126
1120
  value: formattedAmount
1127
1121
  }
1128
1122
  };
1129
- onChange === null || onChange === void 0 || onChange(fakeEvent);
1123
+ onChange?.(fakeEvent);
1130
1124
  }
1131
1125
  }
1132
1126
  }, [intl.locale, onChange, moneyInputId, props.name, props.value.amount, props.value.currencyCode, toggleAmountHasFocus]);
1133
1127
  const handleAmountChange = react$1.useCallback(event => {
1134
- var _event$target;
1135
- if (utils.isNumberish((_event$target = event.target) === null || _event$target === void 0 ? void 0 : _event$target.value)) {
1136
- var _event$target2;
1137
- onChange === null || onChange === void 0 || onChange({
1128
+ if (utils.isNumberish(event.target?.value)) {
1129
+ onChange?.({
1138
1130
  persist: () => {},
1139
1131
  target: {
1140
1132
  id: MoneyInput.getAmountInputId(moneyInputId),
1141
1133
  name: getAmountInputName(props.name),
1142
- value: (_event$target2 = event.target) === null || _event$target2 === void 0 ? void 0 : _event$target2.value
1134
+ value: event.target?.value
1143
1135
  }
1144
1136
  });
1145
1137
  }
@@ -1147,7 +1139,7 @@ const MoneyInput = _ref5 => {
1147
1139
  const handleCurrencyChange = react$1.useCallback(option => {
1148
1140
  const currencyCode = option.value;
1149
1141
  if (props.value.currencyCode !== currencyCode) {
1150
- var _context6, _amountInputRef$curre;
1142
+ var _context6;
1151
1143
  // When the user changes from a currency with 3 fraction digits to
1152
1144
  // a currency with 2 fraction digits, and when the input value was
1153
1145
  // "9.000" (9), then it should change to "9.00" to reflect the new
@@ -1169,11 +1161,11 @@ const MoneyInput = _ref5 => {
1169
1161
  value: currencyCode || ''
1170
1162
  }
1171
1163
  };
1172
- onChange === null || onChange === void 0 || onChange(fakeCurrencyEvent);
1164
+ onChange?.(fakeCurrencyEvent);
1173
1165
 
1174
1166
  // change amount if necessary
1175
1167
  if (props.value.amount !== nextAmount) {
1176
- onChange === null || onChange === void 0 || onChange({
1168
+ onChange?.({
1177
1169
  persist: () => {},
1178
1170
  target: {
1179
1171
  id: MoneyInput.getAmountInputId(moneyInputId),
@@ -1182,7 +1174,7 @@ const MoneyInput = _ref5 => {
1182
1174
  }
1183
1175
  });
1184
1176
  }
1185
- (_amountInputRef$curre = amountInputRef.current) === null || _amountInputRef$curre === void 0 || _amountInputRef$curre.focus();
1177
+ amountInputRef.current?.focus();
1186
1178
  }
1187
1179
  }, [intl.locale, onChange, moneyInputId, props.name, props.value.amount, props.value.currencyCode]);
1188
1180
  const handleCurrencyFocus = react$1.useCallback(() => {
@@ -1226,10 +1218,9 @@ const MoneyInput = _ref5 => {
1226
1218
  const isHighPrecision = !MoneyInput.isEmpty(props.value) && MoneyInput.isHighPrecision(props.value, intl.locale);
1227
1219
  const onBlur = props.onBlur;
1228
1220
  const handleContainerBlur = react$1.useCallback(event => {
1229
- var _containerRef$current;
1230
1221
  // ensures that both fields are marked as touched when one of them
1231
1222
  // is blurred
1232
- if (typeof onBlur === 'function' && !((_containerRef$current = containerRef.current) !== null && _containerRef$current !== void 0 && _containerRef$current.contains(event.relatedTarget))) {
1223
+ if (typeof onBlur === 'function' && !containerRef.current?.contains(event.relatedTarget)) {
1233
1224
  onBlur({
1234
1225
  target: {
1235
1226
  id: MoneyInput.getCurrencyDropdownId(moneyInputId),
@@ -1329,7 +1320,7 @@ const MoneyInput = _ref5 => {
1329
1320
  ,
1330
1321
  styles: {
1331
1322
  body: {
1332
- margin: _concatInstanceProperty__default["default"](_context8 = _concatInstanceProperty__default["default"](_context9 = "".concat(designSystem.designTokens.spacing20, " -")).call(_context9, designSystem.designTokens.spacing10, " ")).call(_context8, designSystem.designTokens.spacing20, " 0")
1323
+ margin: `${designSystem.designTokens.spacing20} -${designSystem.designTokens.spacing10} ${designSystem.designTokens.spacing20} 0`
1333
1324
  }
1334
1325
  },
1335
1326
  title: intl.formatMessage(messages.highPrecision),
@@ -1351,8 +1342,8 @@ MoneyInput.displayName = 'MoneyInput';
1351
1342
  MoneyInput.getAmountInputId = getAmountInputName;
1352
1343
  MoneyInput.getCurrencyDropdownId = getCurrencyDropdownName;
1353
1344
  MoneyInput.convertToMoneyValue = (value, locale) => {
1354
- var _context0;
1355
- return createMoneyValue(typeof value.amount === 'string' ? _trimInstanceProperty__default["default"](_context0 = value.amount).call(_context0) : '', locale, value.currencyCode);
1345
+ var _context8;
1346
+ return createMoneyValue(typeof value.amount === 'string' ? _trimInstanceProperty__default["default"](_context8 = value.amount).call(_context8) : '', locale, value.currencyCode);
1356
1347
  };
1357
1348
  MoneyInput.parseMoneyValue = (moneyValue, locale) => {
1358
1349
  if (!moneyValue) return {
@@ -1368,18 +1359,18 @@ MoneyInput.parseMoneyValue = (moneyValue, locale) => {
1368
1359
  };
1369
1360
  };
1370
1361
  MoneyInput.isEmpty = formValue => {
1371
- var _context1, _context10;
1372
- return !formValue || _trimInstanceProperty__default["default"](_context1 = formValue.amount).call(_context1) === '' || _trimInstanceProperty__default["default"](_context10 = formValue.currencyCode).call(_context10) === '';
1362
+ var _context9, _context0;
1363
+ return !formValue || _trimInstanceProperty__default["default"](_context9 = formValue.amount).call(_context9) === '' || _trimInstanceProperty__default["default"](_context0 = formValue.currencyCode).call(_context0) === '';
1373
1364
  };
1374
1365
  MoneyInput.isHighPrecision = (formValue, locale) => {
1375
1366
  const moneyValue = MoneyInput.convertToMoneyValue(formValue, locale);
1376
- return (moneyValue === null || moneyValue === void 0 ? void 0 : moneyValue.type) === 'highPrecision';
1367
+ return moneyValue?.type === 'highPrecision';
1377
1368
  };
1378
1369
  MoneyInput.isTouched = touched => Boolean(touched && touched.currencyCode && touched.amount);
1379
1370
  var MoneyInput$1 = MoneyInput;
1380
1371
 
1381
1372
  // NOTE: This string will be replaced on build time with the package version.
1382
- var version = "20.5.0";
1373
+ var version = "20.6.0";
1383
1374
 
1384
1375
  exports["default"] = MoneyInput$1;
1385
1376
  exports.version = version;
package/dist/commercetools-uikit-money-input.esm.js CHANGED
@@ -18,7 +18,6 @@ import _parseInt from '@babel/runtime-corejs3/core-js-stable/parse-int';
18
18
  import _trimInstanceProperty from '@babel/runtime-corejs3/core-js-stable/instance/trim';
19
19
  import _mapInstanceProperty from '@babel/runtime-corejs3/core-js-stable/instance/map';
20
20
  import _findInstanceProperty from '@babel/runtime-corejs3/core-js-stable/instance/find';
21
- import _concatInstanceProperty from '@babel/runtime-corejs3/core-js-stable/instance/concat';
22
21
  import { useRef, useCallback } from 'react';
23
22
  import ReactDOM from 'react-dom';
24
23
  import has from 'lodash/has';
@@ -750,7 +749,7 @@ var messages = defineMessages({
750
749
  const _excluded = ["id"],
751
750
  _excluded2 = ["currencies", "horizontalConstraint", "menuPortalZIndex"];
752
751
  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; }
753
- 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; }
752
+ 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; }
754
753
  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)."; }
755
754
  const TooltipWrapper = /*#__PURE__*/_styled("div", process.env.NODE_ENV === "production" ? {
756
755
  target: "e1u90zjc0"
@@ -766,8 +765,8 @@ const TooltipWrapper = /*#__PURE__*/_styled("div", process.env.NODE_ENV === "pro
766
765
  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
767
766
  });
768
767
  const moneyInputSequentialId = createSequentialId('money-input-');
769
- const getPortalId = id => "portal-".concat(id);
770
- const getPortalNode = id => document.querySelector("#".concat(getPortalId(id)));
768
+ const getPortalId = id => `portal-${id}`;
769
+ const getPortalNode = id => document.querySelector(`#${getPortalId(id)}`);
771
770
  const Portal = props => {
772
771
  const domNode = getPortalNode(props.id);
773
772
  if (domNode) {
@@ -811,15 +810,15 @@ const createCurrencySelectStyles = _ref4 => {
811
810
  });
812
811
  return _objectSpread(_objectSpread({}, selectStyles), {}, {
813
812
  control: (base, state) => _objectSpread(_objectSpread({}, selectStyles.control(base, state)), {}, {
814
- padding: "0 ".concat(designTokens.spacing25),
813
+ padding: `0 ${designTokens.spacing25}`,
815
814
  borderTopRightRadius: '0',
816
815
  borderBottomRightRadius: '0',
817
816
  borderRight: '0',
818
817
  minWidth: '80px',
819
818
  height: '100%',
820
819
  borderColor: (() => {
821
- if (isDisabled) return "".concat(designTokens.borderColorForInputWhenDisabled, " !important");
822
- if (isReadOnly) return "".concat(designTokens.borderColorForInputWhenReadonly, " !important");
820
+ if (isDisabled) return `${designTokens.borderColorForInputWhenDisabled} !important`;
821
+ if (isReadOnly) return `${designTokens.borderColorForInputWhenReadonly} !important`;
823
822
  if (hasError) return designTokens.borderColorForInputWhenError;
824
823
  if (hasWarning) return designTokens.borderColorForInputWhenWarning;
825
824
  if (currencyHasFocus) {
@@ -829,7 +828,7 @@ const createCurrencySelectStyles = _ref4 => {
829
828
  })(),
830
829
  cursor: (() => {
831
830
  if (isDisabled) return 'not-allowed';
832
- if (isReadOnly) return "default";
831
+ if (isReadOnly) return `default`;
833
832
  return 'pointer';
834
833
  })(),
835
834
  backgroundColor: (() => {
@@ -942,7 +941,7 @@ const parseRawAmountToNumber = (rawAmount, locale) => {
942
941
  }
943
942
  fractionsSeparator = fractionsSeparator === '.' ? '\\.' : fractionsSeparator; // here we escape the '.' to use it as regex
944
943
  // The raw amount with only one sparator
945
- const normalizedAmount = String(rawAmount).replace(new RegExp("[^-0-9".concat(fractionsSeparator, "]"), 'g'), '') // we just keep the numbers and the fraction symbol
944
+ const normalizedAmount = String(rawAmount).replace(new RegExp(`[^-0-9${fractionsSeparator}]`, 'g'), '') // we just keep the numbers and the fraction symbol
946
945
  .replace(fractionsSeparator, '.'); // then we change whatever `fractionsSeparator` was to `.` so we can parse it as float
947
946
 
948
947
  return _parseFloat(normalizedAmount);
@@ -967,7 +966,7 @@ const createMoneyValue = (rawAmount, locale, currencyCode) => {
967
966
  if (!currency) return null;
968
967
  // The user may enter a value with a comma, dot, or apostrophe as the decimal separator.
969
968
  if (rawAmount.length === 0 || !isNumberish(rawAmount)) return null;
970
- 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;
969
+ 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;
971
970
  const amountAsNumber = parseRawAmountToNumber(rawAmount, locale);
972
971
  if (isNaN(amountAsNumber)) return null;
973
972
 
@@ -1016,15 +1015,12 @@ const createMoneyValue = (rawAmount, locale, currencyCode) => {
1016
1015
  fractionDigits: currency.fractionDigits
1017
1016
  };
1018
1017
  };
1019
- const createEmptyMoneyValue = currencyCode => {
1020
- var _allCurrencies$curren;
1021
- return {
1022
- type: 'centPrecision',
1023
- currencyCode,
1024
- centAmount: NaN,
1025
- fractionDigits: (_allCurrencies$curren = allCurrencies[currencyCode].fractionDigits) !== null && _allCurrencies$curren !== void 0 ? _allCurrencies$curren : 2
1026
- };
1027
- };
1018
+ const createEmptyMoneyValue = currencyCode => ({
1019
+ type: 'centPrecision',
1020
+ currencyCode,
1021
+ centAmount: NaN,
1022
+ fractionDigits: allCurrencies[currencyCode].fractionDigits ?? 2
1023
+ });
1028
1024
  const getAmountAsNumberFromMoneyValue = moneyValue => moneyValue.type === 'highPrecision' ? moneyValue.preciseAmount / 10 ** moneyValue.fractionDigits : moneyValue.centAmount / 10 ** allCurrencies[moneyValue.currencyCode].fractionDigits;
1029
1025
 
1030
1026
  // gets called with a string and should return a formatted string
@@ -1037,8 +1033,8 @@ const formatAmount = (rawAmount, locale, currencyCode) => {
1037
1033
  minimumFractionDigits: fractionDigits
1038
1034
  });
1039
1035
  };
1040
- const getAmountInputName = name => name ? "".concat(name, ".amount") : undefined;
1041
- const getCurrencyDropdownName = name => name ? "".concat(name, ".currencyCode") : undefined;
1036
+ const getAmountInputName = name => name ? `${name}.amount` : undefined;
1037
+ const getCurrencyDropdownName = name => name ? `${name}.currencyCode` : undefined;
1042
1038
  var _ref = process.env.NODE_ENV === "production" ? {
1043
1039
  name: "pw7jst",
1044
1040
  styles: "position:relative;width:100%"
@@ -1056,7 +1052,6 @@ var _ref2 = process.env.NODE_ENV === "production" ? {
1056
1052
  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
1057
1053
  };
1058
1054
  const MoneyInput = _ref5 => {
1059
- var _context8, _context9;
1060
1055
  let _ref5$currencies = _ref5.currencies,
1061
1056
  currencies = _ref5$currencies === void 0 ? [] : _ref5$currencies,
1062
1057
  _ref5$horizontalConst = _ref5.horizontalConstraint,
@@ -1116,20 +1111,18 @@ const MoneyInput = _ref5 => {
1116
1111
  value: formattedAmount
1117
1112
  }
1118
1113
  };
1119
- onChange === null || onChange === void 0 || onChange(fakeEvent);
1114
+ onChange?.(fakeEvent);
1120
1115
  }
1121
1116
  }
1122
1117
  }, [intl.locale, onChange, moneyInputId, props.name, props.value.amount, props.value.currencyCode, toggleAmountHasFocus]);
1123
1118
  const handleAmountChange = useCallback(event => {
1124
- var _event$target;
1125
- if (isNumberish((_event$target = event.target) === null || _event$target === void 0 ? void 0 : _event$target.value)) {
1126
- var _event$target2;
1127
- onChange === null || onChange === void 0 || onChange({
1119
+ if (isNumberish(event.target?.value)) {
1120
+ onChange?.({
1128
1121
  persist: () => {},
1129
1122
  target: {
1130
1123
  id: MoneyInput.getAmountInputId(moneyInputId),
1131
1124
  name: getAmountInputName(props.name),
1132
- value: (_event$target2 = event.target) === null || _event$target2 === void 0 ? void 0 : _event$target2.value
1125
+ value: event.target?.value
1133
1126
  }
1134
1127
  });
1135
1128
  }
@@ -1137,7 +1130,7 @@ const MoneyInput = _ref5 => {
1137
1130
  const handleCurrencyChange = useCallback(option => {
1138
1131
  const currencyCode = option.value;
1139
1132
  if (props.value.currencyCode !== currencyCode) {
1140
- var _context6, _amountInputRef$curre;
1133
+ var _context6;
1141
1134
  // When the user changes from a currency with 3 fraction digits to
1142
1135
  // a currency with 2 fraction digits, and when the input value was
1143
1136
  // "9.000" (9), then it should change to "9.00" to reflect the new
@@ -1159,11 +1152,11 @@ const MoneyInput = _ref5 => {
1159
1152
  value: currencyCode || ''
1160
1153
  }
1161
1154
  };
1162
- onChange === null || onChange === void 0 || onChange(fakeCurrencyEvent);
1155
+ onChange?.(fakeCurrencyEvent);
1163
1156
 
1164
1157
  // change amount if necessary
1165
1158
  if (props.value.amount !== nextAmount) {
1166
- onChange === null || onChange === void 0 || onChange({
1159
+ onChange?.({
1167
1160
  persist: () => {},
1168
1161
  target: {
1169
1162
  id: MoneyInput.getAmountInputId(moneyInputId),
@@ -1172,7 +1165,7 @@ const MoneyInput = _ref5 => {
1172
1165
  }
1173
1166
  });
1174
1167
  }
1175
- (_amountInputRef$curre = amountInputRef.current) === null || _amountInputRef$curre === void 0 || _amountInputRef$curre.focus();
1168
+ amountInputRef.current?.focus();
1176
1169
  }
1177
1170
  }, [intl.locale, onChange, moneyInputId, props.name, props.value.amount, props.value.currencyCode]);
1178
1171
  const handleCurrencyFocus = useCallback(() => {
@@ -1216,10 +1209,9 @@ const MoneyInput = _ref5 => {
1216
1209
  const isHighPrecision = !MoneyInput.isEmpty(props.value) && MoneyInput.isHighPrecision(props.value, intl.locale);
1217
1210
  const onBlur = props.onBlur;
1218
1211
  const handleContainerBlur = useCallback(event => {
1219
- var _containerRef$current;
1220
1212
  // ensures that both fields are marked as touched when one of them
1221
1213
  // is blurred
1222
- if (typeof onBlur === 'function' && !((_containerRef$current = containerRef.current) !== null && _containerRef$current !== void 0 && _containerRef$current.contains(event.relatedTarget))) {
1214
+ if (typeof onBlur === 'function' && !containerRef.current?.contains(event.relatedTarget)) {
1223
1215
  onBlur({
1224
1216
  target: {
1225
1217
  id: MoneyInput.getCurrencyDropdownId(moneyInputId),
@@ -1319,7 +1311,7 @@ const MoneyInput = _ref5 => {
1319
1311
  ,
1320
1312
  styles: {
1321
1313
  body: {
1322
- margin: _concatInstanceProperty(_context8 = _concatInstanceProperty(_context9 = "".concat(designTokens.spacing20, " -")).call(_context9, designTokens.spacing10, " ")).call(_context8, designTokens.spacing20, " 0")
1314
+ margin: `${designTokens.spacing20} -${designTokens.spacing10} ${designTokens.spacing20} 0`
1323
1315
  }
1324
1316
  },
1325
1317
  title: intl.formatMessage(messages.highPrecision),
@@ -1341,8 +1333,8 @@ MoneyInput.displayName = 'MoneyInput';
1341
1333
  MoneyInput.getAmountInputId = getAmountInputName;
1342
1334
  MoneyInput.getCurrencyDropdownId = getCurrencyDropdownName;
1343
1335
  MoneyInput.convertToMoneyValue = (value, locale) => {
1344
- var _context0;
1345
- return createMoneyValue(typeof value.amount === 'string' ? _trimInstanceProperty(_context0 = value.amount).call(_context0) : '', locale, value.currencyCode);
1336
+ var _context8;
1337
+ return createMoneyValue(typeof value.amount === 'string' ? _trimInstanceProperty(_context8 = value.amount).call(_context8) : '', locale, value.currencyCode);
1346
1338
  };
1347
1339
  MoneyInput.parseMoneyValue = (moneyValue, locale) => {
1348
1340
  if (!moneyValue) return {
@@ -1365,18 +1357,18 @@ MoneyInput.parseMoneyValue = (moneyValue, locale) => {
1365
1357
  };
1366
1358
  };
1367
1359
  MoneyInput.isEmpty = formValue => {
1368
- var _context1, _context10;
1369
- return !formValue || _trimInstanceProperty(_context1 = formValue.amount).call(_context1) === '' || _trimInstanceProperty(_context10 = formValue.currencyCode).call(_context10) === '';
1360
+ var _context9, _context0;
1361
+ return !formValue || _trimInstanceProperty(_context9 = formValue.amount).call(_context9) === '' || _trimInstanceProperty(_context0 = formValue.currencyCode).call(_context0) === '';
1370
1362
  };
1371
1363
  MoneyInput.isHighPrecision = (formValue, locale) => {
1372
1364
  process.env.NODE_ENV !== "production" ? warning(!MoneyInput.isEmpty(formValue), 'MoneyValue.isHighPrecision may not be called with an empty money value.') : void 0;
1373
1365
  const moneyValue = MoneyInput.convertToMoneyValue(formValue, locale);
1374
- return (moneyValue === null || moneyValue === void 0 ? void 0 : moneyValue.type) === 'highPrecision';
1366
+ return moneyValue?.type === 'highPrecision';
1375
1367
  };
1376
1368
  MoneyInput.isTouched = touched => Boolean(touched && touched.currencyCode && touched.amount);
1377
1369
  var MoneyInput$1 = MoneyInput;
1378
1370
 
1379
1371
  // NOTE: This string will be replaced on build time with the package version.
1380
- var version = "20.5.0";
1372
+ var version = "20.6.0";
1381
1373
 
1382
1374
  export { MoneyInput$1 as default, version };
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@commercetools-uikit/money-input",
3
3
  "description": "A controlled input component for money values with validation states.",
4
- "version": "20.5.0",
4
+ "version": "20.6.0",
5
5
  "bugs": "https://github.com/commercetools/ui-kit/issues",
6
6
  "repository": {
7
7
  "type": "git",
@@ -9,7 +9,13 @@
9
9
  "directory": "packages/components/inputs/money-input"
10
10
  },
11
11
  "homepage": "https://uikit.commercetools.com",
12
- "keywords": ["javascript", "typescript", "design-system", "react", "uikit"],
12
+ "keywords": [
13
+ "javascript",
14
+ "typescript",
15
+ "design-system",
16
+ "react",
17
+ "uikit"
18
+ ],
13
19
  "license": "MIT",
14
20
  "publishConfig": {
15
21
  "access": "public"
@@ -17,24 +23,27 @@
17
23
  "sideEffects": false,
18
24
  "main": "dist/commercetools-uikit-money-input.cjs.js",
19
25
  "module": "dist/commercetools-uikit-money-input.esm.js",
20
- "files": ["dist"],
26
+ "files": [
27
+ "dist"
28
+ ],
21
29
  "dependencies": {
22
30
  "@babel/runtime": "^7.20.13",
23
31
  "@babel/runtime-corejs3": "^7.20.13",
24
- "@commercetools-uikit/constraints": "20.5.0",
25
- "@commercetools-uikit/design-system": "20.5.0",
26
- "@commercetools-uikit/hooks": "20.5.0",
27
- "@commercetools-uikit/icons": "20.5.0",
28
- "@commercetools-uikit/input-utils": "20.5.0",
29
- "@commercetools-uikit/select-utils": "20.5.0",
30
- "@commercetools-uikit/tooltip": "20.5.0",
31
- "@commercetools-uikit/utils": "20.5.0",
32
32
  "@emotion/react": "^11.10.5",
33
33
  "@emotion/styled": "^11.10.5",
34
- "lodash": "4.17.23",
35
- "react-select": "5.10.2"
34
+ "lodash": "4.18.1",
35
+ "react-select": "5.10.2",
36
+ "@commercetools-uikit/constraints": "^20.6.0",
37
+ "@commercetools-uikit/design-system": "^20.6.0",
38
+ "@commercetools-uikit/hooks": "^20.6.0",
39
+ "@commercetools-uikit/icons": "^20.6.0",
40
+ "@commercetools-uikit/input-utils": "^20.6.0",
41
+ "@commercetools-uikit/select-utils": "^20.6.0",
42
+ "@commercetools-uikit/tooltip": "^20.6.0",
43
+ "@commercetools-uikit/utils": "^20.6.0"
36
44
  },
37
45
  "devDependencies": {
46
+ "prop-types": "^15.8.1",
38
47
  "react": "19.2.0",
39
48
  "react-dom": "19.2.0",
40
49
  "react-intl": "^7.1.4"
@@ -44,4 +53,4 @@
44
53
  "react-dom": "19.x",
45
54
  "react-intl": "7.x"
46
55
  }
47
- }
56
+ }