@homebound/beam 2.326.0 → 2.327.0

package/dist/Css.d.ts

@@ -1076,6 +1076,22 @@ declare class CssBuilder<T extends Properties> {
     fd(value: Properties["flexDirection"]): CssBuilder<T & {
         flexDirection: import("csstype").Property.FlexDirection | undefined;
     }>;
+    /** Sets `flexWrap: "wrap"`. */
+    get fww(): CssBuilder<T & {
+        flexWrap: import("csstype").Property.FlexWrap | undefined;
+    }>;
+    /** Sets `flexWrap: "wrap-reverse"`. */
+    get fwr(): CssBuilder<T & {
+        flexWrap: import("csstype").Property.FlexWrap | undefined;
+    }>;
+    /** Sets `flexWrap: "nowrap"`. */
+    get fwnw(): CssBuilder<T & {
+        flexWrap: import("csstype").Property.FlexWrap | undefined;
+    }>;
+    /** Sets `flexWrap: value`. */
+    flexWrap(value: Properties["flexWrap"]): CssBuilder<T & {
+        flexWrap: import("csstype").Property.FlexWrap | undefined;
+    }>;
     /** Sets `float: "left"`. */
     get fl(): CssBuilder<T & {
         float: import("csstype").Property.Float | undefined;

package/dist/Css.js

@@ -1072,6 +1072,22 @@ class CssBuilder {
     fd(value) {
         return this.add("flexDirection", value);
     }
+    /** Sets `flexWrap: "wrap"`. */
+    get fww() {
+        return this.add("flexWrap", "wrap");
+    }
+    /** Sets `flexWrap: "wrap-reverse"`. */
+    get fwr() {
+        return this.add("flexWrap", "wrap-reverse");
+    }
+    /** Sets `flexWrap: "nowrap"`. */
+    get fwnw() {
+        return this.add("flexWrap", "nowrap");
+    }
+    /** Sets `flexWrap: value`. */
+    flexWrap(value) {
+        return this.add("flexWrap", value);
+    }
     // float
     /** Sets `float: "left"`. */
     get fl() {

package/dist/components/PresentationContext.d.ts

@@ -11,6 +11,8 @@ export interface PresentationFieldProps {
     typeScale?: Typography;
     visuallyDisabled?: false;
     errorInTooltip?: true;
+    /** Allow the fields to grow to the width of its container. By default, fields will extend up to 550px */
+    fullWidth?: boolean;
 }
 export type PresentationContextProps = {
     fieldProps?: PresentationFieldProps;

package/dist/forms/FormLines.js

@@ -12,13 +12,14 @@ const Css_1 = require("../Css");
  * (see the `FieldGroup` component), where they will be laid out side-by-side.
  */
 function FormLines(props) {
-    const { children, width = "full", labelSuffix, labelStyle, compact } = props;
+    const { children, width = "lg", labelSuffix, labelStyle, compact } = props;
     let firstFormHeading = true;
     // Only overwrite `fieldProps` if new values are explicitly set. Ensures we only set to `undefined` if explicitly set.
     const newFieldProps = {
         ...("labelSuffix" in props ? { labelSuffix } : {}),
         ...("labelStyle" in props ? { labelStyle } : {}),
         ...("compact" in props ? { compact } : {}),
+        ...(width === "full" ? { fullWidth: true } : {}),
     };
     return ((0, jsx_runtime_1.jsx)(PresentationContext_1.PresentationProvider, { fieldProps: newFieldProps, children: (0, jsx_runtime_1.jsx)("div", { css: {
                 // Note that we're purposefully not using display:flex so that our children's margins will collapse.

package/dist/inputs/Autocomplete.d.ts

@@ -2,7 +2,7 @@ import { ReactNode } from "react";
 import { PresentationFieldProps } from "../components/PresentationContext";
 import { TextFieldBaseProps } from "./TextFieldBase";
 import { Value } from "./Value";
-interface AutocompleteProps<T> extends Pick<PresentationFieldProps, "labelStyle">, Pick<TextFieldBaseProps<any>, "label" | "clearable" | "startAdornment"> {
+export interface AutocompleteProps<T> extends Pick<PresentationFieldProps, "labelStyle">, Pick<TextFieldBaseProps<any>, "label" | "clearable" | "startAdornment" | "fullWidth"> {
     onSelect: (item: T) => void;
     /** A function that returns how to render the an option in the menu. If not set, `getOptionLabel` will be used */
     getOptionMenuLabel?: (o: T) => ReactNode;
@@ -27,4 +27,3 @@ interface AutocompleteProps<T> extends Pick<PresentationFieldProps, "labelStyle"
     })[];
 }
 export declare function Autocomplete<T extends object>(props: AutocompleteProps<T>): import("@emotion/react/jsx-runtime").JSX.Element;
-export {};

package/dist/inputs/ChipTextField.js

@@ -53,9 +53,11 @@ function ChipTextField(props) {
             }
         }, onInput: (e) => {
             var _a, _b, _c;
-            // Prevent user from pasting content that has new line characters and replace with empty space.
             const target = e.target;
-            target.textContent = (_b = (_a = target.textContent) === null || _a === void 0 ? void 0 : _a.replace(/[\n\r]/g, " ")) !== null && _b !== void 0 ? _b : "";
+            if ("inputType" in e.nativeEvent && e.nativeEvent.inputType === "insertFromPaste") {
+                // Clean up any formatting from pasted text
+                target.innerHTML = (_b = (_a = target.textContent) === null || _a === void 0 ? void 0 : _a.replace(/[A\n\r]/g, " ")) !== null && _b !== void 0 ? _b : "";
+            }
             onChange((_c = target.textContent) !== null && _c !== void 0 ? _c : "");
         }, ...focusProps, css: {
             ...Css_1.Css[typeScale].dib.br16.pl1.pxPx(10).pyPx(2).gray900.bgGray300.outline0.mwPx(32).$,

package/dist/inputs/DateFields/DateFieldBase.d.ts

@@ -4,7 +4,7 @@ import { Properties } from "../../Css";
 import { DateFieldMode, dateFormats } from "./utils";
 import { TextFieldBaseProps } from "../TextFieldBase";
 import { DateRange } from "../../types";
-export interface DateFieldBaseProps extends Pick<TextFieldBaseProps<Properties>, "borderless" | "visuallyDisabled" | "labelStyle" | "compact"> {
+export interface DateFieldBaseProps extends Pick<TextFieldBaseProps<Properties>, "borderless" | "visuallyDisabled" | "labelStyle" | "compact" | "fullWidth"> {
     label: string;
     /** Called when the component loses focus */
     onBlur?: () => void;

package/dist/inputs/NumberField.d.ts

@@ -2,7 +2,7 @@ import { ReactNode } from "react";
 import { PresentationFieldProps } from "../components/PresentationContext";
 import { Xss } from "../Css";
 export type NumberFieldType = "cents" | "dollars" | "percent" | "basisPoints" | "days";
-export interface NumberFieldProps extends Pick<PresentationFieldProps, "labelStyle"> {
+export interface NumberFieldProps extends Pick<PresentationFieldProps, "labelStyle" | "fullWidth"> {
     label: string;
     /** If set, the label will be defined as 'aria-label` on the input element */
     type?: NumberFieldType;

package/dist/inputs/RichTextField.d.ts

@@ -1,7 +1,8 @@
 import "tributejs/dist/tribute.css";
 import "trix/dist/trix";
 import "trix/dist/trix.css";
-export interface RichTextFieldProps {
+import { PresentationFieldProps } from "../components/PresentationContext";
+export interface RichTextFieldProps extends Pick<PresentationFieldProps, "fullWidth"> {
     /** The initial html value to show in the trix editor. */
     value: string | undefined;
     onChange: (html: string | undefined, text: string | undefined, mergeTags: string[]) => void;
@@ -20,8 +21,6 @@ export interface RichTextFieldProps {
     onFocus?: () => void;
     /** For rendering formatted text */
     readOnly?: boolean;
-    /** Will set width to: 100% */
-    fullWidth?: boolean;
 }
 /**
  * Provides a simple rich text editor based on trix.

package/dist/inputs/RichTextField.js

@@ -15,6 +15,7 @@ const tributejs_1 = __importDefault(require("tributejs"));
 require("tributejs/dist/tribute.css");
 require("trix/dist/trix");
 require("trix/dist/trix.css");
+const PresentationContext_1 = require("../components/PresentationContext");
 /**
  * Provides a simple rich text editor based on trix.
  *
@@ -23,7 +24,9 @@ require("trix/dist/trix.css");
  * We also integrate [tributejs]{@link https://github.com/zurb/tribute} for @ mentions.
  */
 function RichTextField(props) {
-    const { mergeTags, label, value = "", onChange, onBlur = utils_1.noop, onFocus = utils_1.noop, readOnly, fullWidth } = props;
+    var _a;
+    const { fieldProps } = (0, PresentationContext_1.usePresentationContext)();
+    const { mergeTags, label, value = "", onChange, onBlur = utils_1.noop, onFocus = utils_1.noop, readOnly, fullWidth = (_a = fieldProps === null || fieldProps === void 0 ? void 0 : fieldProps.fullWidth) !== null && _a !== void 0 ? _a : false, } = props;
     // We get a reference to the Editor instance after trix-init fires
     const [editor, setEditor] = (0, react_2.useState)();
     const editorElement = (0, react_2.useRef)();

package/dist/inputs/TextFieldBase.d.ts

@@ -2,7 +2,7 @@ import type { NumberFieldAria } from "@react-aria/numberfield";
 import { InputHTMLAttributes, LabelHTMLAttributes, MutableRefObject, ReactNode, TextareaHTMLAttributes } from "react";
 import { Only } from "../Css";
 import { BeamTextFieldProps, TextFieldXss } from "../interfaces";
-export interface TextFieldBaseProps<X> extends Pick<BeamTextFieldProps<X>, "label" | "required" | "errorMsg" | "errorInTooltip" | "onBlur" | "onFocus" | "helperText" | "labelStyle" | "placeholder" | "compact" | "borderless" | "visuallyDisabled" | "xss">, Partial<Pick<BeamTextFieldProps<X>, "onChange">> {
+export interface TextFieldBaseProps<X> extends Pick<BeamTextFieldProps<X>, "label" | "required" | "errorMsg" | "errorInTooltip" | "onBlur" | "onFocus" | "helperText" | "labelStyle" | "placeholder" | "compact" | "borderless" | "visuallyDisabled" | "fullWidth" | "xss">, Partial<Pick<BeamTextFieldProps<X>, "onChange">> {
     labelProps?: LabelHTMLAttributes<HTMLLabelElement>;
     inputProps: InputHTMLAttributes<HTMLInputElement> | TextareaHTMLAttributes<HTMLTextAreaElement>;
     inputRef?: MutableRefObject<HTMLInputElement | HTMLTextAreaElement | null>;

package/dist/inputs/TextFieldBase.js

@@ -14,12 +14,13 @@ const useGetRef_1 = require("../hooks/useGetRef");
 const ErrorMessage_1 = require("./ErrorMessage");
 const defaultTestId_1 = require("../utils/defaultTestId");
 const useTestIds_1 = require("../utils/useTestIds");
+const utils_1 = require("./utils");
 // Used by both TextField and TextArea
 function TextFieldBase(props) {
-    var _a, _b, _c, _d, _e, _f, _g;
+    var _a, _b, _c, _d, _e, _f, _g, _h;
     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 typeScale = (_f = fieldProps === null || fieldProps === void 0 ? void 0 : fieldProps.typeScale) !== null && _f !== void 0 ? _f : (inputProps.readOnly && labelStyle !== "hidden" ? "smMd" : "sm");
+    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, fullWidth = (_f = fieldProps === null || fieldProps === void 0 ? void 0 : fieldProps.fullWidth) !== null && _f !== void 0 ? _f : false, } = props;
+    const typeScale = (_g = fieldProps === null || fieldProps === void 0 ? void 0 : fieldProps.typeScale) !== null && _g !== void 0 ? _g : (inputProps.readOnly && labelStyle !== "hidden" ? "smMd" : "sm");
     const internalProps = props.internalProps || {};
     const { compound = false, forceFocus = false, forceHover = false } = internalProps;
     const errorMessageId = `${inputProps.id}-error`;
@@ -38,8 +39,9 @@ function TextFieldBase(props) {
         : borderless && !compound
             ? [Css_1.Palette.Gray100, Css_1.Palette.Gray200, Css_1.Palette.Gray200]
             : [Css_1.Palette.White, Css_1.Palette.Gray100, Css_1.Palette.Gray100];
+    const fieldMaxWidth = (0, utils_1.getFieldWidth)(fullWidth);
     const fieldStyles = {
-        container: Css_1.Css.df.fdc.w100.maxw((0, Css_1.px)(550)).relative.if(labelStyle === "left").maxw100.fdr.gap2.jcsb.aic.$,
+        container: Css_1.Css.df.fdc.w100.maxw(fieldMaxWidth).relative.if(labelStyle === "left").maxw100.fdr.gap2.jcsb.aic.$,
         inputWrapper: {
             ...Css_1.Css[typeScale].df.aic.br4.px1.w100
                 .hPx(fieldHeight - maybeSmaller)
@@ -104,7 +106,7 @@ function TextFieldBase(props) {
                                 ...(multiline ? Css_1.Css.fdc.aifs.gap2.$ : Css_1.Css.if(wrap === false).truncate.$),
                                 ...xss,
                             }, "data-readonly": "true", ...tid, children: [labelStyle === "inline" && label && ((0, jsx_runtime_1.jsx)(Label_1.InlineLabel, { multiline: multiline, labelProps: labelProps, label: label, ...tid.label })), multiline
-                                    ? (_g = inputProps.value) === null || _g === void 0 ? void 0 : _g.split("\n\n").map((p, i) => ((0, jsx_runtime_1.jsx)("p", { css: Css_1.Css.py1.$, children: p.split("\n").map((sentence, j) => ((0, jsx_runtime_1.jsxs)("span", { children: [sentence, (0, jsx_runtime_1.jsx)("br", {})] }, j))) }, i)))
+                                    ? (_h = inputProps.value) === null || _h === void 0 ? void 0 : _h.split("\n\n").map((p, i) => ((0, jsx_runtime_1.jsx)("p", { css: Css_1.Css.py1.$, children: p.split("\n").map((sentence, j) => ((0, jsx_runtime_1.jsxs)("span", { children: [sentence, (0, jsx_runtime_1.jsx)("br", {})] }, j))) }, i)))
                                     : inputProps.value] })) : ((0, jsx_runtime_1.jsxs)("div", { css: {
                                 ...fieldStyles.inputWrapper,
                                 ...(inputProps.disabled ? fieldStyles.disabled : {}),

package/dist/inputs/TreeSelectField/TreeSelectField.js

@@ -30,11 +30,13 @@ const react_aria_1 = require("react-aria");
 const react_stately_1 = require("react-stately");
 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("../internal/ComboBoxInput");
 const ListBox_1 = require("../internal/ListBox");
 const utils_1 = require("./utils");
 const Value_1 = require("../Value");
+const utils_2 = require("../utils");
 function TreeSelectField(props) {
     const { getOptionValue = (opt) => opt.id, // if unset, assume O implements HasId
     getOptionLabel = (opt) => opt.name, // if unset, assume O implements HasName
@@ -60,8 +62,9 @@ exports.CollapsedContext = react_1.default.createContext({
     getOptionValue: () => ({}),
 });
 function TreeSelectFieldBase(props) {
-    var _a;
-    const { values, options, getOptionValue, getOptionLabel, getOptionMenuLabel = getOptionLabel, disabled, readOnly, labelStyle, borderless, contrast = false, nothingSelectedText = "", onSelect, defaultCollapsed = false, placeholder, ...otherProps } = props;
+    var _a, _b;
+    const { fieldProps } = (0, PresentationContext_1.usePresentationContext)();
+    const { values, options, getOptionValue, getOptionLabel, getOptionMenuLabel = getOptionLabel, disabled, readOnly, labelStyle, borderless, contrast = false, nothingSelectedText = "", onSelect, defaultCollapsed = false, placeholder, fullWidth = (_a = fieldProps === null || fieldProps === void 0 ? void 0 : fieldProps.fullWidth) !== null && _a !== void 0 ? _a : false, ...otherProps } = props;
     const isDisabled = !!disabled;
     const isReadOnly = !!readOnly;
     const initialOptions = Array.isArray(options) ? options : options.current;
@@ -365,9 +368,10 @@ function TreeSelectFieldBase(props) {
     });
     positionProps.style = {
         ...positionProps.style,
-        width: (_a = comboBoxRef === null || comboBoxRef === void 0 ? void 0 : comboBoxRef.current) === null || _a === void 0 ? void 0 : _a.clientWidth,
+        width: (_b = comboBoxRef === null || comboBoxRef === void 0 ? void 0 : comboBoxRef.current) === null || _b === void 0 ? void 0 : _b.clientWidth,
         // 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)(ComboBoxInput_1.ComboBoxInput, { ...otherProps, labelStyle: labelStyle, buttonProps: buttonProps, buttonRef: triggerRef, inputProps: inputProps, inputRef: inputRef, inputWrapRef: inputWrapRef, listBoxRef: listBoxRef, state: state, labelProps: labelProps, selectedOptions: fieldState.selectedOptions, getOptionValue: getOptionValue, getOptionLabel: getOptionLabel, contrast: contrast, borderless: borderless, tooltip: (0, components_1.resolveTooltip)(disabled, undefined, readOnly), resetField: resetField, nothingSelectedText: nothingSelectedText, isTree: true }), 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, allowCollapsing: fieldState.allowCollapsing, isTree: true }) }))] }));
+    const fieldMaxWidth = (0, utils_2.getFieldWidth)(fullWidth);
+    return ((0, jsx_runtime_1.jsxs)("div", { css: Css_1.Css.df.fdc.w100.maxw(fieldMaxWidth).if(labelStyle === "left").maxw100.$, ref: comboBoxRef, children: [(0, jsx_runtime_1.jsx)(ComboBoxInput_1.ComboBoxInput, { ...otherProps, fullWidth: fullWidth, labelStyle: labelStyle, buttonProps: buttonProps, buttonRef: triggerRef, inputProps: inputProps, inputRef: inputRef, inputWrapRef: inputWrapRef, listBoxRef: listBoxRef, state: state, labelProps: labelProps, selectedOptions: fieldState.selectedOptions, getOptionValue: getOptionValue, getOptionLabel: getOptionLabel, contrast: contrast, borderless: borderless, tooltip: (0, components_1.resolveTooltip)(disabled, undefined, readOnly), resetField: resetField, nothingSelectedText: nothingSelectedText, isTree: true }), 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, allowCollapsing: fieldState.allowCollapsing, isTree: true }) }))] }));
 }

package/dist/inputs/internal/ComboBoxBase.js

@@ -12,6 +12,7 @@ const Css_1 = require("../../Css");
 const ComboBoxInput_1 = require("./ComboBoxInput");
 const ListBox_1 = require("./ListBox");
 const Value_1 = require("../Value");
+const utils_1 = require("../utils");
 /**
  * Provides a non-native select/dropdown widget that allows the user to type to filter the options.
  *
@@ -22,10 +23,10 @@ const Value_1 = require("../Value");
  * and so we cannot easily change them.
  */
 function ComboBoxBase(props) {
-    var _a, _b, _c, _d;
+    var _a, _b, _c, _d, _e;
     const { fieldProps } = (0, PresentationContext_1.usePresentationContext)();
-    const { disabled, readOnly, onSelect, options: propOptions, multiselect = false, values: propValues, nothingSelectedText = "", contrast, disabledOptions, borderless, unsetLabel, getOptionLabel: propOptionLabel, getOptionValue: propOptionValue, getOptionMenuLabel: propOptionMenuLabel, ...otherProps } = props;
-    const labelStyle = (_b = (_a = otherProps.labelStyle) !== null && _a !== void 0 ? _a : fieldProps === null || fieldProps === void 0 ? void 0 : fieldProps.labelStyle) !== null && _b !== void 0 ? _b : "above";
+    const { disabled, readOnly, onSelect, options: propOptions, multiselect = false, values: propValues, nothingSelectedText = "", contrast, disabledOptions, borderless, unsetLabel, getOptionLabel: propOptionLabel, getOptionValue: propOptionValue, getOptionMenuLabel: propOptionMenuLabel, fullWidth = (_a = fieldProps === null || fieldProps === void 0 ? void 0 : fieldProps.fullWidth) !== null && _a !== void 0 ? _a : false, ...otherProps } = props;
+    const labelStyle = (_c = (_b = otherProps.labelStyle) !== null && _b !== void 0 ? _b : fieldProps === null || fieldProps === void 0 ? void 0 : fieldProps.labelStyle) !== null && _c !== void 0 ? _c : "above";
     // Memoize the callback functions and handle the `unset` option if provided.
     const getOptionLabel = (0, react_1.useCallback)((o) => (unsetLabel && o === exports.unsetOption ? unsetLabel : propOptionLabel(o)), 
     // propOptionLabel is basically always a lambda, so don't dep on it
@@ -122,7 +123,7 @@ function ComboBoxBase(props) {
     const popoverRef = (0, react_1.useRef)(null);
     // `disabledKeys` from ComboBoxState does not support additional meta for showing a disabled reason to the user
     // This lookup map helps us cleanly prune out the optional reason text, then access it further down the component tree
-    const disabledOptionsWithReasons = Object.fromEntries((_c = disabledOptions === null || disabledOptions === void 0 ? void 0 : disabledOptions.map(disabledOptionToKeyedTuple)) !== null && _c !== void 0 ? _c : []);
+    const disabledOptionsWithReasons = Object.fromEntries((_d = disabledOptions === null || disabledOptions === void 0 ? void 0 : disabledOptions.map(disabledOptionToKeyedTuple)) !== null && _d !== void 0 ? _d : []);
     const comboBoxProps = {
         ...otherProps,
         disabledKeys: Object.keys(disabledOptionsWithReasons),
@@ -202,11 +203,12 @@ function ComboBoxBase(props) {
     });
     positionProps.style = {
         ...positionProps.style,
-        width: (_d = comboBoxRef === null || comboBoxRef === void 0 ? void 0 : comboBoxRef.current) === null || _d === void 0 ? void 0 : _d.clientWidth,
+        width: (_e = comboBoxRef === null || comboBoxRef === void 0 ? void 0 : comboBoxRef.current) === null || _e === void 0 ? void 0 : _e.clientWidth,
         // 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)(ComboBoxInput_1.ComboBoxInput, { ...otherProps, buttonProps: buttonProps, buttonRef: triggerRef, inputProps: inputProps, inputRef: inputRef, inputWrapRef: inputWrapRef, listBoxRef: listBoxRef, state: state, labelProps: labelProps, selectedOptions: 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: selectedOptions, getOptionLabel: getOptionLabel, getOptionValue: (o) => (0, Value_1.valueToKey)(getOptionValue(o)), contrast: contrast, horizontalLayout: labelStyle === "left", loading: fieldState.optionsLoading, disabledOptionsWithReasons: disabledOptionsWithReasons }) }))] }));
+    const fieldMaxWidth = (0, utils_1.getFieldWidth)(fullWidth);
+    return ((0, jsx_runtime_1.jsxs)("div", { css: Css_1.Css.df.fdc.w100.maxw(fieldMaxWidth).if(labelStyle === "left").maxw100.$, ref: comboBoxRef, children: [(0, jsx_runtime_1.jsx)(ComboBoxInput_1.ComboBoxInput, { ...otherProps, fullWidth: fullWidth, buttonProps: buttonProps, buttonRef: triggerRef, inputProps: inputProps, inputRef: inputRef, inputWrapRef: inputWrapRef, listBoxRef: listBoxRef, state: state, labelProps: labelProps, selectedOptions: 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: selectedOptions, getOptionLabel: getOptionLabel, getOptionValue: (o) => (0, Value_1.valueToKey)(getOptionValue(o)), contrast: contrast, horizontalLayout: labelStyle === "left", loading: fieldState.optionsLoading, disabledOptionsWithReasons: disabledOptionsWithReasons }) }))] }));
 }
 exports.ComboBoxBase = ComboBoxBase;
 function getInputValue(selectedOptions, getOptionLabel, multiselect, nothingSelectedText) {

package/dist/inputs/utils.d.ts

@@ -0,0 +1 @@
+export declare function getFieldWidth(fullWidth: boolean | undefined): "100%" | "550px";

package/dist/inputs/utils.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getFieldWidth = void 0;
+function getFieldWidth(fullWidth) {
+    return fullWidth ? "100%" : "550px";
+}
+exports.getFieldWidth = getFieldWidth;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@homebound/beam",
-  "version": "2.326.0",
+  "version": "2.327.0",
   "author": "Homebound",
   "license": "MIT",
   "main": "dist/index.js",
@@ -78,7 +78,7 @@
     "@homebound/eslint-config": "^1.8.0",
     "@homebound/rtl-react-router-utils": "1.0.3",
     "@homebound/rtl-utils": "^2.65.0",
-    "@homebound/truss": "^1.131.0",
+    "@homebound/truss": "^1.132.0",
     "@homebound/tsconfig": "^1.0.3",
     "@semantic-release/exec": "^6.0.3",
     "@semantic-release/git": "^10.0.1",