@ex-grid/pivot 0.2.0-rc.1 → 0.2.0-rc.3

package/dist/index.js

@@ -3246,9 +3246,62 @@ function reportMatch(row, column, pattern) {
   if (typeof value === "string") return findMatches2(value, pattern);
   throw new TypeError(`Internal: the report column '${column.name}' holds neither a label nor a value.`);
 }
+function reportRowKind(row) {
+  switch (row.role) {
+    case "item":
+    case "pending":
+      return "detail";
+    case "group":
+      return "group";
+    case "subtotal":
+    case "grandTotal":
+      return "total";
+    default:
+      return unreachable(row.role);
+  }
+}
+var rowKeys = /* @__PURE__ */ new WeakMap();
 function reportRowKey(row) {
-  return new PivotRowKey(row.role, row.valueField, row.items).toString();
+  const held2 = rowKeys.get(row);
+  if (held2 !== void 0) return held2;
+  const key = new PivotRowKey(row.role, row.valueField, row.items).toString();
+  rowKeys.set(row, key);
+  return key;
 }
+var ReportToggles = class {
+  #buttons = /* @__PURE__ */ new WeakMap();
+  /** A button painted for `toggle` on `row`. */
+  painted(button, toggle, row) {
+    this.#buttons.set(button, { toggle, row });
+  }
+  /** A button taken away with its cell. */
+  removed(button) {
+    this.#buttons.delete(button);
+  }
+  /**
+   * Listens on `root`, the report grid's own, until `signal`: a press on a button keeps the keyboard where it was,
+   * as the grid's own buttons do; a click on one toggles its Item on its row; and a double click on one stops
+   * there, since its offsets are the button's (ADR-0063). Taken in the capture phase, before the grid hears the
+   * event, as a listener on the button was.
+   */
+  listen(root, signal, toggled) {
+    const pressed = (event) => {
+      const { target } = event;
+      const button = target instanceof Element ? target.closest(".ex-pivot-toggle") : null;
+      return button === null ? void 0 : this.#buttons.get(button);
+    };
+    root.addEventListener("mousedown", (event) => {
+      if (pressed(event) !== void 0) event.preventDefault();
+    }, { capture: true, signal });
+    root.addEventListener("click", (event) => {
+      const on = pressed(event);
+      if (on !== void 0) toggled(on.toggle, on.row);
+    }, { capture: true, signal });
+    root.addEventListener("dblclick", (event) => {
+      if (pressed(event) !== void 0) event.stopPropagation();
+    }, { capture: true, signal });
+  }
+};
 function labelTemplate(index, painter) {
   return (slot, cell) => {
     const label = elementAt(cell.row.labels, index);
@@ -3256,7 +3309,6 @@ function labelTemplate(index, painter) {
     const box = document.createElement("span");
     box.className = "ex-pivot-label";
     if (label.indent > 0) box.style.paddingLeft = `${label.indent * painter.indentPx}px`;
-    const listening = new AbortController();
     const { toggle } = label;
     let button;
     if (toggle !== void 0) {
@@ -3268,16 +3320,7 @@ function labelTemplate(index, painter) {
       made.setAttribute("aria-expanded", toggle.isCollapsed ? "false" : "true");
       made.setAttribute("aria-label", painter.toggleName(toggle));
       made.textContent = toggle.isCollapsed ? "+" : "\u2212";
-      const { signal } = listening;
-      made.addEventListener("mousedown", (event) => {
-        event.preventDefault();
-      }, { signal });
-      made.addEventListener("click", () => {
-        painter.toggled(toggle, cell.row);
-      }, { signal });
-      made.addEventListener("dblclick", (event) => {
-        event.stopPropagation();
-      }, { signal });
+      painter.toggles.painted(made, toggle, cell.row);
       box.append(made);
       button = made;
     }
@@ -3290,7 +3333,7 @@ function labelTemplate(index, painter) {
     slot.append(box);
     if (button !== void 0 && cell.focusRequest !== 0) cell.takeKeyboard(button);
     return () => {
-      listening.abort();
+      if (button !== void 0) painter.toggles.removed(button);
       box.remove();
     };
   };
@@ -3876,6 +3919,8 @@ var PivotView = class {
   #sheet;
   #empty;
   #gridRoot;
+  // The expand / collapse buttons the label cells paint, heard on the grid's root (PF-2).
+  #toggles = new ReportToggles();
   #dropRemove;
   #fieldListBox;
   #fieldListScroll;
@@ -4157,6 +4202,9 @@ var PivotView = class {
     };
     this.#gridRoot.addEventListener("pointerdown", gestured, { capture: true, ...listening });
     this.#gridRoot.addEventListener("wheel", gestured, { capture: true, passive: true, ...listening });
+    this.#toggles.listen(this.#gridRoot, this.#listening.signal, (toggle, row) => {
+      this.#toggled(toggle, row);
+    });
     this.#gridRoot.addEventListener("keydown", (event) => {
       if (!event.isComposing && !inertKeys.has(event.key)) gestured();
     }, { capture: true, ...listening });
@@ -4379,9 +4427,7 @@ var PivotView = class {
     return new ReportColumns(Object.freeze({
       indentPx: this.#indentPx,
       toggleName: (toggle) => words.fill(toggle.isCollapsed ? "expand-item" : "collapse-item", toggle.itemLabel),
-      toggled: (toggle, row) => {
-        this.#toggled(toggle, row);
-      }
+      toggles: this.#toggles
     }), textOf(options));
   }
   #localeOf(options) {
@@ -4872,6 +4918,10 @@ var PivotView = class {
       // Item order and Hidden Items are the Pivot Layout's, and a report is computed: no column menu, no
       // sort, no filter, and every write refused by the grid's own gate, since nobody hears one (ADR-0059).
       hideColumnMenu: true,
+      // A press on a header selects its column, as on Excel's PivotTable (PV-2).
+      headerClickSelects: true,
+      // Group rows and totals are set apart as Excel sets them (ADR-0024, PV-2).
+      rowKind: reportRowKind,
       onColumnWidthChanged: (change) => {
         this.#widthChanged(change);
       },