@alaarab/ogrid-react 2.1.14 → 2.1.15

package/dist/esm/index.js

@@ -507,23 +507,39 @@ function processClientSideData(data, columns, filters, sortBy, sortDirection) {
         const trimmed = val.value.trim();
         if (trimmed) {
           const lower = trimmed.toLowerCase();
-          predicates.push((r) => String(getCellValue(r, col) ?? "").toLowerCase().includes(lower));
+          const textCache = /* @__PURE__ */ new Map();
+          for (let j = 0; j < data.length; j++) {
+            textCache.set(data[j], String(getCellValue(data[j], col) ?? "").toLowerCase());
+          }
+          predicates.push((r) => (textCache.get(r) ?? "").includes(lower));
         }
         break;
       }
       case "people": {
         const email = val.value.email.toLowerCase();
-        predicates.push((r) => String(getCellValue(r, col) ?? "").toLowerCase() === email);
+        const peopleCache = /* @__PURE__ */ new Map();
+        for (let j = 0; j < data.length; j++) {
+          peopleCache.set(data[j], String(getCellValue(data[j], col) ?? "").toLowerCase());
+        }
+        predicates.push((r) => (peopleCache.get(r) ?? "") === email);
         break;
       }
       case "date": {
         const dv = val.value;
         const fromTs = dv.from ? (/* @__PURE__ */ new Date(dv.from + "T00:00:00")).getTime() : NaN;
         const toTs = dv.to ? (/* @__PURE__ */ new Date(dv.to + "T23:59:59.999")).getTime() : NaN;
+        const dateCache = /* @__PURE__ */ new Map();
+        for (let j = 0; j < data.length; j++) {
+          const cellVal = getCellValue(data[j], col);
+          if (cellVal == null) {
+            dateCache.set(data[j], NaN);
+          } else {
+            const t = new Date(String(cellVal)).getTime();
+            dateCache.set(data[j], Number.isNaN(t) ? NaN : t);
+          }
+        }
         predicates.push((r) => {
-          const cellVal = getCellValue(r, col);
-          if (cellVal == null) return false;
-          const cellTs = new Date(String(cellVal)).getTime();
+          const cellTs = dateCache.get(r) ?? NaN;
           if (Number.isNaN(cellTs)) return false;
           if (!Number.isNaN(fromTs) && cellTs < fromTs) return false;
           if (!Number.isNaN(toTs) && cellTs > toTs) return false;
@@ -1220,7 +1236,7 @@ function computeRowSelectionState(selectedIds, items, getRowId) {
   if (selectedIds.size === 0 || items.length === 0) {
     return { allSelected: false, someSelected: false };
   }
-  const allSelected = items.every((item) => selectedIds.has(getRowId(item)));
+  const allSelected = selectedIds.size >= items.length && items.every((item) => selectedIds.has(getRowId(item)));
   const someSelected = !allSelected && selectedIds.size > 0;
   return { allSelected, someSelected };
 }
@@ -1541,7 +1557,7 @@ function useFilterOptions(dataSource, fields) {
     );
     setFilterOptions(results);
     setLoadingOptions(EMPTY_LOADING);
-  }, [stableFields]);
+  }, [stableFields, dataSourceRef]);
   useEffect(() => {
     load().catch(() => {
     });
@@ -1752,7 +1768,7 @@ function useOGridDataFetching(params) {
     }).finally(() => {
       if (id === fetchIdRef.current) setServerLoading(false);
     });
-  }, [isServerSide, page, pageSize, sort.field, sort.direction, stableFilters, refreshCounter]);
+  }, [isServerSide, page, pageSize, sort.field, sort.direction, stableFilters, refreshCounter, dataSourceRef, onErrorRef]);
   const displayItems = isClientSide && clientItemsAndTotal ? clientItemsAndTotal.items : serverItems;
   const displayTotalCount = isClientSide && clientItemsAndTotal ? clientItemsAndTotal.totalCount : serverTotalCount;
   const onFirstDataRenderedRef = useLatestRef(onFirstDataRendered);
@@ -1762,7 +1778,7 @@ function useOGridDataFetching(params) {
       firstDataRenderedRef.current = true;
       onFirstDataRenderedRef.current?.();
     }
