@homebound/beam 2.106.2 → 2.107.0

package/dist/components/Table/CollapseToggle.js

@@ -4,21 +4,18 @@ exports.CollapseToggle = void 0;
 const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
 const react_1 = require("react");
 const components_1 = require("..");
+const hooks_1 = require("../../hooks");
 function CollapseToggle(props) {
     const { row } = props;
-    const { isCollapsed, toggleCollapsed } = (0, react_1.useContext)(components_1.GridCollapseContext);
-    const [, setTick] = (0, react_1.useState)(0);
-    const currentlyCollapsed = isCollapsed(row.id);
-    const toggleOnClick = (0, react_1.useCallback)(() => {
-        toggleCollapsed(row.id);
-        setTick(Date.now());
-    }, [row.id, currentlyCollapsed, toggleCollapsed]);
-    const iconKey = currentlyCollapsed ? "chevronRight" : "chevronDown";
-    const headerIconKey = currentlyCollapsed ? "chevronsRight" : "chevronsDown";
+    const { rowState } = (0, react_1.useContext)(components_1.RowStateContext);
+    const isCollapsed = (0, hooks_1.useComputed)(() => rowState.isCollapsed(row.id), [rowState]);
+    const iconKey = isCollapsed ? "chevronRight" : "chevronDown";
+    const headerIconKey = isCollapsed ? "chevronsRight" : "chevronsDown";
+    // If we're not a header, only render a toggle if we have child rows to actually collapse
     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: toggleOnClick, icon: isHeader ? headerIconKey : iconKey }, void 0);
+    return (0, jsx_runtime_1.jsx)(components_1.IconButton, { onClick: () => rowState.toggleCollapsed(row.id), icon: isHeader ? headerIconKey : iconKey }, void 0);
 }
 exports.CollapseToggle = CollapseToggle;

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

@@ -1,4 +1,4 @@
-import React, { MutableRefObject, ReactElement, ReactNode } from "react";
+import { MutableRefObject, ReactElement, ReactNode } from "react";
 import { PresentationContextProps, PresentationFieldProps } from "../PresentationContext";
 import { GridRowLookup } from "./GridRowLookup";
 import { Margin, Only, Properties, Typography, Xss } from "../../Css";
@@ -176,6 +176,8 @@ export interface GridTableProps<R extends Kinded, S, X> {
 /** NOTE: This API is experimental and primarily intended for story and testing purposes */
 export declare type GridTableApi = {
     scrollToIndex: (index: number) => void;
+    /** Returns the ids of currently-selected rows. */
+    getSelectedRowIds(): string[];
 };
 /**
  * Renders data in our table layout.
@@ -298,24 +300,9 @@ 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;
-/**
- * Provides each row access to a method to check if it is collapsed and toggle it's collapsed state.
- *
- * Calling `toggleCollapse` will keep the row itself showing, but will hide any
- * children rows (specifically those that have this row's `id` in their `parentIds`
- * prop).
- *
- * headerCollapsed is used to trigger rows at the root level to rerender their chevron when all are
- * collapsed/expanded.
- */
-declare type GridCollapseContextProps = {
-    headerCollapsed: boolean;
-    isCollapsed: (id: string) => boolean;
-    toggleCollapsed(id: string): void;
-};
-export declare const GridCollapseContext: React.Context<GridCollapseContextProps>;
 export declare function matchesFilter(maybeContent: ReactNode | GridCellContent, filter: string): boolean;
 export {};

package/dist/components/Table/GridTable.js

@@ -22,9 +22,8 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.matchesFilter = exports.GridCollapseContext = 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.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 utils_1 = require("@react-aria/utils");
 const memoize_one_1 = __importDefault(require("memoize-one"));
 const mobx_react_1 = require("mobx-react");
 const react_1 = __importStar(require("react"));
@@ -32,15 +31,17 @@ const react_router_dom_1 = require("react-router-dom");
 const react_virtuoso_1 = require("react-virtuoso");
 const CssReset_1 = require("../CssReset");
 const PresentationContext_1 = require("../PresentationContext");
+const columnSizes_1 = require("./columnSizes");
 const GridRowLookup_1 = require("./GridRowLookup");
 const GridSortContext_1 = require("./GridSortContext");
 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 Css_1 = require("../../Css");
+const hooks_1 = require("../../hooks");
 const tinycolor2_1 = __importDefault(require("tinycolor2"));
-const use_debounce_1 = require("use-debounce");
 const _1 = require(".");
 exports.ASC = "ASC";
 exports.DESC = "DESC";
@@ -82,15 +83,19 @@ exports.setGridTableDefaults = setGridTableDefaults;
  * special styling to the row that uses `kind: "header"`.)
  */
 function GridTable(props) {
-    var _a, _b, _c, _d, _e;
+    var _a, _b, _c, _d;
     const { id = "gridTable", 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, resizeTarget, } = props;
-    const [collapsedIds, collapseAllContext, collapseRowContext] = useToggleIds(rows, persistCollapse);
+    // 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));
     // 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);
     if (api) {
         api.current = {
             scrollToIndex: (index) => virtuosoRef.current && virtuosoRef.current.scrollToIndex(index),
+            getSelectedRowIds: () => rowState.selectedIds,
         };
     }
     const [sortState, setSortKey] = (0, useSortState_1.useSortState)(columns, sorting);
@@ -101,37 +106,9 @@ function GridTable(props) {
         }
         return rows;
     }, [columns, rows, sorting, sortState]);
