@opencorestack/opengridx 0.1.7 → 0.1.9

package/lib/components/FilterPanel/FilterPanel.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback } from 'react';
+import React, { useCallback, useEffect, useRef, useState } from 'react';
 import type {
     GridFilterModel,
     GridFilterItem,
@@ -29,6 +29,37 @@ const FilterRow: React.FC<{
     const isActive = !!item;
     const currentOperator = item?.operator ?? operators[0];
 
+    // Local input state to prevent full filter-panel re-render on every keystroke
+    const [localValue, setLocalValue] = useState(item?.value ?? '');
+    const onChangeRef = useRef(onChange);
+    onChangeRef.current = onChange;
+
+    // Sync when the external item changes (e.g. operator change, clear)
+    const prevItemValue = useRef(item?.value);
+    useEffect(() => {
+        if (item?.value !== prevItemValue.current) {
+            prevItemValue.current = item?.value;
+            setLocalValue(item?.value ?? '');
+        }
+    }, [item?.value]);
+
+    // Debounce propagating the value upward (300ms)
+    useEffect(() => {
+        const handler = setTimeout(() => {
+            const currentValue = item?.value ?? '';
+            if (localValue !== currentValue) {
+                onChangeRef.current({
+                    id: item?.id ?? `${col.field}-${Date.now()}`,
+                    field: col.field,
+                    operator: currentOperator as GridFilterOperator,
+                    value: localValue,
+                });
+            }
+        }, 300);
+        return () => clearTimeout(handler);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [localValue]);
+
     const handleOperatorChange = (op: string) => {
         const noValue = NO_VALUE_OPERATORS.has(op);
         const newItem: GridFilterItem = {
@@ -40,16 +71,8 @@ const FilterRow: React.FC<{
         onChange(newItem);
     };
 
-    const handleValueChange = (value: string) => {
-        onChange({
-            id: item?.id ?? `${col.field}-${Date.now()}`,
-            field: col.field,
-            operator: currentOperator as GridFilterOperator,
-            value,
-        });
-    };
-
     const handleClear = () => {
+        setLocalValue('');
         onChange(null);
     };
 
@@ -87,7 +110,15 @@ const FilterRow: React.FC<{
                         name={`filter-val-${col.field}`}
                         className={`ogx-filter__value-input ogx-filter__value-select${isActive ? ' ogx-filter__value-input--active' : ''}`}
                         value={String(item?.value ?? 'true')}
-                        onChange={(e) => handleValueChange(e.target.value)}
+                        onChange={(e) => {
+                            setLocalValue(e.target.value);
+                            onChange({
+                                id: item?.id ?? `${col.field}-${Date.now()}`,
+                                field: col.field,
+                                operator: currentOperator as GridFilterOperator,
+                                value: e.target.value,
+                            });
+                        }}
                         aria-label={`Filter value for ${col.headerName || col.field}`}
                     >
                         <option value="true">true</option>
@@ -100,10 +131,10 @@ const FilterRow: React.FC<{
                         id={`ogx-filter-val-${col.field}`}
                         name={`filter-val-${col.field}`}
                         className={`ogx-filter__value-input${isActive ? ' ogx-filter__value-input--active' : ''}`}
-                        type={col.type === 'number' ? 'number' : 'text'}
-                        value={item?.value ?? ''}
-                        onChange={(e) => handleValueChange(e.target.value)}
-                        placeholder="Value…"
+                        type="text"
+                        value={localValue}
+                        onChange={(e) => setLocalValue(e.target.value)}
+                        placeholder={col.type === 'number' ? 'Number…' : 'Value…'}
                         aria-label={`Filter value for ${col.headerName || col.field}`}
                     />
                 )}

package/lib/components/Row/Row.tsx

@@ -97,6 +97,45 @@ export function Row<R extends GridRowModel = GridRowModel>(props: RowProps<R>) {
     const expandCellRef = React.useRef<HTMLDivElement>(null);
     const checkboxCellRef = React.useRef<HTMLDivElement>(null);
 
+    // All hooks must come before any early returns (Rules of Hooks)
+    React.useLayoutEffect(() => {
+        if (focusedCellField === '__expand_col__' && expandCellRef.current) {
+            expandCellRef.current.focus({ preventScroll: true });
+        }
+        if (focusedCellField === '__checkbox_col__' && checkboxCellRef.current) {
+            checkboxCellRef.current.focus({ preventScroll: true });
+        }
+    }, [focusedCellField]);
+
+    const pinnedPositions = React.useMemo(() => {
+        return calculatePinnedPositions(
+            columns,
+            columnWidths,
+            pinnedColumns,
+            checkboxSelection,
+            pinCheckboxColumn,
+            hasDetailPanel,
+            pinExpandColumn,
+            rowReordering
+        );
+    }, [columns, columnWidths, pinnedColumns, checkboxSelection, pinCheckboxColumn, hasDetailPanel, pinExpandColumn, rowReordering]);
+
+    const isGroupRow = (row as any)._hasChildren === true;
+
+    const handleCellEditStart = React.useCallback((field: string, value: any) => {
+        if (!isGroupRow) {
+            onEditStart?.({ id: row.id, field, value });
+        }
+    }, [isGroupRow, row.id, onEditStart]);
+
+    const handleCellValueChange = React.useCallback((field: string, newValue: any) => {
+        onEditCellValueChange?.({ id: row.id, field, value: newValue });
+    }, [onEditCellValueChange, row.id]);
+
+    const handleEditStopWrapper = React.useCallback((cancel?: boolean) => {
+        onEditStop?.({ cancel });
+    }, [onEditStop]);
+
     // ── Skeleton row (shown during infinite-scroll fetch) ─────────────────────
     if ((row as any)._isSkeleton) {
         // Render shimmer placeholders — one per visible column, matching row height
@@ -117,15 +156,6 @@ export function Row<R extends GridRowModel = GridRowModel>(props: RowProps<R>) {
         );
     }
 
-    React.useLayoutEffect(() => {
-        if (focusedCellField === '__expand_col__' && expandCellRef.current) {
-            expandCellRef.current.focus({ preventScroll: true });
-        }
-        if (focusedCellField === '__checkbox_col__' && checkboxCellRef.current) {
-            checkboxCellRef.current.focus({ preventScroll: true });
-        }
-    }, [focusedCellField]);
-
     const handleRowClick = (event: React.MouseEvent) => {
 
         if ((event.target as HTMLElement).closest('.ogx-checkbox-wrapper, .ogx-expand-icon, .ogx-drag-handle, .ogx__edit-cell')) {
@@ -144,39 +174,10 @@ export function Row<R extends GridRowModel = GridRowModel>(props: RowProps<R>) {
         onDetailPanelToggle?.(row.id);
     };
 
-    const pinnedPositions = React.useMemo(() => {
-        return calculatePinnedPositions(
-            columns,
-            columnWidths,
-            pinnedColumns,
-            checkboxSelection,
-            pinCheckboxColumn,
-            hasDetailPanel,
-            pinExpandColumn,
-            rowReordering
-        );
-    }, [columns, columnWidths, pinnedColumns, checkboxSelection, pinCheckboxColumn, hasDetailPanel, pinExpandColumn, rowReordering]);
-
     const rowPinnedPosition = isRowPinned(row.id, pinnedRows);
     const isRowPinnedTop = rowPinnedPosition === 'top';
     const isRowPinnedBottom = rowPinnedPosition === 'bottom';
 
-    const isGroupRow = (row as any)._hasChildren === true;
-
-    const handleCellEditStart = React.useCallback((field: string, value: any) => {
-        if (!isGroupRow) {
-            onEditStart?.({ id: row.id, field, value });
-        }
-    }, [isGroupRow, row.id, onEditStart]);
-
-    const handleCellValueChange = React.useCallback((field: string, newValue: any) => {
-        onEditCellValueChange?.({ id: row.id, field, value: newValue });
-    }, [onEditCellValueChange, row.id]);
-
-    const handleEditStopWrapper = React.useCallback((cancel?: boolean) => {
-        onEditStop?.({ cancel });
-    }, [onEditStop]);
-
     const classNames = [
         'ogx__row',
         isSelected && 'ogx__row--selected',

package/lib/components/Toolbar/GlobalSearch.css

@@ -40,7 +40,6 @@
 
 /* ─── Icon wrapper ────────────────────────────────────────────────────────── */
 .ogx-global-search__icon-wrapper {
-    /* Fixed 34×34 square — never shrinks so the icon is always centred       */
     flex: 0 0 34px;
     width: 34px;
     height: 34px;
@@ -51,7 +50,6 @@
     pointer-events: none;
     flex-shrink: 0;
     transition: color 0.15s;
-    /* No border, no background — the unit looks seamless                      */
 }
 .ogx-global-search--expanded .ogx-global-search__icon-wrapper {
     color: var(--ogx-color-primary, #3b82f6);
@@ -74,7 +72,6 @@
     font-size: var(--ogx-font-size-sm, 13px);
     color: var(--ogx-grid-row-text, #1e293b);
     outline: none;
-    /* Hide with opacity, not display:none, so focus events still fire         */
     opacity: 0;
     pointer-events: none;
     transition: opacity 0.18s ease;

package/lib/components/Toolbar/GlobalSearch.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useEffect, useRef } from 'react';
+import React, { useState, useEffect, useRef, useCallback, useLayoutEffect } from 'react';
 
 
 interface GlobalSearchProps {
@@ -27,48 +27,102 @@ function CloseIcon() {
 }
 
 export function GlobalSearch({ value = '', onChange, placeholder = 'Search...', debounceMs = 250 }: GlobalSearchProps) {
-    const [isExpanded, setIsExpanded] = useState(false);
+    const [isExpanded, setIsExpanded] = useState(() => value.length > 0);
+    // Fully uncontrolled: localValue is the single source of truth.
     const [localValue, setLocalValue] = useState(value);
     const inputRef = useRef<HTMLInputElement>(null);
     const containerRef = useRef<HTMLDivElement>(null);
+    // Keep onChange always current without adding it to effect deps
+    const onChangeRef = useRef(onChange);
+    useLayoutEffect(() => { onChangeRef.current = onChange; }, [onChange]);
+    // Track the last value we emitted upward
+    const lastEmittedRef = useRef(value);
+    // Track the last incoming prop value to detect external resets
+    const lastIncomingValueRef = useRef(value);
+    // Track whether input was focused BEFORE a re-render so we can restore it
+    const wasFocusedRef = useRef(false);
 
-    // Sync local value with prop
+    // ── Focus preservation across re-renders ─────────────────────────────────
+    // When the parent updates filterModel (triggered by our debounce), React
+    // re-renders the entire tree. Even though the input element stays mounted,
+    // the browser can lose focus during heavy reconciliation. We detect this
+    // via useLayoutEffect (runs synchronously after DOM mutations, before paint)
+    // and immediately restore focus without any visual flicker.
+    useLayoutEffect(() => {
+        if (wasFocusedRef.current && document.activeElement !== inputRef.current) {
+            inputRef.current?.focus();
+        }
+    });
+
+    // ── External reset detection ──────────────────────────────────────────────
+    // Only responds when the PARENT programmatically changes the value
+    // (e.g. "Clear all filters" button) — not from our own typing.
     useEffect(() => {
-        setLocalValue(value);
-        if (value && !isExpanded) {
-            setIsExpanded(true);
+        if (value === lastIncomingValueRef.current) return;
+        lastIncomingValueRef.current = value;
+
+        if (value !== lastEmittedRef.current) {
+            setLocalValue(value);
+            lastEmittedRef.current = value;
+            if (!value) {
+                wasFocusedRef.current = false;
+                setIsExpanded(false);
+            } else {
+                setIsExpanded(true);
+            }
         }
-    }, [value, isExpanded]);
+    }, [value]);
 
-    // Debounce change
+    // ── Debounced upward notification ─────────────────────────────────────────
     useEffect(() => {
         const handler = setTimeout(() => {
-            if (localValue !== value) {
-                onChange(localValue);
+            if (localValue !== lastEmittedRef.current) {
+                lastEmittedRef.current = localValue;
+                onChangeRef.current(localValue);
             }
         }, debounceMs);
         return () => clearTimeout(handler);
-    }, [localValue, onChange, debounceMs, value]);
+    }, [localValue, debounceMs]);
 
-    const handleFocus = () => {
+    const handleExpand = useCallback(() => {
         setIsExpanded(true);
-    };
+        requestAnimationFrame(() => inputRef.current?.focus());
+    }, []);
 
-    const handleClear = (e: React.MouseEvent) => {
+    const handleClear = useCallback((e: React.MouseEvent) => {
         e.stopPropagation();
         setLocalValue('');
+        lastEmittedRef.current = '';
+        onChangeRef.current('');
         inputRef.current?.focus();
-        onChange(''); // Immediate clear
-    };
+    }, []);
 
-    // Close on blur if empty
-    const handleBlur = () => {
-        if (!localValue) {
-            setIsExpanded(false);
-        }
-    };
+    const handleFocus = useCallback(() => {
+        wasFocusedRef.current = true;
+        setIsExpanded(true);
+    }, []);
 
-    // Click outside to collapse if empty
+    // Blur: defer 150ms to allow focus to move within the container first
+    // (e.g. clicking the clear button) before deciding to collapse.
+    const handleBlur = useCallback(() => {
+        wasFocusedRef.current = false;
+        setTimeout(() => {
+            if (
+                containerRef.current &&
+                document.activeElement &&
+                containerRef.current.contains(document.activeElement)
+            ) {
+                // Focus is still inside — mark as focused again and abort
+                wasFocusedRef.current = true;
+                return;
+            }
+            if (!localValue) {
+                setIsExpanded(false);
+            }
+        }, 150);
+    }, [localValue]);
+
+    // ── Click outside ─────────────────────────────────────────────────────────
     useEffect(() => {
         const handleClickOutside = (event: MouseEvent) => {
             if (containerRef.current && !containerRef.current.contains(event.target as Node)) {
@@ -77,7 +131,6 @@ export function GlobalSearch({ value = '', onChange, placeholder = 'Search...',
                 }
             }
         };
-
         document.addEventListener('mousedown', handleClickOutside);
         return () => document.removeEventListener('mousedown', handleClickOutside);
     }, [localValue]);
@@ -86,13 +139,7 @@ export function GlobalSearch({ value = '', onChange, placeholder = 'Search...',
         <div
             ref={containerRef}
             className={`ogx-global-search${isExpanded ? ' ogx-global-search--expanded' : ''}`}
-            onClick={() => {
-                if (!isExpanded) {
-                    setIsExpanded(true);
-
-                    setTimeout(() => inputRef.current?.focus(), 50);
-                }
-            }}
+            onClick={!isExpanded ? handleExpand : undefined}
         >
             <div className="ogx-global-search__icon-wrapper">
                 <SearchIcon />

package/lib/components/Toolbar/GridToolbar.css

@@ -117,6 +117,23 @@
   background: var(--ogx-toolbar-btn-danger-bg, rgba(239, 68, 68, 0.08));
   border-color: var(--ogx-color-error, #ef4444);
 }
+.ogx-toolbar__close-btn {
+  padding: 2px 10px;
+  border: var(--ogx-border-width-thin) solid var(--ogx-border-color);
+  border-radius: var(--ogx-border-radius-sm);
+  background: transparent;
+  color: var(--ogx-grid-header-text);
+  font-family: var(--ogx-font-family);
+  font-size: var(--ogx-font-size-xs);
+  font-weight: 500;
+  cursor: pointer;
+  transition: background 0.15s, border-color 0.15s;
+}
+.ogx-toolbar__close-btn:hover {
+  background: var(--ogx-grid-header-hover-background);
+  border-color: var(--ogx-color-primary);
+  color: var(--ogx-color-primary);
+}
 .ogx-toolbar__panel-body {
   padding: var(--ogx-spacing-xs) 0;
   max-height: 360px;

package/lib/components/Toolbar/GridToolbar.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useRef, useEffect, useCallback } from 'react';
+import React, { useState, useRef, useEffect, useCallback, useLayoutEffect } from 'react';
 import ReactDOM from 'react-dom';
 import type { GridColDef, GridAggregationModel, GridPivotModel, GridFilterModel } from '../../types';
 import { PivotPanel, PivotIcon } from './PivotPanel';
@@ -9,6 +9,11 @@ import { GridTooltip } from '../Tooltip/Tooltip';
 
 export interface GridToolbarProps {
     columns?: GridColDef[];
+    /** Original user-defined columns (before pivot transformation).
+     *  When provided, the PivotPanel shows these instead of `columns`
+     *  to prevent pivot-generated synthetic columns from appearing in
+     *  'Available Fields' and causing infinite nested aggregations. */
+    baseColumns?: GridColDef[];
     aggregationModel?: GridAggregationModel;
     onAggregationModelChange?: (model: GridAggregationModel) => void;
     pivotModel?: GridPivotModel;
@@ -82,6 +87,11 @@ function AggregationPanel({
 }) {
     const panelRef = useRef<HTMLDivElement>(null);
     const [pos, setPos] = useState<PanelPosition>({ top: 0, right: 0 });
+    const [portalContainer, setPortalContainer] = useState<Element>(document.body);
+
+    useLayoutEffect(() => {
+        setPortalContainer(anchorRef.current?.closest('.ogx-theme-provider') ?? document.body);
+    }, [anchorRef]);
 
     const computePos = useCallback((): PanelPosition => {
         if (!anchorRef.current) return { top: 0, right: 0 };
@@ -180,7 +190,7 @@ function AggregationPanel({
         </div>
     );
 
-    return ReactDOM.createPortal(panel, anchorRef.current?.closest('.ogx-theme-provider') || document.body);
+    return ReactDOM.createPortal(panel, portalContainer);
 }
 
 function ColumnsPanelWrapper({
@@ -204,6 +214,11 @@ function ColumnsPanelWrapper({
 }) {
     const panelRef = useRef<HTMLDivElement>(null);
     const [pos, setPos] = useState<PanelPosition>({ top: 0, right: 0 });
+    const [portalContainer, setPortalContainer] = useState<Element>(document.body);
+
+    useLayoutEffect(() => {
+        setPortalContainer(anchorRef.current?.closest('.ogx-theme-provider') ?? document.body);
+    }, [anchorRef]);
 
     const computePos = useCallback((): PanelPosition => {
         if (!anchorRef.current) return { top: 0, right: 0 };
@@ -257,7 +272,7 @@ function ColumnsPanelWrapper({
         </div>
     );
 
-    return ReactDOM.createPortal(panel, anchorRef.current?.closest('.ogx-theme-provider') || document.body);
+    return ReactDOM.createPortal(panel, portalContainer);
 }
 
 function FilterPanelWrapper({
@@ -275,6 +290,16 @@ function FilterPanelWrapper({
 }) {
     const panelRef = useRef<HTMLDivElement>(null);
     const [pos, setPos] = useState<PanelPosition>({ top: 0, right: 0 });
+    // Stable ref for onClose — prevents the mousedown effect from
+    // tearing down and re-registering on every filterModel update,
+    // which could fire the close callback during the re-register window.
+    const onCloseRef = useRef(onClose);
+    useLayoutEffect(() => { onCloseRef.current = onClose; }, [onClose]);
+    const [portalContainer, setPortalContainer] = useState<Element>(document.body);
+
+    useLayoutEffect(() => {
+        setPortalContainer(anchorRef.current?.closest('.ogx-theme-provider') ?? document.body);
+    }, [anchorRef]);
 
     const computePos = useCallback((): PanelPosition => {
         if (!anchorRef.current) return { top: 0, right: 0 };
@@ -296,25 +321,17 @@ function FilterPanelWrapper({
         };
     }, [computePos]);
 
+    // Only Escape key closes the filter panel automatically.
+    // Click-outside is intentionally removed: users need to type in filter
+    // inputs without the panel closing. There is an explicit Close button.
     useEffect(() => {
-        function handleClick(e: MouseEvent) {
-            if (
-                panelRef.current && !panelRef.current.contains(e.target as Node) &&
-                anchorRef.current && !anchorRef.current.contains(e.target as Node)
-            ) {
-                onClose();
-            }
-        }
         function handleKey(e: KeyboardEvent) {
-            if (e.key === 'Escape') onClose();
+            if (e.key === 'Escape') onCloseRef.current();
         }
-        document.addEventListener('mousedown', handleClick);
         document.addEventListener('keydown', handleKey);
-        return () => {
-            document.removeEventListener('mousedown', handleClick);
-            document.removeEventListener('keydown', handleKey);
-        };
-    }, [anchorRef, onClose]);
+        return () => document.removeEventListener('keydown', handleKey);
+    // Empty deps — listener is registered once and uses the stable ref
+    }, []);
 
     const activeFilterCount = filterModel.items?.length ?? 0;
 
@@ -330,7 +347,6 @@ function FilterPanelWrapper({
             aria-label="Advanced filters"
             style={{ top: pos.top, right: pos.right, width: 540, maxWidth: 'calc(100vw - 24px)' }}
         >
-            { }
             <div className="ogx-toolbar__panel-header">
                 <span className="ogx-toolbar__panel-title">
                     <FilterIcon />
@@ -339,18 +355,27 @@ function FilterPanelWrapper({
                         <span className="ogx-toolbar__panel-count">{activeFilterCount}</span>
                     )}
                 </span>
-                {activeFilterCount > 0 && (
+                <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
+                    {activeFilterCount > 0 && (
+                        <button
+                            className="ogx-toolbar__clear-btn"
+                            onClick={handleClearAll}
+                            title="Clear all filters"
+                        >
+                            Clear all
+                        </button>
+                    )}
                     <button
-                        className="ogx-toolbar__clear-btn"
-                        onClick={handleClearAll}
-                        title="Clear all filters"
+                        className="ogx-toolbar__close-btn"
+                        onClick={() => onCloseRef.current()}
+                        title="Close filters"
+                        aria-label="Close filters panel"
                     >
-                        Clear all
+                        Close
                     </button>
-                )}
+                </div>
             </div>
 
-            { }
             <div className="ogx-toolbar__panel-body ogx-toolbar__panel-body--filter">
                 <FilterPanel
                     columns={columns}
@@ -361,13 +386,14 @@ function FilterPanelWrapper({
         </div>
     );
 
-    return ReactDOM.createPortal(panel, anchorRef.current?.closest('.ogx-theme-provider') || document.body);
+    return ReactDOM.createPortal(panel, portalContainer);
 }
 
 const EMPTY_PIVOT: GridPivotModel = { rowFields: [], columnFields: [], valueFields: [] };
 
 export function GridToolbar({
     columns = [],
+    baseColumns,
     aggregationModel = {},
     onAggregationModelChange,
     pivotModel,
@@ -594,7 +620,7 @@ export function GridToolbar({
                         {pivotOpen && (
                             <PivotPanel
                                 anchorRef={pivotButtonRef}
-                                columns={columns}
+                                columns={baseColumns ?? columns}
                                 model={currentPivotModel}
                                 onChange={(m) => { onPivotModelChange?.(m); }}
                                 onClose={() => setPivotOpen(false)}

package/lib/components/Toolbar/PivotPanel.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback, useEffect, useRef, useState } from 'react';
+import React, { useCallback, useEffect, useLayoutEffect, useRef, useState } from 'react';
 import ReactDOM from 'react-dom';
 import type { GridColDef } from '../../types';
 import type { GridPivotModel, GridPivotAggFn, GridPivotValueField } from '../../types';
@@ -31,6 +31,11 @@ export interface PivotPanelProps {
 export function PivotPanel({ anchorRef, columns, model, onChange, onClose }: PivotPanelProps) {
     const panelRef = useRef<HTMLDivElement>(null);
     const [pos, setPos] = useState({ top: 0, right: 0 });
+    const [portalContainer, setPortalContainer] = useState<Element>(document.body);
+
+    useLayoutEffect(() => {
+        setPortalContainer(anchorRef.current?.closest('.ogx-theme-provider') ?? document.body);
+    }, [anchorRef]);
 
     const computePos = useCallback(() => {
         if (!anchorRef.current) return { top: 0, right: 0 };
@@ -235,5 +240,5 @@ export function PivotPanel({ anchorRef, columns, model, onChange, onClose }: Piv
         </div>
     );
 
-    return ReactDOM.createPortal(panel, anchorRef.current?.closest('.ogx-theme-provider') || document.body);
+    return ReactDOM.createPortal(panel, portalContainer);
 }

package/lib/components/ui/DragHandleIcon.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 
-export interface DragHandleIconProps extends React.ButtonHTMLAttributes<HTMLButtonElement> { }
+export type DragHandleIconProps = React.ButtonHTMLAttributes<HTMLButtonElement>;
 
 export const DragHandleIcon: React.FC<DragHandleIconProps> = ({ className = '', ...props }) => {
     return (

package/lib/hooks/core/useDataGrid.ts

@@ -1,5 +1,5 @@
 
-import { useReducer, useCallback, useMemo, useRef, useEffect } from 'react';
+import { useReducer, useCallback, useMemo, useRef, useEffect, useLayoutEffect } from 'react';
 import type {
   GridState,
   GridRowModel,
@@ -259,7 +259,7 @@ export function useDataGrid<R extends GridRowModel = GridRowModel>(params: UseDa
   });
 
   const stateRef = useRef(state);
-  stateRef.current = state;
+  useLayoutEffect(() => { stateRef.current = state; });
 
   // Sync internal state when the external `rows` prop changes
   const prevRowsRef = useRef(rows);