@activecollab/components 2.0.106 → 2.0.107

package/dist/index.js

@@ -622,6 +622,10 @@
       scale++;
     }
     var formattedNum = scale === 0 ? fixedDecimalSpaces(absoluteNumber, decimalSpaces) : parseFloat(absoluteNumber.toFixed(1));
+    if (formattedNum === 1000 && scale > 0 && scale < 4) {
+      formattedNum = 1;
+      scale++;
+    }
     var result = numberWithSeparator(trimDecimals ? formattedNum : formattedNum.toFixed(decimalSpaces), thousandSeparator, decimalSeperator);
     return isNegative ? "-".concat(result).concat(suffixes[scale]) : "".concat(result).concat(suffixes[scale]);
   };
@@ -12016,7 +12020,13 @@
       trimDecimals = _ref$trimDecimals === void 0 ? true : _ref$trimDecimals,
       limit = _ref.limit,
       _ref$validation = _ref.validation,
-      validation = _ref$validation === void 0 ? validateNumberInput : _ref$validation;
+      validation = _ref$validation === void 0 ? validateNumberInput : _ref$validation,
+      min = _ref.min,
+      max = _ref.max;
+    var isMaxValid = max === undefined || min === undefined || Number(max) >= Number(min);
+    if (!isMaxValid) {
+      console.warn("Warning: The maximum value is set to be lower than the minimum value. The maximum value will be ignored.");
+    }
     var _useState = React.useState(function () {
         return disableAbbreviation ? value : formatNumber(value, thousandSeparator, decimalSeparator, trimDecimals, decimalLength);
       }),
@@ -12035,34 +12045,43 @@
       _useState6 = _slicedToArray(_useState5, 2),
       unformattedValue = _useState6[0],
       setUnformattedValue = _useState6[1];
