@homebound/beam 3.85.0 → 3.85.1

package/README.md

@@ -10,6 +10,8 @@ _To see the latest designs, check out the [Figma](https://www.figma.com/file/aWU
 
 Standard **app shell** composition (global nav + body, sidebar + content, page header + body) is implemented as **`NavbarLayout`**, **`SideNavLayout`**, and **`PageHeaderLayout`** from this package. Source lives in **`src/layouts/`** (sibling of `src/components/`). Full setup and composition rules: [`docs/layouts.md`](docs/layouts.md) — also published in the npm package at `node_modules/@homebound/beam/docs/layouts.md`.
 
+Component file structure (imports, props types, implementation, module helpers): [`docs/components.md`](docs/components.md).
+
 ## Getting Started
 
 ```bash

package/dist/Css.json

@@ -913,7 +913,7 @@
     "br24": {"kind":"static","defs":{"borderRadius":"24px"}},
     "brt4": {"kind":"static","defs":{"borderTopRightRadius":"4px","borderTopLeftRadius":"4px"}},
     "brb4": {"kind":"static","defs":{"borderBottomRightRadius":"4px","borderBottomLeftRadius":"4px"}},
-    "layoutContainer": {"kind":"static","defs":{"width":"min(100%, calc(var(--beam-layout-viewport-width, 100vw) - var(--beam-side-nav-layout-width, 0px)))","left":"var(--beam-side-nav-layout-width, 0px)","position":"sticky"}},
+    "layoutContainer": {"kind":"static","defs":{"width":"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":"calc(var(--beam-side-nav-layout-width, 0px) + var(--beam-layout-content-padding-x, 0px))","position":"sticky"}},
     "transition": {"kind":"static","defs":{"transition":"background-color 200ms cubic-bezier(0.4, 0, 0.2, 1), border-color 200ms cubic-bezier(0.4, 0, 0.2, 1), box-shadow 200ms cubic-bezier(0.4, 0, 0.2, 1), left 200ms cubic-bezier(0.4, 0, 0.2, 1), right 200ms cubic-bezier(0.4, 0, 0.2, 1), margin 200ms cubic-bezier(0.4, 0, 0.2, 1), width 200ms cubic-bezier(0.4, 0, 0.2, 1), opacity 200ms cubic-bezier(0.4, 0, 0.2, 1)"}},
     "transitionWidth": {"kind":"static","defs":{"transition":"width 200ms cubic-bezier(0.4, 0, 0.2, 1)"}},
     "transitionOpacity": {"kind":"static","defs":{"transition":"opacity 200ms cubic-bezier(0.4, 0, 0.2, 1)"}},

package/dist/index.cjs

@@ -213,6 +213,7 @@ __export(index_exports, {
   bannerAndNavbarChromeTop: () => bannerAndNavbarChromeTop,
   beamEnvironmentBannerLayoutHeightVar: () => beamEnvironmentBannerLayoutHeightVar,
   beamFloatingRightOffsetVar: () => beamFloatingRightOffsetVar,
+  beamLayoutContentPaddingXVar: () => beamLayoutContentPaddingXVar,
   beamLayoutViewportHeightVar: () => beamLayoutViewportHeightVar,
   beamLayoutViewportWidthVar: () => beamLayoutViewportWidthVar,
   beamNavbarLayoutHeightVar: () => beamNavbarLayoutHeightVar,
@@ -269,6 +270,8 @@ __export(index_exports, {
   defaultTestId: () => defaultTestId,
   documentScrollChromeLeft: () => documentScrollChromeLeft,
   documentScrollChromeWidth: () => documentScrollChromeWidth,
+  documentScrollContentLeft: () => documentScrollContentLeft,
+  documentScrollContentWidth: () => documentScrollContentWidth,
   documentScrollRightPaneHeight: () => documentScrollRightPaneHeight,
   documentScrollRightPaneWidth: () => documentScrollRightPaneWidth,
   dragHandleColumn: () => dragHandleColumn,
@@ -4274,12 +4277,15 @@ var CssBuilder = class _CssBuilder {
     return this.add("fontFamily", value);
   }
   // layoutContainer
-  /** Sets `width: "min(100%, calc(var(--beam-layout-viewport-width, 100vw) - var(--beam-side-nav-layout-width, 0px)))"; left: "var(--beam-side-nav-layout-width, 0px)"; position: "sticky"`. */
+  /** Sets `width: "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: "calc(var(--beam-side-nav-layout-width, 0px) + var(--beam-layout-content-padding-x, 0px))"; position: "sticky"`. */
   get layoutContainer() {
     return this.add(
       "width",
-      "min(100%, calc(var(--beam-layout-viewport-width, 100vw) - var(--beam-side-nav-layout-width, 0px)))"
-    ).add("left", "var(--beam-side-nav-layout-width, 0px)").add("position", "sticky");
+      "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)))"
+    ).add("left", "calc(var(--beam-side-nav-layout-width, 0px) + var(--beam-layout-content-padding-x, 0px))").add(
+      "position",
+      "sticky"
+    );
   }
   // animation
   /** Sets `transition: "background-color 200ms cubic-bezier(0.4, 0, 0.2, 1), border-color 200ms cubic-bezier(0.4, 0, 0.2, 1), box-shadow 200ms cubic-bezier(0.4, 0, 0.2, 1), left 200ms cubic-bezier(0.4, 0, 0.2, 1), right 200ms cubic-bezier(0.4, 0, 0.2, 1), margin 200ms cubic-bezier(0.4, 0, 0.2, 1), width 200ms cubic-bezier(0.4, 0, 0.2, 1), opacity 200ms cubic-bezier(0.4, 0, 0.2, 1)"`. */
