@homebound/beam 2.98.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/Modal/Modal.d.ts

@@ -1,4 +1,4 @@
-import { ReactNode } from "react";
+import { MutableRefObject, ReactNode } from "react";
 import { Only, Xss } from "../../Css";
 import { Callback } from "../../types";
 export declare type ModalSize = "sm" | "md" | "lg" | "xl";
@@ -19,7 +19,12 @@ export interface ModalProps {
     forceScrolling?: boolean;
     /** Adds a callback that is called _after_ close has definitely happened. */
     onClose?: Callback;
+    /** Imperative API for interacting with the Modal */
+    api?: MutableRefObject<ModalApi | undefined>;
 }
+export declare type ModalApi = {
+    setSize: (size: ModalProps["size"]) => void;
+};
 /**
  * Internal component for displaying a Modal; see `useModal` for the public API.
  *

package/dist/components/Modal/Modal.js

@@ -20,7 +20,7 @@ const utils_1 = require("../../utils");
  * Provides underlay, modal container, and header. Will disable scrolling of page under the modal.
  */
 function Modal(props) {
-    const { size = "md", content, forceScrolling } = props;
+    const { size = "md", content, forceScrolling, api } = props;
     const isFixedHeight = typeof size !== "string";
     const ref = (0, react_1.useRef)(null);
     const { modalBodyDiv, modalFooterDiv, modalHeaderDiv, drawerContentStack } = (0, BeamContext_1.useBeamContext)();
@@ -37,13 +37,16 @@ function Modal(props) {
     }, ref);
     const { modalProps } = (0, react_aria_1.useModal)();
     const { dialogProps, titleProps } = (0, react_aria_1.useDialog)({ role: "dialog" }, ref);
-    const [width, height] = getSize(size);
+    const [[width, height], setSize] = (0, react_1.useState)(getSize(size));
     const contentRef = (0, react_1.useRef)(null);
     const modalBodyRef = (0, react_1.useRef)(null);
     const modalFooterRef = (0, react_1.useRef)(null);
     const modalHeaderRef = (0, react_1.useRef)(null);
     const testId = (0, utils_1.useTestIds)({}, testIdPrefix);
     (0, react_aria_1.usePreventScroll)();
