@homebound/beam 2.212.3 → 2.214.0

package/dist/components/BeamContext.d.ts

@@ -19,6 +19,8 @@ export interface BeamContextState {
     drawerCanCloseChecks: MutableRefObject<CanCloseCheck[]>;
     /** Checks when closing SuperDrawer Details, a double array to keep per-detail lists. */
     drawerCanCloseDetailsChecks: MutableRefObject<CanCloseCheck[][]>;
+    /** The div for SuperDrawerHeader to portal into. */
+    sdHeaderDiv: HTMLDivElement;
 }
 /** This is only exported internally, for useModal and useSuperDrawer, it's not a public API. */
 export declare const BeamContext: import("react").Context<BeamContextState>;

package/dist/components/BeamContext.js

@@ -20,6 +20,7 @@ exports.BeamContext = (0, react_1.createContext)({
     drawerContentStack: new index_1.EmptyRef(),
     drawerCanCloseChecks: new index_1.EmptyRef(),
     drawerCanCloseDetailsChecks: new index_1.EmptyRef(),
+    sdHeaderDiv: undefined,
 });
 function BeamProvider({ children, ...presentationProps }) {
     // We want the identity of these to be stable, b/c they end up being used as dependencies
@@ -40,6 +41,7 @@ function BeamProvider({ children, ...presentationProps }) {
     const drawerContentStackRef = (0, react_1.useRef)([]);
     const drawerCanCloseChecks = (0, react_1.useRef)([]);
     const drawerCanCloseDetailsChecks = (0, react_1.useRef)([]);
+    const sdHeaderDiv = (0, react_1.useMemo)(() => document.createElement("div"), []);
     // We essentially expose the refs, but with our own getters/setters so that we can
     // have the setters call `tick` to re-render this Provider
     const context = (0, react_1.useMemo)(() => {
@@ -54,6 +56,7 @@ function BeamProvider({ children, ...presentationProps }) {
             modalFooterDiv,
             drawerCanCloseChecks,
             drawerCanCloseDetailsChecks,
+            sdHeaderDiv,
         };
     }, [modalBodyDiv, modalFooterDiv]);
     return ((0, jsx_runtime_1.jsx)(exports.BeamContext.Provider, Object.assign({ value: { ...context } }, { children: (0, jsx_runtime_1.jsx)(PresentationContext_1.PresentationProvider, Object.assign({}, presentationProps, { children: (0, jsx_runtime_1.jsx)(form_state_1.AutoSaveStatusProvider, { children: (0, jsx_runtime_1.jsxs)(SnackbarContext_1.SnackbarProvider, { children: [(0, jsx_runtime_1.jsxs)(react_aria_1.OverlayProvider, { children: [children, modalRef.current && (0, jsx_runtime_1.jsx)(Modal_1.Modal, Object.assign({}, modalRef.current), void 0)] }, void 0), (0, jsx_runtime_1.jsx)(SuperDrawer_1.SuperDrawer, {}, void 0)] }, void 0) }, void 0) }), void 0) }), void 0));

package/dist/components/ButtonGroup.js

@@ -11,7 +11,7 @@ const defaultTestId_1 = require("../utils/defaultTestId");
 function ButtonGroup(props) {
     const { buttons, disabled = false, size = "sm" } = props;
     const tid = (0, utils_1.useTestIds)(props, "buttonGroup");
-    return ((0, jsx_runtime_1.jsx)("div", Object.assign({ css: Css_1.Css.mPx(4).$ }, tid, { children: buttons.map(({ disabled: buttonDisabled, ...buttonProps }, i) => (
+    return ((0, jsx_runtime_1.jsx)("div", Object.assign({}, tid, { css: sizeStyles[size] }, { children: buttons.map(({ disabled: buttonDisabled, ...buttonProps }, i) => (
         // Disable the button if the ButtonGroup is disabled or if the current button is disabled.
         (0, jsx_runtime_1.jsx)(GroupButton, Object.assign({}, buttonProps, { disabled: disabled || buttonDisabled, size: size }, tid), i))) }), void 0));
 }

package/dist/components/Snackbar/SnackbarNotice.d.ts

@@ -1,6 +1,6 @@
 import { ReactNode } from "react";
 import { ButtonProps } from "../Button";
-export declare type SnackbarNoticeTypes = "error" | "warning" | "success" | "info";
+export declare type SnackbarNoticeTypes = "error" | "warning" | "success" | "info" | "alert";
 export interface SnackbarNoticeProps {
     /** Adds action button to the right of the notice */
     action?: Pick<ButtonProps, "label" | "onClick" | "variant">;

package/dist/components/Snackbar/SnackbarNotice.js

@@ -12,12 +12,14 @@ function SnackbarNotice(props) {
     const tid = (0, utils_1.useTestIds)(props, "snackbar");
     // Only allow the "close" button to be hidden if not a `persistent` notice. Otherwise we could get in a state where the user cannot remove the notice from the screen.
     const reallyHideClose = hideCloseButton && !persistent;
-    return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ css: Css_1.Css.white.bgGray800.br4.base.df.aic.maxwPx(420).$ }, tid, { role: "alert" }, { children: [icon && ((0, jsx_runtime_1.jsx)("span", Object.assign({ css: Css_1.Css.fs0.plPx(12).$ }, { children: (0, jsx_runtime_1.jsx)(Icon_1.Icon, Object.assign({ icon: typeToIcon[icon] }, tid.icon), void 0) }), void 0)), (0, jsx_runtime_1.jsx)("span", Object.assign({ css: Css_1.Css.lineClamp3.pr2.myPx(12).plPx(icon ? 8 : 16).$ }, (typeof message === "string" ? { title: message } : undefined), tid.message, { children: message }), void 0), (action || !reallyHideClose) && ((0, jsx_runtime_1.jsxs)("span", Object.assign({ css: Css_1.Css.fs0.df.aic.$ }, { children: [action && ((0, jsx_runtime_1.jsx)("span", Object.assign({ css: Css_1.Css.ttu.sm.prPx(!reallyHideClose && action.variant !== "text" ? 4 : 8).$ }, { children: (0, jsx_runtime_1.jsx)(Button_1.Button, Object.assign({ contrast: true }, action, tid.action), void 0) }), void 0)), !reallyHideClose && ((0, jsx_runtime_1.jsx)("span", Object.assign({ css: Css_1.Css.pr1.add("lineHeight", 0).$ }, { children: (0, jsx_runtime_1.jsx)(IconButton_1.IconButton, Object.assign({ icon: "x", contrast: true, onClick: onClose }, tid.close), void 0) }), void 0))] }), void 0))] }), void 0));
+    return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ css: Css_1.Css.white.bgGray800.br4.base.df.aic.maxwPx(420).$ }, tid, { role: "alert" }, { children: [icon && ((0, jsx_runtime_1.jsx)("span", Object.assign({ css: Css_1.Css.fs0.plPx(12).$ }, { children: (0, jsx_runtime_1.jsx)(Icon_1.Icon, Object.assign({}, typeToIcon[icon], tid.icon), void 0) }), void 0)), (0, jsx_runtime_1.jsx)("span", Object.assign({ css: Css_1.Css.lineClamp3.pr2.myPx(12).plPx(icon ? 8 : 16).$ }, (typeof message === "string" ? { title: message } : undefined), tid.message, { children: message }), void 0), (action || !reallyHideClose) && ((0, jsx_runtime_1.jsxs)("span", Object.assign({ css: Css_1.Css.fs0.df.aic.$ }, { children: [action && ((0, jsx_runtime_1.jsx)("span", Object.assign({ css: Css_1.Css.ttu.sm.prPx(!reallyHideClose && action.variant !== "text" ? 4 : 8).$ }, { children: (0, jsx_runtime_1.jsx)(Button_1.Button, Object.assign({ contrast: true }, action, tid.action), void 0) }), void 0)), !reallyHideClose && ((0, jsx_runtime_1.jsx)("span", Object.assign({ css: Css_1.Css.pr1.add("lineHeight", 0).$ }, { children: (0, jsx_runtime_1.jsx)(IconButton_1.IconButton, Object.assign({ icon: "x", contrast: true, onClick: onClose }, tid.close), void 0) }), void 0))] }), void 0))] }), void 0));
 }
 exports.SnackbarNotice = SnackbarNotice;
 const typeToIcon = {
-    error: "xCircle",
-    warning: "error",
-    success: "checkCircle",
-    info: "infoCircle",
+    // Can change to a Tupple with IconKey and color?
+    error: { icon: "xCircle", color: Css_1.Palette.Red300 },
+    warning: { icon: "error", color: Css_1.Palette.Yellow300 },
+    success: { icon: "checkCircle", color: Css_1.Palette.Green300 },
+    info: { icon: "infoCircle", color: Css_1.Palette.LightBlue200 },
+    alert: { icon: "errorCircle", color: Css_1.Palette.White },
 };

package/dist/components/SuperDrawer/SuperDrawer.js

@@ -35,10 +35,9 @@ const utils_2 = require("./utils");
  */
 function SuperDrawer() {
     var _a, _b;
-    const { drawerContentStack: contentStack } = (0, BeamContext_1.useBeamContext)();
+    const { drawerContentStack: contentStack, sdHeaderDiv } = (0, BeamContext_1.useBeamContext)();
     const { closeDrawer } = (0, components_1.useSuperDrawer)();
-    const modalBodyRef = (0, react_3.useRef)(null);
-    const modalFooterRef = (0, react_3.useRef)(null);
+    const headerRef = (0, react_3.useRef)(null);
     const testId = (0, utils_1.useTestIds)({}, "superDrawer");
     // Get the latest element on the stack
     // We use undefined, nullish operators and empty object here to allow AnimatePresence
@@ -47,10 +46,13 @@ function SuperDrawer() {
     const { content } = currentContent !== null && currentContent !== void 0 ? currentContent : {};
     // Also get the first / non-detail element on the stack
     const firstContent = (_b = contentStack.current[0]) === null || _b === void 0 ? void 0 : _b.opts;
-    const { onPrevClick, onNextClick, titleRightContent, titleLeftContent, hideControls } = firstContent !== null && firstContent !== void 0 ? firstContent : {};
-    const isDetail = currentContent !== firstContent;
-    const title = content === undefined ? "" : currentContent.title || firstContent.title;
     const { width = utils_2.SuperDrawerWidth.Normal } = firstContent !== null && firstContent !== void 0 ? firstContent : {};
+    (0, react_3.useEffect)(() => {
+        var _a;
+        if (((_a = headerRef.current) === null || _a === void 0 ? void 0 : _a.childNodes.length) === 0 && content) {
+            headerRef.current.appendChild(sdHeaderDiv);
+        }
+    }, [headerRef, content]);
     return (0, react_dom_1.createPortal)((0, jsx_runtime_1.jsx)(framer_motion_1.AnimatePresence, { children: content && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(react_2.Global, { styles: { body: Css_1.Css.overflowHidden.$ } }, void 0), (0, react_1.createElement)(framer_motion_1.motion.div, { ...testId, 
                     // Key is required for framer-motion animations
                     key: "superDrawer", 
@@ -70,17 +72,6 @@ function SuperDrawer() {
                         // Custom transitions settings for the translateX animation
                         transition: { ease: "linear", duration: 0.2, delay: 0.2 }, exit: { transition: { ease: "linear", duration: 0.2 }, x: width }, 
                         // Preventing clicks from triggering parent onClick
-                        onClick: (e) => e.stopPropagation() }, { children: (0, jsx_runtime_1.jsxs)(form_state_1.AutoSaveStatusProvider, { children: [(0, jsx_runtime_1.jsxs)("header", Object.assign({ css: Css_1.Css.df.p3.bb.bGray200.df.aic.jcsb.gap2.$ }, { children: [(0, jsx_runtime_1.jsxs)("div", Object.assign({ css: Css_1.Css.df.aic.$ }, { children: [(0, jsx_runtime_1.jsx)("div", Object.assign({ css: Css_1.Css.xl2Sb.gray900.mr2.$ }, testId.title, { children: title !== null && title !== void 0 ? title : null }), void 0), titleLeftContent !== null && titleLeftContent !== void 0 ? titleLeftContent : null] }), void 0), (0, jsx_runtime_1.jsxs)("div", Object.assign({ css: Css_1.Css.df.gap3.aic.hPx(32).fs0.$ }, { children: [titleRightContent || null, !hideControls && ((0, jsx_runtime_1.jsx)(components_1.ButtonGroup, Object.assign({ buttons: [
-                                                        {
-                                                            icon: "chevronLeft",
-                                                            onClick: () => onPrevClick && onPrevClick(),
-                                                            disabled: !onPrevClick || isDetail,
-                                                        },
-                                                        {
-                                                            icon: "chevronRight",
-                                                            onClick: () => onNextClick && onNextClick(),
-                                                            disabled: !onNextClick || isDetail,
-                                                        },
-                                                    ] }, testId.headerActions), void 0)), (0, jsx_runtime_1.jsx)(components_1.IconButton, Object.assign({ icon: "x", onClick: closeDrawer }, testId.close), void 0)] }), void 0)] }), void 0), content] }, void 0) }), "superDrawerContainer"))] }, void 0)) }, void 0), document.body);
+                        onClick: (e) => e.stopPropagation() }, { children: (0, jsx_runtime_1.jsxs)(form_state_1.AutoSaveStatusProvider, { children: [(0, jsx_runtime_1.jsxs)("header", Object.assign({ css: Css_1.Css.p3.bb.bGray200.df.aic.jcsb.gap3.$ }, { children: [(0, jsx_runtime_1.jsx)("div", { ref: headerRef, css: Css_1.Css.gray900.fg1.addIn("h1", Css_1.Css.xl2Sb.$).$ }, void 0), (0, jsx_runtime_1.jsx)(components_1.IconButton, Object.assign({ icon: "x", onClick: closeDrawer }, testId.close), void 0)] }), void 0), content] }, void 0) }), "superDrawerContainer"))] }, void 0)) }, void 0), document.body);
 }
 exports.SuperDrawer = SuperDrawer;