-  }, [displayItems.length]);
+  }, [displayItems.length, onFirstDataRenderedRef]);
   return {
     displayItems,
     displayTotalCount,
@@ -1867,28 +1883,28 @@ function useOGrid(props, ref) {
   const getRowIdStableRef = useLatestRef(getRowIdProp);
   const getRowId = useCallback((item) => getRowIdStableRef.current(item), [getRowIdStableRef]);
   const onColumnOrderChangeRef = useLatestRef(onColumnOrderChangeProp);
+  const hasColumnOrderChange = onColumnOrderChangeProp != null;
   const onColumnOrderChange = useMemo(
-    () => onColumnOrderChangeProp ? (order) => onColumnOrderChangeRef.current?.(order) : void 0,
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [!!onColumnOrderChangeProp]
+    () => hasColumnOrderChange ? (order) => onColumnOrderChangeRef.current?.(order) : void 0,
+    [hasColumnOrderChange, onColumnOrderChangeRef]
   );
   const onCellValueChangedRef = useLatestRef(onCellValueChangedProp);
+  const hasCellValueChanged = onCellValueChangedProp != null;
   const onCellValueChanged = useMemo(
-    () => onCellValueChangedProp ? (event) => onCellValueChangedRef.current?.(event) : void 0,
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [!!onCellValueChangedProp]
+    () => hasCellValueChanged ? (event) => onCellValueChangedRef.current?.(event) : void 0,
+    [hasCellValueChanged, onCellValueChangedRef]
   );
   const onUndoRef = useLatestRef(onUndoProp);
+  const hasUndo = onUndoProp != null;
   const onUndo = useMemo(
-    () => onUndoProp ? () => onUndoRef.current?.() : void 0,
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [!!onUndoProp]
+    () => hasUndo ? () => onUndoRef.current?.() : void 0,
+    [hasUndo, onUndoRef]
   );
   const onRedoRef = useLatestRef(onRedoProp);
+  const hasRedo = onRedoProp != null;
   const onRedo = useMemo(
-    () => onRedoProp ? () => onRedoRef.current?.() : void 0,
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [!!onRedoProp]
+    () => hasRedo ? () => onRedoRef.current?.() : void 0,
+    [hasRedo, onRedoRef]
   );
   const columnChooserPlacement = columnChooserProp === false ? "none" : columnChooserProp === "sidebar" ? "sidebar" : "toolbar";
   const columns = useMemo(() => flattenColumns(columnsProp), [columnsProp]);
@@ -1896,7 +1912,7 @@ function useOGrid(props, ref) {
   const rowIdsValidatedRef = useRef(false);
   useEffect(() => {
     validateColumns(columns);
-  }, []);
+  }, [columns]);
   const defaultSortField = defaultSortBy ?? columns[0]?.columnId ?? "";
   const [internalData, setInternalData] = useState([]);
   const [internalLoading, setInternalLoading] = useState(false);
@@ -2518,15 +2534,17 @@ function useCellSelection(params) {
         }
       }
       if (!cellIndex) cellIndex = buildCellIndex(wrapperRef.current);
+      let rebuilt = false;
       for (let r = minR; r <= maxR; r++) {
         for (let c = minC; c <= maxC; c++) {
           const key = `${r},${c + colOff}`;
           let el = cellIndex?.get(key);
-          if (el && !el.isConnected) {
+          if (el && !el.isConnected && !rebuilt) {
+            rebuilt = true;
             cellIndex = buildCellIndex(wrapperRef.current);
             el = cellIndex?.get(key);
           }
-          if (el) {
+          if (el && el.isConnected) {
             styleCellInRange(el, r, c, minR, maxR, minC, maxC, anchor);
           }
         }
@@ -2661,10 +2679,13 @@ function useCellSelection(params) {
         const finalRange = liveDragRangeRef.current;
         if (finalRange) {
           setSelectionRange(finalRange);
-          setActiveCell({
-            rowIndex: finalRange.endRow,
-            columnIndex: finalRange.endCol + colOffsetRef.current
-          });
+          const anchor = dragStartRef.current;
+          if (anchor) {
+            setActiveCell({
+              rowIndex: anchor.row,
+              columnIndex: anchor.col + colOffsetRef.current
+            });
+          }
         }
       }
       clearDragAttrs();
@@ -3129,8 +3150,7 @@ function useUndoRedo(params) {
       }
       onCellValueChangedRef.current(event);
     },
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [getStack]
+    [getStack, onCellValueChangedRef]
   );
   const beginBatch = useCallback(() => {
     getStack().beginBatch();
@@ -3156,7 +3176,7 @@ function useUndoRedo(params) {
         newValue: ev.oldValue
       });
     }
-  }, [getStack]);
+  }, [getStack, onCellValueChangedRef]);
   const redo = useCallback(() => {
     if (!onCellValueChangedRef.current) return;
     const stack = getStack();
@@ -3167,7 +3187,7 @@ function useUndoRedo(params) {
     for (const ev of nextBatch) {
       onCellValueChangedRef.current(ev);
     }
-  }, [getStack]);
+  }, [getStack, onCellValueChangedRef]);
   return {
     onCellValueChanged: onCellValueChanged ? wrapped : void 0,
     undo,
@@ -3307,7 +3327,7 @@ function useFillHandle(params) {
         endCol: end.endCol
       });
       setSelectionRange(norm);
