@opencorestack/opengridx 0.1.7 → 0.1.8

package/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"

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/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);
+    onChangeRef.current = 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

@@ -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;
@@ -275,6 +280,11 @@ 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);
+    onCloseRef.current = onClose;
 
     const computePos = useCallback((): PanelPosition => {
         if (!anchorRef.current) return { top: 0, right: 0 };
@@ -296,25 +306,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 +332,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 +340,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}
@@ -368,6 +378,7 @@ const EMPTY_PIVOT: GridPivotModel = { rowFields: [], columnFields: [], valueFiel
 
 export function GridToolbar({
     columns = [],
+    baseColumns,
     aggregationModel = {},
     onAggregationModelChange,
     pivotModel,
@@ -594,7 +605,7 @@ export function GridToolbar({
                         {pivotOpen && (
                             <PivotPanel
                                 anchorRef={pivotButtonRef}
-                                columns={columns}
+                                columns={baseColumns ?? columns}
                                 model={currentPivotModel}
                                 onChange={(m) => { onPivotModelChange?.(m); }}
                                 onClose={() => setPivotOpen(false)}

package/lib/hooks/features/usePivot.ts

@@ -93,6 +93,31 @@ export function usePivot(
             pivotRows.push(pivotRow);
         }
 
+        // ── Grand Total row ───────────────────────────────────────────────────
+        // Sum every numeric pivot cell across all pivot rows so users get
+        // column totals. The row uses the same synthetic field keys as regular
+        // pivot rows, so it renders with the correct valueFormatters.
+        // Label columns (rowFields) show 'Grand Total' in the first field, empty elsewhere.
+        const totalRow: GridRowModel = { id: '__pivot_grand_total__' };
+        for (let i = 0; i < rowFields.length; i++) {
+            totalRow[rowFields[i]] = i === 0 ? 'Grand Total' : '';
+        }
+        for (const ck of colKeys) {
+            for (const vf of valueFields) {
+                const cellKey = columnFields.length > 0
+                    ? `${ck}\u001f${vf.field}\u001f${vf.aggFn}`
+                    : `${vf.field}\u001f${vf.aggFn}`;
+                // Sum the already-aggregated cell values across all pivot rows
+                const colTotal = pivotRows.reduce((acc, r) => {
+                    const v = r[cellKey];
+                    return acc + (v != null && !isNaN(Number(v)) ? Number(v) : 0);
+                }, 0);
+                totalRow[cellKey] = colTotal;
+            }
+        }
+        pivotRows.push(totalRow);
+
+
         const pivotColumns: GridColDef[] = [];
 
         for (const f of rowFields) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opencorestack/opengridx",
-  "version": "0.1.7",
+  "version": "0.1.8",
   "description": "OpenGridX: High-performance React data infrastructure. Unlock advanced Row Grouping, Excel Export, and Column Pinning without the usual \"Pro\" gatekeeping. Built for speed, scale, and complete architectural freedom. Fully open, virtualization-ready, and feature-complete.",
   "type": "module",
   "main": "./dist/opengridx.umd.js",
@@ -99,9 +99,8 @@
     "typescript": "^5.9.3",
     "vite": "^7.2.4",
     "vite-plugin-dts": "^4.5.4",
-    "vitest": "^4.0.18"
-  },
-  "dependencies": {
+    "vitest": "^4.0.18",
     "react-router-dom": "^7.13.1"
-  }
+  },
+  "dependencies": {}
 }