@homebound/beam 2.106.4 → 2.107.0

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

@@ -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,7 +300,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

@@ -95,6 +95,7 @@ function GridTable(props) {
     if (api) {
         api.current = {
             scrollToIndex: (index) => virtuosoRef.current && virtuosoRef.current.scrollToIndex(index),
+            getSelectedRowIds: () => rowState.selectedIds,
         };
     }
     const [sortState, setSortKey] = (0, useSortState_1.useSortState)(columns, sorting);

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,6 @@ 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";
 /**
  * Stores the collapsed & selected state of rows.
  *
@@ -25,19 +22,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");
+                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()];
     }
@@ -100,3 +152,34 @@ 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/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/package.json

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