@homebound/beam 2.250.1 → 2.252.0

package/dist/components/Chip.d.ts

@@ -1,6 +1,6 @@
 import { ReactNode } from "react";
 import { Margin, Only, Xss } from "../Css";
-type ChipType = "caution" | "warning" | "success" | "light" | "dark" | "neutral";
+type ChipType = "caution" | "warning" | "success" | "light" | "dark" | "neutral" | "darkMode";
 export declare const ChipTypes: Record<ChipType, ChipType>;
 export interface ChipProps<X> {
     text: string;

package/dist/components/Chip.js

@@ -14,6 +14,7 @@ exports.ChipTypes = {
     light: "light",
     dark: "dark",
     neutral: "neutral",
+    darkMode: "darkMode",
 };
 /** Kinda like a chip, but read-only, so no `onClick` or `hover`. */
 function Chip({ type = exports.ChipTypes.neutral, ...props }) {
@@ -38,4 +39,5 @@ const typeStyles = {
     light: Css_1.Css.bgWhite.$,
     dark: Css_1.Css.bgGray900.white.$,
     neutral: Css_1.Css.bgGray200.$,
+    darkMode: Css_1.Css.bgGray700.white.$,
 };

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

@@ -64,6 +64,8 @@ export interface GridStyleDef {
     allWhite?: boolean;
     bordered?: boolean;
     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";
 }
 export declare const getTableStyles: (props?: GridStyleDef) => GridStyle;
 export declare const totalsRowHeight = 52;

package/dist/components/Table/TableStyles.js

@@ -7,12 +7,13 @@ const utils_1 = require("../../utils");
 function memoizedTableStyles() {
     const cache = {};
     return (props = {}) => {
-        const { inlineEditing = false, grouped = false, rowHeight = "flexible", cellHighlight = false, allWhite = false, bordered = false, } = props;
+        const { inlineEditing = false, grouped = false, rowHeight = "flexible", cellHighlight = false, allWhite = false, bordered = false, vAlign = "center", } = props;
         const key = (0, utils_1.safeKeys)(props)
             .sort()
             .map((k) => `${k}_${props[k]}`)
             .join("|");
         if (!cache[key]) {
+            const alignItems = vAlign === "center" ? "center" : vAlign === "top" ? "flex-start" : "flex-end";
             const groupedLevels = {
                 0: {
                     cellCss: {
@@ -44,7 +45,7 @@ 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.aic.pxPx(12).boxShadow(`inset 0 -1px 0 ${Css_1.Palette.Gray200}`).$,
+                    ...Css_1.Css.gray900.xs.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.$ }),

package/dist/utils/rtl.d.ts

@@ -17,5 +17,18 @@ export declare function cellOf(r: RenderResult, tableTestId: string, rowNum: num
 export declare function cellAnd(r: RenderResult, row: number, column: number, testId: string): HTMLElement;
 export declare function row(r: RenderResult, row: number, tableTestId?: string): HTMLElement;
 export declare function rowAnd(r: RenderResult, rowNum: number, testId: string): HTMLElement;
+/** Intended to be used to generate a human-readable text
+ * representation of a GridTable using the markdown table syntax.
+ * * Example Use: expect(tableSnapshot(r)).toMatchInlineSnapshot(`
+      "
+      | Name                     | Value |
+      | ------------------------ | ----- |
+      | Row 1                    | 200   |
+      | Row 2 with a longer name | 300   |
+      | Row 3                    | 1000  |
+      "
+    `);
+ * */
+export declare function tableSnapshot(r: RenderResult): string;
 /** RTL wrapper for Beam's SuperDrawer/Modal context. */
 export declare const withBeamRTL: Wrapper;

package/dist/utils/rtl.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.withBeamRTL = exports.rowAnd = exports.row = exports.cellAnd = exports.cellOf = exports.cell = exports.render = exports.withRouter = exports.newLocation = exports.wait = exports.typeAndWait = exports.type = exports.select = exports.input = exports.getOptions = exports.click = exports.change = void 0;
+exports.withBeamRTL = exports.tableSnapshot = exports.rowAnd = exports.row = exports.cellAnd = exports.cellOf = exports.cell = exports.render = exports.withRouter = exports.newLocation = exports.wait = exports.typeAndWait = exports.type = exports.select = exports.input = exports.getOptions = exports.click = exports.change = void 0;
 const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
 const rtl_react_router_utils_1 = require("@homebound/rtl-react-router-utils");
 Object.defineProperty(exports, "newLocation", { enumerable: true, get: function () { return rtl_react_router_utils_1.newLocation; } });
@@ -60,6 +60,75 @@ function rowAnd(r, rowNum, testId) {
     return e.querySelector(`[data-testid="${testId}"]`) || fail(`Element not found ${(0, react_1.prettyDOM)(e)}`);
 }
 exports.rowAnd = rowAnd;
+/** Intended to be used to generate a human-readable text
+ * representation of a GridTable using the markdown table syntax.
+ * * Example Use: expect(tableSnapshot(r)).toMatchInlineSnapshot(`
+      "
+      | Name                     | Value |
+      | ------------------------ | ----- |
+      | Row 1                    | 200   |
+      | Row 2 with a longer name | 300   |
+      | Row 3                    | 1000  |
+      "
+    `);
+ * */
+function tableSnapshot(r) {
+    const tableEl = r.getByTestId("gridTable");
+    const dataRows = Array.from(tableEl.querySelectorAll("[data-gridrow]"));
+    const hasExpandableHeader = !!tableEl.querySelector(`[data-testid="expandableColumn"]`);
+    const tableDataAsStrings = dataRows.map((row) => {
+        return Array.from(row.childNodes).map(getTextFromTableCellNode);
+    });
+    return toMarkupTableString({ tableRows: tableDataAsStrings, hasExpandableHeader });
+}
+exports.tableSnapshot = tableSnapshot;
+function toMarkupTableString({ tableRows, hasExpandableHeader, }) {
+    // Find the largest width of each column to set a consistent width for each row
+    const columnWidths = tableRows.reduce((acc, row) => {
+        row.forEach((cell, columnIndex) => {
+            var _a, _b;
+            const cellWidth = (_a = cell === null || cell === void 0 ? void 0 : cell.length) !== null && _a !== void 0 ? _a : 0;
+            const currentMaxWidth = (_b = acc.get(columnIndex)) !== null && _b !== void 0 ? _b : 0;
+            if (cellWidth > currentMaxWidth || !currentMaxWidth)
+                acc.set(columnIndex, cellWidth);
+        });
+        return acc;
+    }, new Map());
+    const wrapTableRowEnds = (str) => `| ${str} |`;
+    const rowsWithPaddingAndDividers = tableRows.map((tableCells) => {
+        const formattedRow = tableCells
+            .map((cell, columnIndex) => {
+            var _a;
+            const cellWidth = (_a = columnWidths.get(columnIndex)) !== null && _a !== void 0 ? _a : 0;
+            return (cell === null || cell === void 0 ? void 0 : cell.padEnd(cellWidth, " ")) || "";
+        })
+            .join(" | ");
+        return wrapTableRowEnds(formattedRow);
+    });
+    const headerDivider = Array.from(columnWidths.values())
+        .map((width) => { var _a; return (_a = "-".repeat(width)) !== null && _a !== void 0 ? _a : ""; })
+        .join(" | ");
+    const headerDividerRowNumber = hasExpandableHeader ? 2 : 1;
+    rowsWithPaddingAndDividers.splice(headerDividerRowNumber, 0, wrapTableRowEnds(headerDivider));
+    // Pad a newline on top and bottom for cleaner diffs
+    return `\n${rowsWithPaddingAndDividers.join("\n")}\n`;
+}
+/** Prefer showing a `value` from a mocked input vs. the combined text content from an inputs markup */
+function getTextFromTableCellNode(node) {
+    if (node.nodeType === Node.ELEMENT_NODE) {
+        const element = node;
+        const maybeInput = element.getElementsByTagName("input")[0];
+        if (maybeInput)
+            return maybeInput.value;
+        const maybeTextarea = element.getElementsByTagName("textarea")[0];
+        if (maybeTextarea)
+            return maybeTextarea.value;
+        const maybeSelect = element.getElementsByTagName("select")[0];
+        if (maybeSelect)
+            return maybeSelect.value;
+    }
+    return node.textContent;
+}
 /** RTL wrapper for Beam's SuperDrawer/Modal context. */
 exports.withBeamRTL = {
     wrap: (c) => (0, jsx_runtime_1.jsx)(components_1.BeamProvider, { children: c }),

package/package.json

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