@homebound/beam 2.199.0 → 2.199.1

package/dist/components/Table/GridTable.js

@@ -230,7 +230,7 @@ function GridTable(props) {
     // behave semantically the same as `as=div` did for its tests.
     const _as = as === "virtual" && runningInJest ? "div" : as;
     const rowStateContext = (0, react_1.useMemo)(() => ({ tableState: tableState }), [tableState]);
-    return ((0, jsx_runtime_1.jsx)(TableState_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));
+    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/components/CollapseToggle.js

@@ -8,7 +8,7 @@ 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 { tableState } = (0, react_1.useContext)(index_1.RowStateContext);
+    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";

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

@@ -34,7 +34,7 @@ const shallowEqual_1 = require("../../../utils/shallowEqual");
 function RowImpl(props) {
     var _a;
     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.RowStateContext);
+    const { tableState } = (0, react_1.useContext)(TableState_1.TableStateContext);
     const rowId = `${row.kind}_${row.id}`;
     const isActive = (0, hooks_1.useComputed)(() => tableState.activeRowId === rowId, [rowId, tableState]);
     // We treat the "header" and "totals" kind as special for "good defaults" styling
@@ -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
@@ -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, 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

@@ -8,7 +8,7 @@ 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 { tableState } = (0, react_1.useContext)(TableState_1.RowStateContext);
+    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) => {

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,7 +1,7 @@
 import { ReactNode } from "react";
 import { GridTableApi } from "../GridTableApi";
 import { RowStyle } from "../TableStyles";
-import { GridCellAlignment, GridColumn, GridColumnWithId, 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
@@ -33,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: GridColumnWithId<any>, 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

@@ -2,14 +2,10 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.rowClickRenderFn = exports.rowLinkRenderFn = exports.headerRenderFn = exports.defaultRenderFn = void 0;
 const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
-const react_1 = require("react");
 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 TableState_1 = require("../utils/TableState");
 const Css_1 = require("../../../Css");
-const hooks_1 = require("../../../hooks");
 /** 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) => {
     const Cell = as === "table" ? "td" : "div";
@@ -17,17 +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, as) => (key, css, content, row, rowStyle, classNames) => {
-    const { tableState } = (0, react_1.useContext)(TableState_1.RowStateContext);
-    const current = (0, hooks_1.useComputed)(() => { var _a; return (_a = tableState.sortState) === null || _a === void 0 ? void 0 : _a.current; }, [tableState]);
-    // If server-side sorting, use the user's key for this column; client-side sorting, use the index.
-    const ourSortKey = column.serverSideSortKey || column.id;
-    const context = {
-        sorted: ourSortKey === (current === null || current === void 0 ? void 0 : current.columnId) ? current === null || current === void 0 ? void 0 : current.direction : undefined,
-        toggleSort: () => tableState.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/index.d.ts

@@ -17,13 +17,10 @@ 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 { simpleDataRows, simpleHeader } from "./utils/simpleHelpers";
 export type { SimpleHeaderAndData } from "./utils/simpleHelpers";
 export * from "./utils/sortRows";
-export { RowStateContext, TableState } from "./utils/TableState";
+export { TableState, TableStateContext } from "./utils/TableState";
 export type { SelectedState, SortOn, SortState } from "./utils/TableState";
 export * from "./utils/utils";
 export * from "./utils/visitor";

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.TableState = exports.RowStateContext = exports.simpleHeader = exports.simpleDataRows = 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; } });
@@ -38,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 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, "RowStateContext", { enumerable: true, get: function () { return TableState_1.RowStateContext; } });
 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/utils/TableState.d.ts

@@ -50,8 +50,8 @@ export declare class TableState {
     private getMatchedChildrenStates;
     private setNestedSelectedStates;
 }
-/** Provides a context for rows to access their table's `RowState`. */
-export declare const RowStateContext: React.Context<{
+/** 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;

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

@@ -3,7 +3,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.deriveSortState = exports.RowStateContext = exports.TableState = 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");
@@ -308,10 +308,10 @@ class TableState {
     }
 }
 exports.TableState = TableState;
-/** Provides a context for rows to access their table's `RowState`. */
-exports.RowStateContext = react_1.default.createContext({
+/** Provides a context for rows to access their table's `TableState`. */
+exports.TableStateContext = react_1.default.createContext({
     get tableState() {
-        throw new Error("No RowStateContext provider");
+        throw new Error("No TableStateContext provider");
     },
 });
 // Get the rows that are already in the toggled state, so we can keep them toggled

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

@@ -6,7 +6,7 @@ import { GridStyle, RowStyle } from "../TableStyles";
 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: GridColumnWithId<R>, row: GridDataRow<R>, api: GridTableApi<R>, level: number): ReactNode | GridCellContent;

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

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: () => { },
-});