@homebound/beam 2.124.3 → 2.126.1

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

@@ -2,6 +2,7 @@ import { MutableRefObject, ReactElement, ReactNode } from "react";
 import { PresentationContextProps, PresentationFieldProps } from "../PresentationContext";
 import { GridRowLookup } from "./GridRowLookup";
 import { GridTableApi } from "./GridTableApi";
+import { GridStyleDef } from "./styles";
 import { Margin, Only, Palette, Properties, Typography, Xss } from "../../Css";
 export declare type Kinded = {
     kind: string;
@@ -92,7 +93,7 @@ export interface NestedCardStyle {
     pxPx: number;
 }
 export interface GridTableDefaults {
-    style: GridStyle;
+    style: GridStyle | GridStyleDef;
     stickyHeader: boolean;
 }
 /** Configures the default/app-wide GridStyle. */
@@ -166,7 +167,7 @@ export interface GridTableProps<R extends Kinded, S, X> {
     /** 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;
+    style?: GridStyle | GridStyleDef;
     /**
      * If provided, collapsed rows on the table persists when the page is reloaded.
      *

package/dist/components/Table/GridTable.js

@@ -39,10 +39,12 @@ const nestedCards_1 = require("./nestedCards");
 const RowState_1 = require("./RowState");
 const SortHeader_1 = require("./SortHeader");
 const sortRows_1 = require("./sortRows");
+const styles_1 = require("./styles");
 const useSortState_1 = require("./useSortState");
 const Css_1 = require("../../Css");
 const hooks_1 = require("../../hooks");
 const useRenderCount_1 = require("../../hooks/useRenderCount");
+const utils_1 = require("../../utils");
 const shallowEqual_1 = require("../../utils/shallowEqual");
 const _1 = require(".");
 exports.ASC = "ASC";
@@ -86,7 +88,7 @@ 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, 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, observeRows, persistCollapse, resizeTarget, activeRowId, } = props;
     // 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);
@@ -97,6 +99,7 @@ function GridTable(props) {
         api.setActiveRowId(activeRowId);
         return api;
     }, [props.api]);
+    const style = resolveStyles(maybeStyle);
     const { rowState } = api;
     rowState.rows = rows;
     (0, react_1.useEffect)(() => {
@@ -498,7 +501,7 @@ function GridRow(props) {
     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, _e, _f;
             const { wrapAction = true, isAction = false } = column;
-            const applyFirstContentColumnStyles = !isAction && !firstContentColumnStylesApplied;
+            const applyFirstContentColumnStyles = !isHeader && !isAction && !firstContentColumnStylesApplied;
             firstContentColumnStylesApplied || (firstContentColumnStylesApplied = applyFirstContentColumnStyles);
             if (column.mw) {
                 // Validate the column's minWidth definition if set.
@@ -766,3 +769,11 @@ function tableRowStyles(as, column) {
         }
         : {};
 }
+function resolveStyles(style) {
+    const defKeys = ["inlineEditing", "grouped", "totals", "rowHeight"];
+    const keys = (0, utils_1.safeKeys)(style);
+    if (keys.length === 0 || keys.some((k) => defKeys.includes(k))) {
+        return (0, styles_1.getTableStyles)(style);
+    }
+    return style;
+}

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

@@ -28,6 +28,8 @@ export declare type GridTableApi<R extends Kinded> = {
     /** Returns the currently-selected rows. */
     getSelectedRows(): GridDataRow<R>[];
     getSelectedRows<K extends R["kind"]>(kind: K): GridDataRow<DiscriminateUnion<R, "kind", K>>[];
+    /** Deselects all rows */
+    clearSelections(): void;
     /** Sets the internal state of 'activeRowId' */
     setActiveRowId: (id: string | undefined) => void;
 };
@@ -39,5 +41,6 @@ export declare class GridTableApiImpl<R extends Kinded> implements GridTableApi<
     scrollToIndex(index: number): void;
     getSelectedRowIds(kind?: string): string[];
     getSelectedRows(kind?: string): any;
+    clearSelections(id?: string): void;
     setActiveRowId(id: string | undefined): void;
 }

package/dist/components/Table/GridTableApi.js

@@ -59,6 +59,9 @@ class GridTableApiImpl {
         });
         return selected;
     }
+    clearSelections(id) {
+        this.rowState.selectRow("header", false);
+    }
     setActiveRowId(id) {
         this.rowState.activeRowId = id;
     }

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

@@ -11,4 +11,4 @@ export * from "./SelectToggle";
 export { simpleDataRows, simpleHeader } from "./simpleHelpers";
 export type { SimpleHeaderAndData } from "./simpleHelpers";
 export { SortHeader } from "./SortHeader";
