@homebound/beam 2.93.0 → 2.94.0

package/dist/components/Table/CollapseToggle.js

@@ -6,13 +6,14 @@ const react_1 = require("react");
 const components_1 = require("..");
 function CollapseToggle(props) {
     const { row } = props;
-    const { isCollapsed, toggleCollapse } = (0, react_1.useContext)(components_1.GridCollapseContext);
-    const iconKey = isCollapsed ? "chevronRight" : "chevronDown";
-    const headerIconKey = isCollapsed ? "chevronsRight" : "chevronsDown";
+    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 isHeader = row.kind === "header";
     if (!isHeader && (!props.row.children || props.row.children.length === 0)) {
         return null;
     }
-    return (0, jsx_runtime_1.jsx)(components_1.IconButton, { onClick: toggleCollapse, icon: isHeader ? headerIconKey : iconKey }, void 0);
+    return (0, jsx_runtime_1.jsx)(components_1.IconButton, { onClick: toggleOnClick, icon: isHeader ? headerIconKey : iconKey }, void 0);
 }
 exports.CollapseToggle = CollapseToggle;

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

@@ -40,6 +40,7 @@ export interface GridStyle {
     /** Default content to put into an empty cell */
     emptyCell?: ReactNode;
 }
+export declare type NestedCardStyleByKind = Record<string, NestedCardStyle>;
 export interface NestedCardsStyle {
     /** Space between each card. */
     spacerPx: number;
@@ -50,7 +51,7 @@ export interface NestedCardsStyle {
      *
      * Entries are optional, i.e. you can leave out kinds and they won't be wrapped/turned into cards.
      */
-    kinds: Record<string, NestedCardStyle>;
+    kinds: NestedCardStyleByKind;
 }
 /**
  * Styles for making cards nested within other cards.
@@ -308,8 +309,8 @@ export declare function applyRowFn<R extends Kinded>(column: GridColumn<R>, row:
  * prop).
  */
 declare type GridCollapseContextProps = {
-    isCollapsed: boolean;
-    toggleCollapse(): void;
+    isCollapsed: (id: string) => boolean;
+    toggleCollapsed(id: string): void;
 };
 export declare const GridCollapseContext: React.Context<GridCollapseContextProps>;
 export declare function matchesFilter(maybeContent: ReactNode | GridCellContent, filter: string): boolean;

package/dist/components/Table/GridTable.js

@@ -83,7 +83,7 @@ exports.setGridTableDefaults = setGridTableDefaults;
 function GridTable(props) {
     var _a;
     const { id = "grid-table", as = "div", columns, rows, style = defaults.style, rowStyles, stickyHeader = defaults.stickyHeader, stickyOffset = "0", xss, sorting, filter, filterMaxRows, fallbackMessage = "No rows found.", infoMessage, setRowCount, observeRows, persistCollapse, api, } = props;
-    const [collapsedIds, toggleCollapsedId] = useToggleIds(rows, persistCollapse);
+    const [collapsedIds, collapseAllContext, collapseRowContext] = useToggleIds(rows, persistCollapse);
     // We only use this in as=virtual mode, but keep this here for rowLookup to use
     const virtuosoRef = (0, react_1.useRef)(null);
     if (api) {
@@ -109,26 +109,18 @@ function GridTable(props) {
             // We only pass sortState to header rows, b/c non-headers rows shouldn't have to re-render on sorting
             // changes, and so by not passing the sortProps, it means the data rows' React.memo will still cache them.
             const sortProps = row.kind === "header" ? { sorting, sortState, setSortKey } : { sorting };
-            // We only pass `isCollapsed` as a prop so that the row only re-renders when it itself has
-            // changed from collapsed/non-collapsed, and not other row's entering/leaving collapsedIds.
-            // Note that we do memoized on toggleCollapsedId, but it's stable thanks to useToggleIds.
-            const isCollapsed = collapsedIds.includes(row.id);
             const RowComponent = observeRows ? ObservedGridRow : MemoizedGridRow;
-            return ((0, jsx_runtime_1.jsx)(RowComponent, Object.assign({}, {
-                as,
-                columns,
-                row,
-                style,
-                rowStyles,
-                stickyHeader,
-                stickyOffset,
-                isCollapsed,
-                toggleCollapsedId,
-                // TODO: How will this effect with memoization?
-                // At least for non-nested card tables, we make this undefined so it will be fine.
-                openCards: nestedCards ? nestedCards.currentOpenCards() : undefined,
-                ...sortProps,
-            }), `${row.kind}-${row.id}`));
+            return ((0, jsx_runtime_1.jsx)(exports.GridCollapseContext.Provider, Object.assign({ value: row.kind === "header" ? collapseAllContext : collapseRowContext }, { children: (0, jsx_runtime_1.jsx)(RowComponent, Object.assign({}, {
+                    as,
+                    columns,
+                    row,
+                    style,
+                    rowStyles,
+                    stickyHeader,
+                    stickyOffset,
+                    openCards: nestedCards ? nestedCards.currentOpenCards() : undefined,
+                    ...sortProps,
+                }), `${row.kind}-${row.id}`) }), void 0));
         }
         // Split out the header rows from the data rows so that we can put an `infoMessage` in between them (if needed).
         const headerRows = [];
@@ -184,7 +176,8 @@ function GridTable(props) {
         stickyHeader,
         stickyOffset,
         collapsedIds,
-        toggleCollapsedId,
+        collapseAllContext,
+        collapseRowContext,
         observeRows,
     ]);
     let tooManyClientSideRows = false;
@@ -418,7 +411,7 @@ function getFirstOrLastCellCss(style, columnIndex, columns) {
 }
 // We extract GridRow to its own mini-component primarily so we can React.memo'ize it.
 function GridRow(props) {
-    const { as, columns, row, style, rowStyles, stickyHeader, stickyOffset, sorting, sortState, setSortKey, isCollapsed, toggleCollapsedId, openCards, ...others } = props;
+    const { as, columns, row, style, rowStyles, stickyHeader, stickyOffset, sorting, sortState, setSortKey, openCards, ...others } = props;
     // We treat the "header" kind as special for "good defaults" styling
     const isHeader = row.kind === "header";
     const rowStyle = rowStyles === null || rowStyles === void 0 ? void 0 : rowStyles[row.kind];
@@ -438,10 +431,16 @@ function GridRow(props) {
         ...maybeApplyFunction(row, rowStyle === null || rowStyle === void 0 ? void 0 : rowStyle.rowCss),
     };
     const Row = as === "table" ? "tr" : "div";
-    const currentCard = openCards && openCards.length > 0 && openCards[openCards.length - 1];
+    const openCardStyles = typeof openCards === "string"
+        ? openCards
+            .split(":")
+            .map((openCardKind) => style.nestedCards.kinds[openCardKind])
+            .filter((style) => style)
+        : undefined;
+    const currentCard = openCardStyles && openCardStyles[openCardStyles.length - 1];
     let currentColspan = 1;
     const maybeStickyHeaderStyles = isHeader && stickyHeader ? Css_1.Css.sticky.top(stickyOffset).z1.$ : undefined;
-    const div = ((0, jsx_runtime_1.jsxs)(Row, Object.assign({ css: rowCss }, others, { children: [openCards && (0, nestedCards_1.maybeAddCardPadding)(openCards, "first", maybeStickyHeaderStyles), columns.map((column, columnIndex) => {
+    return ((0, jsx_runtime_1.jsxs)(Row, Object.assign({ css: rowCss }, others, { children: [openCardStyles && (0, nestedCards_1.maybeAddCardPadding)(openCardStyles, "first", maybeStickyHeaderStyles), columns.map((column, columnIndex) => {
                 var _a;
                 // Decrement colspan count and skip if greater than 1.
                 if (currentColspan > 1) {
@@ -491,15 +490,7 @@ function GridRow(props) {
                             ? rowClickRenderFn(as)
                             : defaultRenderFn(as);
                 return renderFn(columnIndex, cellCss, content, row, rowStyle);
-            }), openCards && (0, nestedCards_1.maybeAddCardPadding)(openCards, "final", maybeStickyHeaderStyles)] }), void 0));
-    // Because of useToggleIds, this provider should basically never trigger a re-render, which is
-    // good because we don't want the context to change and re-render every row just because some
-    // other unrelated rows have collapsed/uncollapsed.
-    const collapseContext = (0, react_1.useMemo)(() => ({
-        isCollapsed,
-        toggleCollapse: () => toggleCollapsedId(row.id),
-    }), [isCollapsed, toggleCollapsedId, row]);
-    return (0, jsx_runtime_1.jsx)(exports.GridCollapseContext.Provider, Object.assign({ value: collapseContext }, { children: div }), void 0);
+            }), openCardStyles && (0, nestedCards_1.maybeAddCardPadding)(openCardStyles, "final", maybeStickyHeaderStyles)] }), void 0));
 }
 // Fix to work with generics, see https://github.com/DefinitelyTyped/DefinitelyTyped/issues/37087#issuecomment-656596623
 const MemoizedGridRow = react_1.default.memo(GridRow);
@@ -553,8 +544,8 @@ 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({
-    isCollapsed: false,
-    toggleCollapse: () => { },
+    isCollapsed: (id) => false,
+    toggleCollapsed: (id) => { },
 });
 /** Sets up the `GridContext` so that header cells can access the current sort settings. */
 const headerRenderFn = (columns, column, sortState, setSortKey, as) => (key, css, content) => {
@@ -659,10 +650,15 @@ function useToggleIds(rows, persistCollapse) {
     const [collapsedIds] = (0, react_1.useState)(getCollapsedRows(persistCollapse));
     // Use this to trigger the component to re-render even though we're not calling `setList`
     const [tick, setTick] = (0, react_1.useState)("");
-    // Create the stable `toggleId`, i.e. we are purposefully passing an (almost) empty dep list
-    const toggleId = (0, react_1.useCallback)((id) => {
-        // We have different behavior when going from expand/collapse all.
-        if (id === "header") {
+    // Checking whether something is collapsed does not depend on anything
+    const isCollapsed = (0, react_1.useCallback)((id) => collapsedIds.includes(id), 
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    []);
+    const collapseAllContext = (0, react_1.useMemo)(() => {
+        // Create the stable `toggleCollapsed`, i.e. we are purposefully passing an (almost) empty dep list
+        // Since only toggling all rows required knowledge of what the rows are
+        const toggleAll = (_id) => {
+            // We have different behavior when going from expand/collapse all.
             const isAllCollapsed = collapsedIds[0] === "header";
             collapsedIds.splice(0, collapsedIds.length);
             if (isAllCollapsed) {
@@ -685,8 +681,20 @@ function useToggleIds(rows, persistCollapse) {
                 // And then mark all parent rows as collapsed.
                 collapsedIds.push(...parentIds);
             }
-        }
-        else {
+            if (persistCollapse) {
+                localStorage.setItem(persistCollapse, JSON.stringify(collapsedIds));
+            }
+            // Trigger a re-render
+            setTick(collapsedIds.join(","));
+        };
+        return { isCollapsed, toggleCollapsed: toggleAll };
+    }, 
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [rows]);
+    const collapseRowContext = (0, react_1.useMemo)(() => {
+        // Create the stable `toggleCollapsed`, i.e. we are purposefully passing an empty dep list
+        // Since toggling a single row does not need to know about the other rows
+        const toggleRow = (id) => {
             // This is the regular/non-header behavior to just add/remove the individual row id
             const i = collapsedIds.indexOf(id);
             if (i === -1) {
@@ -695,21 +703,22 @@ function useToggleIds(rows, persistCollapse) {
             else {
                 collapsedIds.splice(i, 1);
             }
-        }
-        if (persistCollapse) {
-            localStorage.setItem(persistCollapse, JSON.stringify(collapsedIds));
-        }
-        // Trigger a re-render
-        setTick(collapsedIds.join(","));
+            if (persistCollapse) {
+                localStorage.setItem(persistCollapse, JSON.stringify(collapsedIds));
+            }
+            // Trigger a re-render
+            setTick(collapsedIds.join(","));
+        };
+        return { isCollapsed, toggleCollapsed: toggleRow };
     }, 
     // eslint-disable-next-line react-hooks/exhaustive-deps
-    [rows]);
+    []);
     // 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).
     // eslint-disable-next-line react-hooks/exhaustive-deps
     const copy = (0, react_1.useMemo)(() => [...collapsedIds], [tick, collapsedIds]);
-    return [copy, toggleId];
+    return [copy, collapseAllContext, collapseRowContext];
 }
 /** GridTable as Table utility to apply <tr> element override styles */
 const tableRowStyles = (as, column) => {

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

@@ -1,5 +1,5 @@
 import { ReactElement } from "react";
-import { GridColumn, GridDataRow, GridStyle, Kinded, NestedCardStyle, RowTuple } from "./GridTable";
+import { GridColumn, GridDataRow, GridStyle, Kinded, NestedCardsStyle, NestedCardStyle, NestedCardStyleByKind, RowTuple } from "./GridTable";
 /**
  * A helper class to create our nested card DOM shenanigans.
  *
@@ -27,7 +27,7 @@ export declare class NestedCards {
     addSpacer(): void;
     done(): void;
     /** Return a stable copy of the cards, so it won't change as we keep going. */
-    currentOpenCards(): NestedCardStyle[];
+    currentOpenCards(): string;
 }
 /**
  * Draws the rounded corners (either open or close) for a new card.
@@ -42,7 +42,7 @@ export declare class NestedCards {
  * I.e. due to the flatness of our DOM, we inherently have to add a "close"
  * row separate from the card's actual content.
  */
-export declare function makeOpenOrCloseCard(openCards: NestedCardStyle[], kind: "open" | "close"): Chrome;
+export declare function makeOpenOrCloseCard(openCards: string[], cardStyles: NestedCardStyleByKind, kind: "open" | "close"): Chrome;
 /**
  * For the first or last cell of actual content, wrap them in divs that re-create the
  * outer cards' padding + background.
@@ -54,7 +54,7 @@ export declare function maybeAddCardPadding(openCards: NestedCardStyle[], column
  * Our height is not based on `openCards`, b/c for the top-most level, we won't
  * have any open cards, but still want a space between top-level cards.
  */
-export declare function makeSpacer(height: number, openCards: NestedCardStyle[]): Chrome;
+export declare function makeSpacer(height: number, openCards: string[], styles: NestedCardsStyle): Chrome;
 /**
  * Takes the current buffer of close row(s), spacers, and open row, and creates a single chrome DOM row.
  *

package/dist/components/Table/nestedCards.js

@@ -19,26 +19,26 @@ class NestedCards {
         const card = this.styles.kinds[row.kind];
         // If this kind doesn't have a card defined, don't put it on the card stack
         if (card) {
-            this.openCards.push(card);
-            this.chromeBuffer.push(makeOpenOrCloseCard(this.openCards, "open"));
+            this.openCards.push(row.kind);
+            this.chromeBuffer.push(makeOpenOrCloseCard(this.openCards, this.styles.kinds, "open"));
         }
         // But always close previous cards if needed
         maybeCreateChromeRow(this.columns, this.filteredRows, this.chromeBuffer);
         return !!card;
     }
     closeCard() {
-        this.chromeBuffer.push(makeOpenOrCloseCard(this.openCards, "close"));
+        this.chromeBuffer.push(makeOpenOrCloseCard(this.openCards, this.styles.kinds, "close"));
         this.openCards.pop();
     }
     addSpacer() {
-        this.chromeBuffer.push(makeSpacer(this.styles.spacerPx, this.openCards));
+        this.chromeBuffer.push(makeSpacer(this.styles.spacerPx, this.openCards, this.styles));
     }
     done() {
         maybeCreateChromeRow(this.columns, this.filteredRows, this.chromeBuffer);
     }
     /** Return a stable copy of the cards, so it won't change as we keep going. */
     currentOpenCards() {
-        return [...this.openCards];
+        return this.openCards.join(":");
     }
 }
 exports.NestedCards = NestedCards;
@@ -55,7 +55,7 @@ exports.NestedCards = NestedCards;
  * I.e. due to the flatness of our DOM, we inherently have to add a "close"
  * row separate from the card's actual content.
  */
-function makeOpenOrCloseCard(openCards, kind) {
+function makeOpenOrCloseCard(openCards, cardStyles, kind) {
     const scopeCards = [...openCards];
     return () => {
         let div = (0, jsx_runtime_1.jsx)("div", {}, void 0);
@@ -67,7 +67,10 @@ function makeOpenOrCloseCard(openCards, kind) {
         // | card1 | card2 / ... card3 ... \ card2 | card1 |
         // | card1 | card2 | ... card3 ... | card2 | card1 |
         //
-        [...scopeCards].reverse().forEach((card, i) => {
+        [...scopeCards]
+            .map((cardKind) => cardStyles[cardKind])
+            .reverse()
+            .forEach((card, i) => {
             const first = i === 0;
             div = ((0, jsx_runtime_1.jsx)("div", Object.assign({ css: {
                     ...Css_1.Css.bgColor(card.bgColor).pxPx(card.pxPx).$,
@@ -106,14 +109,17 @@ exports.maybeAddCardPadding = maybeAddCardPadding;
  * Our height is not based on `openCards`, b/c for the top-most level, we won't
  * have any open cards, but still want a space between top-level cards.
  */
-function makeSpacer(height, openCards) {
+function makeSpacer(height, openCards, styles) {
     const scopeCards = [...openCards];
     return () => {
         let div = (0, jsx_runtime_1.jsx)("div", { css: Css_1.Css.hPx(height).$ }, void 0);
         // Start at the current/inside card, and wrap outward padding + borders.
         // | card1 | card2 | ... card3 ... | card2 | card1 |
-        [...scopeCards].reverse().forEach((card) => {
-            div = (0, jsx_runtime_1.jsx)("div", Object.assign({ css: Css_1.Css.bgColor(card.bgColor).pxPx(card.pxPx).if(!!card.bColor).bc(card.bColor).bl.br.$ }, { children: div }), void 0);
+        [...scopeCards]
+            .map((cardKind) => styles.kinds[cardKind])
+            .reverse()
+            .forEach((card) => {
+            div = ((0, jsx_runtime_1.jsx)("div", Object.assign({ css: Css_1.Css.bgColor(card.bgColor).pxPx(card.pxPx).if(!!card.bColor).bc(card.bColor).bl.br.$ }, { children: div }), void 0));
         });
         return div;
     };

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.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) }), void 0));
+        }, onBlur: () => (0, utils_1.maybeCall)(onBlur), onFocus: () => (0, utils_1.maybeCall)(onFocus), disabled: !!props.disabled, readOnly: props.readOnly }), void 0));
 }
 exports.DateField = DateField;

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/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;

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.0",
+  "version": "2.94.0",
   "author": "Homebound",
   "license": "MIT",
   "main": "dist/index.js",