package/dist/components/SuperDrawer/components/SuperDrawerHeader.d.ts

@@ -0,0 +1,13 @@
+import { ReactNode } from "react";
+interface SuperDrawerHeaderProps {
+    children: ReactNode;
+    hideControls?: boolean;
+}
+interface SuperDrawerHeaderStructuredProps {
+    title: string;
+    left?: ReactNode;
+    right?: ReactNode;
+    hideControls?: boolean;
+}
+export declare function SuperDrawerHeader(props: SuperDrawerHeaderProps | SuperDrawerHeaderStructuredProps): JSX.Element;
+export {};

package/dist/components/SuperDrawer/components/SuperDrawerHeader.js

@@ -0,0 +1,27 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SuperDrawerHeader = void 0;
+const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
+const react_dom_1 = require("react-dom");
+const BeamContext_1 = require("../../BeamContext");
+const ButtonGroup_1 = require("../../ButtonGroup");
+const Css_1 = require("../../../Css");
+const utils_1 = require("../../../utils");
+function SuperDrawerHeader(props) {
+    var _a, _b;
+    const { hideControls } = props;
+    const { sdHeaderDiv, drawerContentStack: contentStack } = (0, BeamContext_1.useBeamContext)();
+    const firstContent = (_a = contentStack.current[0]) === null || _a === void 0 ? void 0 : _a.opts;
+    const { onPrevClick, onNextClick } = firstContent !== null && firstContent !== void 0 ? firstContent : {};
+    const currentContent = (_b = contentStack.current[contentStack.current.length - 1]) === null || _b === void 0 ? void 0 : _b.opts;
+    const isDetail = currentContent !== firstContent;
+    const tid = (0, utils_1.useTestIds)({}, "superDrawerHeader");
+    return (0, react_dom_1.createPortal)((0, jsx_runtime_1.jsxs)("div", Object.assign({ css: Css_1.Css.df.aic.jcsb.gap3.$ }, tid, { children: [isStructuredProps(props) ? ((0, jsx_runtime_1.jsxs)("div", Object.assign({ css: Css_1.Css.df.jcsb.aic.gap2.fg1.$ }, { children: [(0, jsx_runtime_1.jsxs)("div", Object.assign({ css: Css_1.Css.fg1.df.aic.gap2.$ }, { children: [(0, jsx_runtime_1.jsx)("h1", { children: props.title }, void 0), props.left] }), void 0), props.right && (0, jsx_runtime_1.jsx)("div", Object.assign({ css: Css_1.Css.fs0.$ }, { children: props.right }), void 0)] }), void 0)) : ((0, jsx_runtime_1.jsx)("div", Object.assign({ css: Css_1.Css.fg1.$ }, { children: props.children }), void 0)), !hideControls && ((0, jsx_runtime_1.jsx)("div", Object.assign({ css: Css_1.Css.fs0.if(isDetail).invisible.$ }, { children: (0, jsx_runtime_1.jsx)(ButtonGroup_1.ButtonGroup, Object.assign({ buttons: [
+                        { icon: "chevronLeft", onClick: () => onPrevClick && onPrevClick(), disabled: !onPrevClick },
+                        { icon: "chevronRight", onClick: () => onNextClick && onNextClick(), disabled: !onNextClick },
+                    ] }, tid.actions), void 0) }), void 0))] }), void 0), sdHeaderDiv);
+}
+exports.SuperDrawerHeader = SuperDrawerHeader;
+function isStructuredProps(props) {
+    return typeof props === "object" && "title" in props;
+}

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

