@homebound/beam 2.97.0 → 2.97.4

package/dist/components/CssReset.js

@@ -16,8 +16,35 @@ exports.CssReset = CssReset;
 // The is primarily for navigation, like breadcrumb links or tab links.
 exports.navLink = "navLink";
 const ourReset = (0, react_1.css) `
-  a:not(.${exports.navLink}) { color: ${Css_1.Palette.LightBlue700} },
-  a:visited:not(.${exports.navLink}) { color: ${Css_1.Palette.LightBlue500} },
+  a:not(.${exports.navLink}) {
+    color: ${Css_1.Palette.LightBlue700};
+  }
+
+  a:visited:not(.${exports.navLink}) {
+    color: ${Css_1.Palette.LightBlue500};
+  }
+
+  /**
+   * Beam animations
+   */
+  @keyframes loadingDots {
+    0% {
+      background-color: ${Css_1.Palette.Gray600};
+    }
+    50%,
+    100% {
+      background-color: ${Css_1.Palette.Gray300};
+    }
+  }
+  @keyframes loadingDotsContrast {
+    0% {
+      background-color: ${Css_1.Palette.Gray200};
+    }
+    50%,
+    100% {
+      background-color: ${Css_1.Palette.Gray500};
+    }
+  }
 `;
 // Copy/pasted from TW which uses this as their base reset.
 const modernNormalizeReset = (0, react_1.css) `

package/dist/components/Filters/SingleFilter.js

@@ -12,11 +12,10 @@ exports.singleFilter = singleFilter;
 const allOption = {};
 class SingleFilter extends BaseFilter_1.BaseFilter {
     render(value, setValue, tid, inModal, vertical) {
-        const { label, defaultValue, options, getOptionLabel, getOptionValue, ...props } = this.props;
-        return ((0, jsx_runtime_1.jsx)(SelectField_1.SelectField, Object.assign({}, props, { options: [
-                // We always add "All" as the 1st option, to allow unselecting with a click
-                allOption,
-                ...options,
-            ], getOptionValue: (o) => (o === allOption ? undefined : getOptionValue(o)), getOptionLabel: (o) => (o === allOption ? "All" : getOptionLabel(o)), compact: !vertical, value: value, label: this.label, inlineLabel: !inModal && !vertical, hideLabel: inModal, sizeToContent: !inModal && !vertical, nothingSelectedText: "All", onSelect: (value) => setValue(value || undefined) }, this.testId(tid)), void 0));
+        const { label, defaultValue, options: maybeOptions, getOptionLabel, getOptionValue, ...props } = this.props;
+        const options = Array.isArray(maybeOptions)
+            ? [allOption, ...maybeOptions]
+            : { ...maybeOptions, initial: [allOption, ...maybeOptions.initial] };
+        return ((0, jsx_runtime_1.jsx)(SelectField_1.SelectField, Object.assign({}, props, { options: options, getOptionValue: (o) => (o === allOption ? undefined : getOptionValue(o)), getOptionLabel: (o) => (o === allOption ? "All" : getOptionLabel(o)), compact: !vertical, value: value, label: this.label, inlineLabel: !inModal && !vertical, hideLabel: inModal, sizeToContent: !inModal && !vertical, nothingSelectedText: "All", onSelect: (value) => setValue(value || undefined) }, this.testId(tid)), void 0));
     }
 }

package/dist/forms/BoundTextField.js

@@ -8,8 +8,12 @@ const utils_1 = require("../utils");
 const defaultLabel_1 = require("../utils/defaultLabel");
 /** Wraps `TextField` and binds it to a form field. */
 function BoundTextField(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), 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.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() }, testId, others), void 0)) }, void 0));
+    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();
+            } }, testId, others), void 0)) }, void 0));
 }
 exports.BoundTextField = BoundTextField;

package/dist/inputs/DateField.mock.js

@@ -14,6 +14,6 @@ function DateField(props) {
             const { value } = e.target;
             setValue(value);
             onChange((0, date_fns_1.parse)(value, "MM/dd/yy", new Date()));
-        }, onBlur: () => (0, utils_1.maybeCall)(onBlur), onFocus: () => (0, utils_1.maybeCall)(onFocus), disabled: !!props.disabled, readOnly: props.readOnly }), void 0));
+        }, onBlur: () => (0, utils_1.maybeCall)(onBlur), onFocus: () => (0, utils_1.maybeCall)(onFocus), disabled: !!props.disabled, readOnly: props.readOnly, "data-disabled-days": JSON.stringify(props.disabledDays) }), void 0));
 }
 exports.DateField = DateField;

package/dist/inputs/SelectField.d.ts

@@ -1,16 +1,10 @@
-import { ReactNode } from "react";
 import { Value } from "./";
 import { BeamSelectFieldBaseProps } from "./internal/SelectFieldBase";
 import { HasIdAndName, Optional } from "../types";
-export interface SelectFieldProps<O, V extends Value> extends BeamSelectFieldBaseProps<O, V> {
-    /** Renders `opt` in the dropdown menu, defaults to the `getOptionLabel` prop. */
-    getOptionMenuLabel?: (opt: O) => string | ReactNode;
-    getOptionValue: (opt: O) => V;
-    getOptionLabel: (opt: O) => string;
+export interface SelectFieldProps<O, V extends Value> extends Omit<BeamSelectFieldBaseProps<O, V>, "values" | "onSelect"> {
     /** The current value; it can be `undefined`, even if `V` cannot be. */
     value: V | undefined;
     onSelect: (value: V, opt: O) => void;
-    options: O[];
 }
 /**
  * Provides a non-native select/dropdown widget.

package/dist/inputs/SelectField.js

@@ -7,10 +7,9 @@ function SelectField(props) {
     const { getOptionValue = (opt) => opt.id, // if unset, assume O implements HasId
     getOptionLabel = (opt) => opt.name, // if unset, assume O implements HasName
     options, onSelect, value, ...otherProps } = props;
-    return ((0, jsx_runtime_1.jsx)(SelectFieldBase_1.SelectFieldBase, Object.assign({}, otherProps, { options: options, getOptionLabel: getOptionLabel, getOptionValue: getOptionValue, values: [value], onSelect: (values) => {
-            if (values.length > 0) {
-                const selectedOption = options.find((o) => getOptionValue(o) === values[0]);
-                onSelect && selectedOption && onSelect(getOptionValue(selectedOption), selectedOption);
+    return ((0, jsx_runtime_1.jsx)(SelectFieldBase_1.SelectFieldBase, Object.assign({}, otherProps, { options: options, getOptionLabel: getOptionLabel, getOptionValue: getOptionValue, values: [value], onSelect: (values, options) => {
+            if (values.length > 0 && options.length > 0) {
+                onSelect && onSelect(values[0], options[0]);
             }
         } }), void 0));
 }

package/dist/inputs/SelectField.mock.d.ts

@@ -1,4 +1,4 @@
 import { Key } from "react";
 import { SelectFieldProps } from "./";
 /** Mocks out `SelectField` as a `<select>` field. */
-export declare function SelectField<T extends object, V extends Key>(props: SelectFieldProps<T, V>): import("@emotion/react/jsx-runtime").JSX.Element;
+export declare function SelectField<O extends object, V extends Key>(props: SelectFieldProps<O, V>): import("@emotion/react/jsx-runtime").JSX.Element;

package/dist/inputs/SelectField.mock.js

@@ -2,20 +2,31 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.SelectField = void 0;
 const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
+const react_1 = require("react");
 const utils_1 = require("../utils");
 /** Mocks out `SelectField` as a `<select>` field. */
 function SelectField(props) {
     const { getOptionValue = (o) => o.id, // if unset, assume O implements HasId
     getOptionLabel = (o) => o.name, // if unset, assume O implements HasName
-    value, options, onSelect, readOnly = false, errorMsg, onBlur, onFocus, disabled, disabledOptions = [], } = props;
+    value, options: maybeOptions, onSelect, readOnly = false, errorMsg, onBlur, onFocus, disabled, disabledOptions = [], } = props;
     const tid = (0, utils_1.useTestIds)(props, "select");
+    const [options, setOptions] = (0, react_1.useState)(Array.isArray(maybeOptions) ? maybeOptions : maybeOptions.initial);
     const currentOption = options.find((o) => getOptionValue(o) === value) || options[0];
+    (0, react_1.useEffect)(() => {
+        if (Array.isArray(maybeOptions) && maybeOptions !== options) {
+            setOptions(maybeOptions);
+        }
+    }, [maybeOptions]);
     return ((0, jsx_runtime_1.jsxs)("select", Object.assign({}, tid, { value: 
         // @ts-ignore - allow `value` to be seen as a string
         value !== undefined && value !== "" && currentOption ? getOptionValue(currentOption) : "", onChange: (e) => {
             const option = options.find((o) => `${getOptionValue(o)}` === e.target.value) || options[0];
             onSelect(getOptionValue(option), option);
-        }, onFocus: () => {
+        }, onFocus: async () => {
+            if (!Array.isArray(maybeOptions)) {
+                const result = await maybeOptions.load();
+                setOptions(result.options);
+            }
             if (!readOnly && onFocus)
                 onFocus();
         }, onBlur: () => {

package/dist/inputs/TextField.d.ts

@@ -7,6 +7,7 @@ export interface TextFieldProps<X> extends BeamTextFieldProps<X> {
     inlineLabel?: boolean;
     clearable?: boolean;
     api?: MutableRefObject<TextFieldApi | undefined>;
+    onEnter?: Callback;
 }
 export declare function TextField<X extends Only<TextFieldXss, X>>(props: TextFieldProps<X>): import("@emotion/react/jsx-runtime").JSX.Element;
 export declare type TextFieldApi = {

package/dist/inputs/TextField.js

@@ -5,8 +5,9 @@ const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
 const react_1 = require("react");
 const react_aria_1 = require("react-aria");
 const TextFieldBase_1 = require("./TextFieldBase");
+const utils_1 = require("../utils");
 function TextField(props) {
-    const { disabled: isDisabled = false, readOnly = false, required, errorMsg, value = "", onBlur, onFocus, api, ...otherProps } = props;
+    const { disabled: isDisabled = false, readOnly = false, required, errorMsg, value = "", onBlur, onFocus, api, onEnter, ...otherProps } = props;
     const textFieldProps = {
         ...otherProps,
         isDisabled,
@@ -19,10 +20,8 @@ function TextField(props) {
     const { labelProps, inputProps } = (0, react_aria_1.useTextField)({
         ...textFieldProps,
         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
-                (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.blur();
+                (0, utils_1.maybeCall)(onEnter);
             }
         },
     }, inputRef);

package/dist/inputs/internal/ListBox.d.ts

@@ -8,6 +8,7 @@ interface ListBoxProps<O, V extends Key> {
     getOptionValue: (opt: O) => V;
     contrast?: boolean;
     positionProps: React.HTMLAttributes<Element>;
+    loading?: boolean | (() => JSX.Element);
 }
 /** A ListBox is an internal component used by SelectField and MultiSelectField to display the list of options */
 export declare function ListBox<O, V extends Key>(props: ListBoxProps<O, V>): import("@emotion/react/jsx-runtime").JSX.Element;

package/dist/inputs/internal/ListBox.js

@@ -12,7 +12,7 @@ const VirtualizedOptions_1 = require("./VirtualizedOptions");
 /** A ListBox is an internal component used by SelectField and MultiSelectField to display the list of options */
 function ListBox(props) {
     var _a;
-    const { state, listBoxRef, selectedOptions = [], getOptionLabel, getOptionValue, contrast = false, positionProps, } = props;
+    const { state, listBoxRef, selectedOptions = [], getOptionLabel, getOptionValue, contrast = false, positionProps, loading, } = props;
     const { listBoxProps } = (0, react_aria_1.useListBox)({ disallowEmptySelection: true, ...props }, state, listBoxRef);
     const positionMaxHeight = (_a = positionProps.style) === null || _a === void 0 ? void 0 : _a.maxHeight;
     // The popoverMaxHeight will be based on the value defined by the positionProps returned from `useOverlayPosition` (which will always be a defined as a `number` based on React-Aria's `calculatePosition`).
@@ -37,7 +37,7 @@ function ListBox(props) {
                     // Only scroll on focus if using VirtualFocus (used for ComboBoxState (SelectField), but not SelectState (ChipSelectField))
                     scrollOnFocus: props.shouldUseVirtualFocus }, section.key)))) : ((0, jsx_runtime_1.jsx)(VirtualizedOptions_1.VirtualizedOptions, { state: state, items: [...state.collection], onListHeightChange: onListHeightChange, contrast: contrast, 
                     // Only scroll on focus if using VirtualFocus (used for ComboBoxState (SelectField), but not SelectState (ChipSelectField))
-                    scrollOnFocus: props.shouldUseVirtualFocus }, void 0)) }), void 0)] }), void 0));
+                    scrollOnFocus: props.shouldUseVirtualFocus, loading: loading }, void 0)) }), void 0)] }), void 0));
 }
 exports.ListBox = ListBox;
 // UX specified maximum height for a ListBox (in pixels)

package/dist/inputs/internal/LoadingDots.d.ts

@@ -0,0 +1,3 @@
+export declare function LoadingDots({ contrast }: {
+    contrast: boolean;
+}): import("@emotion/react/jsx-runtime").JSX.Element;

package/dist/inputs/internal/LoadingDots.js

@@ -0,0 +1,29 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.LoadingDots = void 0;
+const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
+const Css_1 = require("../../Css");
+const utils_1 = require("../../utils");
+function LoadingDots({ contrast }) {
+    const circleCss = Css_1.Css.hPx(8)
+        .wPx(8)
+        .br4.bgColor(contrast ? Css_1.Palette.Gray500 : Css_1.Palette.Gray300)
+        .add("animationName", contrast ? "loadingDotsContrast" : "loadingDots")
+        .add("animationDuration", "800ms")
+        .add("animationIterationCount", "infinite")
+        .add("animationTimingFunction", "linear")
+        .add("animationDirection", "alternate").$;
+    const tid = (0, utils_1.useTestIds)({});
+    return ((0, jsx_runtime_1.jsx)("div", Object.assign({ css: Css_1.Css.py2.df.jcc.$ }, tid.loadingDots, { children: (0, jsx_runtime_1.jsx)("div", { "aria-label": "Loading", css: {
+                ...circleCss,
+                ...Css_1.Css.relative
+                    .add("animationDelay", "300ms")
+                    .addIn("&:before, &:after", {
+                    ...circleCss,
+                    ...Css_1.Css.add("content", "' '").absolute.dib.$,
+                })
+                    .addIn("&:before", Css_1.Css.leftPx(-12).add("animationDelay", "0").$)
+                    .addIn("&:after", Css_1.Css.rightPx(-12).add("animationDelay", "600ms").$).$,
+            } }, void 0) }), void 0));
+}
+exports.LoadingDots = LoadingDots;

package/dist/inputs/internal/SelectFieldBase.d.ts

@@ -2,35 +2,29 @@ import { ReactNode } from "react";
 import { PresentationFieldProps } from "../../components/PresentationContext";
 import { Value } from "../Value";
 import { BeamFocusableProps } from "../../interfaces";
-export interface SelectFieldBaseProps<O, V extends Value> extends BeamSelectFieldBaseProps<O, V> {
+export interface BeamSelectFieldBaseProps<O, V extends Value> extends BeamFocusableProps, PresentationFieldProps {
     /** Renders `opt` in the dropdown menu, defaults to the `getOptionLabel` prop. */
     getOptionMenuLabel?: (opt: O) => string | ReactNode;
     getOptionValue: (opt: O) => V;
     getOptionLabel: (opt: O) => string;
     /** The current value; it can be `undefined`, even if `V` cannot be. */
     values: V[] | undefined;
-    onSelect: (values: V[]) => void;
-    options: O[];
+    onSelect: (values: V[], opts: O[]) => void;
     multiselect?: boolean;
-}
-/**
- * Provides a non-native select/dropdown widget.
- *
- * The `O` type is a list of options to show, the `V` is the primitive value of a
- * given `O` (i.e. it's id) that you want to use as the current/selected value.
- *
- * Note that the `V extends Key` constraint come from react-aria,
- * and so we cannot easily change them.
- */
-export declare function SelectFieldBase<O, V extends Value>(props: SelectFieldBaseProps<O, V>): JSX.Element;
-export interface BeamSelectFieldBaseProps<T, V extends Value> extends BeamFocusableProps, PresentationFieldProps {
     disabledOptions?: V[];
+    options: O[] | {
+        initial: O[];
+        load: () => Promise<{
+            options: O[];
+        }>;
+    };
+    /** Whether the field is disabled. If a ReactNode, it's treated as a "disabled reason" that's shown in a tooltip. */
     disabled?: boolean | ReactNode;
     required?: boolean;
     errorMsg?: string;
     helperText?: string | ReactNode;
     /** Allow placing an icon/decoration within the input field. */
-    fieldDecoration?: (opt: T) => ReactNode;
+    fieldDecoration?: (opt: O) => ReactNode;
     /** Sets the form field label. */
     label: string;
     /** Renders the label inside the input field, i.e. for filters. */
@@ -46,3 +40,13 @@ export interface BeamSelectFieldBaseProps<T, V extends Value> extends BeamFocusa
     /** Placeholder content */
     placeholder?: string;
 }
+/**
+ * Provides a non-native select/dropdown widget.
+ *
+ * The `O` type is a list of options to show, the `V` is the primitive value of a
+ * given `O` (i.e. it's id) that you want to use as the current/selected value.
+ *
+ * Note that the `V extends Key` constraint come from react-aria,
+ * and so we cannot easily change them.
+ */
+export declare function SelectFieldBase<O, V extends Value>(props: BeamSelectFieldBaseProps<O, V>): JSX.Element;

package/dist/inputs/internal/SelectFieldBase.js

@@ -11,6 +11,7 @@ const Css_1 = require("../../Css");
 const ListBox_1 = require("./ListBox");
 const SelectFieldInput_1 = require("./SelectFieldInput");
 const Value_1 = require("../Value");
+const utils_1 = require("../../utils");
 /**
  * Provides a non-native select/dropdown widget.
  *
@@ -22,16 +23,40 @@ const Value_1 = require("../Value");
  */
 function SelectFieldBase(props) {
     var _a;
-    const { compact, disabled, errorMsg, helperText, label, hideLabel, required, inlineLabel, readOnly, onSelect, fieldDecoration, options, onBlur, onFocus, multiselect = false, getOptionLabel, getOptionValue, getOptionMenuLabel = getOptionLabel, sizeToContent = false, values, nothingSelectedText = "", contrast, disabledOptions, borderless, ...otherProps } = props;
+    const { disabled, readOnly, onSelect, options: maybeOptions, multiselect = false, getOptionLabel, getOptionValue, getOptionMenuLabel = getOptionLabel, values = [], nothingSelectedText = "", contrast, disabledOptions, borderless, ...otherProps } = props;
     const { contains } = (0, react_aria_1.useFilter)({ sensitivity: "base" });
     const isDisabled = !!disabled;
     const isReadOnly = !!readOnly;
-    function onSelectionChange(keys) {
+    const [fieldState, setFieldState] = (0, react_1.useState)(() => {
         var _a;
-        // Close menu upon selection change only for Single selection mode
-        if (!multiselect) {
-            state.close();
+        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,
+            allOptions: initOptions,
+            selectedOptions: selectedOptions,
+            optionsLoading: false,
+        };
+    });
+    /** Resets field's input value and filtered options list for cases where the user exits the field without making changes (on Escape, or onBlur) */
+    function resetField() {
+        const inputValue = getInputValue(fieldState.allOptions.filter((o) => values === null || values === void 0 ? void 0 : values.includes(getOptionValue(o))), getOptionLabel, multiselect, nothingSelectedText);
+        // Conditionally reset the value if the current inputValue doesn't match that of the passed in value, or we filtered the list
+        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;
         }
@@ -41,7 +66,6 @@ function SelectFieldBase(props) {
         const selectionChanged = !(keys.size === state.selectionManager.selectedKeys.size &&
             [...keys].every((value) => state.selectionManager.selectedKeys.has(value)));
         if (multiselect && keys.size === 0) {
-            // "All" happens if we selected everything or nothing.
             setFieldState({
                 ...fieldState,
                 isOpen: true,
@@ -49,70 +73,73 @@ function SelectFieldBase(props) {
                 selectedKeys: [],
                 selectedOptions: [],
             });
-            selectionChanged && onSelect([]);
+            selectionChanged && onSelect([], []);
             return;
         }
-        const keysArray = [...keys.values()];
-        const firstKey = keysArray[0];
-        // Even though the key is number|string, this will always be a string
-        const firstSelectedOption = options.find((o) => (0, Value_1.valueToKey)(getOptionValue(o)) === firstKey);
-        if (multiselect) {
-            setFieldState({
-                ...fieldState,
-                // If menu is open then reset inputValue to "". Otherwise set inputValue depending on number of options selected.
-                inputValue: state.isOpen ? "" : keysArray.length === 1 ? getOptionLabel(firstSelectedOption) : "",
-                selectedKeys: keysArray,
-                selectedOptions: options.filter((o) => keysArray.includes((0, Value_1.valueToKey)(getOptionValue(o)))),
-                filteredOptions: options,
-            });
-        }
-        else {
-            setFieldState({
-                ...fieldState,
-                isOpen: false,
-                inputValue: firstSelectedOption ? getOptionLabel(firstSelectedOption) : "",
-                selectedKeys: [firstKey],
-                selectedOptions: firstSelectedOption ? [firstSelectedOption] : [],
-            });
-        }
-        selectionChanged && onSelect([...keys.values()].map(Value_1.keyToValue));
+        const selectedKeys = [...keys.values()];
+        const selectedOptions = fieldState.allOptions.filter((o) => selectedKeys.includes((0, Value_1.valueToKey)(getOptionValue(o))));
+        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)
+                ? ""
+                : firstSelectedOption
+                    ? getOptionLabel(firstSelectedOption)
+                    : "",
+            selectedKeys,
+            selectedOptions,
+            filteredOptions: fieldState.allOptions,
+        }));
+        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();
         }
     }
     function onInputChange(value) {
-        setFieldState((prevState) => ({
-            ...prevState,
-            isOpen: true,
-            inputValue: value,
-            filteredOptions: options.filter((o) => contains(getOptionLabel(o), value)),
-        }));
+        if (value !== fieldState.inputValue) {
+            setFieldState((prevState) => ({
+                ...prevState,
+                inputValue: value,
+                filteredOptions: fieldState.allOptions.filter((o) => contains(getOptionLabel(o), value)),
+            }));
+        }
+    }
+    async function maybeInitLoad() {
+        if (!Array.isArray(maybeOptions)) {
+            setFieldState((prevState) => ({ ...prevState, optionsLoading: true }));
+            const { options } = await maybeOptions.load();
+            setFieldState((prevState) => ({
+                ...prevState,
+                filteredOptions: options,
+                allOptions: options,
+                optionsLoading: false,
+            }));
+        }
     }
+    const firstOpen = (0, react_1.useRef)(true);
     function onOpenChange(isOpen) {
+        if (firstOpen.current && isOpen) {
+            maybeInitLoad();
+            firstOpen.current = false;
+        }
         setFieldState((prevState) => ({
             ...prevState,
+            // When using the multiselect field, always empty the input upon open.
             inputValue: multiselect && isOpen ? "" : prevState.inputValue,
             isOpen,
         }));
     }
-    function initFieldState() {
-        // Use the current value to find the option
-        const selectedKeys = values !== null && values !== void 0 ? values : [];
-        const selectedOptions = options.filter((o) => selectedKeys.includes(getOptionValue(o)));
-        return {
-            isOpen: false,
-            selectedKeys: selectedKeys.map(Value_1.valueToKey),
-            inputValue: selectedOptions.length === 1
-                ? getOptionLabel(selectedOptions[0])
-                : multiselect && selectedOptions.length === 0
-                    ? nothingSelectedText
-                    : "",
-            filteredOptions: options,
-            selectedOptions: selectedOptions,
-        };
-    }
-    const [fieldState, setFieldState] = (0, react_1.useState)(initFieldState);
+    // Used to calculate the rendered width of the combo box (input + button)
+    const comboBoxRef = (0, react_1.useRef)(null);
+    const triggerRef = (0, react_1.useRef)(null);
+    const inputRef = (0, react_1.useRef)(null);
+    const inputWrapRef = (0, react_1.useRef)(null);
+    const listBoxRef = (0, react_1.useRef)(null);
+    const popoverRef = (0, react_1.useRef)(null);
     const comboBoxProps = {
         ...otherProps,
         disabledKeys: disabledOptions === null || disabledOptions === void 0 ? void 0 : disabledOptions.map(Value_1.valueToKey),
@@ -120,7 +147,6 @@ function SelectFieldBase(props) {
         items: fieldState.filteredOptions,
         isDisabled,
         isReadOnly,
-        label,
         onInputChange,
         onOpenChange,
         menuTrigger: "focus",
@@ -128,40 +154,68 @@ function SelectFieldBase(props) {
     };
     const state = (0, react_stately_1.useComboBoxState)({
         ...comboBoxProps,
+        allowsEmptyCollection: true,
         // useComboBoxState.onSelectionChange will be executed if a keyboard interaction (Enter key) is used to select an item
         onSelectionChange: (key) => {
             // ignore undefined/null keys - `null` can happen if input field's value is completely deleted after having a value assigned.
             if (key) {
-                const selectedKeys = multipleSelectionState.selectedKeys;
+                const selectedKeys = state.selectionManager.selectedKeys;
                 // Create the `newSelection` Set depending on the value type of SelectField.
                 const newSelection = new Set(!multiselect ? [key] : [...selectedKeys, key]);
                 // Use only the `multipleSelectionState` to manage selected keys
-                multipleSelectionState.setSelectedKeys(newSelection);
+                state.selectionManager.setSelectedKeys(newSelection);
             }
         },
     });
-    const multipleSelectionState = (0, react_stately_1.useMultipleSelectionState)({
+    //@ts-ignore - `selectionManager.state` exists, but not according to the types
+    state.selectionManager.state = (0, react_stately_1.useMultipleSelectionState)({
         selectionMode: multiselect ? "multiple" : "single",
         // Do not allow an empty selection if single select mode
         disallowEmptySelection: !multiselect,
         selectedKeys: fieldState.selectedKeys,
         onSelectionChange,
     });
-    //@ts-ignore - `selectionManager.state` exists, but not according to the types
-    state.selectionManager.state = multipleSelectionState;
     // Ensure we reset if the field's values change and the user is not actively selecting options.
     (0, react_1.useEffect)(() => {
-        if (!state.isOpen) {
-            setFieldState(initFieldState);
+        if (!state.isOpen && !(0, utils_1.areArraysEqual)(values, fieldState.selectedKeys)) {
+            setFieldState((prevState) => {
+                var _a;
+                const selectedOptions = prevState.allOptions.filter((o) => values === null || values === void 0 ? void 0 : values.includes(getOptionValue(o)));
+                return {
+                    ...prevState,
+                    selectedKeys: (_a = selectedOptions === null || selectedOptions === void 0 ? void 0 : selectedOptions.map((o) => (0, Value_1.valueToKey)(getOptionValue(o)))) !== null && _a !== void 0 ? _a : [],
+                    inputValue: selectedOptions.length === 1
+                        ? getOptionLabel(selectedOptions[0])
+                        : multiselect && selectedOptions.length === 0
+                            ? nothingSelectedText
+                            : "",
+                    selectedOptions: selectedOptions,
+                };
+            });
         }
     }, [values]);
-    // Used to calculate the rendered width of the combo box (input + button)
-    const comboBoxRef = (0, react_1.useRef)(null);
-    const triggerRef = (0, react_1.useRef)(null);
-    const inputRef = (0, react_1.useRef)(null);
-    const inputWrapRef = (0, react_1.useRef)(null);
-    const listBoxRef = (0, react_1.useRef)(null);
-    const popoverRef = (0, react_1.useRef)(null);
+    (0, react_1.useEffect)(() => {
+        // Only update the fieldset when options change, when options is an array.
+        // Otherwise, if the options are passed in as an object, then we assume the caller is updating options via a Promise and not via updating props.
+        if (Array.isArray(maybeOptions) && maybeOptions !== fieldState.allOptions) {
+            setFieldState((prevState) => {
+                var _a;
+                const selectedOptions = maybeOptions.filter((o) => values === null || values === void 0 ? void 0 : values.includes(getOptionValue(o)));
+                return {
+                    ...prevState,
+                    selectedKeys: (_a = selectedOptions === null || selectedOptions === void 0 ? void 0 : selectedOptions.map((o) => (0, Value_1.valueToKey)(getOptionValue(o)))) !== null && _a !== void 0 ? _a : [],
+                    inputValue: selectedOptions.length === 1
+                        ? getOptionLabel(selectedOptions[0])
+                        : multiselect && selectedOptions.length === 0
+                            ? nothingSelectedText
+                            : "",
+                    selectedOptions: selectedOptions,
+                    filteredOptions: maybeOptions,
+                    allOptions: maybeOptions,
+                };
+            });
+        }
+    }, [maybeOptions]);
     // For the most part, the returned props contain `aria-*` and `id` attributes for accessibility purposes.
     const { buttonProps: triggerProps, inputProps, listBoxProps, labelProps, } = (0, react_aria_1.useComboBox)({
         ...comboBoxProps,
@@ -188,6 +242,13 @@ function SelectFieldBase(props) {
         // Ensures the menu never gets too small.
         minWidth: 200,
     };
-    return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ css: Css_1.Css.df.fdc.w100.maxw((0, Css_1.px)(550)).$, ref: comboBoxRef }, { children: [(0, jsx_runtime_1.jsx)(SelectFieldInput_1.SelectFieldInput, Object.assign({}, otherProps, { buttonProps: buttonProps, buttonRef: triggerRef, compact: compact, errorMsg: errorMsg, helperText: helperText, fieldDecoration: fieldDecoration, inputProps: inputProps, inputRef: inputRef, inputWrapRef: inputWrapRef, isDisabled: isDisabled, required: required, isReadOnly: isReadOnly, state: state, onBlur: onBlur, onFocus: onFocus, inlineLabel: inlineLabel, label: label, hideLabel: hideLabel, labelProps: labelProps, selectedOptions: fieldState.selectedOptions, getOptionValue: getOptionValue, getOptionLabel: getOptionLabel, sizeToContent: sizeToContent, contrast: contrast, nothingSelectedText: nothingSelectedText, borderless: borderless, tooltip: (0, components_1.resolveTooltip)(disabled, undefined, readOnly) }), void 0), state.isOpen && ((0, jsx_runtime_1.jsx)(internal_1.Popover, Object.assign({ triggerRef: triggerRef, popoverRef: popoverRef, positionProps: positionProps, onClose: () => state.close(), isOpen: state.isOpen, minWidth: 200 }, { children: (0, jsx_runtime_1.jsx)(ListBox_1.ListBox, Object.assign({}, listBoxProps, { positionProps: positionProps, state: state, listBoxRef: listBoxRef, selectedOptions: fieldState.selectedOptions, getOptionLabel: getOptionLabel, getOptionValue: (o) => (0, Value_1.valueToKey)(getOptionValue(o)), contrast: contrast }), void 0) }), void 0))] }), void 0));
+    return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ css: Css_1.Css.df.fdc.w100.maxw((0, Css_1.px)(550)).$, ref: comboBoxRef }, { children: [(0, jsx_runtime_1.jsx)(SelectFieldInput_1.SelectFieldInput, Object.assign({}, otherProps, { buttonProps: buttonProps, buttonRef: triggerRef, inputProps: inputProps, inputRef: inputRef, inputWrapRef: inputWrapRef, state: state, labelProps: labelProps, selectedOptions: fieldState.selectedOptions, getOptionValue: getOptionValue, getOptionLabel: getOptionLabel, contrast: contrast, nothingSelectedText: nothingSelectedText, borderless: borderless, tooltip: (0, components_1.resolveTooltip)(disabled, undefined, readOnly), resetField: resetField }), void 0), state.isOpen && ((0, jsx_runtime_1.jsx)(internal_1.Popover, Object.assign({ triggerRef: triggerRef, popoverRef: popoverRef, positionProps: positionProps, onClose: () => state.close(), isOpen: state.isOpen, minWidth: 200 }, { children: (0, jsx_runtime_1.jsx)(ListBox_1.ListBox, Object.assign({}, listBoxProps, { positionProps: positionProps, state: state, listBoxRef: listBoxRef, selectedOptions: fieldState.selectedOptions, getOptionLabel: getOptionLabel, getOptionValue: (o) => (0, Value_1.valueToKey)(getOptionValue(o)), contrast: contrast, loading: fieldState.optionsLoading }), void 0) }), void 0))] }), void 0));
 }
 exports.SelectFieldBase = SelectFieldBase;
+function getInputValue(selectedOptions, getOptionLabel, multiselect, nothingSelectedText) {
+    return selectedOptions.length === 1
+        ? getOptionLabel(selectedOptions[0])
+        : multiselect && selectedOptions.length === 0
+            ? nothingSelectedText
+            : "";
+}

package/dist/inputs/internal/SelectFieldInput.d.ts

@@ -2,6 +2,7 @@ import { InputHTMLAttributes, LabelHTMLAttributes, MutableRefObject, ReactNode }
 import { ComboBoxState } from "react-stately";
 import { PresentationFieldProps } from "../../components/PresentationContext";
 import { Value } from "../Value";
+import { Callback } from "../../types";
 interface SelectFieldInputProps<O, V extends Value> extends PresentationFieldProps {
     buttonProps: any;
     buttonRef: MutableRefObject<HTMLButtonElement | null>;
@@ -9,8 +10,6 @@ interface SelectFieldInputProps<O, V extends Value> extends PresentationFieldPro
     inputRef: MutableRefObject<HTMLInputElement | null>;
     inputWrapRef: MutableRefObject<HTMLDivElement | null>;
     state: ComboBoxState<O>;
-    isDisabled: boolean;
-    isReadOnly: boolean;
     fieldDecoration?: (opt: O) => ReactNode;
     errorMsg?: string;
     required?: boolean;
@@ -23,10 +22,11 @@ interface SelectFieldInputProps<O, V extends Value> extends PresentationFieldPro
     selectedOptions: O[];
     getOptionValue: (opt: O) => V;
     getOptionLabel: (opt: O) => string;
-    sizeToContent: boolean;
+    sizeToContent?: boolean;
     contrast?: boolean;
     nothingSelectedText: string;
     tooltip?: ReactNode;
+    resetField: Callback;
 }
 export declare function SelectFieldInput<O, V extends Value>(props: SelectFieldInputProps<O, V>): import("@emotion/react/jsx-runtime").JSX.Element;
 export {};

package/dist/inputs/internal/SelectFieldInput.js

@@ -7,19 +7,18 @@ const react_aria_1 = require("react-aria");
 const components_1 = require("../../components");
 const Css_1 = require("../../Css");
 const TextFieldBase_1 = require("../TextFieldBase");
-const Value_1 = require("../Value");
 const utils_1 = require("../../utils");
 function SelectFieldInput(props) {
-    const { inputProps, inputRef, inputWrapRef, buttonProps, buttonRef, compact, errorMsg, required, helperText, state, fieldDecoration, isDisabled, isReadOnly, onBlur, onFocus, inlineLabel, label, labelProps, hideLabel, selectedOptions, getOptionValue, getOptionLabel, sizeToContent, contrast = false, nothingSelectedText, ...otherProps } = props;
+    const { inputProps, buttonProps, buttonRef, errorMsg, state, fieldDecoration, onBlur, onFocus, inlineLabel, selectedOptions, getOptionValue, getOptionLabel, sizeToContent = false, contrast = false, nothingSelectedText, resetField, ...otherProps } = props;
     const [isFocused, setIsFocused] = (0, react_1.useState)(false);
     const isMultiSelect = state.selectionManager.selectionMode === "multiple";
     const showNumSelection = isMultiSelect && state.selectionManager.selectedKeys.size > 1;
     // For MultiSelect only show the `fieldDecoration` when input is not in focus.
     const showFieldDecoration = (!isMultiSelect || (isMultiSelect && !isFocused)) && fieldDecoration && selectedOptions.length === 1;
-    return ((0, jsx_runtime_1.jsx)(TextFieldBase_1.TextFieldBase, Object.assign({}, otherProps, { inputRef: inputRef, inputWrapRef: inputWrapRef, label: label, readOnly: isReadOnly, hideLabel: hideLabel, labelProps: labelProps, inlineLabel: inlineLabel, compact: compact, required: required, errorMsg: errorMsg, helperText: helperText, contrast: contrast, xss: !inlineLabel && !isReadOnly ? Css_1.Css.fw5.$ : {}, startAdornment: (showNumSelection && ((0, jsx_runtime_1.jsx)("span", Object.assign({ css: Css_1.Css.wPx(16).hPx(16).fs0.br100.bgLightBlue700.white.tinyEm.df.aic.jcc.$ }, { children: state.selectionManager.selectedKeys.size }), void 0))) ||
-            (showFieldDecoration && fieldDecoration(selectedOptions[0])), endAdornment: !isReadOnly && ((0, jsx_runtime_1.jsx)("button", Object.assign({}, buttonProps, { disabled: isDisabled, ref: buttonRef, css: {
+    return ((0, jsx_runtime_1.jsx)(TextFieldBase_1.TextFieldBase, Object.assign({}, otherProps, { readOnly: inputProps.readOnly, inlineLabel: inlineLabel, errorMsg: errorMsg, contrast: contrast, xss: !inlineLabel && !inputProps.readOnly ? Css_1.Css.fw5.$ : {}, startAdornment: (showNumSelection && ((0, jsx_runtime_1.jsx)("span", Object.assign({ css: Css_1.Css.wPx(16).hPx(16).fs0.br100.bgLightBlue700.white.tinyEm.df.aic.jcc.$ }, { children: state.selectionManager.selectedKeys.size }), void 0))) ||
+            (showFieldDecoration && fieldDecoration(selectedOptions[0])), endAdornment: !inputProps.readOnly && ((0, jsx_runtime_1.jsx)("button", Object.assign({}, buttonProps, { disabled: inputProps.disabled, ref: buttonRef, css: {
                 ...Css_1.Css.br4.outline0.gray700.if(contrast).gray400.$,
-                ...(isDisabled ? Css_1.Css.cursorNotAllowed.gray400.if(contrast).gray600.$ : {}),
+                ...(inputProps.disabled ? Css_1.Css.cursorNotAllowed.gray400.if(contrast).gray600.$ : {}),
             } }, { children: (0, jsx_runtime_1.jsx)(components_1.Icon, { icon: state.isOpen ? "chevronUp" : "chevronDown" }, void 0) }), void 0)), inputProps: {
             ...(0, react_aria_1.mergeProps)(inputProps, { "aria-invalid": Boolean(errorMsg), onInput: () => state.open() }),
             // Not merging the following as we want them to overwrite existing events
@@ -37,7 +36,7 @@ function SelectFieldInput(props) {
                             return;
                         }
                         // By default, the Escape key would "revert" changes,
-                        // but we just want to close the menu and leave the selections as is
+                        // but we just want to close the menu and leave the reset of the field state as is.
                         if (e.key === "Escape") {
                             state.close();
                             return;
@@ -48,31 +47,31 @@ function SelectFieldInput(props) {
                     // reset the field to its previous value. However, because we use a the Multiple Selection State manager,
                     // then our `state.selectedKey` isn't set. So we need to properly reset the state ourselves.
                     if (e.key === "Escape") {
-                        // Triggering `Escape` is basically like re-selecting currently selected option, so do that if there is one.
-                        state.selectionManager.setSelectedKeys(selectedOptions.length > 0 ? [(0, Value_1.valueToKey)(getOptionValue(selectedOptions[0]))] : []);
+                        state.close();
+                        resetField();
                         return;
                     }
                     inputProps.onKeyDown && inputProps.onKeyDown(e);
                 },
-                onBlur: () => {
+                onBlur: (e) => {
+                    // Do not call onBlur if readOnly or interacting within the input wrapper (such as the menu trigger button).
+                    if (inputProps.readOnly ||
+                        (props.inputWrapRef.current && props.inputWrapRef.current.contains(e.relatedTarget))) {
+                        return;
+                    }
                     // We purposefully override onBlur here instead of using mergeProps, b/c inputProps.onBlur
                     // goes into useComboBox's onBlur, which calls setFocused(false), which in useComboBoxState
                     // detects a) there is no props.selectedKey (b/c we don't pass it), and b) there is an
                     // `inputValue`, so it thinks it needs to call `resetInputValue()`.
-                    //
-                    // I assume we don't pass `selectedKey` b/c we support multiple keys.
-                    if (isReadOnly) {
-                        return;
-                    }
                     setIsFocused(false);
                     (0, utils_1.maybeCall)(onBlur);
                     state.close();
-                    // Always call `setSelectedKeys` onBlur with its existing selected keys..
-                    // This ensures the field's `input.value` resets to what it should be in case it doesn't currently match.
-                    state.selectionManager.setSelectedKeys(state.selectionManager.selectedKeys);
+                    // Always call `resetField` onBlur, this ensures the field's `input.value` resets
+                    // to what it should be in case it doesn't currently match.
+                    resetField();
                 },
                 onFocus: () => {
-                    if (isReadOnly)
+                    if (inputProps.readOnly)
                         return;
                     setIsFocused(true);
                     (0, utils_1.maybeCall)(onFocus);

package/dist/inputs/internal/VirtualizedOptions.d.ts

@@ -6,6 +6,7 @@ interface VirtualizedOptionsProps<O> {
     onListHeightChange: (height: number) => void;
     contrast: boolean;
     scrollOnFocus?: boolean;
+    loading?: boolean | (() => JSX.Element);
 }
 export declare function VirtualizedOptions<O>(props: VirtualizedOptionsProps<O>): import("@emotion/react/jsx-runtime").JSX.Element;
 export {};

package/dist/inputs/internal/VirtualizedOptions.js

@@ -4,10 +4,11 @@ exports.VirtualizedOptions = void 0;
 const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
 const react_1 = require("react");
 const react_virtuoso_1 = require("react-virtuoso");
+const LoadingDots_1 = require("./LoadingDots");
 const Option_1 = require("./Option");
 // Displays ListBox options in a virtualized container for performance reasons
 function VirtualizedOptions(props) {
-    const { state, items, onListHeightChange, contrast, scrollOnFocus } = props;
+    const { state, items, onListHeightChange, contrast, scrollOnFocus, loading } = props;
     const virtuosoRef = (0, react_1.useRef)(null);
     const focusedItem = state.collection.getItem(state.selectionManager.focusedKey);
     const selectedItem = state.selectionManager.selectedKeys.size > 0
@@ -33,6 +34,10 @@ function VirtualizedOptions(props) {
                     // Only send scrollToIndex functionality forward if we are not auto-scrolling on focus.
                     scrollToIndex: scrollOnFocus ? undefined : (_a = virtuosoRef.current) === null || _a === void 0 ? void 0 : _a.scrollToIndex }, item.key));
             }
-        } }, void 0));
+        }, components: !loading
+            ? {}
+            : {
+                Footer: typeof loading === "function" ? loading : () => (0, jsx_runtime_1.jsx)(LoadingDots_1.LoadingDots, { contrast: contrast }, void 0),
+            } }, void 0));
 }
 exports.VirtualizedOptions = VirtualizedOptions;

package/dist/utils/index.d.ts

@@ -27,3 +27,4 @@ export declare class EmptyRef<T> implements MutableRefObject<T> {
     set current(value: T);
 }
 export declare const isAbsoluteUrl: (url: string) => boolean;
+export declare function areArraysEqual(a: any[], b: any[]): boolean;

package/dist/utils/index.js

@@ -10,7 +10,7 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
     for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.isAbsoluteUrl = exports.EmptyRef = exports.safeEntries = exports.noop = exports.omitKey = exports.safeKeys = exports.maybeCall = exports.toGroupState = exports.toToggleState = void 0;
+exports.areArraysEqual = exports.isAbsoluteUrl = exports.EmptyRef = exports.safeEntries = exports.noop = exports.omitKey = exports.safeKeys = exports.maybeCall = exports.toGroupState = exports.toToggleState = void 0;
 /** Adapts our state to what useToggleState returns in a stateless manner. */
 function toToggleState(isSelected, onChange) {
     return {
@@ -74,3 +74,7 @@ class EmptyRef {
 exports.EmptyRef = EmptyRef;
 const isAbsoluteUrl = (url) => /^(http(s?)):\/\//i.test(url);
 exports.isAbsoluteUrl = isAbsoluteUrl;
+function areArraysEqual(a, b) {
+    return a.length === b.length && a.every((val, idx) => val === b[idx]);
+}
+exports.areArraysEqual = areArraysEqual;

package/dist/utils/sb.js

@@ -6,7 +6,7 @@ const components_1 = require("../components");
 const Css_1 = require("../Css");
 const rtl_1 = require("./rtl");
 function withRouter(url, path) {
-    return (storyFn) => (0, rtl_1.withRouter)(url, path).wrap(storyFn());
+    return (Story) => (0, rtl_1.withRouter)(url, path).wrap((0, jsx_runtime_1.jsx)(Story, {}, void 0));
 }
 exports.withRouter = withRouter;
 /** A somewhat typesafe way to set `FooStory.story` metadata. */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@homebound/beam",
-  "version": "2.97.0",
+  "version": "2.97.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.1.5",
+    "@homebound/form-state": "^2.2.13",
     "@react-aria/utils": "^3.9.0",
     "@react-hook/resize-observer": "^1.2.2",
     "@types/tinycolor2": "^1.4.2",
@@ -71,6 +71,7 @@
   "devDependencies": {
     "@babel/core": "^7.15.5",
     "@babel/plugin-proposal-class-properties": "^7.14.5",
+    "@babel/preset-env": "^7.16.5",
     "@babel/preset-typescript": "^7.15.0",
     "@emotion/babel-preset-css-prop": "^11.2.0",
     "@emotion/jest": "^11.3.0",
@@ -79,10 +80,12 @@
     "@homebound/rtl-utils": "^2.51.0",
     "@homebound/tsconfig": "^1.0.3",
     "@semantic-release/git": "^9.0.0",
-    "@storybook/addon-essentials": "^6.3.4",
-    "@storybook/addon-links": "^6.3.4",
-    "@storybook/addons": "^6.3.4",
-    "@storybook/react": "^6.3.4",
+    "@storybook/addon-essentials": "^6.4.9",
+    "@storybook/addon-interactions": "^6.4.9",
+    "@storybook/addon-links": "^6.4.9",
+    "@storybook/addons": "^6.4.9",
+    "@storybook/react": "^6.4.9",
+    "@storybook/testing-library": "^0.0.7",
     "@testing-library/jest-dom": "^5.11.9",
     "@testing-library/react-hooks": "^7.0.1",
     "@tsconfig/recommended": "^1.0.1",