@bmsuisse/datagrid 0.31.1 → 0.32.0

package/dist/index.js

@@ -2272,7 +2272,7 @@ function renderCellModeCell(column, row, rawValue, ctx) {
 }
 
 // src/cell-editing/SelectionOverlay.tsx
-import { useLayoutEffect as useLayoutEffect2, useState as useState9 } from "react";
+import { useLayoutEffect as useLayoutEffect2, useRef as useRef9, useState as useState9 } 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, "\\$&");
@@ -2305,13 +2305,27 @@ function SelectionOverlay({
 }) {
   const [rect, setRect] = useState9(void 0);
   const [previewRect, setPreviewRect] = useState9(void 0);
-  useLayoutEffect2(() => {
+  const recomputeRef = useRef9(() => {
+  });
+  recomputeRef.current = () => {
     const container = containerRef.current;
     const nextRect = range && container ? computeRangeRect(container, range) : void 0;
     setRect((prev) => rectsEqual(prev, nextRect) ? prev : nextRect);
     const nextPreviewRect = fillPreviewRange && container ? computeRangeRect(container, fillPreviewRange) : void 0;
     setPreviewRect((prev) => rectsEqual(prev, nextPreviewRect) ? prev : nextPreviewRect);
+  };
+  useLayoutEffect2(() => {
+    recomputeRef.current();
   });
+  useLayoutEffect2(() => {
+    const container = containerRef.current;
+    if (!container) return;
+    function handleScroll() {
+      recomputeRef.current();
+    }
+    container.addEventListener("scroll", handleScroll, { passive: true });
+    return () => container.removeEventListener("scroll", handleScroll);
+  }, [containerRef.current]);
   if (!rect) return null;
   return /* @__PURE__ */ jsxs16(Fragment2, { children: [
     /* @__PURE__ */ jsx27(
@@ -2803,7 +2817,7 @@ 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 useEffect10, useMemo as useMemo8, useRef as useRef11, useState as useState14 } from "react";
+import { Fragment as Fragment3, useEffect as useEffect10, useMemo as useMemo8, useRef as useRef12, useState as useState14 } from "react";
 
 // src/cell-editing/renderAlwaysEditCell.tsx
 import {
@@ -2942,9 +2956,9 @@ function useGroupExpansion(defaultGroupsExpanded, controlledExpandedGroups, onEx
 }
 
 // src/hooks/useStickyGroupHeaderTop.ts
-import { useLayoutEffect as useLayoutEffect3, useRef as useRef9, useState as useState12 } from "react";
+import { useLayoutEffect as useLayoutEffect3, useRef as useRef10, useState as useState12 } from "react";
 function useStickyGroupHeaderTop(enabled) {
-  const theadRef = useRef9(null);
+  const theadRef = useRef10(null);
   const [groupHeaderTop, setGroupHeaderTop] = useState12(0);
   useLayoutEffect3(() => {
     if (!enabled) return;
@@ -3012,11 +3026,11 @@ function processClientData(data, state) {
 import { useCallback as useCallback4, useEffect as useEffect9, useMemo as useMemo7, useState as useState13 } from "react";
 
 // src/hooks/useDebouncedCallback.ts
-import { useEffect as useEffect8, useMemo as useMemo6, useRef as useRef10 } from "react";
+import { useEffect as useEffect8, useMemo as useMemo6, useRef as useRef11 } from "react";
 function useDebouncedCallback(callback, delayMs) {
-  const callbackRef = useRef10(callback);
+  const callbackRef = useRef11(callback);
   callbackRef.current = callback;
-  const timeoutRef = useRef10(void 0);
+  const timeoutRef = useRef11(void 0);
   useEffect8(() => {
     return () => {
       clearTimeout(timeoutRef.current);
@@ -3141,6 +3155,12 @@ function useGridState(dataSource, initialState, externalState, showPagination =
 import { Fragment as Fragment4, jsx as jsx33, jsxs as jsxs20 } from "react/jsx-runtime";
 var gridTableFeatures = tableFeatures({ columnSizingFeature, columnResizingFeature });
 var DEFAULT_COLUMN_SIZE = 150;
+var MIN_COLUMN_SIZE = 40;
+function sortDirToAriaSort(dir) {
+  if (dir === "asc") return "ascending";
+  if (dir === "desc") return "descending";
+  return "none";
+}
 var DETAIL_COLUMN_WIDTH = 44;
 var ROW_ACTIONS_COLUMN_WIDTH = 44;
 var EMPTY_ID_ARRAY = [];
@@ -3269,7 +3289,7 @@ function DataGrid({
     hasCellEditing ? cellEditing : void 0,
     getRowId
   );
-  const atomicGestureRef = useRef11(void 0);
+  const atomicGestureRef = useRef12(void 0);
   const visibleColumns = useVisibleColumns(columns, columnVisibility);
   const serverRowCount = dataSource.mode === "server" ? dataSource.rowCount : void 0;
   const { rows, rowCount } = useMemo8(() => {
@@ -3423,7 +3443,7 @@ function DataGrid({
     return map;
   }, [visibleColumns, enableColumnResizing, leftPinnedOffsets, rightPinnedOffsets, columnSizing]);
   const tableRows = table.getRowModel().rows;
-  const truncationWarnedRef = useRef11(false);
+  const truncationWarnedRef = useRef12(false);
   useEffect10(() => {
     if (process.env.NODE_ENV === "production") return;
     if (showPagination) return;
@@ -3454,7 +3474,7 @@ function DataGrid({
     }
     return items;
   }, [shouldVirtualize, groupedBuckets, tableRows, isGroupExpanded]);
-  const scrollRef = useRef11(null);
+  const scrollRef = useRef12(null);
   const virtualizer = useVirtualizer({
     count: flatItems.length,
     getScrollElement: () => scrollRef.current,
@@ -3466,7 +3486,10 @@ 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 = useRef11(-1);
+  const notifiedForLengthRef = useRef12(-1);
+  useEffect10(() => {
+    notifiedForLengthRef.current = -1;
+  }, [state.filter, state.sort]);
   useEffect10(() => {
     if (!virtualize?.onEndReached) return;
     if (lastVisibleIndex < 0 || lastVisibleIndex < flatItems.length - 1) return;
@@ -3493,8 +3516,8 @@ function DataGrid({
       if (index !== void 0) virtualizer.scrollToIndex(index);
     }
   });
-  const clickCellRef = useRef11(null);
-  const dragMovedRef = useRef11(false);
+  const clickCellRef = useRef12(null);
+  const dragMovedRef = useRef12(false);
   const [pendingOpenEnumCell, setPendingOpenEnumCell] = useState14(void 0);
   atomicGestureRef.current = {
     shouldOpenEnum: (rowId, columnId) => pendingOpenEnumCell?.rowId === rowId && pendingOpenEnumCell?.columnId === columnId,
@@ -3518,8 +3541,8 @@ function DataGrid({
     if (!column || row === void 0 || !isEditable(column, row)) return;
     cellEditingCtx.onBeginEdit(cell);
   }
-  const pendingDragCellRef = useRef11(null);
-  const dragRafRef = useRef11(null);
+  const pendingDragCellRef = useRef12(null);
+  const dragRafRef = useRef12(null);
   useEffect10(() => {
     if (!cellSelection.isDragging) return;
     function handleMouseMove(event) {
@@ -3559,8 +3582,8 @@ function DataGrid({
       dragRafRef.current = null;
     };
   }, [cellSelection.isDragging, cellSelection.updateDrag, cellSelection.endDrag]);
-  const pendingFillCellRef = useRef11(null);
-  const fillRafRef = useRef11(null);
+  const pendingFillCellRef = useRef12(null);
+  const fillRafRef = useRef12(null);
   useEffect10(() => {
     if (!cellSelection.isFillDragging) return;
     function handleMouseMove(event) {
@@ -3597,7 +3620,7 @@ function DataGrid({
       fillRafRef.current = null;
     };
   }, [cellSelection.isFillDragging, cellSelection.updateFillDrag, cellSelection.endFillDrag]);
-  const wasEditingCellRef = useRef11(void 0);
+  const wasEditingCellRef = useRef12(void 0);
   useEffect10(() => {
     const wasEditing = wasEditingCellRef.current !== void 0;
     wasEditingCellRef.current = cellEditingCtx?.editingCell;
@@ -3911,52 +3934,84 @@ function DataGrid({
                       const filterable = isFilterable(column) && column.filterDisplay !== "row";
                       const cellProps = leafHeaderCellPropsByColumn.get(column.id);
                       const headerContent = column.renderHeader ? column.renderHeader(column) : column.header;
-                      return /* @__PURE__ */ jsxs20("th", { rowSpan, style: cellProps?.style, className: cellProps?.className, children: [
-                        /* @__PURE__ */ jsxs20("div", { className: "flex items-center gap-1", children: [
-                          sortable ? /* @__PURE__ */ jsxs20(
-                            "button",
-                            {
-                              type: "button",
-                              className: "flex items-center gap-1 rounded-sm px-1 hover:bg-accent hover:text-accent-foreground",
-                              onClick: (event) => toggleSort(column.id, enableMultiSort && event.shiftKey, column.sortDescFirst === true),
-                              children: [
-                                headerContent,
-                                sortEntry?.dir === "asc" && /* @__PURE__ */ jsx33(BarsArrowUpIcon, { className: "h-3 w-3", "aria-hidden": true }),
-                                sortEntry?.dir === "desc" && /* @__PURE__ */ jsx33(BarsArrowDownIcon, { className: "h-3 w-3", "aria-hidden": true })
-                              ]
-                            }
-                          ) : (
-                            // Not wrapped in a `<button>` (unlike the sortable branch above): a
-                            // disabled `<button>` swallows pointer events for its entire subtree,
-                            // silently breaking any interactive content a column's own `renderHeader`
-                            // embeds directly (bare filter inputs, "select/reject all" buttons) —
-                            // clicks never reach them at all, even though nothing looks wrong visually.
-                            /* @__PURE__ */ jsx33("div", { className: "flex items-center gap-1 px-1", children: headerContent })
-                          ),
-                          filterable && /* @__PURE__ */ jsxs20(Popover, { children: [
-                            /* @__PURE__ */ jsx33(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsx33(Button, { variant: "ghost", size: "icon", "aria-label": `Filter ${column.header}`, children: /* @__PURE__ */ jsx33(
-                              FunnelIcon7,
+                      return /* @__PURE__ */ jsxs20(
+                        "th",
+                        {
+                          rowSpan,
+                          style: cellProps?.style,
+                          className: cellProps?.className,
+                          "aria-sort": sortable ? sortDirToAriaSort(sortEntry?.dir) : void 0,
+                          "aria-label": column.header,
+                          children: [
+                            /* @__PURE__ */ jsxs20("div", { className: "flex items-center gap-1", children: [
+                              sortable ? /* @__PURE__ */ jsxs20(
+                                "button",
+                                {
+                                  type: "button",
+                                  "data-testid": `sort-button-${column.id}`,
+                                  className: "flex items-center gap-1 rounded-sm px-1 hover:bg-accent hover:text-accent-foreground",
+                                  onClick: (event) => toggleSort(column.id, enableMultiSort && event.shiftKey, column.sortDescFirst === true),
+                                  children: [
+                                    headerContent,
+                                    sortEntry?.dir === "asc" && /* @__PURE__ */ jsx33(BarsArrowUpIcon, { className: "h-3 w-3", "aria-hidden": true }),
+                                    sortEntry?.dir === "desc" && /* @__PURE__ */ jsx33(BarsArrowDownIcon, { className: "h-3 w-3", "aria-hidden": true })
+                                  ]
+                                }
+                              ) : (
+                                // Not wrapped in a `<button>` (unlike the sortable branch above): a
+                                // disabled `<button>` swallows pointer events for its entire subtree,
+                                // silently breaking any interactive content a column's own `renderHeader`
+                                // embeds directly (bare filter inputs, "select/reject all" buttons) —
+                                // clicks never reach them at all, even though nothing looks wrong visually.
+                                /* @__PURE__ */ jsx33("div", { className: "flex items-center gap-1 px-1", children: headerContent })
+                              ),
+                              filterable && /* @__PURE__ */ jsxs20(Popover, { children: [
+                                /* @__PURE__ */ jsx33(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsx33(
+                                  Button,
+                                  {
+                                    variant: "ghost",
+                                    size: "icon",
+                                    "data-testid": `filter-trigger-${column.id}`,
+                                    "aria-label": `Filter ${column.header}`,
+                                    children: /* @__PURE__ */ jsx33(
+                                      FunnelIcon7,
+                                      {
+                                        className: cn(
+                                          "h-3 w-3",
+                                          filtersByColumn.get(column.id) !== void 0 ? "opacity-100 text-primary" : "opacity-40"
+                                        ),
+                                        "aria-hidden": true
+                                      }
+                                    )
+                                  }
+                                ) }),
+                                /* @__PURE__ */ jsx33(PopoverContent, { children: renderFilterWidget(column) })
+                              ] })
+                            ] }),
+                            enableColumnResizing && /* @__PURE__ */ jsx33(
+                              "div",
                               {
-                                className: cn(
-                                  "h-3 w-3",
-                                  filtersByColumn.get(column.id) !== void 0 ? "opacity-100 text-primary" : "opacity-40"
-                                ),
-                                "aria-hidden": true
+                                "data-testid": `resize-handle-${column.id}`,
+                                role: "separator",
+                                "aria-orientation": "vertical",
+                                "aria-label": `Resize ${column.header} column`,
+                                tabIndex: 0,
+                                onMouseDown: header.getResizeHandler(),
+                                onTouchStart: header.getResizeHandler(),
+                                onKeyDown: (event) => {
+                                  if (event.key !== "ArrowLeft" && event.key !== "ArrowRight") return;
+                                  event.preventDefault();
+                                  const delta = event.key === "ArrowRight" ? 10 : -10;
+                                  const nextSize = Math.max(MIN_COLUMN_SIZE, columnSize(column.id) + delta);
+                                  updateColumnSizing({ ...columnSizing, [column.id]: nextSize });
+                                },
+                                className: "absolute right-0 top-0 h-full w-1 cursor-col-resize touch-none select-none hover:bg-accent focus-visible:bg-accent focus-visible:outline-none"
                               }
-                            ) }) }),
-                            /* @__PURE__ */ jsx33(PopoverContent, { children: renderFilterWidget(column) })
-                          ] })
-                        ] }),
-                        enableColumnResizing && /* @__PURE__ */ jsx33(
-                          "div",
-                          {
-                            "data-testid": `resize-handle-${column.id}`,
-                            onMouseDown: header.getResizeHandler(),
-                            onTouchStart: header.getResizeHandler(),
-                            className: "absolute right-0 top-0 h-full w-1 cursor-col-resize touch-none select-none hover:bg-accent"
-                          }
-                        )
-                      ] }, header.id);
+                            )
+                          ]
+                        },
+                        header.id
+                      );
                     }
                     return /* @__PURE__ */ jsxs20(Fragment3, { children: [
                       hasHeaderGroups && /* @__PURE__ */ jsxs20("tr", { "data-testid": "header-group-row", className: "divide-x divide-border", children: [
@@ -4137,7 +4192,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 useEffect11, useMemo as useMemo10, useRef as useRef12 } from "react";
+import { Fragment as Fragment5, useEffect as useEffect11, useMemo as useMemo10, useRef as useRef13 } from "react";
 
 // src/tree/flattenTree.ts
 function flattenTree(roots, accessors, expanded, childrenOverride) {
@@ -4388,7 +4443,7 @@ function TreeDataGrid({
     childrenMap: controlledChildrenMap,
     onChildrenMapChange
   });
-  const didAutoExpand = useRef12(false);
+  const didAutoExpand = useRef13(false);
   useEffect11(() => {
     if (didAutoExpand.current) return;
     didAutoExpand.current = true;
@@ -4464,7 +4519,7 @@ function TreeDataGrid({
     for (const column of visibleColumns) map.set(column.id, `p-2 ${alignClassName(column)}`);
     return map;
   }, [visibleColumns]);
-  const scrollRef = useRef12(null);
+  const scrollRef = useRef13(null);
   const shouldVirtualize = !groupBy && flatRows.length > virtualizeThreshold;
   const virtualizer = useVirtualizer2({
     count: flatRows.length,