@homebound/beam 2.106.4 → 2.109.0

package/dist/components/Modal/Modal.d.ts

@@ -21,6 +21,8 @@ export interface ModalProps {
     onClose?: Callback;
     /** Imperative API for interacting with the Modal */
     api?: MutableRefObject<ModalApi | undefined>;
+    /** Adds a border for the header. */
+    drawHeaderBorder?: boolean;
 }
 export declare type ModalApi = {
     setSize: (size: ModalProps["size"]) => void;

package/dist/components/Modal/Modal.js

@@ -20,7 +20,7 @@ const utils_1 = require("../../utils");
  * Provides underlay, modal container, and header. Will disable scrolling of page under the modal.
  */
 function Modal(props) {
-    const { size = "md", content, forceScrolling, api } = props;
+    const { size = "md", content, forceScrolling, api, drawHeaderBorder = false } = props;
     const isFixedHeight = typeof size !== "string";
     const ref = (0, react_1.useRef)(null);
     const { modalBodyDiv, modalFooterDiv, modalHeaderDiv, drawerContentStack } = (0, BeamContext_1.useBeamContext)();
@@ -69,7 +69,7 @@ function Modal(props) {
                         .df.fdc.wPx(width)
                         .mh((0, Css_1.px)(defaultMinHeight))
                         .if(isFixedHeight)
-                        .hPx(height).$, ref: ref }, overlayProps, dialogProps, modalProps, testId, { children: [(0, jsx_runtime_1.jsxs)("header", Object.assign({ css: Css_1.Css.df.p3.fs0.$ }, { children: [(0, jsx_runtime_1.jsx)("h1", Object.assign({ css: Css_1.Css.fg1.xl2Em.gray900.$, ref: modalHeaderRef }, titleProps, testId.title), void 0), (0, jsx_runtime_1.jsx)("span", Object.assign({ css: Css_1.Css.fs0.pl1.$ }, { children: (0, jsx_runtime_1.jsx)(IconButton_1.IconButton, Object.assign({ icon: "x", onClick: closeModal }, testId.titleClose), void 0) }), void 0)] }), void 0), (0, jsx_runtime_1.jsxs)("main", Object.assign({ ref: contentRef, css: Css_1.Css.fg1.overflowYAuto.if(hasScroll).bb.bGray200.if(!!forceScrolling).overflowYScroll.$ }, { children: [content, (0, jsx_runtime_1.jsx)("div", { ref: modalBodyRef }, void 0)] }), void 0), (0, jsx_runtime_1.jsx)("footer", Object.assign({ css: Css_1.Css.fs0.$ }, { children: (0, jsx_runtime_1.jsx)("div", { ref: modalFooterRef }, void 0) }), void 0)] }), void 0) }), void 0) }), void 0) }, void 0));
+                        .hPx(height).$, ref: ref }, overlayProps, dialogProps, modalProps, testId, { children: [(0, jsx_runtime_1.jsxs)("header", Object.assign({ css: Css_1.Css.df.p3.fs0.if(drawHeaderBorder).bb.bGray200.$ }, { children: [(0, jsx_runtime_1.jsx)("h1", Object.assign({ css: Css_1.Css.fg1.xl2Em.gray900.$, ref: modalHeaderRef }, titleProps, testId.title), void 0), (0, jsx_runtime_1.jsx)("span", Object.assign({ css: Css_1.Css.fs0.pl1.$ }, { children: (0, jsx_runtime_1.jsx)(IconButton_1.IconButton, Object.assign({ icon: "x", onClick: closeModal }, testId.titleClose), void 0) }), void 0)] }), void 0), (0, jsx_runtime_1.jsxs)("main", Object.assign({ ref: contentRef, css: Css_1.Css.fg1.overflowYAuto.if(hasScroll).bb.bGray200.if(!!forceScrolling).overflowYScroll.$ }, { children: [content, (0, jsx_runtime_1.jsx)("div", { ref: modalBodyRef }, void 0)] }), void 0), (0, jsx_runtime_1.jsx)("footer", Object.assign({ css: Css_1.Css.fs0.$ }, { children: (0, jsx_runtime_1.jsx)("div", { ref: modalFooterRef }, void 0) }), void 0)] }), void 0) }), void 0) }), void 0) }, void 0));
 }
 exports.Modal = Modal;
 function ModalHeader({ children }) {

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

@@ -2,4 +2,5 @@ import { GridDataRow } from "..";
 export interface GridTableCollapseToggleProps {
     row: GridDataRow<any>;
 }
+/** Provides a chevron icons to collapse/un-collapse for parent/child tables. */
 export declare function CollapseToggle(props: GridTableCollapseToggleProps): import("@emotion/react/jsx-runtime").JSX.Element | null;

package/dist/components/Table/CollapseToggle.js

@@ -5,6 +5,7 @@ const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
 const react_1 = require("react");
 const components_1 = require("..");
 const hooks_1 = require("../../hooks");
+/** Provides a chevron icons to collapse/un-collapse for parent/child tables. */
 function CollapseToggle(props) {
     const { row } = props;
     const { rowState } = (0, react_1.useContext)(components_1.RowStateContext);

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

@@ -169,13 +169,17 @@ 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 | undefined>;
+    api?: MutableRefObject<GridTableApi<R> | undefined>;
     /** 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>;
 }
 /** NOTE: This API is experimental and primarily intended for story and testing purposes */
-export declare type GridTableApi = {
+export declare type GridTableApi<R extends Kinded> = {
     scrollToIndex: (index: number) => void;
+    /** Returns the ids of currently-selected rows. */
+    getSelectedRowIds(): string[];
+    /** Returns the currently-selected rows. */
+    getSelectedRows(): GridDataRow<R>[];
 };
 /**
  * Renders data in our table layout.
@@ -242,6 +246,7 @@ export declare type GridColumn<R extends Kinded, S = {}> = {
     /** This column's sort by value (if server-side sorting). */
     serverSideSortKey?: S;
 };
+export declare const nonKindGridColumnKeys: string[];
 /** Allows rendering a specific cell. */
 declare type RenderCellFn<R extends Kinded> = (idx: number, css: Properties, content: ReactNode, row: R, rowStyle: RowStyle<R> | undefined) => ReactNode;
 /** Defines row-specific styling for each given row `kind` in `R` */
@@ -298,7 +303,8 @@ export declare type GridDataRow<R extends Kinded> = {
     children?: GridDataRow<R>[];
     /** Whether to pin this sort to the first/last of its parent's children. */
     pin?: "first" | "last";
-} & DiscriminateUnion<R, "kind", R["kind"]>;
+} & 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>): ReactNode | GridCellContent;
 export declare function matchesFilter(maybeContent: ReactNode | GridCellContent, filter: string): boolean;

