@homebound/beam 2.208.1 → 2.209.0

package/dist/components/Table/GridTable.js

@@ -80,7 +80,7 @@ exports.setGridTableDefaults = setGridTableDefaults;
 function GridTable(props) {
     var _a, _b, _c;
     const { id = "gridTable", as = "div", columns: _columns, rows, style: maybeStyle = defaults.style, rowStyles, stickyHeader = defaults.stickyHeader, stickyOffset = 0, xss, filter, filterMaxRows, fallbackMessage = "No rows found.", infoMessage, setRowCount, persistCollapse, resizeTarget, activeRowId, activeCellId, } = props;
-    const columns = (0, react_1.useMemo)(() => (0, columns_1.assignDefaultColumnIds)(_columns), [_columns]);
+    const columnsWithIds = (0, react_1.useMemo)(() => (0, columns_1.assignDefaultColumnIds)(_columns), [_columns]);
     // We only use this in as=virtual mode, but keep this here for rowLookup to use
     const virtuosoRef = (0, react_1.useRef)(null);
     // Use this ref to watch for changes in the GridTable's container and resize columns accordingly.
@@ -95,6 +95,11 @@ function GridTable(props) {
     }, [props.api]);
     const style = (0, TableStyles_1.resolveStyles)(maybeStyle);
     const { tableState } = api;
+    tableState.setRows(rows);
+    tableState.setColumns(columnsWithIds);
+    const columns = (0, hooks_1.useComputed)(() => tableState.columns
+        .filter((c) => tableState.visibleColumnIds.includes(c.id))
+        .flatMap((c) => c.expandColumns && tableState.expandedColumnIds.includes(c.id) ? [c, ...c.expandColumns] : [c]), [tableState]);
     // Initialize the sort state. This will only happen on the first render.
     // Once the `TableState.sort` is defined, it will not re-initialize.
     tableState.initSortState(props.sorting, columns);
@@ -102,7 +107,6 @@ function GridTable(props) {
         const { sortConfig } = tableState;
         return [sortConfig === null || sortConfig === void 0 ? void 0 : sortConfig.on, (sortConfig === null || sortConfig === void 0 ? void 0 : sortConfig.on) === "client" ? !!sortConfig.caseSensitive : false];
     }, [tableState]);
-    tableState.setRows(rows);
     (0, react_1.useEffect)(() => {
         tableState.activeRowId = activeRowId;
     }, [tableState, activeRowId]);
@@ -125,10 +129,21 @@ function GridTable(props) {
         }
         return rows;
     }, [columns, rows, sortOn, sortState, caseSensitive]);
-    const hasTotalsRow = rows.some((row) => row.id === "totals");
     // Flatten + component-ize the sorted rows.
