@stella-source/stellasource-dsl 0.1.1 → 0.1.3

package/dist/cjs/index.js

@@ -17811,6 +17811,7 @@ const Wrapper = dt.div `
   min-width: 60px;
   max-width: 400px;
   position: relative;
+  width: 100%;
 `;
 const TextFieldWrapper = dt.div.attrs({
     className: "DSL-stella-textfield",
@@ -17954,17 +17955,24 @@ const PasswordInput = ({ id, className, htmlProps, label, placeholder = "Enter P
 };
 
 const formatDynamicNumbersWithCommas = (num, decimalPlaces) => {
-    const onlyDigitNum = num.toString().replace(/[^0-9.]/g, "");
+    const onlyDigitNum = num.toString().replace(/[^\d.-]/g, "");
     const decimalEnding = onlyDigitNum.endsWith(".");
+    const decimalZero = onlyDigitNum.includes(".") && onlyDigitNum.endsWith("0");
+    if (onlyDigitNum === "" || onlyDigitNum === "-" || onlyDigitNum === ".") {
+        return onlyDigitNum;
+    }
+    if (isNaN(Number(onlyDigitNum))) {
+        return "";
+    }
     return onlyDigitNum
         ? `${Number(onlyDigitNum).toLocaleString("en-US", {
             minimumFractionDigits: 0,
             maximumFractionDigits: decimalPlaces,
-        })}${decimalEnding ? "." : ""}`
+        })}${decimalEnding ? "." : ""}${decimalZero ? "0" : ""}`
         : "";
 };
 
-const NumberInput = ({ id, className, htmlProps, leftCategory, rightCategory, label, onChange, onBlur, onFocus, value, isRequired, maxLength, tooltipText, helperText, endIcon, placeholder = "0", textAlign = "left", isTruncated = false, helperTextAffectLayout = true, hideLabel = false, disabled = false, isLoading = false, hasError = false, thousandSeparator = true, decimalPlaces = 0, ariaDescribedBy, }) => {
+const NumberInput = ({ id, className, htmlProps, leftCategory, rightCategory, label, onChange, onBlur, onFocus, value, isRequired, maxLength, tooltipText, helperText, endIcon, placeholder = "0", textAlign = "left", isTruncated = false, helperTextAffectLayout = true, hideLabel = false, disabled = false, isLoading = false, hasError = false, thousandSeparator = true, decimalPlaces = 0, allowNegativeNumbers = false, ariaDescribedBy, }) => {
     const containerProps = {
         id,
         label,
@@ -17988,16 +17996,21 @@ const NumberInput = ({ id, className, htmlProps, leftCategory, rightCategory, la
         if (e.key === "," ||
             (e.key === "." && decimalPlaces === 0) ||
             (e.key === "." && inputValue.includes(".")) ||
-            (inputValue.includes(".") &&
-                inputValue.split(".")[1]?.length >= decimalPlaces)) {
+            (e.key === "-" && !allowNegativeNumbers) ||
+            (e.key === "-" && inputValue.includes("-"))) {
             e.preventDefault();
         }
     };
     const handleChange = (e) => {
         const value = e.target.value;
-        if (e.currentTarget.checkValidity()) {
+        const inputDecimalPlaces = value.includes(".")
+            ? value.split(".")[1].length
+            : 0;
+        if (e.currentTarget.checkValidity() &&
+            inputDecimalPlaces <= decimalPlaces) {
+            console.log(value);
             setInputValue(value);
-            onChange(value.toString().replace(/[^0-9.]/g, ""));
+            onChange(value.toString().replace(/[^\d.-]/g, ""));
         }
     };
     const handleBlur = (e) => {
@@ -18010,14 +18023,17 @@ const NumberInput = ({ id, className, htmlProps, leftCategory, rightCategory, la
         !onFocus && setPlaceholderText("");
     };
     return (a$i.createElement(TextFieldContainer, { ...containerProps },
-        a$i.createElement(TextFieldInput, { "aria-describedby": `${id}-helper-text ${ariaDescribedBy}`, type: "text", inputMode: "numeric", pattern: "^[\\d,.]*$", id: `${id}-text-field`, disabled: disabled || isLoading, placeholder: placeholderText, onChange: handleChange, onBlur: handleBlur, onFocus: handleFocus, onKeyDown: handleKeyDown, value: thousandSeparator
+        a$i.createElement(TextFieldInput, { "aria-describedby": `${id}-helper-text ${ariaDescribedBy}`, type: "text", inputMode: "numeric", 
+            // prettier-ignore
+            pattern: allowNegativeNumbers ? "^[\\d,\\.\\-]*$" : "^[\\d,\\.]*$", id: `${id}-text-field`, disabled: disabled || isLoading, placeholder: placeholderText, onChange: handleChange, onBlur: handleBlur, onFocus: handleFocus, onKeyDown: handleKeyDown, value: thousandSeparator
                 ? formatDynamicNumbersWithCommas(valueToUse, decimalPlaces)
                 : valueToUse, maxLength: maxLength &&
                 maxLength +
                     (thousandSeparator
                         ? Math.floor(valueToUse.toString().split(".")[0].length / 4)
                         : 0) +
-                    (inputValue.includes(".") ? 1 : 0), "$isTruncated": isTruncated, "$textAlign": textAlign, "$isDisabled": disabled, "$isLoading": isLoading, ...htmlProps })));
+                    (inputValue.includes(".") ? 1 : 0) +
+                    (inputValue.includes("-") ? 1 : 0), "$isTruncated": isTruncated, "$textAlign": textAlign, "$isDisabled": disabled, "$isLoading": isLoading, ...htmlProps })));
 };
 
 exports.HelperText = HelperText;