@homebound/beam 2.107.0 → 2.108.0

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,15 +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.
@@ -244,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` */

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"));
@@ -96,6 +97,16 @@ function GridTable(props) {
         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);
@@ -417,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.js

@@ -6,6 +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"));
+const visitor_1 = require("./visitor");
 /**
  * Stores the collapsed & selected state of rows.
  *
@@ -56,7 +57,7 @@ class RowState {
                 // 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"));
+                (0, visitor_1.visit)(this.rows.current, (row) => map.set(row.id, "checked"));
                 this.selectedRows.replace(map);
             }
             else {
@@ -74,7 +75,7 @@ class RowState {
             }
             // Everything here & down is deterministically on/off
             const map = new Map();
-            visit([curr.row], (row) => map.set(row.id, selected ? "checked" : "unchecked"));
+            (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) {
@@ -173,13 +174,3 @@ function deriveParentSelected(children) {
     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/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/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.107.0",
+  "version": "2.108.0",
   "author": "Homebound",
   "license": "MIT",
   "main": "dist/index.js",