@svgrid/grid 2.2.28 → 2.2.29

package/src/svgrid.group-header-ids.test.ts

@@ -0,0 +1,121 @@
+/**
+ * DOM: group header cells stay aligned when a collapsed group hides a leaf
+ * that sits next to an UNNAMED leaf (no `id`, no `field`) (#63).
+ *
+ * The group-header builder walks the column tree twice: once to collect leaf
+ * widths and once to index nodes. Both mint a fallback id for unnamed columns.
+ * Those two ids have to agree, or the group cell resolves to the wrong leaf and
+ * renders with `colSpan: 1` and `widthPx: 0` - a group header sitting over
+ * nothing.
+ */
+import { afterEach, describe, expect, it } from 'vitest'
+import { mount, unmount } from 'svelte'
+import SvGrid from './SvGrid.svelte'
+import {
+  createCoreRowModel,
+  createFilteredRowModel,
+  createPaginatedRowModel,
+  createSortedRowModel,
+  sortFns,
+  tableFeatures,
+  rowSortingFeature,
+} from './index'
+
+type Row = { id: number; name: string; jan: number }
+const features = tableFeatures({ rowSortingFeature })
+
+// The drift needs three things in one group: a leaf that gets skipped, then
+// TWO unnamed leaves after it. Skipping the first one made the node counter
+// fall behind the array index, so the third leaf inherited the second leaf's
+// auto-id - and with it the second leaf's hidden state.
+//
+// Expanded, "Closed" hides and "Always" must stay: the buggy id reuse marked
+// "Always" hidden too, shrinking the group header to one leaf.
+const columns = [
+  { field: 'name', header: 'Name', width: 120 },
+  {
+    id: 'q1',
+    header: 'Q1',
+    columns: [
+      { field: 'jan', header: 'Jan', width: 90, columnGroupShow: 'open' },
+      { header: 'Closed', width: 150, columnGroupShow: 'closed' },
+      { header: 'Always', width: 200 },
+    ],
+  },
+]
+
+const data: Row[] = [{ id: 1, name: 'one', jan: 5 }]
+
+const tick = () => new Promise<void>((r) => queueMicrotask(r))
+
+function mountGrid() {
+  const target = document.createElement('div')
+  document.body.appendChild(target)
+  const app = mount(SvGrid, {
+    target,
+    props: {
+      data,
+      columns,
+      features,
+      _rowModels: {
+        coreRowModel: createCoreRowModel(),
+        filteredRowModel: createFilteredRowModel(),
+        sortedRowModel: createSortedRowModel(sortFns),
+        paginatedRowModel: createPaginatedRowModel(),
+      },
+      containerHeight: 240,
+      virtualization: false,
+    } as never,
+  })
+  return { target, destroy: () => { unmount(app); target.remove() } }
+}
+
+let cleanup: (() => void) | null = null
+afterEach(() => { cleanup?.(); cleanup = null })
+
+function groupCell(target: HTMLElement): HTMLElement {
+  const cells = [...target.querySelectorAll<HTMLElement>('.sv-grid-group-header-cell')]
+  const cell = cells.find((c) => c.textContent?.includes('Q1'))
+  expect(cell).toBeDefined()
+  return cell!
+}
+
+describe('group header with unnamed leaves', () => {
+  it('covers the closed-mode leaves while collapsed (#63)', async () => {
+    const { target, destroy } = mountGrid()
+    cleanup = destroy
+    await tick()
+
+    // Collapsed by default (no `openByDefault`): "Jan" hides, "Closed" and
+    // "Always" show.
+    const cell = groupCell(target)
+    expect(cell.getAttribute('colspan')).toBe('2')
+    expect(cell.style.width).toBe('350px')
+  })
+
+  it('keeps the untagged leaf when the group is expanded (#63)', async () => {
+    const { target, destroy } = mountGrid()
+    cleanup = destroy
+    await tick()
+
+    const toggle = target.querySelector<HTMLButtonElement>('.sv-grid-group-toggle')
+    expect(toggle).not.toBeNull()
+    toggle!.click()
+    await tick()
+
+    // Expanded: "Jan" (90) shows, "Closed" hides, "Always" (200) still shows.
+    // Before the fix the third leaf inherited the second leaf's auto-id, was
+    // read as hidden, and the group shrank to `colspan="1"` over a header with
+    // no cells beneath it.
+    const cell = groupCell(target)
+    expect(cell.getAttribute('colspan')).toBe('2')
+    expect(cell.style.width).toBe('290px')
+
+    // And the unnamed `columnGroupShow: 'closed'` leaf really is gone from the
+    // leaf-header row - its id now matches the one the engine assigned.
+    const leafIds = [...target.querySelectorAll('[data-svgrid-header-col]')].map(
+      (el) => el.getAttribute('data-svgrid-header-col'),
+    )
+    expect(leafIds).toEqual(['name', 'jan', 'q1_1_2'])
+  })
+})

package/dist/cdn/GridMenus-BbzEvTYO.js

