@homebound/beam 3.101.0 → 3.102.0

package/dist/index.d.cts

@@ -9099,14 +9099,18 @@ declare function HbSpinnerProvider({ quips, children }: HbSpinnerProviderProps):
  * Tagged with `kind` (not `type`) because `ButtonProps` already has its own
  * unrelated `type?: "button" | "submit" | "reset"` HTML-attribute field.
  *
+ * Labels are `string` so actions can collapse into a `ButtonMenu` on mobile.
  * Icon actions always render with the `outline` `IconButton` variant, so `variant` is omitted here.
- * Menu actions always use a `verticalDots` trigger.
  */
 type HeaderAction = ({
     kind?: "default";
-} & ButtonProps) | ({
+} & Omit<ButtonProps, "label"> & {
+    label: string;
+}) | ({
     kind: "icon";
-} & Omit<IconButtonProps, "variant">) | ({
+} & Omit<IconButtonProps, "variant" | "label"> & {
+    label: string;
+}) | ({
     kind: "menu";
 } & ButtonMenuProps);
 
@@ -10631,6 +10635,8 @@ type BaseHeaderProps = {
 };
 
 type PageHeaderProps<V extends string, X> = Omit<BaseHeaderProps, "bottomSlot"> & {
+    /** Rendered as buttons on desktop; two or more collapse into a `ButtonMenu` at `sm`. */
+    actions?: HeaderAction[];
     tabs?: Omit<TabsProps<V, X>, "contentXss" | "omitFullBleedPadding" | "includeBottomBorder"> | Omit<RouteTabsProps<V, X>, "contentXss" | "omitFullBleedPadding" | "includeBottomBorder">;
 };
 

package/dist/index.d.ts

@@ -9099,14 +9099,18 @@ declare function HbSpinnerProvider({ quips, children }: HbSpinnerProviderProps):
  * Tagged with `kind` (not `type`) because `ButtonProps` already has its own
  * unrelated `type?: "button" | "submit" | "reset"` HTML-attribute field.
  *
+ * Labels are `string` so actions can collapse into a `ButtonMenu` on mobile.
  * Icon actions always render with the `outline` `IconButton` variant, so `variant` is omitted here.
- * Menu actions always use a `verticalDots` trigger.
  */
 type HeaderAction = ({
     kind?: "default";
-} & ButtonProps) | ({
+} & Omit<ButtonProps, "label"> & {
+    label: string;
+}) | ({
     kind: "icon";
-} & Omit<IconButtonProps, "variant">) | ({
+} & Omit<IconButtonProps, "variant" | "label"> & {
+    label: string;
+}) | ({
     kind: "menu";
 } & ButtonMenuProps);
 
@@ -10631,6 +10635,8 @@ type BaseHeaderProps = {
 };
 
 type PageHeaderProps<V extends string, X> = Omit<BaseHeaderProps, "bottomSlot"> & {
+    /** Rendered as buttons on desktop; two or more collapse into a `ButtonMenu` at `sm`. */
+    actions?: HeaderAction[];
     tabs?: Omit<TabsProps<V, X>, "contentXss" | "omitFullBleedPadding" | "includeBottomBorder"> | Omit<RouteTabsProps<V, X>, "contentXss" | "omitFullBleedPadding" | "includeBottomBorder">;
 };
 

package/dist/index.js

