@homebound/beam 3.57.0 → 3.58.0

package/dist/index.js

@@ -8966,7 +8966,7 @@ function RowImpl(props) {
           "--width": maybeCssVar13(__maybeInc6(`calc(${columnSizes.slice(columnIndex, columnIndex + currentColspan).join(" + ")}${applyFirstContentColumnStyles && levelIndent ? ` - ${levelIndent}px` : ""})`))
         }]
       },
-      // Gutter columns are budgeted at 12px; strip cell padding so flex min-content does not exceed that width.
+      // Gutter columns are budgeted at pageContentGutterPx; strip cell padding so flex min-content does not exceed that width.
       ...column2.isLayoutGutter && {
         paddingLeft: "pl0",
         paddingRight: "pr0",
@@ -15430,6 +15430,22 @@ function SelectToggle({ id, disabled }) {
   );
 }
 
+// src/layouts/layoutSpacing.ts
+var pageContentGutterPx = 12;
+var pageContentPaddingX = {
+  paddingLeft: "pl3",
+  paddingRight: "pr3"
+};
+function headerContentPaddingX(compact = false) {
+  return compact ? {
+    paddingLeft: "pl1",
+    paddingRight: "pr1"
+  } : {
+    paddingLeft: "pl1 mdandup_pl5",
+    paddingRight: "pr1 mdandup_pr5"
+  };
+}
+
 // src/components/Table/utils/columns.tsx
 import { jsx as jsx90 } from "react/jsx-runtime";
 function column(columnDef) {
@@ -15536,7 +15552,6 @@ function pinColumn(columnDef) {
     });
   });
 }
-var columnGutterPx = 12;
 var layoutGutterLeftColumnId = "beamLayoutGutterLeft";
 var layoutGutterRightColumnId = "beamLayoutGutterRight";
 function isContentColumn(column2) {
@@ -15548,7 +15563,7 @@ function layoutGutterColumn(side) {
     ...nonKindDefaults(),
     id,
     clientSideSort: false,
-    w: `${columnGutterPx}px`,
+    w: `${pageContentGutterPx}px`,
     wrapAction: false,
     isLayoutGutter: true,
     canHide: false,
@@ -20841,12 +20856,7 @@ function FilterPanelOpen({
     ...{
       flexWrap: "mdandup_fww"
     },
-    ...{
-      ...inDocumentScrollLayout ? {
-        paddingLeft: "pl3",
-        paddingRight: "pr3"
-      } : {}
-    }
+    ...inDocumentScrollLayout ? pageContentPaddingX : void 0
   }), children: [
     groupBy && /* @__PURE__ */ jsx156(GroupByField, { ...groupBy }),
     filterControls,
@@ -20979,14 +20989,13 @@ function GridTableLayoutActionsComponent(props) {
     } : {}
   }), children: [
     /* @__PURE__ */ jsxs75("div", { ...trussProps78({
-      display: "df",
-      gap: "gap1",
-      justifyContent: "jcsb",
-      paddingTop: "pt3",
-      ...inDocumentScrollLayout ? {
-        paddingLeft: "pl3",
-        paddingRight: "pr3"
-      } : {}
+      ...{
+        display: "df",
+        gap: "gap1",
+        justifyContent: "jcsb",
+        paddingTop: "pt3"
+      },
+      ...inDocumentScrollLayout ? pageContentPaddingX : void 0
     }), children: [
       /* @__PURE__ */ jsxs75("div", { className: "df gap_12px aic", children: [
         !sm && hasSearch && /* @__PURE__ */ jsx157("div", { className: "w_244px", children: searchTextField }),
@@ -21006,7 +21015,7 @@ function GridTableLayoutActionsComponent(props) {
         } })
       ] })
     ] }),
-    sm && showSearch && /* @__PURE__ */ jsx157("div", { className: "pl3 pr3", children: searchTextField }),
+    sm && showSearch && /* @__PURE__ */ jsx157("div", { ...trussProps78(pageContentPaddingX), children: searchTextField }),
     hasFilterControls && !showInlineControl && /* @__PURE__ */ jsx157(FilterPanel, { isOpen: showFilters, groupBy, filterImpls, filter, setFilter, onClear: clearFilters })
   ] });
 }
