@homebound/beam 2.190.1 → 2.191.1

package/dist/components/Table/GridTable.js

@@ -252,6 +252,8 @@ function renderDiv(style, id, columns, headerRows, totalsRows, visibleDataRows,
                 ? 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.lastRowCss && Css_1.Css.addIn("& > div:last-of-type", style.lastRowCss).$),
+            ...(style.firstRowCss && Css_1.Css.addIn("& > div:first-of-type", style.firstRowCss).$),
             ...style.rootCss,
             ...(style.minWidthPx ? Css_1.Css.mwPx(style.minWidthPx).$ : {}),
             ...xss,
@@ -260,10 +262,12 @@ function renderDiv(style, id, columns, headerRows, totalsRows, visibleDataRows,
 /** Renders as a table, primarily/solely for good print support. */
 function renderTable(style, id, columns, headerRows, totalsRows, visibleDataRows, firstRowMessage, _stickyHeader, xss, _virtuosoRef) {
     return ((0, jsx_runtime_1.jsxs)("table", Object.assign({ css: {
-            ...Css_1.Css.w100.add("borderCollapse", "collapse").$,
-            ...Css_1.Css.addIn("& > tbody > tr ", style.betweenRowsCss || {})
+            ...Css_1.Css.w100.add("borderCollapse", "separate").add("borderSpacing", "0").$,
+            ...Css_1.Css.addIn("& > tbody > tr > * ", style.betweenRowsCss || {})
                 // removes border between header and second row
-                .addIn("& > tbody > tr:first-of-type", style.firstNonHeaderRowCss || {}).$,
+                .addIn("& > tbody > tr:first-of-type > *", style.firstNonHeaderRowCss || {}).$,
+            ...Css_1.Css.addIn("& > tbody > tr:last-of-type", style.lastRowCss).$,
+            ...Css_1.Css.addIn("& > tbody > tr:first-of-type", style.firstRowCss).$,
             ...style.rootCss,
             ...(style.minWidthPx ? Css_1.Css.mwPx(style.minWidthPx).$ : {}),
             ...xss,
@@ -356,9 +360,10 @@ const VirtualRoot = (0, memoize_one_1.default)((gs, _columns, id, xss) => {
                 ...Css_1.Css.addIn("& > div + div > div > *", gs.betweenRowsCss || {}).$,
                 // Table list styles only
                 ...(isHeader
-                    ? {}
+                    ? Css_1.Css.addIn("& > div:first-of-type > *", gs.firstRowCss).$
                     : {
                         ...Css_1.Css.addIn("& > div:first-of-type > *", gs.firstNonHeaderRowCss).$,
+                        ...Css_1.Css.addIn("& > div:last-of-type > *", gs.lastRowCss).$,
                     }),
                 ...gs.rootCss,
                 ...(gs.minWidthPx ? Css_1.Css.mwPx(gs.minWidthPx).$ : {}),

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

@@ -0,0 +1,12 @@
+import { ReactNode } from "react";
+import { Margin, Only, Xss } from "../../Css";
+declare type TableActionsXss = Xss<Margin>;
+interface TableActionsProps<X> {
+    xss?: X;
+    children: ReactNode;
+    onlyLeft?: boolean;
+    onlyRight?: boolean;
+}
+/** Provides default spacing for Actions sitting above a table (Filters, Search, etc...) */
+export declare function TableActions<X extends Only<TableActionsXss, X>>(props: TableActionsProps<X>): import("@emotion/react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/Table/TableActions.js

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TableActions = void 0;
+const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
+const Css_1 = require("../../Css");
+/** Provides default spacing for Actions sitting above a table (Filters, Search, etc...) */
+function TableActions(props) {
+    const { xss, children, onlyLeft, onlyRight } = props;
+    const alignmentStyles = onlyLeft ? Css_1.Css.jcfs.$ : onlyRight ? Css_1.Css.jcfe.$ : Css_1.Css.jcsb.$;
+    return (0, jsx_runtime_1.jsx)("div", Object.assign({ css: { ...Css_1.Css.df.aic.pb2.gap1.$, ...xss, ...alignmentStyles } }, { children: children }), void 0);
+}
+exports.TableActions = TableActions;

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

@@ -9,6 +9,10 @@ export interface GridStyle {
     rootCss?: Properties;
     /** Applied with the owl operator between rows for rendering border lines. */
     betweenRowsCss?: Properties;
+    /** Applied on the last row of the table. */
+    lastRowCss?: Properties;
+    /** Applied on the first row of the table (could be the Header or Totals row). */
+    firstRowCss?: Properties;
     /** Applied to the first non-header row, i.e. if you want to cancel out `betweenRowsCss`. */
     firstNonHeaderRowCss?: Properties;
     /** Applied to all cell divs (via a selector off the base div). */
@@ -55,6 +59,8 @@ export interface GridStyleDef {
     rowHeight?: "fixed" | "flexible";
     /** Enables cells Highlight and hover */
     cellHighlight?: boolean;
+    allWhite?: boolean;
+    bordered?: boolean;
 }
 export declare const getTableStyles: (props?: GridStyleDef) => GridStyle;
 /** Defines row-specific styling for each given row `kind` in `R` */

package/dist/components/Table/TableStyles.js

@@ -7,7 +7,7 @@ const utils_1 = require("../../utils");
 function memoizedTableStyles() {
     const cache = {};
     return (props = {}) => {
-        const { inlineEditing = false, grouped = false, rowHeight = "flexible", cellHighlight = false } = props;
+        const { inlineEditing = false, grouped = false, rowHeight = "flexible", cellHighlight = false, allWhite = false, bordered = false, } = props;
         const key = (0, utils_1.safeKeys)(props)
             .sort()
             .map((k) => `${k}_${props[k]}`)
@@ -15,8 +15,11 @@ function memoizedTableStyles() {
         if (!cache[key]) {
             const groupedLevels = {
                 0: {
-                    cellCss: Css_1.Css.xsMd.mhPx(56).gray700.bgGray100.boxShadow(`inset 0 -1px 0 ${Css_1.Palette.Gray200}`).$,
-                    firstContentColumn: Css_1.Css.smMd.$,
+                    cellCss: {
+                        ...Css_1.Css.xsMd.mhPx(56).gray700.bgGray100.boxShadow(`inset 0 -1px 0 ${Css_1.Palette.Gray200}`).$,
+                        ...(allWhite && Css_1.Css.bgWhite.$),
+                    },
+                    firstContentColumn: { ...Css_1.Css.smMd.$, ...(allWhite && Css_1.Css.smBd.gray900.$) },
                 },
                 2: { firstContentColumn: Css_1.Css.tiny.pl3.$ },
             };
@@ -24,13 +27,27 @@ function memoizedTableStyles() {
             cache[key] = {
                 emptyCell: "-",
                 firstRowMessageCss: Css_1.Css.tc.py3.$,
-                headerCellCss: Css_1.Css.gray700.xsMd.bgGray200.aic.nowrap.pxPx(12).hPx(40).$,
-                totalsCellCss: Css_1.Css.bgWhite.gray700.smMd.hPx(52).pt0.pbPx(12).boxShadow("none").$,
+                headerCellCss: {
+                    ...Css_1.Css.gray700.xsMd.bgGray200.aic.nowrap.pxPx(12).hPx(40).$,
+                    ...(allWhite && Css_1.Css.bgWhite.$),
+                    ...(bordered && Css_1.Css.bt.bGray200.$),
+                },
+                totalsCellCss: Css_1.Css.bgWhite.gray700.smMd.hPx(52).pPx(12).boxShadow("none").$,
                 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.$ } : {}),
+                    ...(bordered && { "&:first-of-type": Css_1.Css.bl.bGray200.$, "&:last-of-type": Css_1.Css.br.bGray200.$ }),
+                },
+                firstRowCss: {
+                    // Only apply border-radius to the corners of the table when `allWhite` is true for now.
+                    ...(allWhite &&
+                        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").$).$,
+                }),
                 presentationSettings: { borderless: true, typeScale: "xs", wrap: rowHeight === "flexible" },
                 levels: grouped ? groupedLevels : defaultLevels,
             };
@@ -58,7 +75,7 @@ exports.condensedStyle = {
     ...exports.defaultStyle,
     headerCellCss: Css_1.Css.bgGray100.tinySb.$,
     cellCss: Css_1.Css.aic.sm.py1.px2.$,
-    rootCss: Css_1.Css.dg.gray700.xs.$,
+    rootCss: Css_1.Css.gray700.xs.$,
     firstRowMessageCss: Css_1.Css.tc.py2.$,
 };
 /** Renders each row as a card. */
@@ -90,7 +107,14 @@ function tableRowStyles(as, column) {
 }
 exports.tableRowStyles = tableRowStyles;
 function resolveStyles(style) {
-    const defKeys = ["inlineEditing", "grouped", "rowHeight", "cellHighlight"];
+    const defKeys = [
+        "inlineEditing",
+        "grouped",
+        "rowHeight",
+        "cellHighlight",
+        "allWhite",
+        "bordered",
+    ];
     const keys = (0, utils_1.safeKeys)(style);
     if (keys.length === 0 || keys.some((k) => defKeys.includes(k))) {
         return (0, exports.getTableStyles)(style);

package/package.json

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