@activecollab/components 2.0.204 → 2.0.206

package/dist/index.js

@@ -642,6 +642,8 @@
    * @param {boolean} [trimDecimals=true] - Whether to trim decimals to the specified number of decimal spaces.
    * @param {number} [decimalSpaces=2] - The number of decimal spaces to keep in the formatted output.
    * @param {"long" | "short"} [format="long"] - The format type, either "long" for full numbers or "short" for shortened numbers with suffixes.
+   * @param {number} [shortenThreshold=1000] - The minimum numeric value at which the number should be shortened
+   *                                           using suffixes. Numbers below this threshold will always be shown in long format.
    *
    * @returns {string} - The formatted number as a string with separators and potentially with decimals.
    *
@@ -655,6 +657,7 @@
     var trimDecimals = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : true;
     var decimalSpaces = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : 2;
     var format = arguments.length > 5 && arguments[5] !== undefined ? arguments[5] : "long";
+    var shortenThreshold = arguments.length > 6 && arguments[6] !== undefined ? arguments[6] : 1000;
     var number = getNumberFromString(n, thousandSeparator, decimalSeperator);
     if (isNaN(number)) {
       return "";
@@ -663,7 +666,8 @@
     var absoluteNumber = Math.abs(number);
     var suffixes = ["", "K", "M", "B", "T"];
     var scale = 0;
-    while (absoluteNumber >= 1000 && scale < suffixes.length - 1 && format === "short") {
+    var shouldShorten = absoluteNumber >= shortenThreshold && format === "short";
+    while (shouldShorten && scale < suffixes.length - 1 && absoluteNumber >= 1000) {
       absoluteNumber /= 1000;
       scale++;
     }
@@ -717,7 +721,7 @@
     var format = arguments.length > 5 && arguments[5] !== undefined ? arguments[5] : "long";
     var currencyCode = arguments.length > 6 && arguments[6] !== undefined ? arguments[6] : "";
     var currencyCodePosition = arguments.length > 7 && arguments[7] !== undefined ? arguments[7] : "right";
-    var formattedNum = formatNumber(n, thousandSeparator, decimalSeperator, trimDecimals, decimalSpaces, format);
+    var formattedNum = formatNumber(n, thousandSeparator, decimalSeperator, trimDecimals, decimalSpaces, format, 10000);
     if (!currencyCode) {
       return formattedNum;
     }
@@ -14672,31 +14676,33 @@
       min = _ref.min,
       max = _ref.max,
       onBlur = _ref.onBlur,
-      update = _ref.update;
+      update = _ref.update,
+      _ref$shortenThreshold = _ref.shortenThreshold,
+      shortenThreshold = _ref$shortenThreshold === void 0 ? 1000 : _ref$shortenThreshold;
     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 formatNumber(value, thousandSeparator, decimalSeparator, trimDecimals, decimalLength, disableAbbreviation ? "long" : "short");
+        return formatNumber(value, thousandSeparator, decimalSeparator, trimDecimals, decimalLength, disableAbbreviation ? "long" : "short", shortenThreshold);
       }),
       _useState2 = _slicedToArray(_useState, 2),
       currentValue = _useState2[0],
       setCurrentValue = _useState2[1];
     var _useState3 = React.useState(function () {
-        return formatNumber(value, thousandSeparator, decimalSeparator, trimDecimals, decimalLength, disableAbbreviation ? "long" : "short");
+        return formatNumber(value, thousandSeparator, decimalSeparator, trimDecimals, decimalLength, disableAbbreviation ? "long" : "short", shortenThreshold);
       }),
       _useState4 = _slicedToArray(_useState3, 2),
       prevValue = _useState4[0],
       setPrevValue = _useState4[1];
     var _useState5 = React.useState(function () {
-        return formatNumber(value, "", decimalSeparator, false, decimalLength, "long");
+        return formatNumber(value, "", decimalSeparator, false, decimalLength, "long", shortenThreshold);
       }),
       _useState6 = _slicedToArray(_useState5, 2),
       unformattedValue = _useState6[0],
       setUnformattedValue = _useState6[1];
     var _useState7 = React.useState(function () {
-        return formatNumber(value, "", decimalSeparator, false, decimalLength, "long");
+        return formatNumber(value, "", decimalSeparator, false, decimalLength, "long", shortenThreshold);
       }),
       _useState8 = _slicedToArray(_useState7, 2),
       unformattedPrevValue = _useState8[0],
