@homebound/beam 2.93.2 → 2.95.1

package/dist/components/Table/CollapseToggle.js

@@ -7,9 +7,14 @@ const components_1 = require("..");
 function CollapseToggle(props) {
     const { row } = props;
     const { isCollapsed, toggleCollapsed } = (0, react_1.useContext)(components_1.GridCollapseContext);
-    const toggleOnClick = (0, react_1.useCallback)(() => toggleCollapsed(row.id), [row.id, toggleCollapsed]);
-    const iconKey = isCollapsed(row.id) ? "chevronRight" : "chevronDown";
-    const headerIconKey = isCollapsed(row.id) ? "chevronsRight" : "chevronsDown";
+    const [, setTick] = (0, react_1.useState)(0);
+    const currentlyCollapsed = isCollapsed(row.id);
+    const toggleOnClick = (0, react_1.useCallback)(() => {
+        toggleCollapsed(row.id);
+        setTick(Date.now());
+    }, [row.id, currentlyCollapsed, toggleCollapsed]);
+    const iconKey = currentlyCollapsed ? "chevronRight" : "chevronDown";
+    const headerIconKey = currentlyCollapsed ? "chevronsRight" : "chevronsDown";
     const isHeader = row.kind === "header";
     if (!isHeader && (!props.row.children || props.row.children.length === 0)) {
         return null;

package/dist/components/Table/GridTable.d.ts

@@ -302,13 +302,17 @@ export declare type GridDataRow<R extends Kinded> = {
 /** Return the content for a given column def applied to a given row. */
 export declare function applyRowFn<R extends Kinded>(column: GridColumn<R>, row: GridDataRow<R>): ReactNode | GridCellContent;
 /**
- * Provides each row access to its `collapsed` current state and toggle.
+ * Provides each row access to a method to check if it is collapsed and toggle it's collapsed state.
  *
  * Calling `toggleCollapse` will keep the row itself showing, but will hide any
  * children rows (specifically those that have this row's `id` in their `parentIds`
  * prop).
+ *
+ * headerCollapsed is used to trigger rows at the root level to rerender their chevron when all are
+ * collapsed/expanded.
  */
 declare type GridCollapseContextProps = {
+    headerCollapsed: boolean;
     isCollapsed: (id: string) => boolean;
     toggleCollapsed(id: string): void;
 };

package/dist/components/Table/GridTable.js

@@ -257,9 +257,9 @@ function renderTable(style, id, columns, headerRows, filteredRows, firstRowMessa
  */
 function renderVirtual(style, id, columns, headerRows, filteredRows, firstRowMessage, stickyHeader, firstLastColumnWidth, xss, virtuosoRef) {
     var _a;
-    const { paddingBottom } = (_a = style.rootCss) !== null && _a !== void 0 ? _a : {};
+    const { paddingBottom, ...otherRootStyles } = (_a = style.rootCss) !== null && _a !== void 0 ? _a : {};
     return ((0, jsx_runtime_1.jsx)(react_virtuoso_1.Virtuoso, { ref: virtuosoRef, components: {
-            List: VirtualRoot(style, columns, id, firstLastColumnWidth, xss),
+            List: VirtualRoot({ ...style, rootCss: otherRootStyles }, columns, id, firstLastColumnWidth, xss),
             Footer: () => (0, jsx_runtime_1.jsx)("div", { css: { paddingBottom } }, void 0),
         }, 
         // Pin/sticky both the header row(s) + firstRowMessage to the top
@@ -544,6 +544,7 @@ const defaultRenderFn = (as) => (key, css, content) => {
     return ((0, jsx_runtime_1.jsx)(Row, Object.assign({ css: { ...css, ...tableRowStyles(as) } }, { children: content }), key));
 };
 exports.GridCollapseContext = react_1.default.createContext({
+    headerCollapsed: false,
     isCollapsed: (id) => false,
     toggleCollapsed: (id) => { },
 });
@@ -687,7 +688,7 @@ function useToggleIds(rows, persistCollapse) {
             // Trigger a re-render
             setTick(collapsedIds.join(","));
         };
-        return { isCollapsed, toggleCollapsed: toggleAll };
+        return { headerCollapsed: isCollapsed("header"), isCollapsed, toggleCollapsed: toggleAll };
     }, 
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [rows]);
@@ -709,10 +710,10 @@ function useToggleIds(rows, persistCollapse) {
             // Trigger a re-render
             setTick(collapsedIds.join(","));
         };
-        return { isCollapsed, toggleCollapsed: toggleRow };
+        return { headerCollapsed: isCollapsed("header"), isCollapsed, toggleCollapsed: toggleRow };
     }, 
     // eslint-disable-next-line react-hooks/exhaustive-deps
-    []);
+    [collapseAllContext.isCollapsed("header")]);
     // Return a copy of the list, b/c we want external useMemos that do explicitly use the
     // entire list as a dep to re-render whenever the list is changed (which they need to
     // see as new list identity).

package/dist/components/Tooltip.d.ts

@@ -10,5 +10,5 @@ interface TooltipProps {
 export declare function Tooltip(props: TooltipProps): import("@emotion/react/jsx-runtime").JSX.Element;
 export declare type Placement = "top" | "bottom" | "left" | "right" | "auto";
 export declare function maybeTooltip(props: TooltipProps): import("@emotion/react/jsx-runtime").JSX.Element;
-export declare function resolveTooltip(disabled?: boolean | ReactNode, tooltip?: ReactNode): ReactNode | undefined;
+export declare function resolveTooltip(disabled?: boolean | ReactNode, tooltip?: ReactNode, readOnly?: boolean | ReactNode): ReactNode | undefined;
 export {};

package/dist/components/Tooltip.js

@@ -54,8 +54,12 @@ function maybeTooltip(props) {
 }
 exports.maybeTooltip = maybeTooltip;
 // Helper function for resolving showing the Tooltip text via a 'disabled' prop, or the 'tooltip' prop.
-function resolveTooltip(disabled, tooltip) {
+function resolveTooltip(disabled, tooltip, readOnly) {
     // If `disabled` is a ReactNode, then return that. Otherwise, return `tooltip`
-    return typeof disabled !== "boolean" && disabled ? disabled : tooltip !== null && tooltip !== void 0 ? tooltip : undefined;
+    return typeof disabled !== "boolean" && disabled
+        ? disabled
+        : typeof readOnly !== "boolean" && readOnly
+            ? readOnly
+            : tooltip !== null && tooltip !== void 0 ? tooltip : undefined;
 }
 exports.resolveTooltip = resolveTooltip;

package/dist/inputs/DateField.d.ts

@@ -1,5 +1,6 @@
 import { ReactNode } from "react";
 import { TextFieldBaseProps } from "./TextFieldBase";
+import "./DateField.css";
 export interface DateFieldProps extends Pick<TextFieldBaseProps<{}>, "borderless" | "visuallyDisabled" | "hideLabel" | "compact"> {
     value: Date | undefined;
     label: string;

package/dist/inputs/DateField.js

@@ -14,6 +14,7 @@ const DatePickerOverlay_1 = require("./internal/DatePickerOverlay");
 const TextFieldBase_1 = require("./TextFieldBase");
 const utils_1 = require("../utils");
 const defaultTestId_1 = require("../utils/defaultTestId");
+require("./DateField.css");
 function DateField(props) {
     const { label, disabled, required, value, onChange, onFocus, onBlur, errorMsg, helperText, inlineLabel = false, readOnly = false, format = "short", iconLeft = false, ...others } = props;
     const inputRef = (0, react_1.useRef)(null);

package/dist/inputs/MultiSelectField.mock.js

@@ -7,7 +7,7 @@ const utils_1 = require("../utils");
 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, } = props;
+    values, options, onSelect, readOnly = false, errorMsg, onFocus, onBlur, disabled, } = props;
     const tid = (0, utils_1.useTestIds)(props, "multiSelect");
     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:
@@ -37,7 +37,7 @@ function MultiSelectField(props) {
                 onBlur();
         }, 
         // Read Only does not apply to `select` fields, instead we'll add in disabled for tests to verify.
-        disabled: readOnly, "data-error": !!errorMsg, "data-errormsg": errorMsg, "data-readonly": readOnly }, { children: [(0, jsx_runtime_1.jsx)("option", { disabled: true, value: "" }, void 0), options.map((option, i) => {
+        disabled: !!(readOnly || disabled), "data-error": !!errorMsg, "data-errormsg": errorMsg, "data-readonly": readOnly }, { children: [(0, jsx_runtime_1.jsx)("option", { disabled: true, value: "" }, void 0), options.map((option, i) => {
                 return ((0, jsx_runtime_1.jsx)("option", Object.assign({ value: getOptionValue(option) }, { children: getOptionLabel(option) }), i));
             })] }), void 0));
 }

package/dist/inputs/RichTextField.d.ts

@@ -1,4 +1,6 @@
+import "tributejs/dist/tribute.css";
 import "trix/dist/trix";
+import "trix/dist/trix.css";
 export interface RichTextFieldProps {
     /** The initial html value to show in the trix editor. */
     value: string | undefined;

package/dist/inputs/RichTextField.js

@@ -12,8 +12,9 @@ const Label_1 = require("../components/Label");
 const Css_1 = require("../Css");
 const utils_1 = require("../utils");
 const tributejs_1 = __importDefault(require("tributejs"));
-// import "tributejs/dist/tribute.css";
+require("tributejs/dist/tribute.css");
 require("trix/dist/trix");
+require("trix/dist/trix.css");
 /**
  * Provides a simple rich text editor based on trix.
  *

package/dist/inputs/SelectField.mock.js

@@ -23,7 +23,7 @@ function SelectField(props) {
                 onBlur();
         }, 
         // Read Only does not apply to `select` fields, instead we'll add in disabled for tests to verify.
-        disabled: disabled || readOnly, "data-error": !!errorMsg, "data-errormsg": errorMsg, "data-readonly": readOnly }, { children: [(0, jsx_runtime_1.jsx)("option", { disabled: true, value: "" }, void 0), options.map((option, i) => {
+        disabled: !!(disabled || readOnly), "data-error": !!errorMsg, "data-errormsg": errorMsg, "data-readonly": readOnly }, { children: [(0, jsx_runtime_1.jsx)("option", { disabled: true, value: "" }, void 0), options.map((option, i) => {
                 return ((0, jsx_runtime_1.jsx)("option", Object.assign({ value: `${getOptionValue(option)}` }, { children: getOptionLabel(option) }), i));
             })] }), void 0));
 }

package/dist/inputs/TextFieldBase.js

@@ -77,36 +77,35 @@ function TextFieldBase(props) {
     }, onFocus);
     return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ css: fieldStyles.container }, groupProps, focusWithinProps, { children: [label && !inlineLabel && (
             // set `hidden` if being rendered as a compound field
-            (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)), 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.$),
-                    ...xss,
-                }, "data-readonly": "true" }, tid, { children: [!multiline && inlineLabel && label && !hideLabel && ((0, jsx_runtime_1.jsx)(Label_1.InlineLabel, Object.assign({ labelProps: labelProps, label: label }, tid.label), void 0)), multiline
-                        ? (_f = inputProps.value) === null || _f === void 0 ? void 0 : _f.split("\n\n").map((p, i) => ((0, jsx_runtime_1.jsx)("p", Object.assign({ css: Css_1.Css.my1.$ }, { children: p.split("\n").map((sentence, j) => ((0, jsx_runtime_1.jsxs)("span", { children: [sentence, (0, jsx_runtime_1.jsx)("br", {}, void 0)] }, j))) }), i)))
-                        : inputProps.value] }), void 0)), !readOnly &&
-                (0, components_1.maybeTooltip)({
-                    title: tooltip,
-                    placement: "top",
-                    children: ((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 : {}),
-                            ...(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 : {}),
-                                    ...(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: () => {
-                                    var _a;
-                                    onChange(undefined);
-                                    // Reset focus to input element
-                                    (_a = fieldRef.current) === null || _a === void 0 ? void 0 : _a.focus();
-                                } }, void 0)), !multiline && endAdornment && (0, jsx_runtime_1.jsx)("span", Object.assign({ css: Css_1.Css.df.aic.pl1.fs0.$ }, { children: endAdornment }), void 0)] }), void 0)),
-                }), errorMsg && !compound && (0, jsx_runtime_1.jsx)(ErrorMessage_1.ErrorMessage, Object.assign({ id: errorMessageId, errorMsg: errorMsg }, tid.errorMsg), void 0), helperText && !compound && (0, jsx_runtime_1.jsx)(HelperText_1.HelperText, Object.assign({ helperText: helperText }, tid.helperText), void 0)] }), void 0));
+            (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: {
+                        // 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.$),
+                        ...xss,
+                    }, "data-readonly": "true" }, tid, { children: [!multiline && inlineLabel && label && !hideLabel && ((0, jsx_runtime_1.jsx)(Label_1.InlineLabel, Object.assign({ labelProps: labelProps, label: label }, tid.label), void 0)), multiline
+                            ? (_f = inputProps.value) === null || _f === void 0 ? void 0 : _f.split("\n\n").map((p, i) => ((0, jsx_runtime_1.jsx)("p", Object.assign({ css: Css_1.Css.my1.$ }, { children: p.split("\n").map((sentence, j) => ((0, jsx_runtime_1.jsxs)("span", { children: [sentence, (0, jsx_runtime_1.jsx)("br", {}, void 0)] }, j))) }), i)))
+                            : 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 : {}),
+                        ...(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 : {}),
+                                ...(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: () => {
+                                var _a;
+                                onChange(undefined);
+                                // Reset focus to input element
+                                (_a = fieldRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+                            } }, void 0)), !multiline && endAdornment && (0, jsx_runtime_1.jsx)("span", Object.assign({ css: Css_1.Css.df.aic.pl1.fs0.$ }, { children: endAdornment }), void 0)] }), void 0)),
+            }), errorMsg && !compound && (0, jsx_runtime_1.jsx)(ErrorMessage_1.ErrorMessage, Object.assign({ id: errorMessageId, errorMsg: errorMsg }, tid.errorMsg), void 0), helperText && !compound && (0, jsx_runtime_1.jsx)(HelperText_1.HelperText, Object.assign({ helperText: helperText }, tid.helperText), void 0)] }), void 0));
 }
 exports.TextFieldBase = TextFieldBase;

package/dist/inputs/internal/SelectFieldBase.d.ts

@@ -25,7 +25,7 @@ export interface SelectFieldBaseProps<O, V extends Value> extends BeamSelectFiel
 export declare function SelectFieldBase<O, V extends Value>(props: SelectFieldBaseProps<O, V>): JSX.Element;
 export interface BeamSelectFieldBaseProps<T, V extends Value> extends BeamFocusableProps, PresentationFieldProps {
     disabledOptions?: V[];
-    disabled?: boolean;
+    disabled?: boolean | ReactNode;
     required?: boolean;
     errorMsg?: string;
     helperText?: string | ReactNode;
@@ -35,7 +35,7 @@ export interface BeamSelectFieldBaseProps<T, V extends Value> extends BeamFocusa
     label: string;
     /** Renders the label inside the input field, i.e. for filters. */
     inlineLabel?: boolean;
-    readOnly?: boolean;
+    readOnly?: boolean | ReactNode;
     onBlur?: () => void;
     onFocus?: () => void;
     sizeToContent?: boolean;
@@ -43,4 +43,6 @@ export interface BeamSelectFieldBaseProps<T, V extends Value> extends BeamFocusa
     nothingSelectedText?: string;
     /** When set the SelectField is expected to be put on a darker background */
     contrast?: boolean;
+    /** Placeholder content */
+    placeholder?: string;
 }

package/dist/inputs/internal/SelectFieldBase.js

@@ -5,6 +5,7 @@ const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
 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 internal_1 = require("../../components/internal");
 const Css_1 = require("../../Css");
 const ListBox_1 = require("./ListBox");
@@ -21,8 +22,10 @@ const Value_1 = require("../Value");
  */
 function SelectFieldBase(props) {
     var _a;
-    const { compact, disabled: isDisabled = false, errorMsg, helperText, label, hideLabel, required, inlineLabel, readOnly: isReadOnly = false, onSelect, fieldDecoration, options, onBlur, onFocus, multiselect = false, getOptionLabel, getOptionValue, getOptionMenuLabel = getOptionLabel, sizeToContent = false, values, nothingSelectedText = "", contrast, disabledOptions, borderless, ...otherProps } = props;
+    const { compact, disabled, errorMsg, helperText, label, hideLabel, required, inlineLabel, readOnly, onSelect, fieldDecoration, options, onBlur, onFocus, multiselect = false, getOptionLabel, getOptionValue, getOptionMenuLabel = getOptionLabel, sizeToContent = false, values, nothingSelectedText = "", contrast, disabledOptions, borderless, ...otherProps } = props;
     const { contains } = (0, react_aria_1.useFilter)({ sensitivity: "base" });
+    const isDisabled = !!disabled;
+    const isReadOnly = !!readOnly;
     function onSelectionChange(keys) {
         var _a;
         // Close menu upon selection change only for Single selection mode
@@ -185,6 +188,6 @@ function SelectFieldBase(props) {
         // Ensures the menu never gets too small.
         minWidth: 200,
     };
-    return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ css: Css_1.Css.df.fdc.w100.maxw((0, Css_1.px)(550)).$, ref: comboBoxRef }, { children: [(0, jsx_runtime_1.jsx)(SelectFieldInput_1.SelectFieldInput, Object.assign({}, otherProps, { buttonProps: buttonProps, buttonRef: triggerRef, compact: compact, errorMsg: errorMsg, helperText: helperText, fieldDecoration: fieldDecoration, inputProps: inputProps, inputRef: inputRef, inputWrapRef: inputWrapRef, isDisabled: isDisabled, required: required, isReadOnly: isReadOnly, state: state, onBlur: onBlur, onFocus: onFocus, inlineLabel: inlineLabel, label: label, hideLabel: hideLabel, labelProps: labelProps, selectedOptions: fieldState.selectedOptions, getOptionValue: getOptionValue, getOptionLabel: getOptionLabel, sizeToContent: sizeToContent, contrast: contrast, nothingSelectedText: nothingSelectedText, borderless: borderless }), void 0), state.isOpen && ((0, jsx_runtime_1.jsx)(internal_1.Popover, Object.assign({ triggerRef: triggerRef, popoverRef: popoverRef, positionProps: positionProps, onClose: () => state.close(), isOpen: state.isOpen, minWidth: 200 }, { children: (0, jsx_runtime_1.jsx)(ListBox_1.ListBox, Object.assign({}, listBoxProps, { positionProps: positionProps, state: state, listBoxRef: listBoxRef, selectedOptions: fieldState.selectedOptions, getOptionLabel: getOptionLabel, getOptionValue: (o) => (0, Value_1.valueToKey)(getOptionValue(o)), contrast: contrast }), void 0) }), void 0))] }), void 0));
+    return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ css: Css_1.Css.df.fdc.w100.maxw((0, Css_1.px)(550)).$, ref: comboBoxRef }, { children: [(0, jsx_runtime_1.jsx)(SelectFieldInput_1.SelectFieldInput, Object.assign({}, otherProps, { buttonProps: buttonProps, buttonRef: triggerRef, compact: compact, errorMsg: errorMsg, helperText: helperText, fieldDecoration: fieldDecoration, inputProps: inputProps, inputRef: inputRef, inputWrapRef: inputWrapRef, isDisabled: isDisabled, required: required, isReadOnly: isReadOnly, state: state, onBlur: onBlur, onFocus: onFocus, inlineLabel: inlineLabel, label: label, hideLabel: hideLabel, labelProps: labelProps, selectedOptions: fieldState.selectedOptions, getOptionValue: getOptionValue, getOptionLabel: getOptionLabel, sizeToContent: sizeToContent, contrast: contrast, nothingSelectedText: nothingSelectedText, borderless: borderless, tooltip: (0, components_1.resolveTooltip)(disabled, undefined, readOnly) }), void 0), state.isOpen && ((0, jsx_runtime_1.jsx)(internal_1.Popover, Object.assign({ triggerRef: triggerRef, popoverRef: popoverRef, positionProps: positionProps, onClose: () => state.close(), isOpen: state.isOpen, minWidth: 200 }, { children: (0, jsx_runtime_1.jsx)(ListBox_1.ListBox, Object.assign({}, listBoxProps, { positionProps: positionProps, state: state, listBoxRef: listBoxRef, selectedOptions: fieldState.selectedOptions, getOptionLabel: getOptionLabel, getOptionValue: (o) => (0, Value_1.valueToKey)(getOptionValue(o)), contrast: contrast }), void 0) }), void 0))] }), void 0));
 }
 exports.SelectFieldBase = SelectFieldBase;

package/dist/inputs/internal/SelectFieldInput.d.ts

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

package/dist/inputs/internal/SelectFieldInput.js

@@ -16,7 +16,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, { inputRef: inputRef, inputWrapRef: inputWrapRef, label: label, readOnly: isReadOnly, hideLabel: hideLabel, labelProps: labelProps, inlineLabel: inlineLabel, compact: compact, required: required, errorMsg: errorMsg, helperText: helperText, contrast: contrast, xss: !inlineLabel ? 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, { inputRef: inputRef, inputWrapRef: inputWrapRef, label: label, readOnly: isReadOnly, hideLabel: hideLabel, labelProps: labelProps, inlineLabel: inlineLabel, compact: compact, required: required, errorMsg: errorMsg, helperText: helperText, contrast: contrast, xss: !inlineLabel && !isReadOnly ? 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: !isReadOnly && ((0, jsx_runtime_1.jsx)("button", Object.assign({}, buttonProps, { disabled: isDisabled, ref: buttonRef, css: {
                 ...Css_1.Css.br4.outline0.gray700.if(contrast).gray400.$,
                 ...(isDisabled ? Css_1.Css.cursorNotAllowed.gray400.if(contrast).gray600.$ : {}),

package/package.json

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