@homebound/beam 2.99.1 → 2.100.0

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;

package/dist/components/Table/GridTable.js

@@ -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]);

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.100.0",
   "author": "Homebound",
   "license": "MIT",
   "main": "dist/index.js",