@homebound/beam 2.94.0 → 2.95.3

package/dist/components/Table/CollapseToggle.js

@@ -7,9 +7,14 @@ const components_1 = require("..");
 function CollapseToggle(props) {
     const { row } = props;
     const { isCollapsed, toggleCollapsed } = (0, react_1.useContext)(components_1.GridCollapseContext);
-    const toggleOnClick = (0, react_1.useCallback)(() => toggleCollapsed(row.id), [row.id, toggleCollapsed]);
-    const iconKey = isCollapsed(row.id) ? "chevronRight" : "chevronDown";
-    const headerIconKey = isCollapsed(row.id) ? "chevronsRight" : "chevronsDown";
+    const [, setTick] = (0, react_1.useState)(0);
+    const currentlyCollapsed = isCollapsed(row.id);
+    const toggleOnClick = (0, react_1.useCallback)(() => {
+        toggleCollapsed(row.id);
+        setTick(Date.now());
+    }, [row.id, currentlyCollapsed, toggleCollapsed]);
+    const iconKey = currentlyCollapsed ? "chevronRight" : "chevronDown";
+    const headerIconKey = currentlyCollapsed ? "chevronsRight" : "chevronsDown";
     const isHeader = row.kind === "header";
     if (!isHeader && (!props.row.children || props.row.children.length === 0)) {
         return null;

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>;
@@ -302,13 +303,17 @@ export declare type GridDataRow<R extends Kinded> = {
 /** Return the content for a given column def applied to a given row. */
 export declare function applyRowFn<R extends Kinded>(column: GridColumn<R>, row: GridDataRow<R>): ReactNode | GridCellContent;
 /**
- * Provides each row access to its `collapsed` current state and toggle.
+ * Provides each row access to a method to check if it is collapsed and toggle it's collapsed state.
  *
  * Calling `toggleCollapse` will keep the row itself showing, but will hide any
  * children rows (specifically those that have this row's `id` in their `parentIds`
  * prop).
+ *
+ * headerCollapsed is used to trigger rows at the root level to rerender their chevron when all are
+ * collapsed/expanded.
  */
 declare type GridCollapseContextProps = {
+    headerCollapsed: boolean;
     isCollapsed: (id: string) => boolean;
     toggleCollapsed(id: string): void;
 };

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 } = (_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, 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) {
@@ -544,8 +565,9 @@ const defaultRenderFn = (as) => (key, css, content) => {
     return ((0, jsx_runtime_1.jsx)(Row, Object.assign({ css: { ...css, ...tableRowStyles(as) } }, { children: content }), key));
 };
 exports.GridCollapseContext = react_1.default.createContext({
-    isCollapsed: (id) => false,
-    toggleCollapsed: (id) => { },
+    headerCollapsed: false,
+    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) => {
@@ -584,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") {
@@ -687,7 +709,7 @@ function useToggleIds(rows, persistCollapse) {
             // Trigger a re-render
             setTick(collapsedIds.join(","));
         };
-        return { isCollapsed, toggleCollapsed: toggleAll };
+        return { headerCollapsed: isCollapsed("header"), isCollapsed, toggleCollapsed: toggleAll };
     }, 
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [rows]);
@@ -709,10 +731,10 @@ function useToggleIds(rows, persistCollapse) {
             // Trigger a re-render
             setTick(collapsedIds.join(","));
         };
-        return { isCollapsed, toggleCollapsed: toggleRow };
+        return { headerCollapsed: isCollapsed("header"), isCollapsed, toggleCollapsed: toggleRow };
     }, 
     // eslint-disable-next-line react-hooks/exhaustive-deps
-    []);
+    [collapseAllContext.isCollapsed("header")]);
     // Return a copy of the list, b/c we want external useMemos that do explicitly use the
     // entire list as a dep to re-render whenever the list is changed (which they need to
     // see as new list identity).

package/dist/inputs/internal/SelectFieldBase.d.ts

@@ -43,4 +43,6 @@ export interface BeamSelectFieldBaseProps<T, V extends Value> extends BeamFocusa
     nothingSelectedText?: string;
     /** When set the SelectField is expected to be put on a darker background */
     contrast?: boolean;
+    /** Placeholder content */
+    placeholder?: string;
 }

package/package.json

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