package/dist/components/Table/GridTable.js

@@ -22,7 +22,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.matchesFilter = exports.applyRowFn = exports.calcColumnSizes = exports.GridTable = exports.setGridTableDefaults = exports.setDefaultStyle = exports.setRunningInJest = exports.emptyCell = exports.DESC = exports.ASC = void 0;
+exports.matchesFilter = exports.applyRowFn = exports.nonKindGridColumnKeys = exports.calcColumnSizes = exports.GridTable = exports.setGridTableDefaults = exports.setDefaultStyle = exports.setRunningInJest = exports.emptyCell = exports.DESC = exports.ASC = void 0;
 const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
 const memoize_one_1 = __importDefault(require("memoize-one"));
 const mobx_react_1 = require("mobx-react");
@@ -39,6 +39,7 @@ 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 tinycolor2_1 = __importDefault(require("tinycolor2"));
@@ -95,6 +96,17 @@ function GridTable(props) {
     if (api) {
         api.current = {
             scrollToIndex: (index) => virtuosoRef.current && virtuosoRef.current.scrollToIndex(index),
+            getSelectedRowIds: () => rowState.selectedIds,
+            getSelectedRows() {
+                const ids = rowState.selectedIds;
+                const selected = [];
+                (0, visitor_1.visit)(rows, (row) => {
+                    if (ids.includes(row.id)) {
+                        selected.push(row);
+                    }
+                });
+                return selected;
+            },
         };
     }
     const [sortState, setSortKey] = (0, useSortState_1.useSortState)(columns, sorting);
@@ -416,6 +428,7 @@ function calcColumnSizes(columns, firstLastColumnWidth, tableWidth, tableMinWidt
     return !firstLastColumnWidth ? sizes : [`${firstLastColumnWidth}px`, ...sizes, `${firstLastColumnWidth}px`];
 }
 exports.calcColumnSizes = calcColumnSizes;
+exports.nonKindGridColumnKeys = ["w", "mw", "align", "clientSideSort", "serverSideSortKey"];
 function getIndentationCss(style, rowStyle, columnIndex, maybeContent) {
     // Look for cell-specific indent or row-specific indent (row-specific is only one the first column)
     const indent = (isGridCellContent(maybeContent) && maybeContent.indent) || (columnIndex === 0 && (rowStyle === null || rowStyle === void 0 ? void 0 : rowStyle.indent));

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

@@ -1,5 +1,6 @@
 import React, { MutableRefObject } from "react";
 import { GridDataRow } from "./GridTable";
+export declare type SelectedState = "checked" | "unchecked" | "partial";
 /**
  * Stores the collapsed & selected state of rows.
  *
@@ -19,10 +20,14 @@ export declare class RowState {
     private rows;
     private persistCollapse;
     private readonly collapsedRows;
+    private readonly selectedRows;
     /**
      * Creates the `RowState` for a given `GridTable`.
      */
     constructor(rows: MutableRefObject<GridDataRow<any>[]>, persistCollapse: string | undefined);
+    get selectedIds(): string[];
+    getSelected(id: string): SelectedState;
+    selectRow(id: string, selected: boolean): void;
     get collapsedIds(): string[];
     isCollapsed(id: string): boolean;
     toggleCollapsed(id: string): void;

package/dist/components/Table/RowState.js

@@ -6,9 +6,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.RowStateContext = exports.RowState = void 0;
 const mobx_1 = require("mobx");
 const react_1 = __importDefault(require("react"));
-// Will be used in the next PR...
-// A parent row can be partially selected when some children are selected/some aren't.
-// export type SelectedState = "checked" | "unchecked" | "partial";
+const visitor_1 = require("./visitor");
 /**
  * Stores the collapsed & selected state of rows.
  *
@@ -25,19 +23,74 @@ const react_1 = __importDefault(require("react"));
  * changes.
  */
 class RowState {
-    // Coming in future PR
-    // readonly selectedRows = new ObservableMap<string, "checked" | "unchecked" | "partial">();
     /**
      * Creates the `RowState` for a given `GridTable`.
      */
     constructor(rows, persistCollapse) {
         this.rows = rows;
         this.persistCollapse = persistCollapse;
+        this.selectedRows = new mobx_1.ObservableMap();
         this.collapsedRows = new mobx_1.ObservableSet(persistCollapse ? readLocalCollapseState(persistCollapse) : []);
         // 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
     }
+    get selectedIds() {
+        // Return only ids that are fully checked, i.e. not partial
+        const ids = [...this.selectedRows.entries()].filter(([, v]) => v === "checked").map(([k]) => k);
+        // Hide our header marker
+        const headerIndex = ids.indexOf("header");
+        if (headerIndex > -1) {
+            ids.splice(headerIndex, 1);
+        }
+        return ids;
+    }
+    // Should be called in an Observer/useComputed to trigger re-renders
+    getSelected(id) {
+        // We may not have every row in here, i.e. on 1st page load or after clicking here, so assume unchecked
+        return this.selectedRows.get(id) || "unchecked";
+    }
+    selectRow(id, selected) {
+        if (id === "header") {
+            // Select/unselect all has special behavior
+            if (selected) {
+                // 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) => map.set(row.id, "checked"));
+                this.selectedRows.replace(map);
+            }
+            else {
+                // Similarly "unmash" all rows + children.
+                this.selectedRows.clear();
+            }
+        }
+        else {
+            // 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);
+            if (!curr) {
+                return;
+            }
+            // Everything here & down is deterministically on/off
+            const map = new Map();
+            (0, visitor_1.visit)([curr.row], (row) => map.set(row.id, selected ? "checked" : "unchecked"));
+            // Now walk up the parents and see if they are now-all-checked/now-all-unchecked/some-of-each
+            for (const parent of [...curr.parents].reverse()) {
+                if (parent.children) {
+                    const children = parent.children.map((row) => map.get(row.id) || this.getSelected(row.id));
+                    map.set(parent.id, deriveParentSelected(children));
+                }
+            }
+            // And do the header + top-level "children" as a final one-off
+            const children = this.rows.current
+                .filter((row) => row.id !== "header")
+                .map((row) => map.get(row.id) || this.getSelected(row.id));
+            map.set("header", deriveParentSelected(children));
+            this.selectedRows.merge(map);
+        }
+    }
     get collapsedIds() {
         return [...this.collapsedRows.values()];
     }
@@ -100,3 +153,24 @@ function readLocalCollapseState(persistCollapse) {
     const collapsedGridRowIds = localStorage.getItem(persistCollapse);
     return collapsedGridRowIds ? JSON.parse(collapsedGridRowIds) : [];
 }
+/** Finds a row by id, and returns it + any parents. */
+function findRow(rows, id) {
+    // This is technically an array of "maybe FoundRow"
+    const todo = rows.map((row) => ({ row, parents: [] }));
+    while (todo.length > 0) {
+        const curr = todo.pop();
+        if (curr.row.id === id) {
+            return curr;
+        }
+        else if (curr.row.children) {
+            // Search our children and pass along us as the parent
+            todo.push(...curr.row.children.map((child) => ({ row: child, parents: [...curr.parents, curr.row] })));
+        }
+    }
+    return undefined;
+}
+function deriveParentSelected(children) {
+    const allChecked = children.every((child) => child === "checked");
+    const allUnchecked = children.every((child) => child === "unchecked");
+    return allChecked ? "checked" : allUnchecked ? "unchecked" : "partial";
+}

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

@@ -0,0 +1,4 @@
+/** Provides a checkbox to show/drive this row's selected state. */
+export declare function SelectToggle({ id }: {
+    id: string;
+}): import("@emotion/react/jsx-runtime").JSX.Element;

package/dist/components/Table/SelectToggle.js

@@ -0,0 +1,18 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SelectToggle = void 0;
+const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
+const react_1 = require("react");
+const RowState_1 = require("./RowState");
+const index_1 = require("../../hooks/index");
+const index_2 = require("../../inputs/index");
+/** Provides a checkbox to show/drive this row's selected state. */
+function SelectToggle({ id }) {
+    const { rowState } = (0, react_1.useContext)(RowState_1.RowStateContext);
+    const state = (0, index_1.useComputed)(() => rowState.getSelected(id), [rowState]);
+    const selected = state === "checked" ? true : state === "unchecked" ? false : "indeterminate";
+    return ((0, jsx_runtime_1.jsx)(index_2.Checkbox, { label: "Select", checkboxOnly: true, selected: selected, onChange: (selected) => {
+            rowState.selectRow(id, selected);
+        } }, void 0));
+}
+exports.SelectToggle = SelectToggle;

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

@@ -8,7 +8,19 @@ export declare function dateColumn<T extends Kinded, S = {}>(columnDef: GridColu
 export declare function numericColumn<T extends Kinded, S = {}>(columnDef: GridColumn<T, S>): GridColumn<T, S>;
 /** Provides default styling for a GridColumn representing an Action. */
 export declare function actionColumn<T extends Kinded, S = {}>(columnDef: GridColumn<T, S>): GridColumn<T, S>;
-/** Provides default styling for a GridColumn containing a checkbox. */
-export declare function selectColumn<T extends Kinded, S = {}>(columnDef: GridColumn<T, S>): GridColumn<T, S>;
-/** Provides default styling for a GridColumn containing the CollapseToggle component. */
-export declare function collapseColumn<T extends Kinded, S = {}>(columnDef: GridColumn<T, S>): GridColumn<T, S>;
+/**
+ * Provides default styling for a GridColumn containing a checkbox.
+ *
+ * We allow either no `columnDef` at all, or a partial column def (i.e. to say a Totals row should
+ * not have a `SelectToggle`, b/c we can provide the default behavior a `SelectToggle` for basically
+ * all rows.
+ */
+export declare function selectColumn<T extends Kinded, S = {}>(columnDef?: Partial<GridColumn<T, S>>): GridColumn<T, S>;
+/**
+ * Provides default styling for a GridColumn containing a collapse icon.
+ *
+ * We allow either no `columnDef` at all, or a partial column def (i.e. to say a Totals row should
+ * not have a `CollapseToggle`, b/c we can provide the default behavior a `CollapseToggle` for basically
+ * all rows.
+ */
+export declare function collapseColumn<T extends Kinded, S = {}>(columnDef?: Partial<GridColumn<T, S>>): GridColumn<T, S>;

package/dist/components/Table/columns.js

@@ -1,6 +1,11 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.collapseColumn = exports.selectColumn = exports.actionColumn = exports.numericColumn = exports.dateColumn = exports.column = void 0;
+const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
+const CollapseToggle_1 = require("./CollapseToggle");
+const GridTable_1 = require("./GridTable");
+const SelectToggle_1 = require("./SelectToggle");
+const index_1 = require("../../utils/index");
 /** Provides default styling for a GridColumn representing a Date. */
 function column(columnDef) {
     return { ...columnDef };
@@ -22,15 +27,50 @@ function actionColumn(columnDef) {
     return { clientSideSort: false, ...columnDef, align: "center" };
 }
 exports.actionColumn = actionColumn;
-/** Provides default styling for a GridColumn containing a checkbox. */
+/**
+ * Provides default styling for a GridColumn containing a checkbox.
+ *
+ * We allow either no `columnDef` at all, or a partial column def (i.e. to say a Totals row should
+ * not have a `SelectToggle`, b/c we can provide the default behavior a `SelectToggle` for basically
+ * all rows.
+ */
 function selectColumn(columnDef) {
-    // Defining `w: 48px` to accommodate for the `16px` wide checkbox and `16px` of padding on either side.
-    return { clientSideSort: false, ...columnDef, align: "center", w: "48px" };
+    const base = {
+        ...nonKindDefaults(),
+        clientSideSort: false,
+        align: "center",
+        // Defining `w: 48px` to accommodate for the `16px` wide checkbox and `16px` of padding on either side.
+        w: "48px",
+        // Use any of the user's per-row kind methods if they have them.
+        ...columnDef,
+    };
+    return (0, index_1.newMethodMissingProxy)(base, (key) => {
+        return (row) => ({ content: (0, jsx_runtime_1.jsx)(SelectToggle_1.SelectToggle, { id: row.id }, void 0) });
+    });
 }
 exports.selectColumn = selectColumn;
-/** Provides default styling for a GridColumn containing the CollapseToggle component. */
+/**
+ * Provides default styling for a GridColumn containing a collapse icon.
+ *
+ * We allow either no `columnDef` at all, or a partial column def (i.e. to say a Totals row should
+ * not have a `CollapseToggle`, b/c we can provide the default behavior a `CollapseToggle` for basically
+ * all rows.
+ */
 function collapseColumn(columnDef) {
-    // Defining `w: 38px` based on the designs
-    return { ...columnDef, clientSideSort: false, align: "center", w: "38px" };
+    const base = {
+        ...nonKindDefaults(),
+        clientSideSort: false,
+        align: "center",
+        // Defining `w: 38px` based on the designs
+        w: "38px",
+        ...columnDef,
+    };
+    return (0, index_1.newMethodMissingProxy)(base, (key) => {
+        return (row) => ({ content: (0, jsx_runtime_1.jsx)(CollapseToggle_1.CollapseToggle, { row: row }, void 0) });
+    });
 }
 exports.collapseColumn = collapseColumn;
+// Keep keys like `w` and `mw` from hitting the method missing proxy
+function nonKindDefaults() {
+    return Object.fromEntries(GridTable_1.nonKindGridColumnKeys.map((key) => [key, undefined]));
+}

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

@@ -5,6 +5,7 @@ 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 { RowState, RowStateContext } from "./RowState";
+export * from "./SelectToggle";
 export { simpleDataRows, simpleHeader, simpleRows } from "./simpleHelpers";
 export type { SimpleHeaderAndDataOf, SimpleHeaderAndDataWith } from "./simpleHelpers";
 export { SortHeader } from "./SortHeader";

package/dist/components/Table/index.js

@@ -24,6 +24,7 @@ Object.defineProperty(exports, "setGridTableDefaults", { enumerable: true, get:
 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; } });
+__exportStar(require("./SelectToggle"), exports);
 var simpleHelpers_1 = require("./simpleHelpers");
 Object.defineProperty(exports, "simpleDataRows", { enumerable: true, get: function () { return simpleHelpers_1.simpleDataRows; } });
 Object.defineProperty(exports, "simpleHeader", { enumerable: true, get: function () { return simpleHelpers_1.simpleHeader; } });

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

@@ -0,0 +1,2 @@
+import { GridDataRow } from "./GridTable";
+export declare function visit(rows: GridDataRow<any>[], fn: (row: GridDataRow<any>) => void): void;

package/dist/components/Table/visitor.js

@@ -0,0 +1,14 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.visit = void 0;
+function visit(rows, fn) {
+    const todo = [...rows];
+    while (todo.length > 0) {
+        const row = todo.pop();
+        fn(row);
+        if (row.children) {
+            todo.push(...row.children);
+        }
+    }
+}
+exports.visit = visit;

package/dist/forms/BoundCheckboxField.d.ts

@@ -1,6 +1,6 @@
 import { FieldState } from "@homebound/form-state";
 import { CheckboxProps } from "../inputs";
-export declare type BoundCheckboxFieldProps = Omit<CheckboxProps, "values" | "onChange" | "label"> & {
+export declare type BoundCheckboxFieldProps = Omit<CheckboxProps, "selected" | "onChange" | "label"> & {
     field: FieldState<any, boolean | null | undefined>;
     /** Make optional so that callers can override if they want to. */
     onChange?: (values: boolean) => void;

package/dist/inputs/Checkbox.d.ts

@@ -2,17 +2,12 @@ import { ReactNode } from "react";
 export interface CheckboxProps {
     label: string;
     checkboxOnly?: boolean;
+    selected: boolean | "indeterminate";
     /** Handler that is called when the element's selection state changes. */
     onChange: (selected: boolean) => void;
     /** Additional text displayed below label */
     description?: string;
     disabled?: boolean;
-    /**
-     * Indeterminism is presentational only.
-     * The indeterminate visual representation remains regardless of user interaction.
-     */
-    indeterminate?: boolean;
-    selected?: boolean;
     errorMsg?: string;
     helperText?: string | ReactNode;
     /** Callback fired when focus removes from the component */

package/dist/inputs/Checkbox.js

@@ -7,12 +7,14 @@ const react_aria_1 = require("react-aria");
 const react_stately_1 = require("react-stately");
 const CheckboxBase_1 = require("./CheckboxBase");
 function Checkbox(props) {
-    const { label, indeterminate: isIndeterminate = false, disabled: isDisabled = false, selected, ...otherProps } = props;
-    const ariaProps = { isSelected: selected, isDisabled, isIndeterminate, ...otherProps };
+    const { label, disabled: isDisabled = false, selected, ...otherProps } = props;
+    // Treat indeterminate as false so that clicking on indeterminate always goes --> true.
+    const isSelected = selected === true;
+    const isIndeterminate = selected === "indeterminate";
+    const ariaProps = { isSelected, isDisabled, isIndeterminate, ...otherProps };
     const checkboxProps = { ...ariaProps, "aria-label": label };
     const ref = (0, react_1.useRef)(null);
     const toggleState = (0, react_stately_1.useToggleState)(ariaProps);
-    const isSelected = toggleState.isSelected;
     const { inputProps } = (0, react_aria_1.useCheckbox)(checkboxProps, toggleState, ref);
     return ((0, jsx_runtime_1.jsx)(CheckboxBase_1.CheckboxBase, Object.assign({ ariaProps: ariaProps, isDisabled: isDisabled, isIndeterminate: isIndeterminate, isSelected: isSelected, inputProps: inputProps, label: label }, otherProps), void 0));
 }

package/dist/utils/useTestIds.d.ts

@@ -1,2 +1,4 @@
 export declare type TestIds = Record<string, object>;
 export declare function useTestIds(props: object, defaultPrefix?: string): Record<string, object>;
+/** Uses `object` for any keys that exist on it, otherwise calls `methodMissing` fn. */
+export declare function newMethodMissingProxy<T extends object, Y>(object: T, methodMissing: (key: string) => Y): T & Record<string, Y>;

package/dist/utils/useTestIds.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.useTestIds = void 0;
+exports.newMethodMissingProxy = exports.useTestIds = void 0;
 /**
  * Provides a way to easily generate `data-testid`s.
  *
@@ -59,3 +59,4 @@ function newMethodMissingProxy(object, methodMissing) {
         },
     });
 }
+exports.newMethodMissingProxy = newMethodMissingProxy;

package/package.json

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