@homebound/beam 2.118.4 → 2.120.0

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

@@ -1,6 +1,7 @@
 import { MutableRefObject, ReactElement, ReactNode } from "react";
 import { PresentationContextProps, PresentationFieldProps } from "../PresentationContext";
 import { GridRowLookup } from "./GridRowLookup";
+import { GridTableApi } from "./GridTableApi";
 import { Margin, Only, Palette, Properties, Typography, Xss } from "../../Css";
 export declare type Kinded = {
     kind: string;
@@ -173,8 +174,8 @@ export interface GridTableProps<R extends Kinded, S, X> {
      */
     persistCollapse?: string;
     xss?: X;
-    /** Experimental API allowing one to scroll to a table index. Primarily intended for stories at the moment */
-    api?: MutableRefObject<GridTableApi<R> | undefined>;
+    /** Accepts the api, from `useGridTableApi`, that the caller wants to use for this table. */
+    api?: GridTableApi<R>;
     /** Experimental, expecting to be removed - Specify the element in which the table should resize its columns against. If not set, the table will resize columns based on its owns container's width */
     resizeTarget?: MutableRefObject<HTMLElement | null>;
     /**
@@ -184,18 +185,6 @@ export interface GridTableProps<R extends Kinded, S, X> {
      */
     activeRowId?: string;
 }
-/** NOTE: This API is experimental and primarily intended for story and testing purposes */
-export declare type GridTableApi<R extends Kinded> = {
-    scrollToIndex: (index: number) => void;
-    /** Returns the ids of currently-selected rows. */
-    getSelectedRowIds(): string[];
-    getSelectedRowIds<K extends R["kind"]>(kind: K): string[];
-    /** Returns the currently-selected rows. */
-    getSelectedRows(): GridDataRow<R>[];
-    getSelectedRows<K extends R["kind"]>(kind: K): GridDataRow<DiscriminateUnion<R, "kind", K>>[];
-    /** Sets the internal state of 'activeRowId' */
-    setActiveRowId: (id: string | undefined) => void;
-};
 /**
  * Renders data in our table layout.
  *
@@ -327,6 +316,6 @@ export declare type GridDataRow<R extends Kinded> = {
 } & IfAny<R, {}, DiscriminateUnion<R, "kind", R["kind"]>>;
 declare type IfAny<T, Y, N> = 0 extends 1 & T ? Y : N;
 /** 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>, api: MutableRefObject<GridTableApi<R>>): ReactNode | GridCellContent;
+export declare function applyRowFn<R extends Kinded>(column: GridColumn<R>, row: GridDataRow<R>, api: GridTableApi<R>): ReactNode | GridCellContent;
 export declare function matchesFilter(maybeContent: ReactNode | GridCellContent, filter: string): boolean;
 export {};

package/dist/components/Table/GridTable.js

@@ -34,12 +34,12 @@ const PresentationContext_1 = require("../PresentationContext");
 const columnSizes_1 = require("./columnSizes");
 const GridRowLookup_1 = require("./GridRowLookup");
 const GridSortContext_1 = require("./GridSortContext");
+const GridTableApi_1 = require("./GridTableApi");
 const nestedCards_1 = require("./nestedCards");
 const RowState_1 = require("./RowState");
 const SortHeader_1 = require("./SortHeader");
 const sortRows_1 = require("./sortRows");
 const useSortState_1 = require("./useSortState");
-const visitor_1 = require("./visitor");
 const Css_1 = require("../../Css");
 const hooks_1 = require("../../hooks");
 const useRenderCount_1 = require("../../hooks/useRenderCount");
@@ -85,40 +85,19 @@ exports.setGridTableDefaults = setGridTableDefaults;
  */
 function GridTable(props) {
     var _a, _b, _c, _d;
-    const { id = "gridTable", as = "div", columns, rows, style = defaults.style, rowStyles, stickyHeader = defaults.stickyHeader, stickyOffset = "0", xss, filter, filterMaxRows, fallbackMessage = "No rows found.", infoMessage, setRowCount, observeRows, persistCollapse, api: callerApi, resizeTarget, activeRowId, } = props;
-    // Create a ref that always contains the latest rows, for our effectively-singleton RowState to use
-    const rowsRef = (0, react_1.useRef)(rows);
-    rowsRef.current = rows;
-    const [rowState] = (0, react_1.useState)(() => new RowState_1.RowState(rowsRef, persistCollapse, activeRowId));
+    const { id = "gridTable", as = "div", columns, rows, style = defaults.style, rowStyles, stickyHeader = defaults.stickyHeader, stickyOffset = "0", xss, filter, filterMaxRows, fallbackMessage = "No rows found.", infoMessage, setRowCount, observeRows, persistCollapse, resizeTarget, activeRowId, } = props;
     // We only use this in as=virtual mode, but keep this here for rowLookup to use
     const virtuosoRef = (0, react_1.useRef)(null);
     const tableRef = (0, react_1.useRef)(null);
-    const api = (0, react_1.useRef)({
-        scrollToIndex: (index) => virtuosoRef.current && virtuosoRef.current.scrollToIndex(index),
-        getSelectedRowIds(kind) {
-            if (kind === undefined) {
-                return rowState.selectedIds;
-            }
-            else {
-                return this.getSelectedRows(kind).map((row) => row.id);
-            }
-        },
-        // The any is not great, but getting the overload to handle the optional kind is annoying
-        getSelectedRows(kind) {
-            const ids = rowState.selectedIds;
-            const selected = [];
-            (0, visitor_1.visit)(rows, (row) => {
-                if (ids.includes(row.id) && (!kind || row.kind === kind)) {
-                    selected.push(row);
-                }
-            });
-            return selected;
-        },
-        setActiveRowId: (id) => (rowState.activeRowId = id),
-    });
-    if (callerApi) {
-        callerApi.current = api.current;
-    }
+    const api = (0, react_1.useMemo)(() => {
+        var _a;
+        const api = (_a = props.api) !== null && _a !== void 0 ? _a : new GridTableApi_1.GridTableApiImpl();
+        api.init(persistCollapse, virtuosoRef);
+        api.setActiveRowId(activeRowId);
+        return api;
+    }, [props.api]);
+    const { rowState } = api;
+    rowState.rows = rows;
     (0, react_1.useEffect)(() => {
         rowState.activeRowId = activeRowId;
     }, [rowState, activeRowId]);
@@ -664,10 +643,10 @@ function applyRowFn(column, row, api) {
     if (typeof maybeContent === "function") {
         if ("data" in row && "id" in row) {
             // Auto-destructure data
-            return maybeContent(row["data"], row["id"], api.current);
+            return maybeContent(row["data"], row["id"], api);
         }
         else {
-            return maybeContent(row, api.current);
+            return maybeContent(row, api);
         }
     }
     else {
@@ -703,7 +682,7 @@ const rowLinkRenderFn = (as) => (key, css, content, row, rowStyle) => {
 /** Renders a cell that will fire the RowStyle.onClick. */
 const rowClickRenderFn = (as, api) => (key, css, content, row, rowStyle) => {
     const Row = as === "table" ? "tr" : "div";
-    return ((0, jsx_runtime_1.jsx)(Row, Object.assign({}, { key }, { css: { ...css, ...tableRowStyles(as) }, onClick: () => rowStyle.onClick(row, api.current) }, { children: content }), void 0));
+    return ((0, jsx_runtime_1.jsx)(Row, Object.assign({}, { key }, { css: { ...css, ...tableRowStyles(as) }, onClick: () => rowStyle.onClick(row, api) }, { children: content }), void 0));
 };
 const alignmentToJustify = {
     left: "flex-start",

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

@@ -0,0 +1,43 @@
+import { MutableRefObject } from "react";
+import { VirtuosoHandle } from "react-virtuoso";
+import { DiscriminateUnion, GridDataRow, Kinded } from "./GridTable";
+import { RowState } from "./RowState";
+/**
+ * Creates an `api` handle to drive a `GridTable`.
+ *
+ * ```
+ * const api = useGridTableApi<Row>();
+ * const count = useComputed(() => api.getSelectedRows().length, [api]);
+ * ...
+ * return <GridTable api={api} />
+ * ```
+ *
+ * This is very similar to a `useRef`, except that the parent function has
+ * immediate access to `api` and can use it for `useComputed`, instead of
+ * having to wait for `ref.current` to be set after the child `GridTable`
+ * has ran.
+ */
+export declare function useGridTableApi<R extends Kinded>(): GridTableApi<R>;
+/** Provides an imperative API for an application page to interact with the table. */
+export declare type GridTableApi<R extends Kinded> = {
+    /** Scrolls row `index` into view; only supported with `as=virtual` and after a `useEffect`. */
+    scrollToIndex: (index: number) => void;
+    /** Returns the ids of currently-selected rows. */
+    getSelectedRowIds(): string[];
+    getSelectedRowIds<K extends R["kind"]>(kind: K): string[];
+    /** Returns the currently-selected rows. */
+    getSelectedRows(): GridDataRow<R>[];
+    getSelectedRows<K extends R["kind"]>(kind: K): GridDataRow<DiscriminateUnion<R, "kind", K>>[];
+    /** Sets the internal state of 'activeRowId' */
+    setActiveRowId: (id: string | undefined) => void;
+};
+export declare class GridTableApiImpl<R extends Kinded> implements GridTableApi<R> {
+    readonly rowState: RowState;
+    virtuosoRef: MutableRefObject<VirtuosoHandle | null>;
+    /** Called once by the GridTable when it takes ownership of this api instance. */
+    init(persistCollapse: string | undefined, virtuosoRef: MutableRefObject<VirtuosoHandle | null>): void;
+    scrollToIndex(index: number): void;
+    getSelectedRowIds(kind?: string): string[];
+    getSelectedRows(kind?: string): any;
+    setActiveRowId(id: string | undefined): void;
+}

package/dist/components/Table/GridTableApi.js

@@ -0,0 +1,66 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.GridTableApiImpl = exports.useGridTableApi = void 0;
+const react_1 = require("react");
+const RowState_1 = require("./RowState");
+const visitor_1 = require("./visitor");
+/**
+ * Creates an `api` handle to drive a `GridTable`.
+ *
+ * ```
+ * const api = useGridTableApi<Row>();
+ * const count = useComputed(() => api.getSelectedRows().length, [api]);
+ * ...
+ * return <GridTable api={api} />
+ * ```
+ *
+ * This is very similar to a `useRef`, except that the parent function has
+ * immediate access to `api` and can use it for `useComputed`, instead of
+ * having to wait for `ref.current` to be set after the child `GridTable`
+ * has ran.
+ */
+function useGridTableApi() {
+    return (0, react_1.useMemo)(() => new GridTableApiImpl(), []);
+}
+exports.useGridTableApi = useGridTableApi;
+// Using `FooImpl`to keep the public GridTableApi definition separate.
+class GridTableApiImpl {
+    constructor() {
+        // This is public to GridTable but not exported outside of Beam
+        this.rowState = new RowState_1.RowState();
+        this.virtuosoRef = { current: null };
+    }
+    /** Called once by the GridTable when it takes ownership of this api instance. */
+    init(persistCollapse, virtuosoRef) {
+        if (persistCollapse) {
+            this.rowState.loadPersistedCollapse(persistCollapse);
+        }
+        this.virtuosoRef = virtuosoRef;
+    }
+    scrollToIndex(index) {
+        this.virtuosoRef.current && this.virtuosoRef.current.scrollToIndex(index);
+    }
+    getSelectedRowIds(kind) {
+        if (kind === undefined) {
+            return this.rowState.selectedIds;
+        }
+        else {
+            return this.getSelectedRows(kind).map((row) => row.id);
+        }
+    }
+    // The any is not great, but getting the overload to handle the optional kind is annoying
+    getSelectedRows(kind) {
+        const ids = this.rowState.selectedIds;
+        const selected = [];
+        (0, visitor_1.visit)(this.rowState.rows, (row) => {
+            if (ids.includes(row.id) && (!kind || row.kind === kind)) {
+                selected.push(row);
+            }
+        });
+        return selected;
+    }
+    setActiveRowId(id) {
+        this.rowState.activeRowId = id;
+    }
+}
+exports.GridTableApiImpl = GridTableApiImpl;

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

@@ -1,4 +1,4 @@
-import React, { MutableRefObject } from "react";
+import React from "react";
 import { GridDataRow } from "./GridTable";
 export declare type SelectedState = "checked" | "unchecked" | "partial";
 /**
@@ -17,16 +17,17 @@ export declare type SelectedState = "checked" | "unchecked" | "partial";
  * changes.
  */
 export declare class RowState {
-    private rows;
-    private persistCollapse;
     private readonly collapsedRows;
+    private persistCollapse;
     private readonly selectedRows;
     private visibleRows;
+    rows: GridDataRow<any>[];
     activeRowId: string | undefined;
     /**
      * Creates the `RowState` for a given `GridTable`.
      */
-    constructor(rows: MutableRefObject<GridDataRow<any>[]>, persistCollapse: string | undefined, activeRowId: string | undefined);
+    constructor();
+    loadPersistedCollapse(persistCollapse: string): void;
     setVisibleRows(rowIds: string[]): void;
     get selectedIds(): string[];
     getSelected(id: string): SelectedState;

package/dist/components/Table/RowState.js

@@ -26,25 +26,31 @@ class RowState {
     /**
      * Creates the `RowState` for a given `GridTable`.
      */
-    constructor(rows, persistCollapse, activeRowId) {
-        this.rows = rows;
-        this.persistCollapse = persistCollapse;
+    constructor() {
+        // A set of just row ids, i.e. not row.kind+row.id
+        this.collapsedRows = new mobx_1.ObservableSet();
         this.selectedRows = new mobx_1.ObservableMap();
         // Set of just row ids. Keeps track of which rows are visible. Used to filter out non-visible rows from `selectedIds`
         this.visibleRows = new mobx_1.ObservableSet();
-        this.collapsedRows = new mobx_1.ObservableSet(persistCollapse ? readLocalCollapseState(persistCollapse) : []);
-        this.activeRowId = activeRowId;
+        // 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
         // Whenever our `visibleRows` change (i.e. via filtering) then we need to re-derive header and parent rows' selected state.
         (0, mobx_1.reaction)(() => [...this.visibleRows.values()].sort(), () => {
             const map = new Map();
-            map.set("header", deriveParentSelected(this.rows.current.flatMap((row) => this.setNestedSelectedStates(row, map))));
+            map.set("header", deriveParentSelected(this.rows.flatMap((row) => this.setNestedSelectedStates(row, map))));
             // Merge the changes back into the selected rows state
             this.selectedRows.merge(map);
         }, { equals: mobx_1.comparer.shallow });
     }
+    loadPersistedCollapse(persistCollapse) {
+        this.persistCollapse = persistCollapse;
+        this.collapsedRows.replace(readLocalCollapseState(persistCollapse));
+    }
     setVisibleRows(rowIds) {
         // ObservableSet doesn't seem to do a `diff` inside `replace` before firing
         // observers/reactions that watch it, which can lead to render loops with the
@@ -79,7 +85,7 @@ class RowState {
                 // Just mash the header + all rows + children as selected
                 const map = new Map();
                 map.set("header", "checked");
-                (0, visitor_1.visit)(this.rows.current, (row) => this.visibleRows.has(row.id) && map.set(row.id, "checked"));
+                (0, visitor_1.visit)(this.rows, (row) => this.visibleRows.has(row.id) && map.set(row.id, "checked"));
                 this.selectedRows.replace(map);
             }
             else {
@@ -91,7 +97,7 @@ class RowState {
             // This is the regular/non-header behavior to just add/remove the individual row id,
             // plus percolate the change down-to-child + up-to-parents.
             // Find the clicked on row
-            const curr = findRow(this.rows.current, id);
+            const curr = findRow(this.rows, id);
             if (!curr) {
                 return;
             }
@@ -105,7 +111,7 @@ class RowState {
                 }
             }
             // And do the header + top-level "children" as a final one-off
-            map.set("header", deriveParentSelected(this.getVisibleChildrenStates(this.rows.current, map)));
+            map.set("header", deriveParentSelected(this.getVisibleChildrenStates(this.rows, map)));
             this.selectedRows.merge(map);
         }
     }
@@ -131,7 +137,7 @@ class RowState {
                 // Find all non-leaf rows so that toggling "all collapsed" -> "all not collapsed" opens
                 // the parent rows of any level.
                 const parentIds = new Set();
-                const todo = [...this.rows.current];
+                const todo = [...this.rows];
                 while (todo.length > 0) {
                     const r = todo.pop();
                     if (r.children) {

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

@@ -4,6 +4,8 @@ export type { GridRowLookup } from "./GridRowLookup";
 export { GridSortContext } from "./GridSortContext";
 export { ASC, DESC, GridTable, setDefaultStyle, setGridTableDefaults } from "./GridTable";
 export type { Direction, GridCellAlignment, GridCellContent, GridColumn, GridDataRow, GridRowStyles, GridSortConfig, GridStyle, GridTableDefaults, GridTableProps, GridTableXss, Kinded, RowStyle, setRunningInJest, } from "./GridTable";
+export { useGridTableApi } from "./GridTableApi";
+export type { GridTableApi } from "./GridTableApi";
 export { RowState, RowStateContext } from "./RowState";
 export * from "./SelectToggle";
 export { simpleDataRows, simpleHeader, simpleRows } from "./simpleHelpers";

package/dist/components/Table/index.js

@@ -10,7 +10,7 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
     for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.defaultStyle = exports.condensedStyle = exports.cardStyle = exports.beamTotalsFlexibleStyle = exports.beamTotalsFixedStyle = exports.beamNestedFlexibleStyle = exports.beamNestedFixedStyle = exports.beamFlexibleStyle = exports.beamFixedStyle = exports.SortHeader = exports.simpleRows = exports.simpleHeader = exports.simpleDataRows = exports.RowStateContext = exports.RowState = exports.setGridTableDefaults = exports.setDefaultStyle = exports.GridTable = exports.DESC = exports.ASC = exports.GridSortContext = void 0;
+exports.defaultStyle = exports.condensedStyle = exports.cardStyle = exports.beamTotalsFlexibleStyle = exports.beamTotalsFixedStyle = exports.beamNestedFlexibleStyle = exports.beamNestedFixedStyle = exports.beamFlexibleStyle = exports.beamFixedStyle = exports.SortHeader = exports.simpleRows = exports.simpleHeader = exports.simpleDataRows = exports.RowStateContext = exports.RowState = exports.useGridTableApi = exports.setGridTableDefaults = exports.setDefaultStyle = exports.GridTable = exports.DESC = exports.ASC = exports.GridSortContext = void 0;
 __exportStar(require("./CollapseToggle"), exports);
 __exportStar(require("./columns"), exports);
 var GridSortContext_1 = require("./GridSortContext");
@@ -21,6 +21,8 @@ Object.defineProperty(exports, "DESC", { enumerable: true, get: function () { re
 Object.defineProperty(exports, "GridTable", { enumerable: true, get: function () { return GridTable_1.GridTable; } });
 Object.defineProperty(exports, "setDefaultStyle", { enumerable: true, get: function () { return GridTable_1.setDefaultStyle; } });
 Object.defineProperty(exports, "setGridTableDefaults", { enumerable: true, get: function () { return GridTable_1.setGridTableDefaults; } });
+var GridTableApi_1 = require("./GridTableApi");
+Object.defineProperty(exports, "useGridTableApi", { enumerable: true, get: function () { return GridTableApi_1.useGridTableApi; } });
 var RowState_1 = require("./RowState");
 Object.defineProperty(exports, "RowState", { enumerable: true, get: function () { return RowState_1.RowState; } });
 Object.defineProperty(exports, "RowStateContext", { enumerable: true, get: function () { return RowState_1.RowStateContext; } });

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