@homebound/beam 2.261.0 → 2.262.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/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.261.0",
+  "version": "2.262.0",
   "author": "Homebound",
   "license": "MIT",
   "main": "dist/index.js",