+    if (api) {
+        api.current = { setSize: (size = "md") => setSize(getSize(size)) };
+    }
     const [hasScroll, setHasScroll] = (0, react_1.useState)(forceScrolling !== null && forceScrolling !== void 0 ? forceScrolling : false);
     (0, resize_observer_1.default)(contentRef, ({ target }) => {
         if (forceScrolling === undefined && !isFixedHeight) {

package/dist/components/Modal/useModal.d.ts

@@ -4,5 +4,6 @@ export interface UseModalHook {
     openModal: (props: ModalProps) => void;
     closeModal: Callback;
     addCanClose: (canClose: CheckFn) => void;
+    setSize: (size: ModalProps["size"]) => void;
 }
 export declare function useModal(): UseModalHook;

package/dist/components/Modal/useModal.js

@@ -7,6 +7,7 @@ const utils_1 = require("../../utils");
 function useModal() {
     const { modalState, modalCanCloseChecks } = (0, BeamContext_1.useBeamContext)();
     const lastCanClose = (0, react_1.useRef)();
+    const api = (0, react_1.useRef)();
     (0, react_1.useEffect)(() => {
         return () => {
             modalCanCloseChecks.current = modalCanCloseChecks.current.filter((c) => c !== lastCanClose.current);
@@ -16,7 +17,7 @@ function useModal() {
         openModal(props) {
             // TODO Check already open?
             // TODO Check can leave?
-            modalState.current = props;
+            modalState.current = { ...props, api };
         },
         closeModal() {
             var _a;
@@ -38,6 +39,12 @@ function useModal() {
             ];
             lastCanClose.current = canClose;
         },
+        setSize(size) {
+            var _a;
+            if (modalState.current && ((_a = modalState.current.api) === null || _a === void 0 ? void 0 : _a.current)) {
+                modalState.current.api.current.setSize(size);
+            }
+        },
     }), [modalState, modalCanCloseChecks]);
 }
 exports.useModal = useModal;

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

@@ -21,7 +21,14 @@ export interface GridStyle {
     firstNonHeaderRowCss?: Properties;
     /** Applied to all cell divs (via a selector off the base div). */
     cellCss?: Properties;
-    /** Applied to the header (really first) row div. */
+    /**
+     * Applied to the header row divs.
+     *
+     * NOTE `as=virtual`: When using a virtual table with the goal of adding space
+     * between the header and the first row use `firstNonHeaderRowCss` with a
+     * margin-top instead. Using `headerCellCss` will not work since the header
+     * rows are wrapper with Chrome rows.
+     */
     headerCellCss?: Properties;
     /** Applied to the first cell of all rows, i.e. for table-wide padding or left-side borders. */
     firstCellCss?: Properties;
@@ -96,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]);
@@ -112,6 +110,7 @@ function GridTable(props) {
             // changes, and so by not passing the sortProps, it means the data rows' React.memo will still cache them.
             const sortProps = row.kind === "header" ? { sorting, sortState, setSortKey } : { sorting };
             const RowComponent = observeRows ? ObservedGridRow : MemoizedGridRow;
+            const openCards = row.kind === "header" ? headerCards : rowCards;
             return ((0, jsx_runtime_1.jsx)(exports.GridCollapseContext.Provider, Object.assign({ value: row.kind === "header" ? collapseAllContext : collapseRowContext }, { children: (0, jsx_runtime_1.jsx)(RowComponent, Object.assign({}, {
                     as,
                     columns,
@@ -120,16 +119,18 @@ function GridTable(props) {
                     rowStyles,
                     stickyHeader,
                     stickyOffset,
-                    openCards: nestedCards ? nestedCards.currentOpenCards() : undefined,
+                    openCards: openCards ? openCards.currentOpenCards() : undefined,
                     columnSizes,
                     ...sortProps,
-                }), `${row.kind}-${row.id}`) }), `${row.kind}-${row.id}`));
+                }), void 0) }), `${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).
         const headerRows = [];
         const filteredRows = [];
         // Misc state to track our nested card-ification, i.e. interleaved actual rows + chrome rows
-        const nestedCards = !!style.nestedCards && new nestedCards_1.NestedCards(columns, filteredRows, style);
+        // for the header and row (non-header rows) cards.
+        const headerCards = !!style.nestedCards && new nestedCards_1.NestedCards(columns, headerRows, style.nestedCards);
+        const rowCards = !!style.nestedCards && new nestedCards_1.NestedCards(columns, filteredRows, style.nestedCards);
         // Depth-first to filter
         function visit(row) {
             var _a;
@@ -139,32 +140,38 @@ function GridTable(props) {
             // Even if we don't pass the filter, one of our children might, so we continue on after this check
             let isCard = false;
             if (matches) {
-                isCard = nestedCards && nestedCards.maybeOpenCard(row);
+                isCard = rowCards && rowCards.maybeOpenCard(row);
                 filteredRows.push([row, makeRowComponent(row)]);
             }
             const isCollapsed = collapsedIds.includes(row.id);
             if (!isCollapsed && !!((_a = row.children) === null || _a === void 0 ? void 0 : _a.length)) {
-                nestedCards && matches && nestedCards.addSpacer();
+                rowCards && matches && rowCards.addSpacer();
                 visitRows(row.children, isCard);
             }
-            isCard && nestedCards && nestedCards.closeCard();
+            isCard && rowCards && rowCards.closeCard();
         }
         function visitRows(rows, addSpacer) {
             const length = rows.length;
             rows.forEach((row, i) => {
+                var _a;
                 if (row.kind === "header") {
-                    nestedCards && nestedCards.maybeOpenCard(row);
+                    // Flag to determine if the header has nested card styles.
+                    // This will determine if we should include opening and closing
+                    // Chrome rows.
+                    const isHeaderNested = !!((_a = style.nestedCards) === null || _a === void 0 ? void 0 : _a.kinds["header"]);
+                    isHeaderNested && headerCards && headerCards.maybeOpenCard(row);
                     headerRows.push([row, makeRowComponent(row)]);
-                    nestedCards && nestedCards.closeCard();
+                    isHeaderNested && headerCards && headerCards.closeCard();
+                    isHeaderNested && headerCards && headerCards.done();
                     return;
                 }
                 visit(row);
-                addSpacer && nestedCards && i !== length - 1 && nestedCards.addSpacer();
+                addSpacer && rowCards && i !== length - 1 && rowCards.addSpacer();
             });
         }
         // If nestedCards is set, we assume the top-level kind is a card, and so should add spacers between them
-        visitRows(maybeSorted, !!nestedCards);
-        nestedCards && nestedCards.done();
+        visitRows(maybeSorted, !!rowCards);
+        rowCards && rowCards.done();
         return [headerRows, filteredRows];
     }, [
         as,
@@ -214,15 +221,46 @@ const renders = {
     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) {
+function renderCssGrid(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.
+    const isNestedCardStyleHeader = !!((_a = style.nestedCards) === null || _a === void 0 ? void 0 : _a.kinds["header"]);
+    /*
+      Determine at what CSS selector index is the first non header row. Note that
+      CSS selectors are not zero-based, unlike JavaScript, so we must add 1 to
+      what we'd normally expect.
+  
+      Ex: When we don't have nestedCard styled headers, then we don't have opening
+      and closing Chrome rows. Therefore, the first non-header row is the second
+      row and since CSS selectors are not zero-based, we are aiming for a value
+      of 2 (1 + 1).
+  
+      Ex: When we have nestedCard styled headers, then we have opening and closing
+      Chrome rows. Therefore, the first non-header row is the fourth row because:
+      - Row 1 is the opening Chrome Row
+      - Row 2 is the header
+      - Row 3 is the closing Chrome Row
+      - Row 4 is the first non-header row
+      And since CSS selectors are not zero-based, we are aiming for a value of 4
+      (3 + 1).
+    */
+    const firstNonHeaderRowIndex = (!isNestedCardStyleHeader ? 1 : 3) + 1;
     return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ css: {
             ...Css_1.Css.dg.gtc(calcDivGridColumns(columns, firstLastColumnWidth)).$,
-            // Apply the between-row styling with `div + div > *` so that we don't have to have conditional
-            // `if !lastRow add border` CSS applied via JS that would mean the row can't be React.memo'd.
-            // The `div + div` is also the "owl operator", i.e. don't apply to the 1st row.
-            ...(style.betweenRowsCss ? Css_1.Css.addIn("& > div + div > *", style.betweenRowsCss).$ : {}),
-            // removes border between header and second row
-            ...(style.firstNonHeaderRowCss ? Css_1.Css.addIn("& > div:nth-of-type(2) > *", style.firstNonHeaderRowCss).$ : {}),
+            /*
+              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
+              the + operator as an offset.
+    
+              Inspired by: https://stackoverflow.com/a/25005740/2551333
+            */
+            ...(style.betweenRowsCss
+                ? Css_1.Css.addIn(`& > div:nth-of-type(n + ${firstNonHeaderRowIndex + 1}) > *`, style.betweenRowsCss).$
+                : {}),
+            ...(style.firstNonHeaderRowCss
+                ? Css_1.Css.addIn(`& > div:nth-of-type(${firstNonHeaderRowIndex}) > *`, style.firstNonHeaderRowCss).$
+                : {}),
             ...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));
@@ -259,6 +297,7 @@ function renderTable(style, id, columns, headerRows, filteredRows, firstRowMessa
  * [3]: https://github.com/tannerlinsley/react-virtual/issues/108
  */
 function renderVirtual(style, id, columns, headerRows, filteredRows, firstRowMessage, stickyHeader, firstLastColumnWidth, xss, virtuosoRef) {
+    // eslint-disable-next-line react-hooks/rules-of-hooks
     const { footerStyle, listStyle } = (0, react_1.useMemo)(() => {
         var _a;
         const { paddingBottom, ...otherRootStyles } = (_a = style.rootCss) !== null && _a !== void 0 ? _a : {};
@@ -279,35 +318,56 @@ function renderVirtual(style, id, columns, headerRows, filteredRows, firstRowMes
             // so instead drill into the 1st real content cell.
             return maybeContentsDiv.firstElementChild.getBoundingClientRect().height;
         }, itemContent: (index) => {
-            // We keep header and filter rows separate, but react-virtuoso is a flat list,
-            // so we pick the right header / first row message / actual row.
-            let i = index;
-            if (i < headerRows.length) {
-                return headerRows[i][1];
+            // Since we have two arrays of rows: `headerRows` and `filteredRow` we
+            // must determine which one to render.
+            // Determine if we need to render a header row
+            if (index < headerRows.length) {
+                return headerRows[index][1];
             }
-            i -= headerRows.length;
+            // Reset index
+            index -= headerRows.length;
+            // Show firstRowMessage as the first `filteredRow`
             if (firstRowMessage) {
-                if (i === 0) {
+                if (index === 0) {
                     return ((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));
                 }
-                i -= 1;
+                // Shift index -1 when there is a firstRowMessage to not skip the
+                // first `filteredRow`
+                index--;
             }
-            return filteredRows[i][1];
+            // Lastly render `filteredRow`
+            return filteredRows[index][1];
         }, totalCount: (headerRows.length || 0) + (firstRowMessage ? 1 : 0) + (filteredRows.length || 0) }, void 0));
 }
 /**
- * Customizes the `List` element that react-virtuoso renders, to have our css grid logic.
+ * A table might render two of these components to represent two virtual lists.
+ * This generally happens when `topItemCount` prop is used and React-Virtuoso
+ * creates to Virtual lists where the first represents, generally, the header
+ * rows and the second represents the non-header rows (list rows).
  *
- * We wrap this in memoizeOne so that React.createElement sees a consistent/stable component
- * identity, even though technically we have a different "component" per the given set of props
- * (solely to capture as params that we can't pass through react-virtuoso's API as props).
+ * The main goal of this custom component is to:
+ * - Customize the list wrapper to our css grid logic styles
+ *
+ * We wrap this in memoizeOne so that React.createElement sees a
+ * consistent/stable component identity, even though technically we have a
+ * different "component" per the given set of props (solely to capture as
+ * params that we can't pass through react-virtuoso's API as props).
  */
-const VirtualRoot = (0, memoize_one_1.default)((gs, columns, id, firstLastColumnWidth, xss) => {
+const VirtualRoot = (0, memoize_one_1.default)((gs, _columns, id, _firstLastColumnWidth, xss) => {
     return react_1.default.forwardRef(function VirtualRoot({ style, children }, ref) {
-        // This re-renders each time we have new children in the view port
-        return ((0, jsx_runtime_1.jsx)("div", Object.assign({ ref: ref, style: style, css: {
+        // This VirtualRoot list represent the header when no styles are given. The
+        // 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: {
                 // Add an extra `> div` due to Item + itemContent both having divs
                 ...Css_1.Css.addIn("& > div + div > div > *", gs.betweenRowsCss || {}).$,
+                // Table list styles only
+                ...(isHeader
+                    ? {}
+                    : {
+                        ...Css_1.Css.addIn("& > div:first-of-type > *", gs.firstNonHeaderRowCss).$,
+                    }),
                 ...gs.rootCss,
                 ...xss,
             }, "data-testid": id }, { children: children }), void 0));

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/nestedCards.d.ts

@@ -1,5 +1,7 @@
 import { ReactElement } from "react";
-import { GridColumn, GridDataRow, GridStyle, Kinded, NestedCardsStyle, NestedCardStyle, NestedCardStyleByKind, RowTuple } from "./GridTable";
+import { GridColumn, GridDataRow, Kinded, NestedCardsStyle, NestedCardStyle, NestedCardStyleByKind, RowTuple } from "./GridTable";
+declare type Chrome = () => JSX.Element;
+declare type ChromeBuffer = Chrome[];
 /**
  * A helper class to create our nested card DOM shenanigans.
  *
@@ -12,22 +14,47 @@ import { GridColumn, GridDataRow, GridStyle, Kinded, NestedCardsStyle, NestedCar
  * a content row itself, the nested padding is handled separately by the
  * GridRow component.
  */
-declare type Chrome = () => JSX.Element;
-declare type ChromeBuffer = Chrome[];
 export declare class NestedCards {
-    private columns;
-    private filteredRows;
-    private style;
+    private readonly columns;
+    private readonly rows;
+    private readonly styles;
     private readonly openCards;
     private readonly chromeBuffer;
-    private readonly styles;
-    constructor(columns: GridColumn<any>[], filteredRows: RowTuple<any>[], style: GridStyle);
+    private chromeRowIndex;
+    constructor(columns: GridColumn<any>[], rows: RowTuple<any>[], styles: NestedCardsStyle);
+    /**
+     * Maybe add an opening Chrome row to the given `row` if its a nested card.
+     *
+     * @param row The row which will be opened. The open Chrome row will appear
+     * above this row.
+     */
     maybeOpenCard(row: GridDataRow<any>): boolean;
     closeCard(): void;
     addSpacer(): void;
+    /**
+     * Close the remaining open rows with a close Chrome row.
+     *
+     * @param row The row that is completing/closing nested open Chrome rows.
+     */
     done(): void;
     /** Return a stable copy of the cards, so it won't change as we keep going. */
     currentOpenCards(): string;
+    /**
+     * Takes the current Chrome row buffer of close row(s), spacers, and open row,
+     * and creates a single chrome DOM row.
+     *
+     * This allows a minimal amount of DOM overhead, insofar as to the css-grid or
+     * react-virtuoso we only add 1 extra DOM node between each row of content to
+     * achieve our nested card look & feel.
+     *
+     * i.e.:
+     * - chrome row (open)
+     * - card1 content row
+     * - chrome row (card2 open)
+     * - nested card2 content row
+     * - chrome row (card2 close, card1 close)
+     */
+    maybeCreateChromeRow(): void;
 }
 /**
  * Draws the rounded corners (either open or close) for a new card.
@@ -55,23 +82,10 @@ export declare function maybeAddCardPadding(openCards: NestedCardStyle[], column
  * have any open cards, but still want a space between top-level cards.
  */
 export declare function makeSpacer(height: number, openCards: string[], styles: NestedCardsStyle): Chrome;
-/**
- * Takes the current buffer of close row(s), spacers, and open row, and creates a single chrome DOM row.
- *
- * This allows a minimal amount of DOM overhead, insofar as to the css-grid or react-virtuoso we only
- * 1 extra DOM node between each row of content to achieve our nested card look & feel, i.e.:
- *
- * - chrome row (open)
- * - card1 content row
- * - chrome row (card2 open)
- * - nested card2 content row
- * - chrome row (card2 close, card1 close)
- */
-export declare function maybeCreateChromeRow(columns: GridColumn<any>[], filteredRows: RowTuple<any>[], chromeBuffer: ChromeBuffer): void;
 interface ChromeRowProps {
     chromeBuffer: ChromeBuffer;
     columns: number;
 }
 export declare function ChromeRow({ chromeBuffer, columns }: ChromeRowProps): import("@emotion/react/jsx-runtime").JSX.Element;
-export declare function dropChromeRows<R extends Kinded>(filteredRows: RowTuple<R>[]): [GridDataRow<R>, ReactElement][];
+export declare function dropChromeRows<R extends Kinded>(rows: RowTuple<R>[]): [GridDataRow<R>, ReactElement][];
 export {};

package/dist/components/Table/nestedCards.js

@@ -1,20 +1,40 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.dropChromeRows = exports.ChromeRow = exports.maybeCreateChromeRow = exports.makeSpacer = exports.maybeAddCardPadding = exports.makeOpenOrCloseCard = exports.NestedCards = void 0;
+exports.dropChromeRows = exports.ChromeRow = exports.makeSpacer = exports.maybeAddCardPadding = exports.makeOpenOrCloseCard = exports.NestedCards = void 0;
 const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
 const react_1 = require("react");
 const Css_1 = require("../../Css");
+/**
+ * A helper class to create our nested card DOM shenanigans.
+ *
+ * This acts as a one-off visitor that accepts "begin row", "between row",
+ * "end row" calls from GridTable while its translating the user's nested
+ * GridDataRows into a flat list of RowTuples, and interjects fake/chrome
+ * rows into `filteredRows` as necessary.
+ *
+ * Note that this class only handles *between row* chrome and that within
+ * a content row itself, the nested padding is handled separately by the
+ * GridRow component.
+ */
 class NestedCards {
-    constructor(columns, filteredRows, style) {
+    constructor(columns, 
+    // An array of rows which we will add open Chrome rows too to create the table.
+    rows, styles) {
         this.columns = columns;
-        this.filteredRows = filteredRows;
-        this.style = style;
+        this.rows = rows;
+        this.styles = styles;
         // A stack of the current cards we're showing
         this.openCards = [];
         // A buffer of the open/close/spacer rows we need between each content row.
         this.chromeBuffer = [];
-        this.styles = style.nestedCards;
+        this.chromeRowIndex = 0;
     }
+    /**
+     * Maybe add an opening Chrome row to the given `row` if its a nested card.
+     *
+     * @param row The row which will be opened. The open Chrome row will appear
+     * above this row.
+     */
     maybeOpenCard(row) {
         const card = this.styles.kinds[row.kind];
         // If this kind doesn't have a card defined, don't put it on the card stack
@@ -23,7 +43,7 @@ class NestedCards {
             this.chromeBuffer.push(makeOpenOrCloseCard(this.openCards, this.styles.kinds, "open"));
         }
         // But always close previous cards if needed
-        maybeCreateChromeRow(this.columns, this.filteredRows, this.chromeBuffer);
+        this.maybeCreateChromeRow();
         return !!card;
     }
     closeCard() {
@@ -33,13 +53,43 @@ class NestedCards {
     addSpacer() {
         this.chromeBuffer.push(makeSpacer(this.styles.spacerPx, this.openCards, this.styles));
     }
+    /**
+     * Close the remaining open rows with a close Chrome row.
+     *
+     * @param row The row that is completing/closing nested open Chrome rows.
+     */
     done() {
-        maybeCreateChromeRow(this.columns, this.filteredRows, this.chromeBuffer);
+        this.maybeCreateChromeRow();
     }
     /** Return a stable copy of the cards, so it won't change as we keep going. */
     currentOpenCards() {
         return this.openCards.join(":");
     }
+    /**
+     * Takes the current Chrome row buffer of close row(s), spacers, and open row,
+     * and creates a single chrome DOM row.
+     *
+     * This allows a minimal amount of DOM overhead, insofar as to the css-grid or
+     * react-virtuoso we only add 1 extra DOM node between each row of content to
+     * achieve our nested card look & feel.
+     *
+     * i.e.:
+     * - chrome row (open)
+     * - card1 content row
+     * - chrome row (card2 open)
+     * - nested card2 content row
+     * - chrome row (card2 close, card1 close)
+     */
+    maybeCreateChromeRow() {
+        if (this.chromeBuffer.length > 0) {
+            this.rows.push([
+                undefined,
+                (0, jsx_runtime_1.jsx)(ChromeRow, { chromeBuffer: [...this.chromeBuffer], columns: this.columns.length }, this.chromeRowIndex++),
+            ]);
+            // clear the Chrome buffer
+            this.chromeBuffer.splice(0, this.chromeBuffer.length);
+        }
+    }
 }
 exports.NestedCards = NestedCards;
 /**
@@ -125,33 +175,13 @@ function makeSpacer(height, openCards, styles) {
     };
 }
 exports.makeSpacer = makeSpacer;
-/**
- * Takes the current buffer of close row(s), spacers, and open row, and creates a single chrome DOM row.
- *
- * This allows a minimal amount of DOM overhead, insofar as to the css-grid or react-virtuoso we only
- * 1 extra DOM node between each row of content to achieve our nested card look & feel, i.e.:
- *
- * - chrome row (open)
- * - card1 content row
- * - chrome row (card2 open)
- * - nested card2 content row
- * - chrome row (card2 close, card1 close)
- */
-function maybeCreateChromeRow(columns, filteredRows, chromeBuffer) {
-    if (chromeBuffer.length > 0) {
-        filteredRows.push([undefined, (0, jsx_runtime_1.jsx)(ChromeRow, { chromeBuffer: [...chromeBuffer], columns: columns.length }, void 0)]);
-        // clear the buffer
-        chromeBuffer.splice(0, chromeBuffer.length);
-    }
-}
-exports.maybeCreateChromeRow = maybeCreateChromeRow;
 function ChromeRow({ chromeBuffer, columns }) {
     return (
     // We add 2 to account for our dedicated open/close columns
     (0, jsx_runtime_1.jsx)("div", Object.assign({ css: Css_1.Css.gc(`span ${columns + 2}`).$, "data-chrome": "true" }, { children: chromeBuffer.map((c, i) => ((0, jsx_runtime_1.jsx)(react_1.Fragment, { children: c() }, i))) }), void 0));
 }
 exports.ChromeRow = ChromeRow;
-function dropChromeRows(filteredRows) {
-    return filteredRows.filter(([r]) => !!r);
+function dropChromeRows(rows) {
+    return rows.filter(([r]) => !!r);
 }
 exports.dropChromeRows = dropChromeRows;

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/dist/components/internal/CompoundField.js

@@ -4,40 +4,27 @@ exports.CompoundField = void 0;
 const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
 const react_1 = require("react");
 const Css_1 = require("../../Css");
-const utils_1 = require("../../utils");
 /** Internal component to help create compound fields */
 function CompoundField({ children }) {
     if ((children === null || children === void 0 ? void 0 : children.length) !== 2) {
         throw global.Error("CompoundField requires two children components");
     }
-    const [focusedEl, setFocusedEl] = (0, react_1.useState)();
     const commonStyles = Css_1.Css.df.aic.fs1.maxwPx(550).bt.bb.bGray300.$;
     const internalProps = { compound: true };
-    return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ css: Css_1.Css.df.$ }, { children: [(0, jsx_runtime_1.jsx)("div", Object.assign({ css: {
+    return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ css: {
+            ...Css_1.Css.df.$,
+            "&:focus-within > div:nth-of-type(2)": Css_1.Css.bgLightBlue700.$, // Separation line when inputs are focused
+        } }, { children: [(0, jsx_runtime_1.jsx)("div", Object.assign({ css: {
                     ...commonStyles,
-                    ...Css_1.Css.bl.borderRadius("4px 0 0 4px").if(focusedEl === "left").bLightBlue700.$,
+                    ...Css_1.Css.bl.borderRadius("4px 0 0 4px").$,
+                    "&:focus-within": Css_1.Css.bLightBlue700.$,
                 } }, { children: (0, react_1.cloneElement)(children[0], {
-                    onFocus: () => {
-                        (0, utils_1.maybeCall)(children[0].props.onFocus);
-                        setFocusedEl("left");
-                    },
-                    onBlur: () => {
-                        (0, utils_1.maybeCall)(children[0].props.onBlur);
-                        setFocusedEl(undefined);
-                    },
                     internalProps,
-                }) }), void 0), (0, jsx_runtime_1.jsx)("div", { css: Css_1.Css.wPx(1).flexNone.bgGray300.if(focusedEl !== undefined).bgLightBlue700.$ }, void 0), (0, jsx_runtime_1.jsx)("div", Object.assign({ css: {
+                }) }), void 0), (0, jsx_runtime_1.jsx)("div", { css: Css_1.Css.wPx(1).flexNone.bgGray300.$ }, void 0), (0, jsx_runtime_1.jsx)("div", Object.assign({ css: {
                     ...commonStyles,
-                    ...Css_1.Css.fg1.br.borderRadius("0 4px 4px 0").if(focusedEl === "right").bLightBlue700.$,
+                    ...Css_1.Css.fg1.br.borderRadius("0 4px 4px 0").$,
+                    "&:focus-within": Css_1.Css.bLightBlue700.$,
                 } }, { children: (0, react_1.cloneElement)(children[1], {
-                    onFocus: () => {
-                        (0, utils_1.maybeCall)(children[1].props.onFocus);
-                        setFocusedEl("right");
-                    },
-                    onBlur: () => {
-                        (0, utils_1.maybeCall)(children[1].props.onBlur);
-                        setFocusedEl(undefined);
-                    },
                     internalProps,
                 }) }), void 0)] }), void 0));
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@homebound/beam",
-  "version": "2.98.1",
+  "version": "2.100.0",
   "author": "Homebound",
   "license": "MIT",
   "main": "dist/index.js",
@@ -48,7 +48,7 @@
     "react-router": "^5.2.0",
     "react-router-dom": "^5.2.0",
     "react-stately": "^3.9.0",
-    "react-virtuoso": "^2.3.1",
+    "react-virtuoso": "^2.4.0",
     "tinycolor2": "^1.4.2",
     "tributejs": "^5.1.3",
     "trix": "^1.3.1",