-    // Calculate the column sizes immediately rather than via the `debounce` method.
-    // We do this for Storybook integrations that may use MockDate. MockDate changes the behavior of `new Date()`, which is used by `useDebounce` and essentially turns off the callback.
-    const calculateImmediately = (0, react_1.useRef)(true);
-    const [tableWidth, setTableWidth] = (0, react_1.useState)();
-    // Calc our initial/first render sizes where we won't have a width yet
-    const [columnSizes, setColumnSizes] = (0, react_1.useState)(calcColumnSizes(columns, (_a = style.nestedCards) === null || _a === void 0 ? void 0 : _a.firstLastColumnWidth, tableWidth, style.minWidthPx));
-    const setTableAndColumnWidths = (0, react_1.useCallback)((width) => {
-        var _a;
-        setTableWidth(width);
-        setColumnSizes(calcColumnSizes(columns, (_a = style.nestedCards) === null || _a === void 0 ? void 0 : _a.firstLastColumnWidth, width, style.minWidthPx));
-    }, [setTableWidth, setColumnSizes, columns, style]);
-    const setTableAndColumnWidthsDebounced = (0, use_debounce_1.useDebouncedCallback)(setTableAndColumnWidths, 100);
-    const onResize = (0, react_1.useCallback)(() => {
-        const target = (resizeTarget === null || resizeTarget === void 0 ? void 0 : resizeTarget.current) ? resizeTarget.current : tableRef.current;
-        if (target && target.clientWidth !== tableWidth) {
-            if (calculateImmediately.current) {
-                calculateImmediately.current = false;
-                setTableAndColumnWidths(target.clientWidth);
-            }
-            else {
-                setTableAndColumnWidthsDebounced(target.clientWidth);
-            }
-        }
-    }, [
-        resizeTarget === null || resizeTarget === void 0 ? void 0 : resizeTarget.current,
-        tableRef.current,
-        setTableAndColumnWidths,
-        calculateImmediately,
-        setTableAndColumnWidthsDebounced,
-    ]);
-    (0, utils_1.useResizeObserver)({ ref: resizeTarget !== null && resizeTarget !== void 0 ? resizeTarget : tableRef, onResize });
+    const columnSizes = (0, columnSizes_1.useSetupColumnSizes)(style, columns, tableRef, resizeTarget);
+    // Make a single copy of our current collapsed state, so we'll have a single observer.
+    const collapsedIds = (0, hooks_1.useComputed)(() => rowState.collapsedIds, [rowState]);
     // Filter + flatten + component-ize the sorted rows.
     let [headerRows, filteredRows] = (0, react_1.useMemo)(() => {
         // Break up "foo bar" into `[foo, bar]` and a row must match both `foo` and `bar`
@@ -141,19 +118,19 @@ function GridTable(props) {
             // 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 };
             const RowComponent = observeRows ? ObservedGridRow : MemoizedGridRow;
-            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,
-                    columnSizes,
-                    level,
-                    ...sortProps,
-                }), void 0) }), `${row.kind}-${row.id}`));
+            return ((0, jsx_runtime_1.jsx)(RowComponent, Object.assign({}, {
+                as,
+                columns,
+                row,
+                style,
+                rowStyles,
+                stickyHeader,
+                stickyOffset,
+                openCards: nestedCards ? nestedCards.currentOpenCards() : undefined,
+                columnSizes,
+                level,
+                ...sortProps,
+            }), `${row.kind}-${row.id}`));
         }
         // Split out the header rows from the data rows so that we can put an `infoMessage` in between them (if needed).
         const headerRows = [];
