@homebound/beam 3.43.0 → 3.45.0

package/dist/index.cjs

@@ -7843,7 +7843,7 @@ function PinToggle({ rowId }) {
     {
       ...tid[rowId],
       icon: "pin",
-      bgColor: isPinned ? "rgba(110, 231, 183, 1)" /* Green300 */ : void 0,
+      color: isPinned ? "rgba(37, 99, 235, 1)" /* Blue600 */ : void 0,
       label: isPinned ? "Unpin row" : "Pin row",
       onClick: () => tableState.togglePinned(rowId)
     }
@@ -8975,11 +8975,11 @@ function memoizedTableStyles() {
         keptLastRowCss: {
           boxShadow: "boxShadow_inset_0px_14px_8px_11px_rgba_63_63_63_18"
         },
-        // Pinned rows get a green highlight; the standard `betweenRowsCss` bottom border (not a
+        // Pinned rows get a blue highlight; the standard `betweenRowsCss` bottom border (not a
         // shadow) already separates the pinned section from the body.
         pinnedRowCss: {
           backgroundColor: ["bgColor_var", {
-            "--backgroundColor": (0, import_runtime20.maybeCssVar)("rgba(236, 253, 245, 1)" /* Green50 */)
+            "--backgroundColor": (0, import_runtime20.maybeCssVar)("rgba(239, 246, 255, 1)" /* Blue50 */)
           }]
         }
       };
@@ -9395,7 +9395,7 @@ function RowImpl(props) {
       ...isGridCellContent(maybeContent) && maybeContent.css ? maybeContent.css : {},
       // Apply kept last row styling per-cell
       ...isLastKeptRow && style.keptLastRowCss,
-      // Apply the green highlight to every runtime-pinned row's cells (wins over `isActive`)
+      // Apply the blue highlight to every runtime-pinned row's cells (wins over `isActive`)
       ...pinned && style.pinnedRowCss,
       // Apply cell highlight styles to active cell and hover
       ...{
@@ -21002,7 +21002,7 @@ function FilterPanelOpen({
   }), children: [
     groupBy && /* @__PURE__ */ (0, import_jsx_runtime148.jsx)(SelectField, { label: "Group by", labelStyle: "inline", sizeToContent: true, options: groupBy.options, getOptionValue: (o) => o.id, getOptionLabel: (o) => o.name, value: groupBy.value, onSelect: (g) => g && groupBy.setValue(g) }),
     filterControls,
-    activeFilterCount > 0 && /* @__PURE__ */ (0, import_jsx_runtime148.jsx)(Button, { label: "Clear", variant: "tertiary", onClick: onClear, ...tid.clearBtn })
+    activeFilterCount > 0 && /* @__PURE__ */ (0, import_jsx_runtime148.jsx)(Button, { label: "Clear", variant: "tertiary", onClick: () => maybeCall(onClear), ...tid.clearBtn })
   ] });
 }
 function FilterPanelClosed({
@@ -21027,7 +21027,7 @@ function FilterPanelClosed({
     } : {}
   }), children: [
     chips,
-    /* @__PURE__ */ (0, import_jsx_runtime148.jsx)(Button, { label: "Clear", variant: "tertiary", onClick: onClear, ...tid.clearBtn })
+    /* @__PURE__ */ (0, import_jsx_runtime148.jsx)(Button, { label: "Clear", variant: "tertiary", onClick: () => maybeCall(onClear), ...tid.clearBtn })
   ] });
 }
 function buildFilterControls(filterImpls, filter, setFilter, testId) {
@@ -21071,7 +21071,9 @@ function GridTableLayoutActionsComponent(props) {
     api,
     withCardView,
     view,
-    setView
+    setView,
+    clearFilters,
+    searchApi
   } = props;
   const testId = useTestIds(props, "gridTableLayoutActions");
   const {
@@ -21102,6 +21104,17 @@ function GridTableLayoutActionsComponent(props) {
     setSearchValue(v ?? "");
     handleSearchDebounced(v ?? "");
   }, placeholder: "Search", clearable: true, fullWidth: true, startAdornment: /* @__PURE__ */ (0, import_jsx_runtime149.jsx)(Icon, { icon: "search", color: "rgba(100, 100, 100, 1)" /* Gray700 */ }) });
