@homebound/beam 2.261.0 → 2.263.0

package/dist/components/Filters/MultiFilter.js

@@ -3,7 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.multiFilter = void 0;
 const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
 const BaseFilter_1 = require("./BaseFilter");
-const SelectFieldBase_1 = require("../../inputs/internal/SelectFieldBase");
+const ComboBoxBase_1 = require("../../inputs/internal/ComboBoxBase");
 const MultiSelectField_1 = require("../../inputs/MultiSelectField");
 const ToggleChipGroup_1 = require("../../inputs/ToggleChipGroup");
 const defaultTestId_1 = require("../../utils/defaultTestId");
@@ -16,7 +16,7 @@ class MultiFilter extends BaseFilter_1.BaseFilter {
         var _a;
         if (inModal && this.props.options.length > 0 && this.props.options.length <= 8) {
             const { disabledOptions } = this.props;
-            const disabledOptionsWithReasons = Object.fromEntries((_a = disabledOptions === null || disabledOptions === void 0 ? void 0 : disabledOptions.map(SelectFieldBase_1.disabledOptionToKeyedTuple)) !== null && _a !== void 0 ? _a : []);
+            const disabledOptionsWithReasons = Object.fromEntries((_a = disabledOptions === null || disabledOptions === void 0 ? void 0 : disabledOptions.map(ComboBoxBase_1.disabledOptionToKeyedTuple)) !== null && _a !== void 0 ? _a : []);
             const disabledKeys = Object.keys(disabledOptionsWithReasons);
             return ((0, jsx_runtime_1.jsx)(ToggleChipGroup_1.ToggleChipGroup, { label: this.label, options: this.props.options.map((o) => {
                     const value = this.props.getOptionValue(o);

package/dist/components/internal/MenuItem.d.ts

@@ -7,5 +7,5 @@ interface MenuItemProps {
     onClose: VoidFunction;
     contrast: boolean;
 }
-export declare function MenuItemImpl(props: MenuItemProps): import("@emotion/react/jsx-runtime").JSX.Element;
+export declare function MenuItemImpl(props: MenuItemProps): import("@emotion/react/jsx-runtime").JSX.Element | null;
 export {};

package/dist/components/internal/MenuItem.js

@@ -15,6 +15,9 @@ const defaultTestId_1 = require("../../utils/defaultTestId");
 function MenuItemImpl(props) {
     const { item, state, onClose, contrast } = props;
     const menuItem = item.value;
+    if (!menuItem) {
+        return null;
+    }
     const { disabled, onClick, label, destructive } = menuItem;
     const isDisabled = Boolean(disabled);
     const isSelected = state.selectionManager.selectedKeys.has(label);

package/dist/inputs/CheckboxBase.js

@@ -23,7 +23,7 @@ function CheckboxBase(props) {
             .maxw((0, Css_1.px)(320))
             .if(description !== undefined)
             .maxw((0, Css_1.px)(344))
-            .if(isDisabled).cursorNotAllowed.$, "aria-label": label, children: [(0, jsx_runtime_1.jsx)(react_aria_1.VisuallyHidden, { children: (0, jsx_runtime_1.jsx)("input", { ref: ref, ...(0, react_aria_1.mergeProps)(inputProps, focusProps), ...tid }) }), (0, jsx_runtime_1.jsx)("span", { ...hoverProps, css: {
+            .if(isDisabled).cursorNotAllowed.$, "aria-label": label, children: [(0, jsx_runtime_1.jsx)(react_aria_1.VisuallyHidden, { children: (0, jsx_runtime_1.jsx)("input", { ref: ref, ...(0, react_aria_1.mergeProps)(inputProps, focusProps), ...tid, "data-indeterminate": isIndeterminate }) }), (0, jsx_runtime_1.jsx)("span", { ...hoverProps, css: {
                     ...baseStyles,
                     ...(((isSelected && !isDisabled) || isIndeterminate) && filledBoxStyles),
                     ...(((isSelected && !isDisabled) || isIndeterminate) && isHovered && filledBoxHoverStyles),

package/dist/inputs/DateFields/DateFieldBase.js

@@ -24,9 +24,9 @@ function DateFieldBase(props) {
     const inputWrapRef = (0, react_1.useRef)(null);
     const buttonRef = (0, react_1.useRef)(null);
     const overlayRef = (0, react_1.useRef)(null);
-    // Local focus state to conditionally call onBlur when the date picker closes.
+    // Local focus ref to conditionally call onBlur when the date picker closes. Using a ref instead of a state to have a reliable value between renders
     // E.g. If the picker closes due to focus going back to the input field then don't call onBlur. Also used to avoid updating WIP values
-    const [isFocused, setIsFocused] = (0, react_1.useState)(false);
+    const isFocused = (0, react_1.useRef)(false);
     const dateFormat = (0, utils_1.getDateFormat)(format);
     // The `wipValue` allows the "range" mode to set the value to `undefined`, even if the `onChange` response cannot be undefined.
     // This makes working within the DateRangePicker much more user friendly.
@@ -45,8 +45,9 @@ function DateFieldBase(props) {
     };
     const state = (0, react_stately_1.useOverlayTriggerState)({
         onOpenChange: (isOpen) => {
-            // Handles calling `onBlur` for the case where the user interacts with the overlay, removing focus from the input field, and eventually closes the overlay (whether clicking away, or selecting a date)
-            if (!isOpen && !isFocused) {
+            // Handles avoiding calling `onBlur` for the case where the user closes the overlay by changing the DateField input value (TextFieldBase.onChange calls state.close()).
+            // Calls `onBlur` for the case where the user interacts with the overlay (!isFocused) and eventually closes the overlay (whether clicking away, or selecting a date) as focus is not returned to the field.
+            if (!isOpen && !isFocused.current) {
                 (0, utils_2.maybeCall)(onBlur);
             }
         },
@@ -57,8 +58,8 @@ function DateFieldBase(props) {
         onFocus: () => {
             var _a;
             // Open overlay on focus of the input.
+            isFocused.current = true;
             state.open();
-            setIsFocused(true);
             (0, utils_2.maybeCall)(onFocus);
             if (wipValue && dateFormat !== utils_1.dateFormats.short) {
                 // When focused, change to use the "short" date format, as it is simpler to update by hand and parse.
@@ -69,7 +70,7 @@ function DateFieldBase(props) {
         },
         onBlur: (e) => {
             var _a, _b;
-            setIsFocused(false);
+            isFocused.current = false;
             // If we are interacting any other part of `inputWrap` ref (such as the calendar button) return early as clicking anywhere within there will push focus to the input field.
             // Or if interacting with the DatePicker then also return early. The overlay will handle calling `onBlur` once it closes.
             if ((inputWrapRef.current && inputWrapRef.current.contains(e.relatedTarget)) ||
@@ -89,7 +90,10 @@ function DateFieldBase(props) {
                 setInputValue((_b = (isRangeMode ? (0, utils_1.formatDateRange)(props.value, dateFormat) : (0, utils_1.formatDate)(props.value, dateFormat))) !== null && _b !== void 0 ? _b : "");
             }
             state.close();
-            (0, utils_2.maybeCall)(onBlur);
+            // Only call `onBlur` if the overlay is closed. In other cases, the overlay's `onOpenChange` will handling calling `onBlur` when closing and the focus is not still on the input.
+            if (!state.isOpen) {
+                (0, utils_2.maybeCall)(onBlur);
+            }
         },
         onKeyDown: (e) => {
             var _a;
@@ -121,7 +125,7 @@ function DateFieldBase(props) {
     (0, react_1.useEffect)(() => {
         var _a;
         // Avoid updating any WIP values.
-        if (!isFocused && !state.isOpen) {
+        if (!isFocused.current && !state.isOpen) {
             setWipValue(value);
             setInputValue((_a = (isRangeMode ? (0, utils_1.formatDateRange)(props.value, dateFormat) : (0, utils_1.formatDate)(props.value, dateFormat))) !== null && _a !== void 0 ? _a : "");
         }

package/dist/inputs/MultiLineSelectField.d.ts

@@ -1,8 +1,8 @@
 /// <reference types="react" />
 import { Value } from "./";
-import { BeamSelectFieldBaseProps } from "./internal/SelectFieldBase";
+import { ComboBoxBaseProps } from "./internal/ComboBoxBase";
 import { Optional } from "../types";
-export interface MultiLineSelectFieldProps<O, V extends Value> extends Exclude<BeamSelectFieldBaseProps<O, V>, "unsetLabel"> {
+export interface MultiLineSelectFieldProps<O, V extends Value> extends Exclude<ComboBoxBaseProps<O, V>, "unsetLabel"> {
     values: V[];
     options: O[];
     getOptionValue: (opt: O) => V;

package/dist/inputs/MultiSelectField.d.ts

@@ -1,8 +1,8 @@
 import { ReactNode } from "react";
 import { Value } from "./";
-import { BeamSelectFieldBaseProps } from "./internal/SelectFieldBase";
+import { ComboBoxBaseProps } from "./internal/ComboBoxBase";
 import { HasIdAndName, Optional } from "../types";
-export interface MultiSelectFieldProps<O, V extends Value> extends Exclude<BeamSelectFieldBaseProps<O, V>, "unsetLabel"> {
+export interface MultiSelectFieldProps<O, V extends Value> extends Exclude<ComboBoxBaseProps<O, V>, "unsetLabel"> {
     /** Renders `opt` in the dropdown menu, defaults to the `getOptionLabel` prop. */
     getOptionMenuLabel?: (opt: O) => string | ReactNode;
     getOptionValue: (opt: O) => V;

package/dist/inputs/MultiSelectField.js

@@ -2,12 +2,12 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.MultiSelectField = void 0;
 const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
-const SelectFieldBase_1 = require("./internal/SelectFieldBase");
+const ComboBoxBase_1 = require("./internal/ComboBoxBase");
 function MultiSelectField(props) {
     const { getOptionValue = (opt) => opt.id, // if unset, assume O implements HasId
     getOptionLabel = (opt) => opt.name, // if unset, assume O implements HasName
     options, onSelect, values, ...otherProps } = props;
-    return ((0, jsx_runtime_1.jsx)(SelectFieldBase_1.SelectFieldBase, { multiselect: true, ...otherProps, options: options, getOptionLabel: getOptionLabel, getOptionValue: getOptionValue, values: values, onSelect: (values) => {
+    return ((0, jsx_runtime_1.jsx)(ComboBoxBase_1.ComboBoxBase, { multiselect: true, ...otherProps, options: options, getOptionLabel: getOptionLabel, getOptionValue: getOptionValue, values: values, onSelect: (values) => {
             const [selectedValues, selectedOptions] = options
                 .filter((o) => values.includes(getOptionValue(o)))
                 .reduce((acc, o) => {

package/dist/inputs/SelectField.d.ts

@@ -1,8 +1,8 @@
 /// <reference types="react" />
 import { Value } from "./";
-import { BeamSelectFieldBaseProps } from "./internal/SelectFieldBase";
+import { ComboBoxBaseProps } from "./internal/ComboBoxBase";
 import { HasIdAndName, Optional } from "../types";
-export interface SelectFieldProps<O, V extends Value> extends Omit<BeamSelectFieldBaseProps<O, V>, "values" | "onSelect"> {
+export interface SelectFieldProps<O, V extends Value> extends Omit<ComboBoxBaseProps<O, V>, "values" | "onSelect" | "multiselect"> {
     /** The current value; it can be `undefined`, even if `V` cannot be. */
     value: V | undefined;
     onSelect: (value: V | undefined, opt: O | undefined) => void;

package/dist/inputs/SelectField.js

@@ -2,15 +2,15 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.SelectField = void 0;
 const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
-const SelectFieldBase_1 = require("./internal/SelectFieldBase");
+const ComboBoxBase_1 = require("./internal/ComboBoxBase");
 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, { ...otherProps, options: options, getOptionLabel: getOptionLabel, getOptionValue: getOptionValue, values: [value], onSelect: (values, options) => {
+    return ((0, jsx_runtime_1.jsx)(ComboBoxBase_1.ComboBoxBase, { ...otherProps, options: options, getOptionLabel: getOptionLabel, getOptionValue: getOptionValue, values: [value], onSelect: (values, options) => {
             if (values.length > 0 && options.length > 0) {
                 const option = options[0];
-                onSelect(values[0], option === SelectFieldBase_1.unsetOption ? undefined : option);
+                onSelect(values[0], option === ComboBoxBase_1.unsetOption ? undefined : option);
             }
         } }));
 }

package/dist/inputs/TextFieldBase.d.ts

@@ -17,5 +17,9 @@ export interface TextFieldBaseProps<X> extends Pick<BeamTextFieldProps<X>, "labe
     tooltip?: ReactNode;
     hideErrorMessage?: boolean;
     alwaysShowHelperText?: boolean;
+    /** Used by ComboBoxInput to decide whether we should allow the user to type to filter the options.
+     * This is admittedly a hack, as we really should not use a TextField at all in this instance. How we're currently implementing breaks all sorts of accessibility best practices.
+     * But for now it is the quickest way to get the desired behavior. Will updating to use a proper select field at another point. */
+    typeToFilter?: boolean;
 }
 export declare function TextFieldBase<X extends Only<TextFieldXss, X>>(props: TextFieldBaseProps<X>): import("@emotion/react/jsx-runtime").JSX.Element;

package/dist/inputs/TextFieldBase.js

@@ -18,7 +18,7 @@ const useTestIds_1 = require("../utils/useTestIds");
 function TextFieldBase(props) {
     var _a, _b, _c, _d, _e, _f, _g;
     const { fieldProps, wrap = false } = (0, PresentationContext_1.usePresentationContext)();
-    const { label, required, labelProps, inputProps, inputRef, inputWrapRef, groupProps, compact = (_a = fieldProps === null || fieldProps === void 0 ? void 0 : fieldProps.compact) !== null && _a !== void 0 ? _a : false, errorMsg, helperText, multiline = false, onChange, onBlur, onFocus, xss, endAdornment, startAdornment, labelStyle = (_b = fieldProps === null || fieldProps === void 0 ? void 0 : fieldProps.labelStyle) !== null && _b !== void 0 ? _b : "above", contrast = false, borderless = (_c = fieldProps === null || fieldProps === void 0 ? void 0 : fieldProps.borderless) !== null && _c !== void 0 ? _c : false, textAreaMinHeight = 96, clearable = false, tooltip, visuallyDisabled = (_d = fieldProps === null || fieldProps === void 0 ? void 0 : fieldProps.visuallyDisabled) !== null && _d !== void 0 ? _d : true, errorInTooltip = (_e = fieldProps === null || fieldProps === void 0 ? void 0 : fieldProps.errorInTooltip) !== null && _e !== void 0 ? _e : false, hideErrorMessage = false, alwaysShowHelperText = false, } = props;
+    const { label, required, labelProps, inputProps, inputRef, inputWrapRef, groupProps, compact = (_a = fieldProps === null || fieldProps === void 0 ? void 0 : fieldProps.compact) !== null && _a !== void 0 ? _a : false, errorMsg, helperText, multiline = false, onChange, onBlur, onFocus, xss, endAdornment, startAdornment, labelStyle = (_b = fieldProps === null || fieldProps === void 0 ? void 0 : fieldProps.labelStyle) !== null && _b !== void 0 ? _b : "above", contrast = false, borderless = (_c = fieldProps === null || fieldProps === void 0 ? void 0 : fieldProps.borderless) !== null && _c !== void 0 ? _c : false, textAreaMinHeight = 96, clearable = false, tooltip, visuallyDisabled = (_d = fieldProps === null || fieldProps === void 0 ? void 0 : fieldProps.visuallyDisabled) !== null && _d !== void 0 ? _d : true, errorInTooltip = (_e = fieldProps === null || fieldProps === void 0 ? void 0 : fieldProps.errorInTooltip) !== null && _e !== void 0 ? _e : false, hideErrorMessage = false, alwaysShowHelperText = false, typeToFilter = true, } = props;
     const typeScale = (_f = fieldProps === null || fieldProps === void 0 ? void 0 : fieldProps.typeScale) !== null && _f !== void 0 ? _f : (inputProps.readOnly && labelStyle !== "hidden" ? "smMd" : "sm");
     const internalProps = props.internalProps || {};
     const { compound = false, forceFocus = false, forceHover = false } = internalProps;
@@ -89,7 +89,7 @@ function TextFieldBase(props) {
         }
     }
     const onFocusChained = (0, react_aria_1.chain)((e) => {
-        e.target.select();
+        typeToFilter && e.target.select();
     }, onFocus);
     const showFocus = (isFocused && !inputProps.readOnly) || forceFocus;
     const showHover = (isHovered && !inputProps.disabled && !inputProps.readOnly && !isFocused) || forceHover;
@@ -111,7 +111,9 @@ function TextFieldBase(props) {
                                 // Only show error styles if the field is not disabled, following the pattern that the error message is also hidden
                                 ...(errorMsg && !inputProps.disabled ? fieldStyles.error : {}),
                                 ...Css_1.Css.if(multiline).aifs.px0.mhPx(textAreaMinHeight).$,
-                            }, ...hoverProps, ref: inputWrapRef, children: [!multiline && labelStyle === "inline" && label && ((0, jsx_runtime_1.jsx)(Label_1.InlineLabel, { labelProps: labelProps, label: label, ...tid.label })), !multiline && startAdornment && (0, jsx_runtime_1.jsx)("span", { css: Css_1.Css.df.aic.fs0.br4.pr1.$, children: startAdornment }), (0, jsx_runtime_1.jsx)(ElementType, { ...(0, react_aria_1.mergeProps)(inputProps, { onBlur, onFocus: onFocusChained, onChange: onDomChange }, { "aria-invalid": Boolean(errorMsg), ...(labelStyle === "hidden" ? { "aria-label": label } : {}) }), ...(errorMsg ? { "aria-errormessage": errorMessageId } : {}), ref: fieldRef, rows: multiline ? 1 : undefined, css: {
+                            }, ...hoverProps, ref: inputWrapRef, children: [!multiline && labelStyle === "inline" && label && ((0, jsx_runtime_1.jsx)(Label_1.InlineLabel, { labelProps: labelProps, label: label, ...tid.label })), !multiline && startAdornment && (0, jsx_runtime_1.jsx)("span", { css: Css_1.Css.df.aic.fs0.br4.pr1.$, children: startAdornment }), (0, jsx_runtime_1.jsx)(ElementType, { ...(0, react_aria_1.mergeProps)(inputProps, { onBlur, onFocus: onFocusChained, onChange: onDomChange }, { "aria-invalid": Boolean(errorMsg), ...(labelStyle === "hidden" ? { "aria-label": label } : {}) }), ...(errorMsg ? { "aria-errormessage": errorMessageId } : {}), ref: fieldRef, rows: multiline ? 1 : undefined, 
+                                    // Make the input field readOnly if the field explicitly sets it to `true`, otherwise base it on whether we should allow `typeToFilter`
+                                    readOnly: inputProps.readOnly || typeToFilter === false, css: {
                                         ...fieldStyles.input,
                                         ...(inputProps.disabled ? fieldStyles.disabled : {}),
                                         ...(showHover ? fieldStyles.hover : {}),

package/dist/inputs/internal/{SelectFieldBase.d.ts → ComboBoxBase.d.ts}

@@ -2,7 +2,7 @@ import React, { ReactNode } from "react";
 import { PresentationFieldProps } from "../../components/PresentationContext";
 import { Value } from "../Value";
 import { BeamFocusableProps } from "../../interfaces";
-export interface BeamSelectFieldBaseProps<O, V extends Value> extends BeamFocusableProps, PresentationFieldProps {
+export interface ComboBoxBaseProps<O, V extends Value> extends BeamFocusableProps, PresentationFieldProps {
     /** Renders `opt` in the dropdown menu, defaults to the `getOptionLabel` prop. `isUnsetOpt` is only defined for single SelectField */
     getOptionMenuLabel?: (opt: O, isUnsetOpt?: boolean) => string | ReactNode;
     getOptionValue: (opt: O) => V;
@@ -40,7 +40,7 @@ export interface BeamSelectFieldBaseProps<O, V extends Value> extends BeamFocusa
     hideErrorMessage?: boolean;
 }
 /**
- * Provides a non-native select/dropdown widget.
+ * Provides a non-native select/dropdown widget that allows the user to type to filter the options.
  *
  * 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.
@@ -48,8 +48,8 @@ export interface BeamSelectFieldBaseProps<O, V extends Value> extends BeamFocusa
  * 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;
-type OptionsOrLoad<O> = O[] | {
+export declare function ComboBoxBase<O, V extends Value>(props: ComboBoxBaseProps<O, V>): JSX.Element;
+export type OptionsOrLoad<O> = O[] | {
     initial: O[];
     load: () => Promise<{
         options: O[];
@@ -61,4 +61,3 @@ export declare function disabledOptionToKeyedTuple(disabledOption: Value | {
     value: Value;
     reason: string;
 }): [React.Key, string | undefined];
-export {};

package/dist/inputs/internal/{SelectFieldBase.js → ComboBoxBase.js}

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.disabledOptionToKeyedTuple = exports.unsetOption = exports.initializeOptions = exports.SelectFieldBase = void 0;
+exports.disabledOptionToKeyedTuple = exports.unsetOption = exports.initializeOptions = exports.ComboBoxBase = void 0;
 const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
 const react_1 = require("react");
 const react_aria_1 = require("react-aria");
@@ -9,12 +9,12 @@ const components_1 = require("../../components");
 const internal_1 = require("../../components/internal");
 const PresentationContext_1 = require("../../components/PresentationContext");
 const Css_1 = require("../../Css");
+const ComboBoxInput_1 = require("./ComboBoxInput");
 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.
+ * Provides a non-native select/dropdown widget that allows the user to type to filter the options.
  *
  * 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.
@@ -22,7 +22,7 @@ const utils_1 = require("../../utils");
  * Note that the `V extends Key` constraint come from react-aria,
  * and so we cannot easily change them.
  */
-function SelectFieldBase(props) {
+function ComboBoxBase(props) {
     var _a, _b, _c, _d;
     const { fieldProps } = (0, PresentationContext_1.usePresentationContext)();
     const { disabled, readOnly, onSelect, options, multiselect = false, values = [], nothingSelectedText = "", contrast, disabledOptions, borderless, unsetLabel, ...otherProps } = props;
@@ -250,9 +250,11 @@ function SelectFieldBase(props) {
         // Ensures the menu never gets too small.
         minWidth: 200,
     };
-    return ((0, jsx_runtime_1.jsxs)("div", { css: Css_1.Css.df.fdc.w100.maxw((0, Css_1.px)(550)).if(labelStyle === "left").maxw100.$, ref: comboBoxRef, children: [(0, jsx_runtime_1.jsx)(SelectFieldInput_1.SelectFieldInput, { ...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 }), state.isOpen && ((0, jsx_runtime_1.jsx)(internal_1.Popover, { triggerRef: triggerRef, popoverRef: popoverRef, positionProps: positionProps, onClose: () => state.close(), isOpen: state.isOpen, minWidth: 200, children: (0, jsx_runtime_1.jsx)(ListBox_1.ListBox, { ...listBoxProps, positionProps: positionProps, state: state, listBoxRef: listBoxRef, selectedOptions: fieldState.selectedOptions, getOptionLabel: getOptionLabel, getOptionValue: (o) => (0, Value_1.valueToKey)(getOptionValue(o)), contrast: contrast, horizontalLayout: labelStyle === "left", loading: fieldState.optionsLoading, disabledOptionsWithReasons: disabledOptionsWithReasons }) }))] }));
+    return ((0, jsx_runtime_1.jsxs)("div", { css: Css_1.Css.df.fdc.w100.maxw((0, Css_1.px)(550)).if(labelStyle === "left").maxw100.$, ref: comboBoxRef, children: [(0, jsx_runtime_1.jsx)(ComboBoxInput_1.ComboBoxInput, { ...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, 
+                // If there are 10 or fewer options and it is not the multiselect, then we disable the typeahead filter for a better UX.
+                typeToFilter: !(!multiselect && Array.isArray(options) && options.length <= 10) }), state.isOpen && ((0, jsx_runtime_1.jsx)(internal_1.Popover, { triggerRef: triggerRef, popoverRef: popoverRef, positionProps: positionProps, onClose: () => state.close(), isOpen: state.isOpen, minWidth: 200, children: (0, jsx_runtime_1.jsx)(ListBox_1.ListBox, { ...listBoxProps, positionProps: positionProps, state: state, listBoxRef: listBoxRef, selectedOptions: fieldState.selectedOptions, getOptionLabel: getOptionLabel, getOptionValue: (o) => (0, Value_1.valueToKey)(getOptionValue(o)), contrast: contrast, horizontalLayout: labelStyle === "left", loading: fieldState.optionsLoading, disabledOptionsWithReasons: disabledOptionsWithReasons }) }))] }));
 }
-exports.SelectFieldBase = SelectFieldBase;
+exports.ComboBoxBase = ComboBoxBase;
 function getInputValue(selectedOptions, getOptionLabel, multiselect, nothingSelectedText) {
     return selectedOptions.length === 1
         ? getOptionLabel(selectedOptions[0])

package/dist/inputs/internal/{SelectFieldInput.d.ts → ComboBoxInput.d.ts}

@@ -26,6 +26,7 @@ interface SelectFieldInputProps<O, V extends Value> extends PresentationFieldPro
     tooltip?: ReactNode;
     resetField: VoidFunction;
     hideErrorMessage?: boolean;
+    typeToFilter: boolean;
 }
-export declare function SelectFieldInput<O, V extends Value>(props: SelectFieldInputProps<O, V>): import("@emotion/react/jsx-runtime").JSX.Element;
+export declare function ComboBoxInput<O, V extends Value>(props: SelectFieldInputProps<O, V>): import("@emotion/react/jsx-runtime").JSX.Element;
 export {};

package/dist/inputs/internal/{SelectFieldInput.js → ComboBoxInput.js}

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.SelectFieldInput = void 0;
+exports.ComboBoxInput = void 0;
 const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
 const react_1 = require("react");
 const react_aria_1 = require("react-aria");
@@ -8,7 +8,7 @@ const components_1 = require("../../components");
 const Css_1 = require("../../Css");
 const TextFieldBase_1 = require("../TextFieldBase");
 const utils_1 = require("../../utils");
-function SelectFieldInput(props) {
+function ComboBoxInput(props) {
     const { inputProps, buttonProps, buttonRef, errorMsg, state, fieldDecoration, onBlur, onFocus, 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";
@@ -99,4 +99,4 @@ function SelectFieldInput(props) {
             },
         } }));
 }
-exports.SelectFieldInput = SelectFieldInput;
+exports.ComboBoxInput = ComboBoxInput;

package/dist/utils/index.js

@@ -37,6 +37,9 @@ function toGroupState(values, onChange) {
         toggleValue: (value) => (values.includes(value) ? addValue(value) : removeValue(value)),
         isDisabled: false,
         isReadOnly: false,
+        // We do not use the validation state, as our Switch groups do not support error states. However, this field is required by the `CheckboxGroupState` so we need to include it.
+        // If we ever update our SwitchGroup component to support error states, we'll need to update this.
+        validationState: "valid",
     };
 }
 exports.toGroupState = toGroupState;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@homebound/beam",
-  "version": "2.261.0",
+  "version": "2.263.0",
   "author": "Homebound",
   "license": "MIT",
   "main": "dist/index.js",
@@ -43,12 +43,12 @@
     "fast-deep-equal": "^3.1.3",
     "framer-motion": "^9.0.4",
     "memoize-one": "^5.2.1",
-    "react-aria": "^3.18.0",
+    "react-aria": "^3.24.0",
     "react-day-picker": "8.0.7",
     "react-popper": "^2.3.0",
     "react-router": "^5.3.4",
     "react-router-dom": "^5.3.4",
-    "react-stately": "^3.16.0",
+    "react-stately": "^3.22.0",
     "react-virtuoso": "2.10.2",
     "tributejs": "^5.1.3",
     "trix": "^1.3.1",