@bmsuisse/datagrid 0.35.3 → 0.37.0

package/dist/index.js

@@ -204,12 +204,13 @@ import { forwardRef as forwardRef2 } from "react";
 import { jsx as jsx2 } from "react/jsx-runtime";
 var Popover = PopoverPrimitive.Root;
 var PopoverTrigger = PopoverPrimitive.Trigger;
-var PopoverContent = forwardRef2(({ className, align = "start", sideOffset = 4, ...props }, ref) => /* @__PURE__ */ jsx2(PopoverPrimitive.Portal, { children: /* @__PURE__ */ jsx2(
+var PopoverContent = forwardRef2(({ className, align = "start", sideOffset = 4, collisionPadding = 8, ...props }, ref) => /* @__PURE__ */ jsx2(PopoverPrimitive.Portal, { children: /* @__PURE__ */ jsx2(
   PopoverPrimitive.Content,
   {
     ref,
     align,
     sideOffset,
+    collisionPadding,
     className: cn(
       "z-50 w-72 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none",
       className
@@ -358,10 +359,91 @@ import { CalendarDaysIcon } from "@heroicons/react/24/outline";
 import { endOfDay, endOfMonth, format, parseISO as parseISO2, startOfDay, startOfMonth, subDays } from "date-fns";
 
 // src/components/ui/calendar.tsx
-import { DayPicker } from "react-day-picker";
+import { ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, ChevronUpIcon } from "lucide-react";
+import { useEffect, useRef } from "react";
+import { DayPicker, getDefaultClassNames } from "react-day-picker";
 import { jsx as jsx5 } from "react/jsx-runtime";
-function Calendar({ className, ...props }) {
-  return /* @__PURE__ */ jsx5(DayPicker, { className: cn("p-3", className), ...props });
+function Calendar({ className, classNames, ...props }) {
+  const defaultClassNames = getDefaultClassNames();
+  return /* @__PURE__ */ jsx5(
+    DayPicker,
+    {
+      className: cn("w-fit", className),
+      classNames: {
+        root: cn("relative", defaultClassNames.root),
+        months: cn(
+          "flex flex-col gap-4 sm:flex-row sm:divide-x sm:divide-border",
+          defaultClassNames.months
+        ),
+        month: cn("flex flex-col gap-3", defaultClassNames.month),
+        month_caption: cn("flex items-center justify-center px-8 h-8", defaultClassNames.month_caption),
+        caption_label: cn("text-sm font-medium", defaultClassNames.caption_label),
+        nav: cn("flex items-center justify-between absolute inset-x-0 top-0 px-1", defaultClassNames.nav),
+        button_previous: cn(
+          buttonVariants({ variant: "outline", size: "icon" }),
+          "h-7 w-7 shrink-0 text-muted-foreground hover:text-foreground",
+          defaultClassNames.button_previous
+        ),
+        button_next: cn(
+          buttonVariants({ variant: "outline", size: "icon" }),
+          "h-7 w-7 shrink-0 text-muted-foreground hover:text-foreground",
+          defaultClassNames.button_next
+        ),
+        month_grid: cn("w-full border-collapse", defaultClassNames.month_grid),
+        weekdays: cn("flex", defaultClassNames.weekdays),
+        weekday: cn(
+          "w-8 text-center text-[0.7rem] font-normal text-muted-foreground",
+          defaultClassNames.weekday
+        ),
+        week: cn("flex w-full mt-1", defaultClassNames.week),
+        day: cn(
+          "relative w-8 h-8 p-0 text-center text-sm focus-within:relative focus-within:z-20",
+          "[&:first-child[data-selected=true]_button]:rounded-l-md [&:last-child[data-selected=true]_button]:rounded-r-md",
+          defaultClassNames.day
+        ),
+        range_start: cn("rounded-l-md bg-accent", defaultClassNames.range_start),
+        range_middle: cn("rounded-none bg-accent/60", defaultClassNames.range_middle),
+        range_end: cn("rounded-r-md bg-accent", defaultClassNames.range_end),
+        today: cn(
+          "[&:not([data-selected])]:text-primary [&:not([data-selected])]:font-semibold",
+          defaultClassNames.today
+        ),
+        outside: cn("text-muted-foreground/50", defaultClassNames.outside),
+        disabled: cn("text-muted-foreground/30 line-through", defaultClassNames.disabled),
+        hidden: cn("invisible", defaultClassNames.hidden),
+        ...classNames
+      },
+      components: {
+        Chevron: ({ className: chevronClassName, orientation }) => {
+          const Icon2 = orientation === "up" ? ChevronUpIcon : orientation === "down" ? ChevronDownIcon : orientation === "right" ? ChevronRightIcon : ChevronLeftIcon;
+          return /* @__PURE__ */ jsx5(Icon2, { className: cn("h-4 w-4", chevronClassName), "aria-hidden": true });
+        },
+        DayButton: ({ className: dayClassName, day: _day, modifiers, ...dayProps }) => {
+          const ref = useRef(null);
+          useEffect(() => {
+            if (modifiers.focused) ref.current?.focus();
+          }, [modifiers.focused]);
+          return /* @__PURE__ */ jsx5(
+            "button",
+            {
+              ref,
+              type: "button",
+              className: cn(
+                "h-8 w-8 rounded-md text-sm font-normal transition-colors hover:bg-accent hover:text-accent-foreground",
+                "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+                "data-[selected=true]:bg-primary data-[selected=true]:text-primary-foreground data-[selected=true]:hover:bg-primary data-[selected=true]:hover:text-primary-foreground",
+                modifiers.range_middle && "data-[selected=true]:bg-transparent data-[selected=true]:text-foreground data-[selected=true]:hover:bg-accent",
+                dayClassName
+              ),
+              "data-selected": modifiers.selected || void 0,
+              ...dayProps
+            }
+          );
+        }
+      },
+      ...props
+    }
+  );
 }
 
 // src/filter/DateRangeFilter.tsx
@@ -436,7 +518,7 @@ function DateRangeFilter({
       )),
       /* @__PURE__ */ jsx6(Button, { type: "button", variant: "outline", size: "sm", onClick: () => emit(void 0), children: "Custom" })
     ] }),
-    /* @__PURE__ */ jsx6(Calendar, { mode: "range", selected: range, onSelect: emit, numberOfMonths: 1 })
+    /* @__PURE__ */ jsx6(Calendar, { mode: "range", selected: range, onSelect: emit, numberOfMonths: 2 })
   ] });
   if (bare) {
     return /* @__PURE__ */ jsx6("div", { "data-testid": `filter-${column.id}`, children: panel });
@@ -515,6 +597,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 +631,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 +648,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 +698,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 });
@@ -615,7 +760,7 @@ function EnumFilter({
 
 // src/filter/NumberComparisonFilter.tsx
 import { FunnelIcon as FunnelIcon3 } from "@heroicons/react/24/outline";
-import { useEffect, useId, useRef, useState as useState2 } from "react";
+import { useEffect as useEffect2, useId, useRef as useRef2, useState as useState2 } from "react";
 
 // src/column/format.ts
 import { parseISO as parseISO3 } from "date-fns";
@@ -802,8 +947,8 @@ function NumberComparisonFilter({
   const [text2, setText2] = useState2(initial.text2);
   const operatorId = useId();
   const valueId = useId();
-  const lastEmittedRef = useRef(value);
-  useEffect(() => {
+  const lastEmittedRef = useRef2(value);
+  useEffect2(() => {
     if (value === lastEmittedRef.current) return;
     lastEmittedRef.current = value;
     const next = stateFromValue(value);
@@ -919,7 +1064,7 @@ function NumberComparisonFilter({
 
 // src/filter/NumberRangeFilter.tsx
 import { FunnelIcon as FunnelIcon4 } from "@heroicons/react/24/outline";
-import { useEffect as useEffect2, useId as useId2, useRef as useRef2, useState as useState3 } from "react";
+import { useEffect as useEffect3, useId as useId2, useRef as useRef3, useState as useState3 } from "react";
 import { jsx as jsx11, jsxs as jsxs6 } from "react/jsx-runtime";
 function parseNumber2(raw) {
   if (raw.trim() === "") return void 0;
@@ -937,8 +1082,8 @@ function NumberRangeFilter({
   const [maxText, setMaxText] = useState3(initial.max?.toString() ?? "");
   const minId = useId2();
   const maxId = useId2();
-  const lastEmittedRef = useRef2(value);
-  useEffect2(() => {
+  const lastEmittedRef = useRef3(value);
+  useEffect3(() => {
     if (value === lastEmittedRef.current) return;
     lastEmittedRef.current = value;
     const next = rangeOf2(value);
@@ -1019,7 +1164,7 @@ function NumberRangeFilter({
 
 // src/filter/NumberHistogramFilter.tsx
 import { FunnelIcon as FunnelIcon5 } from "@heroicons/react/24/outline";
-import { useCallback, useEffect as useEffect3, useMemo as useMemo2, useRef as useRef3, useState as useState4 } from "react";
+import { useCallback, useEffect as useEffect4, useMemo as useMemo2, useRef as useRef4, useState as useState4 } from "react";
 import { jsx as jsx12, jsxs as jsxs7 } from "react/jsx-runtime";
 var BAR_HEIGHT_PX = 56;
 var DEFAULT_BUCKETS = 24;
@@ -1041,12 +1186,12 @@ function NumberHistogramFilter({
 }) {
   const [openState, setOpen] = useState4(false);
   const open = bare || openState;
-  const trackRef = useRef3(null);
+  const trackRef = useRef4(null);
   const [minOnTop, setMinOnTop] = useState4(false);
   const [loadedValues, setLoadedValues] = useState4([]);
   const [loading, setLoading] = useState4(false);
   const { min, max } = rangeOf2(value);
-  useEffect3(() => {
+  useEffect4(() => {
     if (!open || !loadValues) return;
     let cancelled = false;
     setLoading(true);
@@ -1070,7 +1215,7 @@ function NumberHistogramFilter({
   const activeMax = max ?? dataMax;
   const [minText, setMinText] = useState4("");
   const [maxText, setMaxText] = useState4("");
-  useEffect3(() => {
+  useEffect4(() => {
     if (!open) return;
     setMinText(Number.isFinite(activeMin) ? String(Math.round(activeMin)) : "");
     setMaxText(Number.isFinite(activeMax) ? String(Math.round(activeMax)) : "");
@@ -1283,7 +1428,7 @@ function facetedNumberValues(data, column, filter) {
 
 // src/filter/StringFilter.tsx
 import { FunnelIcon as FunnelIcon6 } from "@heroicons/react/24/outline";
-import { useEffect as useEffect4, useId as useId3, useState as useState5 } from "react";
+import { useEffect as useEffect5, useId as useId3, useState as useState5 } from "react";
 import { jsx as jsx13, jsxs as jsxs8 } from "react/jsx-runtime";
 var STRING_OPERATORS = [
   { value: "contains", label: "Contains" },
@@ -1302,7 +1447,7 @@ function StringFilter({
   const text = typeof value?.value === "string" ? value.value : "";
   const inputId = useId3();
   const isFiltered = text !== "";
-  useEffect4(() => {
+  useEffect5(() => {
     setOperator(value?.operator ?? DEFAULT_OPERATOR2);
   }, [value?.operator]);
   function emit(nextOperator, nextText) {
@@ -1517,7 +1662,7 @@ function EnumEditor({
 }
 
 // src/edit/MultilineStringEditor.tsx
-import { useLayoutEffect, useRef as useRef4 } from "react";
+import { useLayoutEffect, useRef as useRef5 } from "react";
 
 // src/components/ui/textarea.tsx
 import { forwardRef as forwardRef6 } from "react";
@@ -1548,8 +1693,8 @@ function MultilineStringEditor({
   autoFocus
 }) {
   const errorId = editErrorId(rowId, column.id);
-  const textareaRef = useRef4(null);
-  const selectionRef = useRef4(null);
+  const textareaRef = useRef5(null);
+  const selectionRef = useRef5(null);
   const text = value === null || value === void 0 ? "" : String(value);
   useLayoutEffect(() => {
     const el = textareaRef.current;
@@ -1584,7 +1729,7 @@ function MultilineStringEditor({
 }
 
 // src/edit/NumberEditor.tsx
-import { useEffect as useEffect5, useRef as useRef5, useState as useState6 } from "react";
+import { useEffect as useEffect6, useRef as useRef6, useState as useState6 } from "react";
 import { jsx as jsx21, jsxs as jsxs13 } from "react/jsx-runtime";
 function textFromValue(value) {
   return value === null || value === void 0 ? "" : String(value);
@@ -1599,8 +1744,8 @@ function NumberEditor({
 }) {
   const errorId = editErrorId(rowId, column.id);
   const [text, setText] = useState6(() => textFromValue(value));
-  const lastEmittedRef = useRef5(value);
-  useEffect5(() => {
+  const lastEmittedRef = useRef6(value);
+  useEffect6(() => {
     if (value === lastEmittedRef.current) return;
     lastEmittedRef.current = value;
     setText(textFromValue(value));
@@ -1678,7 +1823,7 @@ function renderDefaultEditWidget(column, rowId, value, onChange, error, autoFocu
 }
 
 // src/edit/editingState.ts
-import { useEffect as useEffect6, useRef as useRef6, useState as useState7 } from "react";
+import { useEffect as useEffect7, useRef as useRef7, useState as useState7 } from "react";
 function editValuesEqual(a, b) {
   if (a instanceof Date && b instanceof Date) return a.getTime() === b.getTime();
   return a === b;
@@ -1693,7 +1838,7 @@ function useEditingState(editing, getRowId) {
     setActiveRowId(rowId);
     setAutoFocusTarget({ rowId, columnId });
   }
-  useEffect6(() => {
+  useEffect7(() => {
     if (autoFocusTarget) setAutoFocusTarget(null);
   }, [autoFocusTarget]);
   function commitEdit(column, row, value) {
@@ -1780,7 +1925,7 @@ function useEditingState(editing, getRowId) {
     editing?.onDiscard?.();
   }
   const ctx = editing ? { pendingEdits, editErrors, activeRowId, autoFocusTarget, getRowId, onEdit: commitEdit, onActivateRow: activateRow } : void 0;
-  const ctxRef = useRef6(void 0);
+  const ctxRef = useRef7(void 0);
   ctxRef.current = ctx;
   return { pendingEdits, editErrors, hasEditErrors, ctx, ctxRef, handleSaveEdits, handleDiscardEdits };
 }
@@ -1986,13 +2131,13 @@ function extendRangeForFillToCellRange(base, target, rowIds, columnIds, rowIndex
 }
 
 // src/cell-editing/useCellSelection.ts
-import { useCallback as useCallback2, useMemo as useMemo3, useRef as useRef7, useState as useState8 } from "react";
+import { useCallback as useCallback2, useMemo as useMemo3, useRef as useRef8, useState as useState8 } from "react";
 function useCellSelection({ rowIds, columnIds, onNavigateToRow }) {
   const [selection, setSelectionState] = useState8(void 0);
   const [isDragging, setIsDragging] = useState8(false);
   const [dragFocus, setDragFocus] = useState8(void 0);
-  const draggingRef = useRef7(false);
-  const dragFocusRef = useRef7(void 0);
+  const draggingRef = useRef8(false);
+  const dragFocusRef = useRef8(void 0);
   const rowIndex = useMemo3(() => buildIndexMap(rowIds), [rowIds]);
   const columnIndex = useMemo3(() => buildIndexMap(columnIds), [columnIds]);
   const startSelection = useCallback2((cell, options) => {
@@ -2055,9 +2200,9 @@ function useCellSelection({ rowIds, columnIds, onNavigateToRow }) {
   }, [selection, isDragging, dragFocus]);
   const [isFillDragging, setIsFillDragging] = useState8(false);
   const [fillTarget, setFillTarget] = useState8(void 0);
-  const fillDraggingRef = useRef7(false);
-  const fillTargetRef = useRef7(void 0);
-  const fillBaseRef = useRef7(void 0);
+  const fillDraggingRef = useRef8(false);
+  const fillTargetRef = useRef8(void 0);
+  const fillBaseRef = useRef8(void 0);
   const startFillDrag = useCallback2(() => {
     if (!selection) return;
     fillBaseRef.current = selection;
@@ -2107,7 +2252,7 @@ function useCellSelection({ rowIds, columnIds, onNavigateToRow }) {
 }
 
 // src/cell-editing/useCellEditingState.ts
-import { useRef as useRef8, useState as useState9 } from "react";
+import { useRef as useRef9, useState as useState9 } from "react";
 function cellKey(rowId, columnId) {
   return `${rowId}:${columnId}`;
 }
@@ -2118,7 +2263,7 @@ function useCellEditingState(cellEditing, getRowId) {
   const [draftValue, setDraftValue] = useState9(void 0);
   const [overrides, setOverrides] = useState9(/* @__PURE__ */ new Map());
   const [errors, setErrors] = useState9(/* @__PURE__ */ new Map());
-  const justCommittedRef = useRef8(false);
+  const justCommittedRef = useRef9(false);
   function closeEditor() {
     setEditingCell(void 0);
     setInitialText(void 0);
@@ -2216,7 +2361,7 @@ function useCellEditingState(cellEditing, getRowId) {
     applyChange: (change) => applyChanges([change]),
     consumeJustCommitted
   } : void 0;
-  const ctxRef = useRef8(void 0);
+  const ctxRef = useRef9(void 0);
   ctxRef.current = ctx;
   return { ctx, ctxRef, applyChanges };
 }
@@ -2277,7 +2422,7 @@ function renderCellModeCell(column, row, rawValue, ctx) {
 }
 
 // src/cell-editing/SelectionOverlay.tsx
-import { useLayoutEffect as useLayoutEffect2, useRef as useRef9, useState as useState10 } from "react";
+import { useLayoutEffect as useLayoutEffect2, useRef as useRef10, useState as useState10 } from "react";
 import { Fragment as Fragment2, jsx as jsx27, jsxs as jsxs16 } from "react/jsx-runtime";
 function cellSelector(rowId, columnId) {
   const escape = (value) => typeof CSS !== "undefined" && CSS.escape ? CSS.escape(value) : value.replace(/["\\]/g, "\\$&");
@@ -2310,7 +2455,7 @@ function SelectionOverlay({
 }) {
   const [rect, setRect] = useState10(void 0);
   const [previewRect, setPreviewRect] = useState10(void 0);
-  const recomputeRef = useRef9(() => {
+  const recomputeRef = useRef10(() => {
   });
   recomputeRef.current = () => {
     const container = containerRef.current;
@@ -2557,7 +2702,7 @@ function computeFillChanges(sourceRange, finalRange, rowIds, columnIds, columns,
 
 // src/column-selector/ColumnSelector.tsx
 import { Columns3, GripVertical } from "lucide-react";
-import { useEffect as useEffect7, useState as useState11 } from "react";
+import { useEffect as useEffect8, useState as useState11 } from "react";
 
 // src/components/ui/dialog.tsx
 import * as DialogPrimitive from "@radix-ui/react-dialog";
@@ -2724,12 +2869,12 @@ function ColumnSelector({
   columnOrder,
   onColumnOrderChange
 }) {
-  useEffect7(() => {
+  useEffect8(() => {
     if (!persistKey) return;
     const restored = readPersistedVisibility(persistKey);
     if (restored) onVisibilityChange({ ...visibility, ...restored });
   }, [persistKey]);
-  useEffect7(() => {
+  useEffect8(() => {
     if (!persistKey || !onColumnOrderChange) return;
     const restored = readPersistedColumnOrder(persistKey);
     if (restored) onColumnOrderChange(restored);
@@ -2912,11 +3057,11 @@ import { BarsArrowDownIcon, BarsArrowUpIcon, FunnelIcon as FunnelIcon7 } from "@
 import { columnResizingFeature, columnSizingFeature, flexRender, tableFeatures, useTable } from "@tanstack/react-table";
 import { useVirtualizer } from "@tanstack/react-virtual";
 import { ChevronRight, Loader2 } from "lucide-react";
-import { Fragment as Fragment3, useEffect as useEffect11, useMemo as useMemo8, useRef as useRef12, useState as useState16 } from "react";
+import { Fragment as Fragment3, useEffect as useEffect12, useMemo as useMemo8, useRef as useRef13, useState as useState16 } from "react";
 
 // src/cell-editing/renderAlwaysEditCell.tsx
 import {
-  useEffect as useEffect8,
+  useEffect as useEffect9,
   useState as useState12
 } from "react";
 import { jsx as jsx32 } from "react/jsx-runtime";
@@ -2928,7 +3073,7 @@ function AlwaysEditCell(props) {
   const [enumOpen, setEnumOpen] = useState12(false);
   const isBuiltinEnum = column.type === "enum" && !column.renderEditCell;
   const shouldOpenEnumNow = isBuiltinEnum && (atomicGesture?.shouldOpenEnum(rowId, column.id) ?? false);
-  useEffect8(() => {
+  useEffect9(() => {
     if (shouldOpenEnumNow) setEnumOpen(true);
   }, [shouldOpenEnumNow]);
   if (!isEditable(column, row)) {
@@ -3051,9 +3196,9 @@ function useGroupExpansion(defaultGroupsExpanded, controlledExpandedGroups, onEx
 }
 
 // src/hooks/useStickyGroupHeaderTop.ts
-import { useLayoutEffect as useLayoutEffect3, useRef as useRef10, useState as useState14 } from "react";
+import { useLayoutEffect as useLayoutEffect3, useRef as useRef11, useState as useState14 } from "react";
 function useStickyGroupHeaderTop(enabled) {
-  const theadRef = useRef10(null);
+  const theadRef = useRef11(null);
   const [groupHeaderTop, setGroupHeaderTop] = useState14(0);
   useLayoutEffect3(() => {
     if (!enabled) return;
@@ -3118,15 +3263,15 @@ function processClientData(data, state) {
 }
 
 // src/grid/useGridState.ts
-import { useCallback as useCallback4, useEffect as useEffect10, useMemo as useMemo7, useState as useState15 } from "react";
+import { useCallback as useCallback4, useEffect as useEffect11, useMemo as useMemo7, useState as useState15 } from "react";
 
 // src/hooks/useDebouncedCallback.ts
-import { useEffect as useEffect9, useMemo as useMemo6, useRef as useRef11 } from "react";
+import { useEffect as useEffect10, useMemo as useMemo6, useRef as useRef12 } from "react";
 function useDebouncedCallback(callback, delayMs) {
-  const callbackRef = useRef11(callback);
+  const callbackRef = useRef12(callback);
   callbackRef.current = callback;
-  const timeoutRef = useRef11(void 0);
-  useEffect9(() => {
+  const timeoutRef = useRef12(void 0);
+  useEffect10(() => {
     return () => {
       clearTimeout(timeoutRef.current);
     };
@@ -3179,7 +3324,7 @@ function useGridState(dataSource, initialState, externalState, showPagination =
     },
     [notifyRaw, cancelDebouncedNotify]
   );
-  useEffect10(() => {
+  useEffect11(() => {
     if (!externalState) return;
     cancelDebouncedNotify();
     setState(externalState);
@@ -3388,7 +3533,7 @@ function DataGrid({
     hasCellEditing ? cellEditing : void 0,
     getRowId
   );
-  const atomicGestureRef = useRef12(void 0);
+  const atomicGestureRef = useRef13(void 0);
   const visibleColumns = useVisibleColumns(columns, columnVisibility);
   const serverRowCount = dataSource.mode === "server" ? dataSource.rowCount : void 0;
   const { rows, rowCount } = useMemo8(() => {
@@ -3543,8 +3688,8 @@ function DataGrid({
     return map;
   }, [visibleColumns, enableColumnResizing, leftPinnedOffsets, rightPinnedOffsets, columnSizing]);
   const tableRows = table.getRowModel().rows;
-  const truncationWarnedRef = useRef12(false);
-  useEffect11(() => {
+  const truncationWarnedRef = useRef13(false);
+  useEffect12(() => {
     if (process.env.NODE_ENV === "production") return;
     if (showPagination) return;
     if (truncationWarnedRef.current) return;
@@ -3574,7 +3719,7 @@ function DataGrid({
     }
     return items;
   }, [shouldVirtualize, groupedBuckets, tableRows, isGroupExpanded]);
-  const scrollRef = useRef12(null);
+  const scrollRef = useRef13(null);
   const virtualizer = useVirtualizer({
     count: flatItems.length,
     getScrollElement: () => scrollRef.current,
@@ -3586,11 +3731,11 @@ function DataGrid({
   const paddingTop = virtualItems.length > 0 ? virtualItems[0].start : 0;
   const paddingBottom = virtualItems.length > 0 ? virtualizer.getTotalSize() - virtualItems[virtualItems.length - 1].end : 0;
   const lastVisibleIndex = virtualItems.length > 0 ? virtualItems[virtualItems.length - 1].index : -1;
-  const notifiedForLengthRef = useRef12(-1);
-  useEffect11(() => {
+  const notifiedForLengthRef = useRef13(-1);
+  useEffect12(() => {
     notifiedForLengthRef.current = -1;
   }, [state.filter, state.sort]);
-  useEffect11(() => {
+  useEffect12(() => {
     if (!virtualize?.onEndReached) return;
     if (lastVisibleIndex < 0 || lastVisibleIndex < flatItems.length - 1) return;
     if (virtualize.hasMore === false) return;
@@ -3616,8 +3761,8 @@ function DataGrid({
       if (index !== void 0) virtualizer.scrollToIndex(index);
     }
   });
-  const clickCellRef = useRef12(null);
-  const dragMovedRef = useRef12(false);
+  const clickCellRef = useRef13(null);
+  const dragMovedRef = useRef13(false);
   const [pendingOpenEnumCell, setPendingOpenEnumCell] = useState16(void 0);
   atomicGestureRef.current = {
     shouldOpenEnum: (rowId, columnId) => pendingOpenEnumCell?.rowId === rowId && pendingOpenEnumCell?.columnId === columnId,
@@ -3641,9 +3786,9 @@ function DataGrid({
     if (!column || row === void 0 || !isEditable(column, row)) return;
     cellEditingCtx.onBeginEdit(cell);
   }
-  const pendingDragCellRef = useRef12(null);
-  const dragRafRef = useRef12(null);
-  useEffect11(() => {
+  const pendingDragCellRef = useRef13(null);
+  const dragRafRef = useRef13(null);
+  useEffect12(() => {
     if (!cellSelection.isDragging) return;
     function handleMouseMove(event) {
       const cellEl = event.target?.closest("[data-cell-row]");
@@ -3682,9 +3827,9 @@ function DataGrid({
       dragRafRef.current = null;
     };
   }, [cellSelection.isDragging, cellSelection.updateDrag, cellSelection.endDrag]);
-  const pendingFillCellRef = useRef12(null);
-  const fillRafRef = useRef12(null);
-  useEffect11(() => {
+  const pendingFillCellRef = useRef13(null);
+  const fillRafRef = useRef13(null);
+  useEffect12(() => {
     if (!cellSelection.isFillDragging) return;
     function handleMouseMove(event) {
       const cellEl = event.target?.closest("[data-cell-row]");
@@ -3720,8 +3865,8 @@ function DataGrid({
       fillRafRef.current = null;
     };
   }, [cellSelection.isFillDragging, cellSelection.updateFillDrag, cellSelection.endFillDrag]);
-  const wasEditingCellRef = useRef12(void 0);
-  useEffect11(() => {
+  const wasEditingCellRef = useRef13(void 0);
+  useEffect12(() => {
     const wasEditing = wasEditingCellRef.current !== void 0;
     wasEditingCellRef.current = cellEditingCtx?.editingCell;
     if (!wasEditing || cellEditingCtx?.editingCell) return;
@@ -4144,7 +4289,7 @@ function DataGrid({
                                     )
                                   }
                                 ) }),
-                                /* @__PURE__ */ jsx33(PopoverContent, { children: renderFilterWidget(column) })
+                                /* @__PURE__ */ jsx33(PopoverContent, { className: "w-auto", children: renderFilterWidget(column) })
                               ] })
                             ] }),
                             enableColumnResizing && /* @__PURE__ */ jsx33(
@@ -4352,7 +4497,7 @@ function DataGrid({
 // src/tree/TreeDataGrid.tsx
 import { useVirtualizer as useVirtualizer2 } from "@tanstack/react-virtual";
 import { AlertCircle, ChevronDown as ChevronDown2, ChevronRight as ChevronRight2, Loader2 as Loader22 } from "lucide-react";
-import { Fragment as Fragment5, useEffect as useEffect12, useMemo as useMemo10, useRef as useRef13 } from "react";
+import { Fragment as Fragment5, useEffect as useEffect13, useMemo as useMemo10, useRef as useRef14 } from "react";
 
 // src/tree/flattenTree.ts
 function flattenTree(roots, accessors, expanded, childrenOverride) {
@@ -4606,8 +4751,8 @@ function TreeDataGrid({
     childrenMap: controlledChildrenMap,
     onChildrenMapChange
   });
-  const didAutoExpand = useRef13(false);
-  useEffect12(() => {
+  const didAutoExpand = useRef14(false);
+  useEffect13(() => {
     if (didAutoExpand.current) return;
     didAutoExpand.current = true;
     if (initialExpandedLevel > 0) void expandToLevel(initialExpandedLevel);
@@ -4686,7 +4831,7 @@ function TreeDataGrid({
   function renderGroupSummaryCells(rows) {
     return visibleColumns.map((column) => /* @__PURE__ */ jsx34("td", { className: cn(bodyTdClassByColumn.get(column.id), "font-medium"), children: column.summary?.(rows) }, column.id));
   }
-  const scrollRef = useRef13(null);
+  const scrollRef = useRef14(null);
   const shouldVirtualize = !groupBy && flatRows.length > virtualizeThreshold;
   const virtualizer = useVirtualizer2({
     count: flatRows.length,