@@ -166,8 +143,8 @@ function GridTable(props) {
             const matches = filters.length === 0 ||
                 row.pin ||
                 filters.every((filter) => columns.map((c) => applyRowFn(c, row)).some((maybeContent) => matchesFilter(maybeContent, filter)));
-            // Even if we don't pass the filter, one of our children might, so we continue on after this check
             let isCard = false;
+            // Even if we don't pass the filter, one of our children might, so we continue on after this check
             if (matches) {
                 isCard = nestedCards && nestedCards.maybeOpenCard(row);
                 filteredRows.push([row, makeRowComponent(row, level)]);
@@ -206,11 +183,9 @@ function GridTable(props) {
         sortState,
         stickyHeader,
         stickyOffset,
-        collapsedIds,
-        collapseAllContext,
-        collapseRowContext,
         observeRows,
         columnSizes,
+        collapsedIds,
     ]);
     let tooManyClientSideRows = false;
     if (filterMaxRows && filteredRows.length > filterMaxRows) {
@@ -228,8 +203,8 @@ function GridTable(props) {
     }, [filteredRows === null || filteredRows === void 0 ? void 0 : filteredRows.length, setRowCount]);
     const noData = filteredRows.length === 0;
     const firstRowMessage = (noData && fallbackMessage) || (tooManyClientSideRows && "Hiding some rows, use filter...") || infoMessage;
-    const borderless = (_b = style === null || style === void 0 ? void 0 : style.presentationSettings) === null || _b === void 0 ? void 0 : _b.borderless;
-    const typeScale = (_c = style === null || style === void 0 ? void 0 : style.presentationSettings) === null || _c === void 0 ? void 0 : _c.typeScale;
+    const borderless = (_a = style === null || style === void 0 ? void 0 : style.presentationSettings) === null || _a === void 0 ? void 0 : _a.borderless;
+    const typeScale = (_b = style === null || style === void 0 ? void 0 : style.presentationSettings) === null || _b === void 0 ? void 0 : _b.typeScale;
     const fieldProps = (0, react_1.useMemo)(() => ({
         hideLabel: true,
         numberAlignment: "right",
@@ -243,7 +218,8 @@ function GridTable(props) {
     // just trust the GridTable impl that, at runtime, `as=virtual` will (other than being virtualized)
     // behave semantically the same as `as=div` did for its tests.
     const _as = as === "virtual" && runningInJest ? "div" : as;
-    return ((0, jsx_runtime_1.jsx)(PresentationContext_1.PresentationProvider, Object.assign({ fieldProps: fieldProps, wrap: (_d = style === null || style === void 0 ? void 0 : style.presentationSettings) === null || _d === void 0 ? void 0 : _d.wrap }, { children: renders[_as](style, id, columns, headerRows, filteredRows, firstRowMessage, stickyHeader, (_e = style.nestedCards) === null || _e === void 0 ? void 0 : _e.firstLastColumnWidth, xss, virtuosoRef, tableRef) }), void 0));
+    const rowStateContext = (0, react_1.useMemo)(() => ({ rowState }), [rowState]);
+    return ((0, jsx_runtime_1.jsx)(RowState_1.RowStateContext.Provider, Object.assign({ value: rowStateContext }, { children: (0, jsx_runtime_1.jsx)(PresentationContext_1.PresentationProvider, Object.assign({ fieldProps: fieldProps, wrap: (_c = style === null || style === void 0 ? void 0 : style.presentationSettings) === null || _c === void 0 ? void 0 : _c.wrap }, { children: renders[_as](style, id, columns, headerRows, filteredRows, firstRowMessage, stickyHeader, (_d = style.nestedCards) === null || _d === void 0 ? void 0 : _d.firstLastColumnWidth, xss, virtuosoRef, tableRef) }), void 0) }), void 0));
 }
 exports.GridTable = GridTable;
 // Determine which HTML element to use to build the GridTable
@@ -494,7 +470,7 @@ function GridRow(props) {
             // Decrement colspan count and skip if greater than 1.
             if (currentColspan > 1) {
                 currentColspan -= 1;
-                return;
+                return null;
             }
             const maybeContent = applyRowFn(column, row);
             currentColspan = isGridCellContent(maybeContent) ? (_a = maybeContent.colspan) !== null && _a !== void 0 ? _a : 1 : 1;
@@ -624,11 +600,6 @@ const defaultRenderFn = (as) => (key, css, content) => {
     const Cell = as === "table" ? "td" : "div";
     return ((0, jsx_runtime_1.jsx)(Cell, Object.assign({ css: { ...css, ...tableRowStyles(as) } }, { children: content }), key));
 };
-exports.GridCollapseContext = react_1.default.createContext({
-    headerCollapsed: false,
-    isCollapsed: () => false,
-    toggleCollapsed: () => { },
-});
 /** Sets up the `GridContext` so that header cells can access the current sort settings. */
 const headerRenderFn = (columns, column, sortState, setSortKey, as) => (key, css, content) => {
     const [currentKey, direction] = sortState || [];
@@ -710,102 +681,8 @@ exports.matchesFilter = matchesFilter;
 function maybeDarken(color, defaultColor) {
     return color ? (0, tinycolor2_1.default)(color).darken(4).toString() : defaultColor;
 }
-// Get the rows that are already in the toggled state, so we can keep them toggled
-function getCollapsedRows(persistCollapse) {
-    if (!persistCollapse)
-        return [];
-    const collapsedGridRowIds = localStorage.getItem(persistCollapse);
-    return collapsedGridRowIds ? JSON.parse(collapsedGridRowIds) : [];
-}
-/**
- * A custom hook to manage a list of ids.
- *
- * What's special about this hook is that we manage a stable identity
- * for the `toggleId` function, so that rows that have _not_ toggled
- * themselves on/off will have an unchanged callback and so not be
- * re-rendered.
- *
- * That said, when they do trigger a `toggleId`, the stable/"stale" callback
- * function should see/update the latest list of values, which is not possible with a
- * traditional `useState` hook because it captures the original/stale list identity.
- */
-function useToggleIds(rows, persistCollapse) {
-    // Make a list that we will only mutate, so that our callbacks have a stable identity.
-    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)("");
-    // 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) {
-                // Expand all means keep `collapsedIds` empty
-            }
-            else {
-                // Otherwise push `header` on the list as a hint that we're in the collapsed-all state
-                collapsedIds.push("header");
-                // 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 = [...rows];
-                while (todo.length > 0) {
-                    const r = todo.pop();
-                    if (r.children) {
-                        parentIds.add(r.id);
-                        todo.push(...r.children);
-                    }
-                }
-                // And then mark all parent rows as collapsed.
-                collapsedIds.push(...parentIds);
-            }
-            if (persistCollapse) {
-                localStorage.setItem(persistCollapse, JSON.stringify(collapsedIds));
-            }
-            // Trigger a re-render
-            setTick(collapsedIds.join(","));
-        };
-        return { headerCollapsed: isCollapsed("header"), 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) {
-                collapsedIds.push(id);
-            }
-            else {
-                collapsedIds.splice(i, 1);
-            }
-            if (persistCollapse) {
-                localStorage.setItem(persistCollapse, JSON.stringify(collapsedIds));
-            }
-            // Trigger a re-render
-            setTick(collapsedIds.join(","));
-        };
-        return { headerCollapsed: isCollapsed("header"), isCollapsed, toggleCollapsed: toggleRow };
-    }, 
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [collapseAllContext.isCollapsed("header")]);
-    // Return a copy of the list, b/c we want external useMemos that do explicitly use the
-    // entire list as a dep to re-render whenever the list is changed (which they need to
-    // see as new list identity).
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    const copy = (0, react_1.useMemo)(() => [...collapsedIds], [tick, collapsedIds]);
-    return [copy, collapseAllContext, collapseRowContext];
-}
-/** GridTable as Table utility to apply <tr> element override styles */
-const tableRowStyles = (as, column) => {
+/** GridTable as Table utility to apply <tr> element override styles. */
+function tableRowStyles(as, column) {
     const thWidth = column === null || column === void 0 ? void 0 : column.w;
     return as === "table"
         ? {
@@ -813,4 +690,4 @@ const tableRowStyles = (as, column) => {
             ...(thWidth ? Css_1.Css.w(thWidth).$ : {}),
         }
         : {};
-};
+}

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

@@ -0,0 +1,38 @@
+import React, { MutableRefObject } from "react";
+import { GridDataRow } from "./GridTable";
+export declare type SelectedState = "checked" | "unchecked" | "partial";
+/**
+ * Stores the collapsed & selected state of rows.
+ *
+ * I.e. this implements "collapse parent" --> "hides children", and
+ * "select parent" --> "select parent + children".
+ *
+ * There should be a single, stable `RowStateStore` instance per `GridTable`, so
+ * that children don't have to re-render even as we incrementally add/remove rows
+ * to the table (i.e. the top-level rows identity changes, but each row within it
+ * may not).
+ *
+ * We use mobx ObservableSets/ObservableMaps to drive granular re-rendering of rows/cells
+ * that need to change their toggle/select on/off in response to parent/child
+ * changes.
+ */
+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;
+}
+/** Provides a context for rows to access their table's `RowState`. */
+export declare const RowStateContext: React.Context<{
+    rowState: RowState;
+}>;

