@homebound/beam 3.101.1 → 3.102.0

package/dist/index.cjs

@@ -21981,9 +21981,20 @@ var import_jsx_runtime149 = require("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__ */ (0, import_jsx_runtime149.jsx)("div", { className: "df aic gap1 fs0", ...tid, children: /* @__PURE__ */ (0, import_jsx_runtime149.jsx)(ButtonMenu, { trigger: {
+      icon: "verticalDots",
+      variant: "outline"
+    }, items: toMenuItems(actions) }) });
+  }
   return /* @__PURE__ */ (0, import_jsx_runtime149.jsx)("div", { className: "df aic gap1 fs0", ...tid, children: actions.map((action, i) => {
     const key = headerActionKey(action, i);
     if (action.kind === "icon") {
@@ -22003,7 +22014,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
@@ -28674,10 +28716,15 @@ var import_jsx_runtime233 = require("react/jsx-runtime");
 function PageHeader2(props) {
   const {
     tabs,
+    actions,
+    rightSlot,
     ...otherProps
   } = props;
   const tid = useTestIds(otherProps, "header");
-  return /* @__PURE__ */ (0, import_jsx_runtime233.jsx)(BaseHeader, { ...otherProps, bottomSlot: tabs && /* @__PURE__ */ (0, import_jsx_runtime233.jsx)("div", { ...(0, import_runtime150.trussProps)(pageContentPaddingX), children: /* @__PURE__ */ (0, import_jsx_runtime233.jsx)(Tabs, { ...tabs, ...tid.tabs }) }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime233.jsx)(BaseHeader, { ...otherProps, rightSlot: /* @__PURE__ */ (0, import_jsx_runtime233.jsxs)(import_jsx_runtime233.Fragment, { children: [
+    rightSlot,
+    actions && actions.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime233.jsx)(HeaderActions, { actions, collapseOnSm: true })
+  ] }), bottomSlot: tabs && /* @__PURE__ */ (0, import_jsx_runtime233.jsx)("div", { ...(0, import_runtime150.trussProps)(pageContentPaddingX), children: /* @__PURE__ */ (0, import_jsx_runtime233.jsx)(Tabs, { ...tabs, ...tid.tabs }) }) });
 }
 
 // src/layouts/useBannerAndNavbarHeight.ts