@@ -22568,7 +22577,17 @@ function EnvironmentBanner(props) {
   }), role: "banner", ...tid, children: [
     getInvertedCorner("left", bgColorVar),
     getInvertedCorner("right", bgColorVar),
-    /* @__PURE__ */ jsxs86("div", { className: "relative z2 df aic jcsb h100 pl1 mdandup_pl5 pr1 mdandup_pr5", ...tid.content, children: [
+    /* @__PURE__ */ jsxs86("div", { ...trussProps89({
+      ...{
+        position: "relative",
+        zIndex: "z2",
+        display: "df",
+        alignItems: "aic",
+        justifyContent: "jcsb",
+        height: "h100"
+      },
+      ...headerContentPaddingX()
+    }), ...tid.content, children: [
       /* @__PURE__ */ jsxs86("span", { className: "df aic gap2 fg1 mh0 oh", ...tid.left, children: [
         /* @__PURE__ */ jsx176(Tag, { text: badgeLabel, xss: {
           backgroundColor: "bgColor_FFFFFF90"
@@ -23565,24 +23584,36 @@ function NavbarMobileDrawer({
       duration: 0.2
     }, onClick: (e) => e.stopPropagation(), ...tid.mobileMenuDrawer, children: [
       /* @__PURE__ */ jsx189("div", { ...trussProps98({
-        display: "df",
-        alignItems: "aic",
-        justifyContent: "jcfe",
-        paddingLeft: "pl3",
-        paddingRight: "pr3",
-        paddingTop: "pt_12px",
-        paddingBottom: "pb_12px",
-        flexShrink: "fs0",
-        borderBottomStyle: "bbs_solid",
-        borderBottomWidth: "bbw_1px",
-        borderColor: ["bc_var", {
-          "--borderColor": "var(--b-surface-separator)"
-        }]
+        ...{
+          display: "df",
+          alignItems: "aic",
+          justifyContent: "jcfe",
+          paddingTop: "pt_12px",
+          paddingBottom: "pb_12px",
+          flexShrink: "fs0",
+          borderBottomStyle: "bbs_solid",
+          borderBottomWidth: "bbw_1px",
+          borderColor: ["bc_var", {
+            "--borderColor": "var(--b-surface-separator)"
+          }]
+        },
+        ...pageContentPaddingX
       }), children: /* @__PURE__ */ jsx189(IconButton, { icon: "x", color: "--b-on-surface-muted" /* OnSurfaceMuted */, label: "Close navigation", onClick: onClose, ...tid.mobileMenuClose }) }),
       /* @__PURE__ */ jsx189(
         "nav",
         {
-          className: "fg1 oya pl3 pr3 pb3 pt2 df fdc gap_4px",
+          ...trussProps98({
+            ...{
+              flexGrow: "fg1",
+              overflowY: "oya",
+              paddingBottom: "pb3",
+              paddingTop: "pt2",
+              display: "df",
+              flexDirection: "fdc",
+              gap: "gap_4px"
+            },
+            ...pageContentPaddingX
+          }),
           onClickCapture: (e) => {
             if (e.target.closest("a")) {
               onClose();
@@ -23618,23 +23649,20 @@ function Navbar(props) {
   } = useContentOverflow(!sm);
   const showMobile = sm || overflows;
   return /* @__PURE__ */ jsx190(ContrastScope, { children: /* @__PURE__ */ jsxs93("nav", { ...trussProps99({
-    backgroundColor: ["bgColor_var", {
-      "--backgroundColor": "var(--b-surface-raised)"
-    }],
-    flexShrink: "fs0",
-    display: "df",
-    alignItems: "aic",
-    justifyContent: "jcsb",
-    whiteSpace: "wsnw",
-    paddingLeft: "pl1",
-    paddingRight: "pr1",
-    paddingTop: "pt1",
-    paddingBottom: "pb1",
-    gap: "gap2",
-    ...!showMobile ? {
-      paddingLeft: "pl5",
-      paddingRight: "pr5"
-    } : {}
+    ...{
+      backgroundColor: ["bgColor_var", {
+        "--backgroundColor": "var(--b-surface-raised)"
+      }],
+      flexShrink: "fs0",
+      display: "df",
+      alignItems: "aic",
+      justifyContent: "jcsb",
+      whiteSpace: "wsnw",
+      paddingTop: "pt1",
+      paddingBottom: "pb1",
+      gap: "gap2"
+    },
+    ...headerContentPaddingX(showMobile)
   }), ...tid, children: [
     /* @__PURE__ */ jsxs93("div", { className: "df aic gap3 fg1 mw0", children: [
       /* @__PURE__ */ jsxs93("div", { className: "df aic fs0 gap2", children: [
@@ -25406,10 +25434,9 @@ function BaseHeader(props) {
         display: "df",
         justifyContent: "jcsb",
         width: "w100",
-        gap: "gap1",
-        paddingLeft: "pl3",
-        paddingRight: "pr3"
+        gap: "gap1"
       },
+      ...pageContentPaddingX,
       ...{
         ...!bottomSlot ? {
           marginBottom: "mb2"
@@ -25427,6 +25454,7 @@ function BaseHeader(props) {
 }
 
 // src/components/Headers/PageHeader.tsx
+import { trussProps as trussProps110 } from "@homebound/truss/runtime";
 import { jsx as jsx209 } from "react/jsx-runtime";
 function PageHeader2(props) {
   const {
@@ -25434,7 +25462,7 @@ function PageHeader2(props) {
     ...otherProps
   } = props;
   const tid = useTestIds(otherProps, "header");
-  return /* @__PURE__ */ jsx209(BaseHeader, { ...otherProps, bottomSlot: tabs && /* @__PURE__ */ jsx209("div", { className: "pl3 pr3", children: /* @__PURE__ */ jsx209(Tabs, { ...tabs, ...tid.tabs }) }) });
+  return /* @__PURE__ */ jsx209(BaseHeader, { ...otherProps, bottomSlot: tabs && /* @__PURE__ */ jsx209("div", { ...trussProps110(pageContentPaddingX), children: /* @__PURE__ */ jsx209(Tabs, { ...tabs, ...tid.tabs }) }) });
 }
 
 // src/layouts/useBannerAndNavbarHeight.ts
@@ -25516,7 +25544,7 @@ function PageHeaderLayout(props) {
 }
 
 // src/layouts/WorkflowLayout/WorkflowLayout.tsx
-import { useCallback as useCallback40, useLayoutEffect as useLayoutEffect10, useRef as useRef67 } from "react";
+import { useCallback as useCallback40, useLayoutEffect as useLayoutEffect10, useRef as useRef67, useState as useState59 } from "react";
 
 // src/components/Headers/WorkflowHeader.tsx
 import { jsx as jsx211 } from "react/jsx-runtime";
@@ -25538,36 +25566,40 @@ function WorkflowActions(props) {
     onSaveAndExit,
     completeLabel,
     onComplete,
-    onContinue
+    onContinue,
+    primaryDisabled
   } = props;
   return /* @__PURE__ */ jsxs109("div", { className: "df aic jcsb sm_w100", children: [
     /* @__PURE__ */ jsx212("div", { className: "df aic", children: !isFirstStep && (isMobile ? /* @__PURE__ */ jsx212(IconButton, { icon: "arrowBack", label: "Back", onClick: onBack }) : /* @__PURE__ */ jsx212(Button, { label: "Back", icon: "chevronLeft", variant: "tertiary", onClick: onBack })) }),
     /* @__PURE__ */ jsxs109("div", { className: "df aic gap1", children: [
       /* @__PURE__ */ jsx212(Button, { label: "Cancel", variant: "quaternary", onClick: onCancel }),
       onSaveAndExit && /* @__PURE__ */ jsx212(Button, { label: "Save & Exit", variant: "secondary", onClick: onSaveAndExit }),
-      isLastStep ? /* @__PURE__ */ jsx212(Button, { label: completeLabel, variant: "primary", onClick: onComplete }) : /* @__PURE__ */ jsx212(Button, { label: "Continue", variant: "primary", onClick: onContinue })
+      isLastStep ? /* @__PURE__ */ jsx212(Button, { label: completeLabel, variant: "primary", onClick: onComplete, disabled: primaryDisabled }) : /* @__PURE__ */ jsx212(Button, { label: "Continue", variant: "primary", onClick: onContinue, disabled: primaryDisabled })
     ] })
   ] });
 }
 
 // src/layouts/WorkflowLayout/WorkflowLayout.tsx
-import { trussProps as trussProps110, mergeProps as mergeProps37, maybeCssVar as maybeCssVar61 } from "@homebound/truss/runtime";
+import { trussProps as trussProps111, mergeProps as mergeProps37, maybeCssVar as maybeCssVar61 } from "@homebound/truss/runtime";
 import { jsx as jsx213, jsxs as jsxs110 } from "react/jsx-runtime";
 var __maybeInc26 = (inc) => {
   return typeof inc === "string" ? inc : `calc(var(--t-spacing) * ${inc})`;
 };
 function WorkflowLayout(props) {
   const {
-    children
-  } = props;
-  const {
-    stepperTabs,
+    steps,
+    defaultStep,
     onCancel,
     completeLabel,
     onComplete,
     onSaveAndExit,
     ...headerProps
-  } = props.workflowHeader;
+  } = props;
+  const tabSteps = steps.map((step) => ({
+    ...step,
+    value: defaultTestId(step.label)
+  }));
+  const [currentStep, setCurrentStep] = useState59(() => getInitialStep(tabSteps, defaultStep));
   const tid = useTestIds(props, "workflowLayout");
   const {
     sm: isMobile
@@ -25588,15 +25620,11 @@ function WorkflowLayout(props) {
   const cssVars = headerHeight > 0 ? {
     [beamPageHeaderLayoutHeightVar]: `${headerHeight}px`
   } : void 0;
-  const {
-    steps,
-    currentStep,
-    onChange
-  } = stepperTabs;
-  const currentIndex = steps.findIndex((step) => step.value === currentStep);
+  const currentIndex = isValidStep(tabSteps, currentStep) ? tabSteps.findIndex((step) => step.value === currentStep) : 0;
   const isFirstStep = currentIndex <= 0;
-  const isLastStep = currentIndex === steps.length - 1;
-  const buttons = /* @__PURE__ */ jsx213(WorkflowActions, { isFirstStep, isLastStep, isMobile, onBack: () => onChange(steps[currentIndex - 1].value), onCancel, onSaveAndExit, completeLabel, onComplete, onContinue: () => onChange(steps[currentIndex + 1].value) });
+  const isLastStep = currentIndex === tabSteps.length - 1;
+  const activeStep = tabSteps[currentIndex];
+  const buttons = /* @__PURE__ */ jsx213(WorkflowActions, { isFirstStep, isLastStep, isMobile, onBack: () => setCurrentStep(tabSteps[currentIndex - 1].value), onCancel, onSaveAndExit, completeLabel, onComplete, primaryDisabled: !activeStep?.completed, onContinue: () => setCurrentStep(tabSteps[currentIndex + 1].value) });
   const showFooter = isMobile;
   useLayoutEffect10(() => {
     const root = document.documentElement;
@@ -25611,7 +25639,9 @@ function WorkflowLayout(props) {
     };
   }, [showFooter]);
   const headerEl = /* @__PURE__ */ jsx213(WorkflowHeader, { ...headerProps, rightSlot: isMobile ? void 0 : buttons, stepperTabs: {
-    ...stepperTabs,
+    steps: tabSteps,
+    currentStep,
+    onChange: setCurrentStep,
     collapsed
   } });
   return /* @__PURE__ */ jsx213(DocumentScrollLayoutProvider, { children: /* @__PURE__ */ jsxs110("div", { ...mergeProps37(void 0, cssVars, {
@@ -25624,7 +25654,7 @@ function WorkflowLayout(props) {
     }, {
       flexShrink: "fs0",
       width: "w100"
-    }), ...tid.spacer, children: /* @__PURE__ */ jsx213("div", { ref: headerMetricsRef, ...trussProps110({
+    }), ...tid.spacer, children: /* @__PURE__ */ jsx213("div", { ref: headerMetricsRef, ...trussProps111({
       position: "fixed",
       width: ["w_var", {
         "--width": maybeCssVar61(__maybeInc26(headerWidth))
@@ -25636,44 +25666,51 @@ function WorkflowLayout(props) {
         "--top": maybeCssVar61(__maybeInc26(outerTop))
       }]
     }), ...tid.header, children: headerEl }) }),
-    /* @__PURE__ */ jsx213("div", { className: "df fdc fg1 mh0 w100", ...tid.body, children }),
-    showFooter && /* @__PURE__ */ jsx213("div", { ...trussProps110({
+    /* @__PURE__ */ jsx213("div", { className: "df fdc fg1 mh0 w100", ...tid.body, children: activeStep?.content }),
+    showFooter && /* @__PURE__ */ jsx213("div", { ...trussProps111({
       flexShrink: "fs0",
       width: "w100",
       height: ["h_var", {
         "--height": `${mobileFooterHeightPx}px`
       }]
     }) }),
-    showFooter && /* @__PURE__ */ jsx213("div", { ...trussProps110({
-      position: "fixed",
-      bottom: "bottom0",
-      width: ["w_var", {
-        "--width": maybeCssVar61(__maybeInc26(headerWidth))
-      }],
-      height: ["h_var", {
-        "--height": `${mobileFooterHeightPx}px`
-      }],
-      zIndex: ["z_var", {
-        "--zIndex": maybeCssVar61(zIndices.pageStickyFooter)
-      }],
-      display: "df",
-      alignItems: "aic",
-      justifyContent: "jcfe",
-      gap: "gap1",
-      paddingLeft: "pl3",
-      paddingRight: "pr3",
-      borderTopStyle: "bts_solid",
-      borderTopWidth: "btw_1px",
-      borderColor: ["bc_var", {
-        "--borderColor": "var(--b-surface-separator)"
-      }],
-      backgroundColor: ["bgColor_var", {
-        "--backgroundColor": "var(--b-surface)"
-      }]
+    showFooter && /* @__PURE__ */ jsx213("div", { ...trussProps111({
+      ...{
+        position: "fixed",
+        bottom: "bottom0",
+        width: ["w_var", {
+          "--width": maybeCssVar61(__maybeInc26(headerWidth))
+        }],
+        height: ["h_var", {
+          "--height": `${mobileFooterHeightPx}px`
+        }],
+        zIndex: ["z_var", {
+          "--zIndex": maybeCssVar61(zIndices.pageStickyFooter)
+        }],
+        display: "df",
+        alignItems: "aic",
+        justifyContent: "jcfe",
+        gap: "gap1",
+        borderTopStyle: "bts_solid",
+        borderTopWidth: "btw_1px",
+        borderColor: ["bc_var", {
+          "--borderColor": "var(--b-surface-separator)"
+        }],
+        backgroundColor: ["bgColor_var", {
+          "--backgroundColor": "var(--b-surface)"
+        }]
+      },
+      ...pageContentPaddingX
     }), ...tid.footer, children: buttons })
   ] }) });
 }
 var mobileFooterHeightPx = 80;
+function isValidStep(steps, value) {
+  return steps.some((step) => step.value === value);
+}
+function getInitialStep(steps, defaultStep) {
+  return defaultStep !== void 0 && isValidStep(steps, defaultStep) ? defaultStep : steps[0]?.value;
+}
 export {
   ASC,
   Accordion,
@@ -25921,6 +25958,7 @@ export {
   getNavLinkStyles,
   getTableRefWidthStyles,
   getTableStyles,
+  headerContentPaddingX,
   headerRenderFn,
   hoverStyles,
   increment,
@@ -25950,6 +25988,8 @@ export {
   nonKindGridColumnKeys,
   numberRangeFilter,
   numericColumn,
+  pageContentGutterPx,
+  pageContentPaddingX,
   parseDate,
   parseDateRange,
   parseWidthToPx,