@homebound/beam 2.260.0 → 2.262.0

package/dist/components/{Avatar.js → Avatar/Avatar.js}

@@ -3,9 +3,10 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Avatar = void 0;
 const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
 const react_1 = require("react");
-const Icon_1 = require("./Icon");
-const Css_1 = require("../Css");
-const utils_1 = require("../utils");
+const Icon_1 = require("../Icon");
+const Tooltip_1 = require("../Tooltip");
+const Css_1 = require("../../Css");
+const utils_1 = require("../../utils");
 function Avatar({ src, name, size = "md", showName = false, ...others }) {
     const tid = (0, utils_1.useTestIds)(others, "avatar");
     const px = sizeToPixel[size];
@@ -13,7 +14,7 @@ function Avatar({ src, name, size = "md", showName = false, ...others }) {
     // Define min-width as well as width to prevent the image from shrinking when displayed within a flex-child that allows shrinking.
     const styles = Css_1.Css.br100.wPx(px).hPx(px).mwPx(px).overflowHidden.$;
     const img = showFallback ? ((0, jsx_runtime_1.jsx)("div", { css: { ...styles, ...Css_1.Css[sizeToFallbackTypeScale[size]].bgGray400.gray100.df.aic.jcc.$ }, ...tid, children: name ? nameToInitials(name) : (0, jsx_runtime_1.jsx)(Icon_1.Icon, { icon: "userCircle", inc: sizeToIconInc[size] }) })) : ((0, jsx_runtime_1.jsx)("img", { src: src, alt: name, css: { ...styles, ...Css_1.Css.objectCover.$ }, onError: () => setShowFallback(true), loading: "lazy", ...tid }));
-    return showName && name ? ((0, jsx_runtime_1.jsxs)("div", { css: Css_1.Css.dif.aic.gap1.if(size === "lg" || size === "xl").fdc.$, children: [img, (0, jsx_runtime_1.jsx)("span", { css: Css_1.Css[sizeToTypeScale[size]].$, children: name })] })) : (img);
+    return showName && name ? ((0, jsx_runtime_1.jsxs)("div", { css: Css_1.Css.dif.aic.gap1.if(size === "lg" || size === "xl").fdc.$, children: [img, (0, jsx_runtime_1.jsx)("span", { css: Css_1.Css[sizeToTypeScale[size]].$, children: name })] })) : ((0, Tooltip_1.maybeTooltip)({ title: name, children: img, placement: "top" }));
 }
 exports.Avatar = Avatar;
 const sizeToPixel = {
@@ -35,10 +36,10 @@ const sizeToIconInc = {
     xl: 8,
 };
 const sizeToTypeScale = {
-    sm: "baseMd",
-    md: "baseMd",
-    lg: "lg",
-    xl: "xl3",
+    sm: "smMd",
+    md: "smMd",
+    lg: "base",
+    xl: "base",
 };
 function nameToInitials(name) {
     return (name

package/dist/components/{AvatarButton.d.ts → Avatar/AvatarButton.d.ts}

@@ -1,7 +1,7 @@
 import { AriaButtonProps } from "@react-types/button";
 import { RefObject } from "react";
 import { AvatarProps } from "./Avatar";
-import { BeamButtonProps, BeamFocusableProps } from "../interfaces";
+import { BeamButtonProps, BeamFocusableProps } from "../../interfaces";
 export interface AvatarButtonProps extends AvatarProps, BeamButtonProps, BeamFocusableProps {
     menuTriggerProps?: AriaButtonProps;
     buttonRef?: RefObject<HTMLButtonElement>;

package/dist/components/{AvatarButton.js → Avatar/AvatarButton.js}

@@ -4,13 +4,13 @@ exports.pressedStyles = exports.hoverStyles = exports.AvatarButton = void 0;
 const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
 const react_1 = require("react");
 const react_aria_1 = require("react-aria");
-const components_1 = require("./");
 const Avatar_1 = require("./Avatar");
-const Css_1 = require("../Css");
-const useGetRef_1 = require("../hooks/useGetRef");
-const utils_1 = require("../utils");
-const getInteractiveElement_1 = require("../utils/getInteractiveElement");
-const useTestIds_1 = require("../utils/useTestIds");
+const index_1 = require("../index");
+const Css_1 = require("../../Css");
+const useGetRef_1 = require("../../hooks/useGetRef");
+const utils_1 = require("../../utils");
+const getInteractiveElement_1 = require("../../utils/getInteractiveElement");
+const useTestIds_1 = require("../../utils/useTestIds");
 function AvatarButton(props) {
     const { onClick: onPress, disabled, autoFocus, buttonRef, tooltip, menuTriggerProps, openInNew, forceFocusStyles = false, ...avatarProps } = props;
     const isDisabled = !!disabled;
@@ -36,13 +36,13 @@ function AvatarButton(props) {
         ...buttonProps,
         ...focusProps,
         ...hoverProps,
-        className: typeof onPress === "string" ? components_1.navLink : undefined,
+        className: typeof onPress === "string" ? index_1.navLink : undefined,
         ref: ref,
         css: styles,
     };
     // If we're disabled b/c of a non-boolean ReactNode, or the caller specified tooltip text, then show it in a tooltip
-    return (0, components_1.maybeTooltip)({
-        title: (0, components_1.resolveTooltip)(disabled, tooltip),
+    return (0, index_1.maybeTooltip)({
+        title: (0, index_1.resolveTooltip)(disabled, tooltip),
         placement: "top",
         children: (0, getInteractiveElement_1.getButtonOrLink)((0, jsx_runtime_1.jsx)(Avatar_1.Avatar, { ...avatarProps, ...tid }), onPress, buttonAttrs, openInNew),
     });

package/dist/components/Avatar/AvatarGroup.d.ts

@@ -0,0 +1,9 @@
+import { AvatarSize } from "./Avatar";
+export interface AvatarGroupProps {
+    avatars: {
+        src: string | undefined;
+        name?: string;
+    }[];
+    size?: AvatarSize;
+}
+export declare function AvatarGroup(props: AvatarGroupProps): import("@emotion/react/jsx-runtime").JSX.Element;

package/dist/components/Avatar/AvatarGroup.js

@@ -0,0 +1,31 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AvatarGroup = void 0;
+const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
+const Avatar_1 = require("./Avatar");
+const ButtonModal_1 = require("../ButtonModal");
+const Css_1 = require("../../Css");
+function AvatarGroup(props) {
+    const { avatars, size = "md" } = props;
+    // If there are 8 or fewer avatars, show them all. Otherwise, show the first 7 and a menu with the rest.
+    const maxVisibleAvatars = avatars.length <= 8 ? 8 : 7;
+    const visibleAvatars = avatars.slice(0, maxVisibleAvatars);
+    const menuAvatars = avatars.slice(maxVisibleAvatars);
+    return ((0, jsx_runtime_1.jsxs)("div", { css: Css_1.Css.df.aic.gap1.xsSb.$, children: [(0, jsx_runtime_1.jsx)("div", { css: Css_1.Css.df.aic.$, children: visibleAvatars.map((avatar, idx) => {
+                    var _a;
+                    return ((0, jsx_runtime_1.jsx)("div", { css: Css_1.Css.br100.ba.bWhite
+                            .add("borderWidth", "3px")
+                            .if(idx > 0)
+                            .mlPx(-1 * sizeToOverlap[size]).$, children: (0, jsx_runtime_1.jsx)(Avatar_1.Avatar, { src: avatar.src, name: avatar.name, size: size }) }, (_a = avatar.src) !== null && _a !== void 0 ? _a : idx));
+                }) }), menuAvatars.length > 0 && ((0, jsx_runtime_1.jsx)(ButtonModal_1.ButtonModal, { trigger: { label: `+ ${menuAvatars.length} more`, variant: "text" }, hideEndAdornment: true, content: (0, jsx_runtime_1.jsx)("div", { css: Css_1.Css.df.fdc.gap1.mPx(-12).$, children: menuAvatars.map((a, idx) => {
+                        var _a;
+                        return ((0, jsx_runtime_1.jsx)(Avatar_1.Avatar, { src: a.src, name: a.name, showName: true, size: "md" }, (_a = a.src) !== null && _a !== void 0 ? _a : idx));
+                    }) }) }))] }));
+}
+exports.AvatarGroup = AvatarGroup;
+const sizeToOverlap = {
+    sm: 9,
+    md: 9,
+    lg: 15,
+    xl: 22,
+};

package/dist/components/Avatar/index.d.ts

@@ -0,0 +1,3 @@
+export * from "./Avatar";
+export * from "./AvatarButton";
+export * from "./AvatarGroup";

package/dist/components/Avatar/index.js

@@ -0,0 +1,19 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+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 });
+__exportStar(require("./Avatar"), exports);
+__exportStar(require("./AvatarButton"), exports);
+__exportStar(require("./AvatarGroup"), exports);

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/index.d.ts

@@ -7,7 +7,6 @@ export * from "./Accordion";
 export * from "./AccordionList";
 export * from "./AutoSaveIndicator";
 export * from "./Avatar";
-export * from "./AvatarButton";
 export { BeamProvider } from "./BeamContext";
 export * from "./Button";
 export * from "./ButtonDatePicker";

package/dist/components/index.js

@@ -24,7 +24,6 @@ __exportStar(require("./Accordion"), exports);
 __exportStar(require("./AccordionList"), exports);
 __exportStar(require("./AutoSaveIndicator"), exports);
 __exportStar(require("./Avatar"), exports);
-__exportStar(require("./AvatarButton"), exports);
 var BeamContext_1 = require("./BeamContext");
 Object.defineProperty(exports, "BeamProvider", { enumerable: true, get: function () { return BeamContext_1.BeamProvider; } });
 __exportStar(require("./Button"), exports);

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

@@ -1,7 +1,7 @@
 import { AriaButtonProps } from "@react-types/button";
 import { MutableRefObject, ReactElement, ReactNode } from "react";
 import { MenuTriggerState } from "react-stately";
-import { AvatarButtonProps } from "../AvatarButton";
+import { AvatarButtonProps } from "../Avatar/AvatarButton";
 import { ButtonProps, ButtonVariant } from "../Button";
 import { IconButtonProps } from "../IconButton";
 import { NavLinkProps } from "../NavLink";

package/dist/components/internal/OverlayTrigger.js

@@ -4,7 +4,7 @@ exports.labelOr = exports.isNavLinkButton = exports.isIconButton = exports.isTex
 const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
 const react_1 = require("react");
 const react_aria_1 = require("react-aria");
-const AvatarButton_1 = require("../AvatarButton");
+const AvatarButton_1 = require("../Avatar/AvatarButton");
 const Button_1 = require("../Button");
 const Icon_1 = require("../Icon");
 const IconButton_1 = require("../IconButton");

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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@homebound/beam",
-  "version": "2.260.0",
+  "version": "2.262.0",
   "author": "Homebound",
   "license": "MIT",
   "main": "dist/index.js",