@bmsuisse/datagrid 0.36.0 → 0.37.1

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 });
@@ -678,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";
@@ -865,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);
@@ -982,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;
@@ -1000,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);
@@ -1082,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;
@@ -1104,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);
@@ -1133,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)) : "");
@@ -1346,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" },
@@ -1365,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) {
@@ -1580,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";
@@ -1611,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;
@@ -1647,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);
@@ -1662,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));
@@ -1741,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;
@@ -1756,7 +1838,7 @@ function useEditingState(editing, getRowId) {
     setActiveRowId(rowId);
     setAutoFocusTarget({ rowId, columnId });
   }
-  useEffect6(() => {
+  useEffect7(() => {
     if (autoFocusTarget) setAutoFocusTarget(null);
   }, [autoFocusTarget]);
   function commitEdit(column, row, value) {
@@ -1843,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 };
 }
@@ -2049,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) => {
@@ -2118,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;
@@ -2170,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}`;
 }
@@ -2181,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);
@@ -2279,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 };
 }
@@ -2340,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, "\\$&");
@@ -2373,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;
@@ -2620,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";
@@ -2787,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);
@@ -2975,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";
@@ -2991,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)) {
@@ -3114,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;
@@ -3181,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);
     };
@@ -3242,7 +3324,7 @@ function useGridState(dataSource, initialState, externalState, showPagination =
     },
     [notifyRaw, cancelDebouncedNotify]
   );
-  useEffect10(() => {
+  useEffect11(() => {
     if (!externalState) return;
     cancelDebouncedNotify();
     setState(externalState);
@@ -3451,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(() => {
@@ -3530,11 +3612,12 @@ function DataGrid({
   );
   function pinnedCellProps(column, area = "body") {
     const bg = area === "header" ? "bg-muted" : "bg-background";
+    const bgOdd = area === "header" ? "bg-muted" : STRUCTURAL_ZEBRA_BG_CLASS;
     if (column.pinned === "left") {
-      return { className: `sticky z-10 ${bg}`, style: { left: leftPinnedOffsets.get(column.id), width: columnSize(column.id), minWidth: columnSize(column.id) } };
+      return { className: `sticky z-10 ${bg}`, classNameOdd: `sticky z-10 ${bgOdd}`, style: { left: leftPinnedOffsets.get(column.id), width: columnSize(column.id), minWidth: columnSize(column.id) } };
     }
     if (column.pinned === "right") {
-      return { className: `sticky z-10 ${bg}`, style: { right: rightPinnedOffsets.get(column.id), width: columnSize(column.id), minWidth: columnSize(column.id) } };
+      return { className: `sticky z-10 ${bg}`, classNameOdd: `sticky z-10 ${bgOdd}`, style: { right: rightPinnedOffsets.get(column.id), width: columnSize(column.id), minWidth: columnSize(column.id) } };
     }
     if (enableColumnResizing) return { style: { width: columnSize(column.id) } };
     return { style: column.width ? { width: column.width } : void 0 };
@@ -3569,6 +3652,7 @@ function DataGrid({
     const pinnedProps = column.pinned || enableColumnResizing ? pinnedCellProps(column) : void 0;
     return {
       className: pinnedProps?.className ? `${BODY_TD_BASE_CLASS} ${pinnedProps.className}` : BODY_TD_BASE_CLASS,
+      classNameOdd: pinnedProps?.classNameOdd ? `${BODY_TD_BASE_CLASS} ${pinnedProps.classNameOdd}` : BODY_TD_BASE_CLASS,
       style: pinnedProps?.style
     };
   }
@@ -3606,8 +3690,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;
@@ -3637,7 +3721,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,
@@ -3649,11 +3733,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;
@@ -3679,8 +3763,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,
@@ -3704,9 +3788,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]");
@@ -3745,9 +3829,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]");
@@ -3783,8 +3867,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;
@@ -3967,7 +4051,7 @@ function DataGrid({
                 "td",
                 {
                   style: cellProps?.style,
-                  className: cellProps?.className ?? BODY_TD_BASE_CLASS,
+                  className: (isOddRow ? cellProps?.classNameOdd : cellProps?.className) ?? BODY_TD_BASE_CLASS,
                   "data-cell-row": hasCellEditing ? row.id : void 0,
                   "data-cell-col": hasCellEditing ? cell.column.id : void 0,
                   children: flexRender(cell.column.columnDef.cell, cell.getContext())
@@ -4207,7 +4291,7 @@ function DataGrid({
                                     )
                                   }
                                 ) }),
-                                /* @__PURE__ */ jsx33(PopoverContent, { children: renderFilterWidget(column) })
+                                /* @__PURE__ */ jsx33(PopoverContent, { className: "w-auto", children: renderFilterWidget(column) })
                               ] })
                             ] }),
                             enableColumnResizing && /* @__PURE__ */ jsx33(
@@ -4415,7 +4499,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) {
@@ -4669,8 +4753,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);
@@ -4749,7 +4833,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,