@stella-source/stellasource-dsl 0.1.1 → 0.1.3

package/dist/cjs/types/components/TextField/NumberInput/NumberInput.d.ts

@@ -1,4 +1,4 @@
 import React from "react";
 import { NumberInputProps } from "./types";
-declare const NumberInput: ({ id, className, htmlProps, leftCategory, rightCategory, label, onChange, onBlur, onFocus, value, isRequired, maxLength, tooltipText, helperText, endIcon, placeholder, textAlign, isTruncated, helperTextAffectLayout, hideLabel, disabled, isLoading, hasError, thousandSeparator, decimalPlaces, ariaDescribedBy, }: NumberInputProps) => React.JSX.Element;
+declare const NumberInput: ({ id, className, htmlProps, leftCategory, rightCategory, label, onChange, onBlur, onFocus, value, isRequired, maxLength, tooltipText, helperText, endIcon, placeholder, textAlign, isTruncated, helperTextAffectLayout, hideLabel, disabled, isLoading, hasError, thousandSeparator, decimalPlaces, allowNegativeNumbers, ariaDescribedBy, }: NumberInputProps) => React.JSX.Element;
 export default NumberInput;

package/dist/cjs/types/components/TextField/NumberInput/types.d.ts

@@ -27,6 +27,7 @@ export interface NumberInputProps {
     rightCategory?: `${TextFieldRightCategory}`;
     thousandSeparator?: boolean;
     decimalPlaces?: number;
+    allowNegativeNumbers?: boolean;
     /** for any extra text elements that need to be associated */
     ariaDescribedBy?: string;
     htmlProps?: HTMLAttributes<HTMLInputElement>;

package/dist/esm/index.esm.js

@@ -17791,6 +17791,7 @@ const Wrapper = dt.div `
   min-width: 60px;
   max-width: 400px;
   position: relative;
+  width: 100%;
 `;
 const TextFieldWrapper = dt.div.attrs({
     className: "DSL-stella-textfield",
@@ -17934,17 +17935,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,
@@ -17968,16 +17976,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) => {
@@ -17990,14 +18003,17 @@ const NumberInput = ({ id, className, htmlProps, leftCategory, rightCategory, la
         !onFocus && setPlaceholderText("");
     };
     return (a__default.createElement(TextFieldContainer, { ...containerProps },
-        a__default.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__default.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 })));
 };
 
 export { HelperText, IconButton, Label, Loader, NumberInput, PasswordInput, StellaButton, StellaButtonVariant, StellaIcon, Styles, TextInput, Tooltip };