@@ -1,3 +1,4 @@
+export * from "./components/SuperDrawerHeader";
 export * from "./ConfirmCloseModal";
 export * from "./SuperDrawerContent";
 export * from "./useSuperDrawer";

package/dist/components/SuperDrawer/index.js

@@ -11,6 +11,7 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 // These are our public APIs
+__exportStar(require("./components/SuperDrawerHeader"), exports);
 __exportStar(require("./ConfirmCloseModal"), exports);
 __exportStar(require("./SuperDrawerContent"), exports);
 __exportStar(require("./useSuperDrawer"), exports);

package/dist/components/SuperDrawer/useSuperDrawer.d.ts

@@ -2,18 +2,10 @@ import { ReactNode } from "react";
 import { CanCloseCheck } from "../../types";
 import { SuperDrawerWidth } from "./utils";
 export interface OpenInDrawerOpts {
-    /** Title of the SuperDrawer */
-    title: string;
-    /** Optional content to place left of the prev/next buttons, i.e. a "Manage" link. */
-    titleRightContent?: ReactNode;
-    /** Optional content to place right of the title, i.e. a status badge. */
-    titleLeftContent?: ReactNode;
     /** Invokes left, disabled if undefined. */
     onPrevClick?: () => void;
     /** Invokes right, disabled if undefined. */
     onNextClick?: () => void;
-    /** Hides the pagination controls for `onNextClick` and `onPrevClick` */
-    hideControls?: true;
     /** Adds a callback that is called _after_ close has definitely happened. */
     onClose?: () => void;
     content: ReactNode;
@@ -21,8 +13,6 @@ export interface OpenInDrawerOpts {
     width?: SuperDrawerWidth;
 }
 export interface OpenDetailOpts {
-    /** Title of the SuperDrawer for this detail page (replaces the original title). */
-    title?: string;
     content: ReactNode;
 }
 export declare type ContentStack = {

package/dist/components/Table/GridTable.js

@@ -133,26 +133,12 @@ function GridTable(props) {
     // Flatten + component-ize the sorted rows.
     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,
                 row,
                 style,
                 rowStyles,
-                stickyHeader,
-                stickyOffset: rowStickyOffset + stickyOffset,
                 columnSizes,
                 level,
                 getCount,
@@ -203,21 +189,9 @@ function GridTable(props) {
         const filteredRows = filterRows(api, columns, maybeSorted, filter);
         visitRows(filteredRows, 0, true);
         return [headerRows, visibleDataRows, totalsRows, expandableHeaderRows, filteredRowIds];
-    }, [
-        as,
-        api,
-        filter,
-        maybeSorted,
-        columns,
-        style,
-        rowStyles,
-        sortOn,
-        stickyHeader,
-        stickyOffset,
-        columnSizes,
-        collapsedIds,
-        getCount,
-    ]);
+    }, [as, api, filter, maybeSorted, columns, style, rowStyles, sortOn, columnSizes, collapsedIds, getCount]);
+    // Once our header rows are created we can organize them in expected order.
+    const tableHeadRows = totalsRows.concat(expandableHeaderRows).concat(headerRows);
     let tooManyClientSideRows = false;
     if (filterMaxRows && visibleDataRows.length > filterMaxRows) {
         tooManyClientSideRows = true;
@@ -252,7 +226,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, expandableHeaderRows, 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, visibleDataRows, firstRowMessage, stickyHeader, xss, virtuosoRef, tableHeadRows, stickyOffset)] }), void 0) }), void 0));
 }
 exports.GridTable = GridTable;
 // Determine which HTML element to use to build the GridTable
