feat: Add debounced input and improved state management for filter panel and global search components.

Author: asif7774

CHANGELOG.md

@@ -5,6 +5,20 @@
 
 ---
 
+## [0.1.8] — March 18, 2026 🐛✨
+
+### Fixed
+- **Toolbar Component Identity:** Fixed a major bug where defining the `GridToolbar` within a component's render body produced a new React component reference on every render, causing the toolbar to constantly unmount and remount (destroying all internal states like open panels or typed search text). Replaced `React.createElement` with direct function invocation in the `StableWrapper` to bypass React's component-identity check and persist internal DOM state.
+- **Global Search Focus Preservation:** Refactored `GlobalSearch` into an uncontrolled component to prevent continuous data re-renders from stealing focus. Added a `useLayoutEffect` to automatically restore browser focus to the input field if a React virtual DOM diff incidentally drops it mid-keystroke.
+- **Filter Panel Auto-Dismiss:** The Advanced Filter panel no longer collapses indiscriminately when clicking into numeric filter fields or during parent re-renders. Implemented a stable callback ref that prevents the underlying event listeners from rehooking during typing. Click-outside auto-close has been structurally disabled in favor of an explicit "Close" button.
+- **Pivot Mode Aggregation:** Addressed a critical bug where `aggregationModel` was trying to read base columns (e.g. `revenue`) on pivot rows that use synthetic column keys (e.g. `Q1\u001frevenue\u001fsum`), resulting in broken totals.
+  - The aggregation footer now renders synthetic pivot totals correctly.
+  - The `GridToolbar` now actively provisions `effectiveColumns` to the `AggregationPanel` to allow users to build summaries on pivot dimensions.
+  - Added a built-in "Grand Total" row appended directly to the `usePivot` output to generate automatic baseline column totals.
+- **Exporting Selected Rows:** Corrected data omission in the Demo files where print exports were grabbing the entire dataset instead of respecting active row selection. Used `apiRef.current.getSelectedRows()` to extract standard export data without requiring explicit prop-threading.
+
+---
+
 ## [0.1.7] — March 13, 2026 🐛✨
 
 ### Added
@@ -178,4 +192,4 @@ This is the initial public release of OpenGridX. All planned v0.1.0 features are
 
 ---
 
-*Last Updated: March 6, 2026*
+*Last Updated: March 18, 2026*

demo/App.css

@@ -149,6 +149,10 @@
     padding-right: 24px;
 }
 
