@homebound/beam 2.113.1 → 2.116.0

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

@@ -54,6 +54,8 @@ export interface GridStyle {
     levels?: Record<number, {
         cellCss: Properties;
     }>;
+    /** Allows for customization of the background color used to denote an "active" row */
+    activeBgColor?: Palette;
 }
 export declare type NestedCardStyleByKind = Record<string, NestedCardStyle>;
 export interface NestedCardsStyle {
@@ -67,6 +69,8 @@ export interface NestedCardsStyle {
      * Entries are optional, i.e. you can leave out kinds and they won't be wrapped/turned into cards.
      */
     kinds: NestedCardStyleByKind;
+    /** Allows for customization of the border color used to denote an "active" row */
+    activeBColor?: Palette;
 }
 /**
  * Styles for making cards nested within other cards.
@@ -172,6 +176,12 @@ export interface GridTableProps<R extends Kinded, S, X> {
     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>;
+    /**
+     * Defines which row in the table should be provided with an "active" styling.
+     * Expected format is `${row.kind}_${row.id}`. This helps avoid id conflicts between rows of different types/kinds that may have the same id.
+     * Example "data_123"
+     */
+    activeRowId?: string;
 }
 /** NOTE: This API is experimental and primarily intended for story and testing purposes */
 export declare type GridTableApi<R extends Kinded> = {
@@ -180,6 +190,8 @@ export declare type GridTableApi<R extends Kinded> = {
     getSelectedRowIds(): string[];
     /** Returns the currently-selected rows. */
     getSelectedRows(): GridDataRow<R>[];
+    /** Sets the internal state of 'activeRowId' */
+    setActiveRowId: (id: string | undefined) => void;
 };
 /**
  * Renders data in our table layout.
@@ -228,7 +240,7 @@ declare type GridRowKind<R extends Kinded, P extends R["kind"]> = DiscriminateUn
 export declare type GridColumn<R extends Kinded, S = {}> = {
     [K in R["kind"]]: string | GridCellContent | (DiscriminateUnion<R, "kind", K> extends {
         data: infer D;
-    } ? (data: D, row: GridRowKind<R, K>) => ReactNode | GridCellContent : (row: GridRowKind<R, K>) => ReactNode | GridCellContent);
+    } ? (data: D, row: GridRowKind<R, K>, api: GridTableApi<R>) => ReactNode | GridCellContent : (row: GridRowKind<R, K>, api: GridTableApi<R>) => ReactNode | GridCellContent);
 } & {
     /**
      * The column's width.
@@ -247,6 +259,8 @@ export declare type GridColumn<R extends Kinded, S = {}> = {
     serverSideSortKey?: S;
     /** Allows the column to stay in place when the user scrolls horizontally */
     sticky?: "left" | "right";
+    /** Prevent column from supporting RowStyle.onClick/rowLink in order to avoid nested interactivity. Defaults to true */
+    wrapAction?: false;
 };
 export declare const nonKindGridColumnKeys: string[];
 /** Allows rendering a specific cell. */
@@ -267,7 +281,7 @@ export interface RowStyle<R extends Kinded> {
     /** Whether the row should be a link. */
     rowLink?: (row: R) => string;
     /** Fired when the row is clicked, similar to rowLink but for actions that aren't 'go to this link'. */
-    onClick?: (row: GridDataRow<R>) => void;
+    onClick?: (row: GridDataRow<R>, api: GridTableApi<R>) => void;
 }
 export declare type GridCellAlignment = "left" | "right" | "center";
 /**
@@ -310,6 +324,6 @@ export declare type GridDataRow<R extends Kinded> = {
 } & IfAny<R, {}, DiscriminateUnion<R, "kind", R["kind"]>>;
 declare type IfAny<T, Y, N> = 0 extends 1 & T ? Y : N;
 /** Return the content for a given column def applied to a given row. */
