@homebound/beam 2.119.0 → 2.121.0

package/dist/components/IconButton.d.ts

@@ -14,8 +14,13 @@ export interface IconButtonProps extends BeamButtonProps, BeamFocusableProps {
     buttonRef?: RefObject<HTMLButtonElement>;
     /** Whether to show a 16x16px version of the IconButton */
     compact?: boolean;
+    /** Whether to display the contrast variant */
+    contrast?: boolean;
 }
 export declare function IconButton(props: IconButtonProps): import("@emotion/react/jsx-runtime").JSX.Element;
 export declare const iconButtonStylesHover: {
     backgroundColor: import("csstype").Property.BackgroundColor | undefined;
 };
+export declare const iconButtonContrastStylesHover: {
+    backgroundColor: import("csstype").Property.BackgroundColor | undefined;
+};

package/dist/components/IconButton.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.iconButtonStylesHover = exports.IconButton = void 0;
+exports.iconButtonContrastStylesHover = exports.iconButtonStylesHover = exports.IconButton = void 0;
 const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
 const react_1 = require("react");
 const react_aria_1 = require("react-aria");
@@ -10,7 +10,7 @@ const Css_1 = require("../Css");
 const utils_1 = require("../utils");
 const useTestIds_1 = require("../utils/useTestIds");
 function IconButton(props) {
-    const { onClick: onPress, disabled, color, icon, autoFocus, inc, buttonRef, tooltip, menuTriggerProps, openInNew, compact = false, } = props;
+    const { onClick: onPress, disabled, color, icon, autoFocus, inc, buttonRef, tooltip, menuTriggerProps, openInNew, compact = false, contrast = false, } = props;
     const isDisabled = !!disabled;
     const ariaProps = { onPress, isDisabled, autoFocus, ...menuTriggerProps };
     // eslint-disable-next-line react-hooks/rules-of-hooks
@@ -26,12 +26,13 @@ function IconButton(props) {
     const styles = (0, react_1.useMemo)(() => ({
         ...iconButtonStylesReset,
         ...(compact ? iconButtonCompact : iconButtonNormal),
-        ...(isHovered && exports.iconButtonStylesHover),
+        ...(isHovered && (contrast ? exports.iconButtonContrastStylesHover : exports.iconButtonStylesHover)),
         ...(isFocusVisible && iconButtonStylesFocus),
         ...(isDisabled && iconButtonStylesDisabled),
     }), [isHovered, isFocusVisible, isDisabled, compact]);
+    const iconColor = contrast ? contrastIconColor : defaultIconColor;
     const buttonAttrs = { ...testIds, ...buttonProps, ...focusProps, ...hoverProps, ref: ref, css: styles };
-    const buttonContent = ((0, jsx_runtime_1.jsx)(components_1.Icon, { icon: icon, color: color || (isDisabled ? Css_1.Palette.Gray400 : Css_1.Palette.Gray900), inc: compact ? 2 : inc }, void 0));
+    const buttonContent = ((0, jsx_runtime_1.jsx)(components_1.Icon, { icon: icon, color: color || (isDisabled ? Css_1.Palette.Gray400 : iconColor), inc: compact ? 2 : inc }, void 0));
     const button = typeof onPress === "string" ? ((0, utils_1.isAbsoluteUrl)(onPress) || openInNew ? ((0, jsx_runtime_1.jsx)("a", Object.assign({}, buttonAttrs, { href: onPress, className: components_1.navLink, target: "_blank", rel: "noreferrer noopener" }, { children: buttonContent }), void 0)) : ((0, jsx_runtime_1.jsx)(react_router_dom_1.Link, Object.assign({}, buttonAttrs, { to: onPress, className: components_1.navLink }, { children: buttonContent }), void 0))) : ((0, jsx_runtime_1.jsx)("button", Object.assign({}, buttonAttrs, { children: buttonContent }), void 0));
     // 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)({
@@ -41,9 +42,12 @@ function IconButton(props) {
     });
 }
 exports.IconButton = IconButton;
