@homebound/beam 2.95.1 → 2.96.1

package/README.md

@@ -23,7 +23,7 @@ _To see the latest designs, check out the [Figma](https://www.figma.com/file/aWU
 
 ## Beam's API Design Approach
 
-Beam is specifically "Homebound's design system". Given this extremely narrow purpose, we can lean into the simplicity of:
+Beam is specifically "Homebound's Design System". Given this extremely narrow purpose, we can lean into the simplicity of:
 
 - We don't need to support everything for everyone
 - We can prefer API/UX consistency & simplicity over configuration & complexity

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

@@ -209,7 +209,7 @@ declare type GridRowKind<R extends Kinded, P extends R["kind"]> = DiscriminateUn
  * - For server-side sorting, it's the sortKey to pass back to the server to
  * request "sort by this column".
  *
- * - For client-side sorting, it the type `number`, to represent the current
+ * - For client-side sorting, it's type `number`, to represent the current
  * column being sorted, in which case we use the GridCellContent.value.
  */
 export declare type GridColumn<R extends Kinded, S = {}> = {
@@ -270,7 +270,8 @@ export declare type GridCellAlignment = "left" | "right" | "center";
  * primitive value for filtering and sorting.
  */
 export declare type GridCellContent = {
-    content: ReactNode;
+    /** The JSX content of the cell. Virtual tables that client-side sort should use a function to avaid perf overhead. */
+    content: ReactNode | (() => ReactNode);
     alignment?: GridCellAlignment;
     /** Allow value to be a function in case it's a dynamic value i.e. reading from an inline-edited proxy. */
     value?: MaybeFn<number | string | Date | boolean | null | undefined>;

package/dist/components/Table/GridTable.js

@@ -120,7 +120,7 @@ function GridTable(props) {
                     stickyOffset,
                     openCards: nestedCards ? nestedCards.currentOpenCards() : undefined,
                     ...sortProps,
-                }), `${row.kind}-${row.id}`) }), void 0));
+                }), `${row.kind}-${row.id}`) }), `${row.kind}-${row.id}`));
         }
         // Split out the header rows from the data rows so that we can put an `infoMessage` in between them (if needed).
         const headerRows = [];
