@homebound/beam 4.57.1 → 4.58.0

package/dist/index.cjs

@@ -7709,9 +7709,12 @@ function ExpandableHeader(props) {
       pointerEvents: "pen",
       ...applyStickyStyles ? {
         position: "sticky",
-        left: ["left_var", {
-          "--left": (0, import_runtime11.maybeCssVar)(__maybeInc3(`calc(var(${beamSideNavLayoutWidthVar}, 0px) + ${minStickyLeftOffset + 12}px)`))
-        }],
+        left: ["left_var sm_left_var", {
+          "--left": (0, import_runtime11.maybeCssVar)(__maybeInc3(`calc(var(${beamSideNavLayoutWidthVar}, 0px) + ${minStickyLeftOffset + 12}px)`)),
+          "--sm_left": (0, import_runtime11.maybeCssVar)(__maybeInc3(`calc(var(${beamSideNavLayoutWidthVar}, 0px) + 12px)`))
+        }]
+      } : {},
+      ...applyStickyStyles ? {
         paddingRight: "pr2",
         backgroundColor: ["bgColor_var", {
           "--backgroundColor": "var(--b-surface)"
@@ -11277,27 +11280,22 @@ function RowImpl(props) {
     const renderedContent = withRowControls(content2, controlNodes, alignment, contentRowLink);
     ensureClientSideSortValueIsSortable(sortOn, isHeader || isTotals || isExpandableHeader || isGroupHeader, column2, columnIndex, maybeContent);
     const maybeSticky = (isGridCellContent(maybeContent) && maybeContent.sticky || column2.sticky) ?? void 0;
+    const stickyLeft = maybeSticky === "left" ? columnIndex === 0 ? `var(${beamSideNavLayoutWidthVar}, 0px)` : `calc(var(${beamSideNavLayoutWidthVar}, 0px) + (${columnSizes.slice(0, columnIndex).join(" + ")}))` : "auto";
+    const stickyRight = maybeSticky === "right" ? columnIndex + 1 === columnSizes.length ? `var(${beamRightPaneWidthVar}, 0px)` : `calc(var(${beamRightPaneWidthVar}, 0px) + (${columnSizes.slice(columnIndex + 1 - columnSizes.length).join(" + ")}))` : "auto";
     const maybeStickyColumnStyles = maybeSticky && columnSizes ? {
-      ...{
-        position: "sticky",
-        zIndex: ["z_var", {
-          "--zIndex": (0, import_runtime24.maybeCssVar)(zIndices.tableStickyColumn)
-        }],
-        backgroundColor: ["bgColor_var", {
-          "--backgroundColor": "var(--b-surface)"
-        }]
-      },
-      ...maybeSticky === "left" ? {
-        left: ["left_var", {
-          "--left": (0, import_runtime24.maybeCssVar)(__maybeInc9(columnIndex === 0 ? `var(${beamSideNavLayoutWidthVar}, 0px)` : `calc(var(${beamSideNavLayoutWidthVar}, 0px) + (${columnSizes.slice(0, columnIndex).join(" + ")}))`))
-        }]
-      } : {},
-      // Offset by the open right pane so sticky-right cells pin to the clear edge, not under it (0 when closed).
-      ...maybeSticky === "right" ? {
-        right: ["right_var", {
-          "--right": (0, import_runtime24.maybeCssVar)(__maybeInc9(columnIndex + 1 === columnSizes.length ? `var(${beamRightPaneWidthVar}, 0px)` : `calc(var(${beamRightPaneWidthVar}, 0px) + (${columnSizes.slice(columnIndex + 1 - columnSizes.length).join(" + ")}))`))
-        }]
-      } : {}
+      position: "sticky sm_relative",
+      zIndex: ["z_var", {
+        "--zIndex": (0, import_runtime24.maybeCssVar)(zIndices.tableStickyColumn)
+      }],
+      backgroundColor: ["bgColor_var", {
+        "--backgroundColor": "var(--b-surface)"
+      }],
+      left: ["left_var sm_l_auto", {
+        "--left": (0, import_runtime24.maybeCssVar)(__maybeInc9(stickyLeft))
+      }],
+      right: ["right_var sm_r_auto", {
+        "--right": (0, import_runtime24.maybeCssVar)(__maybeInc9(stickyRight))
+      }]
     } : {};
     minStickyLeftOffset += maybeSticky === "left" ? parseInt(columnSizes[columnIndex].replace("px", ""), 10) : 0;
     const cellId = `${row.kind}_${row.id}_${column2.id}`;
@@ -15864,7 +15862,10 @@ function BlueprintAiLogo(props) {
 
 // src/components/AiPanel.tsx
 var import_runtime49 = require("@homebound/truss/runtime");
-var import_jsx_runtime61 = require("react/jsx-runtime");
+var import_jsx_runtime61 = (
+  // Capped to the visible column so a page widened by an open right pane doesn't stretch it
+  require("react/jsx-runtime")
+);
 function AiPanel(props) {
   const {
     rounded = false,
@@ -15875,8 +15876,10 @@ function AiPanel(props) {
   const tid = useTestIds(others, "aiPanel");
   return /* @__PURE__ */ (0, import_jsx_runtime61.jsx)("div", { ...(0, import_runtime49.trussProps)({
     ...{
-      width: "w100",
       backgroundImage: "aiBackground",
+      width: "w_min_100_calc_calc_var_beam_layout_viewport_width_100vw_var_beam_side_nav_layout_width_0px_2_var_beam_layout_content_padding_x_0px",
+      left: "l_calc_var_beam_side_nav_layout_width_0px_var_beam_layout_content_padding_x_0px",
+      position: "sticky",
       ...rounded ? {
         borderRadius: "br12"
       } : {}
@@ -15896,34 +15899,39 @@ function AiCard(props) {
     gapCss
   } = aiCardChrome[size];
   const tid = useTestIds(others, "aiCard");
-  return /* @__PURE__ */ (0, import_jsx_runtime61.jsxs)("div", { ...(0, import_runtime49.trussProps)({
-    ...{
-      display: "df",
-      flexDirection: "fdc",
-      alignItems: "aifs",
-      width: "w100",
-      ...!fullWidth ? {
-        width: "wfc",
-        maxWidth: "maxw100",
-        marginLeft: "mla",
-        marginRight: "mra"
-      } : {}
-    },
-    ...gapCss
-  }), ...tid.column, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(BlueprintAiLogo, { height: logoHeight }),
-    /* @__PURE__ */ (0, import_jsx_runtime61.jsx)("div", { ...(0, import_runtime49.trussProps)({
-      display: "df",
-      flexDirection: "fdc",
-      width: "w100",
-      minWidth: "mw0",
-      borderRadius: "br12",
-      backgroundColor: ["bgColor_var", {
-        "--backgroundColor": "var(--b-surface)"
-      }],
-      boxShadow: "bshBasic"
-    }), ...others, ...tid.card, children })
-  ] });
+  return (
+    // Same cap as `AiPanel`, so a wide page does not stretch the card column
+    /* @__PURE__ */ (0, import_jsx_runtime61.jsxs)("div", { ...(0, import_runtime49.trussProps)({
+      ...{
+        display: "df",
+        flexDirection: "fdc",
+        alignItems: "aifs",
+        width: "w_min_100_calc_calc_var_beam_layout_viewport_width_100vw_var_beam_side_nav_layout_width_0px_2_var_beam_layout_content_padding_x_0px",
+        left: "l_calc_var_beam_side_nav_layout_width_0px_var_beam_layout_content_padding_x_0px",
+        position: "sticky",
+        ...!fullWidth ? {
+          width: "wfc",
+          maxWidth: "maxw100",
+          marginLeft: "mla",
+          marginRight: "mra"
+        } : {}
+      },
+      ...gapCss
+    }), ...tid.column, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(BlueprintAiLogo, { height: logoHeight }),
+      /* @__PURE__ */ (0, import_jsx_runtime61.jsx)("div", { ...(0, import_runtime49.trussProps)({
+        display: "df",
+        flexDirection: "fdc",
+        width: "w100",
+        minWidth: "mw0",
+        borderRadius: "br12",
+        backgroundColor: ["bgColor_var", {
+          "--backgroundColor": "var(--b-surface)"
+        }],
+        boxShadow: "bshBasic"
+      }), ...others, ...tid.card, children })
+    ] })
+  );
 }
 var aiBackgroundPaddingCss = {
   lg: {