@homebound/beam 2.187.0 → 2.187.1

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

@@ -0,0 +1,148 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+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;
+const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
+const SortHeader_1 = require("../components/SortHeader");
+const Css_1 = require("../../../Css");
+const getInteractiveElement_1 = require("../../../utils/getInteractiveElement");
+/** If a column def return just string text for a given row, apply some default styling. */
+function toContent(maybeContent, isHeader, canSortColumn, isClientSideSorting, style, as, alignment) {
+    var _a, _b;
+    let content = isGridCellContent(maybeContent) ? maybeContent.content : maybeContent;
+    if (typeof content === "function") {
+        // Actually create the JSX by calling `content()` here (which should be as late as
+        // possible, i.e. only for visible rows if we're in a virtual table).
+        content = content();
+    }
+    else if (as === "virtual" && canSortColumn && isClientSideSorting && isJSX(content)) {
+        // When using client-side sorting, we call `applyRowFn` not only during rendering, but
+        // up-front against all rows (for the currently sorted column) to determine their
+        // sort values.
+        //
+        // Pedantically this means that any table using client-side sorting should not
+        // build JSX directly in its GridColumn functions, but this overhead is especially
+        // noticeable for large/virtualized tables, so we only enforce using functions
+        // for those tables.
+        throw new Error("GridTables with as=virtual & sortable columns should use functions that return JSX, instead of JSX");
+    }
+    content =
+        isGridCellContent(maybeContent) && !!maybeContent.onClick
+            ? (0, getInteractiveElement_1.getButtonOrLink)(content, maybeContent.onClick, {
+                css: Css_1.Css.maxw100.lightBlue700.ta("inherit").if(((_a = style === null || style === void 0 ? void 0 : style.presentationSettings) === null || _a === void 0 ? void 0 : _a.wrap) === false).truncate.$,
+            })
+            : content;
+    if (content && typeof content === "string" && isHeader && canSortColumn) {
+        return (0, jsx_runtime_1.jsx)(SortHeader_1.SortHeader, { content: content, iconOnLeft: alignment === "right" }, void 0);
+    }
+    else if (content && ((_b = style === null || style === void 0 ? void 0 : style.presentationSettings) === null || _b === void 0 ? void 0 : _b.wrap) === false && typeof content === "string") {
+        // In order to truncate the text properly, then we need to wrap it in another element
+        // as our cell element is a flex container, which don't allow for applying truncation styles directly on it.
+        return ((0, jsx_runtime_1.jsx)("span", Object.assign({ css: Css_1.Css.truncate.mw0.$, title: content }, { children: content }), void 0));
+    }
+    else if (style.emptyCell && isContentEmpty(content)) {
+        // If the content is empty and the user specified an `emptyCell` node, return that.
+        return style.emptyCell;
+    }
+    return content;
+}
+exports.toContent = toContent;
+function isGridCellContent(content) {
+    return typeof content === "object" && !!content && "content" in content;
+}
+exports.isGridCellContent = isGridCellContent;
+const emptyValues = ["", null, undefined];
+function isContentEmpty(content) {
+    return emptyValues.includes(content);
+}
+/** Return the content for a given column def applied to a given row. */
+function applyRowFn(column, row, api, level) {
+    // Usually this is a function to apply against the row, but sometimes it's a hard-coded value, i.e. for headers
+    const maybeContent = column[row.kind];
+    if (typeof maybeContent === "function") {
+        // Auto-destructure data
+        return maybeContent(row["data"], { row: row, api, level });
+    }
+    else {
+        return maybeContent;
+    }
+}
+exports.applyRowFn = applyRowFn;
+exports.ASC = "ASC";
+exports.DESC = "DESC";
+exports.emptyCell = { content: () => (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {}, void 0), 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 : {}),
+        ...(columnIndex === columns.length - 1 ? style.lastCellCss : {}),
+    };
+}
+exports.getFirstOrLastCellCss = getFirstOrLastCellCss;
+/** A heuristic to detect the result of `React.createElement` / i.e. JSX. */
+function isJSX(content) {
+    return typeof content === "object" && content && "type" in content && "props" in content;
+}
+const alignmentToJustify = {
+    left: "flex-start",
+    center: "center",
+    right: "flex-end",
+};
+const alignmentToTextAlign = {
+    left: "left",
+    center: "center",
+    right: "right",
+};
+function getAlignment(column, maybeContent) {
+    return (isGridCellContent(maybeContent) && maybeContent.alignment) || column.align || "left";
+}
+exports.getAlignment = getAlignment;
+// For alignment, use: 1) cell def, else 2) column def, else 3) left.
+function getJustification(column, maybeContent, as, alignment) {
+    // Always apply text alignment.
+    const textAlign = Css_1.Css.add("textAlign", alignmentToTextAlign[alignment]).$;
+    if (as === "table") {
+        return textAlign;
+    }
+    return { ...Css_1.Css.jc(alignmentToJustify[alignment]).$, ...textAlign };
+}
+exports.getJustification = getJustification;
+/** Look at a row and get its filter value. */
+function filterValue(value) {
+    let maybeFn = value;
+    if (value && typeof value === "object") {
+        if ("value" in value) {
+            maybeFn = value.value;
+        }
+        else if ("content" in value) {
+            maybeFn = value.content;
+        }
+    }
+    // Watch for functions that need to read from a potentially-changing proxy
+    if (maybeFn instanceof Function) {
+        return maybeFn();
+    }
+    return maybeFn;
+}
+function maybeApplyFunction(row, maybeFn) {
+    return typeof maybeFn === "function" ? maybeFn(row) : maybeFn;
+}
+exports.maybeApplyFunction = maybeApplyFunction;
+function matchesFilter(maybeContent, filter) {
+    let value = filterValue(maybeContent);
+    if (typeof value === "string") {
+        return value.toLowerCase().includes(filter.toLowerCase());
+    }
+    else if (typeof value === "number") {
+        return Number(filter) === value;
+    }
+    return false;
+}
+exports.matchesFilter = matchesFilter;

