@alaarab/ogrid-react 2.1.13 → 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;
@@ -971,23 +987,94 @@ var ROW_NUMBER_COLUMN_WIDTH = 50;
 var DEFAULT_MIN_COLUMN_WIDTH = 80;
 var CELL_PADDING = 16;
 var GRID_BORDER_RADIUS = 6;
-var AUTOSIZE_EXTRA_PX = 28;
+var AUTOSIZE_EXTRA_PX = 16;
 var AUTOSIZE_MAX_PX = 520;
+function measureHeaderWidth(th) {
+  const cs = getComputedStyle(th);
+  const thPadding = (parseFloat(cs.paddingLeft) || 0) + (parseFloat(cs.paddingRight) || 0);
+  let resizeHandleWidth = 0;
+  for (let i = 0; i < th.children.length; i++) {
+    const child = th.children[i];
+    const cls = child.className || "";
+    if (cls.includes("resizeHandle") || cls.includes("resize-handle") || cls.includes("ogrid-resize-handle")) {
+      resizeHandleWidth = child.offsetWidth;
+      break;
+    }
+  }
+  const contentContainer = th.firstElementChild;
+  if (!contentContainer) return th.offsetWidth;
+  const modified = [];
+  const expandDescendants = (parent) => {
+    for (let i = 0; i < parent.children.length; i++) {
+      const child = parent.children[i];
+      const style = getComputedStyle(child);
+      if (style.overflow === "hidden" || style.flexShrink !== "0") {
+        modified.push({
+          el: child,
+          overflow: child.style.overflow,
+          flexShrink: child.style.flexShrink,
+          width: child.style.width,
+          minWidth: child.style.minWidth
+        });
+        child.style.overflow = "visible";
+        child.style.flexShrink = "0";
+        child.style.width = "max-content";
+        child.style.minWidth = "max-content";
+      }
+      expandDescendants(child);
+    }
+  };
+  const origPos = contentContainer.style.position;
+  const origWidth = contentContainer.style.width;
+  contentContainer.style.position = "absolute";
+  contentContainer.style.width = "max-content";
+  expandDescendants(contentContainer);
+  const expandedWidth = contentContainer.offsetWidth;
+  contentContainer.style.position = origPos;
+  contentContainer.style.width = origWidth;
+  for (const m of modified) {
+    m.el.style.overflow = m.overflow;
+    m.el.style.flexShrink = m.flexShrink;
+    m.el.style.width = m.width;
+    m.el.style.minWidth = m.minWidth;
+  }
+  return expandedWidth + resizeHandleWidth + thPadding;
+}
 function measureColumnContentWidth(columnId, minWidth, container) {
   const minW = minWidth ?? DEFAULT_MIN_COLUMN_WIDTH;
-  const root = document;
+  const root = container ?? document;
   const cells = root.querySelectorAll(`[data-column-id="${columnId}"]`);
   if (cells.length === 0) return minW;
   let maxWidth = minW;
+  const contentEls = [];
+  const origPositions = [];
+  const origWidths = [];
   cells.forEach((cell) => {
     const el = cell;
-    const label = el.querySelector?.("[data-header-label]");
-    if (label) {
-      maxWidth = Math.max(maxWidth, label.scrollWidth + AUTOSIZE_EXTRA_PX);
+    const isHeader = !!el.querySelector?.("[data-header-label]");
+    if (isHeader) {
+      maxWidth = Math.max(maxWidth, measureHeaderWidth(el));
     } else {
-      maxWidth = Math.max(maxWidth, el.scrollWidth);
+      const content = el.firstElementChild ?? el;
+      contentEls.push(content);
     }
   });
+  if (contentEls.length > 0) {
+    for (let i = 0; i < contentEls.length; i++) {
+      const el = contentEls[i];
+      origPositions.push(el.style.position);
+      origWidths.push(el.style.width);
+      el.style.position = "absolute";
+      el.style.width = "max-content";
+    }
+    for (let i = 0; i < contentEls.length; i++) {
+      maxWidth = Math.max(maxWidth, contentEls[i].offsetWidth + AUTOSIZE_EXTRA_PX);
+    }
+    for (let i = 0; i < contentEls.length; i++) {
+      contentEls[i].style.position = origPositions[i];
+      contentEls[i].style.width = origWidths[i];
+    }
+  }
   return Math.min(AUTOSIZE_MAX_PX, Math.max(minW, Math.ceil(maxWidth)));
 }
 function findCtrlArrowTarget(pos, edge, step, isEmpty) {
@@ -1149,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 };
 }
