@homebound/beam 2.118.0 → 2.118.1

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,
@@ -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/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/package.json

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