package/dist/components/Table/RowState.js

@@ -0,0 +1,185 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.RowStateContext = exports.RowState = void 0;
+const mobx_1 = require("mobx");
+const react_1 = __importDefault(require("react"));
+/**
+ * Stores the collapsed & selected state of rows.
+ *
+ * I.e. this implements "collapse parent" --> "hides children", and
+ * "select parent" --> "select parent + children".
+ *
+ * There should be a single, stable `RowStateStore` instance per `GridTable`, so
+ * that children don't have to re-render even as we incrementally add/remove rows
+ * to the table (i.e. the top-level rows identity changes, but each row within it
+ * may not).
+ *
+ * We use mobx ObservableSets/ObservableMaps to drive granular re-rendering of rows/cells
+ * that need to change their toggle/select on/off in response to parent/child
+ * changes.
+ */
+class RowState {
+    /**
+     * 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");
+                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();
+            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()];
+    }
+    // Should be called in an Observer/useComputed to trigger re-renders
+    isCollapsed(id) {
+        return this.collapsedRows.has(id) || this.collapsedRows.has("header");
+    }
+    toggleCollapsed(id) {
+        const collapsedIds = [...this.collapsedRows.values()];
+        // We have different behavior when going from expand/collapse all.
+        if (id === "header") {
+            const isAllCollapsed = collapsedIds[0] === "header";
+            if (isAllCollapsed) {
+                // Expand all means keep `collapsedIds` empty
+                collapsedIds.splice(0, collapsedIds.length);
+            }
+            else {
+                // Otherwise push `header` on the list as a hint that we're in the collapsed-all state
+                collapsedIds.push("header");
+                // 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];
+                while (todo.length > 0) {
+                    const r = todo.pop();
+                    if (r.children) {
+                        parentIds.add(r.id);
+                        todo.push(...r.children);
+                    }
+                }
+                // And then mark all parent rows as collapsed.
+                collapsedIds.push(...parentIds);
+            }
+        }
+        else {
+            // This is the regular/non-header behavior to just add/remove the individual row id
+            const i = collapsedIds.indexOf(id);
+            if (i === -1) {
+                collapsedIds.push(id);
+            }
+            else {
+                collapsedIds.splice(i, 1);
+            }
+        }
+        this.collapsedRows.replace(collapsedIds);
+        if (this.persistCollapse) {
+            localStorage.setItem(this.persistCollapse, JSON.stringify(collapsedIds));
+        }
+    }
+}
+exports.RowState = RowState;
+/** Provides a context for rows to access their table's `RowState`. */
+exports.RowStateContext = react_1.default.createContext({
+    get rowState() {
+        throw new Error("No RowStateContext provider");
+    },
+});
+// Get the rows that are already in the toggled state, so we can keep them toggled
+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";
+}
+function visit(rows, fn) {
+    const todo = [...rows];
+    while (todo.length > 0) {
+        const row = todo.pop();
+        fn(row);
+        if (row.children) {
+            todo.push(...row.children);
+        }
+    }
+}

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

