@homebound/beam 2.118.0 → 2.118.3

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

@@ -149,6 +149,7 @@ export interface GridTableProps<R extends Kinded, S, X> {
     /** Whether the header row should be sticky. */
     stickyHeader?: boolean;
     stickyOffset?: string;
+    /** Configures sorting via a hash, does not need to be stable. */
     sorting?: GridSortConfig<S>;
     /** Shown in the first row slot, if there are no rows to show, i.e. 'No rows found'. */
     fallbackMessage?: string;

package/dist/components/Table/GridTable.js

@@ -85,7 +85,7 @@ exports.setGridTableDefaults = setGridTableDefaults;
  */
 function GridTable(props) {
     var _a, _b, _c, _d;
-    const { id = "gridTable", as = "div", columns, rows, style = defaults.style, rowStyles, stickyHeader = defaults.stickyHeader, stickyOffset = "0", xss, sorting, filter, filterMaxRows, fallbackMessage = "No rows found.", infoMessage, setRowCount, observeRows, persistCollapse, api: callerApi, resizeTarget, activeRowId, } = props;
+    const { id = "gridTable", as = "div", columns, rows, style = defaults.style, rowStyles, stickyHeader = defaults.stickyHeader, stickyOffset = "0", xss, filter, filterMaxRows, fallbackMessage = "No rows found.", infoMessage, setRowCount, observeRows, persistCollapse, api: callerApi, resizeTarget, activeRowId, } = props;
     // Create a ref that always contains the latest rows, for our effectively-singleton RowState to use
     const rowsRef = (0, react_1.useRef)(rows);
     rowsRef.current = rows;
@@ -130,14 +130,14 @@ function GridTable(props) {
     const columnSizes = (0, columnSizes_1.useSetupColumnSizes)(style, columns, tableRef, resizeTarget);
     // Make a single copy of our current collapsed state, so we'll have a single observer.
     const collapsedIds = (0, hooks_1.useComputed)(() => rowState.collapsedIds, [rowState]);
-    const [sortState, setSortKey] = (0, useSortState_1.useSortState)(columns, sorting);
+    const [sortState, setSortKey, sortOn] = (0, useSortState_1.useSortState)(columns, props.sorting);
     const maybeSorted = (0, react_1.useMemo)(() => {
-        if ((sorting === null || sorting === void 0 ? void 0 : sorting.on) === "client" && sortState) {
+        if (sortOn === "client" && sortState) {
             // If using client-side sort, the sortState use S = number
             return (0, sortRows_1.sortRows)(columns, rows, sortState);
         }
         return rows;
-    }, [columns, rows, sorting, sortState]);
+    }, [columns, rows, sortOn, sortState]);
     // Filter rows - ensures parent rows remain in the list if any children match the filter.
     const filterRows = (0, react_1.useCallback)((acc, row) => {
         var _a, _b, _c;
@@ -163,13 +163,13 @@ function GridTable(props) {
             }
         }
         return acc;
-    }, [filter, collapsedIds]);
+    }, [filter, collapsedIds, columns]);
     // Flatten + component-ize the sorted rows.
     let [headerRows, filteredRows] = (0, react_1.useMemo)(() => {
         function makeRowComponent(row, level) {
             // We only pass sortState to header rows, b/c non-headers rows shouldn't have to re-render on sorting
             // changes, and so by not passing the sortProps, it means the data rows' React.memo will still cache them.
-            const sortProps = row.kind === "header" ? { sorting, sortState, setSortKey } : { sorting };
+            const sortProps = row.kind === "header" ? { sortOn, sortState, setSortKey } : { sortOn };
             const RowComponent = observeRows ? ObservedGridRow : MemoizedGridRow;
             return ((0, jsx_runtime_1.jsx)(RowComponent, Object.assign({}, {
                 as,
@@ -222,10 +222,10 @@ function GridTable(props) {
         as,
         maybeSorted,
         columns,
-        filter,
+        filterRows,
         style,
         rowStyles,
-        sorting,
+        sortOn,
         setSortKey,
         sortState,
         stickyHeader,
@@ -240,7 +240,7 @@ function GridTable(props) {
         tooManyClientSideRows = true;
         filteredRows = filteredRows.slice(0, filterMaxRows);
     }
-    rowState.visibleRows.replace(filteredRows.map(([row]) => { var _a; return (_a = row === null || row === void 0 ? void 0 : row.id) !== null && _a !== void 0 ? _a : ""; }));
+    rowState.setVisibleRows(filteredRows.map(([row]) => { var _a; return (_a = row === null || row === void 0 ? void 0 : row.id) !== null && _a !== void 0 ? _a : ""; }));
     // Push back to the caller a way to ask us where a row is.
     const { rowLookup } = props;
     if (rowLookup) {
@@ -484,7 +484,7 @@ function getFirstOrLastCellCss(style, columnIndex, columns) {
 // We extract GridRow to its own mini-component primarily so we can React.memo'ize it.
 function GridRow(props) {
     var _a;
-    const { as, columns, row, style, rowStyles, stickyHeader, stickyOffset, sorting, sortState, setSortKey, openCards, columnSizes, level, getCount, api, ...others } = props;
+    const { as, columns, row, style, rowStyles, stickyHeader, stickyOffset, sortOn, sortState, setSortKey, openCards, columnSizes, level, getCount, api, ...others } = props;
     const { rowState } = (0, react_1.useContext)(RowState_1.RowStateContext);
     const isActive = (0, hooks_1.useComputed)(() => rowState.activeRowId === `${row.kind}_${row.id}`, [row, rowState]);
     // We treat the "header" kind as special for "good defaults" styling
@@ -527,12 +527,12 @@ function GridRow(props) {
             }
             const maybeContent = applyRowFn(column, row, api);
             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 canSortColumn = (sortOn === "client" && column.clientSideSort !== false) ||
+                (sortOn === "server" && !!column.serverSideSortKey);
             const alignment = getAlignment(column, maybeContent);
             const justificationCss = getJustification(column, maybeContent, as, alignment);
-            const content = toContent(maybeContent, isHeader, canSortColumn, (sorting === null || sorting === void 0 ? void 0 : sorting.on) === "client", style, as, alignment);
-            (0, sortRows_1.ensureClientSideSortValueIsSortable)(sorting, isHeader, column, columnIndex, maybeContent);
+            const content = toContent(maybeContent, isHeader, canSortColumn, sortOn === "client", style, as, alignment);
+            (0, sortRows_1.ensureClientSideSortValueIsSortable)(sortOn, isHeader, column, columnIndex, maybeContent);
             const maybeNestedCardColumnIndex = columnIndex + (style.nestedCards ? 1 : 0);
             const maybeSticky = (_b = ((isGridCellContent(maybeContent) && maybeContent.sticky) || column.sticky)) !== null && _b !== void 0 ? _b : undefined;
             const maybeStickyColumnStyles = maybeSticky && columnSizes

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

@@ -1,4 +1,3 @@
-import { ObservableSet } from "mobx";
 import React, { MutableRefObject } from "react";
 import { GridDataRow } from "./GridTable";
 export declare type SelectedState = "checked" | "unchecked" | "partial";
@@ -22,12 +21,13 @@ export declare class RowState {
     private persistCollapse;
     private readonly collapsedRows;
     private readonly selectedRows;
-    visibleRows: ObservableSet<string>;
+    private visibleRows;
     activeRowId: string | undefined;
     /**
      * Creates the `RowState` for a given `GridTable`.
      */
     constructor(rows: MutableRefObject<GridDataRow<any>[]>, persistCollapse: string | undefined, activeRowId: string | undefined);
+    setVisibleRows(rowIds: string[]): void;
     get selectedIds(): string[];
     getSelected(id: string): SelectedState;
     selectRow(id: string, selected: boolean): void;

package/dist/components/Table/RowState.js

@@ -45,6 +45,16 @@ class RowState {
             this.selectedRows.merge(map);
         }, { equals: mobx_1.comparer.shallow });
     }
+    setVisibleRows(rowIds) {
+        // ObservableSet doesn't seem to do a `diff` inside `replace` before firing
+        // observers/reactions that watch it, which can lead to render loops with the
+        // application page is observing `GridTableApi.getSelectedRows`, and merely
+        // the act of rendering GridTable (w/o row changes) causes it's `useComputed`
+        // to be triggered.
+        if (!mobx_1.comparer.shallow(rowIds, [...this.visibleRows.values()])) {
+            this.visibleRows.replace(rowIds);
+        }
+    }
     get selectedIds() {
         // Return only ids that are fully checked, i.e. not partial
         const ids = [...this.selectedRows.entries()]

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

@@ -1,5 +1,5 @@
 import { ReactNode } from "react";
-import { GridCellContent, GridColumn, GridDataRow, GridSortConfig, Kinded } from "./GridTable";
-import { SortState } from "./useSortState";
+import { GridCellContent, GridColumn, GridDataRow, Kinded } from "./GridTable";
+import { SortOn, SortState } from "./useSortState";
 export declare function sortRows<R extends Kinded>(columns: GridColumn<R>[], rows: GridDataRow<R>[], sortState: SortState<number>): GridDataRow<R>[];
-export declare function ensureClientSideSortValueIsSortable(sorting: GridSortConfig<any> | undefined, isHeader: boolean, column: GridColumn<any>, idx: number, maybeContent: ReactNode | GridCellContent): void;
+export declare function ensureClientSideSortValueIsSortable(sortOn: SortOn, isHeader: boolean, column: GridColumn<any>, idx: number, maybeContent: ReactNode | GridCellContent): void;

package/dist/components/Table/sortRows.js

@@ -64,11 +64,8 @@ function sortValue(value) {
     }
     return maybeFn;
 }
-function ensureClientSideSortValueIsSortable(sorting, isHeader, column, idx, maybeContent) {
-    if (process.env.NODE_ENV !== "production" &&
-        !isHeader &&
-        (sorting === null || sorting === void 0 ? void 0 : sorting.on) === "client" &&
-        column.clientSideSort !== false) {
+function ensureClientSideSortValueIsSortable(sortOn, isHeader, column, idx, maybeContent) {
+    if (process.env.NODE_ENV !== "production" && !isHeader && sortOn === "client" && column.clientSideSort !== false) {
         const value = sortValue(maybeContent);
         if (!canClientSideSort(value)) {
             throw new Error(`Column ${idx} passed an unsortable value, use GridCellContent or clientSideSort=false`);

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

@@ -8,6 +8,7 @@ import { Direction, GridColumn, GridSortConfig, Kinded } from "./GridTable";
  * b) it's index in the `columns` array, if client-side sorting
  */
 export declare type SortState<S> = readonly [S, Direction];
+export declare type SortOn = "client" | "server" | undefined;
 /** Small custom hook that wraps the "setSortColumn inverts the current sort" logic. */
-export declare function useSortState<R extends Kinded, S>(columns: GridColumn<R, S>[], sorting?: GridSortConfig<S>): [SortState<S> | undefined, (value: S) => void];
+export declare function useSortState<R extends Kinded, S>(columns: GridColumn<R, S>[], sorting?: GridSortConfig<S>): [SortState<S> | undefined, (value: S) => void, SortOn];
 export declare function deriveSortState<S>(currentSortState: SortState<S> | undefined, clickedKey: S, initialSortState: SortState<S> | undefined): SortState<S> | undefined;

package/dist/components/Table/useSortState.js

@@ -28,20 +28,26 @@ function useSortState(columns, sorting) {
         else {
             return sorting === null || sorting === void 0 ? void 0 : sorting.value;
         }
-    }, [sorting, columns]);
+    }, 
+    // We want to allow the user to not memoize `GridTableProps.sorting` b/c for the
+    // initialSortState calc, it's just a bunch of surely hard-coded primitives like
+    // sort on client/server, which column is initial.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [columns]);
     const [sortState, setSortState] = (0, react_1.useState)(initialSortState);
     // Make a custom setSortKey that is useState-like but contains the ASC->DESC->RESET logic.
+    const onSort = (sorting === null || sorting === void 0 ? void 0 : sorting.on) === "server" ? sorting.onSort : undefined;
     const setSortKey = (0, react_1.useCallback)((clickedKey) => {
         const newState = deriveSortState(sortState, clickedKey, initialSortState);
         setSortState(newState);
-        if ((sorting === null || sorting === void 0 ? void 0 : sorting.on) === "server") {
+        if (onSort) {
             const [newKey, newDirection] = newState !== null && newState !== void 0 ? newState : [undefined, undefined];
-            sorting.onSort(newKey, newDirection);
+            onSort(newKey, newDirection);
         }
     }, 
     // Note that sorting.onSort is not listed here, so we bind to whatever the 1st sorting.onSort was
-    [sortState, setSortState]);
-    return [sortState, setSortKey];
+    [initialSortState, sortState, onSort]);
+    return [sortState, setSortKey, sorting === null || sorting === void 0 ? void 0 : sorting.on];
 }
 exports.useSortState = useSortState;
 // Exported for testing purposes

package/dist/hooks/useComputed.js

@@ -1,8 +1,12 @@
 "use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useComputed = void 0;
 const mobx_1 = require("mobx");
 const react_1 = require("react");
+const fast_deep_equal_1 = __importDefault(require("fast-deep-equal"));
 /** Evaluates a computed function `fn` to a regular value and triggers a re-render whenever it changes. */
 function useComputed(fn, deps) {
     // We always return the useRef value, and use this just to trigger re-renders
@@ -33,7 +37,7 @@ function useComputed(fn, deps) {
             // Only trigger a re-render if this is not the 1st autorun. Note
             // that if deps has changed, we're inherently in a re-render so also
             // don't need to trigger an additional re-render.
-            if (oldHasRun && newValue !== oldValue) {
+            if (oldHasRun && !(0, fast_deep_equal_1.default)(newValue, oldValue)) {
                 setTick((tick) => tick + 1);
             }
         });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@homebound/beam",
-  "version": "2.118.0",
+  "version": "2.118.3",
   "author": "Homebound",
   "license": "MIT",
   "main": "dist/index.js",
@@ -39,6 +39,7 @@
     "change-case": "^4.1.2",
     "date-fns": "^2.21.3",
     "dompurify": "^2.3.0",
+    "fast-deep-equal": "^3.1.3",
     "framer-motion": "^4.1.11",
     "memoize-one": "^5.2.1",
     "react-aria": "^3.10.0",
@@ -50,8 +51,8 @@
     "react-virtuoso": "^2.4.0",
     "tributejs": "^5.1.3",
     "trix": "^1.3.1",
-    "use-query-params": "^1.2.2",
-    "use-debounce": "^7.0.1"
+    "use-debounce": "^7.0.1",
+    "use-query-params": "^1.2.2"
   },
   "peerDependencies": {
     "@emotion/react": ">=11",