@commercetools-uikit/money-input 19.11.0 → 19.12.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 (4) hide show
  1. package/dist/commercetools-uikit-money-input.cjs.dev.js +25 -28
  2. package/dist/commercetools-uikit-money-input.cjs.prod.js +24 -27
  3. package/dist/commercetools-uikit-money-input.esm.js +25 -27
  4. package/package.json +9 -9
package/dist/commercetools-uikit-money-input.cjs.dev.js CHANGED
@@ -23,7 +23,6 @@ var _parseInt = require('@babel/runtime-corejs3/core-js-stable/parse-int');
23
23
  var _trimInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/trim');
24
24
  var _mapInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/map');
25
25
  var _findInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/find');
26
- var _concatInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/concat');
27
26
  var react$1 = require('react');
28
27
  var ReactDOM = require('react-dom');
29
28
  var has = require('lodash/has');
@@ -60,7 +59,6 @@ var _parseInt__default = /*#__PURE__*/_interopDefault(_parseInt);
60
59
  var _trimInstanceProperty__default = /*#__PURE__*/_interopDefault(_trimInstanceProperty);
61
60
  var _mapInstanceProperty__default = /*#__PURE__*/_interopDefault(_mapInstanceProperty);
62
61
  var _findInstanceProperty__default = /*#__PURE__*/_interopDefault(_findInstanceProperty);
63
- var _concatInstanceProperty__default = /*#__PURE__*/_interopDefault(_concatInstanceProperty);
64
62
  var ReactDOM__default = /*#__PURE__*/_interopDefault(ReactDOM);
65
63
  var has__default = /*#__PURE__*/_interopDefault(has);
66
64
  var Select__default = /*#__PURE__*/_interopDefault(Select);
@@ -760,7 +758,7 @@ var messages = reactIntl.defineMessages({
760
758
 
761
759
  const _excluded = ["id"];
762
760
  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; }
763
- function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var _context14, _context15; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty__default["default"](_context14 = ownKeys(Object(t), !0)).call(_context14, function (r) { _defineProperty(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](e, _Object$getOwnPropertyDescriptors__default["default"](t)) : _forEachInstanceProperty__default["default"](_context15 = ownKeys(Object(t))).call(_context15, function (r) { _Object$defineProperty__default["default"](e, r, _Object$getOwnPropertyDescriptor__default["default"](t, r)); }); } return e; }
761
+ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var _context12, _context13; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty__default["default"](_context12 = ownKeys(Object(t), !0)).call(_context12, function (r) { _defineProperty(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](e, _Object$getOwnPropertyDescriptors__default["default"](t)) : _forEachInstanceProperty__default["default"](_context13 = ownKeys(Object(t))).call(_context13, function (r) { _Object$defineProperty__default["default"](e, r, _Object$getOwnPropertyDescriptor__default["default"](t, r)); }); } return e; }
764
762
  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)."; }