@@ -262,42 +236,38 @@ const renders = {
     virtual: renderVirtual,
 };
 /** Renders table using divs with flexbox rows, which is the default render */
-function renderDiv(style, id, columns, headerRows, totalsRows, expandableHeaderRows, visibleDataRows, firstRowMessage, _stickyHeader, xss, _virtuosoRef) {
+function renderDiv(style, id, columns, visibleDataRows, firstRowMessage, stickyHeader, xss, _virtuosoRef, tableHeadRows, stickyOffset) {
     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.
             // In cases where we have sticky columns on a very wide table, then the container which the columns "stick" to (which is the table),
             // needs to be as wide as the table's content, or else we lose the "stickiness" once scrolling past width of the table's container.
             ...Css_1.Css.mw("fit-content").$,
-            /*
-              Using (n + 3) 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+${headerRows.length + totalsRows.length + 2}) > *`, style.betweenRowsCss).$
-                : {}),
-            ...(style.firstNonHeaderRowCss ? Css_1.Css.addIn(`& > div:nth-of-type(2) > *`, style.firstNonHeaderRowCss).$ : {}),
-            ...(style.lastRowCss && Css_1.Css.addIn("& > div:last-of-type", style.lastRowCss).$),
-            ...(style.firstRowCss && Css_1.Css.addIn("& > div:first-of-type", style.firstRowCss).$),
             ...style.rootCss,
             ...(style.minWidthPx ? Css_1.Css.mwPx(style.minWidthPx).$ : {}),
             ...xss,
-        }, "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));
+        }, "data-testid": id }, { children: [(0, jsx_runtime_1.jsx)("div", Object.assign({ css: {
+                    ...(style.firstRowCss && Css_1.Css.addIn("& > div:first-of-type", style.firstRowCss).$),
+                    ...Css_1.Css.if(stickyHeader).sticky.topPx(stickyOffset).z(utils_1.zIndices.stickyHeader).$,
+                } }, { children: tableHeadRows.map(([, node]) => node) }), void 0), (0, jsx_runtime_1.jsxs)("div", Object.assign({ css: {
+                    ...(style.betweenRowsCss ? Css_1.Css.addIn(`& > div > *`, style.betweenRowsCss).$ : {}),
+                    ...(style.firstNonHeaderRowCss ? Css_1.Css.addIn(`& > div:first-of-type > *`, style.firstNonHeaderRowCss).$ : {}),
+                    ...(style.lastRowCss && Css_1.Css.addIn("& > div:last-of-type", style.lastRowCss).$),
+                } }, { children: [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)] }), void 0));
 }
 /** Renders as a table, primarily/solely for good print support. */
-function renderTable(style, id, columns, headerRows, totalsRows, expandableHeaderRows, visibleDataRows, firstRowMessage, _stickyHeader, xss, _virtuosoRef) {
+function renderTable(style, id, columns, visibleDataRows, firstRowMessage, stickyHeader, xss, _virtuosoRef, tableHeadRows, stickyOffset) {
     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 || {})
                 // removes border between header and second row
                 .addIn("& > tbody > tr:first-of-type > *", style.firstNonHeaderRowCss || {}).$,
             ...Css_1.Css.addIn("& > tbody > tr:last-of-type", style.lastRowCss).$,
-            ...Css_1.Css.addIn("& > tbody > tr:first-of-type", style.firstRowCss).$,
+            ...Css_1.Css.addIn("& > thead > tr:first-of-type", style.firstRowCss).$,
             ...style.rootCss,
             ...(style.minWidthPx ? Css_1.Css.mwPx(style.minWidthPx).$ : {}),
             ...xss,
-        }, "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));
+        }, "data-testid": id }, { children: [(0, jsx_runtime_1.jsx)("thead", Object.assign({ css: Css_1.Css.if(stickyHeader).sticky.topPx(stickyOffset).z(utils_1.zIndices.stickyHeader).$ }, { children: tableHeadRows.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.
@@ -319,7 +289,7 @@ function renderTable(style, id, columns, headerRows, totalsRows, expandableHeade
  * [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, expandableHeaderRows, visibleDataRows, firstRowMessage, stickyHeader, xss, virtuosoRef) {
+function renderVirtual(style, id, columns, visibleDataRows, firstRowMessage, stickyHeader, xss, virtuosoRef, tableHeadRows, _stickyOffset) {
     // eslint-disable-next-line react-hooks/rules-of-hooks
     const { footerStyle, listStyle } = (0, react_1.useMemo)(() => {
         var _a;
@@ -333,28 +303,13 @@ function renderVirtual(style, id, columns, headerRows, totalsRows, expandableHea
             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 + 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) {
-                return totalsRows[index][1];
+        topItemCount: (stickyHeader ? tableHeadRows.length : 0) + (firstRowMessage ? 1 : 0), itemContent: (index) => {
+            // Since we have 2 arrays of rows: `tableHeadRows`, and `filteredRow` we must determine which one to render.
+            if (index < tableHeadRows.length) {
+                return tableHeadRows[index][1];
             }
             // 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];
-            }
-            // Reset index
-            index -= headerRows.length;
+            index -= tableHeadRows.length;
             // Show firstRowMessage as the first `filteredRow`
             if (firstRowMessage) {
                 if (index === 0) {
@@ -366,11 +321,7 @@ function renderVirtual(style, id, columns, headerRows, totalsRows, expandableHea
             }
             // Lastly render `filteredRow`
             return visibleDataRows[index][1];
-        }, totalCount: headerRows.length +
-            totalsRows.length +
-            expandableHeaderRows.length +
-            (firstRowMessage ? 1 : 0) +
-            visibleDataRows.length }, void 0));
+        }, totalCount: tableHeadRows.length + (firstRowMessage ? 1 : 0) + visibleDataRows.length }, void 0));
 }
 /**
  * A table might render two of these components to represent two virtual lists.

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

@@ -9,8 +9,6 @@ interface RowProps<R extends Kinded> {
     row: GridDataRow<R>;
     style: GridStyle;
     rowStyles: RowStyles<R> | undefined;
-    stickyHeader: boolean;
-    stickyOffset: number;
     sortOn: SortOn;
     columnSizes: string[];
     level: number;

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

@@ -33,7 +33,7 @@ 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, hasExpandableHeader, ...others } = props;
+    const { as, columns, row, style, rowStyles, 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]);
@@ -57,10 +57,6 @@ function RowImpl(props) {
         // Apply `cursorPointer` to the row if it has a link or `onClick` value.
         ...(((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
-        ...(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.$,

package/package.json

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