@@ -0,0 +1,22 @@
+import { MutableRefObject } from "react";
+import { GridColumn, GridStyle } from "./GridTable";
+/**
+ * Calculates an array of sizes for each of our columns.
+ *
+ * We originally supported CSS grid-template-column definitions which allowed fancier,
+ * dynamic/content-based widths, but have eventually dropped it mainly due to:
+ *
+ * 1. In virtual tables, a) the table never has all of the rows in DOM at a single time,
+ * so any "content-based" widths will change as you scroll the table, which is weird, and
+ * b) a sticky header and rows are put in different DOM parent elements by react-virtuoso,
+ * so wouldn't arrive at the same "content-based" widths.
+ *
+ * 2. Using CSS grid but still have a row-level div for hover/focus targeting required
+ * a "fake" `display: contents` div that couldn't have actually any styles applied to it.
+ *
+ * So we've just got with essentially fixed/deterministic widths, i.e. `px` or `percent` or
+ * `fr`.
+ *
+ * Disclaimer that we roll our own `fr` b/c we're not in CSS grid anymore.
+ */
+export declare function useSetupColumnSizes(style: GridStyle, columns: GridColumn<any>[], tableRef: MutableRefObject<HTMLElement | null>, resizeTarget: MutableRefObject<HTMLElement | null> | undefined): string[];