@@ -6604,6 +6610,7 @@ var beamPageHeaderLayoutHeightVar = "--beam-page-header-layout-height";
 var beamLayoutViewportWidthVar = "--beam-layout-viewport-width";
 var beamLayoutViewportHeightVar = "--beam-layout-viewport-height";
 var beamSideNavLayoutWidthVar = "--beam-side-nav-layout-width";
+var beamLayoutContentPaddingXVar = "--beam-layout-content-padding-x";
 var beamTableActionsHeightVar = "--beam-table-actions-height";
 var beamRightPaneWidthVar = "--beam-right-pane-width";
 var beamFloatingRightOffsetVar = "--beam-floating-right-offset";
@@ -6614,6 +6621,12 @@ function documentScrollChromeLeft() {
 function documentScrollChromeWidth() {
   return `calc(var(${beamLayoutViewportWidthVar}, 100vw) - var(${beamSideNavLayoutWidthVar}, 0px))`;
 }
+function documentScrollContentLeft() {
+  return `calc(${documentScrollChromeLeft()} + var(${beamLayoutContentPaddingXVar}, 0px))`;
+}
+function documentScrollContentWidth() {
+  return `calc(${documentScrollChromeWidth()} - 2 * var(${beamLayoutContentPaddingXVar}, 0px))`;
+}
 function documentScrollRightPaneHeight() {
   return `calc(var(${beamLayoutViewportHeightVar}, 100vh) - ${stickyTableHeaderOffset()})`;
 }
@@ -7040,7 +7053,8 @@ function getTableRefWidthStyles(isVirtual, inDocumentScrollLayout = false) {
     return {
       width: ["w_var", {
         "--width": (0, import_runtime12.maybeCssVar)(__maybeInc4(`min(100%, ${documentScrollChromeWidth()})`))
-      }]
+      }],
+      minWidth: "mw0"
     };
   }
   if (isVirtual) {
@@ -16729,7 +16743,7 @@ function resolveTableContentWidth(tableWidth, columnSizes, minWidthPx = 0) {
   }
   const sum = sumColumnSizesPx(columnSizes, tableWidth);
   if (sum === null) return void 0;
-  return Math.max(tableWidth, sum, minWidthPx);
+  return Math.max(minWidthPx, sum);
 }
 function calcColumnSizes(columns, tableWidth, tableMinWidthPx = 0, expandedColumnIds, resizedWidths) {
   const {
@@ -17913,6 +17927,9 @@ function GridTable(props) {
     columnGutter = false
   } = props;
   const inDocumentScrollLayout = useDocumentScrollLayout();
+  const tid = useTestIds({
+    "data-testid": id
+  }, "gridTable");
   const columnsWithIds = (0, import_react88.useMemo)(() => {
     const columns2 = columnGutter && inDocumentScrollLayout ? withColumnGutters(_columns) : _columns;
     return assignDefaultColumnIds(columns2);
@@ -18173,7 +18190,7 @@ function GridTable(props) {
     return /* @__PURE__ */ (0, import_jsx_runtime97.jsx)(GridTableEmptyState, { ...emptyState });
   }
   return /* @__PURE__ */ (0, import_jsx_runtime97.jsx)(TableStateContext.Provider, { value: rowStateContext, children: /* @__PURE__ */ (0, import_jsx_runtime97.jsxs)(PresentationProvider, { fieldProps, wrap: style?.presentationSettings?.wrap, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime97.jsx)("div", { ref: resizeRef, ...(0, import_runtime71.trussProps)(getTableRefWidthStyles(as === "virtual", inDocumentScrollLayout)) }),
+    /* @__PURE__ */ (0, import_jsx_runtime97.jsx)("div", { ref: resizeRef, ...(0, import_runtime71.trussProps)(getTableRefWidthStyles(as === "virtual", inDocumentScrollLayout)), ...tid.probe }),
     as === "card" ? /* @__PURE__ */ (0, import_jsx_runtime97.jsx)(CardView, { cardRows: visibleDataRows, id, virtuosoRangeRef, infiniteScroll, persistScrollPosition }) : _as === "virtual" ? /* @__PURE__ */ (0, import_jsx_runtime97.jsx)(VirtualGridTableView, { style: tableStyle, id, columns, visibleDataRows, keptSelectedRows, pinnedRows, firstRowMessage, stickyHeader, xss, virtuosoRef, virtuosoRangeRef, tableHeadRows, stickyOffset, infiniteScroll, persistScrollPosition }) : renders[_as](tableStyle, id, columns, visibleDataRows, keptSelectedRows, pinnedRows, firstRowMessage, stickyHeader, xss, virtuosoRef, virtuosoRangeRef, tableHeadRows, stickyOffset, infiniteScroll, tableContainerRef, persistScrollPosition)
   ] }) });
 }
@@ -24985,9 +25002,10 @@ function ContentHeader(props) {
       display: "df",
       flexDirection: "fdc",
       gap: "gap_12px",
-      width: "w_min_100_calc_var_beam_layout_viewport_width_100vw_var_beam_side_nav_layout_width_0px",
-      left: "l_var_beam_side_nav_layout_width_0px",
+      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",
+      minWidth: "mw0",
       backgroundColor: ["bgColor_var", {
         "--backgroundColor": "var(--b-surface)"
       }]
@@ -27338,9 +27356,8 @@ function SideNavLayoutContent(props) {
 // src/layouts/CenteredLayout/CenteredLayout.tsx
 var import_runtime139 = require("@homebound/truss/runtime");
 var import_jsx_runtime219 = require("react/jsx-runtime");
-var centeredMaxWidthPx = {
-  sm: 768,
-  lg: 1440
+var __maybeInc28 = (inc) => {
+  return typeof inc === "string" ? inc : `calc(var(--t-spacing) * ${inc})`;
 };
 function CenteredLayout(props) {
   const {
@@ -27348,22 +27365,48 @@ function CenteredLayout(props) {
     children
   } = props;
   const tid = useTestIds(props, "centeredLayout");
-  return /* @__PURE__ */ (0, import_jsx_runtime219.jsx)("div", { ...(0, import_runtime139.trussProps)({
-    width: "w100",
-    maxWidth: ["maxw_var", {
-      "--maxWidth": `${centeredMaxWidthPx[size]}px`
-    }],
-    marginLeft: "mla",
-    marginRight: "mra",
-    paddingLeft: "pl_12px mdandup_pl3",
-    paddingRight: "pr_12px mdandup_pr3"
+  const {
+    mdAndUp
+  } = useBreakpoint();
+  return /* @__PURE__ */ (0, import_jsx_runtime219.jsx)("div", { ...(0, import_runtime139.mergeProps)(void 0, {
+    // layoutContainer descendants (e.g. ContentHeader) read this to inset sticky horizontal chrome within the shell padding.
+    [beamLayoutContentPaddingXVar]: mdAndUp ? mdAndUpContentPaddingX : smContentPaddingX
+  }, {
+    ...{
+      width: "w100",
+      maxWidth: ["maxw_var", {
+        "--maxWidth": `${centeredShellMaxPx[size]}px`
+      }],
+      marginLeft: "mla",
+      marginRight: "mra"
+    },
+    ...centeredPaddingX
   }), ...tid, children });
 }
+var centeredContentMaxPx = {
+  sm: 720,
+  lg: 1392
+};
+var mdContentPaddingPx = parseInt(pageContentPaddingXValue, 10);
+var centeredShellMaxPx = {
+  sm: centeredContentMaxPx.sm + mdContentPaddingPx * 2,
+  lg: centeredContentMaxPx.lg + mdContentPaddingPx * 2
+};
+var smContentPaddingX = "12px";
+var mdAndUpContentPaddingX = pageContentPaddingXValue;
+var centeredPaddingX = {
+  paddingLeft: ["px_var mdandup_pl3", {
+    "--paddingLeft": (0, import_runtime139.maybeCssVar)(__maybeInc28(smContentPaddingX))
+  }],
+  paddingRight: ["px_var mdandup_pr3", {
+    "--paddingRight": (0, import_runtime139.maybeCssVar)(__maybeInc28(smContentPaddingX))
+  }]
+};
 
 // src/layouts/EnvironmentBannerLayout/EnvironmentBannerLayout.tsx
 var import_runtime140 = require("@homebound/truss/runtime");
 var import_jsx_runtime220 = require("react/jsx-runtime");
-var __maybeInc28 = (inc) => {
+var __maybeInc29 = (inc) => {
   return typeof inc === "string" ? inc : `calc(var(--t-spacing) * ${inc})`;
 };
 function EnvironmentBannerLayout(props) {
@@ -27397,7 +27440,7 @@ function EnvironmentBannerLayout(props) {
         "--zIndex": (0, import_runtime140.maybeCssVar)(zIndices.environmentBanner)
       }],
       width: ["w_var", {
-        "--width": (0, import_runtime140.maybeCssVar)(__maybeInc28(innerWidth))
+        "--width": (0, import_runtime140.maybeCssVar)(__maybeInc29(innerWidth))
       }]
     }), ...tid.bannerSticky, children: /* @__PURE__ */ (0, import_jsx_runtime220.jsx)(EnvironmentBanner, { ...environmentBanner, ...tid.environmentBanner }) }) }),
     children
@@ -27566,7 +27609,7 @@ function useNavbarLayoutHeight() {
 
 // src/layouts/NavbarLayout/NavbarLayout.tsx
 var import_jsx_runtime223 = require("react/jsx-runtime");
-var __maybeInc29 = (inc) => {
+var __maybeInc30 = (inc) => {
   return typeof inc === "string" ? inc : `calc(var(--t-spacing) * ${inc})`;
 };
 function NavbarLayout(props) {
@@ -27597,7 +27640,7 @@ function NavbarLayout(props) {
         "--zIndex": (0, import_runtime142.maybeCssVar)(zIndices.navbar)
       }],
       width: ["w_var", {
-        "--width": (0, import_runtime142.maybeCssVar)(__maybeInc29(innerWidth))
+        "--width": (0, import_runtime142.maybeCssVar)(__maybeInc30(innerWidth))
       }]
     }
   ) : (
@@ -27609,7 +27652,7 @@ function NavbarLayout(props) {
         "--zIndex": (0, import_runtime142.maybeCssVar)(zIndices.navbar)
       }],
       width: ["w_var", {
-        "--width": (0, import_runtime142.maybeCssVar)(__maybeInc29(innerWidth))
+        "--width": (0, import_runtime142.maybeCssVar)(__maybeInc30(innerWidth))
       }],
       transition: "transitionTop"
     }
@@ -27717,7 +27760,7 @@ function useBannerAndNavbarHeight() {
 // src/layouts/PageHeaderLayout/PageHeaderLayout.tsx
 var import_runtime145 = require("@homebound/truss/runtime");
 var import_jsx_runtime226 = require("react/jsx-runtime");
-var __maybeInc30 = (inc) => {
+var __maybeInc31 = (inc) => {
   return typeof inc === "string" ? inc : `calc(var(--t-spacing) * ${inc})`;
 };
 function PageHeaderLayout(props) {
@@ -27747,10 +27790,10 @@ function PageHeaderLayout(props) {
   const innerCss = autoHideState === "static" ? {
     position: "sticky",
     left: ["left_var", {
-      "--left": (0, import_runtime145.maybeCssVar)(__maybeInc30(headerLeft))
+      "--left": (0, import_runtime145.maybeCssVar)(__maybeInc31(headerLeft))
     }],
     width: ["w_var", {
-      "--width": (0, import_runtime145.maybeCssVar)(__maybeInc30(headerWidth))
+      "--width": (0, import_runtime145.maybeCssVar)(__maybeInc31(headerWidth))
     }],
     zIndex: ["z_var", {
       "--zIndex": (0, import_runtime145.maybeCssVar)(zIndices.pageStickyHeader)
@@ -27758,10 +27801,10 @@ function PageHeaderLayout(props) {
   } : {
     position: "fixed",
     left: ["left_var", {
-      "--left": (0, import_runtime145.maybeCssVar)(__maybeInc30(headerLeft))
+      "--left": (0, import_runtime145.maybeCssVar)(__maybeInc31(headerLeft))
     }],
     width: ["w_var", {
-      "--width": (0, import_runtime145.maybeCssVar)(__maybeInc30(headerWidth))
+      "--width": (0, import_runtime145.maybeCssVar)(__maybeInc31(headerWidth))
     }],
     zIndex: ["z_var", {
       "--zIndex": (0, import_runtime145.maybeCssVar)(zIndices.pageStickyHeader)
@@ -27871,7 +27914,7 @@ function WorkflowActions(props) {
 // src/layouts/WorkflowLayout/WorkflowLayout.tsx
 var import_runtime146 = require("@homebound/truss/runtime");
 var import_jsx_runtime230 = require("react/jsx-runtime");
-var __maybeInc31 = (inc) => {
+var __maybeInc32 = (inc) => {
   return typeof inc === "string" ? inc : `calc(var(--t-spacing) * ${inc})`;
 };
 function WorkflowLayout(props) {
@@ -27956,13 +27999,13 @@ function WorkflowLayout(props) {
         position: "sticky",
         left: "left0",
         width: ["w_var", {
-          "--width": (0, import_runtime146.maybeCssVar)(__maybeInc31(headerWidth))
+          "--width": (0, import_runtime146.maybeCssVar)(__maybeInc32(headerWidth))
         }],
         zIndex: ["z_var", {
           "--zIndex": (0, import_runtime146.maybeCssVar)(zIndices.pageStickyHeader)
         }],
         top: ["top_var", {
-          "--top": (0, import_runtime146.maybeCssVar)(__maybeInc31(outerTop))
+          "--top": (0, import_runtime146.maybeCssVar)(__maybeInc32(outerTop))
         }]
       }), ...tid.header, children: headerEl }),
       /* @__PURE__ */ (0, import_jsx_runtime230.jsx)("div", { className: "df fdc fg1 mh0 w100", ...tid.body, children: activeStep?.content }),
@@ -27977,7 +28020,7 @@ function WorkflowLayout(props) {
           position: "fixed",
           bottom: "bottom0",
           width: ["w_var", {
-            "--width": (0, import_runtime146.maybeCssVar)(__maybeInc31(headerWidth))
+            "--width": (0, import_runtime146.maybeCssVar)(__maybeInc32(headerWidth))
           }],
           height: ["h_var", {
             "--height": `${mobileFooterHeightPx}px`
@@ -28196,6 +28239,7 @@ function getInitialStep(steps, defaultStep) {
   bannerAndNavbarChromeTop,
   beamEnvironmentBannerLayoutHeightVar,
   beamFloatingRightOffsetVar,
+  beamLayoutContentPaddingXVar,
   beamLayoutViewportHeightVar,
   beamLayoutViewportWidthVar,
   beamNavbarLayoutHeightVar,
@@ -28252,6 +28296,8 @@ function getInitialStep(steps, defaultStep) {
   defaultTestId,
   documentScrollChromeLeft,
   documentScrollChromeWidth,
+  documentScrollContentLeft,
+  documentScrollContentWidth,
   documentScrollRightPaneHeight,
   documentScrollRightPaneWidth,
   dragHandleColumn,