@homebound/beam 4.47.4 → 4.48.0

package/dist/index.d.cts

@@ -6360,8 +6360,11 @@ type GridStyleDef = {
     cellHighlight?: boolean;
     /** Applies a white background to the whole table, including header and group rows. */
     allWhite?: boolean;
-    /** Whether to apply a border around the whole table */
-    bordered?: boolean;
+    /**
+     * Which outer table borders to draw. `"all"` borders the whole table, `"top"` only the first head row.
+     * `true` / `false` are shorthand for `"all"` / `"none"`. Defaults to `"none"`.
+     */
+    bordered?: boolean | "all" | "top" | "none";
     /** Whether to show a hover effect on clickable rows (those with rowLink/onClick). Defaults to true */
     rowHover?: boolean;
     /** Vertical alignment of body cell content (not headers). Defaults to `top` for flexible rows and `center` for fixed rows. */

package/dist/index.d.ts

@@ -6360,8 +6360,11 @@ type GridStyleDef = {
     cellHighlight?: boolean;
     /** Applies a white background to the whole table, including header and group rows. */
     allWhite?: boolean;
-    /** Whether to apply a border around the whole table */
-    bordered?: boolean;
+    /**
+     * Which outer table borders to draw. `"all"` borders the whole table, `"top"` only the first head row.
+     * `true` / `false` are shorthand for `"all"` / `"none"`. Defaults to `"none"`.
+     */
+    bordered?: boolean | "all" | "top" | "none";
     /** Whether to show a hover effect on clickable rows (those with rowLink/onClick). Defaults to true */
     rowHover?: boolean;
     /** Vertical alignment of body cell content (not headers). Defaults to `top` for flexible rows and `center` for fixed rows. */

package/dist/index.js

@@ -6445,6 +6445,8 @@ function memoizedTableStyles() {
     } = props;
     const key = safeKeys(props).sort().map((k) => `${k}_${props[k]}`).join("|");
     if (!cache[key]) {
+      const borderAll = bordered === true || bordered === "all";
+      const borderTop = borderAll || bordered === "top";
       const alignItems = vAlign === "center" ? "center" : vAlign === "top" ? "flex-start" : "flex-end";
       const groupedLevels = {
         0: {
@@ -6503,7 +6505,7 @@ function memoizedTableStyles() {
               "--backgroundColor": "var(--b-surface)"
             }]
           },
-          ...bordered && {
+          ...borderAll && {
             borderLeftStyle: "bls_solid",
             borderLeftWidth: "blw_1px",
             borderRightStyle: "brs_solid",
@@ -6642,14 +6644,14 @@ function memoizedTableStyles() {
             } : {}
           }
         },
-        firstCellCss: bordered ? {
+        firstCellCss: borderAll ? {
           borderLeftStyle: "bls_solid",
           borderLeftWidth: "blw_1px",
           borderColor: ["bc_var", {
             "--borderColor": "var(--b-surface-separator)"
           }]
         } : void 0,
-        lastCellCss: bordered ? {
+        lastCellCss: borderAll ? {
           borderRightStyle: "brs_solid",
           borderRightWidth: "brw_1px",
           borderColor: ["bc_var", {
@@ -6661,7 +6663,7 @@ function memoizedTableStyles() {
             "--borderColor": "var(--b-surface-separator)"
           }]
         },
-        firstRowCellCss: bordered ? {
+        firstRowCellCss: borderTop ? {
           borderTopStyle: "bts_solid",
           borderTopWidth: "btw_1px",
           borderColor: ["bc_var", {
@@ -6676,8 +6678,8 @@ function memoizedTableStyles() {
           borderTopRightRadius: "btrr_8px"
         } : void 0,
         // Keep `betweenRowsCss` on all body rows, but on the final body row
-        // remove the inset shadow and, when bordered, replace it with a true bottom border.
-        lastRowCellCss: bordered ? {
+        // remove the inset shadow and, when fully bordered, replace it with a true bottom border.
+        lastRowCellCss: borderAll ? {
           boxShadow: "bsh0",
           borderBottomStyle: "bbs_solid",
           borderBottomWidth: "bbw_1px",
@@ -6687,11 +6689,11 @@ function memoizedTableStyles() {
         } : {
           boxShadow: "bsh0"
         },
-        // Only apply bottom corner radii to the final body-row cells when using `bordered`.
-        lastRowFirstCellCss: bordered ? {
+        // Only apply bottom corner radii to the final body-row cells when fully bordered.
+        lastRowFirstCellCss: borderAll ? {
           borderBottomLeftRadius: "bblr_8px"
         } : void 0,
-        lastRowLastCellCss: bordered ? {
+        lastRowLastCellCss: borderAll ? {
           borderBottomRightRadius: "bbrr_8px"
         } : void 0,
         presentationSettings: {
@@ -27886,6 +27888,7 @@ function GridTableLayoutComponent(props) {
   const rightPane = resolveWithRightPaneOptions(withRightPane);
   const tid = useTestIds(props);
   const host = useGridTableLayoutHost();
+  const insetHandled = useContentInsetHandled();
   const includeColumnGutters = host.kind === "document-scroll" || host.kind === "modal";
   const columns = tableProps.columns;
   const hasHideableColumns = useMemo49(() => {
@@ -27944,7 +27947,7 @@ function GridTableLayoutComponent(props) {
     }
   );
   const cardAs = view === "card" ? "card" : void 0;
-  const tableStyle = useMemo49(() => getDefaultStyle(tableProps.style), [tableProps.style]);
+  const tableStyle = useMemo49(() => getDefaultStyle(tableProps.style, insetHandled), [tableProps.style, insetHandled]);
   const tableBody = /* @__PURE__ */ jsx204(Fragment44, { children: isGridTableProps(tableProps) ? /* @__PURE__ */ jsx204(
     GridTable,
     {
@@ -27987,9 +27990,9 @@ function GridTableLayoutComponent(props) {
   );
 }
 var GridTableLayout = React17.memo(GridTableLayoutComponent);
-function getDefaultStyle(style) {
+function getDefaultStyle(style, insetHandled) {
   if (style !== void 0 && !isGridStyleDef(style)) return style;
-  return { allWhite: true, ...style };
+  return { allWhite: true, ...!insetHandled && { bordered: "top" }, ...style };
 }
 function validateColumns(columns) {
   for (const col of columns) {