package/dist/components/Table/columnSizes.js

@@ -0,0 +1,59 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useSetupColumnSizes = void 0;
+const utils_1 = require("@react-aria/utils");
+const react_1 = require("react");
+const GridTable_1 = require("./GridTable");
+const use_debounce_1 = require("use-debounce");
+/**
+ * Calculates an array of sizes for each of our columns.
+ *
+ * We originally supported CSS grid-template-column definitions which allowed fancier,
+ * dynamic/content-based widths, but have eventually dropped it mainly due to:
+ *
+ * 1. In virtual tables, a) the table never has all of the rows in DOM at a single time,
+ * so any "content-based" widths will change as you scroll the table, which is weird, and
+ * b) a sticky header and rows are put in different DOM parent elements by react-virtuoso,
+ * so wouldn't arrive at the same "content-based" widths.
+ *
+ * 2. Using CSS grid but still have a row-level div for hover/focus targeting required
+ * a "fake" `display: contents` div that couldn't have actually any styles applied to it.
+ *
+ * So we've just got with essentially fixed/deterministic widths, i.e. `px` or `percent` or
+ * `fr`.
+ *
+ * Disclaimer that we roll our own `fr` b/c we're not in CSS grid anymore.
+ */
+function useSetupColumnSizes(style, columns, tableRef, resizeTarget) {
+    var _a, _b;
+    // Calculate the column sizes immediately rather than via the `debounce` method.
+    // We do this for Storybook integrations that may use MockDate. MockDate changes the behavior of `new Date()`,
+    // which is used internally by `useDebounce`, so the frozen clock means the callback is never called.
+    const calculateImmediately = (0, react_1.useRef)(true);
+    const [tableWidth, setTableWidth] = (0, react_1.useState)();
+    // Calc our initial/first render sizes where we won't have a width yet
+    const [columnSizes, setColumnSizes] = (0, react_1.useState)(
+    // TODO Add a useEffect to re-calc this on change
+    (0, GridTable_1.calcColumnSizes)(columns, (_a = style.nestedCards) === null || _a === void 0 ? void 0 : _a.firstLastColumnWidth, tableWidth, style.minWidthPx));
+    const setTableAndColumnWidths = (0, react_1.useCallback)((width) => {
+        var _a;
+        setTableWidth(width);
+        setColumnSizes((0, GridTable_1.calcColumnSizes)(columns, (_a = style.nestedCards) === null || _a === void 0 ? void 0 : _a.firstLastColumnWidth, width, style.minWidthPx));
+    }, [setTableWidth, setColumnSizes, columns, style]);
+    const setTableAndColumnWidthsDebounced = (0, use_debounce_1.useDebouncedCallback)(setTableAndColumnWidths, 100);
+    const target = (_b = resizeTarget === null || resizeTarget === void 0 ? void 0 : resizeTarget.current) !== null && _b !== void 0 ? _b : tableRef.current;
+    const onResize = (0, react_1.useCallback)(() => {
+        if (target && target.clientWidth !== tableWidth) {
+            if (calculateImmediately.current) {
+                calculateImmediately.current = false;
+                setTableAndColumnWidths(target.clientWidth);
+            }
+            else {
+                setTableAndColumnWidthsDebounced(target.clientWidth);
+            }
+        }
+    }, [target, tableWidth, setTableAndColumnWidths, setTableAndColumnWidthsDebounced]);
+    (0, utils_1.useResizeObserver)({ ref: resizeTarget !== null && resizeTarget !== void 0 ? resizeTarget : tableRef, onResize });
+    return columnSizes;
+}
+exports.useSetupColumnSizes = useSetupColumnSizes;

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

