@homebound/beam 2.101.4 → 2.101.5

package/dist/inputs/NumberField.d.ts

@@ -19,6 +19,8 @@ export interface NumberFieldProps {
     /** Styles overrides */
     xss?: Xss<"textAlign" | "justifyContent">;
     displayDirection?: boolean;
+    numFractionDigits?: number;
+    truncate?: boolean;
 }
 export declare function NumberField(props: NumberFieldProps): import("@emotion/react/jsx-runtime").JSX.Element;
-export declare function parseRawInput(rawInputValue: string | undefined, factor: number, type?: NumberFieldType): number | undefined;
+export declare function formatValue(value: number, factor: number, numFractionDigits: number | undefined): number | undefined;

package/dist/inputs/NumberField.js

@@ -1,7 +1,8 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.parseRawInput = exports.NumberField = void 0;
+exports.formatValue = exports.NumberField = void 0;
 const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
+const number_1 = require("@internationalized/number");
 const react_1 = require("react");
 const react_aria_1 = require("react-aria");
 const react_stately_1 = require("react-stately");
@@ -12,34 +13,34 @@ function NumberField(props) {
     // Determine default alignment based on presentation context
     const { fieldProps } = (0, PresentationContext_1.usePresentationContext)();
     const alignment = (fieldProps === null || fieldProps === void 0 ? void 0 : fieldProps.numberAlignment) === "right" ? Css_1.Css.tr.jcfe.$ : Css_1.Css.tl.jcfs.$;
-    const { disabled = false, required, readOnly = false, type, label, onBlur, onFocus, errorMsg, helperText, value, onChange, xss, displayDirection = false, ...otherProps } = props;
+    const { disabled = false, required, readOnly = false, type, label, onBlur, onFocus, errorMsg, helperText, value, onChange, xss, displayDirection = false, numFractionDigits, truncate = false, ...otherProps } = props;
     const factor = type === "percent" || type === "cents" ? 100 : type === "basisPoints" ? 10000 : 1;
     const signDisplay = displayDirection ? "exceptZero" : "auto";
+    const fractionFormatOptions = { [truncate ? "maximumFractionDigits" : "minimumFractionDigits"]: numFractionDigits };
+    const { locale } = (0, react_aria_1.useLocale)();
     // If formatOptions isn't memo'd, a useEffect in useNumberStateField will cause jank,
     // see: https://github.com/adobe/react-spectrum/issues/1893.
     const formatOptions = (0, react_1.useMemo)(() => {
         return type === "percent"
-            ? { style: "percent", signDisplay }
+            ? { style: "percent", signDisplay, ...fractionFormatOptions }
             : type === "basisPoints"
                 ? { style: "percent", minimumFractionDigits: 2, signDisplay }
                 : type === "cents"
                     ? { style: "currency", currency: "USD", minimumFractionDigits: 2, signDisplay }
                     : type === "days"
                         ? { style: "unit", unit: "day", unitDisplay: "long", maximumFractionDigits: 0, signDisplay }
-                        : undefined;
+                        : fractionFormatOptions;
     }, [type]);
+    const numberParser = (0, react_1.useMemo)(() => new number_1.NumberParser(locale, formatOptions), [locale, formatOptions]);
     const valueRef = (0, react_1.useRef)({ wip: false });
-    const { locale } = (0, react_aria_1.useLocale)();
     // We can use this for both useNumberFieldState + useNumberField
     const useProps = {
         locale,
         // We want percents && cents to be integers, useNumberFieldState excepts them as decimals
         value: valueRef.current.wip ? valueRef.current.value : value === undefined ? Number.NaN : value / factor,
-        // This is called on blur with the final/committed value.
+        // // This is called on blur with the final/committed value.
         onChange: (value) => {
-            // `value` for percentage style inputs will be in a number format, i.e. if input value is 4%, the `value` param will equal `.04`
-            // Reverse the integer/decimal conversion
-            onChange(Number.isNaN(value) ? undefined : factor !== 1 ? Math.round(value * factor) : value);
+            onChange(formatValue(value, factor, numFractionDigits));
         },
         onFocus: () => {
             valueRef.current = { wip: true, value: value === undefined ? Number.NaN : value / factor };
@@ -71,20 +72,17 @@ function NumberField(props) {
     return ((0, jsx_runtime_1.jsx)(TextFieldBase_1.TextFieldBase, Object.assign({ xss: { ...alignment, ...xss }, groupProps: groupProps, labelProps: labelProps, label: label, required: required, inputProps: inputProps, 
         // This is called on each DOM change, to push the latest value into the field
         onChange: (rawInputValue) => {
-            const changeValue = parseRawInput(rawInputValue, factor, type);
-            onChange(changeValue);
+            const parsedValue = numberParser.parse(rawInputValue || "");
+            onChange(formatValue(parsedValue, factor, numFractionDigits));
         }, inputRef: inputRef, onBlur: onBlur, onFocus: onFocus, errorMsg: errorMsg, helperText: helperText, readOnly: readOnly }, otherProps), void 0));
 }
 exports.NumberField = NumberField;
-function parseRawInput(rawInputValue = "", factor, type) {
-    // If the wip value is invalid, i.e. it's `10b`, don't push that back into the field state
-    const wip = parseFloat(rawInputValue);
-    if (isNaN(wip))
-        return;
-    // For percentage values we need to initially divide by 100 in order to get their "number value" ("4%" = .04) for the factor multiplier to be accurate.
-    // For example, if the using basisPoints and the user enters "4.31%", then we would expect the response to be 431 basisPoints. If only basing off the `factor` value, then 4.31 * 10000 = 43100, which would not be correct.
-    const value = type === "percent" || type === "basisPoints" ? wip / 100 : wip;
-    // Since the values returned is exactly what is in the field
-    return factor !== 1 ? Math.round(value * factor) : value;
+function formatValue(value, factor, numFractionDigits) {
+    // We treat percents & cents as (mostly) integers, while useNumberField wants decimals, so
+    // undo that via `* factor` and `Math.round`, but also keep any specifically-requested `numFractionDigits`,
+    // i.e. for `type=percent value=12.34`, `value` will be `0.1234` that we want turn into `12.34`.
+    const maybeAdjustForDecimals = numFractionDigits ? Math.pow(10, numFractionDigits) : 1;
+    // Reverse the integer/decimal conversion
+    return Number.isNaN(value) ? undefined : Math.round(value * factor * maybeAdjustForDecimals) / maybeAdjustForDecimals;
 }
-exports.parseRawInput = parseRawInput;
+exports.formatValue = formatValue;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@homebound/beam",
-  "version": "2.101.4",
+  "version": "2.101.5",
   "author": "Homebound",
   "license": "MIT",
   "main": "dist/index.js",
@@ -34,6 +34,7 @@
   },
   "dependencies": {
     "@homebound/form-state": "^2.2.13",
+    "@internationalized/number": "^3.0.3",
     "@react-aria/utils": "^3.9.0",
     "@react-hook/resize-observer": "^1.2.2",
     "@types/tinycolor2": "^1.4.2",