@homebound/beam 2.281.0 → 2.282.0

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

@@ -1,8 +1,8 @@
 import { ReactNode } from "react";
 import { PresentationContextProps, PresentationFieldProps } from "../PresentationContext";
-import { DiscriminateUnion, GridColumn, GridDataRow, GridTableApi, RenderCellFn } from "./index";
-import { Kinded, RenderAs } from "./types";
-import { Palette, Properties } from "../../Css";
+import { DiscriminateUnion, GridDataRow, GridTableApi, RenderCellFn } from "./index";
+import { Kinded } from "./types";
+import { Palette, Properties, Typography } from "../../Css";
 /** Completely static look & feel, i.e. nothing that is based on row kinds/content. */
 export interface GridStyle {
     /** Applied to the base div element. */
@@ -34,10 +34,6 @@ export interface GridStyle {
     firstCellCss?: Properties;
     /** Applied to the last cell of all rows, i.e. for table-wide padding or right-side borders. */
     lastCellCss?: Properties;
-    /** Applied to a cell div when `indent: 1` is used. */
-    indentOneCss?: Properties;
-    /** Applied to a cell div when `indent: 2` is used. */
-    indentTwoCss?: Properties;
     /** Applied if there is a fallback/overflow message showing. */
     firstRowMessageCss?: Properties;
     /** Applied on hover if a row has a rowLink/onClick set. */
@@ -56,16 +52,24 @@ export interface GridStyle {
     activeBgColor?: Palette;
 }
 export interface GridStyleDef {
+    /** Changes the height of the rows when `rowHeight: fixed` to provide more space between rows for input fields. */
     inlineEditing?: boolean;
+    /** Adds styling for grouped rows */
     grouped?: boolean;
+    /** 'fixed' height rows do not allow text to wrap. 'flexible' allows for wrapping. Defaults to `flexible` */
     rowHeight?: "fixed" | "flexible";
     /** Enables cells Highlight and hover */
     cellHighlight?: boolean;
+    /** Applies a white background to the whole table, including header and group rows. */
     allWhite?: boolean;
+    /** Whether to apply a border around the whole table */
     bordered?: boolean;
+    /** Whether to show a hover effect on rows. Defaults to true */
     rowHover?: boolean;
     /** Defines the vertical alignment of the content of the cells for the whole table (not including the 'header' rows). Defaults to `center` */
     vAlign?: "top" | "center" | "bottom";
+    /** Defines the Typography for the table body's cells (not the header). This only applies to rows that are not nested/grouped */
+    cellTypography?: Typography;
 }
 export declare const getTableStyles: (props?: GridStyleDef) => GridStyle;
 export declare const totalsRowHeight = 40;
@@ -81,8 +85,6 @@ export interface RowStyle<R extends Kinded> {
     cellCss?: Properties | ((row: R) => Properties);
     /** Renders the cell element, i.e. a link to get whole-row links. */
     renderCell?: RenderCellFn<R>;
-    /** Whether the row should be indented (via a style applied to the 1st cell). */
-    indent?: 1 | 2;
     /** 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'. */
@@ -92,8 +94,8 @@ export interface RowStyle<R extends Kinded> {
 export declare const defaultStyle: GridStyle;
 /** Tightens up the padding of rows, great for rows that have form elements in them. */
 export declare const condensedStyle: GridStyle;
-/** Renders each row as a card. */
+/** Renders each row as a card.
+ * TODO: Add `cardStyle` option to `getTableStyles` and remove this.
+ * */
 export declare const cardStyle: GridStyle;
-/** GridTable as Table utility to apply <tr> element override styles. */
-export declare function tableRowStyles(as: RenderAs, column?: GridColumn<any>): {};
 export declare function resolveStyles(style: GridStyle | GridStyleDef): GridStyle;

package/dist/components/Table/TableStyles.js

@@ -1,13 +1,13 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.resolveStyles = exports.tableRowStyles = exports.cardStyle = exports.condensedStyle = exports.defaultStyle = exports.expandableHeaderRowHeight = exports.totalsRowHeight = exports.getTableStyles = void 0;
+exports.resolveStyles = exports.cardStyle = exports.condensedStyle = exports.defaultStyle = exports.expandableHeaderRowHeight = exports.totalsRowHeight = exports.getTableStyles = void 0;
 const Css_1 = require("../../Css");
 const utils_1 = require("../../utils");
 // Returns a "blessed" style of GridTable
 function memoizedTableStyles() {
     const cache = {};
     return (props = {}) => {
-        const { inlineEditing = false, grouped = false, rowHeight = "flexible", cellHighlight = false, allWhite = false, bordered = false, vAlign = "center", } = props;
+        const { inlineEditing = false, grouped = false, rowHeight = "flexible", cellHighlight = false, allWhite = false, bordered = false, vAlign = "center", cellTypography = "xs", } = props;
         const key = (0, utils_1.safeKeys)(props)
             .sort()
             .map((k) => `${k}_${props[k]}`)
@@ -45,7 +45,8 @@ function memoizedTableStyles() {
                     .py0.boxShadow(`inset 0 -1px 0 ${Css_1.Palette.Gray200}`)
                     .addIn("&:not(:last-of-type)", Css_1.Css.boxShadow(`inset -1px -1px 0 ${Css_1.Palette.Gray200}`).$).$,
                 cellCss: {
-                    ...Css_1.Css.gray900.xs.bgWhite.ai(alignItems).pxPx(12).boxShadow(`inset 0 -1px 0 ${Css_1.Palette.Gray200}`).$,
+                    ...Css_1.Css[cellTypography].gray900.bgWhite.ai(alignItems).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.$ } : {}),
                     ...(bordered && { "&:first-of-type": Css_1.Css.bl.bGray200.$, "&:last-of-type": Css_1.Css.br.bGray200.$ }),
@@ -54,9 +55,10 @@ function memoizedTableStyles() {
                     ...Css_1.Css.addIn("& > *:first-of-type", Css_1.Css.borderRadius("8px 0 0 0 ").$).addIn("& > *:last-of-type", Css_1.Css.borderRadius("0 8px 0 0").$).$,
                     ...(bordered && Css_1.Css.addIn("& > *", Css_1.Css.bt.bGray200.$).$),
                 },
-                ...(allWhite && {
-                    lastRowCss: Css_1.Css.addIn("& > *:first-of-type", Css_1.Css.borderRadius("0 0 0 8px").$).addIn("& > *:last-of-type", Css_1.Css.borderRadius("0 0 8px 0").$).$,
-                }),
+                // Only apply border radius styles to the last row when using the `bordered` style table.
+                lastRowCss: bordered
+                    ? Css_1.Css.addIn("& > *:first-of-type", Css_1.Css.borderRadius("0 0 0 8px").$).addIn("& > *:last-of-type", Css_1.Css.borderRadius("0 0 8px 0").$).$
+                    : Css_1.Css.addIn("> *", Css_1.Css.bsh0.$).$,
                 presentationSettings: { borderless: true, typeScale: "xs", wrap: rowHeight === "flexible" },
                 levels: grouped ? groupedLevels : defaultLevels,
                 rowHoverColor: Css_1.Palette.LightBlue100,
@@ -69,28 +71,18 @@ exports.getTableStyles = memoizedTableStyles();
 exports.totalsRowHeight = 40;
 exports.expandableHeaderRowHeight = 40;
 /** Our original table look & feel/style. */
-exports.defaultStyle = {
-    rootCss: Css_1.Css.gray700.$,
-    totalsCellCss: Css_1.Css.bgWhite.$,
-    betweenRowsCss: Css_1.Css.bt.bGray400.$,
-    firstNonHeaderRowCss: Css_1.Css.add({ borderTopStyle: "none" }).$,
-    cellCss: Css_1.Css.py2.px3.$,
-    firstCellCss: Css_1.Css.pl1.$,
-    lastCellCss: Css_1.Css.$,
-    indentOneCss: Css_1.Css.pl4.$,
-    indentTwoCss: Css_1.Css.pl7.$,
-    headerCellCss: Css_1.Css.nowrap.py1.bgGray100.aife.$,
-    firstRowMessageCss: Css_1.Css.tc.py3.$,
-};
+exports.defaultStyle = (0, exports.getTableStyles)({});
 /** Tightens up the padding of rows, great for rows that have form elements in them. */
 exports.condensedStyle = {
-    ...exports.defaultStyle,
-    headerCellCss: Css_1.Css.bgGray100.tinySb.$,
-    cellCss: Css_1.Css.aic.sm.py1.px2.$,
-    rootCss: Css_1.Css.gray700.xs.$,
-    firstRowMessageCss: Css_1.Css.tc.py2.$,
+    ...(0, exports.getTableStyles)({ rowHeight: "fixed" }),
+    firstRowMessageCss: {
+        ...(0, exports.getTableStyles)({ rowHeight: "fixed" }).firstRowMessageCss,
+        ...Css_1.Css.xs.gray900.$,
+    },
 };
-/** Renders each row as a card. */
+/** Renders each row as a card.
+ * TODO: Add `cardStyle` option to `getTableStyles` and remove this.
+ * */
 exports.cardStyle = {
     ...exports.defaultStyle,
     betweenRowsCss: {},
@@ -107,17 +99,6 @@ exports.cardStyle = {
         }).p1.m0.xsMd.gray700.$,
     },
 };
-/** GridTable as Table utility to apply <tr> element override styles. */
-function tableRowStyles(as, column) {
-    const thWidth = column === null || column === void 0 ? void 0 : column.w;
-    return as === "table"
-        ? {
-            ...Css_1.Css.dtc.$,
-            ...(thWidth ? Css_1.Css.w(thWidth).$ : {}),
-        }
-        : {};
-}
-exports.tableRowStyles = tableRowStyles;
 function resolveStyles(style) {
     const defKeysRecord = {
         inlineEditing: true,
@@ -128,6 +109,7 @@ function resolveStyles(style) {
         bordered: true,
         rowHover: true,
         vAlign: true,
+        cellTypography: true,
     };
     const keys = (0, utils_1.safeKeys)(style);
     const defKeys = (0, utils_1.safeKeys)(defKeysRecord);

package/dist/components/Table/components/Row.js

@@ -169,17 +169,16 @@ function RowImpl(props) {
             // In practice we've not seen any performance issues with this from our "large but
             // not Google spreadsheets" tables.
             const cellCss = {
-                // Adding display flex so we can align content within the cells
-                ...Css_1.Css.df.$,
+                // Adding `display: flex` so we can align content within the cells, unless it is displayed as a `table`, then use `table-cell`.
+                ...Css_1.Css.df.if(as === "table").dtc.$,
                 // Apply sticky column/cell styles
                 ...maybeStickyColumnStyles,
                 // Apply any static/all-cell styling
                 ...style.cellCss,
                 // Then override with first/last cell styling
                 ...(0, utils_1.getFirstOrLastCellCss)(style, columnIndex, columns),
-                // Then override with per-cell/per-row justification/indentation
+                // Then override with per-cell/per-row justification
                 ...justificationCss,
-                ...(0, utils_1.getIndentationCss)(style, rowStyle, columnIndex, maybeContent),
                 // Then apply any header-specific override
                 ...(isHeader && style.headerCellCss),
                 // Then apply any totals-specific override

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

@@ -15,8 +15,6 @@ export type GridCellContent = {
     value?: MaybeFn<number | string | Date | boolean | null | undefined>;
     /** The value to use specifically for sorting (i.e. if `value` is used for filtering); defaults to `value`. */
     sortValue?: MaybeFn<number | string | Date | boolean | null | undefined>;
-    /** Whether to indent the cell. */
-    indent?: 1 | 2;
     colspan?: number;
     typeScale?: Typography;
     /** Allows the cell to stay in place when the user scrolls horizontally, i.e. frozen columns. */

package/dist/components/Table/components/cell.js

@@ -4,12 +4,11 @@ exports.rowClickRenderFn = exports.rowLinkRenderFn = exports.headerRenderFn = ex
 const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
 const react_router_dom_1 = require("react-router-dom");
 const CssReset_1 = require("../../CssReset");
-const TableStyles_1 = require("../TableStyles");
 const Css_1 = require("../../../Css");
 /** 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, onClick, tooltip) => {
     const Cell = as === "table" ? "td" : "div";
-    return ((0, jsx_runtime_1.jsx)(Cell, { css: { ...css, ...(0, TableStyles_1.tableRowStyles)(as), ...Css_1.Css.cursor("default").$ }, className: classNames, onClick: onClick, children: content }, key));
+    return ((0, jsx_runtime_1.jsx)(Cell, { css: { ...css, ...Css_1.Css.cursor("default").$ }, className: classNames, onClick: onClick, children: content }, key));
 };
 exports.defaultRenderFn = defaultRenderFn;
 /**
@@ -18,14 +17,14 @@ exports.defaultRenderFn = defaultRenderFn;
  * */
 const headerRenderFn = (column, as, colSpan) => (key, css, content, row, rowStyle, classNames, onClick, tooltip) => {
     const Cell = as === "table" ? "th" : "div";
-    return ((0, jsx_runtime_1.jsx)(Cell, { css: { ...css, ...(0, TableStyles_1.tableRowStyles)(as, column) }, className: classNames, ...(as === "table" && { colSpan }), children: content }, key));
+    return ((0, jsx_runtime_1.jsx)(Cell, { css: { ...css }, className: classNames, ...(as === "table" && { colSpan }), children: content }, key));
 };
 exports.headerRenderFn = headerRenderFn;
 /** Renders a cell element when a row link is in play. */
 const rowLinkRenderFn = (as) => (key, css, content, row, rowStyle, classNames, onClick, tooltip) => {
     const to = rowStyle.rowLink(row);
     if (as === "table") {
-        return ((0, jsx_runtime_1.jsx)("td", { css: { ...css, ...(0, TableStyles_1.tableRowStyles)(as) }, className: classNames, children: (0, jsx_runtime_1.jsx)(react_router_dom_1.Link, { to: to, css: Css_1.Css.noUnderline.color("unset").db.$, className: CssReset_1.navLink, children: content }) }, key));
+        return ((0, jsx_runtime_1.jsx)("td", { css: { ...css }, className: classNames, children: (0, jsx_runtime_1.jsx)(react_router_dom_1.Link, { to: to, css: Css_1.Css.noUnderline.color("unset").db.$, className: CssReset_1.navLink, children: content }) }, key));
     }
     return ((0, jsx_runtime_1.jsx)(react_router_dom_1.Link, { to: to, css: { ...Css_1.Css.noUnderline.color("unset").$, ...css }, className: `${CssReset_1.navLink} ${classNames}`, children: content }, key));
 };
@@ -33,7 +32,7 @@ exports.rowLinkRenderFn = rowLinkRenderFn;
 /** Renders a cell that will fire the RowStyle.onClick. */
 const rowClickRenderFn = (as, api) => (key, css, content, row, rowStyle, classNames, onClick, tooltip) => {
     const Cell = as === "table" ? "td" : "div";
-    return ((0, jsx_runtime_1.jsx)(Cell, { ...{ key }, css: { ...css, ...(0, TableStyles_1.tableRowStyles)(as) }, className: classNames, onClick: (e) => {
+    return ((0, jsx_runtime_1.jsx)(Cell, { ...{ key }, css: { ...css }, className: classNames, onClick: (e) => {
             rowStyle.onClick(row, api);
             onClick && onClick();
         }, children: content }));

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

@@ -68,7 +68,7 @@ export type GridColumn<R extends Kinded> = {
     sticky?: "left" | "right";
     /** Prevent column from supporting RowStyle.onClick/rowLink in order to avoid nested interactivity. Defaults to true */
     wrapAction?: false;
-    /** Used as a signal to defer adding the 'indent' styling */
+    /** Used as a signal to defer adding the row's level indentation styling */
     isAction?: true;
     /** Column id that will be used to generate an unique identifier for every row cell */
     id?: string;

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

@@ -2,7 +2,7 @@ import { ReactNode } from "react";
 import { GridCellContent } from "../components/cell";
 import { GridDataRow } from "../components/Row";
 import { GridTableApi } from "../GridTableApi";
-import { GridStyle, RowStyle } from "../TableStyles";
+import { GridStyle } from "../TableStyles";
 import { GridCellAlignment, GridColumnWithId, Kinded, RenderAs } from "../types";
 import { Properties } from "../../../Css";
 /** If a column def return just string text for a given row, apply some default styling. */
@@ -13,7 +13,6 @@ export declare function applyRowFn<R extends Kinded>(column: GridColumnWithId<R>
 export declare const ASC: "ASC";
 export declare const DESC: "DESC";
 export declare const emptyCell: GridCellContent;
-export declare function getIndentationCss<R extends Kinded>(style: GridStyle, rowStyle: RowStyle<R> | undefined, columnIndex: number, maybeContent: ReactNode | GridCellContent): Properties;
 export declare function getFirstOrLastCellCss<R extends Kinded>(style: GridStyle, columnIndex: number, columns: GridColumnWithId<R>[]): Properties;
 export declare function getAlignment(column: GridColumnWithId<any>, maybeContent: ReactNode | GridCellContent): GridCellAlignment;
 export declare function getJustification(column: GridColumnWithId<any>, maybeContent: ReactNode | GridCellContent, as: RenderAs, alignment: GridCellAlignment): {

package/dist/components/Table/utils/utils.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.zIndices = exports.reservedRowKinds = exports.EXPANDABLE_HEADER = exports.TOTALS = exports.HEADER = exports.matchesFilter = exports.maybeApplyFunction = exports.getJustification = exports.getAlignment = exports.getFirstOrLastCellCss = exports.getIndentationCss = exports.emptyCell = exports.DESC = exports.ASC = exports.applyRowFn = exports.isGridCellContent = exports.toContent = void 0;
+exports.zIndices = exports.reservedRowKinds = exports.EXPANDABLE_HEADER = exports.TOTALS = exports.HEADER = exports.matchesFilter = exports.maybeApplyFunction = exports.getJustification = exports.getAlignment = exports.getFirstOrLastCellCss = exports.emptyCell = exports.DESC = exports.ASC = exports.applyRowFn = exports.isGridCellContent = exports.toContent = void 0;
 const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
 const Icon_1 = require("../../Icon");
 const ExpandableHeader_1 = require("../components/ExpandableHeader");
@@ -52,7 +52,7 @@ function toContent(maybeContent, isHeader, canSortColumn, isClientSideSorting, s
         // as our cell element is a flex container, which don't allow for applying truncation styles directly on it.
         return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("span", { css: Css_1.Css.truncate.mw0.$, title: content, children: content }), tooltipEl] }));
     }
-    else if (style.emptyCell && isContentEmpty(content)) {
+    else if (!isHeader && !isExpandableHeader && style.emptyCell && isContentEmpty(content)) {
         // If the content is empty and the user specified an `emptyCell` node, return that.
         return style.emptyCell;
     }
@@ -83,15 +83,6 @@ exports.applyRowFn = applyRowFn;
 exports.ASC = "ASC";
 exports.DESC = "DESC";
 exports.emptyCell = { content: () => (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {}), value: "" };
-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));
-    if (typeof indent === "number" && style.levels !== undefined) {
-        throw new Error("The indent param is deprecated for new beam fixed & flexible styles, use beamNestedFixedStyle or beamNestedFlexibleStyle");
-    }
-    return indent === 1 ? style.indentOneCss || {} : indent === 2 ? style.indentTwoCss || {} : {};
-}
-exports.getIndentationCss = getIndentationCss;
 function getFirstOrLastCellCss(style, columnIndex, columns) {
     return {
         ...(columnIndex === 0 ? style.firstCellCss : {}),

package/package.json

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