+.app-content-column--full-width {
+    padding-right: 0;
+}
+
 /* Base Headings within app content area for TOC generation */
 .app-content-column h2 { 
     margin-top: 36px;

demo/App.tsx

@@ -100,14 +100,18 @@ function DemoSkeleton() {
 
 function PageWrapper({ children }: { children: React.ReactNode }) {
     const location = useLocation();
+    
+    // Check if current route is in 'Resources' category
+    const currentConfig = examplesConfig.find(item => item.path === location.pathname);
+    const isResourcePage = currentConfig?.category === 'Resources';
 
-    // Automatically extract TOC from current page
+    // Automatically extract TOC from current page, except for Resources
     return (
         <div className="app-page-wrapper" key={location.pathname}>
-            <div className="app-content-column">
+            <div className={`app-content-column ${isResourcePage ? 'app-content-column--full-width' : ''}`}>
                 {children}
             </div>
-            <Toc />
+            {!isResourcePage && <Toc />}
         </div>
     );
 }
@@ -129,7 +133,7 @@ export default function App() {
                         <img src={`${import.meta.env.BASE_URL}logo.png`} alt="OpenGridX Logo" className="app-logo" />
                         <h2 className="app-title">
                             OpenGridX
-                            <span className="app-version">v0.1.7</span>
+                            <span className="app-version">v0.1.8</span>
                         </h2>
                     </div>
 

demo/examples/PivotModeDemo/PivotModeDemo.tsx

@@ -297,27 +297,28 @@ function ExportToolbar({ apiRef, fallbackRows, fallbackColumns }: ExportToolbarP
     );
 }
 
+// Module-level: stable function reference so React never unmounts/remounts the toolbar.
+function CustomToolbar(props: any) {
+    return (
+        <GridToolbar
+            {...props}
+            rightContent={
+                <div className="pivot-toolbar-right">
+                    <ExportToolbar
+                        apiRef={props.apiRef}
+                        fallbackRows={props._fallbackRows || []}
+                        fallbackColumns={props._fallbackColumns || []}
+                    />
+                </div>
+            }
+        />
+    );
+}
+
 export default function PivotModeDemo() {
     const [pivotMode, setPivotMode] = useState(true);
     const [pivotModel, setPivotModel] = useState<GridPivotModel>(PRESETS[0].model);
 
-    const CustomToolbar = (props: any) => {
-        return (
-            <GridToolbar
-                {...props}
-                rightContent={
-                    <div className="pivot-toolbar-right">
-                        <ExportToolbar
-                            apiRef={props.apiRef}
-                            fallbackRows={RAW_ROWS}
-                            fallbackColumns={SOURCE_COLUMNS as any}
-                        />
-                    </div>
-                }
-            />
-        );
-    };
-
     return (
         <div className="pivot-demo-container">
 
@@ -395,6 +396,12 @@ export default function PivotModeDemo() {
                     paginationModel={{ page: 0, pageSize: 50 }}
                     pageSizeOptions={[25, 50, 100]}
                     slots={{ toolbar: CustomToolbar }}
+                    slotProps={{
+                        toolbar: {
+                            _fallbackRows: RAW_ROWS,
+                            _fallbackColumns: SOURCE_COLUMNS,
+                        }
+                    }}
                     height={500}
                 />
             </div>

demo/examples/ThemingDemo/ThemingDemo.tsx

@@ -92,37 +92,55 @@ function ExportToolbar({ apiRef, fallbackRows, fallbackColumns }: ExportToolbarP
     const [isPrinting, setIsPrinting] = useState(false);
     const [showMenu, setShowMenu] = useState(false);
 
-    const getRows = () => apiRef?.current?.getVisibleRows?.() || fallbackRows;
+    // Use apiRef to get current state — no need to thread selectedRows as a prop.
+    // getSelectedRows() returns the array of selected row IDs.
+    // getVisibleRows() returns rows after filtering/sorting.
+    const getAllRows = () => apiRef?.current?.getVisibleRows?.() || fallbackRows;
     const getColumns = () => apiRef?.current?.getVisibleColumns?.() || fallbackColumns;
     const getAgg = () => apiRef?.current?.getAggregationResult?.() || null;
     const getAggModel = () => apiRef?.current?.getAggregationModel?.() || null;
 
-    const performPrint = async () => {
-        setIsPrinting(true);
-        try {
-            await printGrid(getRows(), getColumns(), {
-                title: 'Data Export',
-                aggregationResult: getAgg(),
-                aggregationModel: getAggModel(),
-            });
-        } catch (error) {
-            console.error('Print failed:', error);
-        } finally {
-            setIsPrinting(false);
+    const getRowsToExport = () => {
+        const selectedIds: (string | number)[] = apiRef?.current?.getSelectedRows?.() || [];
+        if (selectedIds.length > 0) {
+            const allRows = getAllRows();
+            return allRows.filter((r: any) => selectedIds.includes(r.id));
         }
+        return getAllRows();
     };
 
-    const handleExportClick = (format: 'csv' | 'excel' | 'json' | 'print') => {
-        const currentRows = getRows();
+    const getSelectedCount = () => (apiRef?.current?.getSelectedRows?.() || []).length;
+
+    const performExport = async (format: 'csv' | 'excel' | 'json' | 'print') => {
+        const rowsToExport = getRowsToExport();
         const currentCols = getColumns();
         const aggResult = getAgg();
         const aggModel = getAggModel();
+        const selectedCount = getSelectedCount();
+        const suffix = selectedCount > 0 ? ` (${selectedCount} selected)` : '';
 
-        if (format === 'csv') exportToCsv(currentRows, currentCols, { fileName: 'export.csv', aggregationResult: aggResult, aggregationModel: aggModel });
-        else if (format === 'excel') exportToExcel(currentRows, currentCols, { fileName: 'export.xlsx', sheetName: 'Data', aggregationResult: aggResult, aggregationModel: aggModel });
-        else if (format === 'json') exportToJson(currentRows, currentCols, { fileName: 'export.json', pretty: true, aggregationResult: aggResult, aggregationModel: aggModel });
-        else if (format === 'print') performPrint();
         setShowMenu(false);
+
+        if (format === 'csv') {
+            exportToCsv(rowsToExport, currentCols, { fileName: 'export.csv', aggregationResult: aggResult, aggregationModel: aggModel });
+        } else if (format === 'excel') {
+            exportToExcel(rowsToExport, currentCols, { fileName: 'export.xlsx', sheetName: 'Data', aggregationResult: aggResult, aggregationModel: aggModel });
+        } else if (format === 'json') {
+            exportToJson(rowsToExport, currentCols, { fileName: 'export.json', pretty: true, aggregationResult: aggResult, aggregationModel: aggModel });
+        } else if (format === 'print') {
+            setIsPrinting(true);
+            try {
+                await printGrid(rowsToExport, currentCols, {
+                    title: `Data Export${suffix}`,
+                    aggregationResult: aggResult,
+                    aggregationModel: aggModel,
+                });
+            } catch (error) {
+                console.error('Print failed:', error);
+            } finally {
+                setIsPrinting(false);
+            }
+        }
     };
 
     return (
@@ -149,17 +167,17 @@ function ExportToolbar({ apiRef, fallbackRows, fallbackColumns }: ExportToolbarP
                         onClick={() => setShowMenu(false)}
                     />
                     <div className="ogx-toolbar__panel theming-export-menu">
-                        <div onClick={() => handleExportClick('csv')} className="ogx-menu-item">
+                        <div onClick={() => performExport('csv')} className="ogx-menu-item">
                             {Icons.Csv} Export as CSV
                         </div>
-                        <div onClick={() => handleExportClick('excel')} className="ogx-menu-item">
+                        <div onClick={() => performExport('excel')} className="ogx-menu-item">
                             {Icons.Excel} Export as Excel
                         </div>
-                        <div onClick={() => handleExportClick('json')} className="ogx-menu-item">
+                        <div onClick={() => performExport('json')} className="ogx-menu-item">
                             {Icons.Json} Export as JSON
                         </div>
                         <div className="ogx-menu-divider" />
-                        <div onClick={() => handleExportClick('print')} className="ogx-menu-item">
+                        <div onClick={() => performExport('print')} className="ogx-menu-item">
                             {Icons.Print} Print View
                         </div>
                     </div>
@@ -169,6 +187,25 @@ function ExportToolbar({ apiRef, fallbackRows, fallbackColumns }: ExportToolbarP
     );
 }
 
+// ── Stable toolbar component (defined at MODULE LEVEL, not inside ThemingDemo) ──
+// If this were defined inside the component body, every render would create a
+// new function reference, causing React to unmount/remount the entire toolbar
+// and losing all state (search expansion, filter panel open, etc.).
+function ToolbarWithExport(props: any) {
+    return (
+        <GridToolbar
+            {...props}
+            rightContent={
+                <ExportToolbar
+                    apiRef={props.apiRef}
+                    fallbackRows={props._fallbackRows || []}
+                    fallbackColumns={props._fallbackColumns || []}
+                />
+            }
+        />
+    );
+}
+
 export default function ThemingDemo() {
     const [rows] = useState(() => generateEmployees(500));
     const [selectedTheme, setSelectedTheme] = useState('Default');
@@ -187,14 +224,6 @@ export default function ThemingDemo() {
     const theme = presetThemes[selectedTheme];
     const isDark = selectedTheme === 'Dark' || selectedTheme === 'Dark + Compact';
 
-    const ToolbarWithExport = (props: any) => (
-        <GridToolbar
-            {...props}
-            globalSearch={true}
-            rightContent={<ExportToolbar apiRef={props.apiRef} fallbackRows={rows} fallbackColumns={allColumns} />}
-        />
-    );
-
     return (
         <DocsLayout
             title="Theming"
@@ -264,6 +293,12 @@ export default function ThemingDemo() {
                             onColumnVisibilityModelChange={setColumnVisibilityModel}
 
                             slots={{ toolbar: ToolbarWithExport }}
+                            slotProps={{
+                                toolbar: {
+                                    _fallbackRows: rows,
+                                    _fallbackColumns: allColumns,
+                                }
+                            }}
 
                             height={500}
                             rowHeight={selectedTheme.includes('Compact') ? 36 : undefined}

lib/components/DataGrid/DataGrid.tsx

@@ -123,16 +123,30 @@ export function DataGrid<R extends GridRowModel = GridRowModel>(props: DataGridP
     const isAggregationControlled = propAggregationModel !== undefined;
 
     // ─── Stabilize toolbar component identity ────────────────────────────────
-    // If the consumer passes an inline arrow function as slots.toolbar (e.g.
-    // `slots={{ toolbar: (p) => <GridToolbar {...p}/> }}`), a new function is
-    // created on every parent render. React reconciles by component *identity*,
-    // so a changed reference means it unmounts the old toolbar and mounts a new
-    // one — destroying focus, replaying animations, etc.
-    // useMemo with an empty dep-array gives React a stable identity. If the
-    // caller genuinely changes slots.toolbar (e.g. swaps to a different UI),
-    // the new value IS used; we just don't thrash for incidental re-renders.
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    const StableToolbar = useMemo(() => slots?.toolbar, [slots?.toolbar]);
+    // Problem: demos/users often define their toolbar as an inline function
+    // INSIDE their component body, e.g.:
+    //   const MyToolbar = (props) => <GridToolbar {...props} />  // inside render!
+    // This creates a NEW function reference on every parent re-render. React
+    // reconciles by component *identity*, so a new reference = unmount old
+    // toolbar + mount fresh one = all toolbar state (search expansion, filter
+    // open, typed text) is destroyed on every keystroke.
+    //
+    // Fix: a stable wrapper component created ONCE via useRef. Its identity
+    // never changes, so React keeps it mounted. It reads the latest toolbar
+    // from a separate ref that is updated on every render, so the rendered
+    // output is always current — zero stale closures.
+    const latestToolbarRef = useRef(slots?.toolbar);
+    latestToolbarRef.current = slots?.toolbar;
+    // The wrapper itself has a stable identity (created once via useRef).
+    // We call latestToolbarRef.current(props) as a PLAIN FUNCTION — not via
+    // React.createElement — so React never sees a changing component type.
+    // The elements the toolbar function returns are reconciled normally, so
+    // GridToolbar's internal state (filterOpen, search expansion) is preserved
+    // even when the toolbar is defined as an inline function inside the parent.
+    const StableToolbar = useRef((props: Record<string, unknown>) => {
+        const Toolbar = latestToolbarRef.current;
+        return Toolbar ? (Toolbar as (p: typeof props) => React.ReactElement | null)(props) : null;
+    }).current;
     const [internalAggregationModel, setInternalAggregationModel] = useState<GridAggregationModel>(
         () => propAggregationModel ?? {}
     );
@@ -1653,10 +1667,11 @@ export function DataGrid<R extends GridRowModel = GridRowModel>(props: DataGridP
             aria-busy={effectiveLoading}
         >
             { }
-            {StableToolbar && (() => {
+            {slots?.toolbar && (() => {
                 const toolbarProps = {
                     apiRef: gridData.apiRef,
-                    columns: effectiveColumns,
+                    columns: effectiveColumns as unknown as GridColDef[],
+                    baseColumns: columns as unknown as GridColDef[],
                     aggregationModel,
                     onAggregationModelChange: handleAggregationModelChange,
 
@@ -1667,7 +1682,6 @@ export function DataGrid<R extends GridRowModel = GridRowModel>(props: DataGridP
 
                     filterModel,
                     onFilterModelChange,
-
                     columnVisibilityModel,
                     onColumnVisibilityModelChange: handleColumnVisibilityModelChange,
 
@@ -2141,8 +2155,10 @@ export function DataGrid<R extends GridRowModel = GridRowModel>(props: DataGridP
                             </div>
                         )}
 
-                        {/* Aggregation Footer Row */}
-                        {hasAggregation && (
+                        {/* Aggregation Footer Row — suppressed in pivot mode because pivot rows
+                             already contain pre-aggregated values with synthetic field keys
+                             (e.g. 'Q1\u001frevenue\u001fsum') that don't match aggregationModel keys. */}
+                        {hasAggregation && !pivotMode && (
                             <div
                                 className="ogx__aggregation-footer"
                                 role="row"