@homebound/beam 2.80.3 → 2.80.7

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

@@ -44,7 +44,7 @@ export interface NestedCardsStyle {
     /** Space between each card. */
     spacerPx: number;
     /** Width of the first and last "hidden" columns used to align nested columns. */
-    firstLastColumnWidth?: number;
+    firstLastColumnWidth: number;
     /**
      * Per-kind styling for nested cards (see `cardStyle` if you only need a flat list of cards).
      *
@@ -182,7 +182,7 @@ export declare function GridTable<R extends Kinded, S = {}, X extends Only<GridT
  * When we're as=virtual, we change our default + enforce only fixed-sized units (% and px)
  */
 export declare function calcVirtualGridColumns(columns: GridColumn<any>[], firstLastColumnWidth: number | undefined): string;
-export declare function calcDivGridColumns(columns: GridColumn<any>[], firstLastCardWidth: number | undefined): string;
+export declare function calcDivGridColumns(columns: GridColumn<any>[], firstLastColumnWidth: number | undefined): string;
 /**
  * Given an ADT of type T, performs a look up and returns the type of kind K.
  *

package/dist/components/Table/GridTable.js

@@ -213,16 +213,15 @@ const renders = {
     virtual: renderVirtual,
 };
 /** Renders as a CSS Grid, which is the default / most well-supported rendered. */
-function renderCssGrid(style, id, columns, headerRows, filteredRows, firstRowMessage, stickyHeader, firstLastCardWidth, xss, virtuosoRef) {
+function renderCssGrid(style, id, columns, headerRows, filteredRows, firstRowMessage, stickyHeader, firstLastColumnWidth, xss, virtuosoRef) {
     return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ css: {
-            ...Css_1.Css.dg.gtc(calcDivGridColumns(columns, firstLastCardWidth)).$,
-            ...Css_1.Css
-                // Apply the between-row styling with `div + div > *` so that we don't have to have conditional
-                // `if !lastRow add border` CSS applied via JS that would mean the row can't be React.memo'd.
-                // The `div + div` is also the "owl operator", i.e. don't apply to the 1st row.
-                .addIn("& > div + div > *", style.betweenRowsCss || {})
-                // removes border between header and second row
-                .addIn("& > div:nth-of-type(2) > *", style.firstNonHeaderRowCss || {}).$,
+            ...Css_1.Css.dg.gtc(calcDivGridColumns(columns, firstLastColumnWidth)).$,
+            // Apply the between-row styling with `div + div > *` so that we don't have to have conditional
+            // `if !lastRow add border` CSS applied via JS that would mean the row can't be React.memo'd.
+            // The `div + div` is also the "owl operator", i.e. don't apply to the 1st row.
+            ...(style.betweenRowsCss ? Css_1.Css.addIn("& > div + div > *", style.betweenRowsCss).$ : {}),
+            // removes border between header and second row
+            ...(style.firstNonHeaderRowCss ? Css_1.Css.addIn("& > div:nth-of-type(2) > *", style.firstNonHeaderRowCss).$ : {}),
             ...style.rootCss,
             ...xss,
         }, "data-testid": id }, { children: [headerRows.map(([, node]) => node), firstRowMessage && ((0, jsx_runtime_1.jsx)("div", Object.assign({ css: Css_1.Css.add("gridColumn", `${columns.length} span`).$ }, { children: (0, jsx_runtime_1.jsx)("div", Object.assign({ css: { ...style.firstRowMessageCss } }, { children: firstRowMessage }), void 0) }), void 0)), filteredRows.map(([, node]) => node)] }), void 0));
@@ -368,7 +367,7 @@ function calcVirtualGridColumns(columns, firstLastColumnWidth) {
     return maybeAddCardColumns(sizes, firstLastColumnWidth);
 }
 exports.calcVirtualGridColumns = calcVirtualGridColumns;
