@homebound/beam 2.99.1 → 2.101.2

package/dist/components/Icon.d.ts

@@ -9,7 +9,7 @@ export interface IconProps extends AriaAttributes, DOMProps {
     /** The size of the icon in increments, i.e. 1 == 8px, default is 3 == 24px. */
     inc?: number;
     /** Styles overrides */
-    xss?: Xss<Margin>;
+    xss?: Xss<Margin | "visibility">;
 }
 export declare const Icon: React.MemoExoticComponent<(props: IconProps) => import("@emotion/react/jsx-runtime").JSX.Element>;
 /**

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

@@ -103,13 +103,13 @@ export declare type RowTuple<R extends Kinded> = [GridDataRow<R> | undefined, Re
 export declare type GridSortConfig<S> = {
     on: "client";
     /** The optional initial column (index in columns) and direction to sort. */
-    initial?: [S | GridColumn<any>, Direction];
+    initial?: [S | GridColumn<any>, Direction] | undefined;
 } | {
     on: "server";
     /** The current sort by value + direction (if server-side sorting). */
     value?: [S, Direction];
-    /** Callback for when the column is sorted (if server-side sorting). */
-    onSort: (orderBy: S, direction: Direction) => void;
+    /** 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;
 };
 export interface GridTableProps<R extends Kinded, S, X> {
     id?: string;
@@ -185,18 +185,10 @@ export declare type GridTableApi = {
  */
 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;
 /**
- * Creates a `grid-template-column` specific to our virtual output.
- *
- * Because of two things:
- *
- * a) react-virtuoso puts the header in a different div than the normal rows, and
- *
- * b) content-aware sizing just in general look janky/constantly resize while scrolling
- *
- * When we're as=virtual, we change our default + enforce only fixed-sized units (% and px)
+ * 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 calcVirtualGridColumns(columns: GridColumn<any>[], firstLastColumnWidth: number | undefined): string[];
-export declare function calcDivGridColumns(columns: GridColumn<any>[], firstLastColumnWidth: number | undefined): string;
+export declare function calcColumnSizes(columns: GridColumn<any>[], firstLastColumnWidth: number | undefined): string[];
 /**
  * Given an ADT of type T, performs a look up and returns the type of kind K.
  *
@@ -225,21 +217,8 @@ export declare type GridColumn<R extends Kinded, S = {}> = {
     } ? (data: D, row: GridRowKind<R, K>) => ReactNode | GridCellContent : (row: GridRowKind<R, K>) => ReactNode | GridCellContent);
 } & {
     /**
-     * The column's grid column width.
-     *
-     * For `as=div` output:
-     *
-     * - Any CSS grid units are supported
-     * - Numbers are treated as `fr` units
-     * - The default value is `auto`, which in CSS grid will do content-aware/responsive layout.
-     *
-     * For `as=virtual` output:
-     *
-     * - Only px, percentage, or fr units are supported, due to a) react-virtuoso puts the sticky header
-     * rows in a separate `div` and so we end up with two `grid-template-columns`, so cannot rely on
-     * any content-aware sizing, and b) content-aware sizing in a scrolling/virtual table results in
-     * a ~janky experience as the columns will constantly resize as new/different content is put in/out
-     * of the DOM.
+     * The column's width.
+     * - Only px, percentage, or fr units are supported, due to each GridRow acting as an independent table. This ensures consistent alignment between rows.
      * - Numbers are treated as `fr` units
      * - The default value is `1fr`
      */
@@ -277,7 +256,7 @@ export declare type GridCellAlignment = "left" | "right" | "center";
  * primitive value for filtering and sorting.
  */
 export declare type GridCellContent = {
-    /** The JSX content of the cell. Virtual tables that client-side sort should use a function to avaid perf overhead. */
+    /** The JSX content of the cell. Virtual tables that client-side sort should use a function to avoid perf overhead. */
     content: ReactNode | (() => ReactNode);
     alignment?: GridCellAlignment;
     /** Allow value to be a function in case it's a dynamic value i.e. reading from an inline-edited proxy. */

package/dist/components/Table/GridTable.js

@@ -22,7 +22,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.matchesFilter = exports.GridCollapseContext = exports.applyRowFn = exports.calcDivGridColumns = exports.calcVirtualGridColumns = exports.GridTable = exports.setGridTableDefaults = exports.setDefaultStyle = exports.setRunningInJest = exports.emptyCell = exports.DESC = exports.ASC = void 0;
+exports.matchesFilter = exports.GridCollapseContext = exports.applyRowFn = exports.calcColumnSizes = exports.GridTable = exports.setGridTableDefaults = exports.setDefaultStyle = exports.setRunningInJest = exports.emptyCell = exports.DESC = exports.ASC = void 0;
 const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
 const memoize_one_1 = __importDefault(require("memoize-one"));
 const mobx_react_1 = require("mobx-react");
@@ -92,12 +92,10 @@ function GridTable(props) {
         };
     }
     const [sortState, setSortKey] = (0, useSortState_1.useSortState)(columns, sorting);
-    // Disclaimer that technically even though this is a useMemo, sortRows is mutating `rows` directly
     const maybeSorted = (0, react_1.useMemo)(() => {
         if ((sorting === null || sorting === void 0 ? void 0 : sorting.on) === "client" && sortState) {
             // If using client-side sort, the sortState use S = number
-            (0, sortRows_1.sortRows)(columns, rows, sortState);
-            return rows;
+            return (0, sortRows_1.sortRows)(columns, rows, sortState);
         }
         return rows;
     }, [columns, rows, sorting, sortState]);
@@ -106,7 +104,7 @@ function GridTable(props) {
         var _a;
         // Break up "foo bar" into `[foo, bar]` and a row must match both `foo` and `bar`
         const filters = (filter && filter.split(/ +/)) || [];
-        const columnSizes = as === "virtual" ? calcVirtualGridColumns(columns, (_a = style.nestedCards) === null || _a === void 0 ? void 0 : _a.firstLastColumnWidth) : undefined;
+        const columnSizes = calcColumnSizes(columns, (_a = style.nestedCards) === null || _a === void 0 ? void 0 : _a.firstLastColumnWidth);
         function makeRowComponent(row) {
             // 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.
@@ -219,11 +217,11 @@ exports.GridTable = GridTable;
 // Determine which HTML element to use to build the GridTable
 const renders = {
     table: renderTable,
-    div: renderCssGrid,
+    div: renderDiv,
     virtual: renderVirtual,
 };
-/** Renders as a CSS Grid, which is the default / most well-supported rendered. */
-function renderCssGrid(style, id, columns, headerRows, filteredRows, firstRowMessage, _stickyHeader, firstLastColumnWidth, xss, _virtuosoRef) {
+/** Renders table using divs with flexbox rows, which is the default render */
+function renderDiv(style, id, columns, headerRows, filteredRows, firstRowMessage, _stickyHeader, firstLastColumnWidth, xss, _virtuosoRef) {
     var _a;
     // We must determine if the header is using nested card styles to account for
     // the opening and closing Chrome rows.
@@ -249,7 +247,8 @@ function renderCssGrid(style, id, columns, headerRows, filteredRows, firstRowMes
     */
     const firstNonHeaderRowIndex = (!isNestedCardStyleHeader ? 1 : 3) + 1;
     return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ css: {
-            ...Css_1.Css.dg.gtc(calcDivGridColumns(columns, firstLastColumnWidth)).$,
+            // Ensure all rows extend the same width
+            ...Css_1.Css.mw("fit-content").$,
             /*
               Using n + (firstNonHeaderRowIndex + 1) here to target all rows that
               are after the first non-header row. Since n starts at 0, we can use
@@ -265,7 +264,7 @@ function renderCssGrid(style, id, columns, headerRows, filteredRows, firstRowMes
                 : {}),
             ...style.rootCss,
             ...xss,
-        }, "data-testid": id }, { children: [headerRows.map(([, node]) => node), firstRowMessage && ((0, jsx_runtime_1.jsx)("div", Object.assign({ css: Css_1.Css.add("gridColumn", `${columns.length} span`).$ }, { children: (0, jsx_runtime_1.jsx)("div", Object.assign({ css: { ...style.firstRowMessageCss } }, { children: firstRowMessage }), void 0) }), void 0)), filteredRows.map(([, node]) => node)] }), void 0));
+        }, "data-testid": id }, { children: [headerRows.map(([, node]) => node), firstRowMessage && (0, jsx_runtime_1.jsx)("div", Object.assign({ css: { ...style.firstRowMessageCss } }, { children: firstRowMessage }), void 0), filteredRows.map(([, node]) => node)] }), void 0));
 }
 /** Renders as a table, primarily/solely for good print support. */
 function renderTable(style, id, columns, headerRows, filteredRows, firstRowMessage, _stickyHeader, _firstLastColumnWidth, xss, _virtuosoRef) {
@@ -305,7 +304,9 @@ function renderVirtual(style, id, columns, headerRows, filteredRows, firstRowMes
         const { paddingBottom, ...otherRootStyles } = (_a = style.rootCss) !== null && _a !== void 0 ? _a : {};
         return { footerStyle: { paddingBottom }, listStyle: { ...style, rootCss: otherRootStyles } };
     }, [style]);
-    return ((0, jsx_runtime_1.jsx)(react_virtuoso_1.Virtuoso, { overscan: 5, ref: virtuosoRef, components: {
+    return ((0, jsx_runtime_1.jsx)(react_virtuoso_1.Virtuoso, { overscan: 5, ref: virtuosoRef, 
+        // Add `minWidth: fit-content` to ensure a sticky header and the virtualized table body maintain same width
+        style: { minWidth: "fit-content" }, components: {
             List: VirtualRoot(listStyle, columns, id, firstLastColumnWidth, xss),
             Footer: () => (0, jsx_runtime_1.jsx)("div", { css: footerStyle }, void 0),
         }, 
@@ -348,7 +349,7 @@ function renderVirtual(style, id, columns, headerRows, filteredRows, firstRowMes
  * rows and the second represents the non-header rows (list rows).
  *
  * The main goal of this custom component is to:
- * - Customize the list wrapper to our css grid logic styles
+ * - Customize the list wrapper to our styles
  *
  * We wrap this in memoizeOne so that React.createElement sees a
  * consistent/stable component identity, even though technically we have a
@@ -361,7 +362,7 @@ const VirtualRoot = (0, memoize_one_1.default)((gs, _columns, id, _firstLastColu
         // table list generally has styles to scroll the page for windowing.
         const isHeader = Object.keys(style || {}).length === 0;
         // This re-renders each time we have new children in the viewport
-        return ((0, jsx_runtime_1.jsx)("div", Object.assign({ ref: ref, style: { ...style, ...(gs.nestedCards ? { minWidth: "fit-content" } : {}) }, css: {
+        return ((0, jsx_runtime_1.jsx)("div", Object.assign({ ref: ref, style: { ...style, ...{ minWidth: "fit-content" } }, css: {
                 // Add an extra `> div` due to Item + itemContent both having divs
                 ...Css_1.Css.addIn("& > div + div > div > *", gs.betweenRowsCss || {}).$,
                 // Table list styles only
@@ -376,17 +377,10 @@ const VirtualRoot = (0, memoize_one_1.default)((gs, _columns, id, _firstLastColu
     });
 });
 /**
- * Creates a `grid-template-column` specific to our virtual output.
- *
- * Because of two things:
- *
- * a) react-virtuoso puts the header in a different div than the normal rows, and
- *
- * b) content-aware sizing just in general look janky/constantly resize while scrolling
- *
- * When we're as=virtual, we change our default + enforce only fixed-sized units (% and px)
+ * 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)
  */
-function calcVirtualGridColumns(columns, firstLastColumnWidth) {
+function calcColumnSizes(columns, firstLastColumnWidth) {
     // For both default columns (1fr) as well as `w: 4fr` columns, we translate the width into an expression that looks like:
     // calc((100% - allOtherPercent - allOtherPx) * ((myFr / totalFr))`
     //
@@ -412,7 +406,7 @@ function calcVirtualGridColumns(columns, firstLastColumnWidth) {
             return { ...acc, claimedPercentages: acc.claimedPercentages + Number(w.replace("%", "")) };
         }
         else {
-            throw new Error("as=virtual only supports px, percentage, or fr units");
+            throw new Error("Beam Table column width definition only supports px, percentage, or fr units");
         }
     }, { claimedPercentages: 0, claimedPixels: firstLastColumnWidth ? firstLastColumnWidth * 2 : 0, totalFr: 0 });
     // This is our "fake but for some reason it lines up better" fr calc
@@ -431,7 +425,7 @@ function calcVirtualGridColumns(columns, firstLastColumnWidth) {
                 return fr(Number(w.replace("fr", "")));
             }
             else {
-                throw new Error("as=virtual only supports px, percentage, or fr units");
+                throw new Error("Beam Table column width definition only supports px, percentage, or fr units");
             }
         }
         else {
@@ -440,25 +434,7 @@ function calcVirtualGridColumns(columns, firstLastColumnWidth) {
     });
     return maybeAddCardColumns(sizes, firstLastColumnWidth);
 }
-exports.calcVirtualGridColumns = calcVirtualGridColumns;
-function calcDivGridColumns(columns, firstLastColumnWidth) {
-    const sizes = columns.map(({ w }) => {
-        if (typeof w === "undefined") {
-            // Hrm, I waffle between 'auto' or '1fr' being the better default here...
-            return "auto";
-        }
-        else if (typeof w === "string") {
-            // Use whatever the user passed in
-            return w;
-        }
-        else {
-            // Otherwise assume fr units
-            return `${w}fr`;
-        }
-    });
-    return maybeAddCardColumns(sizes, firstLastColumnWidth).join(" ");
-}
-exports.calcDivGridColumns = calcDivGridColumns;
+exports.calcColumnSizes = calcColumnSizes;
 // If we're doing nested cards, we add extra 1st/last cells...
 function maybeAddCardColumns(sizes, firstLastColumnWidth) {
     return !firstLastColumnWidth ? sizes : [`${firstLastColumnWidth}px`, ...sizes, `${firstLastColumnWidth}px`];
@@ -482,19 +458,15 @@ function GridRow(props) {
     const rowStyle = rowStyles === null || rowStyles === void 0 ? void 0 : rowStyles[row.kind];
     const rowStyleCellCss = maybeApplyFunction(row, rowStyle === null || rowStyle === void 0 ? void 0 : rowStyle.cellCss);
     const rowCss = {
-        // We add a display-contents so that we can have "row-level" div elements in our
-        // DOM structure. I.e. grid is normally root-element > cell-elements, but we want
-        // root-element > row-element > cell-elements, so that we can have a hook for
-        // hovers and styling. In theory this would change with subgrids.
-        // Only enable when using div as elements
         // For virtual tables use `display: flex` to keep all cells on the same row, but use `flexNone` to ensure the cells stay their defined widths
-        ...(as === "table" ? {} : as === "virtual" ? Css_1.Css.df.addIn("&>*", Css_1.Css.flexNone.$).$ : Css_1.Css.display("contents").$),
+        ...(as === "table" ? {} : Css_1.Css.df.addIn("&>*", Css_1.Css.flexNone.$).$),
         ...(((rowStyle === null || rowStyle === void 0 ? void 0 : rowStyle.rowLink) || (rowStyle === null || rowStyle === void 0 ? void 0 : rowStyle.onClick)) &&
             style.rowHoverColor && {
             // Even though backgroundColor is set on the cellCss (due to display: content), the hover target is the row.
             "&:hover > *": Css_1.Css.cursorPointer.bgColor(maybeDarken(rowStyleCellCss === null || rowStyleCellCss === void 0 ? void 0 : rowStyleCellCss.backgroundColor, style.rowHoverColor)).$,
         }),
         ...maybeApplyFunction(row, rowStyle === null || rowStyle === void 0 ? void 0 : rowStyle.rowCss),
+        ...(isHeader && stickyHeader ? Css_1.Css.sticky.top(stickyOffset).z1.$ : undefined),
     };
     const Row = as === "table" ? "tr" : "div";
     const openCardStyles = typeof openCards === "string"
@@ -545,18 +517,11 @@ function GridRow(props) {
                     ...getIndentationCss(style, rowStyle, columnIndex, maybeContent),
                     // Then apply any header-specific override
                     ...(isHeader && style.headerCellCss),
-                    // Non-virtualized tables use h100 so that all cells are the same height across the row.
-                    // Virtualized table rows use `display: flex;`, so the flex children are set to `align-self: stretch` by default, which achieves the same goal.
-                    // Though, we need to omit setting `h100` on the flex children, as a flex container needs a defined height set for `h100` to work on flex children
-                    ...(isHeader && as !== "virtual" ? Css_1.Css.h100.$ : undefined),
-                    ...maybeStickyHeaderStyles,
                     // If we're within a card, use its background color
                     ...(currentCard && Css_1.Css.bgColor(currentCard.bgColor).$),
-                    // Add in colspan css if needed
-                    ...(currentColspan > 1 ? Css_1.Css.gc(`span ${currentColspan}`).$ : {}),
                     // And finally the specific cell's css (if any from GridCellContent)
                     ...rowStyleCellCss,
-                    // For virtual tables we define the width of the column on each cell. Supports col spans.
+                    // Define the width of the column on each cell. Supports col spans.
                     ...(columnSizes && {
                         width: `calc(${columnSizes
                             .slice(maybeNestedCardColumnIndex, maybeNestedCardColumnIndex + currentColspan)
@@ -643,8 +608,8 @@ function applyRowFn(column, row) {
 exports.applyRowFn = applyRowFn;
 /** Renders our default cell element, i.e. if no row links and no custom renderCell are used. */
 const defaultRenderFn = (as) => (key, css, content) => {
-    const Row = as === "table" ? "td" : "div";
-    return ((0, jsx_runtime_1.jsx)(Row, Object.assign({ css: { ...css, ...tableRowStyles(as) } }, { children: content }), key));
+    const Cell = as === "table" ? "td" : "div";
+    return ((0, jsx_runtime_1.jsx)(Cell, Object.assign({ css: { ...css, ...tableRowStyles(as) } }, { children: content }), key));
 };
 exports.GridCollapseContext = react_1.default.createContext({
     headerCollapsed: false,

package/dist/components/Table/SortHeader.js

@@ -6,6 +6,7 @@ const react_1 = require("react");
 const Icon_1 = require("../Icon");
 const GridSortContext_1 = require("./GridSortContext");
 const Css_1 = require("../../Css");
+const hooks_1 = require("../../hooks");
 const useTestIds_1 = require("../../utils/useTestIds");
 /**
  * Wraps column header names with up/down sorting icons.
@@ -20,8 +21,12 @@ const useTestIds_1 = require("../../utils/useTestIds");
  */
 function SortHeader(props) {
     const { content, xss } = props;
+    const { isHovered, hoverProps } = (0, hooks_1.useHover)({});
     const { sorted, toggleSort } = (0, react_1.useContext)(GridSortContext_1.GridSortContext);
     const tid = (0, useTestIds_1.useTestIds)(props, "sortHeader");
-    return ((0, jsx_runtime_1.jsxs)("div", Object.assign({}, tid, { css: { ...Css_1.Css.df.aic.cursorPointer.selectNone.$, ...xss }, onClick: toggleSort }, { children: [content, sorted === "ASC" && (0, jsx_runtime_1.jsx)(Icon_1.Icon, Object.assign({ icon: "sortUp", inc: 2 }, tid.icon, { xss: Css_1.Css.mlPx(4).$ }), void 0), sorted === "DESC" && (0, jsx_runtime_1.jsx)(Icon_1.Icon, Object.assign({ icon: "sortDown", inc: 2 }, tid.icon, { xss: Css_1.Css.mlPx(4).$ }), void 0)] }), void 0));
+    return ((0, jsx_runtime_1.jsxs)("div", Object.assign({}, tid, { css: { ...Css_1.Css.df.aic.h100.cursorPointer.selectNone.$, ...xss } }, hoverProps, { onClick: toggleSort }, { children: [content, (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
+                        .visibility("hidden")
+                        .if(isHovered || sorted !== undefined)
+                        .visibility("visible").$, inc: 2 }, tid.icon), void 0) }), void 0)] }), void 0));
 }
 exports.SortHeader = SortHeader;

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";
-export declare function sortRows<R extends Kinded>(columns: GridColumn<R>[], rows: GridDataRow<R>[], sortState: SortState<number>): void;
+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;

package/dist/components/Table/sortRows.js

@@ -2,21 +2,16 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ensureClientSideSortValueIsSortable = exports.sortRows = void 0;
 const GridTable_1 = require("./GridTable");
-// We currently mutate `rows` while sorting; this would be bad if rows was directly
-// read from an immutable store like the apollo cache, but we basically always make
-// a copy in the process of adding our `kind` tags.
-//
-// I suppose that is an interesting idea, would we ever want to render a GQL query/cache
-// result directly into the table without first doing a kind-mapping? Like maybe we could
-// use __typename as the kind.
+// Returns a shallow copy of the `rows` parameter sorted based on `sortState`
 function sortRows(columns, rows, sortState) {
-    sortBatch(columns, rows, sortState);
+    const sorted = sortBatch(columns, rows, sortState);
     // Recursively sort child rows
-    for (const row of rows) {
+    sorted.forEach((row, i) => {
         if (row.children) {
-            sortRows(columns, row.children, sortState);
+            sorted[i] = { ...sorted[i], children: sortRows(columns, row.children, sortState) };
         }
-    }
+    });
+    return sorted;
 }
 exports.sortRows = sortRows;
 function sortBatch(columns, batch, sortState) {
@@ -24,7 +19,8 @@ function sortBatch(columns, batch, sortState) {
     const [value, direction] = sortState;
     const column = columns[value];
     const invert = direction === "DESC";
-    batch.sort((a, b) => {
+    // Make a shallow copy for sorting to avoid mutating the original list
+    return [...batch].sort((a, b) => {
         const v1 = sortValue((0, GridTable_1.applyRowFn)(column, a));
         const v2 = sortValue((0, GridTable_1.applyRowFn)(column, b));
         const v1e = v1 === null || v1 === undefined;

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

@@ -10,3 +10,4 @@ import { Direction, GridColumn, GridSortConfig, Kinded } from "./GridTable";
 export declare type SortState<S> = readonly [S, Direction];
 /** 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 deriveSortState<S>(currentSortState: SortState<S> | undefined, clickedKey: S, initialSortState: SortState<S> | undefined): SortState<S> | undefined;

package/dist/components/Table/useSortState.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.useSortState = void 0;
+exports.deriveSortState = exports.useSortState = void 0;
 const react_1 = require("react");
 const GridTable_1 = require("./GridTable");
 /** Small custom hook that wraps the "setSortColumn inverts the current sort" logic. */
@@ -8,34 +8,34 @@ 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 [sortState, setSortState] = (0, react_1.useState)(() => {
+    const initialSortState = (0, react_1.useMemo)(() => {
         if ((sorting === null || sorting === void 0 ? void 0 : sorting.on) === "client") {
             const { initial } = sorting;
-            if (initial) {
+            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]];
             }
             else {
                 // If no explicit sorting, assume 1st column ascending
                 const firstSortableColumn = columns.findIndex((c) => c.clientSideSort !== false);
-                return [firstSortableColumn, "ASC"];
+                return [firstSortableColumn, GridTable_1.ASC];
             }
         }
         else {
             return sorting === null || sorting === void 0 ? void 0 : sorting.value;
         }
-    });
-    // Make a custom setSortKey that is useState-like but contains the invert-if-same-column-clicked-twice logic.
+    }, [sorting, 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 setSortKey = (0, react_1.useCallback)((clickedKey) => {
-        const [currentKey, currentDirection] = sortState || [];
-        const [newKey, newDirection] = 
-        // If clickedKey === currentKey, then toggle direction
-        clickedKey === currentKey
-            ? [currentKey, currentDirection === GridTable_1.ASC ? GridTable_1.DESC : GridTable_1.ASC]
-            : // Otherwise, use the new key, and default to ascending
-                [clickedKey, GridTable_1.ASC];
-        setSortState([newKey, newDirection]);
+        const newState = deriveSortState(sortState, clickedKey, initialSortState);
+        setSortState(newState);
         if ((sorting === null || sorting === void 0 ? void 0 : sorting.on) === "server") {
+            const [newKey, newDirection] = newState !== null && newState !== void 0 ? newState : [undefined, undefined];
             sorting.onSort(newKey, newDirection);
         }
     }, 
@@ -44,3 +44,19 @@ function useSortState(columns, sorting) {
     return [sortState, setSortKey];
 }
 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, GridTable_1.ASC];
+    }
+    // Otherwise when clicking the current column, toggle through sort states
+    if (currentDirection === GridTable_1.ASC) {
+        // if ASC -> go to desc
+        return [clickedKey, GridTable_1.DESC];
+    }
+    // Else, direction is already DESC, so revert to original sort value.
+    return initialSortState;
+}
+exports.deriveSortState = deriveSortState;

package/package.json

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