-export declare function applyRowFn<R extends Kinded>(column: GridColumn<R>, row: GridDataRow<R>): ReactNode | GridCellContent;
+export declare function applyRowFn<R extends Kinded>(column: GridColumn<R>, row: GridDataRow<R>, api: MutableRefObject<GridTableApi<R>>): ReactNode | GridCellContent;
 export declare function matchesFilter(maybeContent: ReactNode | GridCellContent, filter: string): boolean;
 export {};

package/dist/components/Table/GridTable.js

@@ -85,30 +85,35 @@ exports.setGridTableDefaults = setGridTableDefaults;
  */
 function GridTable(props) {
     var _a, _b, _c, _d;
-    const { id = "gridTable", as = "div", columns, rows, style = defaults.style, rowStyles, stickyHeader = defaults.stickyHeader, stickyOffset = "0", xss, sorting, filter, filterMaxRows, fallbackMessage = "No rows found.", infoMessage, setRowCount, observeRows, persistCollapse, api, resizeTarget, } = props;
+    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: callerApi, resizeTarget, activeRowId, } = props;
     // Create a ref that always contains the latest rows, for our effectively-singleton RowState to use
     const rowsRef = (0, react_1.useRef)(rows);
     rowsRef.current = rows;
-    const [rowState] = (0, react_1.useState)(() => new RowState_1.RowState(rowsRef, persistCollapse));
+    const [rowState] = (0, react_1.useState)(() => new RowState_1.RowState(rowsRef, persistCollapse, activeRowId));
     // 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,
-            getSelectedRows() {
-                const ids = rowState.selectedIds;
-                const selected = [];
-                (0, visitor_1.visit)(rows, (row) => {
-                    if (ids.includes(row.id)) {
-                        selected.push(row);
-                    }
-                });
-                return selected;
-            },
-        };
+    const api = (0, react_1.useRef)({
+        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;
+        },
+        setActiveRowId: (id) => (rowState.activeRowId = id),
+    });
+    if (callerApi) {
+        callerApi.current = api.current;
     }
+    (0, react_1.useEffect)(() => {
+        rowState.activeRowId = activeRowId;
+    }, [activeRowId]);
     // We track render count at the table level, which seems odd (we should be able to track this
     // internally within each GridRow using a useRef), but we have suspicions that react-virtuoso
     // (or us) is resetting component state more than necessary, so we track render counts from
@@ -146,6 +151,7 @@ function GridTable(props) {
                 columnSizes,
                 level,
                 getCount,
+                api,
                 ...sortProps,
             }), `${row.kind}-${row.id}`));
         }