package/dist/components/Table/{visitor.d.ts → utils/visitor.d.ts}

@@ -1,2 +1,2 @@
-import { GridDataRow } from "./GridTable";
+import { GridDataRow } from "../components/Row";
 export declare function visit(rows: GridDataRow<any>[], fn: (row: GridDataRow<any>) => void): void;

package/package.json

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

package/dist/components/Table/columns.js

@@ -1,84 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.collapseColumn = exports.selectColumn = exports.actionColumn = exports.numericColumn = exports.dateColumn = exports.column = void 0;
-const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
-const CollapseToggle_1 = require("./CollapseToggle");
-const GridTable_1 = require("./GridTable");
-const SelectToggle_1 = require("./SelectToggle");
-const index_1 = require("../../utils/index");
-/** Provides default styling for a GridColumn representing a Date. */
-function column(columnDef) {
-    return { ...columnDef };
-}
-exports.column = column;
-/** Provides default styling for a GridColumn representing a Date. */
-function dateColumn(columnDef) {
-    return { ...columnDef, align: "left" };
-}
-exports.dateColumn = dateColumn;
-/**
- * Provides default styling for a GridColumn representing a Numeric value (Price, percentage, PO #, etc.). */
-function numericColumn(columnDef) {
-    return { ...columnDef, align: "right" };
-}
-exports.numericColumn = numericColumn;
-/** Provides default styling for a GridColumn representing an Action. */
-function actionColumn(columnDef) {
-    return { clientSideSort: false, ...columnDef, align: "center", isAction: true, wrapAction: false };
-}
-exports.actionColumn = actionColumn;
-/**
- * Provides default styling for a GridColumn containing a checkbox.
- *
- * We allow either no `columnDef` at all, or a partial column def (i.e. to say a Totals row should
- * not have a `SelectToggle`, b/c we can provide the default behavior a `SelectToggle` for basically
- * all rows.
- */
-function selectColumn(columnDef) {
-    const base = {
-        ...nonKindDefaults(),
-        clientSideSort: false,
-        align: "center",
-        // Defining `w: 48px` to accommodate for the `16px` wide checkbox and `16px` of padding on either side.
-        w: "48px",
-        wrapAction: false,
-        isAction: true,
-        // Use any of the user's per-row kind methods if they have them.
-        ...columnDef,
-    };
-    return (0, index_1.newMethodMissingProxy)(base, (key) => {
-        return (data, { row }) => ({
-            content: (0, jsx_runtime_1.jsx)(SelectToggle_1.SelectToggle, { id: row.id, disabled: row.selectable === false }, void 0),
-        });
-    });
-}
-exports.selectColumn = selectColumn;
-/**
- * Provides default styling for a GridColumn containing a collapse icon.
- *
- * We allow either no `columnDef` at all, or a partial column def (i.e. to say a Totals row should
- * not have a `CollapseToggle`, b/c we can provide the default behavior a `CollapseToggle` for basically
- * all rows.
- */
-function collapseColumn(columnDef) {
-    const base = {
-        ...nonKindDefaults(),
-        clientSideSort: false,
-        align: "center",
-        // Defining `w: 38px` based on the designs
-        w: "38px",
-        wrapAction: false,
-        isAction: true,
-        ...columnDef,
-    };
-    return (0, index_1.newMethodMissingProxy)(base, (key) => {
-        return (data, { row, level }) => ({
-            content: (0, jsx_runtime_1.jsx)(CollapseToggle_1.CollapseToggle, { row: row, compact: level > 0 }, void 0),
-        });
-    });
-}
-exports.collapseColumn = collapseColumn;
-// Keep keys like `w` and `mw` from hitting the method missing proxy
-function nonKindDefaults() {
-    return Object.fromEntries(GridTable_1.nonKindGridColumnKeys.map((key) => [key, undefined]));
-}

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

@@ -1,15 +0,0 @@
-import { GridStyle } from ".";
-/** Our original table look & feel/style. */
-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. */
-export declare const cardStyle: GridStyle;
-export interface GridStyleDef {
-    inlineEditing?: boolean;
-    grouped?: boolean;
-    rowHeight?: "fixed" | "flexible";
-    /** Enables cells Highlight and hover */
-    cellHighlight?: boolean;
-}
-export declare const getTableStyles: (props?: GridStyleDef) => GridStyle;