@homebound/beam 2.101.4 → 2.102.2

package/dist/components/Table/GridTable.js

@@ -81,7 +81,7 @@ exports.setGridTableDefaults = setGridTableDefaults;
  */
 function GridTable(props) {
     var _a;
-    const { id = "grid-table", as = "div", columns, rows, style = defaults.style, rowStyles, stickyHeader = defaults.stickyHeader, stickyOffset = "0", xss, sorting, filter, filterMaxRows, fallbackMessage = "No rows found.", infoMessage, setRowCount, observeRows, persistCollapse, api, } = props;
+    const { id = "gridTable", as = "div", columns, rows, style = defaults.style, rowStyles, stickyHeader = defaults.stickyHeader, stickyOffset = "0", xss, sorting, filter, filterMaxRows, fallbackMessage = "No rows found.", infoMessage, setRowCount, observeRows, persistCollapse, api, } = props;
     const [collapsedIds, collapseAllContext, collapseRowContext] = useToggleIds(rows, persistCollapse);
     // We only use this in as=virtual mode, but keep this here for rowLookup to use
     const virtuosoRef = (0, react_1.useRef)(null);
@@ -492,7 +492,9 @@ function GridRow(props) {
                 currentColspan = isGridCellContent(maybeContent) ? (_a = maybeContent.colspan) !== null && _a !== void 0 ? _a : 1 : 1;
                 const canSortColumn = ((sorting === null || sorting === void 0 ? void 0 : sorting.on) === "client" && column.clientSideSort !== false) ||
                     ((sorting === null || sorting === void 0 ? void 0 : sorting.on) === "server" && !!column.serverSideSortKey);
-                const content = toContent(maybeContent, isHeader, canSortColumn, (sorting === null || sorting === void 0 ? void 0 : sorting.on) === "client", style, as);
+                const alignment = getAlignment(column, maybeContent);
+                const justificationCss = getJustification(column, maybeContent, as, alignment);
+                const content = toContent(maybeContent, isHeader, canSortColumn, (sorting === null || sorting === void 0 ? void 0 : sorting.on) === "client", style, as, alignment);
                 (0, sortRows_1.ensureClientSideSortValueIsSortable)(sorting, isHeader, column, columnIndex, maybeContent);
                 const maybeNestedCardColumnIndex = columnIndex + (style.nestedCards ? 1 : 0);
                 // Note that it seems expensive to calc a per-cell class name/CSS-in-JS output,
@@ -512,7 +514,7 @@ function GridRow(props) {
                     // Then override with first/last cell styling
                     ...getFirstOrLastCellCss(style, columnIndex, columns),
                     // Then override with per-cell/per-row justification/indentation
-                    ...getJustification(column, maybeContent, as),
+                    ...justificationCss,
                     ...getIndentationCss(style, rowStyle, columnIndex, maybeContent),
                     // Then apply any header-specific override
                     ...(isHeader && style.headerCellCss),
@@ -553,7 +555,7 @@ function isJSX(content) {
     return typeof content === "object" && content && "type" in content && "props" in content;
 }
 /** If a column def return just string text for a given row, apply some default styling. */
-function toContent(content, isHeader, canSortColumn, isClientSideSorting, style, as) {
+function toContent(content, isHeader, canSortColumn, isClientSideSorting, style, as, alignment) {
     content = isGridCellContent(content) ? content.content : content;
     if (typeof content === "function") {
         // Actually create the JSX by calling `content()` here (which should be as late as
@@ -572,7 +574,7 @@ function toContent(content, isHeader, canSortColumn, isClientSideSorting, style,
         throw new Error("GridTables with as=virtual & sortable columns should use functions that return JSX, instead of JSX");
     }
     if (content && typeof content === "string" && isHeader && canSortColumn) {
-        return (0, jsx_runtime_1.jsx)(SortHeader_1.SortHeader, { content: content }, void 0);
+        return (0, jsx_runtime_1.jsx)(SortHeader_1.SortHeader, { content: content, iconOnLeft: alignment === "right" }, void 0);
     }
     else if (style.emptyCell && isContentEmpty(content)) {
         // If the content is empty and the user specified an `emptyCell` node, return that.
@@ -650,9 +652,11 @@ const alignmentToTextAlign = {
     center: "center",
     right: "right",
 };
+function getAlignment(column, maybeContent) {
+    return (isGridCellContent(maybeContent) && maybeContent.alignment) || column.align || "left";
+}
 // For alignment, use: 1) cell def, else 2) column def, else 3) left.
-function getJustification(column, maybeContent, as) {
-    const alignment = (isGridCellContent(maybeContent) && maybeContent.alignment) || column.align || "left";
+function getJustification(column, maybeContent, as, alignment) {
     // Always apply text alignment.
     const textAlign = Css_1.Css.add("textAlign", alignmentToTextAlign[alignment]).$;
     if (as === "table") {

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

@@ -13,4 +13,5 @@ import { Properties } from "../../Css";
 export declare function SortHeader(props: {
     content: string;
     xss?: Properties;
+    iconOnLeft?: boolean;
 }): import("@emotion/react/jsx-runtime").JSX.Element;

package/dist/components/Table/SortHeader.js

@@ -20,13 +20,16 @@ const useTestIds_1 = require("../../utils/useTestIds");
  *   current sort state + `toggleSort` function
  */
 function SortHeader(props) {
-    const { content, xss } = props;
+    const { content, xss, iconOnLeft = false } = props;
     const { isHovered, hoverProps } = (0, hooks_1.useHover)({});
     const { sorted, toggleSort } = (0, react_1.useContext)(GridSortContext_1.GridSortContext);
     const tid = (0, useTestIds_1.useTestIds)(props, "sortHeader");
-    return ((0, jsx_runtime_1.jsxs)("div", Object.assign({}, tid, { css: { ...Css_1.Css.df.aic.h100.cursorPointer.selectNone.$, ...xss } }, hoverProps, { onClick: toggleSort }, { children: [content, (0, jsx_runtime_1.jsx)("span", Object.assign({ css: Css_1.Css.fs0.$ }, { children: (0, jsx_runtime_1.jsx)(Icon_1.Icon, Object.assign({ icon: sorted === "DESC" ? "sortDown" : "sortUp", color: sorted !== undefined ? Css_1.Palette.LightBlue700 : Css_1.Palette.Gray400, xss: Css_1.Css.ml1
-                        .visibility("hidden")
-                        .if(isHovered || sorted !== undefined)
-                        .visibility("visible").$, inc: 2 }, tid.icon), void 0) }), void 0)] }), void 0));
+    const icon = ((0, jsx_runtime_1.jsx)("span", Object.assign({ css: Css_1.Css.fs0.$ }, { children: (0, jsx_runtime_1.jsx)(Icon_1.Icon, Object.assign({ icon: sorted === "DESC" ? "sortDown" : "sortUp", color: sorted !== undefined ? Css_1.Palette.LightBlue700 : Css_1.Palette.Gray400, xss: {
+                ...Css_1.Css.ml1.if(iconOnLeft).mr1.ml0.$,
+                ...Css_1.Css.visibility("hidden")
+                    .if(isHovered || sorted !== undefined)
+                    .visibility("visible").$,
+            }, inc: 2 }, tid.icon), void 0) }), void 0));
+    return ((0, jsx_runtime_1.jsxs)("div", Object.assign({}, tid, { css: { ...Css_1.Css.df.aic.h100.cursorPointer.selectNone.$, ...xss } }, hoverProps, { onClick: toggleSort }, { children: [iconOnLeft && icon, content, !iconOnLeft && icon] }), void 0));
 }
 exports.SortHeader = SortHeader;

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

@@ -8,3 +8,5 @@ export declare function dateColumn<T extends Kinded, S = {}>(columnDef: GridColu
 export declare function numericColumn<T extends Kinded, S = {}>(columnDef: GridColumn<T, S>): GridColumn<T, S>;
 /** Provides default styling for a GridColumn representing an Action. */
 export declare function actionColumn<T extends Kinded, S = {}>(columnDef: GridColumn<T, S>): GridColumn<T, S>;
+/** Provides default styling for a GridColumn containing a checkbox. */
+export declare function selectColumn<T extends Kinded, S = {}>(columnDef: GridColumn<T, S>): GridColumn<T, S>;

package/dist/components/Table/columns.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.actionColumn = exports.numericColumn = exports.dateColumn = exports.column = void 0;
+exports.selectColumn = exports.actionColumn = exports.numericColumn = exports.dateColumn = exports.column = void 0;
 /** Provides default styling for a GridColumn representing a Date. */
 function column(columnDef) {
     return { ...columnDef };
@@ -22,3 +22,9 @@ function actionColumn(columnDef) {
     return { clientSideSort: false, ...columnDef, align: "center" };
 }
 exports.actionColumn = actionColumn;
+/** Provides default styling for a GridColumn containing a checkbox. */
+function selectColumn(columnDef) {
+    // Defining `w: 48px` to accommodate for the `16px` wide checkbox and `16px` of padding on either side.
+    return { clientSideSort: false, ...columnDef, align: "center", w: "48px" };
+}
+exports.selectColumn = selectColumn;

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

@@ -5,3 +5,5 @@ export declare const defaultStyle: GridStyle;
 export declare const condensedStyle: GridStyle;
 /** Renders each row as a card. */
 export declare const cardStyle: GridStyle;
+export declare const beamFixedStyle: GridStyle;
+export declare const beamFlexibleStyle: GridStyle;

package/dist/components/Table/styles.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.cardStyle = exports.condensedStyle = exports.defaultStyle = void 0;
+exports.beamFlexibleStyle = exports.beamFixedStyle = exports.cardStyle = exports.condensedStyle = exports.defaultStyle = void 0;
 const Css_1 = require("../../Css");
 /** Our original table look & feel/style. */
 exports.defaultStyle = {
@@ -39,3 +39,13 @@ exports.cardStyle = {
         }).p1.m0.xsEm.gray700.$,
     },
 };
+// Once completely rolled out across all tables in Blueprint, this will change to be the `defaultStyle`.
+exports.beamFixedStyle = {
+    rootCss: Css_1.Css.gray700.$,
+    // Doing a mix of `min` and `max` height of 40 as each cell is currently defining `h100`.
+    headerCellCss: Css_1.Css.xsEm.bgGray200.aic.nowrap.px2.mhPx(40).maxhPx(40).$,
+    // TODO: `cellCss` has incomplete styling at the moment. Will be done as part of SC-8145
+    cellCss: Css_1.Css.xs.bgWhite.aic.nowrap.px2.hPx(40).boxShadow(`inset 0 -1px 0 ${Css_1.Palette.Gray100}`).$,
+};
+// TODO: `cellCss` has incomplete styling at the moment. Will be done as part of SC-8145
+exports.beamFlexibleStyle = { ...exports.beamFixedStyle, cellCss: Css_1.Css.p2.$ };

package/dist/forms/BoundCheckboxField.js

@@ -15,7 +15,7 @@ function BoundCheckboxField(props) {
             return ((0, jsx_runtime_1.jsx)(inputs_1.Checkbox, Object.assign({ label: label, selected: (_a = field.value) !== null && _a !== void 0 ? _a : false, onChange: (selected) => {
                     // We are triggering blur manually for checkbox fields due to its transactional nature
                     onChange(selected);
-                    field.blur();
+                    field.maybeAutoSave();
                 }, errorMsg: field.touched ? field.errors.join(" ") : undefined, onFocus: () => {
                     field.focus();
                     (0, utils_1.maybeCall)(onFocus);

package/dist/forms/BoundCheckboxGroupField.d.ts

@@ -1,6 +1,6 @@
 import { FieldState } from "@homebound/form-state";
 import { CheckboxGroupProps } from "../inputs";
-export declare type BoundCheckboxGroupFieldProps = Omit<CheckboxGroupProps, "values" | "onChange" | "label" | "onBlur" | "onFocus"> & {
+export declare type BoundCheckboxGroupFieldProps = Omit<CheckboxGroupProps, "values" | "onChange" | "label"> & {
     field: FieldState<any, string[] | null | undefined>;
     /** Make optional so that callers can override if they want to. */
     onChange?: (values: string[]) => void;

package/dist/forms/BoundCheckboxGroupField.js

@@ -8,8 +8,17 @@ const utils_1 = require("../utils");
 const defaultLabel_1 = require("../utils/defaultLabel");
 /** Wraps `TextField` and binds it to a form field. */
 function BoundCheckboxGroupField(props) {
-    const { field, onChange = (value) => field.set(value), label = (0, defaultLabel_1.defaultLabel)(field.key), ...others } = props;
+    const { field, onChange = (value) => field.set(value), label = (0, defaultLabel_1.defaultLabel)(field.key), onBlur, onFocus, ...others } = props;
     const testId = (0, utils_1.useTestIds)(props, field.key);
-    return ((0, jsx_runtime_1.jsx)(mobx_react_1.Observer, { children: () => ((0, jsx_runtime_1.jsx)(inputs_1.CheckboxGroup, Object.assign({ label: label, values: field.value || [], onChange: onChange, errorMsg: field.touched ? field.errors.join(" ") : undefined, onBlur: () => field.blur(), onFocus: () => field.focus() }, testId, others), void 0)) }, void 0));
+    return ((0, jsx_runtime_1.jsx)(mobx_react_1.Observer, { children: () => ((0, jsx_runtime_1.jsx)(inputs_1.CheckboxGroup, Object.assign({ label: label, values: field.value || [], onChange: (values) => {
+                onChange(values);
+                field.maybeAutoSave();
+            }, errorMsg: field.touched ? field.errors.join(" ") : undefined, onBlur: () => {
+                field.blur();
+                (0, utils_1.maybeCall)(onBlur);
+            }, onFocus: () => {
+                field.focus();
+                (0, utils_1.maybeCall)(onFocus);
+            } }, testId, others), void 0)) }, void 0));
 }
 exports.BoundCheckboxGroupField = BoundCheckboxGroupField;

package/dist/forms/BoundChipSelectField.js

@@ -9,17 +9,25 @@ const defaultLabel_1 = require("../utils/defaultLabel");
 function BoundChipSelectField(props) {
     const { field, getOptionValue = (opt) => opt.id, // if unset, assume O implements HasId
     getOptionLabel = (opt) => opt.name, // if unset, assume O implements HasName
-    onSelect = (value) => field.set(value), label = (0, defaultLabel_1.defaultLabel)(field.key), onBlur, onFocus, ...others } = props;
+    onSelect = (value) => field.set(value), label = (0, defaultLabel_1.defaultLabel)(field.key), onBlur, onFocus, onCreateNew, ...others } = props;
     const testId = (0, utils_1.useTestIds)(props, field.key);
     return ((0, jsx_runtime_1.jsx)(mobx_react_1.Observer, { children: () => {
             var _a;
-            return ((0, jsx_runtime_1.jsx)(ChipSelectField_1.ChipSelectField, Object.assign({ label: label, value: (_a = field.value) !== null && _a !== void 0 ? _a : undefined, onSelect: onSelect, getOptionLabel: getOptionLabel, getOptionValue: getOptionValue, onBlur: () => {
+            return ((0, jsx_runtime_1.jsx)(ChipSelectField_1.ChipSelectField, Object.assign({ label: label, value: (_a = field.value) !== null && _a !== void 0 ? _a : undefined, onSelect: (value) => {
+                    onSelect(value);
+                    field.maybeAutoSave();
+                }, getOptionLabel: getOptionLabel, getOptionValue: getOptionValue, onBlur: () => {
                     field.blur();
                     (0, utils_1.maybeCall)(onBlur);
                 }, onFocus: () => {
                     field.focus();
                     (0, utils_1.maybeCall)(onFocus);
-                } }, others, testId), void 0));
+                }, onCreateNew: onCreateNew
+                    ? async (v) => {
+                        await onCreateNew(v);
+                        field.maybeAutoSave();
+                    }
+                    : undefined }, others, testId), void 0));
         } }, void 0));
 }
 exports.BoundChipSelectField = BoundChipSelectField;

package/dist/forms/BoundDateField.d.ts

@@ -1,6 +1,6 @@
 import { FieldState } from "@homebound/form-state";
 import { DateFieldProps } from "../inputs";
-export declare type BoundDateFieldProps = Omit<DateFieldProps, "label" | "value" | "onChange" | "onBlur" | "onFocus"> & {
+export declare type BoundDateFieldProps = Omit<DateFieldProps, "label" | "value" | "onChange"> & {
     field: FieldState<any, Date | null | undefined>;
     label?: string;
     onChange?: (value: Date) => void;

package/dist/forms/BoundDateField.js

@@ -8,8 +8,20 @@ const utils_1 = require("../utils");
 const defaultLabel_1 = require("../utils/defaultLabel");
 /** Wraps `TextField` and binds it to a form field. */
 function BoundDateField(props) {
-    const { field, onChange = (value) => field.set(value), label = (0, defaultLabel_1.defaultLabel)(field.key), ...others } = props;
+    const { field, onChange = (value) => field.set(value), label = (0, defaultLabel_1.defaultLabel)(field.key), onBlur, onFocus, onEnter, ...others } = props;
     const testId = (0, utils_1.useTestIds)(props, field.key);
-    return ((0, jsx_runtime_1.jsx)(mobx_react_1.Observer, { children: () => ((0, jsx_runtime_1.jsx)(inputs_1.DateField, Object.assign({ label: label, value: field.value || undefined, onChange: onChange, errorMsg: field.touched ? field.errors.join(" ") : undefined, required: field.required, onBlur: () => field.blur(), onFocus: () => field.focus() }, testId, others), void 0)) }, void 0));
+    return ((0, jsx_runtime_1.jsx)(mobx_react_1.Observer, { children: () => ((0, jsx_runtime_1.jsx)(inputs_1.DateField, Object.assign({ label: label, value: field.value || undefined, onChange: (value) => {
+                onChange(value);
+                field.maybeAutoSave();
+            }, errorMsg: field.touched ? field.errors.join(" ") : undefined, required: field.required, onBlur: () => {
+                field.blur();
+                (0, utils_1.maybeCall)(onBlur);
+            }, onFocus: () => {
+                field.focus();
+                (0, utils_1.maybeCall)(onFocus);
+            }, onEnter: () => {
+                (0, utils_1.maybeCall)(onEnter);
+                field.maybeAutoSave();
+            } }, testId, others), void 0)) }, void 0));
 }
 exports.BoundDateField = BoundDateField;

package/dist/forms/BoundMultiSelectField.d.ts

@@ -1,7 +1,7 @@
 import { FieldState } from "@homebound/form-state/dist/formState";
 import { MultiSelectFieldProps, Value } from "../inputs";
 import { HasIdAndName, Optional } from "../types";
-export declare type BoundMultiSelectFieldProps<O, V extends Value> = Omit<MultiSelectFieldProps<O, V>, "values" | "onSelect" | "onBlur" | "onFocus" | "label"> & {
+export declare type BoundMultiSelectFieldProps<O, V extends Value> = Omit<MultiSelectFieldProps<O, V>, "values" | "onSelect" | "label"> & {
     onSelect?: (values: V[], opts: O[]) => void;
     field: FieldState<any, V[] | null | undefined>;
     label?: string;

package/dist/forms/BoundMultiSelectField.js

@@ -4,16 +4,26 @@ exports.BoundMultiSelectField = void 0;
 const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
 const mobx_react_1 = require("mobx-react");
 const inputs_1 = require("../inputs");
+const utils_1 = require("../utils");
 const defaultLabel_1 = require("../utils/defaultLabel");
 const useTestIds_1 = require("../utils/useTestIds");
 function BoundMultiSelectField(props) {
     const { field, options, readOnly, getOptionValue = (opt) => opt.id, // if unset, assume O implements HasId
     getOptionLabel = (opt) => opt.name, // if unset, assume O implements HasName
-    onSelect = (value) => field.set(value), label = (0, defaultLabel_1.defaultLabel)(field.key), ...others } = props;
+    onSelect = (value) => field.set(value), label = (0, defaultLabel_1.defaultLabel)(field.key), onBlur, onFocus, ...others } = props;
     const testId = (0, useTestIds_1.useTestIds)(props, field.key);
     return ((0, jsx_runtime_1.jsx)(mobx_react_1.Observer, { children: () => {
             var _a;
-            return ((0, jsx_runtime_1.jsx)(inputs_1.MultiSelectField, Object.assign({ label: label, values: (_a = field.value) !== null && _a !== void 0 ? _a : [], onSelect: onSelect, options: options, readOnly: readOnly !== null && readOnly !== void 0 ? readOnly : field.readOnly, errorMsg: field.touched ? field.errors.join(" ") : undefined, required: field.required, getOptionLabel: getOptionLabel, getOptionValue: getOptionValue, onBlur: () => field.blur(), onFocus: () => field.focus() }, others, testId), void 0));
+            return ((0, jsx_runtime_1.jsx)(inputs_1.MultiSelectField, Object.assign({ label: label, values: (_a = field.value) !== null && _a !== void 0 ? _a : [], onSelect: (values, options) => {
+                    onSelect(values, options);
+                    field.maybeAutoSave();
+                }, options: options, readOnly: readOnly !== null && readOnly !== void 0 ? readOnly : field.readOnly, errorMsg: field.touched ? field.errors.join(" ") : undefined, required: field.required, getOptionLabel: getOptionLabel, getOptionValue: getOptionValue, onBlur: () => {
+                    field.blur();
+                    (0, utils_1.maybeCall)(onBlur);
+                }, onFocus: () => {
+                    field.focus();
+                    (0, utils_1.maybeCall)(onFocus);
+                } }, others, testId), void 0));
         } }, void 0));
 }
 exports.BoundMultiSelectField = BoundMultiSelectField;

package/dist/forms/BoundNumberField.d.ts

@@ -1,6 +1,6 @@
 import { FieldState } from "@homebound/form-state";
 import { NumberFieldProps } from "../inputs/NumberField";
-export declare type BoundNumberFieldProps = Omit<NumberFieldProps, "value" | "onChange" | "onBlur" | "onFocus" | "label"> & {
+export declare type BoundNumberFieldProps = Omit<NumberFieldProps, "value" | "onChange" | "label"> & {
     label?: string;
     field: FieldState<any, number | null | undefined>;
     onChange?: (value: number | undefined) => void;

package/dist/forms/BoundNumberField.js

@@ -8,8 +8,17 @@ const utils_1 = require("../utils");
 const defaultLabel_1 = require("../utils/defaultLabel");
 /** Wraps `NumberField` and binds it to a form field. */
 function BoundNumberField(props) {
-    const { field, readOnly, onChange = (value) => field.set(value), label = (0, defaultLabel_1.defaultLabel)(field.key.replace(/InCents$/, "")), type = field.key.endsWith("InCents") ? "cents" : undefined, ...others } = props;
+    const { field, readOnly, onChange = (value) => field.set(value), label = (0, defaultLabel_1.defaultLabel)(field.key.replace(/InCents$/, "")), type = field.key.endsWith("InCents") ? "cents" : undefined, onFocus, onBlur, onEnter, ...others } = props;
     const testId = (0, utils_1.useTestIds)(props, label || field.key);
-    return ((0, jsx_runtime_1.jsx)(mobx_react_1.Observer, { children: () => ((0, jsx_runtime_1.jsx)(NumberField_1.NumberField, Object.assign({ label: label, value: typeof field.value === "number" ? field.value : undefined, onChange: onChange, type: type, readOnly: readOnly !== null && readOnly !== void 0 ? readOnly : field.readOnly, errorMsg: field.touched ? field.errors.join(" ") : undefined, required: field.required, onFocus: () => field.focus(), onBlur: () => field.blur() }, testId, others), void 0)) }, void 0));
+    return ((0, jsx_runtime_1.jsx)(mobx_react_1.Observer, { children: () => ((0, jsx_runtime_1.jsx)(NumberField_1.NumberField, Object.assign({ label: label, value: typeof field.value === "number" ? field.value : undefined, onChange: onChange, type: type, readOnly: readOnly !== null && readOnly !== void 0 ? readOnly : field.readOnly, errorMsg: field.touched ? field.errors.join(" ") : undefined, required: field.required, onFocus: () => {
+                field.focus();
+                (0, utils_1.maybeCall)(onFocus);
+            }, onBlur: () => {
+                field.blur();
+                (0, utils_1.maybeCall)(onBlur);
+            }, onEnter: () => {
+                (0, utils_1.maybeCall)(onEnter);
+                field.maybeAutoSave();
+            } }, testId, others), void 0)) }, void 0));
 }
 exports.BoundNumberField = BoundNumberField;

package/dist/forms/BoundRadioGroupField.d.ts

@@ -1,6 +1,6 @@
 import { FieldState } from "@homebound/form-state";
 import { RadioGroupFieldProps } from "../inputs";
-export declare type BoundRadioGroupFieldProps<K extends string> = Omit<RadioGroupFieldProps<K>, "value" | "onChange" | "label" | "onBlur" | "onFocus"> & {
+export declare type BoundRadioGroupFieldProps<K extends string> = Omit<RadioGroupFieldProps<K>, "value" | "onChange" | "label"> & {
     field: FieldState<any, K | null | undefined>;
     /** Make optional so that callers can override if they want to. */
     onChange?: (value: K) => void;

package/dist/forms/BoundRadioGroupField.js

@@ -8,8 +8,17 @@ const utils_1 = require("../utils");
 const defaultLabel_1 = require("../utils/defaultLabel");
 /** Wraps `TextField` and binds it to a form field. */
 function BoundRadioGroupField(props) {
-    const { field, onChange = (value) => field.set(value), label = (0, defaultLabel_1.defaultLabel)(field.key), ...others } = props;
+    const { field, onChange = (value) => field.set(value), label = (0, defaultLabel_1.defaultLabel)(field.key), onBlur, onFocus, ...others } = props;
     const testId = (0, utils_1.useTestIds)(props, field.key);
-    return ((0, jsx_runtime_1.jsx)(mobx_react_1.Observer, { children: () => ((0, jsx_runtime_1.jsx)(inputs_1.RadioGroupField, Object.assign({ label: label, value: field.value || undefined, onChange: onChange, errorMsg: field.touched ? field.errors.join(" ") : undefined, onBlur: () => field.blur(), onFocus: () => field.focus() }, testId, others), void 0)) }, void 0));
+    return ((0, jsx_runtime_1.jsx)(mobx_react_1.Observer, { children: () => ((0, jsx_runtime_1.jsx)(inputs_1.RadioGroupField, Object.assign({ label: label, value: field.value || undefined, onChange: (value) => {
+                onChange(value);
+                field.maybeAutoSave();
+            }, errorMsg: field.touched ? field.errors.join(" ") : undefined, onBlur: () => {
+                field.blur();
+                (0, utils_1.maybeCall)(onBlur);
+            }, onFocus: () => {
+                field.focus();
+                (0, utils_1.maybeCall)(onFocus);
+            } }, testId, others), void 0)) }, void 0));
 }
 exports.BoundRadioGroupField = BoundRadioGroupField;

package/dist/forms/BoundRichTextField.d.ts

@@ -1,6 +1,6 @@
 import { FieldState } from "@homebound/form-state";
 import { RichTextFieldProps } from "../inputs/RichTextField";
-export declare type BoundRichTextFieldProps = Omit<RichTextFieldProps, "value" | "onChange" | "onBlur" | "onFocus"> & {
+export declare type BoundRichTextFieldProps = Omit<RichTextFieldProps, "value" | "onChange"> & {
     field: FieldState<any, string | null | undefined>;
     onChange?: (value: string | undefined) => void;
 };

package/dist/forms/BoundRichTextField.js

@@ -8,11 +8,17 @@ const utils_1 = require("../utils");
 const defaultLabel_1 = require("../utils/defaultLabel");
 /** Wraps `RichTextField` and binds it to a form field. */
 function BoundRichTextField(props) {
-    const { field, onChange = (value) => field.set(value), label = (0, defaultLabel_1.defaultLabel)(field.key), readOnly, ...others } = props;
+    const { field, onChange = (value) => field.set(value), label = (0, defaultLabel_1.defaultLabel)(field.key), readOnly, onFocus, onBlur, ...others } = props;
     const testId = (0, utils_1.useTestIds)(props, field.key);
     return ((0, jsx_runtime_1.jsx)(mobx_react_1.Observer, { children: () => ((0, jsx_runtime_1.jsx)(RichTextField_1.RichTextField, Object.assign({ label: label, value: field.value || undefined, onChange: onChange, 
             // TODO: Potentially support this in the future?
             // errorMsg={field.touched ? field.errors.join(" ") : undefined}
-            onBlur: () => field.blur(), onFocus: () => field.focus(), readOnly: readOnly !== null && readOnly !== void 0 ? readOnly : field.readOnly }, testId, others), void 0)) }, void 0));
+            onBlur: () => {
+                field.blur();
+                (0, utils_1.maybeCall)(onBlur);
+            }, onFocus: () => {
+                field.focus();
+                (0, utils_1.maybeCall)(onFocus);
+            }, readOnly: readOnly !== null && readOnly !== void 0 ? readOnly : field.readOnly }, testId, others), void 0)) }, void 0));
 }
 exports.BoundRichTextField = BoundRichTextField;

package/dist/forms/BoundSelectField.d.ts

@@ -1,7 +1,7 @@
 import { FieldState } from "@homebound/form-state/dist/formState";
 import { SelectFieldProps, Value } from "../inputs";
 import { HasIdAndName, Optional } from "../types";
-export declare type BoundSelectFieldProps<T, V extends Value> = Omit<SelectFieldProps<T, V>, "value" | "onSelect" | "onBlur" | "onFocus" | "label"> & {
+export declare type BoundSelectFieldProps<T, V extends Value> = Omit<SelectFieldProps<T, V>, "value" | "onSelect" | "label"> & {
     onSelect?: (option: V | undefined) => void;
     field: FieldState<any, V | null | undefined>;
     label?: string;

package/dist/forms/BoundSelectField.js

@@ -4,16 +4,26 @@ exports.BoundSelectField = void 0;
 const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
 const mobx_react_1 = require("mobx-react");
 const inputs_1 = require("../inputs");
+const utils_1 = require("../utils");
 const defaultLabel_1 = require("../utils/defaultLabel");
 const useTestIds_1 = require("../utils/useTestIds");
 function BoundSelectField(props) {
     const { field, options, readOnly, getOptionValue = (opt) => opt.id, // if unset, assume O implements HasId
     getOptionLabel = (opt) => opt.name, // if unset, assume O implements HasName
-    onSelect = (value) => field.set(value), label = (0, defaultLabel_1.defaultLabel)(field.key), ...others } = props;
+    onSelect = (value) => field.set(value), label = (0, defaultLabel_1.defaultLabel)(field.key), onBlur, onFocus, ...others } = props;
     const testId = (0, useTestIds_1.useTestIds)(props, field.key);
     return ((0, jsx_runtime_1.jsx)(mobx_react_1.Observer, { children: () => {
             var _a;
-            return ((0, jsx_runtime_1.jsx)(inputs_1.SelectField, Object.assign({ label: label, value: (_a = field.value) !== null && _a !== void 0 ? _a : undefined, onSelect: onSelect, options: options, readOnly: readOnly !== null && readOnly !== void 0 ? readOnly : field.readOnly, errorMsg: field.touched ? field.errors.join(" ") : undefined, required: field.required, getOptionLabel: getOptionLabel, getOptionValue: getOptionValue, onBlur: () => field.blur(), onFocus: () => field.focus() }, others, testId), void 0));
+            return ((0, jsx_runtime_1.jsx)(inputs_1.SelectField, Object.assign({ label: label, value: (_a = field.value) !== null && _a !== void 0 ? _a : undefined, onSelect: (value) => {
+                    onSelect(value);
+                    field.maybeAutoSave();
+                }, options: options, readOnly: readOnly !== null && readOnly !== void 0 ? readOnly : field.readOnly, errorMsg: field.touched ? field.errors.join(" ") : undefined, required: field.required, getOptionLabel: getOptionLabel, getOptionValue: getOptionValue, onBlur: () => {
+                    field.blur();
+                    (0, utils_1.maybeCall)(onBlur);
+                }, onFocus: () => {
+                    field.focus();
+                    (0, utils_1.maybeCall)(onFocus);
+                } }, others, testId), void 0));
         } }, void 0));
 }
 exports.BoundSelectField = BoundSelectField;

package/dist/forms/BoundSwitchField.js

@@ -13,9 +13,8 @@ function BoundSwitchField(props) {
     return ((0, jsx_runtime_1.jsx)(mobx_react_1.Observer, { children: () => {
             var _a;
             return ((0, jsx_runtime_1.jsx)(inputs_1.Switch, Object.assign({ label: label, labelStyle: "form", selected: (_a = field.value) !== null && _a !== void 0 ? _a : false, onChange: (selected) => {
-                    // We are triggering blur manually for checkbox fields due to its transactional nature
                     onChange(selected);
-                    field.blur();
+                    field.maybeAutoSave();
                 } }, testId, others), void 0));
         } }, void 0));
 }

package/dist/forms/BoundTextAreaField.d.ts

@@ -2,7 +2,7 @@ import { FieldState } from "@homebound/form-state";
 import { Only } from "../Css";
 import { TextAreaFieldProps } from "../inputs";
 import { TextFieldXss } from "../interfaces";
-export declare type BoundTextAreaFieldProps<X> = Omit<TextAreaFieldProps<X>, "value" | "onChange" | "onBlur" | "onFocus" | "label"> & {
+export declare type BoundTextAreaFieldProps<X> = Omit<TextAreaFieldProps<X>, "value" | "onChange" | "label"> & {
     label?: string;
     field: FieldState<any, string | null | undefined>;
     onChange?: (value: string | undefined) => void;

package/dist/forms/BoundTextAreaField.js

@@ -8,8 +8,17 @@ const utils_1 = require("../utils");
 const defaultLabel_1 = require("../utils/defaultLabel");
 /** Wraps `TextAreaField` and binds it to a form field. */
 function BoundTextAreaField(props) {
-    const { field, readOnly, onChange = (value) => field.set(value), label = (0, defaultLabel_1.defaultLabel)(field.key), ...others } = props;
+    const { field, readOnly, onChange = (value) => field.set(value), label = (0, defaultLabel_1.defaultLabel)(field.key), onFocus, onBlur, onEnter, ...others } = props;
     const testId = (0, utils_1.useTestIds)(props, field.key);
-    return ((0, jsx_runtime_1.jsx)(mobx_react_1.Observer, { children: () => ((0, jsx_runtime_1.jsx)(inputs_1.TextAreaField, Object.assign({ label: label, value: field.value || undefined, onChange: onChange, readOnly: readOnly !== null && readOnly !== void 0 ? readOnly : field.readOnly, errorMsg: field.touched ? field.errors.join(" ") : undefined, onBlur: () => field.blur(), onFocus: () => field.focus() }, testId, others), void 0)) }, void 0));
+    return ((0, jsx_runtime_1.jsx)(mobx_react_1.Observer, { children: () => ((0, jsx_runtime_1.jsx)(inputs_1.TextAreaField, Object.assign({ label: label, value: field.value || undefined, onChange: onChange, readOnly: readOnly !== null && readOnly !== void 0 ? readOnly : field.readOnly, errorMsg: field.touched ? field.errors.join(" ") : undefined, onBlur: () => {
+                field.blur();
+                (0, utils_1.maybeCall)(onBlur);
+            }, onFocus: () => {
+                field.focus();
+                (0, utils_1.maybeCall)(onFocus);
+            }, onEnter: () => {
+                (0, utils_1.maybeCall)(onEnter);
+                field.maybeAutoSave();
+            } }, testId, others), void 0)) }, void 0));
 }
 exports.BoundTextAreaField = BoundTextAreaField;

package/dist/forms/BoundTextField.js

@@ -12,8 +12,7 @@ function BoundTextField(props) {
     const testId = (0, utils_1.useTestIds)(props, field.key);
     return ((0, jsx_runtime_1.jsx)(mobx_react_1.Observer, { children: () => ((0, jsx_runtime_1.jsx)(inputs_1.TextField, Object.assign({ label: label, value: field.value || undefined, onChange: onChange, readOnly: readOnly !== null && readOnly !== void 0 ? readOnly : field.readOnly, errorMsg: field.touched ? field.errors.join(" ") : undefined, required: field.required, onBlur: () => field.blur(), onFocus: () => field.focus(), onEnter: () => {
                 (0, utils_1.maybeCall)(onEnter);
-                // Blur the field when the user hits the enter key - as if they are "committing" the value and done with the field
-                field.blur();
+                field.maybeAutoSave();
             } }, testId, others), void 0)) }, void 0));
 }
 exports.BoundTextField = BoundTextField;

package/dist/inputs/Checkbox.d.ts

@@ -1,6 +1,7 @@
 import { ReactNode } from "react";
 export interface CheckboxProps {
     label: string;
+    checkboxOnly?: boolean;
     /** Handler that is called when the element's selection state changes. */
     onChange: (selected: boolean) => void;
     /** Additional text displayed below label */

package/dist/inputs/CheckboxBase.d.ts

@@ -16,6 +16,7 @@ export interface CheckboxBaseProps extends BeamFocusableProps {
     inputProps: InputHTMLAttributes<HTMLInputElement>;
     isSelected?: boolean;
     label: string;
+    checkboxOnly?: boolean;
     errorMsg?: string;
     helperText?: string | ReactNode;
 }

package/dist/inputs/CheckboxBase.js

@@ -10,7 +10,7 @@ const ErrorMessage_1 = require("./ErrorMessage");
 const utils_1 = require("../utils");
 const defaultTestId_1 = require("../utils/defaultTestId");
 function CheckboxBase(props) {
-    const { ariaProps, description, isDisabled = false, isIndeterminate = false, isSelected, inputProps, label, errorMsg, helperText, } = props;
+    const { ariaProps, description, isDisabled = false, isIndeterminate = false, isSelected, inputProps, label, errorMsg, helperText, checkboxOnly = false, } = props;
     const ref = (0, react_1.useRef)(null);
     const { isFocusVisible, focusProps } = (0, react_aria_1.useFocusRing)(ariaProps);
     const { hoverProps, isHovered } = (0, react_aria_1.useHover)({ isDisabled });
@@ -23,7 +23,7 @@ function CheckboxBase(props) {
             .maxw((0, Css_1.px)(320))
             .if(description !== undefined)
             .maxw((0, Css_1.px)(344))
-            .if(isDisabled).cursorNotAllowed.$ }, { children: [(0, jsx_runtime_1.jsx)(react_aria_1.VisuallyHidden, { children: (0, jsx_runtime_1.jsx)("input", Object.assign({ ref: ref }, (0, react_aria_1.mergeProps)(inputProps, focusProps), tid), void 0) }, void 0), (0, jsx_runtime_1.jsx)("span", Object.assign({}, hoverProps, { css: {
+            .if(isDisabled).cursorNotAllowed.$, "aria-label": label }, { children: [(0, jsx_runtime_1.jsx)(react_aria_1.VisuallyHidden, { children: (0, jsx_runtime_1.jsx)("input", Object.assign({ ref: ref }, (0, react_aria_1.mergeProps)(inputProps, focusProps), tid), void 0) }, void 0), (0, jsx_runtime_1.jsx)("span", Object.assign({}, hoverProps, { css: {
                     ...baseStyles,
                     ...((isSelected || isIndeterminate) && filledBoxStyles),
                     ...((isSelected || isIndeterminate) && isHovered && filledBoxHoverStyles),
@@ -31,7 +31,10 @@ function CheckboxBase(props) {
                     ...(isFocusVisible && focusRingStyles),
                     ...(isHovered && hoverBorderStyles),
                     ...markStyles,
-                }, "aria-hidden": "true" }, { children: markIcon }), void 0), (0, jsx_runtime_1.jsxs)("div", Object.assign({ css: Css_1.Css.ml1.mtPx(-2).$ }, { children: [label && (0, jsx_runtime_1.jsx)("div", Object.assign({ css: { ...labelStyles, ...(isDisabled && disabledColor) } }, { children: label }), void 0), description && (0, jsx_runtime_1.jsx)("div", Object.assign({ css: { ...descStyles, ...(isDisabled && disabledColor) } }, { children: description }), void 0), errorMsg && (0, jsx_runtime_1.jsx)(ErrorMessage_1.ErrorMessage, Object.assign({ errorMsg: errorMsg }, tid.errorMsg), void 0), helperText && (0, jsx_runtime_1.jsx)(HelperText_1.HelperText, Object.assign({ helperText: helperText }, tid.helperText), void 0)] }), void 0)] }), void 0));
+                }, "aria-hidden": "true" }, { children: markIcon }), void 0), !checkboxOnly && (
+            // Use a mtPx(-2) to better align the label with the checkbox.
+            // Not using align-items: center as the checkbox would align with all content below, where we really want it to stay only aligned with the label
+            (0, jsx_runtime_1.jsxs)("div", Object.assign({ css: Css_1.Css.ml1.mtPx(-2).$ }, { children: [label && (0, jsx_runtime_1.jsx)("div", Object.assign({ css: { ...labelStyles, ...(isDisabled && disabledColor) } }, { children: label }), void 0), description && (0, jsx_runtime_1.jsx)("div", Object.assign({ css: { ...descStyles, ...(isDisabled && disabledColor) } }, { children: description }), void 0), errorMsg && (0, jsx_runtime_1.jsx)(ErrorMessage_1.ErrorMessage, Object.assign({ errorMsg: errorMsg }, tid.errorMsg), void 0), helperText && (0, jsx_runtime_1.jsx)(HelperText_1.HelperText, Object.assign({ helperText: helperText }, tid.helperText), void 0)] }), void 0))] }), void 0));
 }
 exports.CheckboxBase = CheckboxBase;
 const baseStyles = Css_1.Css.hPx(16).mw((0, Css_1.px)(16)).relative.ba.bGray300.br4.bgWhite.transition.$;

package/dist/inputs/ChipSelectField.js

@@ -114,10 +114,8 @@ function ChipSelectField(props) {
             if (selectedItem) {
                 onSelect(key, selectedItem);
             }
-            // Per UX, when an option is selected then we want to call our `onBlur` callback and remove the focus styles. The field _is_ still in focus but that is only to retain tab position in the DOM.
-            // We cannot simply call `buttonRef.current.blur()` here because `state.isOpen === true` and we keep the visualFocus shown when the menu is open.
+            // Per UX, we do not want to show visual focus upon selection change.
             setVisualFocus(false);
-            (0, utils_1.maybeCall)(onBlur);
         },
         onOpenChange: (isOpen) => {
             var _a;
@@ -152,14 +150,9 @@ function ChipSelectField(props) {
     };
     // State management for the "Create new" flow with ChipTextField.
     const [showInput, setShowInput] = (0, react_1.useState)(false);
-    const removeCreateNewField = (0, react_1.useCallback)(() => {
-        setShowInput(false);
-        // Trigger onBlur to initiate any auto-saving behavior.
-        (0, utils_1.maybeCall)(onBlur);
-    }, [setShowInput]);
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [showInput && onCreateNew && ((0, jsx_runtime_1.jsx)(CreateNewField, Object.assign({ onBlur: removeCreateNewField, onEnter: async (value) => {
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [showInput && onCreateNew && ((0, jsx_runtime_1.jsx)(CreateNewField, Object.assign({ onBlur: () => setShowInput(false), onEnter: async (value) => {
                     await onCreateNew(value);
-                    removeCreateNewField();
+                    setShowInput(false);
                 } }, tid.createNewField), void 0)), (0, components_1.maybeTooltip)({
                 title: (0, components_1.resolveTooltip)(disabled),
                 placement: "top",
@@ -178,7 +171,6 @@ function ChipSelectField(props) {
                                 ...(isClearFocused ? Css_1.Css.boxShadow(`0px 0px 0px 2px rgba(3,105,161,1)`).$ : {}),
                             }, onClick: () => {
                                 onSelect(undefined, undefined);
-                                (0, utils_1.maybeCall)(onBlur);
                                 setIsClearFocused(false);
                             }, "aria-label": "Remove" }, tid.clearButton, { children: (0, jsx_runtime_1.jsx)(components_1.Icon, { icon: "x", inc: typeScale === "xs" ? 2 : undefined }, void 0) }), void 0))] }), void 0)),
             }), state.isOpen && ((0, jsx_runtime_1.jsx)(internal_1.Popover, Object.assign({ triggerRef: buttonRef, popoverRef: popoverRef, positionProps: overlayProps, onClose: state.close, isOpen: state.isOpen, shouldCloseOnBlur: true }, { children: (0, jsx_runtime_1.jsx)(ListBox_1.ListBox, Object.assign({}, menuProps, { listBoxRef: listBoxRef, state: state, getOptionLabel: getOptionLabel, getOptionValue: getOptionValue, positionProps: overlayProps }), void 0) }), void 0))] }, void 0));

package/dist/inputs/DateField.d.ts

@@ -1,6 +1,7 @@
 import { ReactNode } from "react";
 import { Modifier } from "react-day-picker";
 import { TextFieldBaseProps } from "./TextFieldBase";
+import { Callback } from "../types";
 import "./DateField.css";
 export interface DateFieldProps extends Pick<TextFieldBaseProps<{}>, "borderless" | "visuallyDisabled" | "hideLabel" | "compact"> {
     value: Date | undefined;
@@ -23,8 +24,9 @@ export interface DateFieldProps extends Pick<TextFieldBaseProps<{}>, "borderless
     /**
      * Set custom logic for individual dates or date ranges to be disabled in the picker
      * exposed from `react-day-picker`: https://react-day-picker.js.org/api/DayPicker#modifiers
-    */
+     */
     disabledDays?: Modifier;
+    onEnter?: Callback;
 }
 export declare function DateField(props: DateFieldProps): import("@emotion/react/jsx-runtime").JSX.Element;
 declare const dateFormats: {

package/dist/inputs/DateField.js

@@ -16,7 +16,7 @@ const utils_1 = require("../utils");
 const defaultTestId_1 = require("../utils/defaultTestId");
 require("./DateField.css");
 function DateField(props) {
-    const { label, disabled, required, value, onChange, onFocus, onBlur, errorMsg, helperText, inlineLabel = false, readOnly = false, format = "short", iconLeft = false, disabledDays, ...others } = props;
+    const { label, disabled, required, value, onChange, onFocus, onBlur, errorMsg, helperText, inlineLabel = false, readOnly = false, format = "short", iconLeft = false, disabledDays, onEnter, ...others } = props;
     const inputRef = (0, react_1.useRef)(null);
     const inputWrapRef = (0, react_1.useRef)(null);
     const buttonRef = (0, react_1.useRef)(null);
@@ -79,7 +79,7 @@ function DateField(props) {
         onKeyDown: (e) => {
             var _a;
             if (e.key === "Enter") {
-                // Blur the field when the user hits the enter key - as if they are "committing" the value and done with the field
+                (0, utils_1.maybeCall)(onEnter);
                 (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.blur();
             }
         },

package/dist/inputs/NumberField.d.ts

@@ -1,5 +1,6 @@
 import { ReactNode } from "react";
 import { Xss } from "../Css";
+import { Callback } from "../types";
 export declare type NumberFieldType = "cents" | "percent" | "basisPoints" | "days";
 export interface NumberFieldProps {
     label: string;
@@ -19,6 +20,9 @@ export interface NumberFieldProps {
     /** Styles overrides */
     xss?: Xss<"textAlign" | "justifyContent">;
     displayDirection?: boolean;
+    numFractionDigits?: number;
+    truncate?: boolean;
+    onEnter?: Callback;
 }
 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,45 +1,47 @@
 "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");
 const PresentationContext_1 = require("../components/PresentationContext");
 const Css_1 = require("../Css");
+const utils_1 = require("../utils");
 const TextFieldBase_1 = require("./TextFieldBase");
 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, onEnter, ...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 };
@@ -50,7 +52,7 @@ function NumberField(props) {
         onKeyDown: (e) => {
             var _a;
             if (e.key === "Enter") {
-                // Blur the field when the user hits the enter key - as if they are "committing" the value and done with the field
+                (0, utils_1.maybeCall)(onEnter);
                 (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.blur();
             }
         },
@@ -71,20 +73,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/TextAreaField.d.ts

@@ -1,7 +1,9 @@
 import { Only } from "../Css";
 import { BeamTextFieldProps, TextFieldXss } from "../interfaces";
+import { Callback } from "../types";
 export interface TextAreaFieldProps<X> extends BeamTextFieldProps<X> {
     preventNewLines?: boolean;
+    onEnter?: Callback;
 }
 /** Returns a <textarea /> element that auto-adjusts height based on the field's value */
 export declare function TextAreaField<X extends Only<TextFieldXss, X>>(props: TextAreaFieldProps<X>): import("@emotion/react/jsx-runtime").JSX.Element;

package/dist/inputs/TextAreaField.js

@@ -6,9 +6,10 @@ const utils_1 = require("@react-aria/utils");
 const react_1 = require("react");
 const react_aria_1 = require("react-aria");
 const TextFieldBase_1 = require("./TextFieldBase");
+const utils_2 = require("../utils");
 /** Returns a <textarea /> element that auto-adjusts height based on the field's value */
 function TextAreaField(props) {
-    const { value = "", disabled = false, readOnly = false, onBlur, onFocus, preventNewLines, ...otherProps } = props;
+    const { value = "", disabled = false, readOnly = false, onBlur, onFocus, preventNewLines, onEnter, ...otherProps } = props;
     const textFieldProps = { ...otherProps, value, isDisabled: disabled, isReadOnly: readOnly };
     const inputRef = (0, react_1.useRef)(null);
     const inputWrapRef = (0, react_1.useRef)(null);
@@ -47,7 +48,7 @@ function TextAreaField(props) {
                     // Prevent user from typing the new line character
                     if (e.key === "Enter") {
                         e.preventDefault();
-                        // And then leave the field
+                        (0, utils_2.maybeCall)(onEnter);
                         (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.blur();
                     }
                 },

package/dist/inputs/TextField.js

@@ -20,8 +20,10 @@ function TextField(props) {
     const { labelProps, inputProps } = (0, react_aria_1.useTextField)({
         ...textFieldProps,
         onKeyDown: (e) => {
+            var _a;
             if (e.key === "Enter") {
                 (0, utils_1.maybeCall)(onEnter);
+                (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.blur();
             }
         },
     }, inputRef);

package/dist/inputs/internal/SelectFieldBase.js

@@ -32,7 +32,6 @@ function SelectFieldBase(props) {
         const initOptions = Array.isArray(maybeOptions) ? maybeOptions : maybeOptions.initial;
         const selectedOptions = initOptions.filter((o) => values.includes(getOptionValue(o)));
         return {
-            isOpen: false,
             selectedKeys: (_a = selectedOptions === null || selectedOptions === void 0 ? void 0 : selectedOptions.map((o) => (0, Value_1.valueToKey)(getOptionValue(o)))) !== null && _a !== void 0 ? _a : [],
             inputValue: getInputValue(initOptions.filter((o) => values === null || values === void 0 ? void 0 : values.includes(getOptionValue(o))), getOptionLabel, multiselect, nothingSelectedText),
             filteredOptions: initOptions,
@@ -48,14 +47,12 @@ function SelectFieldBase(props) {
         if (inputValue !== fieldState.inputValue || fieldState.filteredOptions.length !== fieldState.allOptions.length) {
             setFieldState((prevState) => ({
                 ...prevState,
-                isOpen: false,
                 inputValue,
                 filteredOptions: prevState.allOptions,
             }));
         }
     }
     function onSelectionChange(keys) {
-        var _a;
         // We don't currently handle the "all" case
         if (keys === "all") {
             return;
@@ -68,7 +65,6 @@ function SelectFieldBase(props) {
         if (multiselect && keys.size === 0) {
             setFieldState({
                 ...fieldState,
-                isOpen: true,
                 inputValue: state.isOpen ? "" : nothingSelectedText,
                 selectedKeys: [],
                 selectedOptions: [],
@@ -81,8 +77,6 @@ function SelectFieldBase(props) {
         const firstSelectedOption = selectedOptions[0];
         setFieldState((prevState) => ({
             ...prevState,
-            // Close menu upon selection change only for Single selection mode
-            isOpen: multiselect,
             // If menu is open then reset inputValue to "". Otherwise set inputValue depending on number of options selected.
             inputValue: multiselect && (state.isOpen || selectedKeys.length > 1)
                 ? ""
@@ -95,8 +89,8 @@ function SelectFieldBase(props) {
         }));
         selectionChanged && onSelect(selectedKeys.map(Value_1.keyToValue), selectedOptions);
         if (!multiselect) {
-            // When a single select menu item changes, then blur the field AFTER `onSelect` has been called
-            (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.blur();
+            // Close menu upon selection change only for Single selection mode
+            state.close();
         }
     }
     function onInputChange(value) {
@@ -130,7 +124,6 @@ function SelectFieldBase(props) {
             ...prevState,
             // When using the multiselect field, always empty the input upon open.
             inputValue: multiselect && isOpen ? "" : prevState.inputValue,
-            isOpen,
         }));
     }
     // Used to calculate the rendered width of the combo box (input + button)

package/dist/interfaces.d.ts

@@ -2,6 +2,7 @@ import type { PressEvent } from "@react-types/shared";
 import { ReactNode } from "react";
 import { PresentationFieldProps } from "./components/PresentationContext";
 import { Xss } from "./Css";
+import { Callback } from "./types";
 /** Base Interfaced */
 export interface BeamFocusableProps {
     /** Whether the element should receive focus on render. */
@@ -35,8 +36,9 @@ export interface BeamTextFieldProps<X> extends BeamFocusableProps, PresentationF
     /** Handler called when the interactive element state changes. */
     onChange: (value: string | undefined) => void;
     /** Called when the component loses focus, mostly for BoundTextField to use. */
-    onBlur?: () => void;
-    onFocus?: () => void;
+    onBlur?: Callback;
+    onFocus?: Callback;
+    onEnter?: Callback;
     readOnly?: boolean;
     placeholder?: string;
     /** Styles overrides */

package/dist/utils/rtl.js

@@ -34,7 +34,7 @@ function render(component, wrapperOrOpts, ...otherWrappers) {
 }
 exports.render = render;
 function cell(r, row, column) {
-    return cellOf(r, "grid-table", row, column);
+    return cellOf(r, "gridTable", row, column);
 }
 exports.cell = cell;
 function cellOf(r, tableTestId, rowNum, column) {
@@ -47,7 +47,7 @@ function cellAnd(r, row, column, testId) {
         fail(`Element not found ${(0, react_1.prettyDOM)(cell(r, row, column))}`));
 }
 exports.cellAnd = cellAnd;
-function row(r, row, tableTestId = "grid-table") {
+function row(r, row, tableTestId = "gridTable") {
     const nonChromeRows = Array.from(r.getByTestId(tableTestId).childNodes).filter((node) => !("chrome" in node.dataset));
     return nonChromeRows[row];
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@homebound/beam",
-  "version": "2.101.4",
+  "version": "2.102.2",
   "author": "Homebound",
   "license": "MIT",
   "main": "dist/index.js",
@@ -33,7 +33,8 @@
     "format": "prettier --loglevel warn --write \"**/*.{ts,tsx,css,md}\""
   },
   "dependencies": {
-    "@homebound/form-state": "^2.2.13",
+    "@homebound/form-state": "2.5.0",
+    "@internationalized/number": "^3.0.3",
     "@react-aria/utils": "^3.9.0",
     "@react-hook/resize-observer": "^1.2.2",
     "@types/tinycolor2": "^1.4.2",

package/dist/forms/BoundSwitchFieldTest.d.ts

@@ -1 +0,0 @@
-export {};

package/dist/forms/BoundSwitchFieldTest.js

@@ -1,29 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
-const form_state_1 = require("@homebound/form-state");
-const rtl_utils_1 = require("@homebound/rtl-utils");
-const forms_1 = require("./");
-describe("BoundSwitchField", () => {
-    it("should be checked", async () => {
-        // Given a formState with true boolean field
-        const formState = (0, form_state_1.createObjectState)(formConfig, { isAvailable: true });
-        // When rendered
-        const r = await (0, rtl_utils_1.render)((0, jsx_runtime_1.jsx)(forms_1.BoundSwitchField, { field: formState.isAvailable }, void 0));
-        // Expect the BoundSwitchField to be checked
-        expect(r.isAvailable()).toBeChecked();
-    });
-    it("should uncheck when clicked", async () => {
-        // Given a rendered checked BoundSwitchField
-        const formState = (0, form_state_1.createObjectState)(formConfig, { isAvailable: true });
-        const { isAvailable } = await (0, rtl_utils_1.render)((0, jsx_runtime_1.jsx)(forms_1.BoundSwitchField, { field: formState.isAvailable }, void 0));
-        // When interacting with a BoundSwitchField
-        (0, rtl_utils_1.click)(isAvailable());
-        // Then expect the checkbox to be unchecked and the formState to reflect that state
-        expect(isAvailable()).not.toBeChecked();
-        expect(formState.isAvailable.value).toBeFalsy();
-    });
-});
-const formConfig = {
-    isAvailable: { type: "value", rules: [form_state_1.required] },
-};