+const defaultIconColor = Css_1.Palette.Gray900;
+const contrastIconColor = Css_1.Palette.White;
 const iconButtonStylesReset = Css_1.Css.bTransparent.bsSolid.bgTransparent.cursorPointer.outline0.dif.aic.jcc.transition.$;
 const iconButtonNormal = Css_1.Css.hPx(28).wPx(28).br8.bw2.$;
 const iconButtonCompact = Css_1.Css.hPx(18).wPx(18).br4.bw1.$;
 exports.iconButtonStylesHover = Css_1.Css.bgGray200.$;
+exports.iconButtonContrastStylesHover = Css_1.Css.bgGray700.$;
 const iconButtonStylesFocus = Css_1.Css.bLightBlue700.$;
 const iconButtonStylesDisabled = Css_1.Css.cursorNotAllowed.$;

package/dist/components/Table/RowState.js

@@ -34,6 +34,8 @@ class RowState {
         this.visibleRows = new mobx_1.ObservableSet();
         // The current list of rows, basically a useRef.current. Not reactive.
         this.rows = [];
+        // Keeps track of the 'active' row, formatted `${row.kind}_${row.id}`
+        this.activeRowId = undefined;
         // Make ourselves an observable so that mobx will do caching of .collapseIds so
         // that it'll be a stable identity for GridTable to useMemo against.
         (0, mobx_1.makeAutoObservable)(this, { rows: false }); // as any b/c rows is private, so the mapped type doesn't see it

package/dist/inputs/DateField.d.ts

@@ -10,10 +10,12 @@ export interface DateFieldProps extends Pick<TextFieldBaseProps<{}>, "borderless
     onBlur?: () => void;
     /** Called when the component is in focus. */
     onFocus?: () => void;
+    /** Whether the field is disabled. If a ReactNode, it's treated as a "disabled reason" that's shown in a tooltip. */
     disabled?: boolean | ReactNode;
     errorMsg?: string;
     required?: boolean;
-    readOnly?: boolean;
+    /** Whether the field is readOnly. If a ReactNode, it's treated as a "readOnly reason" that's shown in a tooltip. */
+    readOnly?: boolean | ReactNode;
     helperText?: string | ReactNode;
     /** Renders the label inside the input field, i.e. for filters. */
     inlineLabel?: boolean;

package/dist/inputs/DateField.js

@@ -15,7 +15,7 @@ const TextFieldBase_1 = require("./TextFieldBase");
 const utils_1 = require("../utils");
 const defaultTestId_1 = require("../utils/defaultTestId");
 function DateField(props) {
-    const { label, disabled, required, value, onChange, onFocus, onBlur, errorMsg, helperText, inlineLabel = false, readOnly = false, format = "short", iconLeft = false, disabledDays, onEnter, defaultOpen, ...others } = props;
+    const { label, disabled, required, value, onChange, onFocus, onBlur, errorMsg, helperText, inlineLabel = false, readOnly, format = "short", iconLeft = false, disabledDays, onEnter, defaultOpen, ...others } = props;
     const inputRef = (0, react_1.useRef)(null);
     const inputWrapRef = (0, react_1.useRef)(null);
     const buttonRef = (0, react_1.useRef)(null);
@@ -26,6 +26,7 @@ function DateField(props) {
     const [inputValue, setInputValue] = (0, react_1.useState)(value ? formatDate(value, dateFormat) : "");
     const tid = (0, utils_1.useTestIds)(props, (0, defaultTestId_1.defaultTestId)(label));
     const isDisabled = !!disabled;
+    const isReadOnly = !!readOnly;
     (0, react_1.useEffect)(() => {
         // Avoid updating any WIP values.
         if (!isFocused) {
@@ -36,7 +37,7 @@ function DateField(props) {
         ...others,
         label,
         isDisabled,
-        isReadOnly: readOnly,
+        isReadOnly,
         "aria-haspopup": "dialog",
         value: inputValue,
     };
@@ -87,7 +88,7 @@ function DateField(props) {
     const { triggerProps, overlayProps } = (0, react_aria_1.useOverlayTrigger)({ type: "dialog" }, state, buttonRef);
     const { buttonProps } = (0, react_aria_1.useButton)({
         ...triggerProps,
-        isDisabled: isDisabled || readOnly,
+        isDisabled: isDisabled || isReadOnly,
         // When pressed or focused then move focus the input, which will select the text and trigger the DatePicker to open
         onPress: () => { var _a; return (_a = inputRef === null || inputRef === void 0 ? void 0 : inputRef.current) === null || _a === void 0 ? void 0 : _a.focus(); },
         onFocus: () => { var _a; return (_a = inputRef === null || inputRef === void 0 ? void 0 : inputRef.current) === null || _a === void 0 ? void 0 : _a.focus(); },
@@ -110,7 +111,7 @@ function DateField(props) {
     // But would also need to allow for the input to be `fullWidth`, which is basically also what we're accomplishing here... so maybe fine?
     const inputSize = format === "short" ? 8 : format === "medium" ? 10 : undefined;
     const calendarButton = ((0, jsx_runtime_1.jsx)("button", Object.assign({ ref: buttonRef }, buttonProps, { disabled: isDisabled, css: Css_1.Css.if(isDisabled).cursorNotAllowed.$, tabIndex: -1 }, tid.calendarButton, { children: (0, jsx_runtime_1.jsx)(components_1.Icon, { icon: "calendar", color: Css_1.Palette.Gray700 }, void 0) }), void 0));
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(TextFieldBase_1.TextFieldBase, Object.assign({}, textFieldProps, { readOnly: readOnly, errorMsg: errorMsg, helperText: helperText, required: required, labelProps: labelProps, inputProps: { ...triggerProps, ...inputProps, size: inputSize }, inputRef: inputRef, inputWrapRef: inputWrapRef, inlineLabel: inlineLabel, onChange: (v) => {
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(TextFieldBase_1.TextFieldBase, Object.assign({}, textFieldProps, { errorMsg: errorMsg, helperText: helperText, required: required, labelProps: labelProps, inputProps: { ...triggerProps, ...inputProps, size: inputSize }, inputRef: inputRef, inputWrapRef: inputWrapRef, inlineLabel: inlineLabel, onChange: (v) => {
                     // hide the calendar if the user is manually entering the date
                     state.close();
                     if (v) {
@@ -121,7 +122,7 @@ function DateField(props) {
                             onChange(parsed);
                         }
                     }
-                }, endAdornment: !iconLeft && calendarButton, startAdornment: iconLeft && calendarButton, tooltip: isDisabled && typeof disabled !== "boolean" ? disabled : undefined }, others), void 0), state.isOpen && ((0, jsx_runtime_1.jsx)(internal_1.Popover, Object.assign({ triggerRef: inputWrapRef, popoverRef: overlayRef, positionProps: positionProps, onClose: state.close, isOpen: state.isOpen }, { children: (0, jsx_runtime_1.jsx)(DatePickerOverlay_1.DatePickerOverlay, Object.assign({ value: value, onSelect: (d) => {
+                }, endAdornment: !iconLeft && calendarButton, startAdornment: iconLeft && calendarButton, tooltip: (0, components_1.resolveTooltip)(disabled, undefined, readOnly) }, others), void 0), state.isOpen && ((0, jsx_runtime_1.jsx)(internal_1.Popover, Object.assign({ triggerRef: inputWrapRef, popoverRef: overlayRef, positionProps: positionProps, onClose: state.close, isOpen: state.isOpen }, { children: (0, jsx_runtime_1.jsx)(DatePickerOverlay_1.DatePickerOverlay, Object.assign({ value: value, onSelect: (d) => {
                         setInputValue(formatDate(d, dateFormat));
                         onChange(d);
                     }, state: state, disabledDays: disabledDays, overlayProps: overlayProps }, tid.datePicker), void 0) }), void 0))] }, void 0));

package/dist/inputs/DateField.mock.js

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

package/dist/inputs/MultiSelectField.mock.js

@@ -3,12 +3,13 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.MultiSelectField = void 0;
 const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
 const utils_1 = require("../utils");
+const defaultTestId_1 = require("../utils/defaultTestId");
 /** Mocks out `MultiSelectField` as a multiple `<select>` field. */
 function MultiSelectField(props) {
     const { getOptionValue = (o) => o.id, // if unset, assume O implements HasId
     getOptionLabel = (o) => o.name, // if unset, assume O implements HasName
-    values, options, onSelect, readOnly = false, errorMsg, onFocus, onBlur, disabled, } = props;
-    const tid = (0, utils_1.useTestIds)(props, "multiSelect");
+    values, options, onSelect, readOnly = false, errorMsg, onFocus, onBlur, disabled, label, } = props;
+    const tid = (0, utils_1.useTestIds)(props, (0, defaultTestId_1.defaultTestId)(label));
     return ((0, jsx_runtime_1.jsxs)("select", Object.assign({}, tid, { 
         // We're cheating and assume the values are strings...what we should really do is either:
         // a) use beam's valueToKey mapping to string-encode any Value, or

package/dist/inputs/NumberField.d.ts

@@ -10,13 +10,14 @@ export interface NumberFieldProps {
     value: number | undefined;
     onChange: (value: number | undefined) => void;
     compact?: boolean;
-    disabled?: boolean;
+    /** Whether the field is disabled. If a ReactNode, it's treated as a "disabled reason" that's shown in a tooltip. */
+    disabled?: boolean | ReactNode;
     required?: boolean;
     errorMsg?: string;
     helperText?: string | ReactNode;
     onBlur?: () => void;
     onFocus?: () => void;
-    readOnly?: boolean;
+    readOnly?: boolean | ReactNode;
     /** Styles overrides */
     xss?: Xss<"textAlign" | "justifyContent">;
     displayDirection?: boolean;

package/dist/inputs/NumberField.js

@@ -6,6 +6,7 @@ const number_1 = require("@internationalized/number");
 const react_1 = require("react");
 const react_aria_1 = require("react-aria");
 const react_stately_1 = require("react-stately");
+const components_1 = require("../components");
 const PresentationContext_1 = require("../components/PresentationContext");
 const Css_1 = require("../Css");
 const utils_1 = require("../utils");
@@ -14,7 +15,9 @@ function NumberField(props) {
     // Determine default alignment based on presentation context
     const { fieldProps } = (0, PresentationContext_1.usePresentationContext)();
     const alignment = (fieldProps === null || fieldProps === void 0 ? void 0 : fieldProps.numberAlignment) === "right" ? Css_1.Css.tr.jcfe.$ : Css_1.Css.tl.jcfs.$;
-    const { disabled = false, required, readOnly = false, type, label, onBlur, onFocus, errorMsg, helperText, value, onChange, xss, displayDirection = false, numFractionDigits, truncate = false, onEnter, ...otherProps } = props;
+    const { disabled, required, readOnly, type, label, onBlur, onFocus, errorMsg, helperText, value, onChange, xss, displayDirection = false, numFractionDigits, truncate = false, onEnter, ...otherProps } = props;
+    const isDisabled = !!disabled;
+    const isReadOnly = !!readOnly;
     const factor = type === "percent" || type === "cents" ? 100 : type === "basisPoints" ? 10000 : 1;
     const signDisplay = displayDirection ? "exceptZero" : "auto";
     const fractionFormatOptions = { [truncate ? "maximumFractionDigits" : "minimumFractionDigits"]: numFractionDigits };
@@ -58,8 +61,8 @@ function NumberField(props) {
         },
         validationState: errorMsg !== undefined ? "invalid" : "valid",
         label: label,
-        isDisabled: disabled,
-        isReadOnly: readOnly,
+        isDisabled,
+        isReadOnly,
         formatOptions,
     };
     const state = (0, react_stately_1.useNumberFieldState)(useProps);
@@ -75,7 +78,7 @@ function NumberField(props) {
         onChange: (rawInputValue) => {
             const parsedValue = numberParser.parse(rawInputValue || "");
             onChange(formatValue(parsedValue, factor, numFractionDigits));
-        }, inputRef: inputRef, onBlur: onBlur, onFocus: onFocus, errorMsg: errorMsg, helperText: helperText, readOnly: readOnly }, otherProps), void 0));
+        }, inputRef: inputRef, onBlur: onBlur, onFocus: onFocus, errorMsg: errorMsg, helperText: helperText, tooltip: (0, components_1.resolveTooltip)(disabled, undefined, readOnly) }, otherProps), void 0));
 }
 exports.NumberField = NumberField;
 function formatValue(value, factor, numFractionDigits) {

package/dist/inputs/SelectField.mock.js

@@ -4,12 +4,13 @@ exports.SelectField = void 0;
 const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
 const react_1 = require("react");
 const utils_1 = require("../utils");
+const defaultTestId_1 = require("../utils/defaultTestId");
 /** Mocks out `SelectField` as a `<select>` field. */
 function SelectField(props) {
     const { getOptionValue = (o) => o.id, // if unset, assume O implements HasId
     getOptionLabel = (o) => o.name, // if unset, assume O implements HasName
-    value, options: maybeOptions, onSelect, readOnly = false, errorMsg, onBlur, onFocus, disabled, disabledOptions = [], } = props;
-    const tid = (0, utils_1.useTestIds)(props, "select");
+    value, options: maybeOptions, onSelect, readOnly = false, errorMsg, onBlur, onFocus, disabled, disabledOptions = [], label, } = props;
+    const tid = (0, utils_1.useTestIds)(props, (0, defaultTestId_1.defaultTestId)(label));
     const [options, setOptions] = (0, react_1.useState)(Array.isArray(maybeOptions) ? maybeOptions : maybeOptions.initial);
     const currentOption = options.find((o) => getOptionValue(o) === value) || options[0];
     (0, react_1.useEffect)(() => {

package/dist/inputs/TextAreaField.js

@@ -5,12 +5,15 @@ const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
 const utils_1 = require("@react-aria/utils");
 const react_1 = require("react");
 const react_aria_1 = require("react-aria");
+const components_1 = require("../components");
 const TextFieldBase_1 = require("./TextFieldBase");
 const utils_2 = require("../utils");
 /** Returns a <textarea /> element that auto-adjusts height based on the field's value */
 function TextAreaField(props) {
     const { value = "", disabled = false, readOnly = false, onBlur, onFocus, preventNewLines, onEnter, ...otherProps } = props;
-    const textFieldProps = { ...otherProps, value, isDisabled: disabled, isReadOnly: readOnly };
+    const isDisabled = !!disabled;
+    const isReadOnly = !!readOnly;
+    const textFieldProps = { ...otherProps, value, isDisabled, isReadOnly };
     const inputRef = (0, react_1.useRef)(null);
     const inputWrapRef = (0, react_1.useRef)(null);
     // not in stately because this is so we know when to re-measure, which is a spectrum design
@@ -60,6 +63,6 @@ function TextAreaField(props) {
             }
             : {}),
     }, inputRef);
-    return ((0, jsx_runtime_1.jsx)(TextFieldBase_1.TextFieldBase, Object.assign({}, (0, react_aria_1.mergeProps)(otherProps, { onBlur, onFocus }), { multiline: true, labelProps: labelProps, inputProps: inputProps, inputRef: inputRef, readOnly: readOnly, inputWrapRef: inputWrapRef, textAreaMinHeight: preventNewLines ? 0 : undefined }), void 0));
+    return ((0, jsx_runtime_1.jsx)(TextFieldBase_1.TextFieldBase, Object.assign({}, (0, react_aria_1.mergeProps)(otherProps, { onBlur, onFocus }), { multiline: true, labelProps: labelProps, inputProps: inputProps, inputRef: inputRef, inputWrapRef: inputWrapRef, textAreaMinHeight: preventNewLines ? 0 : undefined, tooltip: (0, components_1.resolveTooltip)(disabled, undefined, readOnly) }), void 0));
 }
 exports.TextAreaField = TextAreaField;

package/dist/inputs/TextField.js

@@ -4,14 +4,17 @@ exports.TextField = 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("../components");
 const TextFieldBase_1 = require("./TextFieldBase");
 const utils_1 = require("../utils");
 function TextField(props) {
-    const { disabled: isDisabled = false, readOnly = false, required, errorMsg, value = "", onBlur, onFocus, api, onEnter, ...otherProps } = props;
+    const { disabled = false, readOnly = false, required, errorMsg, value = "", onBlur, onFocus, api, onEnter, ...otherProps } = props;
+    const isDisabled = !!disabled;
+    const isReadOnly = !!readOnly;
     const textFieldProps = {
         ...otherProps,
         isDisabled,
-        isReadOnly: readOnly,
+        isReadOnly,
         isRequired: required,
         validationState: errorMsg ? "invalid" : "valid",
         value,
@@ -33,6 +36,6 @@ function TextField(props) {
             focus: () => inputRef.current && inputRef.current.focus(),
         };
     }
-    return ((0, jsx_runtime_1.jsx)(TextFieldBase_1.TextFieldBase, Object.assign({}, (0, react_aria_1.mergeProps)(textFieldProps, { onBlur, onFocus }), { readOnly: readOnly, errorMsg: errorMsg, required: required, labelProps: labelProps, inputProps: inputProps, inputRef: inputRef }), void 0));
+    return ((0, jsx_runtime_1.jsx)(TextFieldBase_1.TextFieldBase, Object.assign({}, (0, react_aria_1.mergeProps)(textFieldProps, { onBlur, onFocus }), { errorMsg: errorMsg, required: required, labelProps: labelProps, inputProps: inputProps, inputRef: inputRef, tooltip: (0, components_1.resolveTooltip)(disabled, undefined, readOnly) }), void 0));
 }
 exports.TextField = TextField;

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" | "readOnly" | "errorMsg" | "onBlur" | "onFocus" | "helperText" | "hideLabel" | "placeholder" | "compact" | "borderless" | "visuallyDisabled" | "xss">, Partial<Pick<BeamTextFieldProps<X>, "onChange">> {
+export interface TextFieldBaseProps<X> extends Pick<BeamTextFieldProps<X>, "label" | "required" | "errorMsg" | "onBlur" | "onFocus" | "helperText" | "hideLabel" | "placeholder" | "compact" | "borderless" | "visuallyDisabled" | "xss">, Partial<Pick<BeamTextFieldProps<X>, "onChange">> {
     labelProps?: LabelHTMLAttributes<HTMLLabelElement>;
     inputProps: InputHTMLAttributes<HTMLInputElement> | TextareaHTMLAttributes<HTMLTextAreaElement>;
     inputRef?: MutableRefObject<HTMLInputElement | HTMLTextAreaElement | null>;

package/dist/inputs/TextFieldBase.js

@@ -17,7 +17,7 @@ const useTestIds_1 = require("../utils/useTestIds");
 function TextFieldBase(props) {
     var _a, _b, _c, _d, _e, _f;
     const { fieldProps } = (0, PresentationContext_1.usePresentationContext)();
-    const { label, required, labelProps, hideLabel = (_a = fieldProps === null || fieldProps === void 0 ? void 0 : fieldProps.hideLabel) !== null && _a !== void 0 ? _a : false, inputProps, inputRef, inputWrapRef, groupProps, compact = (_b = fieldProps === null || fieldProps === void 0 ? void 0 : fieldProps.compact) !== null && _b !== void 0 ? _b : false, errorMsg, helperText, multiline = false, readOnly, onChange, onBlur, onFocus, xss, endAdornment, startAdornment, inlineLabel, 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, } = props;
+    const { label, required, labelProps, hideLabel = (_a = fieldProps === null || fieldProps === void 0 ? void 0 : fieldProps.hideLabel) !== null && _a !== void 0 ? _a : false, inputProps, inputRef, inputWrapRef, groupProps, compact = (_b = fieldProps === null || fieldProps === void 0 ? void 0 : fieldProps.compact) !== null && _b !== void 0 ? _b : false, errorMsg, helperText, multiline = false, onChange, onBlur, onFocus, xss, endAdornment, startAdornment, inlineLabel, 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, } = props;
     const typeScale = (_e = fieldProps === null || fieldProps === void 0 ? void 0 : fieldProps.typeScale) !== null && _e !== void 0 ? _e : "sm";
     const internalProps = props.internalProps || {};
     const { compound = false } = internalProps;
@@ -80,7 +80,7 @@ function TextFieldBase(props) {
             (0, jsx_runtime_1.jsx)(Label_1.Label, Object.assign({ labelProps: labelProps, hidden: hideLabel || compound, label: label, suffix: labelSuffix, contrast: contrast }, tid.label), void 0)), (0, components_1.maybeTooltip)({
                 title: tooltip,
                 placement: "top",
-                children: readOnly ? ((0, jsx_runtime_1.jsxs)("div", Object.assign({ css: {
+                children: inputProps.readOnly ? ((0, jsx_runtime_1.jsxs)("div", Object.assign({ css: {
                         // Use input wrapper to get common styles, but then we need to override some
                         ...fieldStyles.inputWrapperReadOnly,
                         ...(multiline ? Css_1.Css.fdc.aifs.childGap2.$ : Css_1.Css.truncate.$),
@@ -90,14 +90,14 @@ function TextFieldBase(props) {
                             : inputProps.value] }), void 0)) : ((0, jsx_runtime_1.jsxs)("div", Object.assign({ css: {
                         ...fieldStyles.inputWrapper,
                         ...(inputProps.disabled ? fieldStyles.disabled : {}),
-                        ...(isFocused && !readOnly ? fieldStyles.focus : {}),
-                        ...(isHovered && !inputProps.disabled && !readOnly && !isFocused ? fieldStyles.hover : {}),
+                        ...(isFocused && !inputProps.readOnly ? fieldStyles.focus : {}),
+                        ...(isHovered && !inputProps.disabled && !inputProps.readOnly && !isFocused ? fieldStyles.hover : {}),
                         ...(errorMsg ? fieldStyles.error : {}),
                         ...Css_1.Css.if(multiline).aifs.px0.mhPx(textAreaMinHeight).$,
                     } }, hoverProps, { ref: inputWrapRef }, { children: [!multiline && inlineLabel && label && !hideLabel && ((0, jsx_runtime_1.jsx)(Label_1.InlineLabel, Object.assign({ labelProps: labelProps, label: label }, tid.label), void 0)), !multiline && startAdornment && (0, jsx_runtime_1.jsx)("span", Object.assign({ css: Css_1.Css.df.aic.fs0.br4.pr1.$ }, { children: startAdornment }), void 0), (0, jsx_runtime_1.jsx)(ElementType, Object.assign({}, (0, react_aria_1.mergeProps)(inputProps, { onBlur, onFocus: onFocusChained, onChange: onDomChange }, { "aria-invalid": Boolean(errorMsg), ...(hideLabel ? { "aria-label": label } : {}) }), (errorMsg ? { "aria-errormessage": errorMessageId } : {}), { ref: fieldRef, rows: multiline ? 1 : undefined, css: {
                                 ...fieldStyles.input,
                                 ...(inputProps.disabled ? fieldStyles.disabled : {}),
-                                ...(isHovered && !inputProps.disabled && !readOnly && !isFocused ? fieldStyles.hover : {}),
+                                ...(isHovered && !inputProps.disabled && !inputProps.readOnly && !isFocused ? fieldStyles.hover : {}),
                                 ...(multiline ? Css_1.Css.h100.p1.add("resize", "none").if(borderless).pPx(4).$ : Css_1.Css.truncate.$),
                                 ...xss,
                             } }, tid), void 0), isFocused && clearable && onChange && inputProps.value && ((0, jsx_runtime_1.jsx)(components_1.IconButton, { icon: "xCircle", color: Css_1.Palette.Gray700, onClick: () => {

package/dist/inputs/internal/SelectFieldInput.js

@@ -15,7 +15,7 @@ function SelectFieldInput(props) {
     const showNumSelection = isMultiSelect && state.selectionManager.selectedKeys.size > 1;
     // For MultiSelect only show the `fieldDecoration` when input is not in focus.
     const showFieldDecoration = (!isMultiSelect || (isMultiSelect && !isFocused)) && fieldDecoration && selectedOptions.length === 1;
-    return ((0, jsx_runtime_1.jsx)(TextFieldBase_1.TextFieldBase, Object.assign({}, otherProps, { readOnly: inputProps.readOnly, inlineLabel: inlineLabel, errorMsg: errorMsg, contrast: contrast, xss: !inlineLabel && !inputProps.readOnly ? Css_1.Css.fw5.$ : {}, startAdornment: (showNumSelection && ((0, jsx_runtime_1.jsx)("span", Object.assign({ css: Css_1.Css.wPx(16).hPx(16).fs0.br100.bgLightBlue700.white.tinyEm.df.aic.jcc.$ }, { children: state.selectionManager.selectedKeys.size }), void 0))) ||
+    return ((0, jsx_runtime_1.jsx)(TextFieldBase_1.TextFieldBase, Object.assign({}, otherProps, { inlineLabel: inlineLabel, errorMsg: errorMsg, contrast: contrast, xss: !inlineLabel && !inputProps.readOnly ? Css_1.Css.fw5.$ : {}, startAdornment: (showNumSelection && ((0, jsx_runtime_1.jsx)("span", Object.assign({ css: Css_1.Css.wPx(16).hPx(16).fs0.br100.bgLightBlue700.white.tinyEm.df.aic.jcc.$ }, { children: state.selectionManager.selectedKeys.size }), void 0))) ||
             (showFieldDecoration && fieldDecoration(selectedOptions[0])), endAdornment: !inputProps.readOnly && ((0, jsx_runtime_1.jsx)("button", Object.assign({}, buttonProps, { disabled: inputProps.disabled, ref: buttonRef, css: {
                 ...Css_1.Css.br4.outline0.gray700.if(contrast).gray400.$,
                 ...(inputProps.disabled ? Css_1.Css.cursorNotAllowed.gray400.if(contrast).gray600.$ : {}),

package/dist/interfaces.d.ts

@@ -24,8 +24,8 @@ export interface BeamButtonProps {
 }
 export declare type TextFieldXss = Xss<"textAlign" | "justifyContent" | "fontWeight" | "fontSize" | "lineHeight">;
 export interface BeamTextFieldProps<X> extends BeamFocusableProps, PresentationFieldProps {
-    /** Whether the interactive element is disabled. */
-    disabled?: boolean;
+    /** Whether the field is disabled. If a ReactNode, it's treated as a "disabled reason" that's shown in a tooltip. */
+    disabled?: boolean | ReactNode;
     errorMsg?: string;
     helperText?: string | ReactNode;
     /** Input label */
@@ -39,7 +39,8 @@ export interface BeamTextFieldProps<X> extends BeamFocusableProps, PresentationF
     onBlur?: Callback;
     onFocus?: Callback;
     onEnter?: Callback;
-    readOnly?: boolean;
+    /** Whether the field is readOnly. If a ReactNode, it's treated as a "readOnly reason" that's shown in a tooltip. */
+    readOnly?: boolean | ReactNode;
     placeholder?: string;
     /** Styles overrides */
     xss?: X;

package/package.json

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