-    let [headerRows, visibleDataRows, totalsRows, filteredRowIds] = (0, react_1.useMemo)(() => {
+    let [headerRows, visibleDataRows, totalsRows, expandableHeaderRows, filteredRowIds] = (0, react_1.useMemo)(() => {
         function makeRowComponent(row, level) {
+            // We may have multiple rows that need to be sticky, if that is the case, then we need properly define the stickyOffset for each row.
+            // *TOTALS* will always be on top, so that can remain 0.
+            // *EXPANDABLE_HEADER Header* may need to include the height of the totals row in the offset
+            // *HEADER* may need to include both TOTALS and EXPANDABLE_HEADER in its offset.
+            // TODO: Create a single "table header" container that can hold multiple rows and use a single `position: sticky`. And we can get rid of this nonsense.
+            const maybeTotalsRowHeight = hasTotalsRow ? TableStyles_1.totalsRowHeight : 0;
+            const maybeExpandableRowsHeight = hasExpandableHeader ? TableStyles_1.expandableHeaderRowHeight : 0;
+            const rowStickyOffset = row.kind === utils_1.HEADER
+                ? maybeTotalsRowHeight + maybeExpandableRowsHeight
+                : row.kind === utils_1.EXPANDABLE_HEADER
+                    ? maybeTotalsRowHeight
+                    : 0;
             return ((0, jsx_runtime_1.jsx)(Row_1.Row, Object.assign({}, {
                 as,
                 columns,
@@ -136,8 +151,7 @@ function GridTable(props) {
                 style,
                 rowStyles,
                 stickyHeader,
-                // If we have a totals row then add the height of the totals row (52px) to the `stickyOffset` for the "header" kind
-                stickyOffset: hasTotalsRow && row.kind === "header" ? 52 + stickyOffset : stickyOffset,
+                stickyOffset: rowStickyOffset + stickyOffset,
                 columnSizes,
                 level,
                 getCount,
@@ -145,13 +159,17 @@ function GridTable(props) {
                 cellHighlight: "cellHighlight" in maybeStyle && maybeStyle.cellHighlight === true,
                 omitRowHover: "rowHover" in maybeStyle && maybeStyle.rowHover === false,
                 sortOn,
+                hasExpandableHeader,
             }), `${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 expandableHeaderRows = [];
         const totalsRows = [];
         const visibleDataRows = [];
         const filteredRowIds = [];
+        const hasTotalsRow = rows.some((row) => row.id === utils_1.TOTALS);
+        const hasExpandableHeader = rows.some((row) => row.id === utils_1.EXPANDABLE_HEADER);
         function visit([row, children], level, visible) {
             visible && visibleDataRows.push([row, makeRowComponent(row, level)]);
             // This row may be invisible (because it's parent is collapsed), but we still want
@@ -173,13 +191,17 @@ function GridTable(props) {
                     totalsRows.push([row[0], makeRowComponent(row[0], level)]);
                     return;
                 }
+                if (row[0].kind === "expandableHeader") {
+                    expandableHeaderRows.push([row[0], makeRowComponent(row[0], level)]);
+                    return;
+                }
                 visit(row, level, visible);
             });
         }
         // Call `visitRows` with our a pre-filtered set list
         const filteredRows = filterRows(api, columns, maybeSorted, filter);
         visitRows(filteredRows, 0, true);
-        return [headerRows, visibleDataRows, totalsRows, filteredRowIds];
+        return [headerRows, visibleDataRows, totalsRows, expandableHeaderRows, filteredRowIds];
     }, [
         as,
         api,
@@ -194,7 +216,6 @@ function GridTable(props) {
         columnSizes,
         collapsedIds,
         getCount,
-        hasTotalsRow,
     ]);
     let tooManyClientSideRows = false;
     if (filterMaxRows && visibleDataRows.length > filterMaxRows) {
@@ -230,7 +251,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.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));
+    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, expandableHeaderRows, visibleDataRows, firstRowMessage, stickyHeader, xss, virtuosoRef)] }), void 0) }), void 0));
 }
 exports.GridTable = GridTable;
 // Determine which HTML element to use to build the GridTable
@@ -240,7 +261,7 @@ const renders = {
     virtual: renderVirtual,
 };
 /** Renders table using divs with flexbox rows, which is the default render */
-function renderDiv(style, id, columns, headerRows, totalsRows, visibleDataRows, firstRowMessage, _stickyHeader, xss, _virtuosoRef) {
+function renderDiv(style, id, columns, headerRows, totalsRows, expandableHeaderRows, visibleDataRows, firstRowMessage, _stickyHeader, xss, _virtuosoRef) {
     return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ css: {
             // Use `fit-content` to ensure the width of the table takes up the full width of its content.
             // Otherwise, the table's width would be that of its container, which may not be as wide as the table itself.
@@ -261,10 +282,10 @@ function renderDiv(style, id, columns, headerRows, totalsRows, visibleDataRows,
             ...style.rootCss,
             ...(style.minWidthPx ? Css_1.Css.mwPx(style.minWidthPx).$ : {}),
             ...xss,
-        }, "data-testid": id }, { children: [totalsRows.map(([, node]) => node), headerRows.map(([, node]) => node), firstRowMessage && ((0, jsx_runtime_1.jsx)("div", Object.assign({ css: { ...style.firstRowMessageCss }, "data-gridrow": true }, { children: firstRowMessage }), void 0)), visibleDataRows.map(([, node]) => node)] }), void 0));
+        }, "data-testid": id }, { children: [totalsRows.map(([, node]) => node), expandableHeaderRows.map(([, node]) => node), headerRows.map(([, node]) => node), firstRowMessage && ((0, jsx_runtime_1.jsx)("div", Object.assign({ css: { ...style.firstRowMessageCss }, "data-gridrow": true }, { children: firstRowMessage }), void 0)), visibleDataRows.map(([, node]) => node)] }), void 0));
 }
 /** Renders as a table, primarily/solely for good print support. */
-function renderTable(style, id, columns, headerRows, totalsRows, visibleDataRows, firstRowMessage, _stickyHeader, xss, _virtuosoRef) {
+function renderTable(style, id, columns, headerRows, totalsRows, expandableHeaderRows, visibleDataRows, firstRowMessage, _stickyHeader, xss, _virtuosoRef) {
     return ((0, jsx_runtime_1.jsxs)("table", Object.assign({ css: {
             ...Css_1.Css.w100.add("borderCollapse", "separate").add("borderSpacing", "0").$,
             ...Css_1.Css.addIn("& > tbody > tr > * ", style.betweenRowsCss || {})
@@ -275,7 +296,7 @@ function renderTable(style, id, columns, headerRows, totalsRows, visibleDataRows
             ...style.rootCss,
             ...(style.minWidthPx ? Css_1.Css.mwPx(style.minWidthPx).$ : {}),
             ...xss,
-        }, "data-testid": id }, { children: [(0, jsx_runtime_1.jsx)("thead", { children: [...totalsRows, ...headerRows].map(([, node]) => node) }, void 0), (0, jsx_runtime_1.jsxs)("tbody", { children: [firstRowMessage && ((0, jsx_runtime_1.jsx)("tr", { children: (0, jsx_runtime_1.jsx)("td", Object.assign({ colSpan: columns.length, css: { ...style.firstRowMessageCss } }, { children: firstRowMessage }), void 0) }, void 0)), visibleDataRows.map(([, node]) => node)] }, void 0)] }), void 0));
+        }, "data-testid": id }, { children: [(0, jsx_runtime_1.jsx)("thead", { children: [...totalsRows, ...expandableHeaderRows, ...headerRows].map(([, node]) => node) }, void 0), (0, jsx_runtime_1.jsxs)("tbody", { children: [firstRowMessage && ((0, jsx_runtime_1.jsx)("tr", { children: (0, jsx_runtime_1.jsx)("td", Object.assign({ colSpan: columns.length, css: { ...style.firstRowMessageCss } }, { children: firstRowMessage }), void 0) }, void 0)), visibleDataRows.map(([, node]) => node)] }, void 0)] }), void 0));
 }
 /**
  * Uses react-virtuoso to render rows virtually.
@@ -297,7 +318,7 @@ function renderTable(style, id, columns, headerRows, totalsRows, visibleDataRows
  * [2]: https://github.com/tannerlinsley/react-virtual/issues/85
  * [3]: https://github.com/tannerlinsley/react-virtual/issues/108
  */
-function renderVirtual(style, id, columns, headerRows, totalsRows, visibleDataRows, firstRowMessage, stickyHeader, xss, virtuosoRef) {
+function renderVirtual(style, id, columns, headerRows, totalsRows, expandableHeaderRows, visibleDataRows, firstRowMessage, stickyHeader, xss, virtuosoRef) {
     // eslint-disable-next-line react-hooks/rules-of-hooks
     const { footerStyle, listStyle } = (0, react_1.useMemo)(() => {
         var _a;
@@ -306,13 +327,14 @@ function renderVirtual(style, id, columns, headerRows, totalsRows, visibleDataRo
     }, [style]);
     return ((0, jsx_runtime_1.jsx)(react_virtuoso_1.Virtuoso, { overscan: 5, ref: virtuosoRef, components: {
             // Applying a zIndex: 2 to ensure it stays on top of sticky columns
-            TopItemList: react_1.default.forwardRef((props, ref) => ((0, jsx_runtime_1.jsx)("div", Object.assign({}, props, { ref: ref, style: { ...props.style, ...{ zIndex: 2 } } }), void 0))),
+            TopItemList: react_1.default.forwardRef((props, ref) => ((0, jsx_runtime_1.jsx)("div", Object.assign({}, props, { ref: ref, style: { ...props.style, ...{ zIndex: utils_1.zIndices.stickyHeader } } }), void 0))),
             List: VirtualRoot(listStyle, columns, id, xss),
             Footer: () => (0, jsx_runtime_1.jsx)("div", { css: footerStyle }, void 0),
         }, 
         // Pin/sticky both the header row(s) + firstRowMessage to the top
-        topItemCount: (stickyHeader ? headerRows.length + totalsRows.length : 0) + (firstRowMessage ? 1 : 0), itemContent: (index) => {
-            // Since we have three arrays of rows: `headerRows`, `totalsRows`, and `filteredRow` we
+        topItemCount: (stickyHeader ? headerRows.length + totalsRows.length + expandableHeaderRows.length : 0) +
+            (firstRowMessage ? 1 : 0), itemContent: (index) => {
+            // Since we have 4 arrays of rows: `headerRows`, `totalsRows`, `expandableHeaderRows`, and `filteredRow` we
             // must determine which one to render.
             // Determine if we need to render a totals row
             if (index < totalsRows.length) {
@@ -320,6 +342,12 @@ function renderVirtual(style, id, columns, headerRows, totalsRows, visibleDataRo
             }
             // Reset index
             index -= totalsRows.length;
+            // Determine if we need to render an expandableHeaderRows row
+            if (index < expandableHeaderRows.length) {
+                return expandableHeaderRows[index][1];
+            }
+            // Reset index
+            index -= expandableHeaderRows.length;
             // Determine if we need to render a header row
             if (index < headerRows.length) {
                 return headerRows[index][1];
@@ -392,10 +420,9 @@ function filterRows(api, columns, rows, filter) {
         var _a, _b, _c, _d;
         // Break up "foo bar" into `[foo, bar]` and a row must match both `foo` and `bar`
         const filters = (filter && filter.split(/ +/)) || [];
-        const matches = row.kind === "header" ||
-            row.kind === "totals" ||
+        const matches = utils_1.reservedRowKinds.includes(row.kind) ||
             filters.length === 0 ||
-            filters.every((f) => columns.map((c) => (0, utils_1.applyRowFn)(c, row, api, 0)).some((maybeContent) => (0, utils_1.matchesFilter)(maybeContent, f)));
+            filters.every((f) => columns.map((c) => (0, utils_1.applyRowFn)(c, row, api, 0, false)).some((maybeContent) => (0, utils_1.matchesFilter)(maybeContent, f)));
         if (matches) {
             return acc.concat([[row, (_b = (_a = row.children) === null || _a === void 0 ? void 0 : _a.reduce(acceptAll, [])) !== null && _b !== void 0 ? _b : []]]);
         }

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

@@ -39,6 +39,8 @@ export declare type GridTableApi<R extends Kinded> = {
     selectRow: (id: string, selected?: boolean) => void;
     /** Toggle collapse state of a row by id */
     toggleCollapsedRow: (id: string) => void;
+    setVisibleColumns: (ids: string[]) => void;
+    getVisibleColumnIds: () => string[];
 };
 export declare class GridTableApiImpl<R extends Kinded> implements GridTableApi<R> {
     readonly tableState: TableState;
@@ -53,4 +55,6 @@ export declare class GridTableApiImpl<R extends Kinded> implements GridTableApi<
     setActiveCellId(id: string | undefined): void;
     selectRow(id: string, selected?: boolean): void;
     toggleCollapsedRow(id: string): void;
+    setVisibleColumns(ids: string[]): void;
+    getVisibleColumnIds(): string[];
 }

package/dist/components/Table/GridTableApi.js

@@ -68,5 +68,11 @@ class GridTableApiImpl {
     toggleCollapsedRow(id) {
         this.tableState.toggleCollapsed(id);
     }
+    setVisibleColumns(ids) {
+        this.tableState.setVisibleColumns(ids);
+    }
+    getVisibleColumnIds() {
+        return this.tableState.visibleColumnIds;
+    }
 }
 exports.GridTableApiImpl = GridTableApiImpl;

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

@@ -28,6 +28,8 @@ export interface GridStyle {
     headerCellCss?: Properties;
     /** Applied to 'kind: "totals"' cells */
     totalsCellCss?: Properties;
+    /** Applied to 'kind: "expandableHeader"' cells */
+    expandableHeaderCss?: Properties;
     /** Applied to the first cell of all rows, i.e. for table-wide padding or left-side borders. */
     firstCellCss?: Properties;
     /** Applied to the last cell of all rows, i.e. for table-wide padding or right-side borders. */
@@ -64,6 +66,8 @@ export interface GridStyleDef {
     rowHover?: boolean;
 }
 export declare const getTableStyles: (props?: GridStyleDef) => GridStyle;
+export declare const totalsRowHeight = 52;
+export declare const expandableHeaderRowHeight = 40;
 /** Defines row-specific styling for each given row `kind` in `R` */
 export declare type RowStyles<R extends Kinded> = {
     [P in R["kind"]]?: RowStyle<DiscriminateUnion<R, "kind", P>>;

package/dist/components/Table/TableStyles.js

@@ -1,13 +1,13 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.resolveStyles = exports.tableRowStyles = exports.cardStyle = exports.condensedStyle = exports.defaultStyle = exports.getTableStyles = void 0;
+exports.resolveStyles = exports.tableRowStyles = exports.cardStyle = exports.condensedStyle = exports.defaultStyle = exports.expandableHeaderRowHeight = exports.totalsRowHeight = exports.getTableStyles = void 0;
 const Css_1 = require("../../Css");
 const utils_1 = require("../../utils");
 // Returns a "blessed" style of GridTable
 function memoizedTableStyles() {
     const cache = {};
     return (props = {}) => {
-        const { inlineEditing = false, grouped = false, rowHeight = "flexible", cellHighlight = false, allWhite = false, bordered = false, rowHover = true, } = props;
+        const { inlineEditing = false, grouped = false, rowHeight = "flexible", cellHighlight = false, allWhite = false, bordered = false, } = props;
         const key = (0, utils_1.safeKeys)(props)
             .sort()
             .map((k) => `${k}_${props[k]}`)
@@ -30,9 +30,13 @@ function memoizedTableStyles() {
                 headerCellCss: {
                     ...Css_1.Css.gray700.xsMd.bgGray200.aic.nowrap.pxPx(12).hPx(40).$,
                     ...(allWhite && Css_1.Css.bgWhite.$),
-                    ...(bordered && Css_1.Css.bt.bGray200.$),
                 },
-                totalsCellCss: Css_1.Css.bgWhite.gray700.smMd.hPx(52).pPx(12).boxShadow("none").$,
+                totalsCellCss: Css_1.Css.bgWhite.gray700.smMd.hPx(exports.totalsRowHeight).pPx(12).boxShadow("none").$,
+                expandableHeaderCss: Css_1.Css.bgWhite.gray900.xsMd.wsNormal
+                    .hPx(exports.expandableHeaderRowHeight)
+                    .pxPx(12)
+                    .py0.boxShadow(`inset 0 -1px 0 ${Css_1.Palette.Gray200}`)
+                    .addIn("&:not(:last-of-type)", Css_1.Css.boxShadow(`inset -1px -1px 0 ${Css_1.Palette.Gray200}`).$).$,
                 cellCss: {
                     ...Css_1.Css.gray900.xs.bgWhite.aic.pxPx(12).boxShadow(`inset 0 -1px 0 ${Css_1.Palette.Gray200}`).$,
                     ...(rowHeight === "flexible" ? Css_1.Css.pyPx(12).$ : Css_1.Css.nowrap.hPx(inlineEditing ? 48 : 36).$),
@@ -40,9 +44,7 @@ function memoizedTableStyles() {
                     ...(bordered && { "&:first-of-type": Css_1.Css.bl.bGray200.$, "&:last-of-type": Css_1.Css.br.bGray200.$ }),
                 },
                 firstRowCss: {
-                    // Only apply border-radius to the corners of the table when `allWhite` is true for now.
-                    ...(allWhite &&
-                        Css_1.Css.addIn("& > *:first-of-type", Css_1.Css.borderRadius("8px 0 0 0 ").$).addIn("& > *:last-of-type", Css_1.Css.borderRadius("0 8px 0 0").$).$),
+                    ...Css_1.Css.addIn("& > *:first-of-type", Css_1.Css.borderRadius("8px 0 0 0 ").$).addIn("& > *:last-of-type", Css_1.Css.borderRadius("0 8px 0 0").$).$,
                     ...(bordered && Css_1.Css.addIn("& > *", Css_1.Css.bt.bGray200.$).$),
                 },
                 ...(allWhite && {
@@ -57,6 +59,8 @@ function memoizedTableStyles() {
     };
 }
 exports.getTableStyles = memoizedTableStyles();
+exports.totalsRowHeight = 52;
+exports.expandableHeaderRowHeight = 40;
 /** Our original table look & feel/style. */
 exports.defaultStyle = {
     rootCss: Css_1.Css.gray700.$,

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

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

package/dist/components/Table/components/EditColumnsButton.js

@@ -8,31 +8,32 @@ const react_stately_1 = require("react-stately");
 const Button_1 = require("../../Button");
 const OverlayTrigger_1 = require("../../internal/OverlayTrigger");
 const Css_1 = require("../../../Css");
+const hooks_1 = require("../../../hooks");
 const inputs_1 = require("../../../inputs");
 const utils_1 = require("../../../utils");
 function EditColumnsButton(props) {
-    const { defaultOpen, disabled, allColumns, setSelectedColumns, trigger, title, selectedColumns } = props;
+    const { defaultOpen, disabled, columns, trigger, title, api } = props;
     const state = (0, react_stately_1.useMenuTriggerState)({ isOpen: defaultOpen });
     const buttonRef = (0, react_1.useRef)(null);
     const { menuTriggerProps } = (0, react_aria_1.useMenuTrigger)({ isDisabled: !!disabled }, state, buttonRef);
     const tid = (0, utils_1.useTestIds)(props, (0, OverlayTrigger_1.isTextButton)(trigger) ? trigger.label : (0, OverlayTrigger_1.isIconButton)(trigger) ? trigger.icon : trigger.name);
     const { options } = (0, react_1.useMemo)(() => {
-        return allColumns.reduce((acc, column) => {
+        return columns.reduce((acc, column) => {
             // Only include options that can be hidden and have the `name` property defined.
             if (!column.canHide)
                 return acc;
-            if (!column.id || column.id.length === 0) {
-                console.warn("Column is missing 'name' property required by the Edit Columns button", column);
+            if (!column.name || column.name.length === 0 || !column.id || column.id.length === 0) {
+                console.warn("Column is missing 'name' and/or 'id' property required by the Edit Columns button", column);
                 return acc;
             }
             // Add current column as an option
-            return { ...acc, options: acc.options.concat({ label: column.id, value: column.id }) };
+            return { ...acc, options: acc.options.concat({ label: column.name, value: column.id }) };
         }, { options: [] });
-    }, [allColumns]);
-    const selectedValues = selectedColumns.map((column) => column.id);
+    }, [columns]);
+    const selectedValues = (0, hooks_1.useComputed)(() => api.getVisibleColumnIds(), [api]);
     const setSelectedValues = (0, react_1.useCallback)((values) => {
-        setSelectedColumns(allColumns.filter((column) => (column.canHide ? values.includes(column.id) : true)));
-    }, [allColumns, setSelectedColumns]);
+        api.setVisibleColumns(columns.filter((column) => (column.canHide ? values.includes(column.id) : true)).map((c) => c.id));
+    }, [columns, api]);
     return ((0, jsx_runtime_1.jsx)(OverlayTrigger_1.OverlayTrigger, Object.assign({}, props, { menuTriggerProps: menuTriggerProps, state: state, buttonRef: buttonRef }, tid, { children: (0, jsx_runtime_1.jsxs)("div", Object.assign({ css: {
                 ...Css_1.Css.bgWhite.py5.px3.maxwPx(380).bshBasic.$,
                 "&:hover": Css_1.Css.bshHover.$,

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

@@ -0,0 +1,9 @@
+import { GridColumnWithId, Kinded, RenderAs } from "../types";
+interface ExpandableHeaderProps<R extends Kinded> {
+    title: string;
+    column: GridColumnWithId<R>;
+    minStickyLeftOffset: number;
+    as: RenderAs;
+}
+export declare function ExpandableHeader<R extends Kinded>(props: ExpandableHeaderProps<R>): import("@emotion/react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/Table/components/ExpandableHeader.js

@@ -0,0 +1,25 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ExpandableHeader = void 0;
+const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
+const react_1 = require("react");
+const Icon_1 = require("../../Icon");
+const TableState_1 = require("../utils/TableState");
+const utils_1 = require("../utils/utils");
+const Css_1 = require("../../../Css");
+const hooks_1 = require("../../../hooks");
+function ExpandableHeader(props) {
+    const { title, column, minStickyLeftOffset, as } = props;
+    const { tableState } = (0, react_1.useContext)(TableState_1.TableStateContext);
+    const expandedColumnIds = (0, hooks_1.useComputed)(() => tableState.expandedColumnIds, [tableState]);
+    const isExpanded = expandedColumnIds.includes(column.id);
+    // Do not apply sticky styles when rendering as table. Currently the table does not properly respect column widths, causing the sticky offsets to be incorrect
+    const applyStickyStyles = isExpanded && as !== "table";
+    const { hoverProps, isHovered } = (0, hooks_1.useHover)({});
+    return ((0, jsx_runtime_1.jsxs)("button", Object.assign({}, hoverProps, { css: Css_1.Css.df.xsMd.aic.jcsb.gap2.px1.hPx(32).mxPx(-8).w("calc(100% + 16px)").br4.lightBlue700.if(isHovered).bgGray100.$, onClick: () => tableState.toggleExpandedColumn(column.id), "data-testid": "expandableColumn" }, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ css: Css_1.Css.tl.lineClamp2
+                    .if(applyStickyStyles)
+                    .sticky.leftPx(minStickyLeftOffset + 12)
+                    .pr2.mr2.bgWhite.z(utils_1.zIndices.expandableHeaderTitle)
+                    .if(isHovered).bgGray100.$ }, { children: title }), void 0), (0, jsx_runtime_1.jsx)("span", Object.assign({ css: Css_1.Css.if(applyStickyStyles).sticky.rightPx(12).z(utils_1.zIndices.expandableHeaderIcon).$ }, { children: (0, jsx_runtime_1.jsx)(Icon_1.Icon, { icon: isExpanded ? "chevronLeft" : "chevronRight", inc: 2 }, void 0) }), void 0)] }), void 0));
+}
+exports.ExpandableHeader = ExpandableHeader;

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

@@ -18,6 +18,7 @@ interface RowProps<R extends Kinded> {
     api: GridTableApi<R>;
     cellHighlight: boolean;
     omitRowHover: boolean;
+    hasExpandableHeader: boolean;
 }
 declare function RowImpl<R extends Kinded, S>(props: RowProps<R>): ReactElement;
 /**

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

@@ -33,17 +33,18 @@ const shallowEqual_1 = require("../../../utils/shallowEqual");
 // We extract Row to its own mini-component primarily so we can React.memo'ize it.
 function RowImpl(props) {
     var _a;
-    const { as, columns, row, style, rowStyles, stickyHeader, stickyOffset, sortOn, columnSizes, level, getCount, api, cellHighlight, omitRowHover, ...others } = props;
+    const { as, columns, row, style, rowStyles, stickyHeader, stickyOffset, sortOn, columnSizes, level, getCount, api, cellHighlight, omitRowHover, hasExpandableHeader, ...others } = props;
     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
-    const isHeader = row.kind === "header";
-    const isTotals = row.kind === "totals";
+    const isHeader = row.kind === utils_1.HEADER;
+    const isTotals = row.kind === utils_1.TOTALS;
+    const isExpandableHeader = row.kind === utils_1.EXPANDABLE_HEADER;
     const rowStyle = rowStyles === null || rowStyles === void 0 ? void 0 : rowStyles[row.kind];
     const RowTag = as === "table" ? "tr" : "div";
     const revealOnRowHoverClass = "revealOnRowHover";
-    const showRowHoverColor = row.kind !== "totals" && row.kind !== "header" && !omitRowHover;
+    const showRowHoverColor = !utils_1.reservedRowKinds.includes(row.kind) && !omitRowHover;
     const rowStyleCellCss = (0, utils_1.maybeApplyFunction)(row, rowStyle === null || rowStyle === void 0 ? void 0 : rowStyle.cellCss);
     const rowCss = {
         // Optionally include the row hover styles, by default they should be turned on.
@@ -57,16 +58,23 @@ function RowImpl(props) {
         ...(((rowStyle === null || rowStyle === void 0 ? void 0 : rowStyle.rowLink) || (rowStyle === null || rowStyle === void 0 ? void 0 : rowStyle.onClick)) && { "&:hover": Css_1.Css.cursorPointer.$ }),
         ...(0, utils_1.maybeApplyFunction)(row, rowStyle === null || rowStyle === void 0 ? void 0 : rowStyle.rowCss),
         // Maybe add the sticky header styles
-        ...((isHeader || isTotals) && stickyHeader ? Css_1.Css.sticky.topPx(stickyOffset).z2.$ : undefined),
+        ...(utils_1.reservedRowKinds.includes(row.kind) && stickyHeader
+            ? Css_1.Css.sticky.topPx(stickyOffset).z(utils_1.zIndices.stickyHeader).$
+            : undefined),
         ...{
             [` > .${revealOnRowHoverClass} > *`]: Css_1.Css.invisible.$,
             [`:hover > .${revealOnRowHoverClass} > *`]: Css_1.Css.visible.$,
         },
     };
     let currentColspan = 1;
+    // Keep a running count of how many expanded columns are being shown.
+    let currentExpandedColumnCount = 0;
     let firstContentColumnStylesApplied = false;
+    let minStickyLeftOffset = 0;
     return ((0, jsx_runtime_1.jsx)(RowTag, Object.assign({ css: rowCss }, others, { "data-gridrow": true }, getCount(row.id), { children: columns.map((column, columnIndex) => {
-            var _a, _b, _c, _d, _e;
+            var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
+            // Need to keep track of the expanded columns so we can add borders as expected for the header rows
+            const isExpanded = tableState.expandedColumnIds.includes(column.id);
             const { wrapAction = true, isAction = false } = column;
             const applyFirstContentColumnStyles = !isHeader && !isAction && !firstContentColumnStylesApplied;
             firstContentColumnStylesApplied || (firstContentColumnStylesApplied = applyFirstContentColumnStyles);
@@ -76,24 +84,40 @@ function RowImpl(props) {
                     throw new Error("Beam Table column min-width definition only supports px or percentage values");
                 }
             }
+            // When using the variation of the table with an EXPANDABLE_HEADER, then our HEADER row required special border styling
+            if (hasExpandableHeader && (isHeader || isTotals)) {
+                // When the value of `currentExpandedColumnCount` is 0, then we have started over.
+                // If the current column `isExpanded`, then store the number of expandable columns.
+                if (currentExpandedColumnCount === 0 && isExpanded) {
+                    currentExpandedColumnCount = (_b = (_a = column.expandColumns) === null || _a === void 0 ? void 0 : _a.length) !== null && _b !== void 0 ? _b : 0;
+                }
+                else if (currentExpandedColumnCount > 0) {
+                    // If value is great than 0, then decrement. Once the value equals 0, then the special styling will be applied below.
+                    currentExpandedColumnCount -= 1;
+                }
+            }
             // Decrement colspan count and skip if greater than 1.
             if (currentColspan > 1) {
                 currentColspan -= 1;
                 return null;
             }
-            const maybeContent = (0, utils_1.applyRowFn)(column, row, api, level);
-            currentColspan = (0, utils_1.isGridCellContent)(maybeContent) ? (_a = maybeContent.colspan) !== null && _a !== void 0 ? _a : 1 : 1;
+            const maybeContent = (0, utils_1.applyRowFn)(column, row, api, level, isExpanded);
+            const numExpandedColumns = isExpandableHeader && isExpanded ? (_d = (_c = column.expandColumns) === null || _c === void 0 ? void 0 : _c.length) !== null && _d !== void 0 ? _d : 0 : 0;
+            currentColspan = (0, utils_1.isGridCellContent)(maybeContent)
+                ? (_e = maybeContent.colspan) !== null && _e !== void 0 ? _e : numExpandedColumns + 1
+                : numExpandedColumns + 1;
             const revealOnRowHover = (0, utils_1.isGridCellContent)(maybeContent) ? maybeContent.revealOnRowHover : false;
             const canSortColumn = (sortOn === "client" && column.clientSideSort !== false) ||
                 (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, 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 isExpandable = column.expandColumns !== undefined && column.expandColumns.length > 0;
+            const content = (0, utils_1.toContent)(maybeContent, isHeader, canSortColumn, sortOn === "client", style, as, alignment, column, isExpandableHeader, isExpandable, minStickyLeftOffset);
+            (0, sortRows_1.ensureClientSideSortValueIsSortable)(sortOn, isHeader || isTotals || isExpandableHeader, column, columnIndex, maybeContent);
+            const maybeSticky = (_f = (((0, utils_1.isGridCellContent)(maybeContent) && maybeContent.sticky) || column.sticky)) !== null && _f !== void 0 ? _f : undefined;
             const maybeStickyColumnStyles = maybeSticky && columnSizes
                 ? {
-                    ...Css_1.Css.sticky.z1.bgWhite.$,
+                    ...Css_1.Css.sticky.z(utils_1.zIndices.stickyColumns).bgWhite.$,
                     ...(maybeSticky === "left"
                         ? Css_1.Css.left(columnIndex === 0 ? 0 : `calc(${columnSizes.slice(0, columnIndex).join(" + ")})`).$
                         : {}),
@@ -104,6 +128,8 @@ function RowImpl(props) {
                         : {}),
                 }
                 : {};
+            // This relies on our column sizes being defined in pixel values, which is currently true as we calculate to pixel values in the `useSetupColumnSizes` hook
+            minStickyLeftOffset += maybeSticky === "left" ? parseInt(columnSizes[columnIndex].replace("px", ""), 10) : 0;
             const cellId = `${row.kind}_${row.id}_${column.id}`;
             const applyCellHighlight = cellHighlight && !!column.id && !isHeader && !isTotals;
             const isCellActive = tableState.activeCellId === cellId;
@@ -132,14 +158,22 @@ function RowImpl(props) {
                 ...(isHeader && style.headerCellCss),
                 // Then apply any totals-specific override
                 ...(isTotals && style.totalsCellCss),
+                ...(isTotals && hasExpandableHeader && Css_1.Css.boxShadow(`inset 0 -1px 0 ${Css_1.Palette.Gray200}`).$),
+                // Then apply any expandable header specific override
+                ...(isExpandableHeader && style.expandableHeaderCss),
+                // Apply the right border styling for the header row when using expandable tables and this column is the last expandable column, or not expanded.
+                ...(hasExpandableHeader &&
+                    (isHeader || isTotals) &&
+                    currentExpandedColumnCount === 0 &&
+                    Css_1.Css.boxShadow(`inset -1px -1px 0 ${Css_1.Palette.Gray200}`).$),
                 // Or level-specific styling
-                ...(!isHeader && !isTotals && !!style.levels && ((_c = style.levels[level]) === null || _c === void 0 ? void 0 : _c.cellCss)),
+                ...(!isHeader && !isTotals && !isExpandableHeader && !!style.levels && ((_g = style.levels[level]) === null || _g === void 0 ? void 0 : _g.cellCss)),
                 // Level specific styling for the first content column
-                ...(applyFirstContentColumnStyles && !!style.levels && ((_d = style.levels[level]) === null || _d === void 0 ? void 0 : _d.firstContentColumn)),
+                ...(applyFirstContentColumnStyles && !!style.levels && ((_h = style.levels[level]) === null || _h === void 0 ? void 0 : _h.firstContentColumn)),
                 // The specific cell's css (if any from GridCellContent)
                 ...rowStyleCellCss,
                 // Apply active row styling for non-nested card styles.
-                ...(isActive ? Css_1.Css.bgColor((_e = style.activeBgColor) !== null && _e !== void 0 ? _e : Css_1.Palette.LightBlue50).$ : {}),
+                ...(isActive ? Css_1.Css.bgColor((_j = style.activeBgColor) !== null && _j !== void 0 ? _j : Css_1.Palette.LightBlue50).$ : {}),
                 // Add any cell specific style overrides
                 ...((0, utils_1.isGridCellContent)(maybeContent) && maybeContent.typeScale ? Css_1.Css[maybeContent.typeScale].$ : {}),
                 // And any cell specific css
@@ -148,14 +182,16 @@ function RowImpl(props) {
                 ...Css_1.Css.if(applyCellHighlight && isCellActive).br4.boxShadow(`inset 0 0 0 1px ${Css_1.Palette.LightBlue700}`).$,
                 // Define the width of the column on each cell. Supports col spans.
                 width: `calc(${columnSizes.slice(columnIndex, columnIndex + currentColspan).join(" + ")})`,
-                ...(column.mw ? Css_1.Css.mw(column.mw).$ : {}),
+                ...(typeof column.mw === "string" ? Css_1.Css.mw(column.mw).$ : {}),
             };
             const cellClassNames = revealOnRowHover ? revealOnRowHoverClass : undefined;
             const cellOnClick = applyCellHighlight ? () => api.setActiveCellId(cellId) : undefined;
+            // If the expandable header is expanded, then we need to set a colspan on it which includes all expanded columns + this column.
+            const expandableHeaderColSpan = (isExpandableHeader && isExpanded ? (_l = (_k = column.expandColumns) === null || _k === void 0 ? void 0 : _k.length) !== null && _l !== void 0 ? _l : 0 : 0) + 1;
             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)(column, as)
+                : isHeader || isTotals || isExpandableHeader
+                    ? (0, cell_1.headerRenderFn)(column, as, expandableHeaderColSpan)
                     : (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/cell.d.ts

@@ -32,8 +32,11 @@ export declare type GridCellContent = {
 export declare type RenderCellFn<R extends Kinded> = (idx: number, css: Properties, content: ReactNode, row: R, rowStyle: RowStyle<R> | undefined, classNames: string | undefined, onClick: (() => void) | undefined) => ReactNode;
 /** 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: (column: GridColumnWithId<any>, as: RenderAs) => RenderCellFn<any>;
+/**
+ * Sets up the `GridContext` so that header cells can access the current sort settings.
+ * Used for the Header, Totals, and Expanded Header row's cells.
+ * */
+export declare const headerRenderFn: (column: GridColumnWithId<any>, as: RenderAs, colSpan: number) => 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

@@ -12,10 +12,13 @@ const defaultRenderFn = (as) => (key, css, content, row, rowStyle, classNames, o
     return ((0, jsx_runtime_1.jsx)(Cell, Object.assign({ css: { ...css, ...(0, TableStyles_1.tableRowStyles)(as) }, className: classNames, onClick: onClick }, { children: content }), key));
 };
 exports.defaultRenderFn = defaultRenderFn;
-/** Sets up the `GridContext` so that header cells can access the current sort settings. */
-const headerRenderFn = (column, as) => (key, css, content, row, rowStyle, classNames) => {
+/**
+ * Sets up the `GridContext` so that header cells can access the current sort settings.
+ * Used for the Header, Totals, and Expanded Header row's cells.
+ * */
+const headerRenderFn = (column, as, colSpan) => (key, css, content, row, rowStyle, classNames) => {
     const Cell = as === "table" ? "th" : "div";
-    return ((0, jsx_runtime_1.jsx)(Cell, Object.assign({ css: { ...css, ...(0, TableStyles_1.tableRowStyles)(as, column) }, className: classNames }, { children: content }), key));
+    return ((0, jsx_runtime_1.jsx)(Cell, Object.assign({ css: { ...css, ...(0, TableStyles_1.tableRowStyles)(as, column) }, className: classNames }, (as === "table" && { colSpan }), { children: content }), key));
 };
 exports.headerRenderFn = headerRenderFn;
 /** Renders a cell element when a row link is in play. */

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

@@ -9,7 +9,6 @@ export * from "./components/SortHeader";
 export { SortHeader } from "./components/SortHeader";
 export { useGridTableApi } from "./GridTableApi";
 export type { GridTableApi } from "./GridTableApi";
-export * from "./hooks/useColumns";
 export * from "./hooks/useSetupColumnSizes";
 export { cardStyle, condensedStyle, defaultStyle, getTableStyles } from "./TableStyles";
 export type { GridStyle, RowStyle, RowStyles } from "./TableStyles";

package/dist/components/Table/index.js

@@ -27,7 +27,6 @@ var SortHeader_1 = require("./components/SortHeader");
 Object.defineProperty(exports, "SortHeader", { enumerable: true, get: function () { return SortHeader_1.SortHeader; } });
 var GridTableApi_1 = require("./GridTableApi");
 Object.defineProperty(exports, "useGridTableApi", { enumerable: true, get: function () { return GridTableApi_1.useGridTableApi; } });
-__exportStar(require("./hooks/useColumns"), exports);
 __exportStar(require("./hooks/useSetupColumnSizes"), exports);
 var TableStyles_1 = require("./TableStyles");
 Object.defineProperty(exports, "cardStyle", { enumerable: true, get: function () { return TableStyles_1.cardStyle; } });

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

@@ -37,10 +37,12 @@ export declare type GridColumn<R extends Kinded> = {
         row: GridRowKind<R, K>;
         api: GridTableApi<R>;
         level: number;
+        expanded: boolean;
     }) => ReactNode | GridCellContent : (data: undefined, opts: {
         row: GridRowKind<R, K>;
         api: GridTableApi<R>;
         level: number;
+        expanded: boolean;
     }) => ReactNode | GridCellContent);
 } & {
     /**
@@ -66,13 +68,20 @@ export declare type GridColumn<R extends Kinded> = {
     isAction?: true;
     /** Column id that will be used to generate an unique identifier for every row cell */
     id?: string;
+    /** String identifier of the column. Typically the same text content as in column header. This is used to in things like the Edit Columns Button */
+    name?: string;
     /** Flag that will allow to know which columns are hide-able */
     canHide?: boolean;
     /** Flag that will allow to know which hide-able columns are visible on initial load */
     initVisible?: boolean;
+    /** A list of columns that should only be shown when this column is "expanded" */
+    expandColumns?: GridColumn<R>[];
+    /** Determines whether the group should initially be expanded on load of the table */
+    initExpanded?: boolean;
 };
 export declare type GridColumnWithId<R extends Kinded> = GridColumn<R> & {
     id: string;
+    expandColumns?: GridColumnWithId<R>[];
 };
 export declare const nonKindGridColumnKeys: string[];
 /**

package/dist/components/Table/types.js

@@ -13,4 +13,6 @@ exports.nonKindGridColumnKeys = [
     "id",
     "canHide",
     "initVisible",
+    "expandColumns",
+    "initExpanded",
 ];

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

@@ -1,3 +1,4 @@
+import { ObservableSet } from "mobx";
 import React from "react";
 import { GridDataRow } from "../components/Row";
 import { GridSortConfig } from "../GridTable";
@@ -30,6 +31,10 @@ export declare class TableState {
     sort: SortState;
     private initialSortState;
     private onSort;
+    columns: GridColumnWithId<any>[];
+    private expandedColumns;
+    visibleColumns: ObservableSet<string>;
+    private visibleColumnStorageKey;
     /**
      * Creates the `RowState` for a given `GridTable`.
      */
@@ -40,6 +45,11 @@ export declare class TableState {
     setSortKey(clickedColumnId: string): void;
     get sortState(): SortState | undefined;
     setRows(rows: GridDataRow<any>[]): void;
+    setColumns(columns: GridColumnWithId<any>[]): void;
+    setVisibleColumns(ids: string[]): void;
+    get visibleColumnIds(): string[];
+    get expandedColumnIds(): string[];
+    toggleExpandedColumn(columnId: string): void;
     setMatchedRows(rowIds: string[]): void;
     get selectedIds(): string[];
     getSelected(id: string): SelectedState;

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

@@ -4,6 +4,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.deriveSortState = exports.TableStateContext = exports.TableState = void 0;
+const change_case_1 = require("change-case");
 const mobx_1 = require("mobx");
 const react_1 = __importDefault(require("react"));
 const utils_1 = require("./utils");
@@ -41,15 +42,25 @@ class TableState {
         this.activeCellId = undefined;
         // Provide some defaults to get the sort state to properly work.
         this.sort = {};
+        // Non-reactive list of our columns
+        this.columns = [];
+        // An observable set of column ids to keep track of which columns are currently expanded
+        this.expandedColumns = new mobx_1.ObservableSet();
+        // An observable set of column ids to keep track of which columns are visible
+        this.visibleColumns = new mobx_1.ObservableSet();
+        this.visibleColumnStorageKey = "";
         // Make ourselves an observable so that mobx will do caching of .collapseIds so
         // that it'll be a stable identity for GridTable to useMemo against.
-        (0, mobx_1.makeAutoObservable)(this, 
-        // We only shallow observe rows so that:
-        // a) we don't deeply/needlessly proxy-ize a large Apollo fragment cache, but
-        // b) if rows changes, we re-run computeds like getSelectedRows that may need to see the
-        // updated _contents_ of a given row, even if our other selected/matched row states don't change.
-        // (as any b/c rows is private, so the mapped type doesn't see it)
-        { rows: mobx_1.observable.shallow });
+        (0, mobx_1.makeAutoObservable)(this, {
+            // We only shallow observe rows so that:
+            // a) we don't deeply/needlessly proxy-ize a large Apollo fragment cache, but
+            // b) if rows changes, we re-run computeds like getSelectedRows that may need to see the
+            // updated _contents_ of a given row, even if our other selected/matched row states don't change.
+            // (as any b/c rows is private, so the mapped type doesn't see it)
+            rows: mobx_1.observable.shallow,
+            // Do not observe columns, expect this to be a non-reactive value for us to base our reactive values off of.
+            columns: false,
+        });
         // Whenever our `matchedRows` change (i.e. via filtering) then we need to re-derive header and parent rows' selected state.
         (0, mobx_1.reaction)(() => [...this.matchedRows.values()].sort(), () => {
             const map = new Map();
@@ -165,6 +176,33 @@ class TableState {
         // Finally replace our existing list of rows
         this.rows = rows;
     }
+    setColumns(columns) {
+        if (columns !== this.columns) {
+            this.columns = columns;
+            this.visibleColumnStorageKey = (0, change_case_1.camelCase)(columns.map((c) => c.id).join());
+            this.visibleColumns.replace(readOrSetLocalVisibleColumnState(columns, this.visibleColumnStorageKey));
+            const expandedColumnIds = columns.filter((c) => c.initExpanded).map((c) => c.id);
+            this.expandedColumns.replace(expandedColumnIds);
+        }
+    }
+    setVisibleColumns(ids) {
+        sessionStorage.setItem(this.visibleColumnStorageKey, JSON.stringify(ids));
+        this.visibleColumns.replace(ids);
+    }
+    get visibleColumnIds() {
+        return [...this.visibleColumns.values()];
+    }
+    get expandedColumnIds() {
+        return [...this.expandedColumns.values()];
+    }
+    toggleExpandedColumn(columnId) {
+        if (this.expandedColumns.has(columnId)) {
+            this.expandedColumns.delete(columnId);
+        }
+        else {
+            this.expandedColumns.add(columnId);
+        }
+    }
     setMatchedRows(rowIds) {
         // ObservableSet doesn't seem to do a `diff` inside `replace` before firing
         // observers/reactions that watch it, which can lead to render loops with the
@@ -319,6 +357,16 @@ function readLocalCollapseState(persistCollapse) {
     const collapsedGridRowIds = sessionStorage.getItem(persistCollapse);
     return collapsedGridRowIds ? JSON.parse(collapsedGridRowIds) : [];
 }
+// Get the columns that are already in the visible state so we keep them toggled.
+function readOrSetLocalVisibleColumnState(columns, storageKey) {
+    const storageValue = sessionStorage.getItem(storageKey);
+    if (storageValue) {
+        return JSON.parse(storageValue);
+    }
+    const visibleColumnIds = columns.filter((c) => c.initVisible || !c.canHide).map((c) => c.id);
+    sessionStorage.setItem(storageKey, JSON.stringify(visibleColumnIds));
+    return visibleColumnIds;
+}
 /** Finds a row by id, and returns it + any parents. */
 function findRow(rows, id) {
     // This is technically an array of "maybe FoundRow"

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

@@ -5,7 +5,8 @@ const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
 const CollapseToggle_1 = require("../components/CollapseToggle");
 const SelectToggle_1 = require("../components/SelectToggle");
 const types_1 = require("../types");
-const utils_1 = require("../../../utils");
+const utils_1 = require("./utils");
+const utils_2 = require("../../../utils");
 /** Provides default styling for a GridColumn representing a Date. */
 function column(columnDef) {
     return { ...columnDef };
@@ -44,10 +45,14 @@ function selectColumn(columnDef) {
         w: "48px",
         wrapAction: false,
         isAction: true,
+        expandColumns: undefined,
+        // Select Column should not display the select toggle for `expandableHeader` or `totals` row kinds
+        expandableHeader: utils_1.emptyCell,
+        totals: utils_1.emptyCell,
         // Use any of the user's per-row kind methods if they have them.
         ...columnDef,
     };
-    return (0, utils_1.newMethodMissingProxy)(base, (key) => {
+    return (0, utils_2.newMethodMissingProxy)(base, (key) => {
         return (data, { row }) => ({
             content: (0, jsx_runtime_1.jsx)(SelectToggle_1.SelectToggle, { id: row.id, disabled: row.selectable === false }, void 0),
         });
@@ -71,9 +76,13 @@ function collapseColumn(columnDef) {
         w: "38px",
         wrapAction: false,
         isAction: true,
+        expandColumns: undefined,
+        // Collapse Column should not display the collapse toggle for `expandableHeader` or `totals` row kinds
+        expandableHeader: utils_1.emptyCell,
+        totals: utils_1.emptyCell,
         ...columnDef,
     };
-    return (0, utils_1.newMethodMissingProxy)(base, (key) => {
+    return (0, utils_2.newMethodMissingProxy)(base, (key) => {
         return (data, { row, level }) => ({
             content: (0, jsx_runtime_1.jsx)(CollapseToggle_1.CollapseToggle, { row: row, compact: level > 0 }, void 0),
         });
@@ -153,8 +162,23 @@ exports.calcColumnSizes = calcColumnSizes;
 function assignDefaultColumnIds(columns) {
     // Note: we are not _always_ spreading the `c` property as we need to be able to return the whole proxy object that
     // exists as part of `selectColumn` and `collapseColumn`.
-    return columns.map((c, idx) => { var _a; return (c.id ? c : { ...c, id: (_a = c.id) !== null && _a !== void 0 ? _a : (0, exports.generateColumnId)(idx) }); });
+    return columns.map((c, idx) => {
+        var _a;
+        const { expandColumns = [] } = c;
+        const expandColumnsWithId = expandColumns.map((ec, ecIdx) => {
+            var _a;
+            return ({
+                ...ec,
+                id: (_a = ec.id) !== null && _a !== void 0 ? _a : `${(0, exports.generateColumnId)(idx)}_${ecIdx}`,
+                // Defining this as undefined to make TS happy for now.
+                // If we do not explicitly set to `undefined`, TS thinks `expandColumns` could still be of type GridColumn<T> (not WithId).
+                // We only support a single level of expanding columns, so this is safe to do.
+                expandColumns: undefined,
+            });
+        });
+        return Object.assign(c, { id: (_a = c.id) !== null && _a !== void 0 ? _a : (0, exports.generateColumnId)(idx), expandColumns: expandColumnsWithId });
+    });
 }
 exports.assignDefaultColumnIds = assignDefaultColumnIds;
-const generateColumnId = (columnIndex) => `c${columnIndex}`;
+const generateColumnId = (columnIndex) => `beamColumn_${columnIndex}`;
 exports.generateColumnId = generateColumnId;

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

@@ -19,6 +19,11 @@ export declare const simpleHeader: {
     id: string;
     data: {};
 };
+export declare const simpleExpandableHeader: {
+    kind: "expandableHeader";
+    id: string;
+    data: {};
+};
 /** Like `simpleRows` but for `SimpleHeaderAndData`. */
 export declare function simpleDataRows<R extends SimpleHeaderAndData<D>, D>(data?: Array<D & {
     id: string;

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

@@ -1,8 +1,9 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.simpleDataRows = exports.simpleHeader = void 0;
+exports.simpleDataRows = exports.simpleExpandableHeader = exports.simpleHeader = void 0;
 /** A const for a marker header row. */
 exports.simpleHeader = { kind: "header", id: "header", data: {} };
+exports.simpleExpandableHeader = { kind: "expandableHeader", id: "expandableHeader", data: {} };
 /** Like `simpleRows` but for `SimpleHeaderAndData`. */
 function simpleDataRows(data = []) {
     // @ts-ignore Not sure why this doesn't type-check, something esoteric with the DiscriminateUnion type

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

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

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

@@ -50,8 +50,8 @@ function getPin(pin) {
     return typeof pin === "string" ? pin : pin === null || pin === void 0 ? void 0 : pin.at;
 }
 function compare(column, a, b, invert, caseSensitive) {
-    const v1 = sortValue((0, utils_1.applyRowFn)(column, a, {}, 0), caseSensitive);
-    const v2 = sortValue((0, utils_1.applyRowFn)(column, b, {}, 0), caseSensitive);
+    const v1 = sortValue((0, utils_1.applyRowFn)(column, a, {}, 0, false), caseSensitive);
+    const v2 = sortValue((0, utils_1.applyRowFn)(column, b, {}, 0, false), caseSensitive);
     const v1e = v1 === null || v1 === undefined;
     const v2e = v2 === null || v2 === undefined;
     if ((v1e && v2e) || v1 === v2) {
@@ -91,10 +91,12 @@ function sortValue(value, caseSensitive) {
     return typeof maybeFn === "string" && !caseSensitive ? maybeFn.toLowerCase() : maybeFn;
 }
 function ensureClientSideSortValueIsSortable(sortOn, isHeader, column, idx, maybeContent) {
+    var _a;
     if (process.env.NODE_ENV !== "production" && !isHeader && sortOn === "client" && column.clientSideSort !== false) {
         const value = sortValue(maybeContent, false);
         if (!canClientSideSort(value)) {
-            throw new Error(`Column ${idx} passed an unsortable value, use GridCellContent or clientSideSort=false`);
+            const columnIdentifier = !column.id.startsWith("beamColumn_") ? column.id : (_a = column.name) !== null && _a !== void 0 ? _a : idx;
+            throw new Error(`Column ${columnIdentifier} passed an unsortable value, use GridCellContent or clientSideSort=false`);
         }
     }
 }

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

@@ -6,10 +6,10 @@ 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, column: GridColumnWithId<any>): ReactNode;
+export declare function toContent(maybeContent: ReactNode | GridCellContent, isHeader: boolean, canSortColumn: boolean, isClientSideSorting: boolean, style: GridStyle, as: RenderAs, alignment: GridCellAlignment, column: GridColumnWithId<any>, isExpandableHeader: boolean, isExpandable: boolean, minStickyLeftOffset: number): 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;
+export declare function applyRowFn<R extends Kinded>(column: GridColumnWithId<R>, row: GridDataRow<R>, api: GridTableApi<R>, level: number, expanded: boolean): ReactNode | GridCellContent;
 export declare const ASC: "ASC";
 export declare const DESC: "DESC";
 export declare const emptyCell: GridCellContent;
@@ -21,3 +21,13 @@ export declare function getJustification(column: GridColumnWithId<any>, maybeCon
 };
 export declare function maybeApplyFunction<T>(row: T, maybeFn: Properties | ((row: T) => Properties) | undefined): Properties | undefined;
 export declare function matchesFilter(maybeContent: ReactNode | GridCellContent, filter: string): boolean;
+export declare const HEADER = "header";
+export declare const TOTALS = "totals";
+export declare const EXPANDABLE_HEADER = "expandableHeader";
+export declare const reservedRowKinds: string[];
+export declare const zIndices: {
+    stickyHeader: number;
+    stickyColumns: number;
+    expandableHeaderTitle: number;
+    expandableHeaderIcon: number;
+};

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

@@ -1,12 +1,13 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.matchesFilter = exports.maybeApplyFunction = exports.getJustification = exports.getAlignment = exports.getFirstOrLastCellCss = exports.getIndentationCss = exports.emptyCell = exports.DESC = exports.ASC = exports.applyRowFn = exports.isGridCellContent = exports.toContent = void 0;
+exports.zIndices = exports.reservedRowKinds = exports.EXPANDABLE_HEADER = exports.TOTALS = exports.HEADER = exports.matchesFilter = exports.maybeApplyFunction = exports.getJustification = exports.getAlignment = exports.getFirstOrLastCellCss = exports.getIndentationCss = exports.emptyCell = exports.DESC = exports.ASC = exports.applyRowFn = exports.isGridCellContent = exports.toContent = void 0;
 const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
+const ExpandableHeader_1 = require("../components/ExpandableHeader");
 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, column) {
+function toContent(maybeContent, isHeader, canSortColumn, isClientSideSorting, style, as, alignment, column, isExpandableHeader, isExpandable, minStickyLeftOffset) {
     var _a, _b, _c;
     let content = isGridCellContent(maybeContent) ? maybeContent.content : maybeContent;
     if (typeof content === "function") {
@@ -34,6 +35,12 @@ function toContent(maybeContent, isHeader, canSortColumn, isClientSideSorting, s
     if (content && typeof content === "string" && isHeader && canSortColumn) {
         return ((0, jsx_runtime_1.jsx)(SortHeader_1.SortHeader, { content: content, iconOnLeft: alignment === "right", sortKey: (_b = column.serverSideSortKey) !== null && _b !== void 0 ? _b : column.id }, void 0));
     }
+    else if (content && typeof content === "string" && isExpandableHeader && isExpandable) {
+        return (0, jsx_runtime_1.jsx)(ExpandableHeader_1.ExpandableHeader, { title: content, column: column, minStickyLeftOffset: minStickyLeftOffset, as: as }, void 0);
+    }
+    else if (content && typeof content === "string" && isExpandableHeader) {
+        return (0, jsx_runtime_1.jsx)("span", Object.assign({ css: Css_1.Css.lineClamp2.$ }, { children: content }), void 0);
+    }
     else if (content && ((_c = style === null || style === void 0 ? void 0 : style.presentationSettings) === null || _c === void 0 ? void 0 : _c.wrap) === false && typeof content === "string") {
         // In order to truncate the text properly, then we need to wrap it in another element
         // as our cell element is a flex container, which don't allow for applying truncation styles directly on it.
@@ -55,12 +62,12 @@ function isContentEmpty(content) {
     return emptyValues.includes(content);
 }
 /** Return the content for a given column def applied to a given row. */
-function applyRowFn(column, row, api, level) {
+function applyRowFn(column, row, api, level, expanded) {
     // Usually this is a function to apply against the row, but sometimes it's a hard-coded value, i.e. for headers
     const maybeContent = column[row.kind];
     if (typeof maybeContent === "function") {
         // Auto-destructure data
-        return maybeContent(row["data"], { row: row, api, level });
+        return maybeContent(row["data"], { row: row, api, level, expanded });
     }
     else {
         return maybeContent;
@@ -146,3 +153,13 @@ function matchesFilter(maybeContent, filter) {
     return false;
 }
 exports.matchesFilter = matchesFilter;
+exports.HEADER = "header";
+exports.TOTALS = "totals";
+exports.EXPANDABLE_HEADER = "expandableHeader";
+exports.reservedRowKinds = [exports.HEADER, exports.TOTALS, exports.EXPANDABLE_HEADER];
+exports.zIndices = {
+    stickyHeader: 4,
+    stickyColumns: 3,
+    expandableHeaderTitle: 2,
+    expandableHeaderIcon: 1,
+};

package/package.json

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

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

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

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

@@ -1,33 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.useColumns = void 0;
-const change_case_1 = require("change-case");
-const react_1 = require("react");
-const useSessionStorage_1 = require("../../../hooks/useSessionStorage");
-function useColumns(tableColumns, maybeStorageKey) {
-    const { selectedColumns, hideColumns } = tableColumns.reduce((acc, column) => {
-        // Only include options that can be hidden and have the `id` property defined.
-        if (!column.id || column.id.length === 0) {
-            console.warn("Column is missing 'id' property required by the Edit Columns button", column);
-            return acc;
-        }
-        // Add hide-able columns
-        if (column.canHide) {
-            acc.hideColumns.push(column.id);
-        }
-        // Add selected columns
-        if (!column.canHide || (column.canHide && column.initVisible)) {
-            acc.selectedColumns.push(column.id);
-        }
-        return { ...acc };
-    }, { selectedColumns: [], hideColumns: [] });
-    const storageKey = maybeStorageKey !== null && maybeStorageKey !== void 0 ? maybeStorageKey : (0, change_case_1.camelCase)(hideColumns.map((c) => c).join(""));
-    const [storageNames, setStorageNames] = (0, useSessionStorage_1.useSessionStorage)(storageKey, selectedColumns);
-    const storageColumns = storageNames && storageNames.map((sc) => tableColumns.find((column) => column.id === sc));
-    const [columns, setColumns] = (0, react_1.useState)(storageColumns);
-    (0, react_1.useEffect)(() => {
-        setStorageNames(columns.map((column) => column.id));
-    }, [columns]);
-    return [columns, setColumns];
-}
-exports.useColumns = useColumns;