-export { beamFixedStyle, beamFlexibleStyle, beamNestedFixedStyle, beamNestedFlexibleStyle, beamTotalsFixedStyle, beamTotalsFlexibleStyle, cardStyle, condensedStyle, defaultStyle, } from "./styles";
+export { cardStyle, condensedStyle, defaultStyle, getTableStyles } from "./styles";

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.simpleHeader = exports.simpleDataRows = exports.RowStateContext = exports.RowState = exports.useGridTableApi = exports.setGridTableDefaults = exports.setDefaultStyle = exports.GridTable = exports.DESC = exports.ASC = exports.GridSortContext = void 0;
+exports.getTableStyles = exports.defaultStyle = exports.condensedStyle = exports.cardStyle = exports.SortHeader = exports.simpleHeader = exports.simpleDataRows = exports.RowStateContext = exports.RowState = exports.useGridTableApi = 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");
@@ -33,12 +33,7 @@ Object.defineProperty(exports, "simpleHeader", { enumerable: true, get: function
 var SortHeader_1 = require("./SortHeader");
 Object.defineProperty(exports, "SortHeader", { enumerable: true, get: function () { return SortHeader_1.SortHeader; } });
 var styles_1 = require("./styles");
-Object.defineProperty(exports, "beamFixedStyle", { enumerable: true, get: function () { return styles_1.beamFixedStyle; } });
-Object.defineProperty(exports, "beamFlexibleStyle", { enumerable: true, get: function () { return styles_1.beamFlexibleStyle; } });
-Object.defineProperty(exports, "beamNestedFixedStyle", { enumerable: true, get: function () { return styles_1.beamNestedFixedStyle; } });
-Object.defineProperty(exports, "beamNestedFlexibleStyle", { enumerable: true, get: function () { return styles_1.beamNestedFlexibleStyle; } });
-Object.defineProperty(exports, "beamTotalsFixedStyle", { enumerable: true, get: function () { return styles_1.beamTotalsFixedStyle; } });
-Object.defineProperty(exports, "beamTotalsFlexibleStyle", { enumerable: true, get: function () { return styles_1.beamTotalsFlexibleStyle; } });
 Object.defineProperty(exports, "cardStyle", { enumerable: true, get: function () { return styles_1.cardStyle; } });
 Object.defineProperty(exports, "condensedStyle", { enumerable: true, get: function () { return styles_1.condensedStyle; } });
 Object.defineProperty(exports, "defaultStyle", { enumerable: true, get: function () { return styles_1.defaultStyle; } });
+Object.defineProperty(exports, "getTableStyles", { enumerable: true, get: function () { return styles_1.getTableStyles; } });

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

@@ -1,4 +1,3 @@
-import { Properties } from "../../Css";
 import { GridStyle } from ".";
 /** Our original table look & feel/style. */
 export declare const defaultStyle: GridStyle;
@@ -6,11 +5,10 @@ export declare const defaultStyle: GridStyle;
 export declare const condensedStyle: GridStyle;
 /** Renders each row as a card. */
 export declare const cardStyle: GridStyle;
-export declare const beamFixedStyle: GridStyle;
-export declare const beamGroupRowStyle: Properties;
-export declare const beamTotalsRowStyle: Properties;
-export declare const beamNestedFixedStyle: GridStyle;
-export declare const beamTotalsFixedStyle: GridStyle;
-export declare const beamFlexibleStyle: GridStyle;
-export declare const beamNestedFlexibleStyle: GridStyle;
-export declare const beamTotalsFlexibleStyle: GridStyle;
+export interface GridStyleDef {
+    inlineEditing?: boolean;
+    grouped?: boolean;
+    rowHeight?: "fixed" | "flexible";
+    totals?: boolean;
+}
+export declare const getTableStyles: (props?: GridStyleDef | undefined) => GridStyle;

package/dist/components/Table/styles.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.beamTotalsFlexibleStyle = exports.beamNestedFlexibleStyle = exports.beamFlexibleStyle = exports.beamTotalsFixedStyle = exports.beamNestedFixedStyle = exports.beamTotalsRowStyle = exports.beamGroupRowStyle = exports.beamFixedStyle = exports.cardStyle = exports.condensedStyle = exports.defaultStyle = void 0;
+exports.getTableStyles = exports.cardStyle = exports.condensedStyle = exports.defaultStyle = void 0;
 const Css_1 = require("../../Css");
 /** Our original table look & feel/style. */
 exports.defaultStyle = {
@@ -39,40 +39,34 @@ exports.cardStyle = {
         }).p1.m0.xsEm.gray700.$,
     },
 };