@@ -3,7 +3,8 @@ export * from "./columns";
 export type { GridRowLookup } from "./GridRowLookup";
 export { GridSortContext } from "./GridSortContext";
 export { ASC, DESC, GridTable, setDefaultStyle, setGridTableDefaults } from "./GridTable";
-export type { Direction, GridCellAlignment, GridCellContent, GridCollapseContext, GridColumn, GridDataRow, GridRowStyles, GridSortConfig, GridStyle, GridTableDefaults, GridTableProps, GridTableXss, Kinded, RowStyle, setRunningInJest, } 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 { simpleDataRows, simpleHeader, simpleRows } from "./simpleHelpers";
 export type { SimpleHeaderAndDataOf, SimpleHeaderAndDataWith } from "./simpleHelpers";
 export { SortHeader } from "./SortHeader";

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.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.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,9 @@ 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 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; } });
 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/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/inputs/RichTextField.js

@@ -25,7 +25,7 @@ require("trix/dist/trix.css");
 function RichTextField(props) {
     const { mergeTags, label, value = "", onChange, onBlur = utils_1.noop, onFocus = utils_1.noop, readOnly } = props;
     // We get a reference to the Editor instance after trix-init fires
-    const editor = (0, react_2.useRef)(undefined);
+    const [editor, setEditor] = (0, react_2.useState)();
     const editorElement = (0, react_2.useRef)();
     // Keep track of what we pass to onChange, so that we can make ourselves keep looking
     // like a controlled input, i.e. by only calling loadHTML if a new incoming `value` !== `currentHtml`,
@@ -48,12 +48,13 @@ function RichTextField(props) {
             const targetEl = e.target;
             if (targetEl.id === id) {
                 editorElement.current = targetEl;
-                editor.current = editorElement.current.editor;
+                const editor = editorElement.current.editor;
+                setEditor(editor);
                 if (mergeTags !== undefined) {
                     attachTributeJs(mergeTags, editorElement.current);
                 }
                 currentHtml.current = value;
-                editor.current.loadHTML(value || "");
+                editor.loadHTML(value || "");
                 // Remove listener once we've initialized
                 window.removeEventListener("trix-initialize", onEditorInit);
                 function trixChange(e) {
@@ -88,10 +89,10 @@ function RichTextField(props) {
     }, []);
     (0, react_2.useEffect)(() => {
         // If our value prop changes (without the change coming from us), reload it
-        if (!readOnly && editor.current && value !== currentHtml.current) {
-            editor.current.loadHTML(value || "");
+        if (!readOnly && editor && value !== currentHtml.current) {
+            editor.loadHTML(value || "");
         }
-    }, [value, readOnly]);
+    }, [value, readOnly, editor]);
     const { placeholder, autoFocus } = props;
     if (!readOnly) {
         return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ css: Css_1.Css.w100.maxw("550px").$ }, { children: [label && (0, jsx_runtime_1.jsx)(Label_1.Label, { labelProps: {}, label: label }, void 0), (0, jsx_runtime_1.jsxs)("div", Object.assign({ css: { ...Css_1.Css.br4.bgWhite.$, ...trixCssOverrides } }, { children: [(0, jsx_runtime_1.jsx)("input", { type: "hidden", id: `input-${id}`, value: value }, void 0), (0, react_2.createElement)("trix-editor", {

package/package.json

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