@homebound/beam 2.102.0 → 2.102.4

package/dist/components/IconButton.js

@@ -41,6 +41,6 @@ function IconButton(props) {
 }
 exports.IconButton = IconButton;
 const iconButtonStylesReset = Css_1.Css.hPx(28).wPx(28).br8.bTransparent.bsSolid.bw2.bgTransparent.cursorPointer.outline0.p0.dif.aic.jcc.transition.$;
-exports.iconButtonStylesHover = Css_1.Css.bgGray100.$;
+exports.iconButtonStylesHover = Css_1.Css.bgGray200.$;
 const iconButtonStylesFocus = Css_1.Css.bLightBlue700.$;
 const iconButtonStylesDisabled = Css_1.Css.cursorNotAllowed.$;

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);

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/forms/FormHeading.js

@@ -4,13 +4,13 @@ exports.FormHeading = void 0;
 const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
 const Css_1 = require("../Css");
 function FormHeading(props) {
-    const { title, xss, isFirst = false } = props;
+    const { title, xss, isFirst = false, ...others } = props;
     return ((0, jsx_runtime_1.jsx)("h3", Object.assign({ css: {
             ...Css_1.Css.baseEm.$,
             // Add space before the heading, but only if it's not first.
             ...(!isFirst && Css_1.Css.mt4.$),
             ...xss,
-        } }, { children: title }), void 0));
+        } }, others, { children: title }), void 0));
 }
 exports.FormHeading = FormHeading;
 // https://github.com/gaearon/react-hot-loader/issues/304#issuecomment-456569720

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;
@@ -21,6 +22,7 @@ export interface NumberFieldProps {
     displayDirection?: boolean;
     numFractionDigits?: number;
     truncate?: boolean;
+    onEnter?: Callback;
 }
 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;

package/dist/inputs/NumberField.js

@@ -8,12 +8,13 @@ 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, numFractionDigits, truncate = 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 };
@@ -51,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();
             }
         },

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.102.0",
+  "version": "2.102.4",
   "author": "Homebound",
   "license": "MIT",
   "main": "dist/index.js",
@@ -33,7 +33,7 @@
     "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",

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] },
-};