-// Once completely rolled out across all tables in Blueprint, this will change to be the `defaultStyle`.
-exports.beamFixedStyle = {
-    headerCellCss: Css_1.Css.gray700.xsEm.bgGray200.aic.nowrap.pxPx(12).hPx(40).$,
-    cellCss: Css_1.Css.gray900.xs.bgWhite.aic.nowrap.pxPx(12).hPx(36).boxShadow(`inset 0 -1px 0 ${Css_1.Palette.Gray200}`).$,
-    emptyCell: "-",
-    presentationSettings: { borderless: true, typeScale: "xs", wrap: false },
-    firstRowMessageCss: Css_1.Css.tc.py3.$,
-    // Included as a hacky "treat indent as deprecated for this table" hint to GridTable
-    levels: {},
-};
-// The look & feel for parent rows' cells in a nested parent/child table.
-exports.beamGroupRowStyle = Css_1.Css.xsEm
-    .mhPx(56)
-    .gray700.bgGray100.boxShadow(`inset 0 -1px 0 ${Css_1.Palette.Gray200}`).$;
-// The look & feel for a totals row's cells.
-exports.beamTotalsRowStyle = Css_1.Css.gray700.smEm.hPx(40).mb1.bgWhite.boxShadow("none").$;
-exports.beamNestedFixedStyle = {
-    ...exports.beamFixedStyle,
-    levels: { 0: { cellCss: exports.beamGroupRowStyle }, 2: { firstContentColumn: Css_1.Css.tiny.pl3.$ } },
-};
-exports.beamTotalsFixedStyle = {
-    ...exports.beamFixedStyle,
-    cellCss: { ...exports.beamFixedStyle.cellCss, ...exports.beamTotalsRowStyle },
-};
-exports.beamFlexibleStyle = {
-    ...exports.beamFixedStyle,
-    cellCss: Css_1.Css.xs.bgWhite.aic.py2.pxPx(12).boxShadow(`inset 0 -1px 0 ${Css_1.Palette.Gray100}`).$,
-    presentationSettings: { borderless: true, typeScale: "xs", wrap: true },
-};
-exports.beamNestedFlexibleStyle = {
-    ...exports.beamFlexibleStyle,
-    levels: { 0: { cellCss: exports.beamGroupRowStyle }, 2: { firstContentColumn: Css_1.Css.tiny.pl3.$ } },
-};
-exports.beamTotalsFlexibleStyle = {
-    ...exports.beamFlexibleStyle,
-    cellCss: { ...exports.beamFlexibleStyle.cellCss, ...exports.beamTotalsRowStyle },
-};
+function memoizedTableStyles() {
+    const cache = {};
+    return (props) => {
+        const { inlineEditing = false, grouped = false, rowHeight = "flexible", totals = false } = props || {};
+        const key = `${inlineEditing}|${grouped}|${rowHeight}|${totals}`;
+        if (!cache[key]) {
+            const groupedLevels = {
+                0: {
+                    cellCss: Css_1.Css.xsEm.mhPx(56).gray700.bgGray100.boxShadow(`inset 0 -1px 0 ${Css_1.Palette.Gray200}`).$,
+                    firstContentColumn: Css_1.Css.smEm.$,
+                },
+                2: { firstContentColumn: Css_1.Css.tiny.pl3.$ },
+            };
+            const defaultLevels = { 1: { firstContentColumn: Css_1.Css.tiny.pl3.$ } };
+            cache[key] = {
+                emptyCell: "-",
+                firstRowMessageCss: Css_1.Css.tc.py3.$,
+                headerCellCss: Css_1.Css.gray700.xsEm.bgGray200.aic.nowrap.pxPx(12).hPx(40).$,
+                cellCss: {
+                    ...Css_1.Css.gray900.xs.bgWhite.aic.pxPx(12).boxShadow(`inset 0 -1px 0 ${Css_1.Palette.Gray200}`).$,
+                    ...(rowHeight === "flexible" ? Css_1.Css.py2.$ : Css_1.Css.nowrap.hPx(inlineEditing ? 48 : 36).$),
+                    ...(totals ? Css_1.Css.gray700.smEm.hPx(40).mb1.bgWhite.boxShadow("none").$ : {}),
+                },
+                presentationSettings: { borderless: true, typeScale: "xs", wrap: rowHeight === "flexible" },
+                levels: totals ? {} : grouped ? groupedLevels : defaultLevels,
+            };
+        }
+        return cache[key];
+    };
+}
+exports.getTableStyles = memoizedTableStyles();

package/dist/inputs/TextFieldBase.js

@@ -44,7 +44,11 @@ function TextFieldBase(props) {
             // When borderless then perceived vertical alignments are misaligned. As there is no longer a border, then the field looks oddly indented.
             // This typically happens in tables when a column has a mix of static text (i.e. "roll up" rows and table headers) and input fields.
             // To remedy this perceived misalignment then we increase the width by the horizontal padding applied (16px), and set a negative margin left margin to re-center the field.
-            ...(borderless ? Css_1.Css.bTransparent.w("calc(100% + 16px)").ml(-1).$ : Css_1.Css.bGray300.if(contrast).bGray700.$),
+            // Note: Do not modify width and position of 'compound' fields.
+            ...(borderless && !compound
+                ? Css_1.Css.bTransparent.w("calc(100% + 16px)").ml(-1).$
+                : Css_1.Css.bGray300.if(contrast).bGray700.$),
+            // Do not add borders to compound fields. A compound field is responsible for drawing its own borders
             ...(!compound ? Css_1.Css.ba.$ : {}),
         },
         inputWrapperReadOnly: {

package/package.json

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