@homebound/beam 2.198.0 → 2.199.1

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

@@ -1,7 +1,7 @@
 import { MutableRefObject } from "react";
 import { GridTableApi } from "./GridTableApi";
 import { GridStyle, GridStyleDef, RowStyles } from "./TableStyles";
-import { Direction, GridColumn, GridTableXss, Kinded, ParentChildrenTuple, RenderAs } from "./types";
+import { Direction, GridColumn, GridColumnWithId, GridTableXss, Kinded, ParentChildrenTuple, RenderAs } from "./types";
 import { GridRowLookup } from "./utils/GridRowLookup";
 import { Only } from "../../Css";
 import { GridDataRow } from "./components/Row";
@@ -27,21 +27,21 @@ export declare function setGridTableDefaults(opts: Partial<GridTableDefaults>):
  * Note that we don't support multiple sort criteria, i.e. sort by column1 desc _and then_
  * column2 asc.
  */
-export declare type GridSortConfig<S> = {
+export declare type GridSortConfig = {
     on: "client";
     /** The optional initial column (index in columns) and direction to sort. */
-    initial?: [S | GridColumn<any>, Direction] | undefined;
+    initial?: [string, Direction] | undefined;
     caseSensitive?: boolean;
     /** The optional primary sort column, this will be sorted first above/below table sort  */
-    primary?: [S | GridColumn<any>, Direction] | undefined;
+    primary?: [string, Direction] | undefined;
 } | {
     on: "server";
     /** The current sort by value + direction (if server-side sorting). */
-    value?: [S, Direction];
+    value?: [string, Direction];
     /** Callback for when the column is sorted (if server-side sorting). Parameters set to `undefined` is a signal to return to the initial sort state */
-    onSort: (orderBy: S | undefined, direction: Direction | undefined) => void;
+    onSort: (orderBy: string | undefined, direction: Direction | undefined) => void;
 };
-export interface GridTableProps<R extends Kinded, S, X> {
+export interface GridTableProps<R extends Kinded, X> {
     id?: string;
     /**
      * The HTML used to create the table.
@@ -57,7 +57,7 @@ export interface GridTableProps<R extends Kinded, S, X> {
      */
     as?: RenderAs;
     /** The column definitions i.e. how each column should render each row kind. */
-    columns: GridColumn<R, S>[];
+    columns: GridColumn<R>[];
     /** The rows of data (including any header/footer rows), to be rendered by the column definitions. */
     rows: GridDataRow<R>[];
     /** Optional row-kind-level styling / behavior like onClick/rowLinks. */
@@ -68,7 +68,7 @@ export interface GridTableProps<R extends Kinded, S, X> {
     stickyHeader?: boolean;
     stickyOffset?: number;
     /** Configures sorting via a hash, does not need to be stable. */
-    sorting?: GridSortConfig<S>;
+    sorting?: GridSortConfig;
     /** Shown in the first row slot, if there are no rows to show, i.e. 'No rows found'. */
     fallbackMessage?: string;
     /** Shown in the first row, kinda-like the fallbackMessage, but shown even if there are rows as well. */
@@ -121,7 +121,7 @@ export interface GridTableProps<R extends Kinded, S, X> {
  * row `kind` along with the data rows. (Admittedly, out of pragmatism, we do apply some
  * special styling to the row that uses `kind: "header"`.)
  */
-export declare function GridTable<R extends Kinded, S = {}, X extends Only<GridTableXss, X> = {}>(props: GridTableProps<R, S, X>): import("@emotion/react/jsx-runtime").JSX.Element;
+export declare function GridTable<R extends Kinded, X extends Only<GridTableXss, X> = {}>(props: GridTableProps<R, X>): import("@emotion/react/jsx-runtime").JSX.Element;
 /**
  * Filters rows given a client-side text `filter.
  *
@@ -129,4 +129,4 @@ export declare function GridTable<R extends Kinded, S = {}, X extends Only<GridT
  *
  * We return a copy of `[Parent, [Child]]` tuples so that we don't modify the `GridDataRow.children`.
  */
-export declare function filterRows<R extends Kinded>(api: GridTableApi<R>, columns: GridColumn<R>[], rows: GridDataRow<R>[], filter: string | undefined): ParentChildrenTuple<R>[];
+export declare function filterRows<R extends Kinded>(api: GridTableApi<R>, columns: GridColumnWithId<R>[], rows: GridDataRow<R>[], filter: string | undefined): ParentChildrenTuple<R>[];

package/dist/components/Table/GridTable.js

@@ -25,16 +25,17 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.filterRows = exports.GridTable = exports.setGridTableDefaults = exports.setDefaultStyle = exports.setRunningInJest = void 0;
 const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
 const memoize_one_1 = __importDefault(require("memoize-one"));
+const mobx_1 = require("mobx");
 const react_1 = __importStar(require("react"));
 const react_virtuoso_1 = require("react-virtuoso");
 const PresentationContext_1 = require("../PresentationContext");
 const GridTableApi_1 = require("./GridTableApi");
 const useSetupColumnSizes_1 = require("./hooks/useSetupColumnSizes");
-const useSortState_1 = require("./hooks/useSortState");
 const TableStyles_1 = require("./TableStyles");
+const columns_1 = require("./utils/columns");
 const GridRowLookup_1 = require("./utils/GridRowLookup");
-const RowState_1 = require("./utils/RowState");
 const sortRows_1 = require("./utils/sortRows");
+const TableState_1 = require("./utils/TableState");
 const utils_1 = require("./utils/utils");
 const Css_1 = require("../../Css");
 const hooks_1 = require("../../hooks");
@@ -78,7 +79,8 @@ exports.setGridTableDefaults = setGridTableDefaults;
  */
 function GridTable(props) {
     var _a, _b, _c;
-    const { id = "gridTable", as = "div", columns, rows, style: maybeStyle = defaults.style, rowStyles, stickyHeader = defaults.stickyHeader, stickyOffset = 0, xss, filter, filterMaxRows, fallbackMessage = "No rows found.", infoMessage, setRowCount, persistCollapse, resizeTarget, activeRowId, activeCellId, } = props;
+    const { id = "gridTable", as = "div", columns: _columns, rows, style: maybeStyle = defaults.style, rowStyles, stickyHeader = defaults.stickyHeader, stickyOffset = 0, xss, filter, filterMaxRows, fallbackMessage = "No rows found.", infoMessage, setRowCount, persistCollapse, resizeTarget, activeRowId, activeCellId, } = props;
+    const columns = (0, react_1.useMemo)(() => (0, columns_1.assignDefaultColumnIds)(_columns), [_columns]);
     // We only use this in as=virtual mode, but keep this here for rowLookup to use
     const virtuosoRef = (0, react_1.useRef)(null);
     // Use this ref to watch for changes in the GridTable's container and resize columns accordingly.
@@ -92,14 +94,21 @@ function GridTable(props) {
         return api;
     }, [props.api]);
     const style = (0, TableStyles_1.resolveStyles)(maybeStyle);
-    const { rowState } = api;
-    rowState.setRows(rows);
+    const { tableState } = api;
+    // Initialize the sort state. This will only happen on the first render.
+    // Once the `TableState.sort` is defined, it will not re-initialize.
+    tableState.initSortState(props.sorting, columns);
+    const [sortOn, caseSensitive] = (0, hooks_1.useComputed)(() => {
+        const { sortConfig } = tableState;
+        return [sortConfig === null || sortConfig === void 0 ? void 0 : sortConfig.on, (sortConfig === null || sortConfig === void 0 ? void 0 : sortConfig.on) === "client" ? !!sortConfig.caseSensitive : false];
+    }, [tableState]);
+    tableState.setRows(rows);
     (0, react_1.useEffect)(() => {
-        rowState.activeRowId = activeRowId;
-    }, [rowState, activeRowId]);
+        tableState.activeRowId = activeRowId;
+    }, [tableState, activeRowId]);
     (0, react_1.useEffect)(() => {
-        rowState.activeCellId = activeCellId;
-    }, [rowState, activeCellId]);
+        tableState.activeCellId = activeCellId;
+    }, [tableState, activeCellId]);
     // We track render count at the table level, which seems odd (we should be able to track this
     // internally within each GridRow using a useRef), but we have suspicions that react-virtuoso
     // (or us) is resetting component state more than necessary, so we track render counts from
@@ -107,8 +116,8 @@ function GridTable(props) {
     const { getCount } = (0, useRenderCount_1.useRenderCount)();
     const columnSizes = (0, useSetupColumnSizes_1.useSetupColumnSizes)(style, columns, resizeTarget !== null && resizeTarget !== void 0 ? resizeTarget : resizeRef);
     // 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, sortOn, caseSensitive] = (0, useSortState_1.useSortState)(columns, props.sorting);
+    const collapsedIds = (0, hooks_1.useComputed)(() => tableState.collapsedIds, [tableState]);
+    const sortState = (0, hooks_1.useComputed)(() => (0, mobx_1.toJS)(tableState.sortState), [tableState]);
     const maybeSorted = (0, react_1.useMemo)(() => {
         if (sortOn === "client" && sortState) {
             // If using client-side sort, the sortState use S = number
@@ -120,9 +129,6 @@ function GridTable(props) {
     // Flatten + component-ize the sorted rows.
     let [headerRows, visibleDataRows, totalsRows, filteredRowIds] = (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" ? { sortOn, sortState, setSortKey } : { sortOn };
             return ((0, jsx_runtime_1.jsx)(Row_1.Row, Object.assign({}, {
                 as,
                 columns,
@@ -138,7 +144,7 @@ function GridTable(props) {
                 api,
                 cellHighlight: "cellHighlight" in maybeStyle && maybeStyle.cellHighlight === true,
                 omitRowHover: "rowHover" in maybeStyle && maybeStyle.rowHover === false,
-                ...sortProps,
+                sortOn,
             }), `${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).
@@ -183,8 +189,6 @@ function GridTable(props) {
         style,
         rowStyles,
         sortOn,
-        setSortKey,
-        sortState,
         stickyHeader,
         stickyOffset,
         columnSizes,
@@ -197,7 +201,7 @@ function GridTable(props) {
         tooManyClientSideRows = true;
         visibleDataRows = visibleDataRows.slice(0, filterMaxRows);
     }
-    rowState.setMatchedRows(filteredRowIds);
+    tableState.setMatchedRows(filteredRowIds);
     // Push back to the caller a way to ask us where a row is.
     const { rowLookup } = props;
     if (rowLookup) {
@@ -225,8 +229,8 @@ function GridTable(props) {
     // just trust the GridTable impl that, at runtime, `as=virtual` will (other than being virtualized)
     // behave semantically the same as `as=div` did for its tests.
     const _as = as === "virtual" && runningInJest ? "div" : as;
-    const rowStateContext = (0, react_1.useMemo)(() => ({ rowState }), [rowState]);
-    return ((0, jsx_runtime_1.jsx)(RowState_1.RowStateContext.Provider, Object.assign({ value: rowStateContext }, { children: (0, jsx_runtime_1.jsxs)(PresentationContext_1.PresentationProvider, Object.assign({ fieldProps: fieldProps, wrap: (_c = style === null || style === void 0 ? void 0 : style.presentationSettings) === null || _c === void 0 ? void 0 : _c.wrap }, { children: [(0, jsx_runtime_1.jsx)("div", { ref: resizeRef, css: Css_1.Css.w100.if(as === "virtual").w("calc(100% - 20px)").$ }, void 0), renders[_as](style, id, columns, headerRows, totalsRows, visibleDataRows, firstRowMessage, stickyHeader, xss, virtuosoRef)] }), void 0) }), void 0));
+    const rowStateContext = (0, react_1.useMemo)(() => ({ tableState: tableState }), [tableState]);
+    return ((0, jsx_runtime_1.jsx)(TableState_1.TableStateContext.Provider, Object.assign({ value: rowStateContext }, { children: (0, jsx_runtime_1.jsxs)(PresentationContext_1.PresentationProvider, Object.assign({ fieldProps: fieldProps, wrap: (_c = style === null || style === void 0 ? void 0 : style.presentationSettings) === null || _c === void 0 ? void 0 : _c.wrap }, { children: [(0, jsx_runtime_1.jsx)("div", { ref: resizeRef, css: Css_1.Css.w100.if(as === "virtual").w("calc(100% - 20px)").$ }, void 0), renders[_as](style, id, columns, headerRows, totalsRows, visibleDataRows, firstRowMessage, stickyHeader, xss, virtuosoRef)] }), void 0) }), void 0));
 }
 exports.GridTable = GridTable;
 // Determine which HTML element to use to build the GridTable

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

@@ -2,7 +2,7 @@ import { MutableRefObject } from "react";
 import { VirtuosoHandle } from "react-virtuoso";
 import { GridDataRow } from "./components/Row";
 import { DiscriminateUnion, Kinded } from "./types";
-import { RowState } from "./utils/RowState";
+import { TableState } from "./utils/TableState";
 /**
  * Creates an `api` handle to drive a `GridTable`.
  *
@@ -39,7 +39,7 @@ export declare type GridTableApi<R extends Kinded> = {
     selectRow: (id: string, selected?: boolean) => void;
 };
 export declare class GridTableApiImpl<R extends Kinded> implements GridTableApi<R> {
-    readonly rowState: RowState;
+    readonly tableState: TableState;
     virtuosoRef: MutableRefObject<VirtuosoHandle | null>;
     /** Called once by the GridTable when it takes ownership of this api instance. */
     init(persistCollapse: string | undefined, virtuosoRef: MutableRefObject<VirtuosoHandle | null>, rows: GridDataRow<R>[]): void;

package/dist/components/Table/GridTableApi.js

@@ -2,7 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.GridTableApiImpl = exports.useGridTableApi = void 0;
 const react_1 = require("react");
-const RowState_1 = require("./utils/RowState");
+const TableState_1 = require("./utils/TableState");
 const visitor_1 = require("./utils/visitor");
 /**
  * Creates an `api` handle to drive a `GridTable`.
@@ -27,13 +27,13 @@ exports.useGridTableApi = useGridTableApi;
 class GridTableApiImpl {
     constructor() {
         // This is public to GridTable but not exported outside of Beam
-        this.rowState = new RowState_1.RowState();
+        this.tableState = new TableState_1.TableState();
         this.virtuosoRef = { current: null };
     }
     /** Called once by the GridTable when it takes ownership of this api instance. */
     init(persistCollapse, virtuosoRef, rows) {
-        this.rowState.loadCollapse(persistCollapse, rows);
-        this.rowState.loadSelected(rows);
+        this.tableState.loadCollapse(persistCollapse, rows);
+        this.tableState.loadSelected(rows);
         this.virtuosoRef = virtuosoRef;
     }
     scrollToIndex(index) {
@@ -44,9 +44,9 @@ class GridTableApiImpl {
     }
     // The any is not great, but getting the overload to handle the optional kind is annoying
     getSelectedRows(kind) {
-        const ids = this.rowState.selectedIds;
+        const ids = this.tableState.selectedIds;
         const selected = [];
-        (0, visitor_1.visit)(this.rowState.rows, (row) => {
+        (0, visitor_1.visit)(this.tableState.rows, (row) => {
             if (row.selectable !== false && ids.includes(row.id) && (!kind || row.kind === kind)) {
                 selected.push(row);
             }
@@ -54,16 +54,16 @@ class GridTableApiImpl {
         return selected;
     }
     clearSelections(id) {
-        this.rowState.selectRow("header", false);
+        this.tableState.selectRow("header", false);
     }
     setActiveRowId(id) {
-        this.rowState.activeRowId = id;
+        this.tableState.activeRowId = id;
     }
     setActiveCellId(id) {
-        this.rowState.activeCellId = id;
+        this.tableState.activeCellId = id;
     }
     selectRow(id, selected = true) {
-        this.rowState.selectRow(id, selected);
+        this.tableState.selectRow(id, selected);
     }
 }
 exports.GridTableApiImpl = GridTableApiImpl;

package/dist/components/Table/components/CollapseToggle.js

@@ -8,8 +8,8 @@ const hooks_1 = require("../../../hooks");
 /** Provides a chevron icons to collapse/un-collapse for parent/child tables. */
 function CollapseToggle(props) {
     const { row, compact } = props;
-    const { rowState } = (0, react_1.useContext)(index_1.RowStateContext);
-    const isCollapsed = (0, hooks_1.useComputed)(() => rowState.isCollapsed(row.id), [rowState]);
+    const { tableState } = (0, react_1.useContext)(index_1.TableStateContext);
+    const isCollapsed = (0, hooks_1.useComputed)(() => tableState.isCollapsed(row.id), [tableState]);
     const iconKey = isCollapsed ? "chevronRight" : "chevronDown";
     const headerIconKey = isCollapsed ? "chevronsRight" : "chevronsDown";
     // If we're not a header, only render a toggle if we have child rows to actually collapse
@@ -17,6 +17,6 @@ function CollapseToggle(props) {
     if (!isHeader && (!row.children || row.children.length === 0)) {
         return null;
     }
-    return ((0, jsx_runtime_1.jsx)(index_1.IconButton, { onClick: () => rowState.toggleCollapsed(row.id), icon: isHeader ? headerIconKey : iconKey, compact: compact }, void 0));
+    return ((0, jsx_runtime_1.jsx)(index_1.IconButton, { onClick: () => tableState.toggleCollapsed(row.id), icon: isHeader ? headerIconKey : iconKey, compact: compact }, void 0));
 }
 exports.CollapseToggle = CollapseToggle;

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

@@ -1,12 +1,12 @@
 import { Dispatch, SetStateAction } from "react";
 import { OverlayTriggerProps } from "../../internal/OverlayTrigger";
 import { GridColumn, Kinded } from "../types";
-interface EditColumnsButtonProps<R extends Kinded, S> extends Pick<OverlayTriggerProps, "trigger" | "placement" | "disabled" | "tooltip"> {
-    allColumns: GridColumn<R, S>[];
-    selectedColumns: GridColumn<R, S>[];
-    setSelectedColumns: Dispatch<SetStateAction<GridColumn<R, S>[]>>;
+interface EditColumnsButtonProps<R extends Kinded> extends Pick<OverlayTriggerProps, "trigger" | "placement" | "disabled" | "tooltip"> {
+    allColumns: GridColumn<R>[];
+    selectedColumns: GridColumn<R>[];
+    setSelectedColumns: Dispatch<SetStateAction<GridColumn<R>[]>>;
     title?: string;
     defaultOpen?: boolean;
 }
-export declare function EditColumnsButton<R extends Kinded, S = {}>(props: EditColumnsButtonProps<R, S>): import("@emotion/react/jsx-runtime").JSX.Element;
+export declare function EditColumnsButton<R extends Kinded>(props: EditColumnsButtonProps<R>): import("@emotion/react/jsx-runtime").JSX.Element;
 export {};

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

@@ -1,19 +1,17 @@
 import { ReactElement } from "react";
 import { GridTableApi } from "../GridTableApi";
-import { SortOn, SortState } from "../hooks/useSortState";
 import { GridStyle, RowStyles } from "../TableStyles";
-import { DiscriminateUnion, GridColumn, IfAny, Kinded, Pin, RenderAs } from "../types";
-interface RowProps<R extends Kinded, S> {
+import { DiscriminateUnion, GridColumnWithId, IfAny, Kinded, Pin, RenderAs } from "../types";
+import { SortOn } from "../utils/TableState";
+interface RowProps<R extends Kinded> {
     as: RenderAs;
-    columns: GridColumn<R>[];
+    columns: GridColumnWithId<R>[];
     row: GridDataRow<R>;
     style: GridStyle;
     rowStyles: RowStyles<R> | undefined;
     stickyHeader: boolean;
     stickyOffset: number;
     sortOn: SortOn;
-    sortState?: SortState<S>;
-    setSortKey?: (value: S) => void;
     columnSizes: string[];
     level: number;
     getCount: (id: string) => object;
@@ -21,7 +19,7 @@ interface RowProps<R extends Kinded, S> {
     cellHighlight: boolean;
     omitRowHover: boolean;
 }
-declare function RowImpl<R extends Kinded, S>(props: RowProps<R, S>): ReactElement;
+declare function RowImpl<R extends Kinded, S>(props: RowProps<R>): ReactElement;
 /**
  * Memoizes Rows so that re-rendering the table doesn't re-render every single row.
  *

package/dist/components/Table/components/Row.js

@@ -24,8 +24,8 @@ const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
 const mobx_react_1 = require("mobx-react");
 const react_1 = __importStar(require("react"));
 const cell_1 = require("./cell");
-const RowState_1 = require("../utils/RowState");
 const sortRows_1 = require("../utils/sortRows");
+const TableState_1 = require("../utils/TableState");
 const utils_1 = require("../utils/utils");
 const Css_1 = require("../../../Css");
 const hooks_1 = require("../../../hooks");
@@ -33,10 +33,10 @@ const shallowEqual_1 = require("../../../utils/shallowEqual");
 // We extract Row to its own mini-component primarily so we can React.memo'ize it.
 function RowImpl(props) {
     var _a;
-    const { as, columns, row, style, rowStyles, stickyHeader, stickyOffset, sortOn, sortState, setSortKey, columnSizes, level, getCount, api, cellHighlight, omitRowHover, ...others } = props;
-    const { rowState } = (0, react_1.useContext)(RowState_1.RowStateContext);
+    const { as, columns, row, style, rowStyles, stickyHeader, stickyOffset, sortOn, columnSizes, level, getCount, api, cellHighlight, omitRowHover, ...others } = props;
+    const { tableState } = (0, react_1.useContext)(TableState_1.TableStateContext);
     const rowId = `${row.kind}_${row.id}`;
-    const isActive = (0, hooks_1.useComputed)(() => rowState.activeRowId === rowId, [rowId, rowState]);
+    const isActive = (0, hooks_1.useComputed)(() => tableState.activeRowId === rowId, [rowId, tableState]);
     // We treat the "header" and "totals" kind as special for "good defaults" styling
     const isHeader = row.kind === "header";
     const isTotals = row.kind === "totals";
@@ -87,7 +87,7 @@ function RowImpl(props) {
                 (sortOn === "server" && !!column.serverSideSortKey);
             const alignment = (0, utils_1.getAlignment)(column, maybeContent);
             const justificationCss = (0, utils_1.getJustification)(column, maybeContent, as, alignment);
-            const content = (0, utils_1.toContent)(maybeContent, isHeader, canSortColumn, sortOn === "client", style, as, alignment);
+            const content = (0, utils_1.toContent)(maybeContent, isHeader, canSortColumn, sortOn === "client", style, as, alignment, column);
             (0, sortRows_1.ensureClientSideSortValueIsSortable)(sortOn, isHeader, column, columnIndex, maybeContent);
             const maybeSticky = (_b = (((0, utils_1.isGridCellContent)(maybeContent) && maybeContent.sticky) || column.sticky)) !== null && _b !== void 0 ? _b : undefined;
             const maybeStickyColumnStyles = maybeSticky && columnSizes
@@ -105,7 +105,7 @@ function RowImpl(props) {
                 : {};
             const cellId = `${row.kind}_${row.id}_${column.id}`;
             const applyCellHighlight = cellHighlight && !!column.id && !isHeader && !isTotals;
-            const isCellActive = rowState.activeCellId === cellId;
+            const isCellActive = tableState.activeCellId === cellId;
             // 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
             // a few descendent selectors. However, that approach means the root grid-applied
@@ -154,7 +154,7 @@ function RowImpl(props) {
             const renderFn = ((rowStyle === null || rowStyle === void 0 ? void 0 : rowStyle.renderCell) || (rowStyle === null || rowStyle === void 0 ? void 0 : rowStyle.rowLink)) && wrapAction
                 ? (0, cell_1.rowLinkRenderFn)(as)
                 : isHeader
-                    ? (0, cell_1.headerRenderFn)(columns, column, sortState, setSortKey, as)
+                    ? (0, cell_1.headerRenderFn)(column, as)
                     : (rowStyle === null || rowStyle === void 0 ? void 0 : rowStyle.onClick) && wrapAction
                         ? (0, cell_1.rowClickRenderFn)(as, api)
                         : (0, cell_1.defaultRenderFn)(as);

package/dist/components/Table/components/SelectToggle.js

@@ -3,16 +3,16 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.SelectToggle = void 0;
 const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
 const react_1 = require("react");
-const RowState_1 = require("../utils/RowState");
+const TableState_1 = require("../utils/TableState");
 const hooks_1 = require("../../../hooks");
 const inputs_1 = require("../../../inputs");
 /** Provides a checkbox to show/drive this row's selected state. */
 function SelectToggle({ id, disabled }) {
-    const { rowState } = (0, react_1.useContext)(RowState_1.RowStateContext);
-    const state = (0, hooks_1.useComputed)(() => rowState.getSelected(id), [rowState]);
+    const { tableState } = (0, react_1.useContext)(TableState_1.TableStateContext);
+    const state = (0, hooks_1.useComputed)(() => tableState.getSelected(id), [tableState]);
     const selected = state === "checked" ? true : state === "unchecked" ? false : "indeterminate";
     return ((0, jsx_runtime_1.jsx)(inputs_1.Checkbox, { checkboxOnly: true, disabled: disabled, label: "Select", onChange: (selected) => {
-            rowState.selectRow(id, selected);
+            tableState.selectRow(id, selected);
         }, selected: selected }, void 0));
 }
 exports.SelectToggle = SelectToggle;

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

@@ -1,4 +1,11 @@
+import { GridColumnWithId } from "../types";
 import { Properties } from "../../../Css";
+interface SortHeaderProps {
+    content: string;
+    xss?: Properties;
+    iconOnLeft?: boolean;
+    column: GridColumnWithId<any>;
+}
 /**
  * Wraps column header names with up/down sorting icons.
  *
@@ -10,8 +17,5 @@ import { Properties } from "../../../Css";
  * - Write their own component that uses `GridSortContext` to access the column's
  *   current sort state + `toggleSort` function
  */
-export declare function SortHeader(props: {
-    content: string;
-    xss?: Properties;
-    iconOnLeft?: boolean;
-}): import("@emotion/react/jsx-runtime").JSX.Element;
+export declare function SortHeader(props: SortHeaderProps): import("@emotion/react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/Table/components/SortHeader.js

@@ -4,7 +4,7 @@ exports.SortHeader = void 0;
 const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
 const react_1 = require("react");
 const Icon_1 = require("../../Icon");
-const GridSortContext_1 = require("../utils/GridSortContext");
+const TableState_1 = require("../utils/TableState");
 const Css_1 = require("../../../Css");
 const hooks_1 = require("../../../hooks");
 const useTestIds_1 = require("../../../utils/useTestIds");
@@ -20,9 +20,13 @@ const useTestIds_1 = require("../../../utils/useTestIds");
  *   current sort state + `toggleSort` function
  */
 function SortHeader(props) {
-    const { content, xss, iconOnLeft = false } = props;
+    const { content, xss, iconOnLeft = false, column } = props;
     const { isHovered, hoverProps } = (0, hooks_1.useHover)({});
-    const { sorted, toggleSort } = (0, react_1.useContext)(GridSortContext_1.GridSortContext);
+    const ourSortKey = column.serverSideSortKey || column.id;
+    const { tableState } = (0, react_1.useContext)(TableState_1.TableStateContext);
+    const current = (0, hooks_1.useComputed)(() => { var _a; return (_a = tableState.sortState) === null || _a === void 0 ? void 0 : _a.current; }, [tableState]);
+    const sorted = ourSortKey === (current === null || current === void 0 ? void 0 : current.columnId) ? current === null || current === void 0 ? void 0 : current.direction : undefined;
+    const toggleSort = (0, react_1.useCallback)(() => tableState.setSortKey(ourSortKey), [ourSortKey, tableState]);
     const tid = (0, useTestIds_1.useTestIds)(props, "sortHeader");
     const icon = ((0, jsx_runtime_1.jsx)("span", Object.assign({ css: Css_1.Css.fs0.$ }, { children: (0, jsx_runtime_1.jsx)(Icon_1.Icon, Object.assign({ icon: sorted === "DESC" ? "sortDown" : "sortUp", color: sorted !== undefined ? Css_1.Palette.LightBlue700 : Css_1.Palette.Gray400, xss: {
                 ...Css_1.Css.ml1.if(iconOnLeft).mr1.ml0.$,

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

@@ -1,8 +1,7 @@
 import { ReactNode } from "react";
 import { GridTableApi } from "../GridTableApi";
-import { SortState } from "../hooks/useSortState";
 import { RowStyle } from "../TableStyles";
-import { GridCellAlignment, GridColumn, Kinded, MaybeFn, RenderAs } from "../types";
+import { GridCellAlignment, GridColumnWithId, Kinded, MaybeFn, RenderAs } from "../types";
 import { Properties, Typography } from "../../../Css";
 /**
  * Allows a cell to be more than just a RectNode, i.e. declare its alignment or
@@ -34,7 +33,7 @@ export declare type RenderCellFn<R extends Kinded> = (idx: number, css: Properti
 /** Renders our default cell element, i.e. if no row links and no custom renderCell are used. */
 export declare const defaultRenderFn: (as: RenderAs) => RenderCellFn<any>;
 /** Sets up the `GridContext` so that header cells can access the current sort settings. */
-export declare const headerRenderFn: (columns: GridColumn<any>[], column: GridColumn<any>, sortState: SortState<any> | undefined, setSortKey: Function | undefined, as: RenderAs) => RenderCellFn<any>;
+export declare const headerRenderFn: (column: GridColumnWithId<any>, as: RenderAs) => RenderCellFn<any>;
 /** Renders a cell element when a row link is in play. */
 export declare const rowLinkRenderFn: (as: RenderAs) => RenderCellFn<any>;
 /** Renders a cell that will fire the RowStyle.onClick. */

package/dist/components/Table/components/cell.js

@@ -5,7 +5,6 @@ const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
 const react_router_dom_1 = require("react-router-dom");
 const CssReset_1 = require("../../CssReset");
 const TableStyles_1 = require("../TableStyles");
-const GridSortContext_1 = require("../utils/GridSortContext");
 const Css_1 = require("../../../Css");
 /** Renders our default cell element, i.e. if no row links and no custom renderCell are used. */
 const defaultRenderFn = (as) => (key, css, content, row, rowStyle, classNames, onClick) => {
@@ -14,16 +13,9 @@ const defaultRenderFn = (as) => (key, css, content, row, rowStyle, classNames, o
 };
 exports.defaultRenderFn = defaultRenderFn;
 /** Sets up the `GridContext` so that header cells can access the current sort settings. */
-const headerRenderFn = (columns, column, sortState, setSortKey, as) => (key, css, content, row, rowStyle, classNames) => {
-    const [currentKey, direction] = sortState || [];
-    // If server-side sorting, use the user's key for this column; client-side sorting, use the index.
-    const ourSortKey = column.serverSideSortKey || columns.indexOf(column);
-    const context = {
-        sorted: ourSortKey === currentKey ? direction : undefined,
-        toggleSort: () => setSortKey(ourSortKey),
-    };
+const headerRenderFn = (column, as) => (key, css, content, row, rowStyle, classNames) => {
     const Cell = as === "table" ? "th" : "div";
-    return ((0, jsx_runtime_1.jsx)(GridSortContext_1.GridSortContext.Provider, Object.assign({ value: context }, { children: (0, jsx_runtime_1.jsx)(Cell, Object.assign({ css: { ...css, ...(0, TableStyles_1.tableRowStyles)(as, column) }, className: classNames }, { children: content }), void 0) }), key));
+    return ((0, jsx_runtime_1.jsx)(Cell, Object.assign({ css: { ...css, ...(0, TableStyles_1.tableRowStyles)(as, column) }, className: classNames }, { children: content }), void 0));
 };
 exports.headerRenderFn = headerRenderFn;
 /** Renders a cell element when a row link is in play. */

package/dist/components/Table/hooks/useColumns.d.ts

@@ -1,3 +1,3 @@
 import { Dispatch, SetStateAction } from "react";
 import { GridColumn, Kinded } from "../types";
-export declare function useColumns<R extends Kinded, S = {}>(tableColumns: GridColumn<R, S>[], maybeStorageKey?: string): [GridColumn<R, S>[], Dispatch<SetStateAction<GridColumn<R, S>[]>>];
+export declare function useColumns<R extends Kinded>(tableColumns: GridColumn<R>[], maybeStorageKey?: string): [GridColumn<R>[], Dispatch<SetStateAction<GridColumn<R>[]>>];

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

@@ -11,21 +11,17 @@ export { useGridTableApi } from "./GridTableApi";
 export type { GridTableApi } from "./GridTableApi";
 export * from "./hooks/useColumns";
 export * from "./hooks/useSetupColumnSizes";
-export * from "./hooks/useSortState";
 export { cardStyle, condensedStyle, defaultStyle, getTableStyles } from "./TableStyles";
 export type { GridStyle, RowStyle, RowStyles } from "./TableStyles";
 export * from "./types";
 export * from "./utils/columns";
 export { createRowLookup } from "./utils/GridRowLookup";
 export type { GridRowLookup } from "./utils/GridRowLookup";
-export * from "./utils/GridSortContext";
-export { GridSortContext } from "./utils/GridSortContext";
-export type { GridSortContextProps } from "./utils/GridSortContext";
-export { RowState, RowStateContext } from "./utils/RowState";
-export type { SelectedState } from "./utils/RowState";
 export { simpleDataRows, simpleHeader } from "./utils/simpleHelpers";
 export type { SimpleHeaderAndData } from "./utils/simpleHelpers";
 export * from "./utils/sortRows";
+export { TableState, TableStateContext } from "./utils/TableState";
+export type { SelectedState, SortOn, SortState } from "./utils/TableState";
 export * from "./utils/utils";
 export * from "./utils/visitor";
 export { GridTable, setDefaultStyle, setGridTableDefaults } from "./GridTable";

package/dist/components/Table/index.js

@@ -10,7 +10,7 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
     for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.setGridTableDefaults = exports.setDefaultStyle = exports.GridTable = exports.simpleHeader = exports.simpleDataRows = exports.RowStateContext = exports.RowState = exports.GridSortContext = exports.createRowLookup = exports.getTableStyles = exports.defaultStyle = exports.condensedStyle = exports.cardStyle = exports.useGridTableApi = exports.SortHeader = exports.Row = exports.EditColumnsButton = exports.rowLinkRenderFn = exports.rowClickRenderFn = exports.headerRenderFn = exports.defaultRenderFn = void 0;
+exports.setGridTableDefaults = exports.setDefaultStyle = exports.GridTable = exports.TableStateContext = exports.TableState = exports.simpleHeader = exports.simpleDataRows = exports.createRowLookup = exports.getTableStyles = exports.defaultStyle = exports.condensedStyle = exports.cardStyle = exports.useGridTableApi = exports.SortHeader = exports.Row = exports.EditColumnsButton = exports.rowLinkRenderFn = exports.rowClickRenderFn = exports.headerRenderFn = exports.defaultRenderFn = void 0;
 var cell_1 = require("./components/cell");
 Object.defineProperty(exports, "defaultRenderFn", { enumerable: true, get: function () { return cell_1.defaultRenderFn; } });
 Object.defineProperty(exports, "headerRenderFn", { enumerable: true, get: function () { return cell_1.headerRenderFn; } });
@@ -29,7 +29,6 @@ var GridTableApi_1 = require("./GridTableApi");
 Object.defineProperty(exports, "useGridTableApi", { enumerable: true, get: function () { return GridTableApi_1.useGridTableApi; } });
 __exportStar(require("./hooks/useColumns"), exports);
 __exportStar(require("./hooks/useSetupColumnSizes"), exports);
-__exportStar(require("./hooks/useSortState"), exports);
 var TableStyles_1 = require("./TableStyles");
 Object.defineProperty(exports, "cardStyle", { enumerable: true, get: function () { return TableStyles_1.cardStyle; } });
 Object.defineProperty(exports, "condensedStyle", { enumerable: true, get: function () { return TableStyles_1.condensedStyle; } });
@@ -39,16 +38,13 @@ __exportStar(require("./types"), exports);
 __exportStar(require("./utils/columns"), exports);
 var GridRowLookup_1 = require("./utils/GridRowLookup");
 Object.defineProperty(exports, "createRowLookup", { enumerable: true, get: function () { return GridRowLookup_1.createRowLookup; } });
-__exportStar(require("./utils/GridSortContext"), exports);
-var GridSortContext_1 = require("./utils/GridSortContext");
-Object.defineProperty(exports, "GridSortContext", { enumerable: true, get: function () { return GridSortContext_1.GridSortContext; } });
-var RowState_1 = require("./utils/RowState");
-Object.defineProperty(exports, "RowState", { enumerable: true, get: function () { return RowState_1.RowState; } });
-Object.defineProperty(exports, "RowStateContext", { enumerable: true, get: function () { return RowState_1.RowStateContext; } });
 var simpleHelpers_1 = require("./utils/simpleHelpers");
 Object.defineProperty(exports, "simpleDataRows", { enumerable: true, get: function () { return simpleHelpers_1.simpleDataRows; } });
 Object.defineProperty(exports, "simpleHeader", { enumerable: true, get: function () { return simpleHelpers_1.simpleHeader; } });
 __exportStar(require("./utils/sortRows"), exports);
+var TableState_1 = require("./utils/TableState");
+Object.defineProperty(exports, "TableState", { enumerable: true, get: function () { return TableState_1.TableState; } });
+Object.defineProperty(exports, "TableStateContext", { enumerable: true, get: function () { return TableState_1.TableStateContext; } });
 __exportStar(require("./utils/utils"), exports);
 __exportStar(require("./utils/visitor"), exports);
 var GridTable_1 = require("./GridTable");

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

@@ -30,7 +30,7 @@ export declare type DiscriminateUnion<T, K extends keyof T, V extends T[K]> = T
  * - 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 = {}> = {
+export declare type GridColumn<R extends Kinded> = {
     [K in R["kind"]]: string | GridCellContent | (DiscriminateUnion<R, "kind", K> extends {
         data: infer D;
     } ? (data: D, opts: {
@@ -57,7 +57,7 @@ export declare type GridColumn<R extends Kinded, S = {}> = {
     /** Whether the column can be sorted (if client-side sorting). Defaults to true if sorting client-side. */
     clientSideSort?: boolean;
     /** This column's sort by value (if server-side sorting). */
-    serverSideSortKey?: S;
+    serverSideSortKey?: string;
     /** Allows the column to stay in place when the user scrolls horizontally */
     sticky?: "left" | "right";
     /** Prevent column from supporting RowStyle.onClick/rowLink in order to avoid nested interactivity. Defaults to true */
@@ -71,6 +71,9 @@ export declare type GridColumn<R extends Kinded, S = {}> = {
     /** Flag that will allow to know which hide-able columns are visible on initial load */
     initVisible?: boolean;
 };
+export declare type GridColumnWithId<R extends Kinded> = GridColumn<R> & {
+    id: string;
+};
 export declare const nonKindGridColumnKeys: string[];
 /**
  * Used to indicate where to pin the DataRow and if whether it should be filtered or always visible, setting `filter` to `true` will hide this row

package/dist/components/Table/types.js

@@ -10,7 +10,7 @@ exports.nonKindGridColumnKeys = [
     "sticky",
     "wrapAction",
     "isAction",
-    "name",
+    "id",
     "canHide",
     "initVisible",
 ];

package/dist/components/Table/utils/GridRowLookup.d.ts

@@ -1,7 +1,7 @@
 import { MutableRefObject } from "react";
 import { VirtuosoHandle } from "react-virtuoso";
 import { GridDataRow } from "../components/Row";
-import { DiscriminateUnion, GridColumn, Kinded, RowTuple } from "../types";
+import { DiscriminateUnion, GridColumnWithId, Kinded, RowTuple } from "../types";
 /**
  * Allows a caller to ask for the currently shown rows, given the current sorting/filtering.
  *
@@ -22,6 +22,6 @@ interface NextPrev<R extends Kinded> {
     next: GridDataRow<R> | undefined;
     prev: GridDataRow<R> | undefined;
 }
-export declare function createRowLookup<R extends Kinded>(columns: GridColumn<R>[], filteredRows: RowTuple<R>[], virtuosoRef: MutableRefObject<VirtuosoHandle | null>): GridRowLookup<R>;
-export declare function getKinds<R extends Kinded>(columns: GridColumn<R>[]): R[];
+export declare function createRowLookup<R extends Kinded>(columns: GridColumnWithId<R>[], filteredRows: RowTuple<R>[], virtuosoRef: MutableRefObject<VirtuosoHandle | null>): GridRowLookup<R>;
+export declare function getKinds<R extends Kinded>(columns: GridColumnWithId<R>[]): R[];
 export {};

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

@@ -1,5 +1,7 @@
 import React from "react";
 import { GridDataRow } from "../components/Row";
+import { GridSortConfig } from "../GridTable";
+import { Direction, GridColumnWithId } from "../types";
 export declare type SelectedState = "checked" | "unchecked" | "partial";
 /**
  * Stores the collapsed & selected state of rows.
@@ -16,7 +18,7 @@ export declare type SelectedState = "checked" | "unchecked" | "partial";
  * that need to change their toggle/select on/off in response to parent/child
  * changes.
  */
-export declare class RowState {
+export declare class TableState {
     private readonly collapsedRows;
     private persistCollapse;
     private readonly selectedRows;
@@ -24,12 +26,19 @@ export declare class RowState {
     rows: GridDataRow<any>[];
     activeRowId: string | undefined;
     activeCellId: string | undefined;
+    sortConfig: GridSortConfig | undefined;
+    sort: SortState;
+    private initialSortState;
+    private onSort;
     /**
      * Creates the `RowState` for a given `GridTable`.
      */
     constructor();
     loadCollapse(persistCollapse: string | undefined, rows: GridDataRow<any>[]): void;
     loadSelected(rows: GridDataRow<any>[]): void;
+    initSortState(sortConfig: GridSortConfig | undefined, columns: GridColumnWithId<any>[]): void;
+    setSortKey(clickedColumnId: string): void;
+    get sortState(): SortState | undefined;
     setRows(rows: GridDataRow<any>[]): void;
     setMatchedRows(rowIds: string[]): void;
     get selectedIds(): string[];
@@ -41,7 +50,18 @@ export declare class RowState {
     private getMatchedChildrenStates;
     private setNestedSelectedStates;
 }
-/** Provides a context for rows to access their table's `RowState`. */
-export declare const RowStateContext: React.Context<{
-    rowState: RowState;
+/** Provides a context for rows to access their table's `TableState`. */
+export declare const TableStateContext: React.Context<{
+    tableState: TableState;
 }>;
+export declare function deriveSortState(currentSortState: SortState, clickedKey: string, initialSortState: SortState | undefined): SortState | undefined;
+declare type ColumnSort = {
+    columnId: string;
+    direction: Direction;
+};
+export declare type SortState = {
+    current?: ColumnSort;
+    persistent?: ColumnSort;
+};
+export declare type SortOn = "client" | "server" | undefined;
+export {};

package/dist/components/Table/utils/{RowState.js → TableState.js}

@@ -3,9 +3,10 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.RowStateContext = exports.RowState = void 0;
+exports.deriveSortState = exports.TableStateContext = exports.TableState = void 0;
 const mobx_1 = require("mobx");
 const react_1 = __importDefault(require("react"));
+const utils_1 = require("./utils");
 const visitor_1 = require("./visitor");
 /**
  * Stores the collapsed & selected state of rows.
@@ -22,7 +23,7 @@ const visitor_1 = require("./visitor");
  * that need to change their toggle/select on/off in response to parent/child
  * changes.
  */
-class RowState {
+class TableState {
     /**
      * Creates the `RowState` for a given `GridTable`.
      */
@@ -38,6 +39,8 @@ class RowState {
         this.activeRowId = undefined;
         // Keeps track of the 'active' cell, formatted `${row.kind}_${row.id}_${column.name}`
         this.activeCellId = undefined;
+        // Provide some defaults to get the sort state to properly work.
+        this.sort = {};
         // Make ourselves an observable so that mobx will do caching of .collapseIds so
         // that it'll be a stable identity for GridTable to useMemo against.
         (0, mobx_1.makeAutoObservable)(this, 
@@ -78,6 +81,58 @@ class RowState {
         });
         this.selectedRows.merge(map);
     }
+    initSortState(sortConfig, columns) {
+        var _a, _b;
+        if (this.sortConfig) {
+            return;
+        }
+        this.sortConfig = sortConfig;
+        if ((sortConfig === null || sortConfig === void 0 ? void 0 : sortConfig.on) === "client") {
+            const { initial, primary } = sortConfig;
+            const primaryKey = primary === null || primary === void 0 ? void 0 : primary[0];
+            const persistentSortData = primaryKey
+                ? { persistent: { columnId: primaryKey, direction: (_a = primary === null || primary === void 0 ? void 0 : primary[1]) !== null && _a !== void 0 ? _a : utils_1.ASC } }
+                : {};
+            if (initial === undefined && "initial" in sortConfig) {
+                // if explicitly set to `undefined`, then do not sort
+                this.initialSortState = undefined;
+            }
+            else if (initial) {
+                this.initialSortState = { current: { columnId: initial[0], direction: initial[1] }, ...persistentSortData };
+            }
+            else {
+                // If no explicit sortState, assume 1st column ascending
+                const firstSortableColumn = (_b = columns.find((c) => c.clientSideSort !== false)) === null || _b === void 0 ? void 0 : _b.id;
+                this.initialSortState = firstSortableColumn
+                    ? { current: { columnId: firstSortableColumn, direction: utils_1.ASC }, ...persistentSortData }
+                    : undefined;
+            }
+        }
+        else {
+            this.initialSortState = (sortConfig === null || sortConfig === void 0 ? void 0 : sortConfig.value)
+                ? { current: { columnId: sortConfig === null || sortConfig === void 0 ? void 0 : sortConfig.value[0], direction: sortConfig === null || sortConfig === void 0 ? void 0 : sortConfig.value[1] } }
+                : undefined;
+        }
+        // Only change `this.sort` if `initialSortState` is defined.
+        if (this.initialSortState) {
+            this.sort = this.initialSortState;
+        }
+        this.onSort = (sortConfig === null || sortConfig === void 0 ? void 0 : sortConfig.on) === "server" ? sortConfig.onSort : undefined;
+    }
+    setSortKey(clickedColumnId) {
+        var _a;
+        if (this.sortConfig) {
+            const newState = deriveSortState(this.sort, clickedColumnId, this.initialSortState);
+            this.sort = newState !== null && newState !== void 0 ? newState : {};
+            if (this.onSort) {
+                const { columnId, direction } = (_a = newState === null || newState === void 0 ? void 0 : newState.current) !== null && _a !== void 0 ? _a : {};
+                this.onSort(columnId, direction);
+            }
+        }
+    }
+    get sortState() {
+        return this.sort.current ? this.sort : undefined;
+    }
     // Updates the list of rows and regenerates the collapsedRows property if needed.
     setRows(rows) {
         // If the set of rows are different
@@ -252,11 +307,11 @@ class RowState {
         return [];
     }
 }
-exports.RowState = RowState;
-/** Provides a context for rows to access their table's `RowState`. */
-exports.RowStateContext = react_1.default.createContext({
-    get rowState() {
-        throw new Error("No RowStateContext provider");
+exports.TableState = TableState;
+/** Provides a context for rows to access their table's `TableState`. */
+exports.TableStateContext = react_1.default.createContext({
+    get tableState() {
+        throw new Error("No TableStateContext provider");
     },
 });
 // Get the rows that are already in the toggled state, so we can keep them toggled
@@ -300,3 +355,32 @@ function flattenRows(rows) {
     const childRows = rows.flatMap((r) => (r.children ? flattenRows(r.children) : []));
     return [...rows, ...childRows];
 }
+// Exported for testing purposes
+function deriveSortState(currentSortState, clickedKey, initialSortState) {
+    var _a;
+    // If the current sort state is not defined then sort ASC on the clicked key.
+    if (!currentSortState.current) {
+        return { ...initialSortState, current: { columnId: clickedKey, direction: utils_1.ASC } };
+    }
+    const { current: { columnId: currentKey, direction: currentDirection }, } = currentSortState;
+    // If clicking a new column, then sort ASC on the clicked key
+    if (clickedKey !== currentKey) {
+        return { ...initialSortState, current: { columnId: clickedKey, direction: utils_1.ASC } };
+    }
+    // If there is an `initialSortState` and we're clicking on that same key, then flip the sort.
+    // Handles cases where the initial sort is DESC so that we can allow for DESC to ASC sorting.
+    if (initialSortState && ((_a = initialSortState.current) === null || _a === void 0 ? void 0 : _a.columnId) === clickedKey) {
+        return {
+            ...initialSortState,
+            current: { columnId: clickedKey, direction: currentDirection === utils_1.ASC ? utils_1.DESC : utils_1.ASC },
+        };
+    }
+    // Otherwise when clicking the current column, toggle through sort states
+    if (currentDirection === utils_1.ASC) {
+        // if ASC -> go to desc
+        return { ...initialSortState, current: { columnId: clickedKey, direction: utils_1.DESC } };
+    }
+    // Else, direction is already DESC, so revert to original sort value.
+    return initialSortState;
+}
+exports.deriveSortState = deriveSortState;

package/dist/components/Table/utils/columns.d.ts

@@ -1,13 +1,13 @@
-import { GridColumn, Kinded } from "../types";
+import { GridColumn, GridColumnWithId, Kinded } from "../types";
 /** Provides default styling for a GridColumn representing a Date. */
-export declare function column<T extends Kinded, S = {}>(columnDef: GridColumn<T, S>): GridColumn<T, S>;
+export declare function column<T extends Kinded>(columnDef: GridColumn<T>): GridColumn<T>;
 /** Provides default styling for a GridColumn representing a Date. */
-export declare function dateColumn<T extends Kinded, S = {}>(columnDef: GridColumn<T, S>): GridColumn<T, S>;
+export declare function dateColumn<T extends Kinded>(columnDef: GridColumn<T>): GridColumn<T>;
 /**
  * Provides default styling for a GridColumn representing a Numeric value (Price, percentage, PO #, etc.). */
-export declare function numericColumn<T extends Kinded, S = {}>(columnDef: GridColumn<T, S>): GridColumn<T, S>;
+export declare function numericColumn<T extends Kinded>(columnDef: GridColumn<T>): GridColumn<T>;
 /** Provides default styling for a GridColumn representing an Action. */
-export declare function actionColumn<T extends Kinded, S = {}>(columnDef: GridColumn<T, S>): GridColumn<T, S>;
+export declare function actionColumn<T extends Kinded>(columnDef: GridColumn<T>): GridColumn<T>;
 /**
  * Provides default styling for a GridColumn containing a checkbox.
  *
@@ -15,7 +15,7 @@ export declare function actionColumn<T extends Kinded, S = {}>(columnDef: GridCo
  * not have a `SelectToggle`, b/c we can provide the default behavior a `SelectToggle` for basically
  * all rows.
  */
-export declare function selectColumn<T extends Kinded, S = {}>(columnDef?: Partial<GridColumn<T, S>>): GridColumn<T, S>;
+export declare function selectColumn<T extends Kinded>(columnDef?: Partial<GridColumn<T>>): GridColumn<T>;
 /**
  * Provides default styling for a GridColumn containing a collapse icon.
  *
@@ -23,9 +23,12 @@ export declare function selectColumn<T extends Kinded, S = {}>(columnDef?: Parti
  * not have a `CollapseToggle`, b/c we can provide the default behavior a `CollapseToggle` for basically
  * all rows.
  */
-export declare function collapseColumn<T extends Kinded, S = {}>(columnDef?: Partial<GridColumn<T, S>>): GridColumn<T, S>;
+export declare function collapseColumn<T extends Kinded>(columnDef?: Partial<GridColumn<T>>): GridColumn<T>;
 /**
  * Calculates column widths using a flexible `calc()` definition that allows for consistent column alignment without the use of `<table />`, CSS Grid, etc layouts.
  * Enforces only fixed-sized units (% and px)
  */
 export declare function calcColumnSizes(columns: GridColumn<any>[], tableWidth: number | undefined, tableMinWidthPx?: number): string[];
+/** Assign column ids if missing */
+export declare function assignDefaultColumnIds<T extends Kinded>(columns: GridColumn<T>[]): GridColumnWithId<T>[];
+export declare const generateColumnId: (columnIndex: number) => string;

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

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.calcColumnSizes = exports.collapseColumn = exports.selectColumn = exports.actionColumn = exports.numericColumn = exports.dateColumn = exports.column = void 0;
+exports.generateColumnId = exports.assignDefaultColumnIds = exports.calcColumnSizes = 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("../components/CollapseToggle");
 const SelectToggle_1 = require("../components/SelectToggle");
@@ -37,6 +37,7 @@ exports.actionColumn = actionColumn;
 function selectColumn(columnDef) {
     const base = {
         ...nonKindDefaults(),
+        id: "beamSelectColumn",
         clientSideSort: false,
         align: "center",
         // Defining `w: 48px` to accommodate for the `16px` wide checkbox and `16px` of padding on either side.
@@ -63,6 +64,7 @@ exports.selectColumn = selectColumn;
 function collapseColumn(columnDef) {
     const base = {
         ...nonKindDefaults(),
+        id: "beamCollapseColumn",
         clientSideSort: false,
         align: "center",
         // Defining `w: 38px` based on the designs
@@ -147,3 +149,12 @@ function calcColumnSizes(columns, tableWidth, tableMinWidthPx = 0) {
     return sizes;
 }
 exports.calcColumnSizes = calcColumnSizes;
+/** Assign column ids if missing */
+function assignDefaultColumnIds(columns) {
+    // Note: we are not _always_ spreading the `c` property as we need to be able to return the whole proxy object that
+    // exists as part of `selectColumn` and `collapseColumn`.
+    return columns.map((c, idx) => { var _a; return (c.id ? c : { ...c, id: (_a = c.id) !== null && _a !== void 0 ? _a : (0, exports.generateColumnId)(idx) }); });
+}
+exports.assignDefaultColumnIds = assignDefaultColumnIds;
+const generateColumnId = (columnIndex) => `c${columnIndex}`;
+exports.generateColumnId = generateColumnId;

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

@@ -1,7 +1,7 @@
 import { ReactNode } from "react";
 import { GridCellContent } from "../components/cell";
 import { GridDataRow } from "../components/Row";
-import { SortOn, SortState } from "../hooks/useSortState";
-import { GridColumn, Kinded } from "../types";
-export declare function sortRows<R extends Kinded>(columns: GridColumn<R>[], rows: GridDataRow<R>[], sortState: SortState<number>, caseSensitive: boolean): GridDataRow<R>[];
+import { GridColumn, GridColumnWithId, Kinded } from "../types";
+import { SortOn, SortState } from "./TableState";
+export declare function sortRows<R extends Kinded>(columns: GridColumnWithId<R>[], rows: GridDataRow<R>[], sortState: SortState, caseSensitive: boolean): GridDataRow<R>[];
 export declare function ensureClientSideSortValueIsSortable(sortOn: SortOn, isHeader: boolean, column: GridColumn<any>, idx: number, maybeContent: ReactNode | GridCellContent): void;

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

@@ -16,11 +16,13 @@ function sortRows(columns, rows, sortState, caseSensitive) {
 exports.sortRows = sortRows;
 function sortBatch(columns, batch, sortState, caseSensitive) {
     // When client-side sort, the sort value is the column index
-    const [value, direction, primaryKey, primaryDirection] = sortState;
-    const column = columns[value];
+    const { current, persistent } = sortState !== null && sortState !== void 0 ? sortState : {};
+    const { columnId, direction } = current !== null && current !== void 0 ? current : {};
+    const { columnId: persistentSortColumnId, direction: persistentSortDirection } = persistent !== null && persistent !== void 0 ? persistent : {};
+    const column = columns.find((c) => c.id === columnId);
     const invert = direction === "DESC";
-    const primaryInvert = primaryDirection === "DESC";
-    const primaryColumn = primaryKey && columns[primaryKey];
+    const primaryInvert = persistentSortDirection === "DESC";
+    const primaryColumn = persistentSortColumnId && columns.find((c) => c.id === persistentSortColumnId);
     // Make a shallow copy for sorting to avoid mutating the original list
     return [...batch].sort((a, b) => {
         if (a.pin || b.pin) {
@@ -41,7 +43,7 @@ function sortBatch(columns, batch, sortState, caseSensitive) {
                 return primaryCompare;
             }
         }
-        return compare(column, a, b, invert, caseSensitive);
+        return column ? compare(column, a, b, invert, caseSensitive) : 0;
     });
 }
 function getPin(pin) {

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

@@ -3,20 +3,20 @@ import { GridCellContent } from "../components/cell";
 import { GridDataRow } from "../components/Row";
 import { GridTableApi } from "../GridTableApi";
 import { GridStyle, RowStyle } from "../TableStyles";
-import { GridCellAlignment, GridColumn, Kinded, RenderAs } from "../types";
+import { GridCellAlignment, GridColumnWithId, Kinded, RenderAs } from "../types";
 import { Properties } from "../../../Css";
 /** If a column def return just string text for a given row, apply some default styling. */
-export declare function toContent(maybeContent: ReactNode | GridCellContent, isHeader: boolean, canSortColumn: boolean, isClientSideSorting: boolean, style: GridStyle, as: RenderAs, alignment: GridCellAlignment): ReactNode;
+export declare function toContent(maybeContent: ReactNode | GridCellContent, isHeader: boolean, canSortColumn: boolean, isClientSideSorting: boolean, style: GridStyle, as: RenderAs, alignment: GridCellAlignment, column: GridColumnWithId<any>): ReactNode;
 export declare function isGridCellContent(content: ReactNode | GridCellContent): content is GridCellContent;
 /** 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>, api: GridTableApi<R>, level: number): ReactNode | GridCellContent;
+export declare function applyRowFn<R extends Kinded>(column: GridColumnWithId<R>, row: GridDataRow<R>, api: GridTableApi<R>, level: number): ReactNode | GridCellContent;
 export declare const ASC: "ASC";
 export declare const DESC: "DESC";
 export declare const emptyCell: GridCellContent;
 export declare function getIndentationCss<R extends Kinded>(style: GridStyle, rowStyle: RowStyle<R> | undefined, columnIndex: number, maybeContent: ReactNode | GridCellContent): Properties;
-export declare function getFirstOrLastCellCss<R extends Kinded>(style: GridStyle, columnIndex: number, columns: GridColumn<R>[]): Properties;
-export declare function getAlignment(column: GridColumn<any>, maybeContent: ReactNode | GridCellContent): GridCellAlignment;
-export declare function getJustification(column: GridColumn<any>, maybeContent: ReactNode | GridCellContent, as: RenderAs, alignment: GridCellAlignment): {
+export declare function getFirstOrLastCellCss<R extends Kinded>(style: GridStyle, columnIndex: number, columns: GridColumnWithId<R>[]): Properties;
+export declare function getAlignment(column: GridColumnWithId<any>, maybeContent: ReactNode | GridCellContent): GridCellAlignment;
+export declare function getJustification(column: GridColumnWithId<any>, maybeContent: ReactNode | GridCellContent, as: RenderAs, alignment: GridCellAlignment): {
     textAlign: import("csstype").Property.TextAlign | undefined;
 };
 export declare function maybeApplyFunction<T>(row: T, maybeFn: Properties | ((row: T) => Properties) | undefined): Properties | undefined;

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

@@ -6,7 +6,7 @@ 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) {
+function toContent(maybeContent, isHeader, canSortColumn, isClientSideSorting, style, as, alignment, column) {
     var _a, _b;
     let content = isGridCellContent(maybeContent) ? maybeContent.content : maybeContent;
     if (typeof content === "function") {
@@ -32,7 +32,7 @@ function toContent(maybeContent, isHeader, canSortColumn, isClientSideSorting, s
             })
             : content;
     if (content && typeof content === "string" && isHeader && canSortColumn) {
-        return (0, jsx_runtime_1.jsx)(SortHeader_1.SortHeader, { content: content, iconOnLeft: alignment === "right" }, void 0);
+        return (0, jsx_runtime_1.jsx)(SortHeader_1.SortHeader, { content: content, iconOnLeft: alignment === "right", column: column }, 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

package/package.json

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

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

@@ -1,15 +0,0 @@
-import { GridSortConfig } from "../GridTable";
-import { Direction, GridColumn, Kinded } from "../types";
-/**
- * Our internal sorting state.
- *
- * `S` is, for whatever current column we're sorting by, either it's:
- *
- * a) `serverSideSortKey` if we're server-side sorting, or
- * b) it's index in the `columns` array, if client-side sorting
- */
-export declare type SortState<S> = readonly [S, Direction, S | undefined, Direction | undefined];
-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, SortOn, boolean];
-export declare function deriveSortState<S>(currentSortState: SortState<S> | undefined, clickedKey: S, initialSortState: SortState<S> | undefined): SortState<S> | undefined;

package/dist/components/Table/hooks/useSortState.js

@@ -1,76 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.deriveSortState = exports.useSortState = void 0;
-const react_1 = require("react");
-const utils_1 = require("../utils/utils");
-/** Small custom hook that wraps the "setSortColumn inverts the current sort" logic. */
-function useSortState(columns, sorting) {
-    // If we're server-side sorting, use the caller's `sorting.value` prop to initialize our internal
-    // `useState`. After this, we ignore `sorting.value` because we assume it should match what our
-    // `setSortState` just changed anyway (in response to the user sorting a column).
-    const initialSortState = (0, react_1.useMemo)(() => {
-        if ((sorting === null || sorting === void 0 ? void 0 : sorting.on) === "client") {
-            const { initial, primary } = sorting;
-            const primaryKey = primary && (typeof primary[0] === "number" ? primary[0] : columns.indexOf(primary[0]));
-            if (initial === undefined && "initial" in sorting) {
-                // if explicitly set to `undefined`, then do not sort
-                return undefined;
-            }
-            else if (initial) {
-                const key = typeof initial[0] === "number" ? initial[0] : columns.indexOf(initial[0]);
-                return [key, initial[1], primaryKey, primary === null || primary === void 0 ? void 0 : primary[1]];
-            }
-            else {
-                // If no explicit sorting, assume 1st column ascending
-                const firstSortableColumn = columns.findIndex((c) => c.clientSideSort !== false);
-                return [firstSortableColumn, utils_1.ASC, primaryKey, primary === null || primary === void 0 ? void 0 : primary[1]];
-            }
-        }
-        else {
-            return (sorting === null || sorting === void 0 ? void 0 : sorting.value) ? [sorting === null || sorting === void 0 ? void 0 : sorting.value[0], sorting === null || sorting === void 0 ? void 0 : sorting.value[1], undefined, undefined] : undefined;
-        }
-    }, 
-    // 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 (onSort) {
-            const [newKey, newDirection] = newState !== null && newState !== void 0 ? newState : [undefined, undefined];
-            onSort(newKey, newDirection);
-        }
-    }, 
-    // Note that sorting.onSort is not listed here, so we bind to whatever the 1st sorting.onSort was
-    [initialSortState, sortState, onSort]);
-    // If sorting is done on the client, the by default the sort will NOT be case sensitive
-    const caseSensitive = (sorting === null || sorting === void 0 ? void 0 : sorting.on) === "client" ? !!sorting.caseSensitive : false;
-    return [sortState, setSortKey, sorting === null || sorting === void 0 ? void 0 : sorting.on, caseSensitive];
-}
-exports.useSortState = useSortState;
-// Exported for testing purposes
-function deriveSortState(currentSortState, clickedKey, initialSortState) {
-    const [currentKey, currentDirection] = currentSortState || [];
-    // If the current sort state is not defined, or clicking a new column, then sort ASC on the clicked key
-    if (!currentSortState || clickedKey !== currentKey) {
-        return [clickedKey, utils_1.ASC, initialSortState === null || initialSortState === void 0 ? void 0 : initialSortState[2], initialSortState === null || initialSortState === void 0 ? void 0 : initialSortState[3]];
-    }
-    // If there is an `initialSortState` and we're clicking on that same key, then flip the sort.
-    // Handles cases where the initial sort is DESC so that we can allow for DESC to ASC sorting.
-    if (initialSortState && initialSortState[0] === clickedKey) {
-        return [clickedKey, currentDirection === utils_1.ASC ? utils_1.DESC : utils_1.ASC, initialSortState === null || initialSortState === void 0 ? void 0 : initialSortState[2], initialSortState === null || initialSortState === void 0 ? void 0 : initialSortState[3]];
-    }
-    // Otherwise when clicking the current column, toggle through sort states
-    if (currentDirection === utils_1.ASC) {
-        // if ASC -> go to desc
-        return [clickedKey, utils_1.DESC, initialSortState === null || initialSortState === void 0 ? void 0 : initialSortState[2], initialSortState === null || initialSortState === void 0 ? void 0 : initialSortState[3]];
-    }
-    // Else, direction is already DESC, so revert to original sort value.
-    return initialSortState;
-}
-exports.deriveSortState = deriveSortState;

package/dist/components/Table/utils/GridSortContext.d.ts

@@ -1,13 +0,0 @@
-import React from "react";
-/**
- * Provides the sorting settings to headers.
- *
- * This is broken out into it's own context (i.e. separate from `GridCollapseContextProps`)
- * so that we can have sort changes only re-render the header row, and not trigger a re-render
- * of every row in the table.
- */
-export declare type GridSortContextProps = {
-    sorted: "ASC" | "DESC" | undefined;
-    toggleSort(): void;
-};
-export declare const GridSortContext: React.Context<GridSortContextProps>;

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

@@ -1,11 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.GridSortContext = void 0;
-const react_1 = __importDefault(require("react"));
-exports.GridSortContext = react_1.default.createContext({
-    sorted: undefined,
-    toggleSort: () => { },
-});