@bmsuisse/datagrid 0.31.1 → 0.31.2

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);
@@ -3269,7 +3283,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 +3437,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 +3468,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 +3480,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 +3510,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 +3535,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 +3576,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 +3614,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;
@@ -4137,7 +4154,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 +4405,7 @@ function TreeDataGrid({
     childrenMap: controlledChildrenMap,
     onChildrenMapChange
   });
-  const didAutoExpand = useRef12(false);
+  const didAutoExpand = useRef13(false);
   useEffect11(() => {
     if (didAutoExpand.current) return;
     didAutoExpand.current = true;
@@ -4464,7 +4481,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,