@homebound/beam 2.177.1 → 2.178.0

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

@@ -169,8 +169,6 @@ export interface GridTableProps<R extends Kinded, S, X> {
     filterMaxRows?: number;
     /** Accepts the number of filtered rows (based on `filter`), for the caller to observe and display if they want. */
     setRowCount?: (rowCount: number) => void;
-    /** Sets the rows to be wrapped by mobx observers. */
-    observeRows?: boolean;
     /** A combination of CSS settings to set the static look & feel (vs. rowStyles which is per-row styling). */
     style?: GridStyle | GridStyleDef;
     /**
@@ -191,6 +189,11 @@ export interface GridTableProps<R extends Kinded, S, X> {
      * Example "data_123"
      */
     activeRowId?: string;
+    /**
+     * Defines which cell in the table should be provided with an "active" styling.
+     * Expected format is `${row.kind}_${row.id}_${column.name}`.
+     */
+    activeCellId?: string;
 }
 /**
  * Renders data in our table layout.
@@ -271,10 +274,12 @@ export declare type GridColumn<R extends Kinded, S = {}> = {
     wrapAction?: false;
     /** Used as a signal to defer adding the 'indent' styling */
     isAction?: true;
+    /** Column name that will be used to generate an unique identifier for every row cell */
+    name?: string;
 };
 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, classNames: string | undefined) => ReactNode;
