@homebound/beam 2.101.1 → 2.101.5

package/dist/components/Table/GridTable.d.ts

@@ -8,7 +8,7 @@ export declare type GridTableXss = Xss<Margin>;
 export declare const ASC: "ASC";
 export declare const DESC: "DESC";
 export declare type Direction = "ASC" | "DESC";
-export declare const emptyCell: () => ReactNode;
+export declare const emptyCell: GridCellContent;
 /** Tells GridTable we're running in Jest, which forces as=virtual to be as=div, to work in jsdom. */
 export declare function setRunningInJest(): void;
 /** Completely static look & feel, i.e. nothing that is based on row kinds/content. */
@@ -212,7 +212,7 @@ declare type GridRowKind<R extends Kinded, P extends R["kind"]> = DiscriminateUn
  * column being sorted, in which case we use the GridCellContent.value.
  */
 export declare type GridColumn<R extends Kinded, S = {}> = {
-    [K in R["kind"]]: string | (DiscriminateUnion<R, "kind", K> extends {
+    [K in R["kind"]]: string | GridCellContent | (DiscriminateUnion<R, "kind", K> extends {
         data: infer D;
     } ? (data: D, row: GridRowKind<R, K>) => ReactNode | GridCellContent : (row: GridRowKind<R, K>) => ReactNode | GridCellContent);
 } & {

package/dist/components/Table/GridTable.js

@@ -42,8 +42,7 @@ const tinycolor2_1 = __importDefault(require("tinycolor2"));
 const _1 = require(".");
 exports.ASC = "ASC";
 exports.DESC = "DESC";
-const emptyCell = () => (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {}, void 0);
-exports.emptyCell = emptyCell;
+exports.emptyCell = { content: () => (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {}, void 0), value: "" };
 let runningInJest = false;
 /** Tells GridTable we're running in Jest, which forces as=virtual to be as=div, to work in jsdom. */
 function setRunningInJest() {
@@ -304,7 +303,9 @@ function renderVirtual(style, id, columns, headerRows, filteredRows, firstRowMes
         const { paddingBottom, ...otherRootStyles } = (_a = style.rootCss) !== null && _a !== void 0 ? _a : {};
         return { footerStyle: { paddingBottom }, listStyle: { ...style, rootCss: otherRootStyles } };
     }, [style]);
-    return ((0, jsx_runtime_1.jsx)(react_virtuoso_1.Virtuoso, { overscan: 5, ref: virtuosoRef, components: {
+    return ((0, jsx_runtime_1.jsx)(react_virtuoso_1.Virtuoso, { overscan: 5, ref: virtuosoRef, 
+        // Add `minWidth: fit-content` to ensure a sticky header and the virtualized table body maintain same width
+        style: { minWidth: "fit-content" }, components: {
             List: VirtualRoot(listStyle, columns, id, firstLastColumnWidth, xss),
             Footer: () => (0, jsx_runtime_1.jsx)("div", { css: footerStyle }, void 0),
         }, 

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/dist/inputs/TextFieldBase.js

@@ -33,7 +33,7 @@ function TextFieldBase(props) {
     const fieldHeight = 40;
     const compactFieldHeight = 32;
     const fieldStyles = {
-        container: Css_1.Css.df.fdc.w100.maxw((0, Css_1.px)(550)).$,
+        container: Css_1.Css.df.fdc.w100.maxw((0, Css_1.px)(550)).relative.$,
         inputWrapper: {
             ...Css_1.Css[typeScale].df.aic.br4.px1.w100
                 .hPx(fieldHeight - maybeSmaller)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@homebound/beam",
-  "version": "2.101.1",
+  "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",