@pythia-software/query-table-ui 0.9.8 → 1.0.0

package/README.md

@@ -29,8 +29,8 @@ and selection toolbar.
 for complete local datasets. The standard query builder supplies GROUP BY,
 HAVING, aggregate column editing and representative-row ordering. Use
 `api.schema`, `api.visibleFields` and `api.rowId` for the active result shape;
-set `grouping: false` to opt out. Backend transports currently reject grouped
-row queries. See [grouping integration](../../docs/grouping.md) for the query
+set `grouping: false` to opt out. Remote tables group on the server when its
+`queryCapabilities.groupedRows` is true. See [grouping integration](../../docs/grouping.md) for the query
 shape, source-stage controls, saved state and execution boundaries.
 
 ## Install
@@ -110,24 +110,41 @@ Click anywhere in a column header to open its actions menu, including padding
 and blank space. Resize handles remain dedicated to resizing.
 Open **Column Widths** to resize in one step:
 
-- **Fit This Column** sizes the clicked column to its widest rendered value.
-- **Fit All to Content** does the same for every column.
-- **Fit All to Screen** fills the viewport; when content overflows, narrow
-  columns keep their content width and only the widest ones are trimmed. It
-  sets `query.fitToScreen`, so shared links and saved queries fit each viewer's
-  available table area after loading and when that area changes. No column
-  is trimmed below what its buttons and links need (links shorten to an
-  ellipsis first); if those minimums exceed the screen, the table scrolls
-  horizontally. Set `select.minWidth` on a field whose host renderer needs
-  room the table cannot measure.
-- **Equal Widths** splits the viewport evenly.
-- **Reset Widths** drops explicit widths back to schema defaults.
-
-Widths live in `query.select`, so presets are shareable and undoable.
-The fit-to-screen preference travels in the existing encoded `?q=` parameter
-(`fs: true` in its compact payload). Manual column resizing, fitting a single
-column, another width preset, or resetting widths clears it. Set
-`fitToScreen: true` on an initial query to enable the same behavior directly.
+- **Fit All to Content** sets `query.fit = "content"` and clears explicit
+  widths. Every column without a width then keeps fitting its widest drawn
+  value (header included) after each change to what the table shows: sorting,
+  column changes, filters, grouping, paging, refreshes and new rows. The table
+  is then only as wide as its columns.
+- **Fit All to Screen** sets `query.fit = "screen"` and clears explicit
+  widths. Columns without a width fill the viewport left by resized ones;
+  when content overflows, narrow columns keep their content width and only
+  the widest ones are trimmed. It also refits when the viewport changes.
+- **Fit This Column** returns the clicked column to automatic fitting in
+  either mode. With no mode it sizes the column to its widest drawn value once.
+- **Equal Widths** splits the viewport evenly and turns any mode off.
+- **Reset Widths** drops explicit widths back to automatic fitting (or to
+  schema defaults with no mode).
+
+Choosing the active mode again turns it off and keeps the widths it showed.
+
+Fitted widths are local layout: they are never written to the query, the URL
+or undo history. Dragging or nudging one column stores only that column's
+`width`; the mode stays on and the other columns keep fitting around it. A
+field's `select.width` is a fallback used only when no mode is set. While a
+query is loading the previous widths stay; scrolling a virtualized body never
+refits. A refresh that keeps the query (same columns, filters, sort, paging
+and grouping) only grows content-fitted columns, so a live table stays calm;
+any change to the query refits from scratch. Content fitting stops at 800px.
+No column is fitted below what its buttons and links need (links shorten to
+an ellipsis first); in screen mode, if those minimums exceed the screen, the
+table scrolls horizontally. Set `select.minWidth` on a field whose host renderer needs room
+the table cannot measure.
+
+Set `fit` on a default or initial query to opt in; a stored query without
+`fit` has no live sizing. The mode travels in the encoded `?q=` parameter
+(`ft` in its compact payload). Links from 0.9.9 and earlier with
+`fitToScreen: true` (`fs`) open in screen mode without their stored widths,
+which screen fitting never showed.
 
 ## Cell quick filters
 

package/dist/index.d.ts