@@ -1470,7 +1557,7 @@ function useFilterOptions(dataSource, fields) {
     );
     setFilterOptions(results);
     setLoadingOptions(EMPTY_LOADING);
-  }, [stableFields]);
+  }, [stableFields, dataSourceRef]);
   useEffect(() => {
     load().catch(() => {
     });
@@ -1681,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);
@@ -1691,7 +1778,7 @@ function useOGridDataFetching(params) {
       firstDataRenderedRef.current = true;
       onFirstDataRenderedRef.current?.();
     }
-  }, [displayItems.length]);
+  }, [displayItems.length, onFirstDataRenderedRef]);
   return {
     displayItems,
     displayTotalCount,
@@ -1796,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]);
@@ -1825,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);
@@ -2447,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);
           }
         }
@@ -2590,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();
@@ -3058,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();
@@ -3085,7 +3176,7 @@ function useUndoRedo(params) {
         newValue: ev.oldValue
       });
     }
-  }, [getStack]);
+  }, [getStack, onCellValueChangedRef]);
   const redo = useCallback(() => {
     if (!onCellValueChangedRef.current) return;
     const stack = getStack();
@@ -3096,7 +3187,7 @@ function useUndoRedo(params) {
     for (const ev of nextBatch) {
       onCellValueChangedRef.current(ev);
     }
-  }, [getStack]);
+  }, [getStack, onCellValueChangedRef]);
   return {
     onCellValueChanged: onCellValueChanged ? wrapped : void 0,
     undo,
@@ -3236,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?.();
@@ -3263,7 +3354,8 @@ function useFillHandle(params) {
     beginBatch,
     endBatch,
     colOffsetRef,
-    wrapperRef
+    wrapperRef,
+    onCellValueChangedRef
   ]);
   const selectionRangeRef = useRef(selectionRange);
   selectionRangeRef.current = selectionRange;
@@ -3298,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) {
@@ -3318,7 +3410,8 @@ function useTableLayout(params) {
       const rect = el.getBoundingClientRect();
       const cs = window.getComputedStyle(el);
       const borderX = (parseFloat(cs.borderLeftWidth || "0") || 0) + (parseFloat(cs.borderRightWidth || "0") || 0);
-      setContainerWidth(Math.max(0, rect.width - borderX));
+      const next = Math.round(Math.max(0, rect.width - borderX));
+      setContainerWidth((prev) => prev === next ? prev : next);
     };
     const ro = new ResizeObserver(measure);
     ro.observe(el);
@@ -3623,6 +3716,11 @@ function useDataGridLayout(params) {
     pinnedColumns,
     onColumnPinned
   });
