@homebound/beam 3.39.0 → 3.40.0

package/dist/index.cjs

@@ -182,6 +182,7 @@ __export(index_exports, {
   Tabs: () => Tabs,
   TabsWithContent: () => TabsWithContent,
   Tag: () => Tag,
+  TagGroup: () => TagGroup,
   TextAreaField: () => TextAreaField,
   TextField: () => TextField,
   Toast: () => Toast,
@@ -9380,7 +9381,7 @@ function RowImpl(props) {
     const tooltip = isGridCellContent(maybeContent) ? maybeContent.tooltip : void 0;
     const renderFn = (rowStyle?.renderCell || rowStyle?.rowLink) && wrapAction ? rowLinkRenderFn(as, currentColspan) : isHeader || isTotals || isExpandableHeader ? headerRenderFn(column2, as, currentColspan) : rowStyle?.onClick && wrapAction ? rowClickRenderFn(as, api, currentColspan) : defaultRenderFn(as, currentColspan);
     const cellElement = renderFn(columnIndex, cellCss, content, row, rowStyle, void 0, cellOnClick, tooltip);
-    if (!disableColumnResizing && isHeader && columnIndex < columns.length - 1 && currentColspan === 1 && !isContentColumn(column2)) {
+    if (!disableColumnResizing && isHeader && columnIndex < columns.length - 1 && currentColspan === 1 && isContentColumn(column2)) {
       const currentSizeStr = columnSizes[columnIndex];
       const minWidthPx = column2.mw ? parseInt(column2.mw.replace("px", ""), 10) : 100;
       const currentWidthPx = parseWidthToPx(currentSizeStr, void 0) ?? resizedWidths?.[column2.id] ?? minWidthPx;
@@ -21984,6 +21985,7 @@ function Tag(props) {
   const {
     text,
     type,
+    variant = "primary",
     xss,
     preventTooltip = false,
     iconOnly,
@@ -21993,8 +21995,10 @@ function Tag(props) {
   const isIconOnly = !!iconOnly && !!icon;
   const {
     background,
-    iconColor
-  } = getStyles(type);
+    iconColor,
+    typography,
+    padding
+  } = getVariantStyles(variant, type);
   const tid = useTestIds(otherProps);
   const [showTooltip, setShowTooltip] = (0, import_react117.useState)(false);
   const ref = (0, import_react117.useRef)(null);
@@ -22013,10 +22017,6 @@ function Tag(props) {
       ...{
         position: "relative",
         display: "dif",
-        fontWeight: "fw6",
-        fontSize: "fz_10px",
-        lineHeight: "lh_14px",
-        textTransform: "ttu",
         alignItems: "aic",
         gap: "gap_4px",
         paddingTop: "pt_2px",
@@ -22024,13 +22024,11 @@ function Tag(props) {
         color: "gray900",
         borderRadius: "br4"
       },
+      ...typography,
       ...isIconOnly ? {
         paddingLeft: "pl_2px",
         paddingRight: "pr_2px"
-      } : {
-        paddingLeft: "pl_6px",
-        paddingRight: "pr_6px"
-      },
+      } : padding,
       ...background,
       ...xss
     }), children: [
@@ -22039,7 +22037,42 @@ function Tag(props) {
     ] })
   });
 }
-function getStyles(type) {
+function getVariantStyles(variant, type) {
+  if (variant === "secondary") {
+    return {
+      background: {
+        backgroundColor: "bgWhite",
+        borderColor: "bcGray300",
+        borderWidth: "bw1",
+        borderStyle: "bss"
+      },
+      iconColor: "rgba(100, 100, 100, 1)" /* Gray700 */,
+      typography: {
+        fontWeight: "fw4",
+        fontSize: "fz_12px",
+        lineHeight: "lh_16px"
+      },
+      padding: {
+        paddingLeft: "pl_8px",
+        paddingRight: "pr_8px"
+      }
+    };
+  }
+  return {
+    ...getPrimaryStyles(type),
+    typography: {
+      fontWeight: "fw6",
+      fontSize: "fz_10px",
+      lineHeight: "lh_14px",
+      textTransform: "ttu"
+    },
+    padding: {
+      paddingLeft: "pl_6px",
+      paddingRight: "pr_6px"
+    }
+  };
+}
+function getPrimaryStyles(type) {
   switch (type) {
     case "info":
       return {
@@ -24709,6 +24742,21 @@ function visit(rows, fn) {
   }
 }
 
+// src/components/TagGroup.tsx
+var import_jsx_runtime192 = require("react/jsx-runtime");
+function TagGroup(props) {
+  const {
+    tags,
+    onEdit,
+    ...otherProps
+  } = props;
+  const tid = useTestIds(otherProps, "tagGroup");
+  return /* @__PURE__ */ (0, import_jsx_runtime192.jsxs)("div", { ...tid, className: "df aic fww gap1", children: [
+    tags.map((tag) => /* @__PURE__ */ (0, import_jsx_runtime192.jsx)(Tag, { ...tag, variant: "secondary" }, tag.text)),
+    onEdit && /* @__PURE__ */ (0, import_jsx_runtime192.jsx)("span", { className: "ml1 fw4 fz_14px lh_20px", children: /* @__PURE__ */ (0, import_jsx_runtime192.jsx)(Button, { label: "Edit", variant: "text", onClick: onEdit, ...tid.edit }) })
+  ] });
+}
+
 // src/components/Toast/useToast.tsx
 var import_react140 = require("react");
 function useToast() {
@@ -24719,14 +24767,14 @@ function useToast() {
 
 // src/layouts/SideNavLayout/SideNavLayout.tsx
 var import_runtime108 = require("@homebound/truss/runtime");
-var import_jsx_runtime192 = require("react/jsx-runtime");
+var import_jsx_runtime193 = require("react/jsx-runtime");
 var __maybeInc21 = (inc) => {
   return typeof inc === "string" ? inc : `calc(var(--t-spacing) * ${inc})`;
 };
 function SideNavLayout(props) {
   const hasProvider = useHasSideNavLayoutProvider();
-  if (hasProvider) return /* @__PURE__ */ (0, import_jsx_runtime192.jsx)(SideNavLayoutContent, { ...props });
-  return /* @__PURE__ */ (0, import_jsx_runtime192.jsx)(SideNavLayoutProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime192.jsx)(SideNavLayoutContent, { ...props }) });
+  if (hasProvider) return /* @__PURE__ */ (0, import_jsx_runtime193.jsx)(SideNavLayoutContent, { ...props });
+  return /* @__PURE__ */ (0, import_jsx_runtime193.jsx)(SideNavLayoutProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime193.jsx)(SideNavLayoutContent, { ...props }) });
 }
 function SideNavLayoutContent(props) {
   const {
@@ -24748,7 +24796,7 @@ function SideNavLayoutContent(props) {
   const railOffsetPx = !showRail ? 0 : !bp.mdAndUp || collapsed ? railCollapsedWidthPx : railWidthPx;
   const navTop = bannerAndNavbarChromeTop();
   const railViewportHeight = `calc(var(${beamLayoutViewportHeightVar}, 100vh) - var(${beamEnvironmentBannerLayoutHeightVar}, 0px) - var(${beamNavbarLayoutHeightVar}, 0px))`;
-  const rail = showRail && /* @__PURE__ */ (0, import_jsx_runtime192.jsxs)("div", { ...(0, import_runtime108.trussProps)({
+  const rail = showRail && /* @__PURE__ */ (0, import_jsx_runtime193.jsxs)("div", { ...(0, import_runtime108.trussProps)({
     ...{
       display: "df",
       flexDirection: "fdc",
@@ -24805,18 +24853,18 @@ function SideNavLayoutContent(props) {
       }
     }
   }), ...tid.sideNav, children: [
-    showCollapseToggle && /* @__PURE__ */ (0, import_jsx_runtime192.jsx)("div", { className: "absolute right2 top2 z2", children: /* @__PURE__ */ (0, import_jsx_runtime192.jsx)(IconButton, { icon: collapsed ? "menuOpen" : "menuClose", label: collapsed ? "Expand navigation" : "Collapse navigation", onClick: () => setNavState(collapsed ? "expanded" : "collapse"), ...tid.toggle }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime192.jsx)("div", { className: "fg1 mh0 df fdc", ...tid.sideNavContent, children: /* @__PURE__ */ (0, import_jsx_runtime192.jsx)(SideNav, { ...sideNav }) })
+    showCollapseToggle && /* @__PURE__ */ (0, import_jsx_runtime193.jsx)("div", { className: "absolute right2 top2 z2", children: /* @__PURE__ */ (0, import_jsx_runtime193.jsx)(IconButton, { icon: collapsed ? "menuOpen" : "menuClose", label: collapsed ? "Expand navigation" : "Collapse navigation", onClick: () => setNavState(collapsed ? "expanded" : "collapse"), ...tid.toggle }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime193.jsx)("div", { className: "fg1 mh0 df fdc", ...tid.sideNavContent, children: /* @__PURE__ */ (0, import_jsx_runtime193.jsx)(SideNav, { ...sideNav }) })
   ] });
-  return /* @__PURE__ */ (0, import_jsx_runtime192.jsx)(DocumentScrollLayoutProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime192.jsxs)("div", { ...(0, import_runtime108.mergeProps)(void 0, {
+  return /* @__PURE__ */ (0, import_jsx_runtime193.jsx)(DocumentScrollLayoutProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime193.jsxs)("div", { ...(0, import_runtime108.mergeProps)(void 0, {
     [beamSideNavLayoutWidthVar]: `${railOffsetPx}px`
   }, {
     display: "df",
     flexDirection: "fdr",
     width: "w100"
   }), ...tid, children: [
-    contrastRail ? /* @__PURE__ */ (0, import_jsx_runtime192.jsx)(ContrastScope, { children: rail }) : rail,
-    /* @__PURE__ */ (0, import_jsx_runtime192.jsx)("div", { ...(0, import_runtime108.trussProps)({
+    contrastRail ? /* @__PURE__ */ (0, import_jsx_runtime193.jsx)(ContrastScope, { children: rail }) : rail,
+    /* @__PURE__ */ (0, import_jsx_runtime193.jsx)("div", { ...(0, import_runtime108.trussProps)({
       display: "df",
       flexDirection: "fdc",
       flexGrow: "fg1",
@@ -24833,7 +24881,7 @@ function SideNavLayoutContent(props) {
 
 // src/layouts/EnvironmentBannerLayout/EnvironmentBannerLayout.tsx
 var import_runtime109 = require("@homebound/truss/runtime");
-var import_jsx_runtime193 = require("react/jsx-runtime");
+var import_jsx_runtime194 = require("react/jsx-runtime");
 var __maybeInc22 = (inc) => {
   return typeof inc === "string" ? inc : `calc(var(--t-spacing) * ${inc})`;
 };
@@ -24849,18 +24897,18 @@ function EnvironmentBannerLayout(props) {
     [beamEnvironmentBannerLayoutHeightVar]: `${bannerHeightPx}px`
   };
   const innerWidth = `var(${beamLayoutViewportWidthVar}, 100vw)`;
-  return /* @__PURE__ */ (0, import_jsx_runtime193.jsx)(DocumentScrollLayoutProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime193.jsx)(EnvironmentBannerLayoutHeightProvider, { value: bannerHeightPx, children: /* @__PURE__ */ (0, import_jsx_runtime193.jsxs)("div", { ...(0, import_runtime109.mergeProps)(void 0, style, {
+  return /* @__PURE__ */ (0, import_jsx_runtime194.jsx)(DocumentScrollLayoutProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime194.jsx)(EnvironmentBannerLayoutHeightProvider, { value: bannerHeightPx, children: /* @__PURE__ */ (0, import_jsx_runtime194.jsxs)("div", { ...(0, import_runtime109.mergeProps)(void 0, style, {
     display: "df",
     flexDirection: "fdc",
     width: "wfc",
     minWidth: "mw100"
   }), ...tid, children: [
-    showBanner && environmentBanner && /* @__PURE__ */ (0, import_jsx_runtime193.jsx)("div", { ...(0, import_runtime109.mergeProps)(void 0, {
+    showBanner && environmentBanner && /* @__PURE__ */ (0, import_jsx_runtime194.jsx)("div", { ...(0, import_runtime109.mergeProps)(void 0, {
       height: environmentBannerSizePx
     }, {
       flexShrink: "fs0",
       width: "w100"
-    }), children: /* @__PURE__ */ (0, import_jsx_runtime193.jsx)("div", { ...(0, import_runtime109.trussProps)({
+    }), children: /* @__PURE__ */ (0, import_jsx_runtime194.jsx)("div", { ...(0, import_runtime109.trussProps)({
       position: "fixed",
       top: "top0",
       left: "left0",
@@ -24870,7 +24918,7 @@ function EnvironmentBannerLayout(props) {
       width: ["w_var", {
         "--width": (0, import_runtime109.maybeCssVar)(__maybeInc22(innerWidth))
       }]
-    }), ...tid.bannerSticky, children: /* @__PURE__ */ (0, import_jsx_runtime193.jsx)(EnvironmentBanner, { ...environmentBanner, ...tid.environmentBanner }) }) }),
+    }), ...tid.bannerSticky, children: /* @__PURE__ */ (0, import_jsx_runtime194.jsx)(EnvironmentBanner, { ...environmentBanner, ...tid.environmentBanner }) }) }),
     children
   ] }) }) });
 }
@@ -24970,7 +25018,7 @@ function useAutoHideOnScroll(spacerRef, enabled, getTopOffset) {
 }
 
 // src/layouts/useMeasuredHeight.ts
-var import_utils160 = require("@react-aria/utils");
+var import_utils161 = require("@react-aria/utils");
 var import_react142 = require("react");
 function useMeasuredHeight(ref, enabled) {
   const [height, setHeight] = (0, import_react142.useState)(0);
@@ -24979,7 +25027,7 @@ function useMeasuredHeight(ref, enabled) {
     const next = el ? Math.round(el.getBoundingClientRect().height) : 0;
     setHeight((prev) => prev === next ? prev : next);
   }, [ref]);
-  (0, import_utils160.useResizeObserver)({ ref, onResize: syncElementHeight });
+  (0, import_utils161.useResizeObserver)({ ref, onResize: syncElementHeight });
   (0, import_react142.useLayoutEffect)(() => {
     syncElementHeight();
   }, [enabled, syncElementHeight]);
@@ -24988,17 +25036,17 @@ function useMeasuredHeight(ref, enabled) {
 
 // src/layouts/NavbarLayout/NavbarLayoutHeightContext.tsx
 var import_react143 = require("react");
-var import_jsx_runtime194 = require("react/jsx-runtime");
+var import_jsx_runtime195 = require("react/jsx-runtime");
 var NavbarLayoutHeightContext = (0, import_react143.createContext)(0);
 function NavbarLayoutHeightProvider({ value, children }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime194.jsx)(NavbarLayoutHeightContext.Provider, { value, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime195.jsx)(NavbarLayoutHeightContext.Provider, { value, children });
 }
 function useNavbarLayoutHeight() {
   return (0, import_react143.useContext)(NavbarLayoutHeightContext);
 }
 
 // src/layouts/NavbarLayout/NavbarLayout.tsx
-var import_jsx_runtime195 = require("react/jsx-runtime");
+var import_jsx_runtime196 = require("react/jsx-runtime");
 var __maybeInc23 = (inc) => {
   return typeof inc === "string" ? inc : `calc(var(--t-spacing) * ${inc})`;
 };
@@ -25051,20 +25099,20 @@ function NavbarLayout(props) {
   const innerStyle = autoHideState !== "static" ? {
     top: autoHideState === "revealed" ? bannerTop : `calc(${bannerTop} - ${navHeight}px)`
   } : void 0;
-  const navbarEl = (0, import_react144.useMemo)(() => /* @__PURE__ */ (0, import_jsx_runtime195.jsx)(Navbar, { ...navbar }), [navbar]);
-  return /* @__PURE__ */ (0, import_jsx_runtime195.jsx)(DocumentScrollLayoutProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime195.jsx)(NavbarLayoutHeightProvider, { value: navbarOffsetPx, children: /* @__PURE__ */ (0, import_jsx_runtime195.jsxs)("div", { ...(0, import_runtime110.mergeProps)(void 0, cssVars, {
+  const navbarEl = (0, import_react144.useMemo)(() => /* @__PURE__ */ (0, import_jsx_runtime196.jsx)(Navbar, { ...navbar }), [navbar]);
+  return /* @__PURE__ */ (0, import_jsx_runtime196.jsx)(DocumentScrollLayoutProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime196.jsx)(NavbarLayoutHeightProvider, { value: navbarOffsetPx, children: /* @__PURE__ */ (0, import_jsx_runtime196.jsxs)("div", { ...(0, import_runtime110.mergeProps)(void 0, cssVars, {
     display: "df",
     flexDirection: "fdc",
     width: "wfc",
     minWidth: "mw100"
   }), ...tid, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime195.jsx)("div", { ref: spacerRef, ...(0, import_runtime110.mergeProps)(void 0, {
+    /* @__PURE__ */ (0, import_jsx_runtime196.jsx)("div", { ref: spacerRef, ...(0, import_runtime110.mergeProps)(void 0, {
       height: navHeight
     }, {
       flexShrink: "fs0",
       width: "w100"
-    }), children: /* @__PURE__ */ (0, import_jsx_runtime195.jsx)("div", { ref: navMetricsRef, ...(0, import_runtime110.mergeProps)(void 0, innerStyle, innerCss), ...tid.navbar, children: navbarEl }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime195.jsx)("div", { className: "df fdc mh0 mw100 w100", ...tid.body, children })
+    }), children: /* @__PURE__ */ (0, import_jsx_runtime196.jsx)("div", { ref: navMetricsRef, ...(0, import_runtime110.mergeProps)(void 0, innerStyle, innerCss), ...tid.navbar, children: navbarEl }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime196.jsx)("div", { className: "df fdc mh0 mw100 w100", ...tid.body, children })
   ] }) }) });
 }
 
@@ -25078,7 +25126,7 @@ function useBannerAndNavbarHeight() {
 
 // src/layouts/PageHeaderLayout/PageHeaderLayout.tsx
 var import_runtime111 = require("@homebound/truss/runtime");
-var import_jsx_runtime196 = require("react/jsx-runtime");
+var import_jsx_runtime197 = require("react/jsx-runtime");
 var __maybeInc24 = (inc) => {
   return typeof inc === "string" ? inc : `calc(var(--t-spacing) * ${inc})`;
 };
@@ -25133,19 +25181,19 @@ function PageHeaderLayout(props) {
   const innerStyle = autoHideState !== "static" ? {
     top: autoHideState === "revealed" ? outerTop : `calc(${outerTop} - ${headerHeight}px)`
   } : void 0;
-  const pageHeaderEl = (0, import_react145.useMemo)(() => /* @__PURE__ */ (0, import_jsx_runtime196.jsx)(PageHeader2, { ...pageHeader }), [pageHeader]);
-  return /* @__PURE__ */ (0, import_jsx_runtime196.jsx)(DocumentScrollLayoutProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime196.jsxs)("div", { ...(0, import_runtime111.mergeProps)(void 0, cssVars, {
+  const pageHeaderEl = (0, import_react145.useMemo)(() => /* @__PURE__ */ (0, import_jsx_runtime197.jsx)(PageHeader2, { ...pageHeader }), [pageHeader]);
+  return /* @__PURE__ */ (0, import_jsx_runtime197.jsx)(DocumentScrollLayoutProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime197.jsxs)("div", { ...(0, import_runtime111.mergeProps)(void 0, cssVars, {
     display: "df",
     flexDirection: "fdc",
     width: "w100"
   }), ...tid, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime196.jsx)("div", { ref: spacerRef, ...(0, import_runtime111.mergeProps)(void 0, {
+    /* @__PURE__ */ (0, import_jsx_runtime197.jsx)("div", { ref: spacerRef, ...(0, import_runtime111.mergeProps)(void 0, {
       height: headerHeight
     }, {
       flexShrink: "fs0",
       width: "w100"
-    }), children: /* @__PURE__ */ (0, import_jsx_runtime196.jsx)("div", { ref: headerMetricsRef, ...(0, import_runtime111.mergeProps)(void 0, innerStyle, innerCss), ...tid.pageHeader, children: pageHeaderEl }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime196.jsx)("div", { className: "df fdc fg1 mh0 w100", ...tid.body, children })
+    }), children: /* @__PURE__ */ (0, import_jsx_runtime197.jsx)("div", { ref: headerMetricsRef, ...(0, import_runtime111.mergeProps)(void 0, innerStyle, innerCss), ...tid.pageHeader, children: pageHeaderEl }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime197.jsx)("div", { className: "df fdc fg1 mh0 w100", ...tid.body, children })
   ] }) });
 }
 // Annotate the CommonJS export names for ESM import in node:
@@ -25302,6 +25350,7 @@ function PageHeaderLayout(props) {
   Tabs,
   TabsWithContent,
   Tag,
+  TagGroup,
   TextAreaField,
   TextField,
   Toast,