@homebound/beam 2.188.0 → 2.190.0

package/dist/inputs/NumberField.d.ts

@@ -22,9 +22,15 @@ export interface NumberFieldProps {
     xss?: Xss<"textAlign" | "justifyContent">;
     displayDirection?: boolean;
     numFractionDigits?: number;
+    numIntegerDigits?: number;
     numberFormatOptions?: Intl.NumberFormatOptions;
     truncate?: boolean;
     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): number | undefined;
+export declare function formatValue(value: number, factor: number, numFractionDigits: number | undefined, numIntegerDigits: number | undefined): number | undefined;

package/dist/inputs/NumberField.js

@@ -15,31 +15,37 @@ 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, ...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;
     const signDisplay = displayDirection ? "exceptZero" : "auto";
-    const fractionFormatOptions = { [truncate ? "maximumFractionDigits" : "minimumFractionDigits"]: numFractionDigits };
+    const defaultFormatOptions = (0, react_1.useMemo)(() => ({
+        [truncate ? "maximumFractionDigits" : "minimumFractionDigits"]: numFractionDigits,
+        ...(numIntegerDigits !== undefined && { minimumIntegerDigits: 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.
     const formatOptions = (0, react_1.useMemo)(() => {
-        if (props.numberFormatOptions !== undefined) {
-            return props.numberFormatOptions;
+        if (numberFormatOptions !== undefined) {
+            return numberFormatOptions;
         }
-        return type === "percent"
-            ? { style: "percent", signDisplay, ...fractionFormatOptions }
+        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 }
-                            : fractionFormatOptions;
-    }, [type]);
+                            ? { 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 });
     // We can use this for both useNumberFieldState + useNumberField
@@ -49,7 +55,7 @@ function NumberField(props) {
         value: valueRef.current.wip ? valueRef.current.value : value === undefined ? Number.NaN : value / factor,
         // // This is called on blur with the final/committed value.
         onChange: (value) => {
-            onChange(formatValue(value, factor, numFractionDigits));
+            onChange(formatValue(value, factor, numFractionDigits, numIntegerDigits));
         },
         onFocus: () => {
             valueRef.current = { wip: true, value: value === undefined ? Number.NaN : value / factor };
@@ -69,6 +75,7 @@ function NumberField(props) {
         isDisabled,
         isReadOnly,
         formatOptions,
+        ...otherProps,
     };
     const state = (0, react_stately_1.useNumberFieldState)(useProps);
     const inputRef = (0, react_1.useRef)(null);
@@ -82,16 +89,28 @@ function NumberField(props) {
         // This is called on each DOM change, to push the latest value into the field
         onChange: (rawInputValue) => {
             const parsedValue = numberParser.parse(rawInputValue || "");
-            onChange(formatValue(parsedValue, factor, numFractionDigits));
+            onChange(formatValue(parsedValue, factor, numFractionDigits, numIntegerDigits));
         }, inputRef: inputRef, onBlur: onBlur, onFocus: onFocus, errorMsg: errorMsg, helperText: helperText, tooltip: (0, components_1.resolveTooltip)(disabled, undefined, readOnly) }, otherProps), void 0));
 }
 exports.NumberField = NumberField;
-function formatValue(value, factor, numFractionDigits) {
+function formatValue(value, factor, numFractionDigits, numIntegerDigits) {
     // 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;
+    const decimalAdjusted = Number.isNaN(value)
+        ? undefined
+        : Math.round(value * factor * maybeAdjustForDecimals) / maybeAdjustForDecimals;
+    if (numIntegerDigits === undefined || decimalAdjusted === undefined) {
+        return decimalAdjusted;
+    }
+    // If `numIntegerDigits` is defined, then we must truncate that manually, so that 1234.56 can turn into 34.56
+    const fractionalValue = Math.round((decimalAdjusted % 1) * maybeAdjustForDecimals) / maybeAdjustForDecimals;
+    const maybeNegate = decimalAdjusted < 0 ? -1 : 1;
+    const trimmedInteger = Number(Math.trunc(Math.abs(decimalAdjusted))
+        .toString()
+        .slice(-1 * numIntegerDigits));
+    return (trimmedInteger + fractionalValue) * maybeNegate;
 }
 exports.formatValue = formatValue;

package/dist/inputs/TextFieldBase.d.ts

@@ -2,7 +2,7 @@ import type { NumberFieldAria } from "@react-aria/numberfield";
 import { InputHTMLAttributes, LabelHTMLAttributes, MutableRefObject, ReactNode, TextareaHTMLAttributes } from "react";
 import { Only } from "../Css";
 import { BeamTextFieldProps, TextFieldXss } from "../interfaces";
-export interface TextFieldBaseProps<X> extends Pick<BeamTextFieldProps<X>, "label" | "required" | "errorMsg" | "onBlur" | "onFocus" | "helperText" | "hideLabel" | "placeholder" | "compact" | "borderless" | "visuallyDisabled" | "xss">, Partial<Pick<BeamTextFieldProps<X>, "onChange">> {
+export interface TextFieldBaseProps<X> extends Pick<BeamTextFieldProps<X>, "label" | "required" | "errorMsg" | "errorInTooltip" | "onBlur" | "onFocus" | "helperText" | "hideLabel" | "placeholder" | "compact" | "borderless" | "visuallyDisabled" | "xss">, Partial<Pick<BeamTextFieldProps<X>, "onChange">> {
     labelProps?: LabelHTMLAttributes<HTMLLabelElement>;
     inputProps: InputHTMLAttributes<HTMLInputElement> | TextareaHTMLAttributes<HTMLTextAreaElement>;
     inputRef?: MutableRefObject<HTMLInputElement | HTMLTextAreaElement | null>;

package/dist/inputs/TextFieldBase.js

@@ -17,9 +17,8 @@ const useTestIds_1 = require("../utils/useTestIds");
 function TextFieldBase(props) {
     var _a, _b, _c, _d, _e, _f, _g;
     const { fieldProps } = (0, PresentationContext_1.usePresentationContext)();
-    const { label, required, labelProps, hideLabel = (_a = fieldProps === null || fieldProps === void 0 ? void 0 : fieldProps.hideLabel) !== null && _a !== void 0 ? _a : false, inputProps, inputRef, inputWrapRef, groupProps, compact = (_b = fieldProps === null || fieldProps === void 0 ? void 0 : fieldProps.compact) !== null && _b !== void 0 ? _b : false, errorMsg, helperText, multiline = false, onChange, onBlur, onFocus, xss, endAdornment, startAdornment, inlineLabel, contrast = false, borderless = (_c = fieldProps === null || fieldProps === void 0 ? void 0 : fieldProps.borderless) !== null && _c !== void 0 ? _c : false, textAreaMinHeight = 96, clearable = false, tooltip, visuallyDisabled = (_d = fieldProps === null || fieldProps === void 0 ? void 0 : fieldProps.visuallyDisabled) !== null && _d !== void 0 ? _d : true, } = props;
-    const typeScale = (_e = fieldProps === null || fieldProps === void 0 ? void 0 : fieldProps.typeScale) !== null && _e !== void 0 ? _e : (inputProps.readOnly && !hideLabel ? "smMd" : "sm");
-    const errorInTooltip = (_f = fieldProps === null || fieldProps === void 0 ? void 0 : fieldProps.errorInTooltip) !== null && _f !== void 0 ? _f : false;
+    const { label, required, labelProps, hideLabel = (_a = fieldProps === null || fieldProps === void 0 ? void 0 : fieldProps.hideLabel) !== null && _a !== void 0 ? _a : false, inputProps, inputRef, inputWrapRef, groupProps, compact = (_b = fieldProps === null || fieldProps === void 0 ? void 0 : fieldProps.compact) !== null && _b !== void 0 ? _b : false, errorMsg, helperText, multiline = false, onChange, onBlur, onFocus, xss, endAdornment, startAdornment, inlineLabel, contrast = false, borderless = (_c = fieldProps === null || fieldProps === void 0 ? void 0 : fieldProps.borderless) !== null && _c !== void 0 ? _c : false, textAreaMinHeight = 96, clearable = false, tooltip, visuallyDisabled = (_d = fieldProps === null || fieldProps === void 0 ? void 0 : fieldProps.visuallyDisabled) !== null && _d !== void 0 ? _d : true, errorInTooltip = (_e = fieldProps === null || fieldProps === void 0 ? void 0 : fieldProps.errorInTooltip) !== null && _e !== void 0 ? _e : false, } = props;
+    const typeScale = (_f = fieldProps === null || fieldProps === void 0 ? void 0 : fieldProps.typeScale) !== null && _f !== void 0 ? _f : (inputProps.readOnly && !hideLabel ? "smMd" : "sm");
     const internalProps = props.internalProps || {};
     const { compound = false, forceFocus = false, forceHover = false } = internalProps;
     const errorMessageId = `${inputProps.id}-error`;

package/package.json

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