-      setActiveCell({ rowIndex: end.endRow, columnIndex: end.endCol + colOffsetRef.current });
+      setActiveCell({ rowIndex: fillDrag.startRow, columnIndex: fillDrag.startCol + colOffsetRef.current });
       const fillEvents = applyFillValues(norm, fillDrag.startRow, fillDrag.startCol, items, visibleCols);
       if (fillEvents.length > 0) {
         beginBatch?.();
@@ -3334,7 +3354,8 @@ function useFillHandle(params) {
     beginBatch,
     endBatch,
     colOffsetRef,
-    wrapperRef
+    wrapperRef,
+    onCellValueChangedRef
   ]);
   const selectionRangeRef = useRef(selectionRange);
   selectionRangeRef.current = selectionRange;
@@ -3369,7 +3390,7 @@ function useFillHandle(params) {
       for (const evt of fillEvents) onCellValueChangedRef.current(evt);
       endBatch?.();
     }
-  }, [editable, beginBatch, endBatch]);
+  }, [editable, beginBatch, endBatch, onCellValueChangedRef, itemsRef, visibleColsRef]);
   return { fillDrag, setFillDrag, handleFillHandleMouseDown, fillDown };
 }
 function useTableLayout(params) {
@@ -3869,8 +3890,7 @@ function useDataGridEditing(params) {
         setSelectionRange({ startRow: newRow, startCol: localCol, endRow: newRow, endCol: localCol });
       }
     },
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [setEditingCell, setPendingEditorValue, setActiveCell, setSelectionRange, colOffset, visibleColsRef, itemsLengthRef]
+    [setEditingCell, setPendingEditorValue, setActiveCell, setSelectionRange, colOffset, visibleColsRef, itemsLengthRef, onCellValueChangedRef]
   );
   const cancelPopoverEdit = useCallback(() => {
     setEditingCell(null);
@@ -6007,7 +6027,7 @@ function useVirtualScroll(params) {
   } = params;
   useEffect(() => {
     validateVirtualScrollConfig({ enabled, rowHeight });
-  }, []);
+  }, [enabled, rowHeight]);
   const isActive = enabled && totalRows >= threshold;
   const getScrollElement = useCallback(
     () => containerRef.current,
@@ -6201,8 +6221,10 @@ function useDataGridTableOrchestration(params) {
   const currentVersion = CellDescriptorCache.computeVersion(cellDescriptorInput);
   cellDescriptorCacheRef.current.updateVersion(currentVersion);
   const prevItemsRef = useRef(items);
-  if (prevItemsRef.current !== items) {
+  const prevVisibleColsRef = useRef(visibleCols);
+  if (prevItemsRef.current !== items || prevVisibleColsRef.current !== visibleCols) {
     prevItemsRef.current = items;
+    prevVisibleColsRef.current = visibleCols;
     cellDescriptorCacheRef.current.clear();
   }
   const handleSingleRowClick = useCallback((e) => {
@@ -7137,7 +7159,7 @@ function MarchingAntsOverlay({
   const selR = selRect ? roundRect(selRect) : null;
   const clipR = clipRect ? roundRect(clipRect) : null;
   return /* @__PURE__ */ jsxs(Fragment, { children: [
-    selR && !isDragging && !clipRangeMatchesSel && /* @__PURE__ */ jsx(
+    selR && !isDragging && !clipRangeMatchesSel && !(selectionRange && selectionRange.startRow === selectionRange.endRow && selectionRange.startCol === selectionRange.endCol) && /* @__PURE__ */ jsx(
       "svg",
       {
         style: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@alaarab/ogrid-react",
-  "version": "2.1.14",
+  "version": "2.1.15",
   "description": "OGrid React – React hooks, headless components, and utilities for OGrid data grids.",
   "main": "dist/esm/index.js",
   "module": "dist/esm/index.js",
@@ -39,7 +39,7 @@
     "node": ">=18"
   },
   "dependencies": {
-    "@alaarab/ogrid-core": "2.1.14",
+    "@alaarab/ogrid-core": "2.1.15",
     "@tanstack/react-virtual": "^3.0.0"
   },
   "peerDependencies": {