@@ -14707,10 +14713,10 @@
       setFocused = _useState10[1];
     React.useEffect(function () {
       if (value !== prevValue && (!focused || update)) {
-        setCurrentValue(formatNumber(value, thousandSeparator, decimalSeparator, trimDecimals, decimalLength, disableAbbreviation ? "long" : "short"));
-        setPrevValue(formatNumber(value, thousandSeparator, decimalSeparator, trimDecimals, decimalLength, disableAbbreviation ? "long" : "short"));
-        setUnformattedValue(formatNumber(value, "", decimalSeparator, false, decimalLength, "long"));
-        setUnformattedPrevValue(formatNumber(value, "", decimalSeparator, false, decimalLength, "long"));
+        setCurrentValue(formatNumber(value, thousandSeparator, decimalSeparator, trimDecimals, decimalLength, disableAbbreviation ? "long" : "short", shortenThreshold));
+        setPrevValue(formatNumber(value, thousandSeparator, decimalSeparator, trimDecimals, decimalLength, disableAbbreviation ? "long" : "short", shortenThreshold));
+        setUnformattedValue(formatNumber(value, "", decimalSeparator, false, decimalLength, "long", shortenThreshold));
+        setUnformattedPrevValue(formatNumber(value, "", decimalSeparator, false, decimalLength, "long", shortenThreshold));
       }
       // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [disableAbbreviation, thousandSeparator, decimalSeparator, decimalLength, trimDecimals, value, focused]);
@@ -14722,10 +14728,10 @@
         if (onChange) onChange(String(unformattedPrevValue));
       } else {
         if (e.target.value.trim().length > 0 && prevValue !== e.target.value) {
-          var _value = formatNumber(currentValue, thousandSeparator, decimalSeparator, trimDecimals, decimalLength, disableAbbreviation ? "long" : "short");
+          var _value = formatNumber(currentValue, thousandSeparator, decimalSeparator, trimDecimals, decimalLength, disableAbbreviation ? "long" : "short", shortenThreshold);
           setPrevValue(_value);
-          setUnformattedPrevValue(formatNumber(currentValue, "", decimalSeparator, false, decimalLength, "long"));
-          setUnformattedValue(formatNumber(currentValue, "", decimalSeparator, false, decimalLength, "long"));
+          setUnformattedPrevValue(formatNumber(currentValue, "", decimalSeparator, false, decimalLength, "long", shortenThreshold));
+          setUnformattedValue(formatNumber(currentValue, "", decimalSeparator, false, decimalLength, "long", shortenThreshold));
           setCurrentValue(_value);
           typeof onSave === "function" && onSave(e);
         } else {
@@ -14744,7 +14750,7 @@
       }
       setFocused(false);
       typeof onBlur === "function" && onBlur(e);
-    }, [onBlur, prevValue, unformattedPrevValue, onChange, currentValue, thousandSeparator, decimalSeparator, trimDecimals, decimalLength, disableAbbreviation, onSave, allowEmptyValue, onCancel]);
+    }, [onBlur, prevValue, unformattedPrevValue, onChange, currentValue, thousandSeparator, decimalSeparator, trimDecimals, decimalLength, disableAbbreviation, shortenThreshold, onSave, allowEmptyValue, onCancel]);
     var updateValue = React.useCallback(function (type) {
       var preformattedValue = String(unformattedValue).replace(thousandSeparator, "").replace(decimalSeparator, ".");
       var numericValue = parseFloat(preformattedValue);
@@ -16210,7 +16216,7 @@
   });
   InputHours.displayName = "InputHours";
 
-  var _excluded$J = ["decimalLength", "decimalSeparator", "disableAbbreviation", "disabled", "disableMacros", "invalid", "step", "thousandSeparator", "value", "onCancel", "onSave", "onEnterKeyPress", "allowEmptyValue", "onChange", "onClick", "limit", "placeholder", "trimDecimals", "min", "max", "onBlur", "update"];
+  var _excluded$J = ["decimalLength", "decimalSeparator", "disableAbbreviation", "disabled", "disableMacros", "invalid", "step", "thousandSeparator", "value", "onCancel", "onSave", "onEnterKeyPress", "allowEmptyValue", "onChange", "onClick", "limit", "placeholder", "trimDecimals", "min", "max", "onBlur", "update", "shortenThreshold"];
   var InputNumber = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     var _ref$decimalLength = _ref.decimalLength,
       decimalLength = _ref$decimalLength === void 0 ? 2 : _ref$decimalLength,
@@ -16242,6 +16248,8 @@
       externalOnBlur = _ref.onBlur,
       _ref$update = _ref.update,
       update = _ref$update === void 0 ? false : _ref$update,
+      _ref$shortenThreshold = _ref.shortenThreshold,
+      shortenThreshold = _ref$shortenThreshold === void 0 ? 1000 : _ref$shortenThreshold,
       rest = _objectWithoutProperties(_ref, _excluded$J);
     var inputRef = React.useRef(null);
     var handleRef = useForkRef(ref, inputRef);
@@ -16264,7 +16272,8 @@
         min,
         max,
         onBlur: externalOnBlur,
-        update
+        update,
+        shortenThreshold
       }, inputRef),
       value = _useInputNumber.value,
       onBlur = _useInputNumber.onBlur,
@@ -16318,6 +16327,7 @@
       align: "right",
       ref: ref,
       disabled: disabled,
+      shortenThreshold: 10000,
       endAdornment: endAdornment && /*#__PURE__*/React__default["default"].createElement(InputAdornment, {
         disablePointerEvents: disabled
       }, endAdornment)
@@ -19859,7 +19869,8 @@
       _ref$stroke = _ref.stroke,
       stroke = _ref$stroke === void 0 ? 3 : _ref$stroke,
       _ref$width = _ref.width,
-      width = _ref$width === void 0 ? 100 : _ref$width;
+      width = _ref$width === void 0 ? 100 : _ref$width,
+      className = _ref.className;
     var progressNumber = React.useMemo(function () {
       var width = progress;
       if (progress > 100) {
@@ -19888,7 +19899,7 @@
       return stroke_min;
     }, [stroke]);
     return /*#__PURE__*/React__default["default"].createElement(StyledProgressBar, {
-      className: "c-progress-bar",
+      className: classNames__default["default"]("c-progress-bar", className),
       $color: backgroundColor,
       $width: widthPercent
     }, /*#__PURE__*/React__default["default"].createElement(StyledProgressBarProgress, {
@@ -20684,7 +20695,8 @@
         onClick: externalOnClick,
         trimDecimals,
         min,
-        max
+        max,
+        shortenThreshold: 10000
       }, inputRef),
       value = _useInputNumber.value,
       onBlur = _useInputNumber.onBlur,