-function calcDivGridColumns(columns, firstLastCardWidth) {
+function calcDivGridColumns(columns, firstLastColumnWidth) {
     const sizes = columns.map(({ w }) => {
         if (typeof w === "undefined") {
             // Hrm, I waffle between 'auto' or '1fr' being the better default here...
@@ -383,12 +382,12 @@ function calcDivGridColumns(columns, firstLastCardWidth) {
             return `${w}fr`;
         }
     });
-    return maybeAddCardColumns(sizes, firstLastCardWidth);
+    return maybeAddCardColumns(sizes, firstLastColumnWidth);
 }
 exports.calcDivGridColumns = calcDivGridColumns;
 // If we're doing nested cards, we add extra 1st/last cells...
-function maybeAddCardColumns(sizes, firstLastCardWidth) {
-    return (!firstLastCardWidth ? sizes : [`${firstLastCardWidth}px`, ...sizes, `${firstLastCardWidth}px`]).join(" ");
+function maybeAddCardColumns(sizes, firstLastColumnWidth) {
+    return (!firstLastColumnWidth ? sizes : [`${firstLastColumnWidth}px`, ...sizes, `${firstLastColumnWidth}px`]).join(" ");
 }
 function getIndentationCss(style, rowStyle, columnIndex, maybeContent) {
     // Look for cell-specific indent or row-specific indent (row-specific is only one the first column)
@@ -425,7 +424,8 @@ function GridRow(props) {
     const Row = as === "table" ? "tr" : "div";
     const currentCard = openCards && openCards.length > 0 && openCards[openCards.length - 1];
     let currentColspan = 1;
-    const div = ((0, jsx_runtime_1.jsxs)(Row, Object.assign({ css: rowCss }, others, { children: [openCards && (0, nestedCards_1.maybeAddCardPadding)(openCards, "first"), columns.map((column, columnIndex) => {
+    const maybeStickyHeaderStyles = isHeader && stickyHeader ? Css_1.Css.sticky.top(stickyOffset).z1.$ : undefined;
+    const div = ((0, jsx_runtime_1.jsxs)(Row, Object.assign({ css: rowCss }, others, { children: [openCards && (0, nestedCards_1.maybeAddCardPadding)(openCards, "first", maybeStickyHeaderStyles), columns.map((column, columnIndex) => {
                 var _a;
                 // Decrement colspan count and skip if greater than 1.
                 if (currentColspan > 1) {
@@ -459,7 +459,7 @@ function GridRow(props) {
                     ...getIndentationCss(style, rowStyle, columnIndex, maybeContent),
                     // Then apply any header-specific override
                     ...(isHeader && style.headerCellCss),
-                    ...(isHeader && stickyHeader && Css_1.Css.sticky.top(stickyOffset).z1.$),
+                    ...maybeStickyHeaderStyles,
                     // If we're within a card, use its background color
                     ...(currentCard && Css_1.Css.bgColor(currentCard.bgColor).$),
                     // Add in colspan css if needed
@@ -475,7 +475,7 @@ function GridRow(props) {
                             ? rowClickRenderFn(as)
                             : defaultRenderFn(as);
                 return renderFn(columnIndex, cellCss, content, row, rowStyle);
-            }), openCards && (0, nestedCards_1.maybeAddCardPadding)(openCards, "final")] }), void 0));
+            }), openCards && (0, nestedCards_1.maybeAddCardPadding)(openCards, "final", maybeStickyHeaderStyles)] }), void 0));
     // Because of useToggleIds, this provider should basically never trigger a re-render, which is
     // good because we don't want the context to change and re-render every row just because some
     // other unrelated rows have collapsed/uncollapsed.

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

@@ -45,7 +45,7 @@ export declare function makeOpenOrCloseCard(openCards: NestedCardStyle[], kind:
  * For the first or last cell of actual content, wrap them in divs that re-create the
  * outer cards' padding + background.
  */
-export declare function maybeAddCardPadding(openCards: NestedCardStyle[], column: "first" | "final"): any;
+export declare function maybeAddCardPadding(openCards: NestedCardStyle[], column: "first" | "final", styles?: {}): any;
 /**
  * Create a spacer between rows of children.
  *

package/dist/components/Table/nestedCards.js

@@ -97,8 +97,8 @@ exports.makeOpenOrCloseCard = makeOpenOrCloseCard;
  * For the first or last cell of actual content, wrap them in divs that re-create the
  * outer cards' padding + background.
  */
-function maybeAddCardPadding(openCards, column) {
-    let div = (0, jsx_runtime_1.jsx)("div", {}, void 0);
+function maybeAddCardPadding(openCards, column, styles) {
+    let div = undefined;
     [...openCards].reverse().forEach((card) => {
         div = ((0, jsx_runtime_1.jsx)("div", Object.assign({ css: {
                 ...Css_1.Css.h100.bgColor(card.bgColor).if(!!card.bColor).bc(card.bColor).$,
@@ -106,7 +106,7 @@ function maybeAddCardPadding(openCards, column) {
                 ...(column === "final" && Css_1.Css.prPx(card.pxPx).if(!!card.bColor).br.$),
             } }, { children: div }), void 0));
     });
-    return div;
+    return ((0, jsx_runtime_1.jsx)("div", Object.assign({ "data-cardpadding": "true" }, (styles ? { css: styles } : {}), { children: div }), void 0));
 }
 exports.maybeAddCardPadding = maybeAddCardPadding;
 /**
@@ -142,7 +142,7 @@ function maybeCreateChromeRow(columns, filteredRows, chromeBuffer) {
         filteredRows.push([
             undefined,
             // We add 2 to account for our dedicated open/close columns
-            (0, jsx_runtime_1.jsx)("div", Object.assign({ css: Css_1.Css.gc(`span ${columns.length + 2}`).$ }, { children: chromeBuffer.map((c, i) => ((0, jsx_runtime_1.jsx)(react_1.Fragment, { children: c }, i))) }), void 0),
+            (0, jsx_runtime_1.jsx)("div", Object.assign({ css: Css_1.Css.gc(`span ${columns.length + 2}`).$, "data-chrome": "true" }, { children: chromeBuffer.map((c, i) => ((0, jsx_runtime_1.jsx)(react_1.Fragment, { children: c }, i))) }), void 0),
         ]);
         // clear the buffer
         chromeBuffer.splice(0, chromeBuffer.length);

package/dist/components/Tabs.d.ts

@@ -7,7 +7,6 @@ export interface Tab<V extends string = string> {
     icon?: IconKey;
     endAdornment?: ReactNode;
     disabled?: boolean;
-    render: () => ReactNode;
 }
 declare type TabsContentXss = Xss<Margin>;
 export interface TabsProps<V extends string, X> {
@@ -25,6 +24,18 @@ export interface RouteTab<V extends string = string> extends Omit<Tab<V>, "value
     href: V;
     path: string | string[];
 }
+export interface TabWithContent<V extends string = string> extends Omit<Tab<V>, "render"> {
+    render: () => ReactNode;
+}
+export interface RouteTabWithContent<V extends string = string> extends Omit<RouteTab<V>, "render"> {
+    render: () => ReactNode;
+}
+interface RequiredRenderTabs<V extends string, X> extends Omit<TabsProps<V, X>, "tabs"> {
+    tabs: TabWithContent<V>[];
+}
+interface RequiredRenderRouteTabs<V extends string, X> extends Omit<RouteTabsProps<V, X>, "tabs"> {
+    tabs: RouteTabWithContent<V>[];
+}
 /**
  * Provides a list of tabs and their content.
  *
@@ -34,8 +45,8 @@ export interface RouteTab<V extends string = string> extends Omit<Tab<V>, "value
  * If you want to tease apart Tabs from their TabContent, you can use the `Tab`
  * and `TabContent` components directly.
  */
-export declare function TabsWithContent<V extends string, X extends Only<TabsContentXss, X>>(props: TabsProps<V, X> | RouteTabsProps<V, X>): import("@emotion/react/jsx-runtime").JSX.Element;
-export declare function TabContent<V extends string>(props: Omit<TabsProps<V, {}>, "onChange"> | RouteTabsProps<V, {}>): import("@emotion/react/jsx-runtime").JSX.Element;
+export declare function TabsWithContent<V extends string, X extends Only<TabsContentXss, X>>(props: RequiredRenderTabs<V, X> | RequiredRenderRouteTabs<V, X>): import("@emotion/react/jsx-runtime").JSX.Element;
+export declare function TabContent<V extends string>(props: Omit<RequiredRenderTabs<V, {}>, "onChange"> | RequiredRenderRouteTabs<V, {}>): import("@emotion/react/jsx-runtime").JSX.Element;
 /** The top list of tabs. */
 export declare function Tabs<V extends string>(props: TabsProps<V, {}> | RouteTabsProps<V, {}>): import("@emotion/react/jsx-runtime").JSX.Element;
 export declare function getTabStyles(): {

package/dist/components/testData.d.ts

@@ -1,7 +1,7 @@
 import { ReactNode } from "react";
-import { Tab } from "./Tabs";
+import { TabWithContent } from "./Tabs";
 export declare type TabValue = "tab1" | "tab2" | "tab3" | "tab4";
-export declare const testTabs: Tab<TabValue>[];
+export declare const testTabs: TabWithContent<TabValue>[];
 export declare function TestTabContent({ content }: {
     content: ReactNode;
 }): import("@emotion/react/jsx-runtime").JSX.Element;

package/dist/inputs/CheckboxBase.js

@@ -8,12 +8,13 @@ const HelperText_1 = require("../components/HelperText");
 const Css_1 = require("../Css");
 const ErrorMessage_1 = require("./ErrorMessage");
 const utils_1 = require("../utils");
+const defaultTestId_1 = require("../utils/defaultTestId");
 function CheckboxBase(props) {
     const { ariaProps, description, isDisabled = false, isIndeterminate = false, isSelected, inputProps, label, errorMsg, helperText, } = props;
     const ref = (0, react_1.useRef)(null);
     const { isFocusVisible, focusProps } = (0, react_aria_1.useFocusRing)(ariaProps);
     const { hoverProps, isHovered } = (0, react_aria_1.useHover)({ isDisabled });
-    const tid = (0, utils_1.useTestIds)(props);
+    const tid = (0, utils_1.useTestIds)(props, (0, defaultTestId_1.defaultTestId)(label));
     const markIcon = isIndeterminate ? dashSmall : isSelected ? checkmarkSmall : "";
     return ((0, jsx_runtime_1.jsxs)("label", Object.assign({ css: Css_1.Css.df.cursorPointer.relative
             // Prevents accidental checkbox clicks due to label width being longer
@@ -22,7 +23,7 @@ function CheckboxBase(props) {
             .maxw((0, Css_1.px)(320))
             .if(description !== undefined)
             .maxw((0, Css_1.px)(344))
-            .if(isDisabled).cursorNotAllowed.$ }, { children: [(0, jsx_runtime_1.jsx)(react_aria_1.VisuallyHidden, { children: (0, jsx_runtime_1.jsx)("input", Object.assign({ ref: ref }, inputProps, focusProps), void 0) }, void 0), (0, jsx_runtime_1.jsx)("span", Object.assign({}, hoverProps, { css: {
+            .if(isDisabled).cursorNotAllowed.$ }, { children: [(0, jsx_runtime_1.jsx)(react_aria_1.VisuallyHidden, { children: (0, jsx_runtime_1.jsx)("input", Object.assign({ ref: ref }, inputProps, focusProps, tid), void 0) }, void 0), (0, jsx_runtime_1.jsx)("span", Object.assign({}, hoverProps, { css: {
                     ...baseStyles,
                     ...((isSelected || isIndeterminate) && filledBoxStyles),
                     ...((isSelected || isIndeterminate) && isHovered && filledBoxHoverStyles),

package/dist/utils/rtl.d.ts

@@ -13,9 +13,9 @@ interface RenderOpts {
 export declare function render(component: ReactElement, withoutBeamProvider: RenderOpts, ...otherWrappers: Wrapper[]): Promise<RenderResult & Record<string, HTMLElement & Function>>;
 export declare function render(component: ReactElement, ...otherWrappers: Wrapper[]): Promise<RenderResult & Record<string, HTMLElement & Function>>;
 export declare function cell(r: RenderResult, row: number, column: number): HTMLElement;
-export declare function cellOf(r: RenderResult, testId: string, row: number, column: number): HTMLElement;
+export declare function cellOf(r: RenderResult, tableTestId: string, rowNum: number, column: number): HTMLElement;
 export declare function cellAnd(r: RenderResult, row: number, column: number, testId: string): HTMLElement;
-export declare function row(r: RenderResult, row: number): HTMLElement;
-export declare function rowAnd(r: RenderResult, row: number, testId: string): HTMLElement;
+export declare function row(r: RenderResult, row: number, tableTestId?: string): HTMLElement;
+export declare function rowAnd(r: RenderResult, rowNum: number, testId: string): HTMLElement;
 /** RTL wrapper for Beam's SuperDrawer/Modal context. */
 export declare const withBeamRTL: Wrapper;

package/dist/utils/rtl.js

@@ -34,11 +34,12 @@ function render(component, wrapperOrOpts, ...otherWrappers) {
 }
 exports.render = render;
 function cell(r, row, column) {
-    return r.getByTestId("grid-table").childNodes[row].childNodes[column];
+    return cellOf(r, "grid-table", row, column);
 }
 exports.cell = cell;
-function cellOf(r, testId, row, column) {
-    return r.getByTestId(testId).childNodes[row].childNodes[column];
+function cellOf(r, tableTestId, rowNum, column) {
+    const nonPaddingColumns = Array.from(row(r, rowNum, tableTestId).childNodes).filter((node) => !("cardpadding" in node.dataset));
+    return nonPaddingColumns[column];
 }
 exports.cellOf = cellOf;
 function cellAnd(r, row, column, testId) {
@@ -46,12 +47,13 @@ function cellAnd(r, row, column, testId) {
         fail(`Element not found ${(0, react_1.prettyDOM)(cell(r, row, column))}`));
 }
 exports.cellAnd = cellAnd;
-function row(r, row) {
-    return r.getByTestId("grid-table").childNodes[row];
+function row(r, row, tableTestId = "grid-table") {
+    const nonChromeRows = Array.from(r.getByTestId(tableTestId).childNodes).filter((node) => !("chrome" in node.dataset));
+    return nonChromeRows[row];
 }
 exports.row = row;
-function rowAnd(r, row, testId) {
-    const e = r.getByTestId("grid-table").childNodes[row];
+function rowAnd(r, rowNum, testId) {
+    const e = row(r, rowNum);
     return e.querySelector(`[data-testid="${testId}"]`) || fail(`Element not found ${(0, react_1.prettyDOM)(e)}`);
 }
 exports.rowAnd = rowAnd;

package/package.json

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