+  const overridesKey = useMemo(() => {
+    const entries = Object.entries(columnSizingOverrides);
+    if (entries.length === 0) return "";
+    return entries.map(([id, v]) => `${id}:${Math.round(v.widthPx)}`).join(",");
+  }, [columnSizingOverrides]);
   const [measuredColumnWidths, setMeasuredColumnWidths] = useState({});
   useLayoutEffect(() => {
     const wrapper = wrapperRef.current;
@@ -3641,7 +3739,7 @@ function useDataGridLayout(params) {
       if (Object.keys(prev).length !== Object.keys(measured).length) return measured;
       return prev;
     });
-  }, [visibleCols, columnSizingOverrides, wrapperRef]);
+  }, [visibleCols, overridesKey, wrapperRef]);
   const columnWidthMap = useMemo(() => {
     const map = {};
     for (const col of visibleCols) {
@@ -3792,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);
@@ -4736,10 +4833,25 @@ function useColumnResize({
     document.addEventListener("mouseup", onUp);
     cleanupRef.current = cleanup;
   }, [defaultWidth, minWidth, setColumnSizingOverrides, columnSizingOverridesRef]);
+  const handleResizeDoubleClick = useCallback((e, col) => {
+    e.preventDefault();
+    e.stopPropagation();
+    const columnId = col.columnId;
+    const thEl = e.currentTarget.closest("th");
+    const container = thEl?.closest("table")?.parentElement ?? void 0;
+    const idealWidth = measureColumnContentWidth(columnId, minWidth, container);
+    setColumnSizingOverrides((prev) => ({
+      ...prev,
+      [columnId]: { widthPx: idealWidth }
+    }));
+    if (onColumnResizedRef.current) {
+      onColumnResizedRef.current(columnId, idealWidth);
+    }
+  }, [minWidth, setColumnSizingOverrides]);
   const getColumnWidth = useCallback((col) => {
     return columnSizingOverrides[col.columnId]?.widthPx ?? col.idealWidth ?? col.defaultWidth ?? defaultWidth;
   }, [columnSizingOverrides, defaultWidth]);
-  return { handleResizeStart, getColumnWidth };
+  return { handleResizeStart, handleResizeDoubleClick, getColumnWidth };
 }
 function getSelectDisplayText(value, formatValue) {
   if (formatValue) return formatValue(value);
@@ -5915,7 +6027,7 @@ function useVirtualScroll(params) {
   } = params;
   useEffect(() => {
     validateVirtualScrollConfig({ enabled, rowHeight });
-  }, []);
+  }, [enabled, rowHeight]);
   const isActive = enabled && totalRows >= threshold;
   const getScrollElement = useCallback(
     () => containerRef.current,
@@ -6071,7 +6183,7 @@ function useDataGridTableOrchestration(params) {
   const headerRows = useMemo(() => buildHeaderRows(columns, visibleColumns), [columns, visibleColumns]);
   const allowOverflowX = !suppressHorizontalScroll && containerWidth > 0 && (minTableWidth > containerWidth || desiredTableWidth > containerWidth);
   const fitToContent = layoutMode === "content";
-  const { handleResizeStart, getColumnWidth } = useColumnResize({
+  const { handleResizeStart, handleResizeDoubleClick, getColumnWidth } = useColumnResize({
     columnSizingOverrides,
     setColumnSizingOverrides
   });
@@ -6109,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) => {
@@ -6135,6 +6249,7 @@ function useDataGridTableOrchestration(params) {
     pinning,
     // Column resize
     handleResizeStart,
+    handleResizeDoubleClick,
     getColumnWidth,
     // Column reorder
     isReorderDragging,
@@ -7044,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/dist/types/hooks/useColumnResize.d.ts

@@ -13,6 +13,7 @@ export interface UseColumnResizeParams {
 }
 export interface UseColumnResizeResult<T> {
     handleResizeStart: (e: React.MouseEvent, col: IColumnDef<T>) => void;
+    handleResizeDoubleClick: (e: React.MouseEvent, col: IColumnDef<T>) => void;
     getColumnWidth: (col: IColumnDef<T>) => number;
 }
 /**

package/dist/types/hooks/useDataGridTableOrchestration.d.ts

@@ -24,6 +24,7 @@ export interface UseDataGridTableOrchestrationResult<T> {
     viewModels: DataGridViewModelState<T>;
     pinning: DataGridPinningState;
     handleResizeStart: UseColumnResizeResult<T>['handleResizeStart'];
+    handleResizeDoubleClick: UseColumnResizeResult<T>['handleResizeDoubleClick'];
     getColumnWidth: UseColumnResizeResult<T>['getColumnWidth'];
     isReorderDragging: UseColumnReorderResult['isDragging'];
     dropIndicatorX: UseColumnReorderResult['dropIndicatorX'];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@alaarab/ogrid-react",
-  "version": "2.1.13",
+  "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.13",
+    "@alaarab/ogrid-core": "2.1.15",
     "@tanstack/react-virtual": "^3.0.0"
   },
   "peerDependencies": {