@homebound/beam 2.190.0 → 2.191.0

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

@@ -101,7 +101,7 @@ export interface GridTableProps<R extends Kinded, S, X> {
     activeRowId?: string;
     /**
      * Defines which cell in the table should be provided with an "active" styling.
-     * Expected format is `${row.kind}_${row.id}_${column.name}`.
+     * Expected format is `${row.kind}_${row.id}_${column.id}`.
      */
     activeCellId?: string;
 }

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).pt0.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/dist/components/Table/components/EditColumnsButton.js

@@ -21,17 +21,17 @@ function EditColumnsButton(props) {
             // Only include options that can be hidden and have the `name` property defined.
             if (!column.canHide)
                 return acc;
-            if (!column.name || column.name.length === 0) {
+            if (!column.id || column.id.length === 0) {
                 console.warn("Column is missing 'name' property required by the Edit Columns button", column);
                 return acc;
             }
             // Add current column as an option
-            return { ...acc, options: acc.options.concat({ label: column.name, value: column.name }) };
+            return { ...acc, options: acc.options.concat({ label: column.id, value: column.id }) };
         }, { options: [] });
     }, [allColumns]);
-    const selectedValues = selectedColumns.map((column) => column.name);
+    const selectedValues = selectedColumns.map((column) => column.id);
     const setSelectedValues = (0, react_1.useCallback)((values) => {
-        setSelectedColumns(allColumns.filter((column) => (column.canHide ? values.includes(column.name) : true)));
+        setSelectedColumns(allColumns.filter((column) => (column.canHide ? values.includes(column.id) : true)));
     }, [allColumns, setSelectedColumns]);
     return ((0, jsx_runtime_1.jsx)(OverlayTrigger_1.OverlayTrigger, Object.assign({}, props, { menuTriggerProps: menuTriggerProps, state: state, buttonRef: buttonRef }, tid, { children: (0, jsx_runtime_1.jsxs)("div", Object.assign({ css: {
                 ...Css_1.Css.bgWhite.py5.px3.maxwPx(380).bshBasic.$,

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

@@ -100,8 +100,8 @@ function RowImpl(props) {
                         : {}),
                 }
                 : {};
-            const cellId = `${row.kind}_${row.id}_${column.name}`;
-            const applyCellHighlight = cellHighlight && !!column.name && !isHeader && !isTotals;
+            const cellId = `${row.kind}_${row.id}_${column.id}`;
+            const applyCellHighlight = cellHighlight && !!column.id && !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

package/dist/components/Table/hooks/useColumns.js

@@ -6,27 +6,27 @@ const react_1 = require("react");
 const useSessionStorage_1 = require("../../../hooks/useSessionStorage");
 function useColumns(tableColumns, maybeStorageKey) {
     const { selectedColumns, hideColumns } = tableColumns.reduce((acc, column) => {
-        // Only include options that can be hidden and have the `name` property defined.
-        if (!column.name || column.name.length === 0) {
-            console.warn("Column is missing 'name' property required by the Edit Columns button", column);
+        // Only include options that can be hidden and have the `id` property defined.
+        if (!column.id || column.id.length === 0) {
+            console.warn("Column is missing 'id' property required by the Edit Columns button", column);
             return acc;
         }
         // Add hide-able columns
         if (column.canHide) {
-            acc.hideColumns.push(column.name);
+            acc.hideColumns.push(column.id);
         }
         // Add selected columns
         if (!column.canHide || (column.canHide && column.initVisible)) {
-            acc.selectedColumns.push(column.name);
+            acc.selectedColumns.push(column.id);
         }
         return { ...acc };
     }, { selectedColumns: [], hideColumns: [] });
     const storageKey = maybeStorageKey !== null && maybeStorageKey !== void 0 ? maybeStorageKey : (0, change_case_1.camelCase)(hideColumns.map((c) => c).join(""));
     const [storageNames, setStorageNames] = (0, useSessionStorage_1.useSessionStorage)(storageKey, selectedColumns);
-    const storageColumns = storageNames && storageNames.map((sc) => tableColumns.find((column) => column.name === sc));
+    const storageColumns = storageNames && storageNames.map((sc) => tableColumns.find((column) => column.id === sc));
     const [columns, setColumns] = (0, react_1.useState)(storageColumns);
     (0, react_1.useEffect)(() => {
-        setStorageNames(columns.map((column) => column.name));
+        setStorageNames(columns.map((column) => column.id));
     }, [columns]);
     return [columns, setColumns];
 }

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

@@ -64,8 +64,8 @@ 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;
+    /** Column id that will be used to generate an unique identifier for every row cell */
+    id?: string;
     /** Flag that will allow to know which columns are hide-able */
     canHide?: boolean;
     /** Flag that will allow to know which hide-able columns are visible on initial load */

package/package.json

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