+    var _useState7 = React.useState(function () {
+        return value;
+      }),
+      _useState8 = _slicedToArray(_useState7, 2),
+      unformattedPrevValue = _useState8[0],
+      setUnformattedPrevValue = _useState8[1];
     React.useEffect(function () {
       if (value !== prevValue) {
         setCurrentValue(disableAbbreviation ? value : formatNumber(value, thousandSeparator, decimalSeparator, trimDecimals, decimalLength));
         setPrevValue(disableAbbreviation ? value : formatNumber(value, thousandSeparator, decimalSeparator, trimDecimals, decimalLength));
         setUnformattedValue(value);
+        setUnformattedPrevValue(value);
       }
       // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [disableAbbreviation, thousandSeparator, decimalSeparator, decimalLength, trimDecimals, value]);
-    var _useState7 = React.useState(false),
-      _useState8 = _slicedToArray(_useState7, 2),
-      focused = _useState8[0],
-      setFocused = _useState8[1];
+    var _useState9 = React.useState(false),
+      _useState10 = _slicedToArray(_useState9, 2),
+      focused = _useState10[0],
+      setFocused = _useState10[1];
     var escapeRef = React.useRef(false);
     var handleBlur = React.useCallback(function (e) {
       if (escapeRef.current) {
         setCurrentValue(prevValue);
-        setUnformattedValue(prevValue);
+        setUnformattedValue(unformattedPrevValue);
+        if (onChange) onChange(String(unformattedPrevValue));
       } else {
         if (e.target.value.trim().length > 0 && prevValue !== e.target.value) {
           var _value = disableAbbreviation ? currentValue : formatNumber(currentValue, thousandSeparator, decimalSeparator, trimDecimals, decimalLength);
           setPrevValue(_value);
+          setUnformattedPrevValue(currentValue);
           setUnformattedValue(currentValue);
           setCurrentValue(_value);
           typeof onSave === "function" && onSave(e);
         } else {
           if (!allowEmptyValue) {
             setCurrentValue(prevValue);
-            setUnformattedValue(prevValue);
+            setUnformattedValue(unformattedPrevValue);
             typeof onCancel === "function" && onCancel(e);
           } else {
             if (typeof onSave === "function" && prevValue !== e.target.value) {
@@ -12074,33 +12093,34 @@
         }
       }
       setFocused(false);
-    }, [prevValue, disableAbbreviation, currentValue, thousandSeparator, decimalSeparator, decimalLength, trimDecimals, onSave, allowEmptyValue, onCancel]);
+    }, [prevValue, unformattedPrevValue, onChange, disableAbbreviation, currentValue, thousandSeparator, decimalSeparator, trimDecimals, decimalLength, onSave, allowEmptyValue, onCancel]);
     var updateValue = React.useCallback(function (type) {
-      var value = String(unformattedValue);
-      var decimalPart = "";
-      var increasedValue = 0;
-      var nonDecimalPart = value.replaceAll(thousandSeparator, "");
-      if (!value) {
-        return;
+      var numericValue = parseFloat(String(unformattedValue));
+      if (isNaN(numericValue)) return;
+      var newValue = numericValue;
+      if (type === "increment") {
+        newValue += step;
+      } else if (type === "decrement") {
+        newValue -= step;
       }
-      if (value.includes(decimalSeparator)) {
-        nonDecimalPart = value.slice(0, value.indexOf(decimalSeparator)).replaceAll(thousandSeparator, "");
+      if (decimalLength !== undefined) {
+        newValue = parseFloat(newValue.toFixed(decimalLength));
+      } else {
+        newValue = parseFloat(newValue.toFixed(2));
       }
-      if (value.includes(decimalSeparator)) {
-        decimalPart = value.slice(value.indexOf(decimalSeparator));
+      if (min !== undefined && newValue < Number(min)) {
+        newValue = Number(min);
       }
-      if (type === "increment") {
-        increasedValue = parseFloat(nonDecimalPart) + step;
-      } else {
-        increasedValue = parseFloat(nonDecimalPart) - step;
+      if (max !== undefined && newValue > Number(max) && isMaxValid) {
+        newValue = Number(max);
       }
-      if (value.includes(decimalSeparator)) {
-        increasedValue = parseFloat(increasedValue.toFixed(decimalLength));
+      if (decimalLength !== undefined && decimalLength === 0) {
+        newValue = Math.round(newValue);
       }
-      var joinedValue = numberWithSeparator(increasedValue, thousandSeparator, decimalSeparator, value.includes(thousandSeparator));
-      setUnformattedValue(decimalPart ? joinedValue + decimalPart : joinedValue);
-      setCurrentValue(decimalPart ? joinedValue + decimalPart : joinedValue);
-    }, [decimalLength, decimalSeparator, step, thousandSeparator, unformattedValue]);
+      setUnformattedValue(newValue);
+      setCurrentValue(newValue);
+      if (onChange) onChange(String(newValue));
+    }, [unformattedValue, decimalLength, min, max, isMaxValid, onChange, step]);
     var handleKeyDown = React.useCallback(function (e) {
       if (e.key === "Enter") {
         e.target.blur();
@@ -12141,6 +12161,18 @@
         e.preventDefault();
         return;
       }
+
+      // Disallow "-" if min is 0 or greater
+      if (e.key === "-" && (min === undefined || Number(min) >= 0)) {
+        e.preventDefault();
+        return;
+      }
+
+      // Disallow decimal separator if decimalLength is 0
+      if (e.key === decimalSeparator && decimalLength === 0) {
+        e.preventDefault();
+        return;
+      }
       var input = e.target;
       var currentValue = input.value;
       var start = input.selectionStart;
@@ -12150,7 +12182,7 @@
         e.preventDefault();
         return;
       }
-    }, [decimalLength, decimalSeparator, disableMacros, inputRef, limit, onCancel, onEnterKeyPress, updateValue, validation]);
+    }, [decimalLength, decimalSeparator, disableMacros, inputRef, limit, min, onCancel, onEnterKeyPress, updateValue, validation]);
     var handleChange = React.useCallback(function (e) {
       var inputValue = e.target.value;
       var numericInput = disableMacros ? inputValue : inputValue.replace(/([0-9.]+)([kmbtKMBT])/, function (_, num, unit) {
@@ -12175,23 +12207,16 @@
         (_inputRef$current2 = inputRef.current) === null || _inputRef$current2 === void 0 || _inputRef$current2.select();
       }
     }, [inputRef]);
-    var inputProps = React.useMemo(function () {
-      return {
-        value: currentValue,
-        onBlur: handleBlur,
-        onKeyDown: handleKeyDown,
-        onChange: handleChange,
-        onClick: handleClick,
-        onDoubleClick: handleDoubleClick,
-        onFocus: handleFocus,
-        focused,
-        unformattedValue
-      };
-    }, [currentValue, handleBlur, handleKeyDown, handleChange, handleClick, handleDoubleClick, handleFocus, focused, unformattedValue]);
     return {
-      inputProps,
-      setCurrentValue,
-      setPrevValue
+      value: currentValue,
+      onBlur: handleBlur,
+      onKeyDown: handleKeyDown,
+      onChange: handleChange,
+      onClick: handleClick,
+      onDoubleClick: handleDoubleClick,
+      onFocus: handleFocus,
+      focused,
+      unformattedValue
     };
   };
 
@@ -13633,7 +13658,7 @@
   });
   InputHours.displayName = "InputHours";
 
-  var _excluded$L = ["decimalLength", "decimalSeparator", "disableAbbreviation", "disabled", "disableMacros", "invalid", "step", "thousandSeparator", "value", "onCancel", "onSave", "onEnterKeyPress", "allowEmptyValue", "onChange", "onClick", "limit", "placeholder", "trimDecimals"];
+  var _excluded$L = ["decimalLength", "decimalSeparator", "disableAbbreviation", "disabled", "disableMacros", "invalid", "step", "thousandSeparator", "value", "onCancel", "onSave", "onEnterKeyPress", "allowEmptyValue", "onChange", "onClick", "limit", "placeholder", "trimDecimals", "min", "max"];
   var InputNumber = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     var _ref$decimalLength = _ref.decimalLength,
       decimalLength = _ref$decimalLength === void 0 ? 2 : _ref$decimalLength,
