@homebound/beam 3.51.0 → 3.53.0

package/dist/index.cjs

@@ -312,6 +312,7 @@ __export(index_exports, {
   px: () => px,
   recursivelyGetContainingRow: () => recursivelyGetContainingRow,
   reservedRowKinds: () => reservedRowKinds,
+  resolveGridTableLayoutStyle: () => resolveGridTableLayoutStyle,
   resolveTableContentWidth: () => resolveTableContentWidth,
   resolveTooltip: () => resolveTooltip,
   rowClickRenderFn: () => rowClickRenderFn,
@@ -9066,23 +9067,26 @@ var cardStyle = {
     rowIndent: level > 0 ? 24 * level : void 0
   })
 };
-function resolveStyles(style) {
-  const defKeysRecord = {
-    inlineEditing: true,
-    grouped: true,
-    rowHeight: true,
-    cellHighlight: true,
-    allWhite: true,
-    bordered: true,
-    rowHover: true,
-    vAlign: true,
-    cellTypography: true,
-    highlightOnHover: true,
-    roundedHeader: true
-  };
+var gridStyleDefKeysRecord = {
+  inlineEditing: true,
+  grouped: true,
+  rowHeight: true,
+  cellHighlight: true,
+  allWhite: true,
+  bordered: true,
+  rowHover: true,
+  vAlign: true,
+  cellTypography: true,
+  highlightOnHover: true,
+  roundedHeader: true
+};
+function isGridStyleDef(style) {
   const keys = safeKeys(style);
-  const defKeys = safeKeys(defKeysRecord);
-  if (keys.length === 0 || keys.some((k) => defKeys.includes(k))) {
+  const defKeys = safeKeys(gridStyleDefKeysRecord);
+  return keys.length === 0 || keys.some((k) => defKeys.includes(k));
+}
+function resolveStyles(style) {
+  if (isGridStyleDef(style)) {
     return getTableStyles(style);
   }
   return style;
@@ -17041,7 +17045,7 @@ function GridTableEmptyState(props) {
     actions
   } = props;
   const tid = useTestIds(props, "gridTableEmptyState");
-  return /* @__PURE__ */ (0, import_jsx_runtime94.jsxs)("div", { className: "df fdc aic pt8 pb8 gap2", ...tid, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime94.jsxs)("div", { className: "df fdc aic pt_12 pb_12 gap2", ...tid, children: [
     /* @__PURE__ */ (0, import_jsx_runtime94.jsx)("div", { className: "fw6 fz_20px lh_28px", ...tid.title, children: title }),
     description && /* @__PURE__ */ (0, import_jsx_runtime94.jsx)("div", { className: "fw4 fz_14px lh_20px gray700", ...tid.description, children: description }),
     actions && /* @__PURE__ */ (0, import_jsx_runtime94.jsx)("div", { ...tid.actions, children: actions })
@@ -20411,6 +20415,27 @@ function invertSpacing(value) {
 var import_utils131 = require("@react-aria/utils");
 var import_react113 = __toESM(require("react"), 1);
 
+// src/components/Filters/utils.tsx
+function getActiveFilterCount(filter) {
+  return safeKeys(filter).filter((key) => isDefined(filter[key])).length;
+}
+function updateFilter(currentFilter, key, value) {
+  if (value === void 0) {
+    return omitKey(key, currentFilter);
+  } else {
+    return { ...currentFilter, [key]: value };
+  }
+}
+var filterTestIdPrefix = "filter";
+
+// src/components/Layout/layoutTypes.ts
+function isGridTableProps(props) {
+  return "rows" in props;
+}
+
+// src/components/Layout/GridTableLayout/GridTableLayoutActions.tsx
+var import_react110 = require("react");
+
 // src/components/ButtonMenu.tsx
 var import_react105 = require("react");
 var import_react_aria51 = require("react-aria");
@@ -20448,27 +20473,6 @@ function isSelectionButtonMenuProps(props) {
   return typeof props === "object" && "selectedItem" in props && "onChange" in props;
 }
 
-// src/components/Filters/utils.tsx
-function getActiveFilterCount(filter) {
-  return safeKeys(filter).filter((key) => isDefined(filter[key])).length;
-}
-function updateFilter(currentFilter, key, value) {
-  if (value === void 0) {
-    return omitKey(key, currentFilter);
-  } else {
-    return { ...currentFilter, [key]: value };
-  }
-}
-var filterTestIdPrefix = "filter";
-
-// src/components/Layout/layoutTypes.ts
-function isGridTableProps(props) {
-  return "rows" in props;
-}
-
-// src/components/Layout/GridTableLayout/GridTableLayoutActions.tsx
-var import_react110 = require("react");
-
 // src/components/CountBadge.tsx
 var import_runtime81 = require("@homebound/truss/runtime");
 var import_jsx_runtime140 = require("react/jsx-runtime");
@@ -21338,7 +21342,8 @@ function GridTableLayoutActionsComponent(props) {
     view,
     setView,
     clearFilters,
-    searchApi
+    searchApi,
+    actionMenu
   } = props;
   const testId = useTestIds(props, "gridTableLayoutActions");
   const {
@@ -21408,9 +21413,12 @@ function GridTableLayoutActionsComponent(props) {
           /* @__PURE__ */ (0, import_jsx_runtime156.jsx)(Icon, { icon: showFilters ? "chevronUp" : "chevronDown" })
         ] }), variant: "secondaryBlack", onClick: () => setShowFilters(!showFilters), active: showFilters, ...testId.filterButton })
       ] }),
-      (hasHideableColumns || withCardView) && /* @__PURE__ */ (0, import_jsx_runtime156.jsxs)("div", { className: "df gap_12px", children: [
+      (hasHideableColumns || withCardView || actionMenu) && /* @__PURE__ */ (0, import_jsx_runtime156.jsxs)("div", { className: "df aic gap_12px", children: [
         hasHideableColumns && view === "list" && columns && api && /* @__PURE__ */ (0, import_jsx_runtime156.jsx)(EditColumnsButton, { columns, api, tooltip: "Display columns" }),
-        withCardView && view !== void 0 && setView && /* @__PURE__ */ (0, import_jsx_runtime156.jsx)(ViewToggleButton, { view, onChange: setView })
+        withCardView && view !== void 0 && setView && /* @__PURE__ */ (0, import_jsx_runtime156.jsx)(ViewToggleButton, { view, onChange: setView }),
+        actionMenu && /* @__PURE__ */ (0, import_jsx_runtime156.jsx)(ButtonMenu, { ...actionMenu, trigger: {
+          icon: "verticalDots"
+        } })
       ] })
     ] }),
     sm && showSearch && /* @__PURE__ */ (0, import_jsx_runtime156.jsx)("div", { className: "pl3 pr3", children: searchTextField }),
@@ -21539,13 +21547,8 @@ var __maybeInc15 = (inc) => {
 };
 function GridTableLayoutComponent(props) {
   const {
-    pageTitle,
-    breadCrumb,
     tableProps,
     layoutState,
-    primaryAction,
-    secondaryAction,
-    tertiaryAction,
     actionMenu,
     hideEditColumns = false,
     withCardView,
@@ -21562,7 +21565,7 @@ function GridTableLayoutComponent(props) {
   const api = (0, import_react113.useMemo)(() => tableProps.api ?? new GridTableApiImpl(), [tableProps.api]);
   const [view, setView] = usePersistedTableView(defaultView, !!withCardView);
   const clientSearch = layoutState?.search === "client" ? layoutState.searchString : void 0;
-  const showTableActions = !!(layoutState?.filterDefs || layoutState?.search || hasHideableColumns || withCardView);
+  const showTableActions = !!(layoutState?.filterDefs || layoutState?.search || hasHideableColumns || withCardView || actionMenu);
   const isVirtualized = tableProps.as === "virtual" || !!withCardView && view === "card";
   const inDocumentScrollLayout = useDocumentScrollLayout();
   const tableActionsRef = (0, import_react113.useRef)(null);
@@ -21584,19 +21587,14 @@ function GridTableLayoutComponent(props) {
     searchApiRef.current?.clear();
   }, [layoutState]);
   const emptyState = (0, import_react113.useMemo)(() => composeEmptyState(tableProps, layoutState, layoutEmptyFallback, clearFilters), [layoutEmptyFallback, layoutState, tableProps, clearFilters]);
-  const tableActionsEl = /* @__PURE__ */ (0, import_jsx_runtime159.jsx)(_GridTableLayoutActions, { filterDefs: layoutState?.filterDefs, filter: layoutState?.filter, setFilter: layoutState?.setFilter, groupBy: layoutState?.groupBy, searchProps: filterSearchProps, hasHideableColumns, columns, api, withCardView, view, setView, clearFilters, searchApi: searchApiRef });
+  const tableActionsEl = /* @__PURE__ */ (0, import_jsx_runtime159.jsx)(_GridTableLayoutActions, { filterDefs: layoutState?.filterDefs, filter: layoutState?.filter, setFilter: layoutState?.setFilter, groupBy: layoutState?.groupBy, searchProps: filterSearchProps, hasHideableColumns, columns, api, withCardView, view, setView, clearFilters, searchApi: searchApiRef, actionMenu });
   const cardAs = withCardView && view === "card" ? "card" : void 0;
+  const tableStyle = resolveGridTableLayoutStyle(tableProps.style, inDocumentScrollLayout);
   const tableBody = /* @__PURE__ */ (0, import_jsx_runtime159.jsx)(import_jsx_runtime159.Fragment, { children: isGridTableProps(tableProps) ? /* @__PURE__ */ (0, import_jsx_runtime159.jsx)(GridTable, { ...tableProps, ...cardAs ? {
     as: cardAs
-  } : {}, api, emptyState, filter: clientSearch, style: {
-    allWhite: true,
-    roundedHeader: !inDocumentScrollLayout
-  }, stickyHeader: true, disableColumnResizing: false, visibleColumnsStorageKey, columnGutter: inDocumentScrollLayout }) : /* @__PURE__ */ (0, import_jsx_runtime159.jsx)(QueryTable, { ...tableProps, ...cardAs ? {
+  } : {}, api, emptyState, filter: clientSearch, style: tableStyle, stickyHeader: true, disableColumnResizing: false, visibleColumnsStorageKey, columnGutter: inDocumentScrollLayout }) : /* @__PURE__ */ (0, import_jsx_runtime159.jsx)(QueryTable, { ...tableProps, ...cardAs ? {
     as: cardAs
-  } : {}, api, emptyState, filter: clientSearch, style: {
-    allWhite: true,
-    roundedHeader: !inDocumentScrollLayout
-  }, stickyHeader: true, disableColumnResizing: false, visibleColumnsStorageKey, columnGutter: inDocumentScrollLayout }) });
+  } : {}, api, emptyState, filter: clientSearch, style: tableStyle, stickyHeader: true, disableColumnResizing: false, visibleColumnsStorageKey, columnGutter: inDocumentScrollLayout }) });
   const tableScrollContent = /* @__PURE__ */ (0, import_jsx_runtime159.jsxs)(import_jsx_runtime159.Fragment, { children: [
     showTableActions && /* @__PURE__ */ (0, import_jsx_runtime159.jsx)("div", { ref: tableActionsRef, ...(0, import_runtime88.trussProps)({
       ...inDocumentScrollLayout ? {
@@ -21621,10 +21619,10 @@ function GridTableLayoutComponent(props) {
     }), ...tid.stickyContent, children: tableActionsEl }),
     inDocumentScrollLayout ? tableBody : /* @__PURE__ */ (0, import_jsx_runtime159.jsx)(ScrollableContent, { virtualized: isVirtualized, children: tableBody })
   ] });
-  return /* @__PURE__ */ (0, import_jsx_runtime159.jsxs)(import_jsx_runtime159.Fragment, { children: [
-    pageTitle && /* @__PURE__ */ (0, import_jsx_runtime159.jsx)(Header2, { pageTitle, breadCrumb, primaryAction, secondaryAction, tertiaryAction, actionMenu }),
+  return (
+    /* Wrapper sets --beam-table-actions-height so GridTable's sticky header can read it. */
     /* @__PURE__ */ (0, import_jsx_runtime159.jsx)("div", { ref: tableWrapperRef, className: "display_contents", ...tid.tableWrapper, children: tableScrollContent })
-  ] });
+  );
 }
 var GridTableLayout = import_react113.default.memo(GridTableLayoutComponent);
 function validateColumns(columns) {
@@ -21712,42 +21710,21 @@ function useSetTableActionsHeight(tableWrapperRef, tableActionsRef, enabled) {
     };
   }, [tableWrapperRef, syncHeightVar]);
 }