@@ -1,421 +0,0 @@
-import { eo as e, to as t } from "./src-BxNEslEo.js";
-import { l as n } from "./SvDateTimePicker-DB0aIEk8.js";
-import * as r from "svelte/internal/client";
-import "svelte/internal/disclose-version";
-//#region src/GridMenus.svelte
-var i = r.from_html("<option> </option>"), a = r.from_html("<option></option>"), o = r.from_html("<datalist></datalist>"), s = r.from_html("<input class=\"sv-grid-menu-condition-value\" placeholder=\"To\"/>"), c = r.from_html("<option> </option>"), l = r.from_html("<input class=\"sv-grid-menu-condition-value\" placeholder=\"To\"/>"), u = r.from_html("<input class=\"sv-grid-menu-condition-value\"/> <!>", 1), d = r.from_html("<div class=\"sv-grid-menu-join\" role=\"radiogroup\" aria-label=\"Combine conditions\"><button type=\"button\">AND</button> <button type=\"button\">OR</button> <button type=\"button\" class=\"sv-grid-menu-join-x\" title=\"Remove second condition\" aria-label=\"Remove second condition\">×</button></div> <select class=\"sv-grid-menu-operator-select\" aria-label=\"Second filter condition\"></select> <!>", 1), f = r.from_html("<button type=\"button\" class=\"sv-grid-menu-add-cond\">+ Add condition</button>"), p = r.from_html("<input class=\"sv-grid-menu-condition-value\"/> <!> <!> <!>", 1), m = r.from_html("<label class=\"sv-grid-facet\"><input type=\"checkbox\"/> <span class=\"sv-grid-facet-label\"> </span></label>"), h = r.from_html("<div class=\"sv-grid-facet-empty\">No values</div>"), g = r.from_html("<div class=\"sv-grid-facet-note\"> </div>"), _ = r.from_html("<div class=\"sv-grid-menu-filter\"><div class=\"sv-grid-menu-filter-head\"><span class=\"sv-grid-header-icon\"><!></span> Filter\n        condition</div> <select class=\"sv-grid-menu-operator-select\" aria-label=\"Filter condition\"></select> <!> <div class=\"sv-grid-menu-sep\"></div> <div class=\"sv-grid-menu-filter-head\">Values</div> <input class=\"sv-grid-menu-search\" placeholder=\"Search values...\"/> <label class=\"sv-grid-facet sv-grid-facet-all\"><input type=\"checkbox\"/> <span class=\"sv-grid-facet-label\">(Select all)</span></label> <div class=\"sv-grid-facet-list\"></div> <!> <div class=\"sv-grid-menu-actions\"><button type=\"button\" class=\"sv-grid-menu-btn\">Clear filter</button> <button type=\"button\" class=\"sv-grid-menu-btn sv-grid-menu-btn-primary\">Done</button></div></div>"), v = r.from_html("<div role=\"tooltip\"> </div>"), y = r.from_html("<div class=\"sv-grid-menu-backdrop\" role=\"presentation\"></div>"), b = r.from_html("<button type=\"button\" role=\"tab\">Filter</button>"), x = r.from_html("<div class=\"sv-grid-menu-tabs\" role=\"tablist\"><button type=\"button\" role=\"tab\">General</button> <!> <button type=\"button\" role=\"tab\">Columns</button></div>"), S = r.from_html("<label class=\"sv-grid-facet\"><input type=\"checkbox\"/> <span class=\"sv-grid-facet-label\"> </span></label>"), C = r.from_html("<div class=\"sv-grid-menu-filter-head\">Visible columns</div> <div class=\"sv-grid-facet-list\"></div>", 1), w = r.from_html("<button type=\"button\" class=\"sv-grid-menu-item\" role=\"menuitem\"><span class=\"sv-grid-header-icon\"><!></span> Sort\n          ascending</button> <button type=\"button\" class=\"sv-grid-menu-item\" role=\"menuitem\"><span class=\"sv-grid-header-icon\"><!></span> Sort\n          descending</button> <button type=\"button\" class=\"sv-grid-menu-item\" role=\"menuitem\"><span class=\"sv-grid-header-icon\"><!></span> Remove sort</button>", 1), T = r.from_html("<div class=\"sv-grid-menu-sep\"></div> <button type=\"button\" class=\"sv-grid-menu-item\" role=\"menuitem\"><span class=\"sv-grid-header-icon\"><!></span> Pin to left</button> <button type=\"button\" class=\"sv-grid-menu-item\" role=\"menuitem\"><span class=\"sv-grid-header-icon\"><!></span> Pin to right</button> <button type=\"button\" class=\"sv-grid-menu-item\" role=\"menuitem\"><span class=\"sv-grid-header-icon\"><!></span> Unpin column</button>", 1), E = r.from_html("<div class=\"sv-grid-menu-sep\"></div> <button type=\"button\" class=\"sv-grid-menu-item\" role=\"menuitem\"><span class=\"sv-grid-header-icon\"><!></span> Group\n          by this column</button> <button type=\"button\" class=\"sv-grid-menu-item\" role=\"menuitem\"><span class=\"sv-grid-header-icon\"><!></span> Remove grouping</button>", 1), D = r.from_html("<button type=\"button\" role=\"menuitem\" aria-haspopup=\"menu\"><span class=\"sv-grid-header-icon\"><!></span> Choose columns <span class=\"sv-grid-header-icon sv-grid-menu-item-chevron\"><!></span></button>"), O = r.from_html("<!> <!> <div class=\"sv-grid-menu-sep\"></div> <button type=\"button\" class=\"sv-grid-menu-item\" role=\"menuitem\"><span class=\"sv-grid-header-icon\"><!></span> Autosize\n        this column</button> <button type=\"button\" class=\"sv-grid-menu-item\" role=\"menuitem\"><span class=\"sv-grid-header-icon\"><!></span> Autosize\n        all columns</button> <!> <div class=\"sv-grid-menu-sep\"></div> <!> <button type=\"button\" class=\"sv-grid-menu-item\" role=\"menuitem\"><span class=\"sv-grid-header-icon\"><!></span> Reset columns</button>", 1), ee = r.from_html("<div class=\"sv-grid-menu sv-grid-column-menu\" role=\"menu\"><!> <!></div>"), k = r.from_html("<div class=\"sv-grid-menu sv-grid-filter-menu\" role=\"menu\"><!></div>"), A = r.from_html("<label class=\"sv-grid-facet\"><input type=\"checkbox\"/> <span class=\"sv-grid-facet-label\"> </span></label>"), j = r.from_html("<div class=\"sv-grid-menu sv-grid-choose-columns-menu\" role=\"menu\"><div class=\"sv-grid-menu-filter-head\">Visible columns</div> <div class=\"sv-grid-facet-list\"></div></div>"), M = r.from_html("<button type=\"button\" class=\"sv-grid-menu-item\" role=\"menuitemradio\"><span class=\"sv-grid-header-icon\"><!></span> </button>"), N = r.from_html("<div class=\"sv-grid-menu sv-grid-operator-menu\" role=\"menu\"></div>"), te = r.from_html("<button type=\"button\" class=\"sv-grid-menu-item sv-grid-in-suggest-item\" role=\"option\"><span class=\"sv-grid-in-suggest-check\" aria-hidden=\"true\"> </span> <span class=\"sv-grid-in-suggest-label\"> </span></button>"), ne = r.from_html("<div class=\"sv-grid-facet-empty\">No values</div>"), P = r.from_html("<div class=\"sv-grid-menu sv-grid-in-suggest\" role=\"listbox\" aria-multiselectable=\"true\" aria-label=\"Filter values\"></div>"), re = r.from_html("<div class=\"sv-grid-menu-sep\"></div>"), ie = r.from_html("<button type=\"button\" class=\"sv-grid-menu-item\" role=\"menuitem\"> </button>"), ae = r.from_html("<div class=\"sv-grid-menu-backdrop\" role=\"presentation\"></div> <div class=\"sv-grid-menu sv-grid-context-menu\" role=\"menu\"></div>", 1), oe = r.from_html("<div class=\"sv-grid-menu-backdrop\" role=\"presentation\"></div> <div class=\"sv-grid-menu sv-grid-comment-editor\" role=\"dialog\" aria-label=\"Edit comment\"><textarea class=\"sv-grid-comment-textarea\" rows=\"3\" placeholder=\"Add a comment…\"></textarea> <div class=\"sv-grid-comment-actions\"><button type=\"button\" class=\"sv-grid-comment-remove\">Remove</button> <span class=\"sv-grid-comment-spacer\"></span> <button type=\"button\" class=\"sv-grid-comment-cancel\">Cancel</button> <button type=\"button\" class=\"sv-grid-comment-save\">Save</button></div></div>", 1), se = r.from_html("<!> <!>  <!> <!> <!> <!> <!> <!> <!>", 1);
-function ce(ce, F) {
-	r.push(F, !0);
-	let le = (e, n = r.noop) => {
-		let v = r.derived(() => r.get(q).find((e) => e.id === n())), y = r.derived(() => r.get(Ce)(r.get(v))), b = r.derived(() => r.get(L)[n()]?.operator ?? r.get(J)(r.get(v))), x = r.derived(() => t(r.get(v)?.columnDef.editorType ?? "text"));
-		var S = _(), C = r.child(S), w = r.child(C), T = r.child(w);
-		r.snippet(T, () => F.icon, () => "filter"), r.reset(w), r.next(), r.reset(C);
-		var E = r.sibling(C, 2);
-		r.each(E, 21, () => r.get(y), (e) => e.value, (e, t) => {
-			var n = i(), a = r.child(n, !0);
-			r.reset(n);
-			var o = {};
-			r.template_effect((e) => {
-				r.set_text(a, e), o !== (o = r.get(t).value) && (n.value = (n.__value = r.get(t).value) ?? "");
-			}, [() => r.get(Y)(r.get(t), r.get(v))]), r.append(e, n);
-		}), r.reset(E);
-		var D;
-		r.init_select(E);
-		var O = r.sibling(E, 2), ee = (e) => {
-			let t = r.derived(() => r.get(b) === "in" || r.get(b) === "notIn"), i = r.derived(() => r.get(L)[n()]);
-			var m = p(), h = r.first_child(m);
-			r.remove_input_defaults(h);
-			var g = r.sibling(h, 2), _ = (e) => {
-				var t = o();
-				r.each(t, 20, () => r.get(ke)(n()).slice(0, 200), (e) => e, (e, t) => {
-					var n = a(), i = {};
-					r.template_effect(() => {
-						i !== (i = t) && (n.value = (n.__value = t) ?? "");
-					}), r.append(e, n);
-				}), r.reset(t), r.template_effect(() => r.set_attribute(t, "id", `sv-in-list-${n()}`)), r.append(e, t);
-			};
-			r.if(g, (e) => {
-				r.get(t) && e(_);
-			});
-			var S = r.sibling(g, 2), C = (e) => {
-				var t = s();
-				r.remove_input_defaults(t), r.template_effect(() => {
-					r.set_attribute(t, "type", r.get(x)), r.set_value(t, r.get(L)[n()]?.valueTo ?? "");
-				}), r.delegated("input", t, (e) => r.get(Se)(n(), e.currentTarget.value)), r.append(e, t);
-			};
-			r.if(S, (e) => {
-				r.get(b) === "between" && e(C);
-			});
-			var w = r.sibling(S, 2), T = (e) => {
-				let t = r.derived(() => r.get(i).operator2 ?? r.get(J)(r.get(v)));
-				var a = d(), o = r.first_child(a), s = r.child(o);
-				let f;
-				var p = r.sibling(s, 2);
-				let m;
-				var h = r.sibling(p, 2);
-				r.reset(o);
-				var g = r.sibling(o, 2);
-				r.each(g, 21, () => r.get(y), (e) => e.value, (e, t) => {
-					var n = c(), i = r.child(n, !0);
-					r.reset(n);
-					var a = {};
-					r.template_effect((e) => {
-						r.set_text(i, e), a !== (a = r.get(t).value) && (n.value = (n.__value = r.get(t).value) ?? "");
-					}, [() => r.get(Y)(r.get(t), r.get(v))]), r.append(e, n);
-				}), r.reset(g);
-				var _;
-				r.init_select(g);
-				var b = r.sibling(g, 2), S = (e) => {
-					var a = u(), o = r.first_child(a);
-					r.remove_input_defaults(o);
-					var s = r.sibling(o, 2), c = (e) => {
-						var t = l();
-						r.remove_input_defaults(t), r.template_effect(() => {
-							r.set_attribute(t, "type", r.get(x)), r.set_value(t, r.get(i).valueTo2 ?? "");
-						}), r.delegated("input", t, (e) => X(n(), { valueTo2: e.currentTarget.value })), r.append(e, t);
-					};
-					r.if(s, (e) => {
-						r.get(t) === "between" && e(c);
-					}), r.template_effect(() => {
-						r.set_attribute(o, "type", r.get(x)), r.set_value(o, r.get(i).value2 ?? ""), r.set_attribute(o, "placeholder", r.get(t) === "between" ? "From" : "Filter value...");
-					}), r.delegated("input", o, (e) => X(n(), { value2: e.currentTarget.value })), r.append(e, a);
-				};
-				r.if(b, (e) => {
-					r.get(t) !== "isBlank" && e(S);
-				}), r.template_effect(() => {
-					f = r.set_class(s, 1, "", null, f, { "is-on": (r.get(i).join ?? "AND") === "AND" }), m = r.set_class(p, 1, "", null, m, { "is-on": r.get(i).join === "OR" }), _ !== (_ = r.get(t)) && (g.value = (g.__value = r.get(t)) ?? "", r.select_option(g, r.get(t)));
-				}), r.delegated("click", s, () => X(n(), { join: "AND" })), r.delegated("click", p, () => X(n(), { join: "OR" })), r.delegated("click", h, () => X(n(), {
-					operator2: void 0,
-					value2: void 0,
-					valueTo2: void 0,
-					join: void 0
-				})), r.delegated("change", g, (e) => X(n(), { operator2: e.currentTarget.value })), r.append(e, a);
-			}, E = (e) => {
-				var t = f();
-				r.delegated("click", t, () => X(n(), {
-					operator2: r.get(J)(r.get(v)),
-					value2: "",
-					join: "AND"
-				})), r.append(e, t);
-			};
-			r.if(w, (e) => {
-				r.get(i)?.operator2 ? e(T) : e(E, -1);
-			}), r.template_effect(() => {
-				r.set_attribute(h, "type", r.get(b) === "regex" ? "text" : r.get(x)), r.set_attribute(h, "list", r.get(t) ? `sv-in-list-${n()}` : void 0), r.set_value(h, r.get(L)[n()]?.value ?? ""), r.set_attribute(h, "placeholder", r.get(b) === "between" ? "From" : r.get(t) ? "value, value..." : r.get(b) === "regex" ? "Pattern..." : "Filter value...");
-			}), r.delegated("input", h, (e) => r.get(xe)(n(), e.currentTarget.value)), r.append(e, m);
-		};
-		r.if(O, (e) => {
-			r.get(b) !== "isBlank" && r.get(b) !== "isNotBlank" && e(ee);
-		});
-		var k = r.sibling(O, 6);
-		r.remove_input_defaults(k);
-		var A = r.sibling(k, 2), j = r.child(A);
-		r.remove_input_defaults(j), r.next(2), r.reset(A);
-		var M = r.sibling(A, 2);
-		r.each(M, 20, () => r.get(Q), (e) => e, (e, t) => {
-			var i = m(), a = r.child(i);
-			r.remove_input_defaults(a);
-			var o = r.sibling(a, 2), s = r.child(o, !0);
-			r.reset(o), r.reset(i), r.template_effect((e) => {
-				r.set_checked(a, e), r.set_text(s, t === "" ? "(Blanks)" : t);
-			}, [() => r.get(Be)(n(), t)]), r.delegated("change", a, () => r.get(Ve)(n(), t)), r.append(e, i);
-		}, (e) => {
-			var t = h();
-			r.append(e, t);
-		}), r.reset(M);
-		var N = r.sibling(M, 2), te = (e) => {
-			var t = g(), n = r.child(t);
-			r.reset(t), r.template_effect(() => r.set_text(n, `Showing ${r.get(Q).length ?? ""} of ${r.get(ze).length ?? ""}`)), r.append(e, t);
-		};
-		r.if(N, (e) => {
-			r.get(ze).length > r.get(Q).length && e(te);
-		});
-		var ne = r.sibling(N, 2), P = r.child(ne), re = r.sibling(P, 2);
-		r.reset(ne), r.reset(S), r.template_effect((e, t) => {
-			D !== (D = r.get(b)) && (E.value = (E.__value = r.get(b)) ?? "", r.select_option(E, r.get(b))), r.set_checked(j, e), P.disabled = t;
-		}, [() => r.get(He)(n()), () => !r.get(Ae)(n())]), r.delegated("change", E, (e) => r.get(be)(n(), e.currentTarget.value)), r.bind_value(k, () => I().columnMenuSearch, (e) => I().columnMenuSearch = e), r.delegated("change", j, () => r.get(Ue)(n())), r.delegated("click", P, () => r.get(We)(n())), r.delegated("click", re, function(...e) {
-			r.get(Z)?.apply(this, e);
-		}), r.append(e, S);
-	}, I = r.prop(F, "ctrl", 7), ue = r.derived(() => I().groupingControlsEnabled), L = r.derived(() => I().filterMenuValues), R = r.derived(() => I().tooltip);
-	r.derived(() => I().showTooltipFor);
-	let z = r.derived(() => I().columnMenuFor), B = r.derived(() => I().columnMenuPos), V = r.derived(() => I().filterMenuFor), H = r.derived(() => I().filterMenuPos), U = r.derived(() => I().operatorMenuFor), de = r.derived(() => I().operatorMenuPos), W = r.derived(() => I().chooseColumnsPos), G = r.derived(() => I().showColumnFiltersEffective), K = r.derived(() => I().props.columnMenuTabs === !0), fe = r.derived(() => I().grid), q = r.derived(() => I().allColumns), pe = r.derived(() => I().isColumnPinned), me = r.derived(() => I().pinColumnLeft), he = r.derived(() => I().pinColumnRight), ge = r.derived(() => I().unpinColumn), _e = r.derived(() => I().sortDirectionByColumn), ve = r.derived(() => I().groupingColumns), ye = r.derived(() => I().columnVirtualizationEnabled), be = r.derived(() => I().updateFilterOperator), xe = r.derived(() => I().updateFilterMenuValue), Se = r.derived(() => I().updateFilterMenuValueTo), Ce = r.derived(() => I().operatorsForColumn), J = r.derived(() => I().defaultOperatorFor), Y = r.derived(() => I().operatorLabelFor), we = r.derived(() => I().filterRowValues), Te = r.derived(() => I().inSuggestFor), Ee = r.derived(() => I().inSuggestPos), De = r.derived(() => I().inSuggestValues), Oe = r.derived(() => I().toggleFilterToken), ke = r.derived(() => I().facetValuesForColumn);
-	function X(e, t) {
-		let n = r.get(q).find((t) => t.id === e), i = I().filterMenuValues[e] ?? {
-			operator: r.get(J)(n),
-			value: ""
-		};
-		I().filterMenuValues = {
-			...I().filterMenuValues,
-			[e]: {
-				...i,
-				...t
-			}
-		};
-	}
-	let Ae = r.derived(() => I().isColumnFiltered), Z = r.derived(() => I().closeMenus);
-	r.user_effect(() => {
-		if (!(r.get(z) || r.get(V) || r.get(U) || r.get(W))) return;
-		let e = () => r.get(Z)(), t = n(() => Array.from(document.querySelectorAll(".sv-grid-menu")), e);
-		return window.addEventListener("resize", e), () => {
-			t(), window.removeEventListener("resize", e);
-		};
-	});
-	let je = r.derived(() => I().autosizeColumn), Me = r.derived(() => I().autosizeAllColumns), Ne = r.derived(() => I().resetColumns), Pe = r.derived(() => I().openChooseColumns), Fe = r.derived(() => I().sortColumnFromMenu), Ie = r.derived(() => I().clearColumnSort), Le = r.derived(() => I().groupByColumnFromMenu), Re = r.derived(() => I().clearGroupingFromMenu), ze = r.derived(() => I().columnMenuFacetValues), Q = r.derived(() => I().columnMenuVisibleFacets), Be = r.derived(() => I().isFacetChecked), Ve = r.derived(() => I().toggleFacetValue), He = r.derived(() => I().isAllFacetsChecked), Ue = r.derived(() => I().toggleAllFacets), We = r.derived(() => I().clearColumnFilter), Ge = r.derived(() => I().contextMenuFor), Ke = r.derived(() => I().contextMenuPos), qe = r.derived(() => I().contextMenuItems), $ = r.derived(() => I().closeContextMenu), Je = r.derived(() => I().commentEditFor), Ye = r.derived(() => I().saveComment), Xe = r.derived(() => I().removeComment), Ze = r.derived(() => I().closeCommentEditor);
-	var Qe = se(), $e = r.first_child(Qe), et = (e) => {
-		var t = v();
-		let n;
-		var i = r.child(t, !0);
-		r.reset(t), r.template_effect(() => {
-			n = r.set_class(t, 1, "sv-grid-tooltip", null, n, { "sv-grid-tooltip-above": !r.get(R).below }), r.set_style(t, `left: ${r.get(R).x}px; top: ${r.get(R).y}px; ${r.get(R).below ? "" : "transform: translateY(-100%);"}`), r.set_text(i, r.get(R).text);
-		}), r.append(e, t);
-	};
-	r.if($e, (e) => {
-		r.get(R) && e(et);
-	});
-	var tt = r.sibling($e, 2), nt = (e) => {
-		var t = y();
-		r.delegated("click", t, function(...e) {
-			r.get(Z)?.apply(this, e);
-		}), r.append(e, t);
-	};
-	r.if(tt, (e) => {
-		(r.get(z) || r.get(V) || r.get(U) || r.get(W)) && e(nt);
-	});
-	var rt = r.sibling(tt, 2), it = (e) => {
-		let t = r.derived(() => r.get(z)), n = r.derived(() => r.get(q).find((e) => e.id === r.get(t))), i = r.derived(() => r.get(n)?.getCanSort?.() ?? !1), a = r.derived(() => r.get(n)?.columnDef.field != null && r.get(n)?.columnDef.filterable !== !1), o = r.derived(() => I().columnMenuTab);
-		var s = ee(), c = r.child(s), l = (e) => {
-			var t = x(), n = r.child(t);
-			let i;
-			var s = r.sibling(n, 2), c = (e) => {
-				var t = b();
-				let n;
-				r.template_effect(() => {
-					n = r.set_class(t, 1, "sv-grid-menu-tab", null, n, { "is-active": r.get(o) === "filter" }), r.set_attribute(t, "aria-selected", r.get(o) === "filter");
-				}), r.delegated("click", t, () => I().columnMenuTab = "filter"), r.append(e, t);
-			};
-			r.if(s, (e) => {
-				r.get(a) && r.get(G) && e(c);
-			});
-			var l = r.sibling(s, 2);
-			let u;
-			r.reset(t), r.template_effect(() => {
-				i = r.set_class(n, 1, "sv-grid-menu-tab", null, i, { "is-active": r.get(o) === "general" }), r.set_attribute(n, "aria-selected", r.get(o) === "general"), u = r.set_class(l, 1, "sv-grid-menu-tab", null, u, { "is-active": r.get(o) === "columns" }), r.set_attribute(l, "aria-selected", r.get(o) === "columns");
-			}), r.delegated("click", n, () => I().columnMenuTab = "general"), r.delegated("click", l, () => I().columnMenuTab = "columns"), r.append(e, t);
-		};
-		r.if(c, (e) => {
-			r.get(K) && e(l);
-		});
-		var u = r.sibling(c, 2), d = (e) => {
-			le(e, () => r.get(t));
-		}, f = (e) => {
-			var t = C(), n = r.sibling(r.first_child(t), 2);
-			r.each(n, 21, () => r.get(fe).getAllColumns(), (e) => e.id, (e, t) => {
-				var n = S(), i = r.child(n);
-				r.remove_input_defaults(i);
-				var a = r.sibling(i, 2), o = r.child(a, !0);
-				r.reset(a), r.reset(n), r.template_effect(() => {
-					r.set_checked(i, !I().hiddenColumns[r.get(t).id]), r.set_text(o, typeof r.get(t).columnDef.header == "string" ? r.get(t).columnDef.header : r.get(t).id);
-				}), r.delegated("change", i, (e) => {
-					if (e.currentTarget.checked) {
-						let e = { ...I().hiddenColumns };
-						delete e[r.get(t).id], I().hiddenColumns = e;
-					} else I().hiddenColumns = {
-						...I().hiddenColumns,
-						[r.get(t).id]: !0
-					};
-				}), r.append(e, n);
-			}), r.reset(n), r.append(e, t);
-		}, p = (e) => {
-			var n = O(), a = r.first_child(n), o = (e) => {
-				var n = w(), i = r.first_child(n), a = r.child(i), o = r.child(a);
-				r.snippet(o, () => F.icon, () => "sort-asc"), r.reset(a), r.next(), r.reset(i);
-				var s = r.sibling(i, 2), c = r.child(s), l = r.child(c);
-				r.snippet(l, () => F.icon, () => "sort-desc"), r.reset(c), r.next(), r.reset(s);
-				var u = r.sibling(s, 2), d = r.child(u), f = r.child(d);
-				r.snippet(f, () => F.icon, () => "x"), r.reset(d), r.next(), r.reset(u), r.template_effect(() => u.disabled = !r.get(_e)[r.get(t)]), r.delegated("click", i, () => r.get(Fe)(r.get(t), !1)), r.delegated("click", s, () => r.get(Fe)(r.get(t), !0)), r.delegated("click", u, () => r.get(Ie)(r.get(t))), r.append(e, n);
-			};
-			r.if(a, (e) => {
-				r.get(i) && e(o);
-			});
-			var s = r.sibling(a, 2), c = (e) => {
-				let n = r.derived(() => r.get(pe)(r.get(t)));
-				var i = T(), a = r.sibling(r.first_child(i), 2), o = r.child(a), s = r.child(o);
-				r.snippet(s, () => F.icon, () => "op-startsWith"), r.reset(o), r.next(), r.reset(a);
-				var c = r.sibling(a, 2), l = r.child(c), u = r.child(l);
-				r.snippet(u, () => F.icon, () => "op-greaterThan"), r.reset(l), r.next(), r.reset(c);
-				var d = r.sibling(c, 2), f = r.child(d), p = r.child(f);
-				r.snippet(p, () => F.icon, () => "x"), r.reset(f), r.next(), r.reset(d), r.template_effect(() => {
-					a.disabled = r.get(n) === "left", c.disabled = r.get(n) === "right", d.disabled = !r.get(n);
-				}), r.delegated("click", a, () => r.get(me)(r.get(t))), r.delegated("click", c, () => r.get(he)(r.get(t))), r.delegated("click", d, () => r.get(ge)(r.get(t))), r.append(e, i);
-			};
-			r.if(s, (e) => {
-				r.get(ye) || e(c);
-			});
-			var l = r.sibling(s, 4), u = r.child(l), d = r.child(u);
-			r.snippet(d, () => F.icon, () => "autosize"), r.reset(u), r.next(), r.reset(l);
-			var f = r.sibling(l, 2), p = r.child(f), m = r.child(p);
-			r.snippet(m, () => F.icon, () => "autosize"), r.reset(p), r.next(), r.reset(f);
-			var h = r.sibling(f, 2), g = (e) => {
-				var n = E(), i = r.sibling(r.first_child(n), 2), a = r.child(i), o = r.child(a);
-				r.snippet(o, () => F.icon, () => "group"), r.reset(a), r.next(), r.reset(i);
-				var s = r.sibling(i, 2), c = r.child(s), l = r.child(c);
-				r.snippet(l, () => F.icon, () => "x"), r.reset(c), r.next(), r.reset(s), r.template_effect((e, t) => {
-					i.disabled = e, s.disabled = t;
-				}, [() => r.get(ve).includes(r.get(t)), () => !r.get(ve).includes(r.get(t))]), r.delegated("click", i, () => r.get(Le)(r.get(t))), r.delegated("click", s, () => r.get(Re)(r.get(t))), r.append(e, n);
-			};
-			r.if(h, (e) => {
-				r.get(ue) && e(g);
-			});
-			var _ = r.sibling(h, 4), v = (e) => {
-				var t = D();
-				let n;
-				var i = r.child(t), a = r.child(i);
-				r.snippet(a, () => F.icon, () => "columns"), r.reset(i);
-				var o = r.sibling(i, 2), s = r.child(o);
-				r.snippet(s, () => F.icon, () => "chevron-down"), r.reset(o), r.reset(t), r.template_effect(() => {
-					n = r.set_class(t, 1, "sv-grid-menu-item", null, n, { "is-open": r.get(W) !== null }), r.set_attribute(t, "aria-expanded", r.get(W) !== null);
-				}), r.delegated("click", t, (e) => r.get(Pe)(e)), r.append(e, t);
-			};
-			r.if(_, (e) => {
-				r.get(K) || e(v);
-			});
-			var y = r.sibling(_, 2), b = r.child(y), x = r.child(b);
-			r.snippet(x, () => F.icon, () => "reset"), r.reset(b), r.next(), r.reset(y), r.delegated("click", l, () => {
-				r.get(je)(r.get(t)), r.get(Z)();
-			}), r.delegated("click", f, () => {
-				r.get(Me)(), r.get(Z)();
-			}), r.delegated("click", y, () => {
-				r.get(Ne)(), r.get(Z)();
-			}), r.append(e, n);
-		};
-		r.if(u, (e) => {
-			r.get(K) && r.get(o) === "filter" && r.get(a) && r.get(G) ? e(d) : r.get(K) && r.get(o) === "columns" ? e(f, 1) : e(p, -1);
-		}), r.reset(s), r.template_effect(() => r.set_style(s, `left: ${r.get(B).x}px; top: ${r.get(B).y}px; max-height: calc(100vh - ${r.get(B).y}px - 12px);`)), r.append(e, s);
-	};
-	r.if(rt, (e) => {
-		r.get(z) && e(it);
-	});
-	var at = r.sibling(rt, 2), ot = (e) => {
-		var t = k();
-		le(r.child(t), () => r.get(V)), r.reset(t), r.template_effect(() => r.set_style(t, `left: ${r.get(H).x}px; top: ${r.get(H).y}px; max-height: calc(100vh - ${r.get(H).y}px - 12px);`)), r.append(e, t);
-	};
-	r.if(at, (e) => {
-		r.get(V) && r.get(G) && e(ot);
-	});
-	var st = r.sibling(at, 2), ct = (e) => {
-		let t = r.derived(() => r.get(fe).getAllColumns());
-		var n = j(), i = r.sibling(r.child(n), 2);
-		r.each(i, 21, () => r.get(t), (e) => e.id, (e, t) => {
-			var n = A(), i = r.child(n);
-			r.remove_input_defaults(i);
-			var a = r.sibling(i, 2), o = r.child(a, !0);
-			r.reset(a), r.reset(n), r.template_effect(() => {
-				r.set_checked(i, !I().hiddenColumns[r.get(t).id]), r.set_text(o, typeof r.get(t).columnDef.header == "string" ? r.get(t).columnDef.header : r.get(t).id);
-			}), r.delegated("change", i, (e) => {
-				if (e.currentTarget.checked) {
-					let e = { ...I().hiddenColumns };
-					delete e[r.get(t).id], I().hiddenColumns = e;
-				} else I().hiddenColumns = {
-					...I().hiddenColumns,
-					[r.get(t).id]: !0
-				};
-			}), r.append(e, n);
-		}), r.reset(i), r.reset(n), r.template_effect(() => r.set_style(n, `left: ${r.get(W).x}px; top: ${r.get(W).y}px;`)), r.append(e, n);
-	};
-	r.if(st, (e) => {
-		r.get(W) && e(ct);
-	});
-	var lt = r.sibling(st, 2), ut = (e) => {
-		let t = r.derived(() => r.get(U)), n = r.derived(() => r.get(q).find((e) => e.id === r.get(t))), i = r.derived(() => r.get(Ce)(r.get(n))), a = r.derived(() => r.get(L)[r.get(t)]?.operator ?? r.get(J)(r.get(n)));
-		var o = N();
-		r.each(o, 21, () => r.get(i), (e) => e.value, (e, i) => {
-			var o = M(), s = r.child(o), c = r.child(s);
-			r.snippet(c, () => F.icon, () => r.get(i).iconName), r.reset(s);
-			var l = r.sibling(s);
-			r.reset(o), r.template_effect((e) => {
-				r.set_attribute(o, "aria-checked", r.get(a) === r.get(i).value), r.set_text(l, ` ${e ?? ""}`);
-			}, [() => r.get(Y)(r.get(i), r.get(n))]), r.delegated("click", o, () => {
-				r.get(be)(r.get(t), r.get(i).value), r.get(Z)();
-			}), r.append(e, o);
-		}), r.reset(o), r.template_effect(() => r.set_style(o, `left: ${r.get(de).x}px; top: ${r.get(de).y}px;`)), r.append(e, o);
-	};
-	r.if(lt, (e) => {
-		r.get(U) && e(ut);
-	});
-	var dt = r.sibling(lt, 2), ft = (t) => {
-		let n = r.derived(() => r.get(Te)), i = r.derived(() => new Set(e(r.get(we)[r.get(n)] ?? "")));
-		var a = P();
-		r.each(a, 20, () => r.get(De), (e) => e, (e, t) => {
-			let a = r.derived(() => r.get(i).has(t));
-			var o = te(), s = r.child(o), c = r.child(s, !0);
-			r.reset(s);
-			var l = r.sibling(s, 2), u = r.child(l, !0);
-			r.reset(l), r.reset(o), r.template_effect(() => {
-				r.set_attribute(o, "aria-selected", r.get(a)), r.set_text(c, r.get(a) ? "✓" : ""), r.set_text(u, t === "" ? "(Blanks)" : t);
-			}), r.delegated("mousedown", o, (e) => {
-				e.preventDefault(), r.get(Oe)(r.get(n), t);
-			}), r.append(e, o);
-		}, (e) => {
-			var t = ne();
-			r.append(e, t);
-		}), r.reset(a), r.template_effect(() => r.set_style(a, `left: ${r.get(Ee).x}px; top: ${r.get(Ee).y}px;`)), r.append(t, a);
-	};
-	r.if(dt, (e) => {
-		r.get(Te) && e(ft);
-	});
-	var pt = r.sibling(dt, 2), mt = (e) => {
-		var t = ae(), n = r.first_child(t), i = r.sibling(n, 2);
-		r.each(i, 21, () => r.get(qe)(), (e) => e.key, (e, t) => {
-			var n = r.comment(), i = r.first_child(n), a = (e) => {
-				var t = re();
-				r.append(e, t);
-			}, o = (e) => {
-				var n = ie(), i = r.child(n, !0);
-				r.reset(n), r.template_effect(() => {
-					n.disabled = r.get(t).disabled, r.set_text(i, r.get(t).label);
-				}), r.delegated("click", n, () => {
-					r.get(t).run?.(), r.get($)();
-				}), r.append(e, n);
-			};
-			r.if(i, (e) => {
-				r.get(t).separator ? e(a) : e(o, -1);
-			}), r.append(e, n);
-		}), r.reset(i), r.template_effect(() => r.set_style(i, `left: ${r.get(Ke).x}px; top: ${r.get(Ke).y}px;`)), r.delegated("contextmenu", n, (e) => {
-			e.preventDefault(), r.get($)();
-		}), r.delegated("click", n, function(...e) {
-			r.get($)?.apply(this, e);
-		}), r.append(e, t);
-	};
-	r.if(pt, (e) => {
-		r.get(Ge) && e(mt);
-	});
-	var ht = r.sibling(pt, 2), gt = (e) => {
-		var t = oe(), n = r.first_child(t), i = r.sibling(n, 2), a = r.child(i);
-		r.remove_textarea_child(a), r.autofocus(a, !0);
-		var o = r.sibling(a, 2), s = r.child(o), c = r.sibling(s, 4), l = r.sibling(c, 2);
-		r.reset(o), r.reset(i), r.template_effect(() => r.set_style(i, `left: ${r.get(Je).x}px; top: ${r.get(Je).y}px;`)), r.delegated("click", n, function(...e) {
-			r.get(Ze)?.apply(this, e);
-		}), r.delegated("keydown", a, (e) => {
-			e.stopPropagation(), e.key === "Escape" && (e.preventDefault(), r.get(Ze)()), e.key === "Enter" && (e.ctrlKey || e.metaKey) && (e.preventDefault(), r.get(Ye)());
-		}), r.bind_value(a, () => I().commentDraft, (e) => I().commentDraft = e), r.delegated("click", s, function(...e) {
-			r.get(Xe)?.apply(this, e);
-		}), r.delegated("click", c, function(...e) {
-			r.get(Ze)?.apply(this, e);
-		}), r.delegated("click", l, function(...e) {
-			r.get(Ye)?.apply(this, e);
-		}), r.append(e, t);
-	};
-	r.if(ht, (e) => {
-		r.get(Je) && e(gt);
-	}), r.append(ce, Qe), r.pop();
-}
-r.delegate([
-	"change",
-	"input",
-	"click",
-	"mousedown",
-	"contextmenu",
-	"keydown"
-]);
-//#endregion
-export { ce as default };