@homebound/beam 2.189.0 → 2.190.0

package/dist/inputs/NumberField.d.ts

@@ -28,6 +28,9 @@ export interface NumberFieldProps {
     onEnter?: VoidFunction;
     placeholder?: string;
     errorInTooltip?: true;
+    /** Whether to show comma separation for group numbers.
+     * @default true */
+    useGrouping?: boolean;
 }
 export declare function NumberField(props: NumberFieldProps): import("@emotion/react/jsx-runtime").JSX.Element;
 export declare function formatValue(value: number, factor: number, numFractionDigits: number | undefined, numIntegerDigits: number | undefined): number | undefined;

package/dist/inputs/NumberField.js

@@ -15,7 +15,7 @@ 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, required, readOnly, type, label, onBlur, onFocus, errorMsg, helperText, value, onChange, xss, displayDirection = false, numFractionDigits = type === "dollars" ? 2 : undefined, truncate = false, onEnter, numberFormatOptions, numIntegerDigits, ...otherProps } = props;
+    const { disabled, required, readOnly, type, label, onBlur, onFocus, errorMsg, helperText, value, onChange, xss, displayDirection = false, numFractionDigits = type === "dollars" ? 2 : undefined, truncate = false, onEnter, numberFormatOptions, numIntegerDigits, useGrouping = true, ...otherProps } = props;
     const isDisabled = !!disabled;
     const isReadOnly = !!readOnly;
     const factor = type === "percent" || type === "cents" ? 100 : type === "basisPoints" ? 10000 : 1;
@@ -23,7 +23,9 @@ function NumberField(props) {
     const defaultFormatOptions = (0, react_1.useMemo)(() => ({
         [truncate ? "maximumFractionDigits" : "minimumFractionDigits"]: numFractionDigits,
         ...(numIntegerDigits !== undefined && { minimumIntegerDigits: numIntegerDigits }),
-    }), [truncate, numIntegerDigits]);
+        useGrouping,
+        signDisplay,
+    }), [truncate, numIntegerDigits, useGrouping, signDisplay]);
     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.
@@ -31,17 +33,18 @@ function NumberField(props) {
         if (numberFormatOptions !== undefined) {
             return numberFormatOptions;
         }
-        return type === "percent"
-            ? { style: "percent", signDisplay, ...defaultFormatOptions }
+        const typeFormat = type === "percent"
+            ? { style: "percent" }
             : type === "basisPoints"
-                ? { style: "percent", minimumFractionDigits: 2, signDisplay }
+                ? { style: "percent", minimumFractionDigits: 2 }
                 : type === "cents"
-                    ? { style: "currency", currency: "USD", minimumFractionDigits: 2, signDisplay }
+                    ? { style: "currency", currency: "USD", minimumFractionDigits: 2 }
                     : type === "dollars"
-                        ? { style: "currency", currency: "USD", minimumFractionDigits: numFractionDigits !== null && numFractionDigits !== void 0 ? numFractionDigits : 2, signDisplay }
+                        ? { style: "currency", currency: "USD", minimumFractionDigits: numFractionDigits !== null && numFractionDigits !== void 0 ? numFractionDigits : 2 }
                         : type === "days"
-                            ? { style: "unit", unit: "day", unitDisplay: "long", maximumFractionDigits: 0, signDisplay }
-                            : defaultFormatOptions;
+                            ? { style: "unit", unit: "day", unitDisplay: "long", maximumFractionDigits: 0 }
+                            : {};
+        return { ...defaultFormatOptions, ...typeFormat };
     }, [type, numberFormatOptions]);
     const numberParser = (0, react_1.useMemo)(() => new number_1.NumberParser(locale, formatOptions), [locale, formatOptions]);
     const valueRef = (0, react_1.useRef)({ wip: false });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@homebound/beam",
-  "version": "2.189.0",
+  "version": "2.190.0",
   "author": "Homebound",
   "license": "MIT",
   "main": "dist/index.js",