@@ -256,11 +256,14 @@ function renderTable(style, id, columns, headerRows, filteredRows, firstRowMessa
  * [3]: https://github.com/tannerlinsley/react-virtual/issues/108
  */
 function renderVirtual(style, id, columns, headerRows, filteredRows, firstRowMessage, stickyHeader, firstLastColumnWidth, xss, virtuosoRef) {
-    var _a;
-    const { paddingBottom, ...otherRootStyles } = (_a = style.rootCss) !== null && _a !== void 0 ? _a : {};
+    const { footerStyle, listStyle } = (0, react_1.useMemo)(() => {
+        var _a;
+        const { paddingBottom, ...otherRootStyles } = (_a = style.rootCss) !== null && _a !== void 0 ? _a : {};
+        return { footerStyle: { paddingBottom }, listStyle: { ...style, rootCss: otherRootStyles } };
+    }, [style]);
     return ((0, jsx_runtime_1.jsx)(react_virtuoso_1.Virtuoso, { ref: virtuosoRef, components: {
-            List: VirtualRoot({ ...style, rootCss: otherRootStyles }, columns, id, firstLastColumnWidth, xss),
-            Footer: () => (0, jsx_runtime_1.jsx)("div", { css: { paddingBottom } }, void 0),
+            List: VirtualRoot(listStyle, columns, id, firstLastColumnWidth, xss),
+            Footer: () => (0, jsx_runtime_1.jsx)("div", { css: footerStyle }, void 0),
         }, 
         // Pin/sticky both the header row(s) + firstRowMessage to the top
         topItemCount: (stickyHeader ? headerRows.length : 0) + (firstRowMessage ? 1 : 0), itemSize: (el) => {
@@ -297,7 +300,7 @@ function renderVirtual(style, id, columns, headerRows, filteredRows, firstRowMes
  * (solely to capture as params that we can't pass through react-virtuoso's API as props).
  */
 const VirtualRoot = (0, memoize_one_1.default)((gs, columns, id, firstLastColumnWidth, xss) => {
-    return react_1.default.forwardRef(({ style, children }, ref) => {
+    return react_1.default.forwardRef(function VirtualRoot({ style, children }, ref) {
         // This re-renders each time we have new children in the view port
         return ((0, jsx_runtime_1.jsx)("div", Object.assign({ ref: ref, style: style, css: {
                 ...Css_1.Css.dg.gtc(calcVirtualGridColumns(columns, firstLastColumnWidth)).$,
@@ -400,7 +403,7 @@ function maybeAddCardColumns(sizes, firstLastColumnWidth) {
 }
 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 = (isContentAndSettings(maybeContent) && maybeContent.indent) || (columnIndex === 0 && (rowStyle === null || rowStyle === void 0 ? void 0 : rowStyle.indent));
+    const indent = (isGridCellContent(maybeContent) && maybeContent.indent) || (columnIndex === 0 && (rowStyle === null || rowStyle === void 0 ? void 0 : rowStyle.indent));
     return indent === 1 ? style.indentOneCss || {} : indent === 2 ? style.indentTwoCss || {} : {};
 }
 function getFirstOrLastCellCss(style, columnIndex, columns) {
@@ -448,10 +451,10 @@ function GridRow(props) {
                     return;
                 }
                 const maybeContent = applyRowFn(column, row);
-                currentColspan = isContentAndSettings(maybeContent) ? (_a = maybeContent.colspan) !== null && _a !== void 0 ? _a : 1 : 1;
+                currentColspan = isGridCellContent(maybeContent) ? (_a = maybeContent.colspan) !== null && _a !== void 0 ? _a : 1 : 1;
                 const canSortColumn = ((sorting === null || sorting === void 0 ? void 0 : sorting.on) === "client" && column.clientSideSort !== false) ||
                     ((sorting === null || sorting === void 0 ? void 0 : sorting.on) === "server" && !!column.serverSideSortKey);
-                const content = toContent(maybeContent, isHeader, canSortColumn, style);
+                const content = toContent(maybeContent, isHeader, canSortColumn, (sorting === null || sorting === void 0 ? void 0 : sorting.on) === "client", style, as);
                 (0, sortRows_1.ensureClientSideSortValueIsSortable)(sorting, isHeader, column, columnIndex, maybeContent);
                 // 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
@@ -499,26 +502,44 @@ const ObservedGridRow = react_1.default.memo((props) => ((0, jsx_runtime_1.jsx)(
         // Invoke this just as a regular function so that Observer sees the proxy access's
         return GridRow(props);
     } }, void 0)));
+/** 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;
+}
 /** If a column def return just string text for a given row, apply some default styling. */
-function toContent(content, isHeader, canSortColumn, style) {
-    if (typeof content === "string" && isHeader && canSortColumn) {
+function toContent(content, isHeader, canSortColumn, isClientSideSorting, style, as) {
+    content = isGridCellContent(content) ? content.content : content;
+    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");
+    }
+    if (content && typeof content === "string" && isHeader && canSortColumn) {
         return (0, jsx_runtime_1.jsx)(SortHeader_1.SortHeader, { content: 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;
     }
-    else if (isContentAndSettings(content)) {
-        return content.content;
-    }
     return content;
 }
-function isContentAndSettings(content) {
+function isGridCellContent(content) {
     return typeof content === "object" && !!content && "content" in content;
 }
 const emptyValues = ["", null, undefined];
 function isContentEmpty(content) {
-    return emptyValues.includes(isContentAndSettings(content) ? content.content : content);
+    return emptyValues.includes(content);
 }
 /** Return the content for a given column def applied to a given row. */
 function applyRowFn(column, row) {
@@ -545,8 +566,8 @@ const defaultRenderFn = (as) => (key, css, content) => {
 };
 exports.GridCollapseContext = react_1.default.createContext({
     headerCollapsed: false,
-    isCollapsed: (id) => false,
-    toggleCollapsed: (id) => { },
+    isCollapsed: () => false,
+    toggleCollapsed: () => { },
 });
 /** Sets up the `GridContext` so that header cells can access the current sort settings. */
 const headerRenderFn = (columns, column, sortState, setSortKey, as) => (key, css, content) => {
@@ -585,7 +606,7 @@ const alignmentToTextAlign = {
 };
 // For alignment, use: 1) cell def, else 2) column def, else 3) left.
 function getJustification(column, maybeContent, as) {
-    const alignment = (isContentAndSettings(maybeContent) && maybeContent.alignment) || column.align || "left";
+    const alignment = (isGridCellContent(maybeContent) && maybeContent.alignment) || column.align || "left";
     // Always apply text alignment.
     const textAlign = Css_1.Css.add("textAlign", alignmentToTextAlign[alignment]).$;
     if (as === "table") {

package/dist/inputs/ChipSelectField.js

@@ -42,7 +42,7 @@ function ChipSelectField(props) {
         },
         onBlur: (e) => {
             // Do not call onBlur if focus moved to within the Popover
-            if (popoverRef.current && popoverRef.current.contains(e.relatedTarget)) {
+            if ((popoverRef.current && popoverRef.current.contains(e.relatedTarget)) || showInput) {
                 return;
             }
             (0, utils_1.maybeCall)(onBlur);

package/dist/inputs/SelectField.mock.js

@@ -7,7 +7,7 @@ const utils_1 = require("../utils");
 function SelectField(props) {
     const { getOptionValue = (o) => o.id, // if unset, assume O implements HasId
     getOptionLabel = (o) => o.name, // if unset, assume O implements HasName
-    value, options, onSelect, readOnly = false, errorMsg, onBlur, onFocus, disabled, } = props;
+    value, options, onSelect, readOnly = false, errorMsg, onBlur, onFocus, disabled, disabledOptions = [], } = props;
     const tid = (0, utils_1.useTestIds)(props, "select");
     const currentOption = options.find((o) => getOptionValue(o) === value) || options[0];
     return ((0, jsx_runtime_1.jsxs)("select", Object.assign({}, tid, { value: 
@@ -24,7 +24,7 @@ function SelectField(props) {
         }, 
         // Read Only does not apply to `select` fields, instead we'll add in disabled for tests to verify.
         disabled: !!(disabled || readOnly), "data-error": !!errorMsg, "data-errormsg": errorMsg, "data-readonly": readOnly }, { children: [(0, jsx_runtime_1.jsx)("option", { disabled: true, value: "" }, void 0), options.map((option, i) => {
-                return ((0, jsx_runtime_1.jsx)("option", Object.assign({ value: `${getOptionValue(option)}` }, { children: getOptionLabel(option) }), i));
+                return ((0, jsx_runtime_1.jsx)("option", Object.assign({ value: `${getOptionValue(option)}`, disabled: disabledOptions.includes(getOptionValue(option).toString()) }, { children: getOptionLabel(option) }), i));
             })] }), void 0));
 }
 exports.SelectField = SelectField;

package/package.json

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