765
763
  const TooltipWrapper = /*#__PURE__*/_styled__default["default"]("div", process.env.NODE_ENV === "production" ? {
766
764
  target: "e1u90zjc0"
@@ -777,8 +775,8 @@ const TooltipWrapper = /*#__PURE__*/_styled__default["default"]("div", process.e
777
775
  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
778
776
  });
779
777
  const moneyInputSequentialId = utils.createSequentialId('money-input-');
780
- const getPortalId = id => "portal-".concat(id);
781
- const getPortalNode = id => document.querySelector("#".concat(getPortalId(id)));
778
+ const getPortalId = id => `portal-${id}`;
779
+ const getPortalNode = id => document.querySelector(`#${getPortalId(id)}`);
782
780
  const Portal = props => {
783
781
  const domNode = getPortalNode(props.id);
784
782
  if (domNode) {
@@ -840,15 +838,15 @@ const createCurrencySelectStyles = _ref4 => {
840
838
  });
841
839
  return _objectSpread(_objectSpread({}, selectStyles), {}, {
842
840
  control: (base, state) => _objectSpread(_objectSpread({}, selectStyles.control(base, state)), {}, {
843
- padding: "0 ".concat(designSystem.designTokens.spacing25),
841
+ padding: `0 ${designSystem.designTokens.spacing25}`,
844
842
  borderTopRightRadius: '0',
845
843
  borderBottomRightRadius: '0',
846
844
  borderRight: '0',
847
845
  minWidth: '80px',
848
846
  height: '100%',
849
847
  borderColor: (() => {
850
- if (isDisabled) return "".concat(designSystem.designTokens.borderColorForInputWhenDisabled, " !important");
851
- if (isReadOnly) return "".concat(designSystem.designTokens.borderColorForInputWhenReadonly, " !important");
848
+ if (isDisabled) return `${designSystem.designTokens.borderColorForInputWhenDisabled} !important`;
849
+ if (isReadOnly) return `${designSystem.designTokens.borderColorForInputWhenReadonly} !important`;
852
850
  if (hasError) return designSystem.designTokens.borderColorForInputWhenError;
853
851
  if (hasWarning) return designSystem.designTokens.borderColorForInputWhenWarning;
854
852
  if (currencyHasFocus) {
@@ -858,7 +856,7 @@ const createCurrencySelectStyles = _ref4 => {
858
856
  })(),
859
857
  cursor: (() => {
860
858
  if (isDisabled) return 'not-allowed';
861
- if (isReadOnly) return "default";
859
+ if (isReadOnly) return `default`;
862
860
  return 'pointer';
863
861
  })(),
864
862
  backgroundColor: (() => {
@@ -971,7 +969,7 @@ const parseRawAmountToNumber = (rawAmount, locale) => {
971
969
  }
972
970
  fractionsSeparator = fractionsSeparator === '.' ? '\\.' : fractionsSeparator; // here we escape the '.' to use it as regex
973
971
  // The raw amount with only one sparator
974
- const normalizedAmount = String(rawAmount).replace(new RegExp("[^-0-9".concat(fractionsSeparator, "]"), 'g'), '') // we just keep the numbers and the fraction symbol
972
+ const normalizedAmount = String(rawAmount).replace(new RegExp(`[^-0-9${fractionsSeparator}]`, 'g'), '') // we just keep the numbers and the fraction symbol
975
973
  .replace(fractionsSeparator, '.'); // then we change whatever `fractionsSeparator` was to `.` so we can parse it as float
976
974
 
977
975
  return _parseFloat__default["default"](normalizedAmount);
@@ -995,7 +993,7 @@ const createMoneyValue = (rawAmount, locale, currencyCode) => {
995
993
  const currency = currencies$1[currencyCode];
996
994
  if (!currency) return null;
997
995
  if (rawAmount.length === 0 || !utils.isNumberish(rawAmount)) return null;
998
- 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;
996
+ 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;
999
997
  const amountAsNumber = parseRawAmountToNumber(rawAmount, locale);
1000
998
  if (isNaN(amountAsNumber)) return null;
1001
999
 
@@ -1062,8 +1060,8 @@ const formatAmount = (rawAmount, locale, currencyCode) => {
1062
1060
  minimumFractionDigits: fractionDigits
1063
1061
  });
1064
1062
  };
1065
- const getAmountInputName = name => name ? "".concat(name, ".amount") : undefined;
1066
- const getCurrencyDropdownName = name => name ? "".concat(name, ".currencyCode") : undefined;
1063
+ const getAmountInputName = name => name ? `${name}.amount` : undefined;
1064
+ const getCurrencyDropdownName = name => name ? `${name}.currencyCode` : undefined;
1067
1065
  const defaultProps = {
1068
1066
  currencies: [],
1069
1067
  horizontalConstraint: 'scale',
@@ -1088,7 +1086,7 @@ var _ref2 = process.env.NODE_ENV === "production" ? {
1088
1086
  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
1089
1087
  };
1090
1088
  const MoneyInput = props => {
1091
- var _context7, _context9, _context10;
1089
+ var _context7;
1092
1090
  const intl = reactIntl.useIntl();
1093
1091
  const _useToggleState = hooks.useToggleState(false),
1094
1092
  _useToggleState2 = _slicedToArray(_useToggleState, 2),
@@ -1141,13 +1139,13 @@ const MoneyInput = props => {
1141
1139
  value: formattedAmount
1142
1140
  }
1143
1141
  };
1144
- onChange === null || onChange === void 0 || onChange(fakeEvent);
1142
+ onChange?.(fakeEvent);
1145
1143
  }
1146
1144
  }
1147
1145
  }, [intl.locale, onChange, moneyInputId, props.name, props.value.amount, props.value.currencyCode, toggleAmountHasFocus]);
1148
1146
  const handleAmountChange = react$1.useCallback(event => {
1149
1147
  if (utils.isNumberish(event.target.value)) {
1150
- onChange === null || onChange === void 0 || onChange({
1148
+ onChange?.({
1151
1149
  persist: () => {},
1152
1150
  target: {
1153
1151
  id: MoneyInput.getAmountInputId(moneyInputId),
@@ -1160,7 +1158,7 @@ const MoneyInput = props => {
1160
1158
  const handleCurrencyChange = react$1.useCallback(option => {
1161
1159
  const currencyCode = option.value;
1162
1160
  if (props.value.currencyCode !== currencyCode) {
1163
- var _context6, _amountInputRef$curre;
1161
+ var _context6;
1164
1162
  // When the user changes from a currency with 3 fraction digits to
1165
1163
  // a currency with 2 fraction digits, and when the input value was
1166
1164
  // "9.000" (9), then it should change to "9.00" to reflect the new
@@ -1182,11 +1180,11 @@ const MoneyInput = props => {
1182
1180
  value: currencyCode || ''
1183
1181
  }
1184
1182
  };
1185
- onChange === null || onChange === void 0 || onChange(fakeCurrencyEvent);
1183
+ onChange?.(fakeCurrencyEvent);
1186
1184
 
1187
1185
  // change amount if necessary
1188
1186
  if (props.value.amount !== nextAmount) {
1189
- onChange === null || onChange === void 0 || onChange({
1187
+ onChange?.({
1190
1188
  persist: () => {},
1191
1189
  target: {
1192
1190
  id: MoneyInput.getAmountInputId(moneyInputId),
@@ -1195,7 +1193,7 @@ const MoneyInput = props => {
1195
1193
  }
1196
1194
  });
1197
1195
  }
1198
- (_amountInputRef$curre = amountInputRef.current) === null || _amountInputRef$curre === void 0 || _amountInputRef$curre.focus();
1196
+ amountInputRef.current?.focus();
1199
1197
  }
1200
1198
  }, [intl.locale, onChange, moneyInputId, props.name, props.value.amount, props.value.currencyCode]);
1201
1199
  const handleCurrencyFocus = react$1.useCallback(() => {
@@ -1239,10 +1237,9 @@ const MoneyInput = props => {
1239
1237
  const isHighPrecision = !MoneyInput.isEmpty(props.value) && MoneyInput.isHighPrecision(props.value, intl.locale);
1240
1238
  const onBlur = props.onBlur;
1241
1239
  const handleContainerBlur = react$1.useCallback(event => {
1242
- var _containerRef$current;
1243
1240
  // ensures that both fields are marked as touched when one of them
1244
1241
  // is blurred
1245
- if (typeof onBlur === 'function' && !((_containerRef$current = containerRef.current) !== null && _containerRef$current !== void 0 && _containerRef$current.contains(event.relatedTarget))) {
1242
+ if (typeof onBlur === 'function' && !containerRef.current?.contains(event.relatedTarget)) {
1246
1243
  onBlur({
1247
1244
  target: {
1248
1245
  id: MoneyInput.getCurrencyDropdownId(moneyInputId),
@@ -1338,7 +1335,7 @@ const MoneyInput = props => {
1338
1335
  ,
1339
1336
  styles: {
1340
1337
  body: {
1341
- margin: _concatInstanceProperty__default["default"](_context9 = _concatInstanceProperty__default["default"](_context10 = "".concat(designSystem.designTokens.spacing20, " -")).call(_context10, designSystem.designTokens.spacing10, " ")).call(_context9, designSystem.designTokens.spacing20, " 0")
1338
+ margin: `${designSystem.designTokens.spacing20} -${designSystem.designTokens.spacing10} ${designSystem.designTokens.spacing20} 0`
1342
1339
  }
1343
1340
  },
1344
1341
  title: intl.formatMessage(messages.highPrecision),
@@ -1386,8 +1383,8 @@ MoneyInput.displayName = 'MoneyInput';
1386
1383
  MoneyInput.getAmountInputId = getAmountInputName;
1387
1384
  MoneyInput.getCurrencyDropdownId = getCurrencyDropdownName;
1388
1385
  MoneyInput.convertToMoneyValue = (value, locale) => {
1389
- var _context11;
1390
- return createMoneyValue(typeof value.amount === 'string' ? _trimInstanceProperty__default["default"](_context11 = value.amount).call(_context11) : '', locale, value.currencyCode);
1386
+ var _context9;
1387
+ return createMoneyValue(typeof value.amount === 'string' ? _trimInstanceProperty__default["default"](_context9 = value.amount).call(_context9) : '', locale, value.currencyCode);
1391
1388
  };
1392
1389
  MoneyInput.parseMoneyValue = (moneyValue, locale) => {
1393
1390
  if (!moneyValue) return {
@@ -1410,13 +1407,13 @@ MoneyInput.parseMoneyValue = (moneyValue, locale) => {
1410
1407
  };
1411
1408
  };
1412
1409
  MoneyInput.isEmpty = formValue => {
1413
- var _context12, _context13;
1414
- return !formValue || _trimInstanceProperty__default["default"](_context12 = formValue.amount).call(_context12) === '' || _trimInstanceProperty__default["default"](_context13 = formValue.currencyCode).call(_context13) === '';
1410
+ var _context10, _context11;
1411
+ return !formValue || _trimInstanceProperty__default["default"](_context10 = formValue.amount).call(_context10) === '' || _trimInstanceProperty__default["default"](_context11 = formValue.currencyCode).call(_context11) === '';
1415
1412
  };
1416
1413
  MoneyInput.isHighPrecision = (formValue, locale) => {
1417
1414
  process.env.NODE_ENV !== "production" ? utils.warning(!MoneyInput.isEmpty(formValue), 'MoneyValue.isHighPrecision may not be called with an empty money value.') : void 0;
1418
1415
  const moneyValue = MoneyInput.convertToMoneyValue(formValue, locale);
1419
- return (moneyValue === null || moneyValue === void 0 ? void 0 : moneyValue.type) === 'highPrecision';
1416
+ return moneyValue?.type === 'highPrecision';
1420
1417
  };
1421
1418
  MoneyInput.isTouched = touched => Boolean(touched && touched.currencyCode && touched.amount);
1422
1419
  MoneyInput.defaultProps = defaultProps;
package/dist/commercetools-uikit-money-input.cjs.prod.js CHANGED
@@ -23,7 +23,6 @@ var _parseInt = require('@babel/runtime-corejs3/core-js-stable/parse-int');
23
23
  var _trimInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/trim');
24
24
  var _mapInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/map');
25
25
  var _findInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/find');
26
- var _concatInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/concat');
27
26
  var react$1 = require('react');
28
27
  var ReactDOM = require('react-dom');
29
28
  require('lodash/has');
@@ -60,7 +59,6 @@ var _parseInt__default = /*#__PURE__*/_interopDefault(_parseInt);
60
59
  var _trimInstanceProperty__default = /*#__PURE__*/_interopDefault(_trimInstanceProperty);
61
60
  var _mapInstanceProperty__default = /*#__PURE__*/_interopDefault(_mapInstanceProperty);
62
61
  var _findInstanceProperty__default = /*#__PURE__*/_interopDefault(_findInstanceProperty);
63
- var _concatInstanceProperty__default = /*#__PURE__*/_interopDefault(_concatInstanceProperty);
64
62
  var ReactDOM__default = /*#__PURE__*/_interopDefault(ReactDOM);
65
63
  var Select__default = /*#__PURE__*/_interopDefault(Select);
66
64
  var Tooltip__default = /*#__PURE__*/_interopDefault(Tooltip);
@@ -759,7 +757,7 @@ var messages = reactIntl.defineMessages({
759
757
 
760
758
  const _excluded = ["id"];
761
759
  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; }
762
- function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var _context14, _context15; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty__default["default"](_context14 = ownKeys(Object(t), !0)).call(_context14, function (r) { _defineProperty(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](e, _Object$getOwnPropertyDescriptors__default["default"](t)) : _forEachInstanceProperty__default["default"](_context15 = ownKeys(Object(t))).call(_context15, function (r) { _Object$defineProperty__default["default"](e, r, _Object$getOwnPropertyDescriptor__default["default"](t, r)); }); } return e; }
760
+ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var _context12, _context13; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty__default["default"](_context12 = ownKeys(Object(t), !0)).call(_context12, function (r) { _defineProperty(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](e, _Object$getOwnPropertyDescriptors__default["default"](t)) : _forEachInstanceProperty__default["default"](_context13 = ownKeys(Object(t))).call(_context13, function (r) { _Object$defineProperty__default["default"](e, r, _Object$getOwnPropertyDescriptor__default["default"](t, r)); }); } return e; }
763
761
  const TooltipWrapper = /*#__PURE__*/_styled__default["default"]("div", {
764
762
  target: "e1u90zjc0"
765
763
  } )({
@@ -767,8 +765,8 @@ const TooltipWrapper = /*#__PURE__*/_styled__default["default"]("div", {
767
765
  styles: "display:flex"
768
766
  } );
769
767
  const moneyInputSequentialId = utils.createSequentialId('money-input-');
770
- const getPortalId = id => "portal-".concat(id);
771
- const getPortalNode = id => document.querySelector("#".concat(getPortalId(id)));
768
+ const getPortalId = id => `portal-${id}`;
769
+ const getPortalNode = id => document.querySelector(`#${getPortalId(id)}`);
772
770
  const Portal = props => {
773
771
  const domNode = getPortalNode(props.id);
774
772
  if (domNode) {
@@ -821,15 +819,15 @@ const createCurrencySelectStyles = _ref4 => {
821
819
  });
822
820
  return _objectSpread(_objectSpread({}, selectStyles), {}, {
823
821
  control: (base, state) => _objectSpread(_objectSpread({}, selectStyles.control(base, state)), {}, {
824
- padding: "0 ".concat(designSystem.designTokens.spacing25),
822
+ padding: `0 ${designSystem.designTokens.spacing25}`,
825
823
  borderTopRightRadius: '0',
826
824
  borderBottomRightRadius: '0',
827
825
  borderRight: '0',
828
826
  minWidth: '80px',
829
827
  height: '100%',
830
828
  borderColor: (() => {
831
- if (isDisabled) return "".concat(designSystem.designTokens.borderColorForInputWhenDisabled, " !important");
832
- if (isReadOnly) return "".concat(designSystem.designTokens.borderColorForInputWhenReadonly, " !important");
829
+ if (isDisabled) return `${designSystem.designTokens.borderColorForInputWhenDisabled} !important`;
830
+ if (isReadOnly) return `${designSystem.designTokens.borderColorForInputWhenReadonly} !important`;
833
831
  if (hasError) return designSystem.designTokens.borderColorForInputWhenError;
834
832
  if (hasWarning) return designSystem.designTokens.borderColorForInputWhenWarning;
835
833
  if (currencyHasFocus) {
@@ -839,7 +837,7 @@ const createCurrencySelectStyles = _ref4 => {
839
837
  })(),
840
838
  cursor: (() => {
841
839
  if (isDisabled) return 'not-allowed';
842
- if (isReadOnly) return "default";
840
+ if (isReadOnly) return `default`;
843
841
  return 'pointer';
844
842
  })(),
845
843
  backgroundColor: (() => {
@@ -952,7 +950,7 @@ const parseRawAmountToNumber = (rawAmount, locale) => {
952
950
  }
953
951
  fractionsSeparator = fractionsSeparator === '.' ? '\\.' : fractionsSeparator; // here we escape the '.' to use it as regex
954
952
  // The raw amount with only one sparator
955
- const normalizedAmount = String(rawAmount).replace(new RegExp("[^-0-9".concat(fractionsSeparator, "]"), 'g'), '') // we just keep the numbers and the fraction symbol
953
+ const normalizedAmount = String(rawAmount).replace(new RegExp(`[^-0-9${fractionsSeparator}]`, 'g'), '') // we just keep the numbers and the fraction symbol
956
954
  .replace(fractionsSeparator, '.'); // then we change whatever `fractionsSeparator` was to `.` so we can parse it as float
957
955
 
958
956
  return _parseFloat__default["default"](normalizedAmount);
@@ -1042,8 +1040,8 @@ const formatAmount = (rawAmount, locale, currencyCode) => {
1042
1040
  minimumFractionDigits: fractionDigits
1043
1041
  });
1044
1042
  };
1045
- const getAmountInputName = name => name ? "".concat(name, ".amount") : undefined;
1046
- const getCurrencyDropdownName = name => name ? "".concat(name, ".currencyCode") : undefined;
1043
+ const getAmountInputName = name => name ? `${name}.amount` : undefined;
1044
+ const getCurrencyDropdownName = name => name ? `${name}.currencyCode` : undefined;
1047
1045
  const defaultProps = {
1048
1046
  currencies: [],
1049
1047
  horizontalConstraint: 'scale',
@@ -1058,7 +1056,7 @@ var _ref2 = {
1058
1056
  styles: "font-family:inherit;width:100%;position:relative;display:flex"
1059
1057
  } ;
1060
1058
  const MoneyInput = props => {
1061
- var _context7, _context9, _context10;
1059
+ var _context7;
1062
1060
  const intl = reactIntl.useIntl();
1063
1061
  const _useToggleState = hooks.useToggleState(false),
1064
1062
  _useToggleState2 = _slicedToArray(_useToggleState, 2),
@@ -1109,13 +1107,13 @@ const MoneyInput = props => {
1109
1107
  value: formattedAmount
1110
1108
  }
1111
1109
  };
1112
- onChange === null || onChange === void 0 || onChange(fakeEvent);
1110
+ onChange?.(fakeEvent);
1113
1111
  }
1114
1112
  }
1115
1113
  }, [intl.locale, onChange, moneyInputId, props.name, props.value.amount, props.value.currencyCode, toggleAmountHasFocus]);
1116
1114
  const handleAmountChange = react$1.useCallback(event => {
1117
1115
  if (utils.isNumberish(event.target.value)) {
1118
- onChange === null || onChange === void 0 || onChange({
1116
+ onChange?.({
1119
1117
  persist: () => {},
1120
1118
  target: {
1121
1119
  id: MoneyInput.getAmountInputId(moneyInputId),
@@ -1128,7 +1126,7 @@ const MoneyInput = props => {
1128
1126
  const handleCurrencyChange = react$1.useCallback(option => {
1129
1127
  const currencyCode = option.value;
1130
1128
  if (props.value.currencyCode !== currencyCode) {
1131
- var _context6, _amountInputRef$curre;
1129
+ var _context6;
1132
1130
  // When the user changes from a currency with 3 fraction digits to
1133
1131
  // a currency with 2 fraction digits, and when the input value was
1134
1132
  // "9.000" (9), then it should change to "9.00" to reflect the new
@@ -1150,11 +1148,11 @@ const MoneyInput = props => {
1150
1148
  value: currencyCode || ''
1151
1149
  }
1152
1150
  };
1153
- onChange === null || onChange === void 0 || onChange(fakeCurrencyEvent);
1151
+ onChange?.(fakeCurrencyEvent);
1154
1152
 
1155
1153
  // change amount if necessary
1156
1154
  if (props.value.amount !== nextAmount) {
1157
- onChange === null || onChange === void 0 || onChange({
1155
+ onChange?.({
1158
1156
  persist: () => {},
1159
1157
  target: {
1160
1158
  id: MoneyInput.getAmountInputId(moneyInputId),
@@ -1163,7 +1161,7 @@ const MoneyInput = props => {
1163
1161
  }
1164
1162
  });
1165
1163
  }
1166
- (_amountInputRef$curre = amountInputRef.current) === null || _amountInputRef$curre === void 0 || _amountInputRef$curre.focus();
1164
+ amountInputRef.current?.focus();
1167
1165
  }
1168
1166
  }, [intl.locale, onChange, moneyInputId, props.name, props.value.amount, props.value.currencyCode]);
1169
1167
  const handleCurrencyFocus = react$1.useCallback(() => {
@@ -1207,10 +1205,9 @@ const MoneyInput = props => {
1207
1205
  const isHighPrecision = !MoneyInput.isEmpty(props.value) && MoneyInput.isHighPrecision(props.value, intl.locale);
1208
1206
  const onBlur = props.onBlur;
1209
1207
  const handleContainerBlur = react$1.useCallback(event => {
1210
- var _containerRef$current;
1211
1208
  // ensures that both fields are marked as touched when one of them
1212
1209
  // is blurred
1213
- if (typeof onBlur === 'function' && !((_containerRef$current = containerRef.current) !== null && _containerRef$current !== void 0 && _containerRef$current.contains(event.relatedTarget))) {
1210
+ if (typeof onBlur === 'function' && !containerRef.current?.contains(event.relatedTarget)) {
1214
1211
  onBlur({
1215
1212
  target: {
1216
1213
  id: MoneyInput.getCurrencyDropdownId(moneyInputId),
@@ -1306,7 +1303,7 @@ const MoneyInput = props => {
1306
1303
  ,
1307
1304
  styles: {
1308
1305
  body: {
1309
- margin: _concatInstanceProperty__default["default"](_context9 = _concatInstanceProperty__default["default"](_context10 = "".concat(designSystem.designTokens.spacing20, " -")).call(_context10, designSystem.designTokens.spacing10, " ")).call(_context9, designSystem.designTokens.spacing20, " 0")
1306
+ margin: `${designSystem.designTokens.spacing20} -${designSystem.designTokens.spacing10} ${designSystem.designTokens.spacing20} 0`
1310
1307
  }
1311
1308
  },
1312
1309
  title: intl.formatMessage(messages.highPrecision),
@@ -1329,8 +1326,8 @@ MoneyInput.displayName = 'MoneyInput';
1329
1326
  MoneyInput.getAmountInputId = getAmountInputName;
1330
1327
  MoneyInput.getCurrencyDropdownId = getCurrencyDropdownName;
1331
1328
  MoneyInput.convertToMoneyValue = (value, locale) => {
1332
- var _context11;
1333
- return createMoneyValue(typeof value.amount === 'string' ? _trimInstanceProperty__default["default"](_context11 = value.amount).call(_context11) : '', locale, value.currencyCode);
1329
+ var _context9;
1330
+ return createMoneyValue(typeof value.amount === 'string' ? _trimInstanceProperty__default["default"](_context9 = value.amount).call(_context9) : '', locale, value.currencyCode);
1334
1331
  };
1335
1332
  MoneyInput.parseMoneyValue = (moneyValue, locale) => {
1336
1333
  if (!moneyValue) return {
@@ -1346,12 +1343,12 @@ MoneyInput.parseMoneyValue = (moneyValue, locale) => {
1346
1343
  };
1347
1344
  };
1348
1345
  MoneyInput.isEmpty = formValue => {
1349
- var _context12, _context13;
1350
- return !formValue || _trimInstanceProperty__default["default"](_context12 = formValue.amount).call(_context12) === '' || _trimInstanceProperty__default["default"](_context13 = formValue.currencyCode).call(_context13) === '';
1346
+ var _context10, _context11;
1347
+ return !formValue || _trimInstanceProperty__default["default"](_context10 = formValue.amount).call(_context10) === '' || _trimInstanceProperty__default["default"](_context11 = formValue.currencyCode).call(_context11) === '';
1351
1348
  };
1352
1349
  MoneyInput.isHighPrecision = (formValue, locale) => {
1353
1350
  const moneyValue = MoneyInput.convertToMoneyValue(formValue, locale);
1354
- return (moneyValue === null || moneyValue === void 0 ? void 0 : moneyValue.type) === 'highPrecision';
1351
+ return moneyValue?.type === 'highPrecision';
1355
1352
  };
1356
1353
  MoneyInput.isTouched = touched => Boolean(touched && touched.currencyCode && touched.amount);
1357
1354
  MoneyInput.defaultProps = defaultProps;
package/dist/commercetools-uikit-money-input.esm.js CHANGED
@@ -19,7 +19,6 @@ import _parseInt from '@babel/runtime-corejs3/core-js-stable/parse-int';
19
19
  import _trimInstanceProperty from '@babel/runtime-corejs3/core-js-stable/instance/trim';
20
20
  import _mapInstanceProperty from '@babel/runtime-corejs3/core-js-stable/instance/map';
21
21
  import _findInstanceProperty from '@babel/runtime-corejs3/core-js-stable/instance/find';
22
- import _concatInstanceProperty from '@babel/runtime-corejs3/core-js-stable/instance/concat';
23
22
  import { useRef, useCallback } from 'react';
24
23
  import ReactDOM from 'react-dom';
25
24
  import has from 'lodash/has';
@@ -729,7 +728,7 @@ var messages = defineMessages({
729
728
 
730
729
  const _excluded = ["id"];
731
730
  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; }
732
- function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var _context14, _context15; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty(_context14 = ownKeys(Object(t), !0)).call(_context14, function (r) { _defineProperty(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(e, _Object$getOwnPropertyDescriptors(t)) : _forEachInstanceProperty(_context15 = ownKeys(Object(t))).call(_context15, function (r) { _Object$defineProperty(e, r, _Object$getOwnPropertyDescriptor(t, r)); }); } return e; }
731
+ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var _context12, _context13; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty(_context12 = ownKeys(Object(t), !0)).call(_context12, function (r) { _defineProperty(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(e, _Object$getOwnPropertyDescriptors(t)) : _forEachInstanceProperty(_context13 = ownKeys(Object(t))).call(_context13, function (r) { _Object$defineProperty(e, r, _Object$getOwnPropertyDescriptor(t, r)); }); } return e; }
733
732
  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)."; }
734
733
  const TooltipWrapper = /*#__PURE__*/_styled("div", process.env.NODE_ENV === "production" ? {
735
734
  target: "e1u90zjc0"
@@ -746,8 +745,8 @@ const TooltipWrapper = /*#__PURE__*/_styled("div", process.env.NODE_ENV === "pro
746
745
  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
747
746
  });
748
747
  const moneyInputSequentialId = createSequentialId('money-input-');
749
- const getPortalId = id => "portal-".concat(id);
750
- const getPortalNode = id => document.querySelector("#".concat(getPortalId(id)));
748
+ const getPortalId = id => `portal-${id}`;
749
+ const getPortalNode = id => document.querySelector(`#${getPortalId(id)}`);
751
750
  const Portal = props => {
752
751
  const domNode = getPortalNode(props.id);
753
752
  if (domNode) {
@@ -809,15 +808,15 @@ const createCurrencySelectStyles = _ref4 => {
809
808
  });
810
809
  return _objectSpread(_objectSpread({}, selectStyles), {}, {
811
810
  control: (base, state) => _objectSpread(_objectSpread({}, selectStyles.control(base, state)), {}, {
812
- padding: "0 ".concat(designTokens.spacing25),
811
+ padding: `0 ${designTokens.spacing25}`,
813
812
  borderTopRightRadius: '0',
814
813
  borderBottomRightRadius: '0',
815
814
  borderRight: '0',
816
815
  minWidth: '80px',
817
816
  height: '100%',
818
817
  borderColor: (() => {
819
- if (isDisabled) return "".concat(designTokens.borderColorForInputWhenDisabled, " !important");
820
- if (isReadOnly) return "".concat(designTokens.borderColorForInputWhenReadonly, " !important");
818
+ if (isDisabled) return `${designTokens.borderColorForInputWhenDisabled} !important`;
819
+ if (isReadOnly) return `${designTokens.borderColorForInputWhenReadonly} !important`;
821
820
  if (hasError) return designTokens.borderColorForInputWhenError;
822
821
  if (hasWarning) return designTokens.borderColorForInputWhenWarning;
823
822
  if (currencyHasFocus) {
@@ -827,7 +826,7 @@ const createCurrencySelectStyles = _ref4 => {
827
826
  })(),
828
827
  cursor: (() => {
829
828
  if (isDisabled) return 'not-allowed';
830
- if (isReadOnly) return "default";
829
+ if (isReadOnly) return `default`;
831
830
  return 'pointer';
832
831
  })(),
833
832
  backgroundColor: (() => {
@@ -940,7 +939,7 @@ const parseRawAmountToNumber = (rawAmount, locale) => {
940
939
  }
941
940
  fractionsSeparator = fractionsSeparator === '.' ? '\\.' : fractionsSeparator; // here we escape the '.' to use it as regex
942
941
  // The raw amount with only one sparator
943
- const normalizedAmount = String(rawAmount).replace(new RegExp("[^-0-9".concat(fractionsSeparator, "]"), 'g'), '') // we just keep the numbers and the fraction symbol
942
+ const normalizedAmount = String(rawAmount).replace(new RegExp(`[^-0-9${fractionsSeparator}]`, 'g'), '') // we just keep the numbers and the fraction symbol
944
943
  .replace(fractionsSeparator, '.'); // then we change whatever `fractionsSeparator` was to `.` so we can parse it as float
945
944
 
946
945
  return _parseFloat(normalizedAmount);
@@ -964,7 +963,7 @@ const createMoneyValue = (rawAmount, locale, currencyCode) => {
964
963
  const currency = currencies$1[currencyCode];
965
964
  if (!currency) return null;
966
965
  if (rawAmount.length === 0 || !isNumberish(rawAmount)) return null;
967
- 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;
966
+ 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;
968
967
  const amountAsNumber = parseRawAmountToNumber(rawAmount, locale);
969
968
  if (isNaN(amountAsNumber)) return null;
970
969
 
@@ -1031,8 +1030,8 @@ const formatAmount = (rawAmount, locale, currencyCode) => {
1031
1030
  minimumFractionDigits: fractionDigits
1032
1031
  });
1033
1032
  };
1034
- const getAmountInputName = name => name ? "".concat(name, ".amount") : undefined;
1035
- const getCurrencyDropdownName = name => name ? "".concat(name, ".currencyCode") : undefined;
1033
+ const getAmountInputName = name => name ? `${name}.amount` : undefined;
1034
+ const getCurrencyDropdownName = name => name ? `${name}.currencyCode` : undefined;
1036
1035
  const defaultProps = {
1037
1036
  currencies: [],
1038
1037
  horizontalConstraint: 'scale',
@@ -1057,7 +1056,7 @@ var _ref2 = process.env.NODE_ENV === "production" ? {
1057
1056
  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
1058
1057
  };
1059
1058
  const MoneyInput = props => {
1060
- var _context7, _context9, _context10;
1059
+ var _context7;
1061
1060
  const intl = useIntl();
1062
1061
  const _useToggleState = useToggleState(false),
1063
1062
  _useToggleState2 = _slicedToArray(_useToggleState, 2),
@@ -1110,13 +1109,13 @@ const MoneyInput = props => {
1110
1109
  value: formattedAmount
1111
1110
  }
1112
1111
  };
1113
- onChange === null || onChange === void 0 || onChange(fakeEvent);
1112
+ onChange?.(fakeEvent);
1114
1113
  }
1115
1114
  }
1116
1115
  }, [intl.locale, onChange, moneyInputId, props.name, props.value.amount, props.value.currencyCode, toggleAmountHasFocus]);
1117
1116
  const handleAmountChange = useCallback(event => {
1118
1117
  if (isNumberish(event.target.value)) {
1119
- onChange === null || onChange === void 0 || onChange({
1118
+ onChange?.({
1120
1119
  persist: () => {},
1121
1120
  target: {
1122
1121
  id: MoneyInput.getAmountInputId(moneyInputId),
@@ -1129,7 +1128,7 @@ const MoneyInput = props => {
1129
1128
  const handleCurrencyChange = useCallback(option => {
1130
1129
  const currencyCode = option.value;
1131
1130
  if (props.value.currencyCode !== currencyCode) {
1132
- var _context6, _amountInputRef$curre;
1131
+ var _context6;
1133
1132
  // When the user changes from a currency with 3 fraction digits to
1134
1133
  // a currency with 2 fraction digits, and when the input value was
1135
1134
  // "9.000" (9), then it should change to "9.00" to reflect the new
@@ -1151,11 +1150,11 @@ const MoneyInput = props => {
1151
1150
  value: currencyCode || ''
1152
1151
  }
1153
1152
  };
1154
- onChange === null || onChange === void 0 || onChange(fakeCurrencyEvent);
1153
+ onChange?.(fakeCurrencyEvent);
1155
1154
 
1156
1155
  // change amount if necessary
1157
1156
  if (props.value.amount !== nextAmount) {
1158
- onChange === null || onChange === void 0 || onChange({
1157
+ onChange?.({
1159
1158
  persist: () => {},
1160
1159
  target: {
1161
1160
  id: MoneyInput.getAmountInputId(moneyInputId),
@@ -1164,7 +1163,7 @@ const MoneyInput = props => {
1164
1163
  }
1165
1164
  });
1166
1165
  }
1167
- (_amountInputRef$curre = amountInputRef.current) === null || _amountInputRef$curre === void 0 || _amountInputRef$curre.focus();
1166
+ amountInputRef.current?.focus();
1168
1167
  }
1169
1168
  }, [intl.locale, onChange, moneyInputId, props.name, props.value.amount, props.value.currencyCode]);
1170
1169
  const handleCurrencyFocus = useCallback(() => {
@@ -1208,10 +1207,9 @@ const MoneyInput = props => {
1208
1207
  const isHighPrecision = !MoneyInput.isEmpty(props.value) && MoneyInput.isHighPrecision(props.value, intl.locale);
1209
1208
  const onBlur = props.onBlur;
1210
1209
  const handleContainerBlur = useCallback(event => {
1211
- var _containerRef$current;
1212
1210
  // ensures that both fields are marked as touched when one of them
1213
1211
  // is blurred
1214
- if (typeof onBlur === 'function' && !((_containerRef$current = containerRef.current) !== null && _containerRef$current !== void 0 && _containerRef$current.contains(event.relatedTarget))) {
1212
+ if (typeof onBlur === 'function' && !containerRef.current?.contains(event.relatedTarget)) {
1215
1213
  onBlur({
1216
1214
  target: {
1217
1215
  id: MoneyInput.getCurrencyDropdownId(moneyInputId),
@@ -1307,7 +1305,7 @@ const MoneyInput = props => {
1307
1305
  ,
1308
1306
  styles: {
1309
1307
  body: {
1310
- margin: _concatInstanceProperty(_context9 = _concatInstanceProperty(_context10 = "".concat(designTokens.spacing20, " -")).call(_context10, designTokens.spacing10, " ")).call(_context9, designTokens.spacing20, " 0")
1308
+ margin: `${designTokens.spacing20} -${designTokens.spacing10} ${designTokens.spacing20} 0`
1311
1309
  }
1312
1310
  },
1313
1311
  title: intl.formatMessage(messages.highPrecision),
@@ -1355,8 +1353,8 @@ MoneyInput.displayName = 'MoneyInput';
1355
1353
  MoneyInput.getAmountInputId = getAmountInputName;
1356
1354
  MoneyInput.getCurrencyDropdownId = getCurrencyDropdownName;
1357
1355
  MoneyInput.convertToMoneyValue = (value, locale) => {
1358
- var _context11;
1359
- return createMoneyValue(typeof value.amount === 'string' ? _trimInstanceProperty(_context11 = value.amount).call(_context11) : '', locale, value.currencyCode);
1356
+ var _context9;
1357
+ return createMoneyValue(typeof value.amount === 'string' ? _trimInstanceProperty(_context9 = value.amount).call(_context9) : '', locale, value.currencyCode);
1360
1358
  };
1361
1359
  MoneyInput.parseMoneyValue = (moneyValue, locale) => {
1362
1360
  if (!moneyValue) return {
@@ -1379,13 +1377,13 @@ MoneyInput.parseMoneyValue = (moneyValue, locale) => {
1379
1377
  };
1380
1378
  };
1381
1379
  MoneyInput.isEmpty = formValue => {
1382
- var _context12, _context13;
1383
- return !formValue || _trimInstanceProperty(_context12 = formValue.amount).call(_context12) === '' || _trimInstanceProperty(_context13 = formValue.currencyCode).call(_context13) === '';
1380
+ var _context10, _context11;
1381
+ return !formValue || _trimInstanceProperty(_context10 = formValue.amount).call(_context10) === '' || _trimInstanceProperty(_context11 = formValue.currencyCode).call(_context11) === '';
1384
1382
  };
1385
1383
  MoneyInput.isHighPrecision = (formValue, locale) => {
1386
1384
  process.env.NODE_ENV !== "production" ? warning(!MoneyInput.isEmpty(formValue), 'MoneyValue.isHighPrecision may not be called with an empty money value.') : void 0;
1387
1385
  const moneyValue = MoneyInput.convertToMoneyValue(formValue, locale);
1388
- return (moneyValue === null || moneyValue === void 0 ? void 0 : moneyValue.type) === 'highPrecision';
1386
+ return moneyValue?.type === 'highPrecision';
1389
1387
  };
1390
1388
  MoneyInput.isTouched = touched => Boolean(touched && touched.currencyCode && touched.amount);
1391
1389
  MoneyInput.defaultProps = defaultProps;
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": "19.11.0",
4
+ "version": "19.12.0",
5
5
  "bugs": "https://github.com/commercetools/ui-kit/issues",
6
6
  "repository": {
7
7
  "type": "git",
@@ -21,14 +21,14 @@
21
21
  "dependencies": {
22
22
  "@babel/runtime": "^7.20.13",
23
23
  "@babel/runtime-corejs3": "^7.20.13",
24
- "@commercetools-uikit/constraints": "19.11.0",
25
- "@commercetools-uikit/design-system": "19.11.0",
26
- "@commercetools-uikit/hooks": "19.11.0",
27
- "@commercetools-uikit/icons": "19.11.0",
28
- "@commercetools-uikit/input-utils": "19.11.0",
29
- "@commercetools-uikit/select-utils": "19.11.0",
30
- "@commercetools-uikit/tooltip": "19.11.0",
31
- "@commercetools-uikit/utils": "19.11.0",
24
+ "@commercetools-uikit/constraints": "19.12.0",
25
+ "@commercetools-uikit/design-system": "19.12.0",
26
+ "@commercetools-uikit/hooks": "19.12.0",
27
+ "@commercetools-uikit/icons": "19.12.0",
28
+ "@commercetools-uikit/input-utils": "19.12.0",
29
+ "@commercetools-uikit/select-utils": "19.12.0",
30
+ "@commercetools-uikit/tooltip": "19.12.0",
31
+ "@commercetools-uikit/utils": "19.12.0",
32
32
  "@emotion/react": "^11.10.5",
33
33
  "@emotion/styled": "^11.10.5",
34
34
  "lodash": "4.17.21",