+  if (searchApi) {
+    searchApi.current = {
+      clear: () => {
+        handleSearchDebounced.cancel();
+        setSearchValue("");
+        setQueryParams({
+          search: void 0
+        }, "replaceIn");
+      }
+    };
+  }
   return /* @__PURE__ */ (0, import_jsx_runtime149.jsxs)("div", { className: "df fdc gap1 pb2", children: [
     /* @__PURE__ */ (0, import_jsx_runtime149.jsxs)("div", { ...(0, import_runtime79.trussProps)({
       display: "df",
@@ -21128,7 +21141,7 @@ function GridTableLayoutActionsComponent(props) {
       ] })
     ] }),
     sm && showSearch && /* @__PURE__ */ (0, import_jsx_runtime149.jsx)("div", { className: "pl3 pr3", children: searchTextField }),
-    hasFilters && /* @__PURE__ */ (0, import_jsx_runtime149.jsx)(FilterPanel, { isOpen: showFilters, groupBy, filterImpls, filter, setFilter, onClear: () => setFilter?.({}) })
+    hasFilters && /* @__PURE__ */ (0, import_jsx_runtime149.jsx)(FilterPanel, { isOpen: showFilters, groupBy, filterImpls, filter, setFilter, onClear: clearFilters })
   ] });
 }
 var _GridTableLayoutActions = (0, import_react107.memo)(GridTableLayoutActionsComponent);
@@ -21292,8 +21305,13 @@ function GridTableLayoutComponent(props) {
   const filterSearchProps = (0, import_react110.useMemo)(() => layoutState?.search ? {
     onSearch: layoutState.setSearchString
   } : void 0, [layoutState?.search, layoutState?.setSearchString]);
-  const emptyState = (0, import_react110.useMemo)(() => composeEmptyState(tableProps, layoutState, layoutEmptyFallback), [layoutEmptyFallback, layoutState, tableProps]);
-  const tableActionsEl = /* @__PURE__ */ (0, import_jsx_runtime152.jsx)(_GridTableLayoutActions, { filterDefs: layoutState?.filterDefs, filter: layoutState?.filter, setFilter: layoutState?.setFilter, groupBy: layoutState?.groupBy, searchProps: filterSearchProps, hasHideableColumns, columns, api, withCardView, view, setView });
+  const searchApiRef = (0, import_react110.useRef)();
+  const clearFilters = (0, import_react110.useCallback)(() => {
+    layoutState?.clearFilters();
+    searchApiRef.current?.clear();
+  }, [layoutState]);
+  const emptyState = (0, import_react110.useMemo)(() => composeEmptyState(tableProps, layoutState, layoutEmptyFallback, clearFilters), [layoutEmptyFallback, layoutState, tableProps, clearFilters]);
+  const tableActionsEl = /* @__PURE__ */ (0, import_jsx_runtime152.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 cardAs = withCardView && view === "card" ? "card" : void 0;
   const tableBody = /* @__PURE__ */ (0, import_jsx_runtime152.jsx)(import_jsx_runtime152.Fragment, { children: isGridTableProps(tableProps) ? /* @__PURE__ */ (0, import_jsx_runtime152.jsx)(GridTable, { ...tableProps, ...cardAs ? {
     as: cardAs
@@ -21383,7 +21401,7 @@ function useGridTableLayoutState({
     clearFilters
   };
 }
-function composeEmptyState(tableProps, layoutState, layoutEmptyFallback) {
+function composeEmptyState(tableProps, layoutState, layoutEmptyFallback, clearFilters) {
   const tableEmptyState = "emptyState" in tableProps ? tableProps.emptyState : void 0;
   const tableEmptyFallback = "emptyFallback" in tableProps ? tableProps.emptyFallback : void 0;
   const filteringActive = layoutState?.filteringActive ?? false;
@@ -21391,7 +21409,7 @@ function composeEmptyState(tableProps, layoutState, layoutEmptyFallback) {
   return {
     title: tableEmptyState?.title ?? tableEmptyFallback ?? layoutEmptyFallback,
     description: tableEmptyState?.description ?? (filteringActive ? filterEmptyDescription : void 0),
-    actions: tableEmptyState?.actions ?? (filteringActive && layoutState ? /* @__PURE__ */ (0, import_jsx_runtime152.jsx)(Button, { label: "Clear Filters", variant: "tertiary", onClick: layoutState.clearFilters, "data-testid": "clearFilters" }) : void 0)
+    actions: tableEmptyState?.actions ?? (filteringActive && layoutState ? /* @__PURE__ */ (0, import_jsx_runtime152.jsx)(Button, { label: "Clear Filters", variant: "tertiary", onClick: clearFilters, "data-testid": "clearFilters" }) : void 0)
   };
 }
 function useSetTableActionsHeight(tableWrapperRef, tableActionsRef, enabled) {