@@ -1,7 +1,7 @@
 import * as react from 'react';
 import { ReactNode, SetStateAction, CSSProperties, ButtonHTMLAttributes, PointerEvent, Ref, MutableRefObject } from 'react';
 import { FieldDef, QueryState, LinkTargets, CellDisplay, JsonCellDisplay, JsonInspectionState, JsonInspectionScope, AttentionRegistry, RowId, AggregationClause, AggregationBucket, AggregationResultEntry, MetricValue, SavedQuery, FieldStats, WhereClause, MetricValueFormat, FieldSchema, ScopedJsonInspectionState, PropertyViewState, RelationshipAdapter, ObjectReference, PropertyFormat, PropertyViewStorage, ItemPropertyMode, FormulaFunction, GroupedRow } from '@pythia-software/query-table-core';
-import { ItemDetailsApi, SelectionApi, ColumnDragApi, QueryTableApi, QueryFilterApi, AggregationsApi, SavedQueriesApi, RequestActivityApi, PropertyViewApi, GroupingApi } from '@pythia-software/query-table-react';
+import { ItemDetailsApi, SelectionApi, ColumnDragApi, GroupingApi, QueryTableApi, QueryFilterApi, AggregationsApi, SavedQueriesApi, RequestActivityApi, PropertyViewApi } from '@pythia-software/query-table-react';
 import { Placement } from '@floating-ui/react';
 
 interface CellContext<Row = any, V = unknown> {
@@ -200,6 +200,9 @@ interface DataTableProps<Row> {
      *  table header also live-previews/dims the matching QueryBuilder select chip
      *  (and vice versa). Omit for a self-contained, table-only drag. */
     columnDrag?: ColumnDragApi;
+    /** Grouping controller (`api.grouping`). Pass it to offer Group By, Remove
+     *  from Group By and Ungroup in the header menu. */
+    grouping?: GroupingApi<Row> | undefined;
     /** Always-visible trailing column (row actions, links). */
     trailing?: (row: Row) => ReactNode;
     trailingLabel?: string;

package/dist/index.js

@@ -4202,7 +4202,7 @@ function ItemHoverCard({ api, query, id, renderers, anchor, onClose }) {
 }
 
 // src/DataTable.tsx
-import { GROUP_ID_FIELD, GROUP_LINK_RENDER, ITEM_DETAILS_COLUMN, groupKeyFields, isComputedCellError, isGroupLinkValue as isGroupLinkValue2 } from "@pythia-software/query-table-core";
+import { GROUP_ID_FIELD, GROUP_LINK_RENDER, ITEM_DETAILS_COLUMN, groupKeyField, groupKeyFields, isComputedCellError, isGroupLinkValue as isGroupLinkValue2 } from "@pythia-software/query-table-core";
 import { useId as useId4, useCallback as useCallback3, useEffect as useEffect12, useLayoutEffect as useLayoutEffect6, useMemo as useMemo5, useRef as useRef14, useState as useState16 } from "react";
 import { defaultRangeExtractor, useVirtualizer } from "@tanstack/react-virtual";
 import { isSortable, readFieldValue as readFieldValue2 } from "@pythia-software/query-table-core";
@@ -4926,8 +4926,11 @@ function DataTable(props) {
   const [copiedCellKey, setCopiedCellKey] = useState16(null);
   const [headerHeight, setHeaderHeight] = useState16(0);
   const [showHorizontalCue, setShowHorizontalCue] = useState16(false);
-  const [screenWidths, setScreenWidths] = useState16(/* @__PURE__ */ new Map());
+  const [fittedWidths, setFittedWidths] = useState16(/* @__PURE__ */ new Map());
+  const lastFitRef = useRef14(null);
   const [screenViewportWidth, setScreenViewportWidth] = useState16(0);
+  const [shownRevision, setShownRevision] = useState16(0);
+  const fitWaitingRef = useRef14(false);
   const tableWrapRef = useRef14(null);
   const tableHeadRef = useRef14(null);
   const tableRef = useRef14(null);
@@ -5072,12 +5075,36 @@ function DataTable(props) {
     const term = query.orderBy[idx];
     return { dir: term.dir, priority: query.orderBy.length > 1 ? idx + 1 : null };
   }
+  const grouping = props.grouping;
+  function headerGrouping(f) {
+    if (!grouping) return null;
+    if (!query.grouping) {
+      const groupable = grouping.supported && grouping.model.groupableFields.some((g) => g.name === f.name);
+      return { kind: "rows", groupable };
+    }
+    return { kind: "groups", key: groupKeys ? groupKeys.includes(f.name) : false, keyCount: query.grouping.keys.length };
+  }
+  function changeGroupKeys(keys) {
+    setMenu(null);
+    if (!grouping) return;
+    try {
+      grouping.changeKeys(keys);
+    } catch (error) {
+      grouping.setNotice(error instanceof Error ? error.message : String(error));
+    }
+  }
+  function removeGroupKey(f) {
+    changeGroupKeys((query.grouping?.keys ?? []).filter((key) => groupKeyField(key) !== f.name));
+  }
   function widthFor(name, f) {
     const col = query.select.find((c) => c.field === name);
     return col?.width ?? f.select?.width;
   }
+  function explicitWidthFor(name) {
+    return query.select.find((c) => c.field === name)?.width;
+  }
   function resolvedWidthFor(name, f) {
-    if (query.fitToScreen && screenWidths.has(name)) return screenWidths.get(name);
+    if (query.fit && explicitWidthFor(name) == null && fittedWidths.has(name)) return fittedWidths.get(name);
     return widthFor(name, f);
   }
   function resolvedColumnWidthFor(name, f) {
@@ -5098,7 +5125,6 @@ function DataTable(props) {
   function commitColumnWidth(name, width) {
     if (name === SELECTION_COLUMN) {
       setSelectionColumnWidth(clampColumnWidth(name, width));
-      if (query.fitToScreen) setWidths(/* @__PURE__ */ new Map());
       return;
     }
     setWidth(name, width);
@@ -5106,17 +5132,25 @@ function DataTable(props) {
   function setWidth(name, width) {
     setWidths(/* @__PURE__ */ new Map([[name, width]]));
   }
-  function setWidths(widths, fitToScreen = false) {
+  function setWidths(widths, leaveFit = false) {
     const px = new Map(Array.from(widths, ([name, width]) => [name, clampWidth(width)]));
     onQueryChange((prev) => {
-      const fittedWidths = new Map([...screenWidths].filter(([name]) => fieldByName.has(name)));
-      const current = prev.fitToScreen ? writeWidths(prev.select, fields, fittedWidths) : prev.select;
+      let current = prev.select;
+      if (leaveFit && prev.fit) {
+        const frozen = new Map([...fittedWidths].filter(([name]) => fieldByName.has(name) && prev.select.find((c) => c.field === name)?.width == null));
+        current = writeWidths(current, fields, frozen);
+      }
       const next = { ...prev, select: writeWidths(current, fields, px) };
-      if (fitToScreen) next.fitToScreen = true;
-      else delete next.fitToScreen;
+      if (leaveFit) delete next.fit;
       return next;
     });
   }
+  function clearWidths(names) {
+    onQueryChange((prev) => ({
+      ...prev,
+      select: prev.select.map(({ width, ...c }) => names && !names.has(c.field) && width != null ? { ...c, width } : c)
+    }));
+  }
   function applyResizeGuide() {
     const preview = resizePreviewRef.current;
     const guide = resizeGuideRef.current;
@@ -5225,28 +5259,32 @@ function DataTable(props) {
     });
   }
   function autofitColumn(name) {
+    if (query.fit) {
+      if (explicitWidthFor(name) != null) clearWidths(/* @__PURE__ */ new Set([name]));
+      return;
+    }
     const [width = 0] = measureContentWidths([name]);
     if (width > 0) setWidth(name, width);
   }
   function applyWidthPreset(preset) {
     setMenu(null);
+    if (preset !== "equal") {
+      if (query.fit === preset) setWidths(/* @__PURE__ */ new Map(), true);
+      else onQueryChange((prev) => ({ ...prev, fit: preset, select: prev.select.map(({ width: _width, ...c }) => c) }));
+      return;
+    }
     const names = renderedColumnNames.filter((name) => fieldByName.has(name));
     if (names.length === 0) return;
-    const content = measureContentWidths(names).map((w, i) => w || displayColumnWidthFor(names[i], fieldByName.get(names[i])));
     const wrap = tableWrapRef.current;
     const available = (wrap?.clientWidth ?? 0) - (showSel ? selectionColumnWidth : 0) - (trailing ? TRAILING_WIDTH : 0) - TABLE_BORDER_PX;
-    const widths = preset === "content" ? fitContentWidths(content) : preset === "equal" ? equalWidths(names.length, available) : fitScreenWidths(content, available, void 0, measureControlMinimums(names));
-    setWidths(new Map(names.map((name, i) => [name, widths[i]])), preset === "screen");
+    const widths = equalWidths(names.length, available);
+    setWidths(new Map(names.map((name, i) => [name, widths[i]])), true);
   }
-  const hasCustomWidths = query.fitToScreen === true || selectionColumnWidth !== DEFAULT_SELECTION_WIDTH || query.select.some((c) => c.width != null);
+  const hasCustomWidths = selectionColumnWidth !== DEFAULT_SELECTION_WIDTH || query.select.some((c) => c.width != null);
   function resetWidths() {
     setMenu(null);
     setSelectionColumnWidth(DEFAULT_SELECTION_WIDTH);
-    onQueryChange((prev) => {
-      const next = { ...prev, select: prev.select.map(({ width: _width, ...c }) => c) };
-      delete next.fitToScreen;
-      return next;
-    });
+    clearWidths();
   }
   function resizeWithKeyboard(name, startWidth, e) {
     if (e.key !== "ArrowLeft" && e.key !== "ArrowRight" && e.key !== "Enter") return;
@@ -5299,11 +5337,15 @@ function DataTable(props) {
     const index = preview.indexOf(SELECTION_COLUMN);
     if (index >= 0) setSelectionColumnIndex(index);
   }, [columnDrag.active, columnDrag.dropRevision, renderedColumnNames, fieldNames]);
+  const fit = query.fit;
   useEffect12(() => {
-    if (!query.fitToScreen) return;
+    if (!fit) return;
     const wrap = tableWrapRef.current;
     if (!wrap) return;
-    const measureViewport = () => setScreenViewportWidth(wrap.clientWidth);
+    const measureViewport = () => {
+      if (fit === "screen") setScreenViewportWidth(wrap.clientWidth);
+      else if (fitWaitingRef.current && wrap.clientWidth > 0) setShownRevision((revision) => revision + 1);
+    };
     measureViewport();
     window.addEventListener("resize", measureViewport);
     const observer = typeof ResizeObserver === "undefined" ? null : new ResizeObserver(measureViewport);
@@ -5312,20 +5354,50 @@ function DataTable(props) {
       window.removeEventListener("resize", measureViewport);
       observer?.disconnect();
     };
-  }, [query.fitToScreen]);
+  }, [fit]);
+  const fitQueryKey = useMemo5(() => JSON.stringify([
+    query.select.map((c) => [c.field, c.display ?? null]),
+    query.where,
+    query.orderBy,
+    query.limit,
+    query.offset,
+    query.grouping ?? null,
+    query.hostState ?? null,
+    fieldNames
+  ]), [query.select, query.where, query.orderBy, query.limit, query.offset, query.grouping, query.hostState, fieldNames]);
   useCommitLayoutEffect(() => {
-    if (!query.fitToScreen || loading || fieldNames.length === 0) return;
-    const available = (tableWrapRef.current?.clientWidth ?? 0) - (showSel ? selectionColumnWidth : 0) - (trailing ? TRAILING_WIDTH : 0) - TABLE_BORDER_PX;
-    if (available <= 0) return;
-    const content = measureContentWidths(fieldNames).map(
-      (width, i) => width || widthFor(fieldNames[i], fields[i]) || DEFAULT_WIDTH
+    if (!fit) {
+      lastFitRef.current = null;
+      return;
+    }
+    if (loading || fieldNames.length === 0) return;
+    const viewport = tableWrapRef.current?.clientWidth ?? 0;
+    fitWaitingRef.current = viewport <= 0;
+    if (viewport <= 0) return;
+    const names = fieldNames.filter((name) => explicitWidthFor(name) == null);
+    const content = measureContentWidths(names).map(
+      (width, i) => width || widthFor(names[i], fieldByName.get(names[i])) || DEFAULT_WIDTH
     );
-    const widths = fitScreenWidths(content, available, void 0, measureControlMinimums(fieldNames));
-    setScreenWidths((current) => {
-      if (current.size === fieldNames.length && fieldNames.every((name, i) => current.get(name) === widths[i])) return current;
-      return new Map(fieldNames.map((name, i) => [name, widths[i]]));
+    const minimums = measureControlMinimums(names);
+    let widths;
+    if (fit === "screen") {
+      const fixed = fieldNames.reduce((sum, name) => sum + (explicitWidthFor(name) ?? 0), 0);
+      const available = viewport - (showSel ? selectionColumnWidth : 0) - (trailing ? TRAILING_WIDTH : 0) - TABLE_BORDER_PX - fixed;
+      widths = fitScreenWidths(content, available, void 0, minimums);
+    } else {
+      const last = lastFitRef.current;
+      const grow = last?.fit === "content" && last.key === fitQueryKey;
+      widths = fitContentWidths(content).map((width, i) => {
+        const fitted = Math.min(MAX_WIDTH, Math.max(width, Math.ceil(minimums[i])));
+        return grow ? Math.max(fitted, fittedWidths.get(names[i]) ?? 0) : fitted;
+      });
+    }
+    lastFitRef.current = { fit, key: fitQueryKey };
+    setFittedWidths((current) => {
+      if (current.size === names.length && names.every((name, i) => current.get(name) === widths[i])) return current;
+      return new Map(names.map((name, i) => [name, widths[i]]));
     });
-  }, [query.fitToScreen, query.select, fields, fieldNames, rows, loading, renderers, screenViewportWidth, showSel, selectionColumnWidth, trailing]);
+  }, [fit, query.select, fitQueryKey, fields, fieldNames, rows, loading, renderers, screenViewportWidth, shownRevision, showSel, selectionColumnWidth, trailing]);
   function toggleHeader() {
     if (!selection) return;
     selection.setPage(pageIds, headerState !== "all");
@@ -5451,7 +5523,7 @@ function DataTable(props) {
               "aria-hidden": "true"
             }
           ),
-          /* @__PURE__ */ jsxs17("table", { ref: tableRef, className: cx3("qt-table", classNames?.table), style: { minWidth: tableWidth }, children: [
+          /* @__PURE__ */ jsxs17("table", { ref: tableRef, className: cx3("qt-table", classNames?.table), style: fit === "content" ? { width: tableWidth, minWidth: tableWidth } : { minWidth: tableWidth }, children: [
             /* @__PURE__ */ jsxs17("colgroup", { children: [
               renderedColumnNames.map((name) => {
                 const f = fieldByName.get(name);
@@ -5746,8 +5818,12 @@ function DataTable(props) {
         canRemoveColumn: fields.length > 1,
         onSetSort: (placement, dir) => applyHeaderSort(menu.field, dir, placement),
         onRemove: () => removeColumn(menu.field),
+        grouping: headerGrouping(menu.field),
+        onGroupBy: () => changeGroupKeys([menu.field.name]),
+        onRemoveGroupKey: () => removeGroupKey(menu.field),
+        onUngroup: () => changeGroupKeys([]),
         canResetWidths: hasCustomWidths,
-        fitToScreen: query.fitToScreen === true,
+        fit: query.fit,
         onFitColumn: () => {
           setMenu(null);
           autofitColumn(menu.field.name);
@@ -5766,9 +5842,13 @@ function HeaderMenu({
   sortable,
   canRemoveColumn,
   canResetWidths,
-  fitToScreen,
+  fit,
   onSetSort,
   onRemove,
+  grouping,
+  onGroupBy,
+  onRemoveGroupKey,
+  onUngroup,
   onFitColumn,
   onWidthPreset,
   onResetWidths,
@@ -5784,21 +5864,37 @@ function HeaderMenu({
         ")"
       ] }, `${placement}-${dir}`))
     ),
+    grouping && /* @__PURE__ */ jsx21(MenuSeparator, {}),
+    grouping?.kind === "rows" && /* @__PURE__ */ jsxs17(MenuItem, { disabled: !grouping.groupable, onSelect: onGroupBy, title: grouping.groupable ? `One row per ${field.label} value` : `${field.label} cannot be grouped`, children: [
+      "Group By ",
+      field.label
+    ] }),
+    grouping?.kind === "groups" && grouping.key && grouping.keyCount > 1 && /* @__PURE__ */ jsx21(MenuItem, { onSelect: onRemoveGroupKey, title: "Group by the remaining keys only", children: "Remove from Group By" }),
+    grouping?.kind === "groups" && /* @__PURE__ */ jsx21(MenuItem, { onSelect: onUngroup, title: "Back to the source rows", children: "Ungroup" }),
     /* @__PURE__ */ jsx21(MenuSeparator, {}),
     /* @__PURE__ */ jsxs17(MenuSubmenu, { label: "Column Widths", children: [
-      /* @__PURE__ */ jsx21(MenuItem, { onSelect: onFitColumn, title: `Size ${field.label} to its widest visible value`, children: "Fit This Column" }),
+      /* @__PURE__ */ jsx21(MenuItem, { onSelect: onFitColumn, title: fit ? `Return ${field.label} to automatic fitting` : `Size ${field.label} to its widest visible value`, children: "Fit This Column" }),
       /* @__PURE__ */ jsx21(MenuSeparator, {}),
-      WIDTH_PRESETS.map(({ preset, label, hint }) => /* @__PURE__ */ jsx21(MenuItem, { onSelect: () => onWidthPreset(preset), title: hint, checked: preset === "screen" ? fitToScreen : void 0, children: label }, preset)),
+      WIDTH_PRESETS.map(({ preset, label, hint }) => /* @__PURE__ */ jsx21(
+        MenuItem,
+        {
+          onSelect: () => onWidthPreset(preset),
+          title: preset === fit ? "Stop fitting automatically and keep the current widths" : hint,
+          checked: preset === "equal" ? void 0 : preset === fit,
+          children: label
+        },
+        preset
+      )),
       /* @__PURE__ */ jsx21(MenuSeparator, {}),
-      /* @__PURE__ */ jsx21(MenuItem, { disabled: !canResetWidths, onSelect: onResetWidths, title: "Back to the default column widths", children: "Reset Widths" })
+      /* @__PURE__ */ jsx21(MenuItem, { disabled: !canResetWidths, onSelect: onResetWidths, title: fit ? "Return every resized column to automatic fitting" : "Back to the default column widths", children: "Reset Widths" })
     ] }),
     /* @__PURE__ */ jsx21(MenuSeparator, {}),
     /* @__PURE__ */ jsx21(MenuItem, { tone: "danger", disabled: !canRemoveColumn, onSelect: onRemove, children: "Remove Column" })
   ] });
 }
 var WIDTH_PRESETS = [
-  { preset: "content", label: "Fit All to Content", hint: "Size every column to its widest visible value" },
-  { preset: "screen", label: "Fit All to Screen", hint: "Fill the table width, trimming the widest columns first" },
+  { preset: "content", label: "Fit All to Content", hint: "Keep every column sized to its widest visible value" },
+  { preset: "screen", label: "Fit All to Screen", hint: "Keep the columns filling the table width, trimming the widest first" },
   { preset: "equal", label: "Equal Widths", hint: "Split the table width evenly across columns" }
 ];
 function nextHeaderOrderBy(existing, field, dir, placement) {
@@ -5891,7 +5987,7 @@ function valueToString2(value) {
 import { useState as useState21 } from "react";
 import {
   GROUP_KEY_INTERVALS,
-  groupKeyField,
+  groupKeyField as groupKeyField2,
   isCalendarGroupKey,
   MAX_GROUP_BY_FIELDS,
   OP_LABEL as OP_LABEL4
@@ -8417,7 +8513,7 @@ function KeyIntervalControl({
   label,
   onChange
 }) {
-  const field = groupKeyField(value);
+  const field = groupKeyField2(value);
   const interval = isCalendarGroupKey(value) ? value.interval : "";
   return /* @__PURE__ */ jsxs23(
     "span",
@@ -8508,7 +8604,7 @@ function GroupingClauses({
         /* @__PURE__ */ jsxs23("div", { className: "qt-qb-row", children: [
           /* @__PURE__ */ jsx27("div", { className: "qt-qb-section-header", children: /* @__PURE__ */ jsx27("span", { className: "qt-qb-kw", "data-mobile-label": "Group by", children: "group by" }) }),
           groupKeys.map((groupKey, index) => {
-            const key = groupKeyField(groupKey);
+            const key = groupKeyField2(groupKey);
             const label = model.sourceField(key)?.label ?? key;
             return /* @__PURE__ */ jsxs23("span", { className: "qt-chip", children: [
               /* @__PURE__ */ jsx27(
@@ -8669,7 +8765,7 @@ function useGroupingPresentation(api, enabled = true) {
       "\xB7 GROUP BY",
       " ",
       /* @__PURE__ */ jsx27("strong", { children: groupKeys.map((key) => {
-        const name = groupKeyField(key);
+        const name = groupKeyField2(key);
         const label = model.sourceField(name)?.label ?? name;
         return isCalendarGroupKey(key) ? `${label} (${key.interval})` : label;
       }).join(" + ") }),
@@ -13907,10 +14003,11 @@ function SetFilterEditor({ api, field, returnFocus, classNames, mode: initialMod
   useEffect20(() => {
     if (strategy.source !== "autocomplete") return;
     let cancelled = false;
+    const ac = new AbortController();
     setLoading(true);
     setError("");
     const timer = setTimeout(() => {
-      api.filterValues(field.name, search).then((result) => {
+      api.filterValues(field.name, search, ac.signal).then((result) => {
         if (!cancelled) setSuggestions(result.values);
       }).catch(() => {
         if (!cancelled) setError("Could not load values. Try searching again.");
@@ -13921,6 +14018,7 @@ function SetFilterEditor({ api, field, returnFocus, classNames, mode: initialMod
     return () => {
       cancelled = true;
       clearTimeout(timer);
+      ac.abort();
     };
   }, [api.filterValues, field.name, strategy.source, search]);
   function toggle(value) {
@@ -14134,8 +14232,9 @@ function FilterValueAutocomplete({ api, field, value, contextKey, className, wid
   useEffect21(() => {
     if (!open || loaded) return;
     let cancelled = false;
+    const ac = new AbortController();
     const timer = setTimeout(() => {
-      void Promise.resolve().then(() => fetchValues(field.name, value)).then(
+      void Promise.resolve().then(() => fetchValues(field.name, value, ac.signal)).then(
         (result) => {
           if (cancelled) return;
           setResponse({ key: requestKey, fetchValues, result });
@@ -14149,6 +14248,7 @@ function FilterValueAutocomplete({ api, field, value, contextKey, className, wid
     return () => {
       cancelled = true;
       clearTimeout(timer);
+      ac.abort();
     };
   }, [open, loaded, fetchValues, requestKey, scopeKey, field.name, value]);
   useEffect21(() => {
@@ -14305,7 +14405,8 @@ function useFieldHasNull(api, fieldName) {
   useEffect22(() => {
     if (!fieldName) return;
     let cancelled = false;
-    void api.filterValues(fieldName, "").then((r) => {
+    const ac = new AbortController();
+    void api.filterValues(fieldName, "", ac.signal).then((r) => {
       if (!cancelled && typeof r.hasNull === "boolean") {
         setHasNull(r.hasNull);
       }
@@ -14314,6 +14415,7 @@ function useFieldHasNull(api, fieldName) {
     });
     return () => {
       cancelled = true;
+      ac.abort();
     };
   }, [api.filterValues, fieldName]);
   return hasNull;