-function Header2(props) {
-  const {
-    pageTitle,
-    breadCrumb,
-    primaryAction,
-    secondaryAction,
-    tertiaryAction,
-    actionMenu
-  } = props;
-  const tids = useTestIds(props);
-  return /* @__PURE__ */ (0, import_jsx_runtime159.jsx)(FullBleed, { children: /* @__PURE__ */ (0, import_jsx_runtime159.jsxs)("header", { ...(0, import_runtime88.trussProps)({
-    ...{
-      paddingTop: "pt3",
-      paddingBottom: "pb3",
-      paddingRight: "pr3",
-      paddingLeft: "pl3",
-      minHeight: "mh_50px",
-      backgroundColor: "bgWhite",
-      display: "df",
-      justifyContent: "jcsb",
-      alignItems: "aic"
-    }
-  }), ...tids.header, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime159.jsxs)("div", { children: [
-      breadCrumb && /* @__PURE__ */ (0, import_jsx_runtime159.jsx)(PageHeaderBreadcrumbs, { breadcrumb: breadCrumb }),
-      /* @__PURE__ */ (0, import_jsx_runtime159.jsx)("h1", { className: "fw6 fz_30px lh_36px mt1", ...tids.pageTitle, children: pageTitle })
-    ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime159.jsxs)("div", { className: "df fwr jcfe gap1 aic", children: [
-      tertiaryAction && /* @__PURE__ */ (0, import_jsx_runtime159.jsx)(Button, { ...tertiaryAction, variant: "tertiary" }),
-      secondaryAction && /* @__PURE__ */ (0, import_jsx_runtime159.jsx)(Button, { ...secondaryAction, variant: "secondary" }),
-      primaryAction && /* @__PURE__ */ (0, import_jsx_runtime159.jsx)(Button, { ...primaryAction }),
-      actionMenu && /* @__PURE__ */ (0, import_jsx_runtime159.jsx)(ButtonMenu, { ...actionMenu, trigger: {
-        icon: "verticalDots"
-      } })
-    ] })
-  ] }) });
+function resolveGridTableLayoutStyle(userStyle, inDocumentScrollLayout) {
+  const layoutDefaults = {
+    allWhite: true,
+    roundedHeader: !inDocumentScrollLayout
+  };
+  if (userStyle === void 0) {
+    return layoutDefaults;
+  }
+  if (isGridStyleDef(userStyle)) {
+    return {
+      ...layoutDefaults,
+      ...userStyle
+    };
+  }
+  return userStyle;
 }
 
 // src/components/Layout/PreventBrowserScroll.tsx
@@ -26213,6 +26190,7 @@ function PageHeaderLayout(props) {
   px,
   recursivelyGetContainingRow,
   reservedRowKinds,
+  resolveGridTableLayoutStyle,
   resolveTableContentWidth,
   resolveTooltip,
   rowClickRenderFn,