@@ -159,7 +165,7 @@ function GridTable(props) {
             var _a;
             const matches = filters.length === 0 ||
                 row.pin ||
-                filters.every((filter) => columns.map((c) => applyRowFn(c, row)).some((maybeContent) => matchesFilter(maybeContent, filter)));
+                filters.every((filter) => columns.map((c) => applyRowFn(c, row, api)).some((maybeContent) => matchesFilter(maybeContent, filter)));
             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) {
@@ -452,7 +458,9 @@ function getFirstOrLastCellCss(style, columnIndex, columns) {
 // We extract GridRow to its own mini-component primarily so we can React.memo'ize it.
 function GridRow(props) {
     var _a;
-    const { as, columns, row, style, rowStyles, stickyHeader, stickyOffset, sorting, sortState, setSortKey, openCards, columnSizes, level, getCount, ...others } = props;
+    const { as, columns, row, style, rowStyles, stickyHeader, stickyOffset, sorting, sortState, setSortKey, openCards, columnSizes, level, getCount, api, ...others } = props;
+    const { rowState } = (0, react_1.useContext)(RowState_1.RowStateContext);
+    const isActive = (0, hooks_1.useComputed)(() => rowState.activeRowId === `${row.kind}_${row.id}`, [row, rowState]);
     // We treat the "header" kind as special for "good defaults" styling
     const isHeader = row.kind === "header";
     const rowStyle = rowStyles === null || rowStyles === void 0 ? void 0 : rowStyles[row.kind];
@@ -474,11 +482,12 @@ function GridRow(props) {
         ...maybeApplyFunction(row, rowStyle === null || rowStyle === void 0 ? void 0 : rowStyle.rowCss),
         // Maybe add the sticky header styles
         ...(isHeader && stickyHeader ? Css_1.Css.sticky.top(stickyOffset).z2.$ : undefined),
-        ...(0, nestedCards_1.getNestedCardStyles)(row, openCardStyles, style),
+        ...(0, nestedCards_1.getNestedCardStyles)(row, openCardStyles, style, isActive),
     };
     let currentColspan = 1;
     const rowNode = ((0, jsx_runtime_1.jsx)(Row, Object.assign({ css: rowCss }, others, { "data-gridrow": true }, getCount(row.id), { children: columns.map((column, columnIndex) => {
-            var _a, _b, _c, _d;
+            var _a, _b, _c, _d, _e;
+            const { wrapAction = true } = column;
             if (column.mw) {
                 // Validate the column's minWidth definition if set.
                 if (!column.mw.endsWith("px") && !column.mw.endsWith("%")) {
@@ -490,7 +499,7 @@ function GridRow(props) {
                 currentColspan -= 1;
                 return null;
             }
-            const maybeContent = applyRowFn(column, row);
+            const maybeContent = applyRowFn(column, row, api);
             currentColspan = isGridCellContent(maybeContent) ? (_a = maybeContent.colspan) !== null && _a !== void 0 ? _a : 1 : 1;
             const canSortColumn = ((sorting === null || sorting === void 0 ? void 0 : sorting.on) === "client" && column.clientSideSort !== false) ||
                 ((sorting === null || sorting === void 0 ? void 0 : sorting.on) === "server" && !!column.serverSideSortKey);
@@ -547,6 +556,10 @@ function GridRow(props) {
                 ...(!isHeader && !!style.levels && ((_d = style.levels[level]) === null || _d === void 0 ? void 0 : _d.cellCss)),
                 // The specific cell's css (if any from GridCellContent)
                 ...rowStyleCellCss,
+                // Apply active row styling for non-nested card styles.
+                ...(style.nestedCards === undefined && isActive
+                    ? Css_1.Css.bgColor((_e = style.activeBgColor) !== null && _e !== void 0 ? _e : Css_1.Palette.LightBlue50).$
+                    : {}),
                 // Add any cell specific style overrides
                 ...(isGridCellContent(maybeContent) && maybeContent.typeScale ? Css_1.Css[maybeContent.typeScale].$ : {}),
                 // Define the width of the column on each cell. Supports col spans.
@@ -557,12 +570,12 @@ function GridRow(props) {
                 },
                 ...(column.mw ? Css_1.Css.mw(column.mw).$ : {}),
             };
-            const renderFn = (rowStyle === null || rowStyle === void 0 ? void 0 : rowStyle.renderCell) || (rowStyle === null || rowStyle === void 0 ? void 0 : rowStyle.rowLink)
+            const renderFn = ((rowStyle === null || rowStyle === void 0 ? void 0 : rowStyle.renderCell) || (rowStyle === null || rowStyle === void 0 ? void 0 : rowStyle.rowLink)) && wrapAction
                 ? rowLinkRenderFn(as)
                 : isHeader
                     ? headerRenderFn(columns, column, sortState, setSortKey, as)
-                    : (rowStyle === null || rowStyle === void 0 ? void 0 : rowStyle.onClick)
-                        ? rowClickRenderFn(as)
+                    : (rowStyle === null || rowStyle === void 0 ? void 0 : rowStyle.onClick) && wrapAction
+                        ? rowClickRenderFn(as, api)
                         : defaultRenderFn(as);
             return renderFn(columnIndex, cellCss, content, row, rowStyle);
         }) }), void 0));
@@ -619,16 +632,16 @@ function isContentEmpty(content) {
     return emptyValues.includes(content);
 }
 /** Return the content for a given column def applied to a given row. */
-function applyRowFn(column, row) {
+function applyRowFn(column, row, api) {
     // Usually this is a function to apply against the row, but sometimes it's a hard-coded value, i.e. for headers
     const maybeContent = column[row.kind];
     if (typeof maybeContent === "function") {
         if ("data" in row && "id" in row) {
             // Auto-destructure data
-            return maybeContent(row["data"], row["id"]);
+            return maybeContent(row["data"], row["id"], api.current);
         }
         else {
-            return maybeContent(row);
+            return maybeContent(row, api.current);
         }
     }
     else {
@@ -662,9 +675,9 @@ const rowLinkRenderFn = (as) => (key, css, content, row, rowStyle) => {
     return ((0, jsx_runtime_1.jsx)(react_router_dom_1.Link, Object.assign({ to: to, css: { ...Css_1.Css.noUnderline.color("unset").$, ...css }, className: CssReset_1.navLink }, { children: content }), key));
 };
 /** Renders a cell that will fire the RowStyle.onClick. */
-const rowClickRenderFn = (as) => (key, css, content, row, rowStyle) => {
+const rowClickRenderFn = (as, api) => (key, css, content, row, rowStyle) => {
     const Row = as === "table" ? "tr" : "div";
-    return ((0, jsx_runtime_1.jsx)(Row, Object.assign({}, { key }, { css: { ...css, ...tableRowStyles(as) }, onClick: () => rowStyle.onClick(row) }, { children: content }), void 0));
+    return ((0, jsx_runtime_1.jsx)(Row, Object.assign({}, { key }, { css: { ...css, ...tableRowStyles(as) }, onClick: () => rowStyle.onClick(row, api.current) }, { children: content }), void 0));
 };
 const alignmentToJustify = {
     left: "flex-start",

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

@@ -21,10 +21,11 @@ export declare class RowState {
     private persistCollapse;
     private readonly collapsedRows;
     private readonly selectedRows;
+    activeRowId: string | undefined;
     /**
      * Creates the `RowState` for a given `GridTable`.
      */
-    constructor(rows: MutableRefObject<GridDataRow<any>[]>, persistCollapse: string | undefined);
+    constructor(rows: MutableRefObject<GridDataRow<any>[]>, persistCollapse: string | undefined, activeRowId: string | undefined);
     get selectedIds(): string[];
     getSelected(id: string): SelectedState;
     selectRow(id: string, selected: boolean): void;

package/dist/components/Table/RowState.js

@@ -26,11 +26,12 @@ class RowState {
     /**
      * Creates the `RowState` for a given `GridTable`.
      */
-    constructor(rows, persistCollapse) {
+    constructor(rows, persistCollapse, activeRowId) {
         this.rows = rows;
         this.persistCollapse = persistCollapse;
         this.selectedRows = new mobx_1.ObservableMap();
         this.collapsedRows = new mobx_1.ObservableSet(persistCollapse ? readLocalCollapseState(persistCollapse) : []);
+        this.activeRowId = activeRowId;
         // 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

package/dist/components/Table/columns.js

@@ -41,6 +41,7 @@ function selectColumn(columnDef) {
         align: "center",
         // Defining `w: 48px` to accommodate for the `16px` wide checkbox and `16px` of padding on either side.
         w: "48px",
+        wrapAction: false,
         // Use any of the user's per-row kind methods if they have them.
         ...columnDef,
     };
@@ -63,6 +64,7 @@ function collapseColumn(columnDef) {
         align: "center",
         // Defining `w: 38px` based on the designs
         w: "38px",
+        wrapAction: false,
         ...columnDef,
     };
     return (0, index_1.newMethodMissingProxy)(base, (key) => {

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

@@ -77,7 +77,8 @@ export declare function makeOpenOrCloseCard(openCards: string[], cardStyles: Nes
  * <div parent> <div child> <div grandchild /> </div> </div>
  */
 export declare function wrapCard(openCards: NestedCardStyle[], row: JSX.Element): JSX.Element;
-export declare function getNestedCardStyles(row: GridDataRow<any>, openCardStyles: NestedCardStyle[] | undefined, style: GridStyle): {
+export declare function getNestedCardStyles(row: GridDataRow<any>, openCardStyles: NestedCardStyle[] | undefined, style: GridStyle, isActive: boolean): {
+    boxShadow?: import("csstype").Property.BoxShadow | undefined;
     paddingTop?: import("csstype").Property.PaddingTop<0 | (string & {})> | undefined;
     paddingBottom?: import("csstype").Property.PaddingBottom<0 | (string & {})> | undefined;
     borderRadius?: import("csstype").Property.BorderRadius<0 | (string & {})> | undefined;

package/dist/components/Table/nestedCards.js

@@ -143,15 +143,13 @@ exports.makeOpenOrCloseCard = makeOpenOrCloseCard;
 function wrapCard(openCards, row) {
     let div = row;
     [...openCards].reverse().forEach((card) => {
-        div = ((0, jsx_runtime_1.jsx)("div", Object.assign({ css: {
-                ...Css_1.Css.h100.pxPx(card.pxPx).bgColor(card.bgColor).if(!!card.bColor).bc(card.bColor).bl.br.$,
-            } }, { children: div }), void 0));
+        div = ((0, jsx_runtime_1.jsx)("div", Object.assign({ css: Css_1.Css.h100.pxPx(card.pxPx).bgColor(card.bgColor).if(!!card.bColor).bc(card.bColor).bl.br.$ }, { children: div }), void 0));
     });
     return div;
 }
 exports.wrapCard = wrapCard;
-function getNestedCardStyles(row, openCardStyles, style) {
-    var _a, _b, _c;
+function getNestedCardStyles(row, openCardStyles, style, isActive) {
+    var _a, _b, _c, _d, _e;
     const leafCardStyles = isLeafRow(row) ? (_a = style.nestedCards) === null || _a === void 0 ? void 0 : _a.kinds[row.kind] : undefined;
     // Calculate the horizontal space already allocated by the open cards (paddings and borders)
     const openCardWidth = openCardStyles ? openCardStyles.reduce((acc, o) => acc + o.pxPx + (o.bColor ? 1 : 0), 0) : 0;
@@ -167,11 +165,16 @@ function getNestedCardStyles(row, openCardStyles, style) {
                 // When it is not a leaf then it has chrome rows that create the top and bottom "padding" based on border-radius size. (brPx = "chrome" row height)
                 // When it is a leaf, then we need to apply the brPx to the row to ensure consistent spacing between leaf & non-leaf renders
                 // Additionally, if the leaf card has a border, then subtract the 1px border width from the padding to keep consistent with the "chrome" row
-                Css_1.Css.pyPx(leafCardStyles.brPx - (leafCardStyles.bColor ? 1 : 0))
-                    .borderRadius(`${leafCardStyles.brPx}px`)
-                    .bgColor(leafCardStyles.bgColor)
-                    .if(!!leafCardStyles.bColor)
-                    .bc(leafCardStyles.bColor).ba.$
+                {
+                    ...Css_1.Css.pyPx(leafCardStyles.brPx - (leafCardStyles.bColor ? 1 : 0))
+                        .borderRadius(`${leafCardStyles.brPx}px`)
+                        .bgColor(leafCardStyles.bgColor)
+                        .if(!!leafCardStyles.bColor)
+                        .bc(leafCardStyles.bColor).ba.$,
+                    ...(isActive
+                        ? Css_1.Css.boxShadow(`0px 0px 0px 2px rgba(254,254,254,1), 0px 0px 0px 4px ${(_e = (_d = style.nestedCards) === null || _d === void 0 ? void 0 : _d.activeBColor) !== null && _e !== void 0 ? _e : Css_1.Palette.LightBlue700}`).$
+                        : {}),
+                }
             : undefined),
     };
 }

package/dist/components/Table/sortRows.js

@@ -21,8 +21,8 @@ function sortBatch(columns, batch, sortState) {
     const invert = direction === "DESC";
     // Make a shallow copy for sorting to avoid mutating the original list
     return [...batch].sort((a, b) => {
-        const v1 = sortValue((0, GridTable_1.applyRowFn)(column, a));
-        const v2 = sortValue((0, GridTable_1.applyRowFn)(column, b));
+        const v1 = sortValue((0, GridTable_1.applyRowFn)(column, a, {}));
+        const v2 = sortValue((0, GridTable_1.applyRowFn)(column, b, {}));
         const v1e = v1 === null || v1 === undefined;
         const v2e = v2 === null || v2 === undefined;
         if (a.pin || b.pin) {

package/dist/components/Table/styles.js

@@ -13,7 +13,7 @@ exports.defaultStyle = {
     indentOneCss: Css_1.Css.pl4.$,
     indentTwoCss: Css_1.Css.pl7.$,
     headerCellCss: Css_1.Css.nowrap.py1.bgGray100.aife.$,
-    firstRowMessageCss: Css_1.Css.px1.py2.$,
+    firstRowMessageCss: Css_1.Css.tc.p3.$,
 };
 /** Tightens up the padding of rows, great for rows that have form elements in them. */
 exports.condensedStyle = {

package/dist/hooks/useComputed.js

@@ -7,33 +7,45 @@ const react_1 = require("react");
 function useComputed(fn, deps) {
     // We always return the useRef value, and use this just to trigger re-renders
     const [, setValue] = (0, react_1.useState)(0);
-    const autoRunner = (0, react_1.useRef)();
-    const autoRanValue = (0, react_1.useRef)();
+    const ref = (0, react_1.useRef)({
+        runner: undefined,
+        value: undefined,
+        hasRan: false,
+    });
+    // We use a `useMemo` b/c we want this to synchronously calc, so that even
+    // the very 1st render can use the result of our computed, i.e. instead of
+    // with `useEffect`, which would only get calc'd after the 1st render has
+    // already been done.
     (0, react_1.useMemo)(() => {
         let tick = 0;
+        const { current } = ref;
         // If deps has changed, unhook the previous observer
-        if (autoRunner.current) {
-            autoRunner.current();
+        if (current.runner) {
+            current.runner();
         }
-        autoRunner.current = (0, mobx_1.autorun)(() => {
+        current.runner = (0, mobx_1.autorun)(() => {
             // Always eval fn() (even on 1st render) to register our observable.
             const newValue = fn();
-            // We could eventually use a deep equals to handle objects
-            if (newValue === autoRanValue.current) {
-                return;
-            }
-            autoRanValue.current = newValue;
+            const oldValue = current.value;
+            current.value = newValue;
+            current.hasRan = true;
             // Only trigger a re-render if this is not the 1st autorun. Note
             // that if deps has changed, we're inherently in a re-render so also
             // don't need to trigger an additional re-render.
-            if (tick > 0) {
+            if (tick > 0 && newValue !== oldValue) {
                 setValue(tick);
             }
             tick++;
         });
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, deps);
+    // Occasionally autorun will not have run yet, in which case we have to just
+    // accept running the eval fn twice (here to get the value for the 1st render,
+    // and again for mobx to watch what observables we touch).
+    if (!ref.current.hasRan) {
+        ref.current.value = fn();
+    }
     // We can use `!` here b/c we know that `autorun` set current
-    return autoRanValue.current;
+    return ref.current.value;
 }
 exports.useComputed = useComputed;

package/package.json

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