@@ -21474,9 +21474,20 @@ import { jsx as jsx149 } from "react/jsx-runtime";
 function HeaderActions(props) {
   const {
     actions,
+    collapseOnSm = false,
     ...otherProps
   } = props;
   const tid = useTestIds(otherProps, "headerActions");
+  const {
+    sm
+  } = useBreakpoint();
+  const collapse = collapseOnSm && sm && actions.length > 1;
+  if (collapse) {
+    return /* @__PURE__ */ jsx149("div", { className: "df aic gap1 fs0", ...tid, children: /* @__PURE__ */ jsx149(ButtonMenu, { trigger: {
+      icon: "verticalDots",
+      variant: "outline"
+    }, items: toMenuItems(actions) }) });
+  }
   return /* @__PURE__ */ jsx149("div", { className: "df aic gap1 fs0", ...tid, children: actions.map((action, i) => {
     const key = headerActionKey(action, i);
     if (action.kind === "icon") {
@@ -21496,7 +21507,38 @@ function HeaderActions(props) {
 function headerActionKey(action, index) {
   if (action.kind === "icon") return `${action.icon}-${index}`;
   if (action.kind === "menu") return `menu-${index}`;
-  return `${String(action.label)}-${index}`;
+  return `${action.label}-${index}`;
+}
+function toMenuItems(actions) {
+  return actions.flatMap((action) => {
+    if (action.kind === "menu") return action.items;
+    const {
+      label,
+      onClick,
+      disabled
+    } = action;
+    const itemOnClick = typeof onClick === "string" ? onClick : () => void onClick({});
+    if (action.kind === "icon") {
+      return [{
+        label,
+        onClick: itemOnClick,
+        disabled,
+        icon: action.icon
+      }];
+    }
+    return [{
+      label,
+      onClick: itemOnClick,
+      disabled,
+      // Buttons can opt out of their default icon with `icon: null`, which menu items can't render.
+      ...action.icon ? {
+        icon: action.icon
+      } : {},
+      ...action.variant === "danger" ? {
+        destructive: true
+      } : {}
+    }];
+  });
 }
 
 // src/components/Headers/ContentHeader.tsx
@@ -25397,6 +25439,7 @@ function InlineFeedbackBanner(props) {
     /* @__PURE__ */ jsx203("span", { ...trussProps114({
       flexGrow: "fg1",
       minWidth: "mw0",
+      paddingTop: "pt_1px",
       color: ["color_var", {
         "--color": "var(--b-on-surface)"
       }]
@@ -28170,14 +28213,19 @@ function BaseHeader(props) {
 
 // src/components/Headers/PageHeader.tsx
 import { trussProps as trussProps135 } from "@homebound/truss/runtime";
-import { jsx as jsx233 } from "react/jsx-runtime";
+import { Fragment as Fragment51, jsx as jsx233, jsxs as jsxs123 } from "react/jsx-runtime";
 function PageHeader2(props) {
   const {
     tabs,
+    actions,
+    rightSlot,
     ...otherProps
   } = props;
   const tid = useTestIds(otherProps, "header");
-  return /* @__PURE__ */ jsx233(BaseHeader, { ...otherProps, bottomSlot: tabs && /* @__PURE__ */ jsx233("div", { ...trussProps135(pageContentPaddingX), children: /* @__PURE__ */ jsx233(Tabs, { ...tabs, ...tid.tabs }) }) });
+  return /* @__PURE__ */ jsx233(BaseHeader, { ...otherProps, rightSlot: /* @__PURE__ */ jsxs123(Fragment51, { children: [
+    rightSlot,
+    actions && actions.length > 0 && /* @__PURE__ */ jsx233(HeaderActions, { actions, collapseOnSm: true })
+  ] }), bottomSlot: tabs && /* @__PURE__ */ jsx233("div", { ...trussProps135(pageContentPaddingX), children: /* @__PURE__ */ jsx233(Tabs, { ...tabs, ...tid.tabs }) }) });
 }
 
 // src/layouts/useBannerAndNavbarHeight.ts
@@ -28187,7 +28235,7 @@ function useBannerAndNavbarHeight() {
 
 // src/layouts/PageHeaderLayout/PageHeaderLayout.tsx
 import { mergeProps as mergeProps40, maybeCssVar as maybeCssVar67 } from "@homebound/truss/runtime";
-import { jsx as jsx234, jsxs as jsxs123 } from "react/jsx-runtime";
+import { jsx as jsx234, jsxs as jsxs124 } from "react/jsx-runtime";
 var __maybeInc32 = (inc) => {
   return typeof inc === "string" ? inc : `calc(var(--t-spacing) * ${inc})`;
 };
@@ -28243,7 +28291,7 @@ function PageHeaderLayout(props) {
     top: autoHideState === "revealed" ? outerTop : `calc(${outerTop} - ${headerHeight}px)`
   } : void 0;
   const pageHeaderEl = useMemo58(() => /* @__PURE__ */ jsx234(PageHeader2, { ...pageHeader }), [pageHeader]);
-  return /* @__PURE__ */ jsx234(DocumentScrollLayoutProvider, { children: /* @__PURE__ */ jsxs123("div", { ...mergeProps40(void 0, cssVars, {
+  return /* @__PURE__ */ jsx234(DocumentScrollLayoutProvider, { children: /* @__PURE__ */ jsxs124("div", { ...mergeProps40(void 0, cssVars, {
     display: "df",
     flexDirection: "fdc",
     width: "w100"
@@ -28378,7 +28426,7 @@ function UnsavedChangesNavigationModal(props) {
 }
 
 // src/layouts/Workflow/WorkflowActions.tsx
-import { jsx as jsx238, jsxs as jsxs124 } from "react/jsx-runtime";
+import { jsx as jsx238, jsxs as jsxs125 } from "react/jsx-runtime";
 function WorkflowActions(props) {
   const {
     onCancel,
@@ -28396,9 +28444,9 @@ function WorkflowActions(props) {
     sm: isMobile
   } = useBreakpoint();
   const primaryVariant = aiMode ? "ai" : "primary";
-  return /* @__PURE__ */ jsxs124("div", { className: "df aic jcsb sm_w100", children: [
+  return /* @__PURE__ */ jsxs125("div", { className: "df aic jcsb sm_w100", children: [
     /* @__PURE__ */ jsx238("div", { className: "df aic", children: !isFirstStep && isMobile && onBack && /* @__PURE__ */ jsx238(IconButton, { icon: "arrowBack", label: "Back", onClick: onBack }) }),
-    /* @__PURE__ */ jsxs124("div", { className: "df aic gap1", children: [
+    /* @__PURE__ */ jsxs125("div", { className: "df aic gap1", children: [
       /* @__PURE__ */ jsx238(Button, { label: "Cancel", variant: "quaternary", onClick: onCancel }),
       onSaveAndExit && /* @__PURE__ */ jsx238(Button, { label: "Save & Exit", variant: "secondary", onClick: onSaveAndExit }),
       isLastStep ? /* @__PURE__ */ jsx238(Button, { label: completeLabel, variant: primaryVariant, onClick: onComplete, disabled: primaryDisabled }) : /* @__PURE__ */ jsx238(Button, { label: "Continue", variant: primaryVariant, onClick: async () => {
@@ -28410,7 +28458,7 @@ function WorkflowActions(props) {
 
 // src/layouts/Workflow/WorkflowPageLayout.tsx
 import { trussProps as trussProps137, mergeProps as mergeProps41, maybeCssVar as maybeCssVar69 } from "@homebound/truss/runtime";
-import { jsx as jsx239, jsxs as jsxs125 } from "react/jsx-runtime";
+import { jsx as jsx239, jsxs as jsxs126 } from "react/jsx-runtime";
 var __maybeInc34 = (inc) => {
   return typeof inc === "string" ? inc : `calc(var(--t-spacing) * ${inc})`;
 };
@@ -28459,8 +28507,8 @@ function WorkflowPageLayout(props) {
       }
     };
   }, [showFooter]);
-  return /* @__PURE__ */ jsxs125(DocumentScrollLayoutProvider, { children: [
-    /* @__PURE__ */ jsxs125("div", { ...mergeProps41(void 0, cssVars, {
+  return /* @__PURE__ */ jsxs126(DocumentScrollLayoutProvider, { children: [
+    /* @__PURE__ */ jsxs126("div", { ...mergeProps41(void 0, cssVars, {
       display: "df",
       flexDirection: "fdc",
       width: "w100"
@@ -28534,7 +28582,7 @@ function WorkflowPageLayout(props) {
 }
 
 // src/layouts/Workflow/FocusedFormLayout.tsx
-import { jsx as jsx240, jsxs as jsxs126 } from "react/jsx-runtime";
+import { jsx as jsx240, jsxs as jsxs127 } from "react/jsx-runtime";
 function FocusedFormLayout(props) {
   const {
     onCancel,
@@ -28561,7 +28609,7 @@ function FocusedFormLayout(props) {
   });
   const activeId = useActiveJumpLink(jumpLinks.map((link) => link.id));
   const showRail = withJumpLinks && jumpLinks.length >= 2 && !isMobile;
-  return /* @__PURE__ */ jsx240(WorkflowPageLayout, { ...tid, ...headerProps, aiMode, isDirty, onCancel, onSaveAndExit, completeLabel, onComplete, primaryDisabled: !isValid, children: /* @__PURE__ */ jsxs126("div", { className: "df w100", children: [
+  return /* @__PURE__ */ jsx240(WorkflowPageLayout, { ...tid, ...headerProps, aiMode, isDirty, onCancel, onSaveAndExit, completeLabel, onComplete, primaryDisabled: !isValid, children: /* @__PURE__ */ jsxs127("div", { className: "df w100", children: [
     showRail && /* @__PURE__ */ jsx240(JumpLinksRail, { links: jumpLinks, activeId, ...tid.jumpLinks }),
     /* @__PURE__ */ jsx240("div", { className: "fg1 mw0 mb4", children: /* @__PURE__ */ jsx240(FormSectionLayout, { ...form, aiMode }) })
   ] }) });