+declare type RenderCellFn<R extends Kinded> = (idx: number, css: Properties, content: ReactNode, row: R, rowStyle: RowStyle<R> | undefined, classNames: string | undefined, onClick: (() => void) | undefined) => ReactNode;
 /** Defines row-specific styling for each given row `kind` in `R` */
 export declare type GridRowStyles<R extends Kinded> = {
     [P in R["kind"]]?: RowStyle<DiscriminateUnion<R, "kind", P>>;

package/dist/components/Table/GridTable.js

@@ -89,7 +89,7 @@ exports.setGridTableDefaults = setGridTableDefaults;
  */
 function GridTable(props) {
     var _a, _b, _c, _d;
-    const { id = "gridTable", as = "div", columns, rows, style: maybeStyle = defaults.style, rowStyles, stickyHeader = defaults.stickyHeader, stickyOffset = 0, xss, filter, filterMaxRows, fallbackMessage = "No rows found.", infoMessage, setRowCount, observeRows, persistCollapse, resizeTarget, activeRowId, } = props;
+    const { id = "gridTable", as = "div", columns, rows, style: maybeStyle = defaults.style, rowStyles, stickyHeader = defaults.stickyHeader, stickyOffset = 0, xss, filter, filterMaxRows, fallbackMessage = "No rows found.", infoMessage, setRowCount, persistCollapse, resizeTarget, activeRowId, activeCellId, } = props;
     // We only use this in as=virtual mode, but keep this here for rowLookup to use
     const virtuosoRef = (0, react_1.useRef)(null);
     // Use this ref to watch for changes in the GridTable's container and resize columns accordingly.
@@ -99,6 +99,7 @@ function GridTable(props) {
         const api = (_a = props.api) !== null && _a !== void 0 ? _a : new GridTableApi_1.GridTableApiImpl();
         api.init(persistCollapse, virtuosoRef, rows);
         api.setActiveRowId(activeRowId);
+        api.setActiveCellId(activeCellId);
         return api;
     }, [props.api]);
     const style = resolveStyles(maybeStyle);
@@ -107,6 +108,9 @@ function GridTable(props) {
     (0, react_1.useEffect)(() => {
         rowState.activeRowId = activeRowId;
     }, [rowState, activeRowId]);
+    (0, react_1.useEffect)(() => {
+        rowState.activeCellId = activeCellId;
+    }, [rowState, activeCellId]);
     // 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
@@ -130,8 +134,7 @@ function GridTable(props) {
             // We only pass sortState to header rows, b/c non-headers rows shouldn't have to re-render on sorting
             // changes, and so by not passing the sortProps, it means the data rows' React.memo will still cache them.
             const sortProps = row.kind === "header" ? { sortOn, sortState, setSortKey } : { sortOn };
-            const RowComponent = observeRows ? ObservedGridRow : MemoizedGridRow;
-            return ((0, jsx_runtime_1.jsx)(RowComponent, Object.assign({}, {
+            return ((0, jsx_runtime_1.jsx)(MemoizedGridRow, Object.assign({}, {
                 as,
                 columns,
                 row,
@@ -203,7 +206,6 @@ function GridTable(props) {
         sortState,
         stickyHeader,
         stickyOffset,
-        observeRows,
         columnSizes,
         collapsedIds,
         getCount,
@@ -265,7 +267,7 @@ function renderDiv(style, id, columns, headerRows, totalsRows, visibleDataRows,
               the + operator as an offset.
               Inspired by: https://stackoverflow.com/a/25005740/2551333
             */
-            ...(style.betweenRowsCss ? Css_1.Css.addIn(`& > div:nth-of-type(n+3) > *`, style.betweenRowsCss).$ : {}),
+            ...(style.betweenRowsCss ? Css_1.Css.addIn(`& > div:nth-of-type(n+${headerRows.length + totalsRows.length + 2}) > *`, style.betweenRowsCss).$ : {}),
             ...(style.firstNonHeaderRowCss ? Css_1.Css.addIn(`& > div:nth-of-type(2) > *`, style.firstNonHeaderRowCss).$ : {}),
             ...style.rootCss,
             ...(style.minWidthPx ? Css_1.Css.mwPx(style.minWidthPx).$ : {}),
@@ -478,7 +480,8 @@ function GridRow(props) {
     var _a;
     const { as, columns, row, style, rowStyles, stickyHeader, stickyOffset, sortOn, 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]);
+    const rowId = `${row.kind}_${row.id}`;
+    const isActive = (0, hooks_1.useComputed)(() => rowState.activeRowId === rowId, [rowId, rowState]);
     // We treat the "header" and "totals" kind as special for "good defaults" styling
     const isHeader = row.kind === "header";
     const isTotals = row.kind === "totals";
@@ -557,6 +560,9 @@ function GridRow(props) {
                         : {}),
                 }
                 : {};
+            const cellId = `${row.kind}_${row.id}_${column.name}`;
+            const applyCellHighlight = !!column.name && !isHeader && !isTotals;
+            const isCellActive = rowState.activeCellId === cellId;
             // Note that it seems expensive to calc a per-cell class name/CSS-in-JS output,
             // vs. setting global/table-wide CSS like `style.cellCss` on the root grid div with
             // a few descendent selectors. However, that approach means the root grid-applied
@@ -596,6 +602,8 @@ function GridRow(props) {
                 ...(isGridCellContent(maybeContent) && maybeContent.typeScale ? Css_1.Css[maybeContent.typeScale].$ : {}),
                 // And any cell specific css
                 ...(isGridCellContent(maybeContent) && maybeContent.css ? maybeContent.css : {}),
+                // Apply cell highlight styles to active cell and hover
+                ...Css_1.Css.if(applyCellHighlight && isCellActive).br4.boxShadow(`inset 0 0 0 1px ${Css_1.Palette.LightBlue700}`).$,
                 // Define the width of the column on each cell. Supports col spans.
                 ...{
                     width: `calc(${columnSizes
@@ -605,6 +613,7 @@ function GridRow(props) {
                 ...(column.mw ? Css_1.Css.mw(column.mw).$ : {}),
             };
             const cellClassNames = revealOnRowHover ? revealOnRowHoverClass : undefined;
+            const cellOnClick = applyCellHighlight ? () => api.setActiveCellId(cellId) : undefined;
             const renderFn = ((rowStyle === null || rowStyle === void 0 ? void 0 : rowStyle.renderCell) || (rowStyle === null || rowStyle === void 0 ? void 0 : rowStyle.rowLink)) && wrapAction
                 ? rowLinkRenderFn(as)
                 : isHeader
@@ -612,7 +621,7 @@ function GridRow(props) {
                     : (rowStyle === null || rowStyle === void 0 ? void 0 : rowStyle.onClick) && wrapAction
                         ? rowClickRenderFn(as, api)
                         : defaultRenderFn(as);
-            return renderFn(columnIndex, cellCss, content, row, rowStyle, cellClassNames);
+            return renderFn(columnIndex, cellCss, content, row, rowStyle, cellClassNames, cellOnClick);
         }) }), void 0));
     return openCardStyles && openCardStyles.length > 0 ? (0, nestedCards_1.wrapCard)(openCardStyles, rowNode) : rowNode;
 }
@@ -628,7 +637,7 @@ function GridRow(props) {
  * memoization is.
  */
 // Declared as a const + `as typeof GridRow` to work with generics, see https://github.com/DefinitelyTyped/DefinitelyTyped/issues/37087#issuecomment-656596623
-const MemoizedGridRow = react_1.default.memo(GridRow, (one, two) => {
+const MemoizedGridRow = react_1.default.memo((0, mobx_react_1.observer)(GridRow), (one, two) => {
     const { row: row1, ...others1 } = one;
     const { row: row2, ...others2 } = two;
     return (0, shallowEqual_1.shallowEqual)(row1, row2) && (0, shallowEqual_1.shallowEqual)(others1, others2);
@@ -703,9 +712,9 @@ function applyRowFn(column, row, api, level) {
 }
 exports.applyRowFn = applyRowFn;
 /** Renders our default cell element, i.e. if no row links and no custom renderCell are used. */
-const defaultRenderFn = (as) => (key, css, content, row, rowStyle, classNames) => {
+const defaultRenderFn = (as) => (key, css, content, row, rowStyle, classNames, onClick) => {
     const Cell = as === "table" ? "td" : "div";
-    return ((0, jsx_runtime_1.jsx)(Cell, Object.assign({ css: { ...css, ...tableRowStyles(as) }, className: classNames }, { children: content }), key));
+    return ((0, jsx_runtime_1.jsx)(Cell, Object.assign({ css: { ...css, ...tableRowStyles(as) }, className: classNames, onClick: onClick }, { children: content }), key));
 };
 /** Sets up the `GridContext` so that header cells can access the current sort settings. */
 const headerRenderFn = (columns, column, sortState, setSortKey, as) => (key, css, content, row, rowStyle, classNames) => {
@@ -728,9 +737,12 @@ const rowLinkRenderFn = (as) => (key, css, content, row, rowStyle, classNames) =
     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} ${classNames}` }, { children: content }), key));
 };
 /** Renders a cell that will fire the RowStyle.onClick. */
-const rowClickRenderFn = (as, api) => (key, css, content, row, rowStyle, classNames) => {
+const rowClickRenderFn = (as, api) => (key, css, content, row, rowStyle, classNames, onClick) => {
     const Row = as === "table" ? "tr" : "div";
-    return ((0, jsx_runtime_1.jsx)(Row, Object.assign({}, { key }, { css: { ...css, ...tableRowStyles(as) }, className: classNames, onClick: () => rowStyle.onClick(row, api) }, { children: content }), void 0));
+    return ((0, jsx_runtime_1.jsx)(Row, Object.assign({}, { key }, { css: { ...css, ...tableRowStyles(as) }, className: classNames, onClick: (e) => {
+            rowStyle.onClick(row, api);
+            onClick && onClick();
+        } }, { children: content }), void 0));
 };
 const alignmentToJustify = {
     left: "flex-start",
@@ -796,7 +808,7 @@ function tableRowStyles(as, column) {
         : {};
 }
 function resolveStyles(style) {
-    const defKeys = ["inlineEditing", "grouped", "rowHeight"];
+    const defKeys = ["inlineEditing", "grouped", "rowHeight", "cellHighlight"];
     const keys = (0, utils_1.safeKeys)(style);
     if (keys.length === 0 || keys.some((k) => defKeys.includes(k))) {
         return (0, styles_1.getTableStyles)(style);

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

@@ -32,6 +32,8 @@ export declare type GridTableApi<R extends Kinded> = {
     clearSelections(): void;
     /** Sets the internal state of 'activeRowId' */
     setActiveRowId: (id: string | undefined) => void;
+    /** Sets the internal state of 'activeCellId' */
+    setActiveCellId: (id: string | undefined) => void;
     /** Set selected state of a row by id */
     selectRow: (id: string, selected?: boolean) => void;
 };
@@ -45,5 +47,6 @@ export declare class GridTableApiImpl<R extends Kinded> implements GridTableApi<
     getSelectedRows(kind?: string): any;
     clearSelections(id?: string): void;
     setActiveRowId(id: string | undefined): void;
+    setActiveCellId(id: string | undefined): void;
     selectRow(id: string, selected?: boolean): void;
 }

package/dist/components/Table/GridTableApi.js

@@ -59,6 +59,9 @@ class GridTableApiImpl {
     setActiveRowId(id) {
         this.rowState.activeRowId = id;
     }
+    setActiveCellId(id) {
+        this.rowState.activeCellId = id;
+    }
     selectRow(id, selected = true) {
         this.rowState.selectRow(id, selected);
     }

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

@@ -23,6 +23,7 @@ export declare class RowState {
     private matchedRows;
     rows: GridDataRow<any>[];
     activeRowId: string | undefined;
+    activeCellId: string | undefined;
     /**
      * Creates the `RowState` for a given `GridTable`.
      */

package/dist/components/Table/RowState.js

@@ -36,6 +36,8 @@ class RowState {
         this.rows = [];
         // Keeps track of the 'active' row, formatted `${row.kind}_${row.id}`
         this.activeRowId = undefined;
+        // Keeps track of the 'active' cell, formatted `${row.kind}_${row.id}_${column.name}`
+        this.activeCellId = undefined;
         // 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, 

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

@@ -9,5 +9,7 @@ export interface GridStyleDef {
     inlineEditing?: boolean;
     grouped?: boolean;
     rowHeight?: "fixed" | "flexible";
+    /** Enables cells Highlight and hover */
+    cellHighlight?: boolean;
 }
 export declare const getTableStyles: (props?: GridStyleDef | undefined) => GridStyle;

package/dist/components/Table/styles.js

@@ -44,7 +44,7 @@ exports.cardStyle = {
 function memoizedTableStyles() {
     const cache = {};
     return (props) => {
-        const { inlineEditing = false, grouped = false, rowHeight = "flexible" } = props || {};
+        const { inlineEditing = false, grouped = false, rowHeight = "flexible", cellHighlight } = props || {};
         const key = `${inlineEditing}|${grouped}|${rowHeight}`;
         if (!cache[key]) {
             const groupedLevels = {
@@ -63,6 +63,7 @@ function memoizedTableStyles() {
                 cellCss: {
                     ...Css_1.Css.gray900.xs.bgWhite.aic.pxPx(12).boxShadow(`inset 0 -1px 0 ${Css_1.Palette.Gray200}`).$,
                     ...(rowHeight === "flexible" ? Css_1.Css.pyPx(12).$ : Css_1.Css.nowrap.hPx(inlineEditing ? 48 : 36).$),
+                    ...(cellHighlight ? { "&:hover": Css_1.Css.bgGray100.$ } : {})
                 },
                 presentationSettings: { borderless: true, typeScale: "xs", wrap: rowHeight === "flexible" },
                 levels: grouped ? groupedLevels : defaultLevels,

package/dist/components/index.d.ts

@@ -27,7 +27,7 @@ export * from "./Stepper";
 export type { Step, StepperProps } from "./Stepper";
 export * from "./SuperDrawer";
 export * from "./Table";
-export { TabContent, Tabs, TabsWithContent } from "./Tabs";
+export { TabActions, TabContent, Tabs, TabsWithContent } from "./Tabs";
 export type { RouteTab, RouteTabWithContent, Tab, TabWithContent } from "./Tabs";
 export * from "./Tag";
 export * from "./Tooltip";

package/dist/components/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.TabsWithContent = exports.Tabs = exports.TabContent = exports.PresentationProvider = exports.NavLink = exports.BeamProvider = void 0;
+exports.TabsWithContent = exports.Tabs = exports.TabContent = exports.TabActions = exports.PresentationProvider = exports.NavLink = exports.BeamProvider = void 0;
 __exportStar(require("./Chip"), exports);
 __exportStar(require("./Chips"), exports);
 __exportStar(require("./Table/GridTable"), exports);
@@ -43,6 +43,7 @@ __exportStar(require("./Stepper"), exports);
 __exportStar(require("./SuperDrawer"), exports);
 __exportStar(require("./Table"), exports);
 var Tabs_1 = require("./Tabs");
+Object.defineProperty(exports, "TabActions", { enumerable: true, get: function () { return Tabs_1.TabActions; } });
 Object.defineProperty(exports, "TabContent", { enumerable: true, get: function () { return Tabs_1.TabContent; } });
 Object.defineProperty(exports, "Tabs", { enumerable: true, get: function () { return Tabs_1.Tabs; } });
 Object.defineProperty(exports, "TabsWithContent", { enumerable: true, get: function () { return Tabs_1.TabsWithContent; } });

package/dist/forms/FormStateApp.js

@@ -56,7 +56,7 @@ function FormStateApp() {
         { value: "a:4", label: "Iguana" },
         { value: "a:5", label: "Turtle" },
     ];
-    return ((0, jsx_runtime_1.jsx)(mobx_react_1.Observer, { children: () => ((0, jsx_runtime_1.jsxs)("div", Object.assign({ css: Css_1.Css.df.$ }, { children: [(0, jsx_runtime_1.jsxs)("header", Object.assign({ css: Css_1.Css.wPx(700).$ }, { children: [(0, jsx_runtime_1.jsxs)(FormLines_1.FormLines, Object.assign({ labelSuffix: { required: "*", optional: "(Opt)" } }, { children: [(0, jsx_runtime_1.jsx)("b", { children: "Author" }, void 0), (0, jsx_runtime_1.jsx)(forms_1.BoundTextField, { field: formState.firstName }, void 0), (0, jsx_runtime_1.jsx)(forms_1.BoundTextField, { field: formState.middleInitial }, void 0), (0, jsx_runtime_1.jsx)(forms_1.BoundTextField, { field: formState.lastName }, void 0), (0, jsx_runtime_1.jsx)(forms_1.BoundDateField, { field: formState.birthday }, void 0), (0, jsx_runtime_1.jsxs)(forms_1.FieldGroup, { children: [(0, jsx_runtime_1.jsx)(forms_1.StaticField, { label: "Revenue", value: "$500" }, void 0), (0, jsx_runtime_1.jsx)(forms_1.StaticField, Object.assign({ label: "Website" }, { children: (0, jsx_runtime_1.jsx)("a", Object.assign({ href: "https://google.com" }, { children: "google.com" }), void 0) }), void 0)] }, void 0), (0, jsx_runtime_1.jsx)(forms_1.BoundNumberField, { field: formState.heightInInches }, void 0), (0, jsx_runtime_1.jsx)(forms_1.FormDivider, {}, void 0), (0, jsx_runtime_1.jsx)(forms_1.BoundSelectField, { field: formState.favoriteSport, options: sports }, void 0), (0, jsx_runtime_1.jsx)(forms_1.BoundMultiSelectField, { field: formState.favoriteShapes, options: shapes }, void 0), (0, jsx_runtime_1.jsx)(BoundCheckboxGroupField_1.BoundCheckboxGroupField, { field: formState.favoriteColors, options: colors }, void 0), (0, jsx_runtime_1.jsx)(forms_1.BoundToggleChipGroupField, { field: formState.animals, options: animals }, void 0), (0, jsx_runtime_1.jsx)(forms_1.FormDivider, {}, void 0), (0, jsx_runtime_1.jsx)(forms_1.BoundSwitchField, { field: formState.isAvailable }, void 0)] }), void 0), (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsxs)("strong", { children: ["Books", (0, jsx_runtime_1.jsx)(components_1.IconButton, { icon: "plus", onClick: () => formState.books.add({ id: String(formState.books.value.length) }) }, void 0)] }, void 0), (0, jsx_runtime_1.jsx)(components_1.GridTable, { columns: columns, rows: rows, observeRows: true }, void 0)] }, void 0), (0, jsx_runtime_1.jsxs)("div", Object.assign({ css: Css_1.Css.df.childGap1.$ }, { children: [(0, jsx_runtime_1.jsx)(components_1.Button, { onClick: () => formState.revertChanges(), label: "Cancel" }, void 0), (0, jsx_runtime_1.jsx)(components_1.Button, { onClick: () => {
+    return ((0, jsx_runtime_1.jsx)(mobx_react_1.Observer, { children: () => ((0, jsx_runtime_1.jsxs)("div", Object.assign({ css: Css_1.Css.df.$ }, { children: [(0, jsx_runtime_1.jsxs)("header", Object.assign({ css: Css_1.Css.wPx(700).$ }, { children: [(0, jsx_runtime_1.jsxs)(FormLines_1.FormLines, Object.assign({ labelSuffix: { required: "*", optional: "(Opt)" } }, { children: [(0, jsx_runtime_1.jsx)("b", { children: "Author" }, void 0), (0, jsx_runtime_1.jsx)(forms_1.BoundTextField, { field: formState.firstName }, void 0), (0, jsx_runtime_1.jsx)(forms_1.BoundTextField, { field: formState.middleInitial }, void 0), (0, jsx_runtime_1.jsx)(forms_1.BoundTextField, { field: formState.lastName }, void 0), (0, jsx_runtime_1.jsx)(forms_1.BoundDateField, { field: formState.birthday }, void 0), (0, jsx_runtime_1.jsxs)(forms_1.FieldGroup, { children: [(0, jsx_runtime_1.jsx)(forms_1.StaticField, { label: "Revenue", value: "$500" }, void 0), (0, jsx_runtime_1.jsx)(forms_1.StaticField, Object.assign({ label: "Website" }, { children: (0, jsx_runtime_1.jsx)("a", Object.assign({ href: "https://google.com" }, { children: "google.com" }), void 0) }), void 0)] }, void 0), (0, jsx_runtime_1.jsx)(forms_1.BoundNumberField, { field: formState.heightInInches }, void 0), (0, jsx_runtime_1.jsx)(forms_1.FormDivider, {}, void 0), (0, jsx_runtime_1.jsx)(forms_1.BoundSelectField, { field: formState.favoriteSport, options: sports }, void 0), (0, jsx_runtime_1.jsx)(forms_1.BoundMultiSelectField, { field: formState.favoriteShapes, options: shapes }, void 0), (0, jsx_runtime_1.jsx)(BoundCheckboxGroupField_1.BoundCheckboxGroupField, { field: formState.favoriteColors, options: colors }, void 0), (0, jsx_runtime_1.jsx)(forms_1.BoundToggleChipGroupField, { field: formState.animals, options: animals }, void 0), (0, jsx_runtime_1.jsx)(forms_1.FormDivider, {}, void 0), (0, jsx_runtime_1.jsx)(forms_1.BoundSwitchField, { field: formState.isAvailable }, void 0)] }), void 0), (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsxs)("strong", { children: ["Books", (0, jsx_runtime_1.jsx)(components_1.IconButton, { icon: "plus", onClick: () => formState.books.add({ id: String(formState.books.value.length) }) }, void 0)] }, void 0), (0, jsx_runtime_1.jsx)(components_1.GridTable, { columns: columns, rows: rows }, void 0)] }, void 0), (0, jsx_runtime_1.jsxs)("div", Object.assign({ css: Css_1.Css.df.childGap1.$ }, { children: [(0, jsx_runtime_1.jsx)(components_1.Button, { onClick: () => formState.revertChanges(), label: "Cancel" }, void 0), (0, jsx_runtime_1.jsx)(components_1.Button, { onClick: () => {
                                         if (formState.canSave()) {
                                             formState.commitChanges();
                                         }

package/dist/forms/StepperFormApp.js

@@ -72,7 +72,7 @@ function AuthorDetails({ formState, onNext }) {
 function BookList({ formState, onNext, onBack }) {
     const columns = (0, react_1.useMemo)(() => createColumns(formState), [formState]);
     const rows = (0, hooks_1.useComputed)(() => [components_1.simpleHeader, ...formState.books.rows.map((data) => ({ kind: "data", id: data.id.value, data }))], []);
-    return ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsxs)("h1", Object.assign({ css: Css_1.Css.df.aic.$ }, { children: ["Books", (0, jsx_runtime_1.jsx)(components_1.IconButton, { icon: "plus", onClick: () => { var _a; return formState.books.add({ id: String(((_a = formState.books.value) === null || _a === void 0 ? void 0 : _a.length) || 1) }); } }, void 0)] }), void 0), (0, jsx_runtime_1.jsx)(components_1.GridTable, { columns: columns, rows: rows, observeRows: true }, void 0), (0, jsx_runtime_1.jsxs)("div", Object.assign({ css: Css_1.Css.df.jcsb.bt.bGray300.py1.mt2.$ }, { children: [(0, jsx_runtime_1.jsx)(components_1.Button, { variant: "tertiary", label: "Back", onClick: onBack }, void 0), (0, jsx_runtime_1.jsx)(components_1.Button, { label: "Continue to Misc.", disabled: !formState.books.valid, onClick: onNext }, void 0)] }), void 0)] }, void 0));
+    return ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsxs)("h1", Object.assign({ css: Css_1.Css.df.aic.$ }, { children: ["Books", (0, jsx_runtime_1.jsx)(components_1.IconButton, { icon: "plus", onClick: () => { var _a; return formState.books.add({ id: String(((_a = formState.books.value) === null || _a === void 0 ? void 0 : _a.length) || 1) }); } }, void 0)] }), void 0), (0, jsx_runtime_1.jsx)(components_1.GridTable, { columns: columns, rows: rows }, void 0), (0, jsx_runtime_1.jsxs)("div", Object.assign({ css: Css_1.Css.df.jcsb.bt.bGray300.py1.mt2.$ }, { children: [(0, jsx_runtime_1.jsx)(components_1.Button, { variant: "tertiary", label: "Back", onClick: onBack }, void 0), (0, jsx_runtime_1.jsx)(components_1.Button, { label: "Continue to Misc.", disabled: !formState.books.valid, onClick: onNext }, void 0)] }), void 0)] }, void 0));
 }
 function createColumns(formState) {
     return [

package/package.json

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