@homebound/beam 2.212.3 → 2.213.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/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.213.0",
   "author": "Homebound",
   "license": "MIT",
   "main": "dist/index.js",