@homebound/beam 2.251.0 → 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/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.251.0",
+  "version": "2.252.0",
   "author": "Homebound",
   "license": "MIT",
   "main": "dist/index.js",