@ballistix.digital/react-components 9.10.1 → 9.11.0

package/dist/index.js

@@ -12,6 +12,7 @@ var $iA2ta$fortawesomereactfontawesome = require("@fortawesome/react-fontawesome
 var $iA2ta$floatinguireact = require("@floating-ui/react");
 var $iA2ta$headlessuireact = require("@headlessui/react");
 var $iA2ta$reactinputmask = require("@react-input/mask");
+var $iA2ta$reactnumberformat = require("react-number-format");
 var $iA2ta$tanstackreacttable = require("@tanstack/react-table");
 var $iA2ta$reacttailwindcssselect = require("react-tailwindcss-select");
 var $iA2ta$xlsx = require("xlsx");
@@ -1361,6 +1362,7 @@ var $ccdca29d489f3200$export$2e2bcd8739ae039 = $ccdca29d489f3200$var$ProgressTra
 
 
 
+
 const $3369f7d596d23d58$var$base = {
     foot: '',
     hint: 'text-gray-400 text-xs mt-1',
@@ -1650,7 +1652,7 @@ var $47f4a9343fdccb9b$export$2e2bcd8739ae039 = $47f4a9343fdccb9b$var$styles;
 
 
 const $c474e734ef48f77c$var$InputGroup = (props)=>{
-    const { name: name, htmlType: htmlType = 'text', label: label, hint: hint, description: description, placeholder: placeholder, leading: leading, trailing: trailing, required: required, value: value, mask: mask, min: min, max: max, step: step, maxLength: maxLength, rows: rows, error: error, type: type = 'normal', isDisabled: isDisabled, isRequired: isRequired = false, isTouched: isTouched = false, isSolo: isSolo = false, isOptionalLabelHidden: isOptionalLabelHidden = false, onChange: onChange, onClear: onClear, onBlur: onBlur, onClick: onClick, onKeyDown: onKeyDown, setRefOnLoad: setRefOnLoad, styles: stylesOverrides } = props;
+    const { name: name, htmlType: htmlType = 'text', label: label, hint: hint, description: description, placeholder: placeholder, leading: leading, trailing: trailing, required: required, value: value, mask: mask, min: min, max: max, step: step, maxLength: maxLength, rows: rows, error: error, precision: precision, thousandSeparator: thousandSeparator, decimalSeparator: decimalSeparator, currency: currency, type: type = 'normal', isDisabled: isDisabled, isRequired: isRequired = false, isTouched: isTouched = false, isSolo: isSolo = false, isOptionalLabelHidden: isOptionalLabelHidden = false, onChange: onChange, onClear: onClear, onBlur: onBlur, onClick: onClick, onKeyDown: onKeyDown, setRefOnLoad: setRefOnLoad, styles: stylesOverrides } = props;
     const isValid = error === undefined;
     const maskRef = (0, $iA2ta$reactinputmask.useMask)({
         mask: mask?.mask,
@@ -1660,6 +1662,74 @@ const $c474e734ef48f77c$var$InputGroup = (props)=>{
     });
     const defaultRef = (0, $iA2ta$react.useRef)(null);
     const ref = mask ? maskRef : defaultRef;
+    const isNumeric = htmlType === 'number' || htmlType === 'percent' || htmlType === 'currency';
+    const numericValueRef = (0, $iA2ta$react.useRef)(null);
+    const numericFormatProps = (0, $iA2ta$react.useMemo)(()=>{
+        if (htmlType === 'percent') return {
+            decimalScale: precision,
+            suffix: '%'
+        };
+        if (htmlType === 'currency') {
+            const resolvedDecimalSeparator = decimalSeparator ?? ',';
+            return {
+                decimalScale: precision ?? 2,
+                fixedDecimalScale: true,
+                thousandSeparator: thousandSeparator ?? '.',
+                decimalSeparator: resolvedDecimalSeparator,
+                // Numpad decimal keys are typically ".", regardless of locale. A literal "." can never be a
+                // manually-typed thousand separator (grouping is auto-inserted), so it's safe to also accept
+                // it as a decimal keystroke even when the configured decimal separator is something else.
+                allowedDecimalSeparators: Array.from(new Set([
+                    resolvedDecimalSeparator,
+                    '.'
+                ])),
+                prefix: `${currency ?? "\u20AC"} `
+            };
+        }
+        // htmlType === 'number'
+        return {
+            decimalScale: precision,
+            thousandSeparator: thousandSeparator,
+            allowNegative: min === undefined || Number(min) < 0
+        };
+    }, [
+        htmlType,
+        precision,
+        thousandSeparator,
+        decimalSeparator,
+        currency,
+        min
+    ]);
+    const handleNumericValueChange = (values, sourceInfo)=>{
+        numericValueRef.current = values.floatValue ?? null;
+        if (sourceInfo.source !== 'event') return;
+        onChange(values.floatValue ?? null, values.formattedValue);
+    };
+    const handleNumericBlur = (e)=>{
+        if (htmlType === 'number' && numericValueRef.current !== null) {
+            let clamped = numericValueRef.current;
+            if (min !== undefined) clamped = Math.max(Number(min), clamped);
+            if (max !== undefined) clamped = Math.min(Number(max), clamped);
+            if (clamped !== numericValueRef.current) {
+                numericValueRef.current = clamped;
+                onChange(clamped, String(clamped));
+            }
+        }
+        onBlur(e);
+    };
+    const handleNumericKeyDown = (e)=>{
+        if (htmlType === 'number' && (e.key === 'ArrowUp' || e.key === 'ArrowDown')) {
+            e.preventDefault();
+            const stepValue = step !== undefined && step !== 'any' ? Number(step) : 1;
+            const delta = stepValue * (e.key === 'ArrowUp' ? 1 : -1);
+            let next = (numericValueRef.current ?? 0) + delta;
+            if (min !== undefined) next = Math.max(Number(min), next);
+            if (max !== undefined) next = Math.min(Number(max), next);
+            numericValueRef.current = next;
+            onChange(next, String(next));
+        }
+        onKeyDown?.(e);
+    };
     const handleGenerateStyle = ()=>{
         const result = (0, $f0c671820c340322$export$e2d2075c69d9100d)((0, $47f4a9343fdccb9b$export$2e2bcd8739ae039).base);
         const keys = (0, $iA2ta$lodash.concat)((0, $27f90b0cff19565d$export$be5d6ab3c5b84767)((0, $47f4a9343fdccb9b$export$2e2bcd8739ae039).base), (0, $27f90b0cff19565d$export$be5d6ab3c5b84767)((0, $3369f7d596d23d58$export$2e2bcd8739ae039).base), (0, $27f90b0cff19565d$export$be5d6ab3c5b84767)((0, $65bb4d593718fcda$export$2e2bcd8739ae039).base));
@@ -1704,7 +1774,7 @@ const $c474e734ef48f77c$var$InputGroup = (props)=>{
                         className: styles.leading,
                         children: leading
                     }),
-                    !htmlType || htmlType !== 'area' && (0, $iA2ta$reactjsxruntime.jsxs)("div", {
+                    !htmlType || htmlType !== 'area' && !isNumeric && (0, $iA2ta$reactjsxruntime.jsxs)("div", {
                         className: "flex items-center",
                         children: [
                             (0, $iA2ta$reactjsxruntime.jsx)("input", {
@@ -1745,6 +1815,27 @@ const $c474e734ef48f77c$var$InputGroup = (props)=>{
                             })
                         ]
                     }),
+                    isNumeric && (0, $iA2ta$reactjsxruntime.jsx)("div", {
+                        className: "flex items-center",
+                        children: (0, $iA2ta$reactjsxruntime.jsx)((0, $iA2ta$reactnumberformat.NumericFormat), {
+                            getInputRef: ref,
+                            name: name,
+                            id: name,
+                            "data-cy": inputDataCy,
+                            className: styles.input,
+                            placeholder: placeholder,
+                            defaultValue: isSolo ? value : undefined,
+                            value: isSolo ? undefined : value,
+                            valueIsNumericString: true,
+                            inputMode: "decimal",
+                            disabled: isDisabled,
+                            onValueChange: handleNumericValueChange,
+                            onBlur: handleNumericBlur,
+                            onClick: onClick,
+                            onKeyDown: handleNumericKeyDown,
+                            ...numericFormatProps
+                        })
+                    }),
                     htmlType === 'area' && (0, $iA2ta$reactjsxruntime.jsx)("textarea", {
                         rows: rows,
                         name: name,