@bmsuisse/datagrid 0.35.2 → 0.36.0

package/dist/index.d.ts

@@ -258,6 +258,16 @@ type BooleanColumn<TRow> = BaseColumn<TRow> & {
 interface EnumOption {
     value: string;
     label: string;
+    /**
+     * Groups this option under a sticky header in `EnumFilter`'s dropdown,
+     * with a tri-state checkbox that selects/deselects the whole group at
+     * once — mirrors `@bmsuisse/ui`'s `ComboboxOption.group`/
+     * `TagComboboxOption.group`. Options sharing a `group` must be adjacent in
+     * `options`: a header renders the first time a group key is seen, so
+     * interleaved groups would render more than one header for the same key.
+     * Options with no `group` render individually, with no header.
+     */
+    group?: string;
 }
 type EnumColumn<TRow> = BaseColumn<TRow> & {
     type: "enum";
@@ -318,9 +328,22 @@ declare function DateRangeFilter<TRow>({ column, value, onChange, today, bare, }
  * - a tri-state "Select all" checkbox acts on whatever subset is currently
  *   visible after that search, not the full option set — matching Excel's
  *   own column-filter behavior ("select all of what's shown").
+ * - options sharing an `EnumOption.group` render under a sticky group
+ *   header with its own tri-state checkbox, letting a whole group be
+ *   selected/deselected in one click — mirrors `@bmsuisse/ui`'s
+ *   `Combobox`/`TagCombobox` grouped-dropdown treatment (sticky `bg-muted`
+ *   header, same contiguous-group chunking), kept as a local mirror rather
+ *   than a shared dependency since `datagrid` and `ui` are sibling packages
+ *   with no cross-dependency (see that package's `Combobox` doc, which
+ *   mirrors this component's own plain-substring search for the same
+ *   reason). The header's tri-state and toggle are scoped to that group's
+ *   currently-*visible* options, same as "Select all" — unlike `Combobox`,
+ *   which scopes its group toggle to the full option set regardless of
+ *   search.
  * - every visible option gets its own plain checkbox + label row (a real
- *   shadcn `Checkbox`, not a menu item), inside a scrollable list so long
- *   option lists don't blow up the popover's height.
+ *   shadcn `Checkbox`, not a menu item — unlike `Combobox`'s button/`role=
+ *   "option"` rows), inside a scrollable list so long option lists don't
+ *   blow up the popover's height.
  * - every toggle emits the updated `FilterDescriptor` immediately — there's
  *   no OK/Cancel step, matching every other filter widget in this package.
  *

package/dist/index.js

@@ -515,6 +515,27 @@ function selectedValuesOf(value) {
 function toggle(selected, optionValue) {
   return selected.includes(optionValue) ? selected.filter((v) => v !== optionValue) : [...selected, optionValue];
 }
+function buildRenderChunks(options) {
+  const chunks = [];
+  options.forEach((option, index) => {
+    const row = { option, index };
+    const last = chunks[chunks.length - 1];
+    if (option.group && last?.kind === "group" && last.group === option.group) {
+      last.rows.push(row);
+    } else if (option.group) {
+      chunks.push({ kind: "group", group: option.group, rows: [row] });
+    } else {
+      chunks.push({ kind: "single", row });
+    }
+  });
+  return chunks;
+}
+function groupCheckState(candidates, selected, group) {
+  const members = candidates.filter((o) => o.group === group).map((o) => o.value);
+  const selectedCount = members.filter((v) => selected.includes(v)).length;
+  if (members.length === 0 || selectedCount === 0) return "unchecked";
+  return selectedCount === members.length ? "checked" : "indeterminate";
+}
 function EnumFilter({
   column,
   value,
@@ -528,6 +549,7 @@ function EnumFilter({
     if (!term) return column.options;
     return column.options.filter((option) => option.label.toLowerCase().includes(term));
   }, [column.options, search]);
+  const renderChunks = useMemo(() => buildRenderChunks(visibleOptions), [visibleOptions]);
   function emit(next) {
     onChange(next.length === 0 ? void 0 : { field: column.id, operator: "in", value: next });
   }
@@ -544,6 +566,33 @@ function EnumFilter({
     for (const v of visibleValues) next.add(v);
     emit([...next]);
   }
+  function toggleGroup(group) {
+    const members = visibleOptions.filter((o) => o.group === group).map((o) => o.value);
+    if (groupCheckState(visibleOptions, selected, group) === "checked") {
+      emit(selected.filter((v) => !members.includes(v)));
+      return;
+    }
+    emit([.../* @__PURE__ */ new Set([...selected, ...members])]);
+  }
+  function renderOption(option) {
+    return /* @__PURE__ */ jsxs4(
+      "label",
+      {
+        className: "flex items-center gap-2 rounded-sm px-2 py-1.5 text-sm hover:bg-accent hover:text-accent-foreground",
+        children: [
+          /* @__PURE__ */ jsx9(
+            Checkbox,
+            {
+              checked: selected.includes(option.value),
+              onCheckedChange: () => emit(toggle(selected, option.value))
+            }
+          ),
+          option.label
+        ]
+      },
+      option.value
+    );
+  }
   const isFiltered = selected.length > 0;
   const summary = `${selected.length} selected`;
   const panel = /* @__PURE__ */ jsxs4("div", { className: bare ? "flex w-full flex-col gap-2" : "flex w-64 flex-col gap-2 p-2", children: [
@@ -567,23 +616,37 @@ function EnumFilter({
       ),
       "Select all"
     ] }),
-    /* @__PURE__ */ jsx9("div", { className: "flex max-h-60 flex-col gap-1 overflow-y-auto", children: visibleOptions.length === 0 ? /* @__PURE__ */ jsx9("p", { className: "py-2 text-center text-sm text-muted-foreground", children: "No matches." }) : visibleOptions.map((option) => /* @__PURE__ */ jsxs4(
-      "label",
-      {
-        className: "flex items-center gap-2 rounded-sm px-1 py-1 text-sm hover:bg-accent hover:text-accent-foreground",
-        children: [
-          /* @__PURE__ */ jsx9(
-            Checkbox,
+    /* @__PURE__ */ jsx9("div", { className: "flex max-h-60 flex-col gap-0.5 overflow-y-auto", children: renderChunks.length === 0 ? /* @__PURE__ */ jsx9("p", { className: "py-2 text-center text-sm text-muted-foreground", children: "No matches." }) : renderChunks.map((chunk) => {
+      if (chunk.kind === "single") return renderOption(chunk.row.option);
+      const headerState = groupCheckState(visibleOptions, selected, chunk.group);
+      return (
+        // The header and every one of its group's rows share this wrapper --
+        // its bounds are the sticky header's containing block, so `sticky
+        // top-0` keeps the header pinned for the group's whole scroll extent
+        // instead of just past its first row.
+        /* @__PURE__ */ jsxs4("div", { className: "flex flex-col gap-0.5", children: [
+          /* @__PURE__ */ jsxs4(
+            "label",
             {
-              checked: selected.includes(option.value),
-              onCheckedChange: () => emit(toggle(selected, option.value))
+              "data-group-header": true,
+              className: "sticky top-0 z-10 flex items-center gap-2 rounded-sm bg-muted px-2 py-1.5 text-sm font-semibold text-foreground",
+              children: [
+                /* @__PURE__ */ jsx9(
+                  Checkbox,
+                  {
+                    checked: headerState === "indeterminate" ? "indeterminate" : headerState === "checked",
+                    onCheckedChange: () => toggleGroup(chunk.group),
+                    "aria-label": `Select all of ${chunk.group}`
+                  }
+                ),
+                chunk.group
+              ]
             }
           ),
-          option.label
-        ]
-      },
-      option.value
-    )) })
+          chunk.rows.map((row) => renderOption(row.option))
+        ] }, `group-${chunk.group}`)
+      );
+    }) })
   ] });
   if (bare) {
     return /* @__PURE__ */ jsx9("div", { "data-testid": `filter-${column.id}`, children: panel });
@@ -3477,7 +3540,7 @@ function DataGrid({
     return { style: column.width ? { width: column.width } : void 0 };
   }
   function structuralCellProps(side, offset, width, area = "body") {
-    const base = area === "header" ? "border-b border-border p-1 sticky top-0 z-20" : "border-b border-border p-1 sticky z-10";
+    const base = area === "header" ? "border-b border-border p-1 sticky top-0 z-30" : "border-b border-border p-1 sticky z-10";
     const bg = area === "header" ? "bg-muted" : "bg-background";
     const bgOdd = area === "header" ? "bg-muted" : STRUCTURAL_ZEBRA_BG_CLASS;
     return {
@@ -3521,7 +3584,7 @@ function DataGrid({
       base,
       align,
       pinnedProps.className,
-      options.sticky && "sticky top-0 z-20 bg-muted"
+      options.sticky && (column.pinned ? "sticky top-0 z-30 bg-muted" : "sticky top-0 z-20 bg-muted")
     );
     return { className, style: pinnedProps.style };
   }