@@ -13660,6 +13685,8 @@
       placeholder = _ref.placeholder,
       _ref$trimDecimals = _ref.trimDecimals,
       trimDecimals = _ref$trimDecimals === void 0 ? true : _ref$trimDecimals,
+      min = _ref.min,
+      max = _ref.max,
       rest = _objectWithoutProperties(_ref, _excluded$L);
     var inputRef = React.useRef(null);
     var handleRef = useForkRef(ref, inputRef);
@@ -13678,16 +13705,17 @@
         onSave,
         allowEmptyValue,
         limit,
-        trimDecimals
+        trimDecimals,
+        min,
+        max
       }, inputRef),
-      inputProps = _useInputNumber.inputProps;
-    var value = inputProps.value,
-      onBlur = inputProps.onBlur,
-      onKeyDown = inputProps.onKeyDown,
-      onChange = inputProps.onChange,
-      onClick = inputProps.onClick,
-      onDoubleClick = inputProps.onDoubleClick,
-      onFocus = inputProps.onFocus;
+      value = _useInputNumber.value,
+      onBlur = _useInputNumber.onBlur,
+      onKeyDown = _useInputNumber.onKeyDown,
+      onChange = _useInputNumber.onChange,
+      onClick = _useInputNumber.onClick,
+      onFocus = _useInputNumber.onFocus,
+      onDoubleClick = _useInputNumber.onDoubleClick;
     return /*#__PURE__*/React__default["default"].createElement(Input, _extends({}, rest, {
       ref: handleRef,
       placeholder: placeholder,
@@ -17895,7 +17923,7 @@
   });
   EditableHours.displayName = "EditableHours";
 
-  var _excluded$c = ["decimalLength", "decimalSeparator", "disableAbbreviation", "disabled", "disableMacros", "step", "thousandSeparator", "value", "onSave", "onCancel", "className", "allowEmptyValue", "onEnterKeyPress", "onClick", "onChange", "trimDecimals"];
+  var _excluded$c = ["decimalLength", "decimalSeparator", "disableAbbreviation", "disabled", "disableMacros", "step", "thousandSeparator", "value", "onSave", "onCancel", "className", "allowEmptyValue", "onEnterKeyPress", "onClick", "onChange", "trimDecimals", "min", "max"];
   var EditableCurrency = /*#__PURE__*/React__default["default"].forwardRef(function (_ref, ref) {
     var _ref$decimalLength = _ref.decimalLength,
       decimalLength = _ref$decimalLength === void 0 ? 2 : _ref$decimalLength,
@@ -17920,6 +17948,8 @@
       externalOnChange = _ref.onChange,
       _ref$trimDecimals = _ref.trimDecimals,
       trimDecimals = _ref$trimDecimals === void 0 ? true : _ref$trimDecimals,
+      min = _ref.min,
+      max = _ref.max,
       rest = _objectWithoutProperties(_ref, _excluded$c);
     var inputRef = React.useRef(null);
     var handleRef = useForkRef(ref, inputRef);
@@ -17937,18 +17967,19 @@
         onChange: externalOnChange,
         onEnterKeyPress: externalEnterKeyPress,
         onClick: externalOnClick,
-        trimDecimals
+        trimDecimals,
+        min,
+        max
       }, inputRef),
-      inputProps = _useInputNumber.inputProps;
-    var value = inputProps.value,
-      onBlur = inputProps.onBlur,
-      onKeyDown = inputProps.onKeyDown,
-      onChange = inputProps.onChange,
-      onClick = inputProps.onClick,
-      onDoubleClick = inputProps.onDoubleClick,
-      onFocus = inputProps.onFocus,
-      focused = inputProps.focused,
-      unformattedValue = inputProps.unformattedValue;
+      value = _useInputNumber.value,
+      onBlur = _useInputNumber.onBlur,
+      onKeyDown = _useInputNumber.onKeyDown,
+      onChange = _useInputNumber.onChange,
+      onClick = _useInputNumber.onClick,
+      onDoubleClick = _useInputNumber.onDoubleClick,
+      onFocus = _useInputNumber.onFocus,
+      focused = _useInputNumber.focused,
+      unformattedValue = _useInputNumber.unformattedValue;
     var formattedValue = React.useMemo(function () {
       return focused ? value : numberWithSeparator(value !== null && value !== void 0 ? value : "", thousandSeparator, decimalSeparator);
     }, [focused, value, thousandSeparator, decimalSeparator]);