@opencorestack/opengridx 2.1.0 → 3.0.1

package/lib/components/Toolbar/GlobalSearch.css

@@ -31,12 +31,15 @@
    ─────────────────────────────────────────────────────────────────────────── */
 .ogx-global-search--expanded {
     width: 220px;
-    border-color: var(--ogx-toolbar-input-focus-border, var(--ogx-color-primary, #3b82f6));
+    border-color: var(--ogx-toolbar-input-border, var(--ogx-color-gray-300, #cbd5e1));
     background: var(--ogx-toolbar-input-bg, var(--ogx-grid-background, #fff));
-    box-shadow: var(--ogx-toolbar-input-focus-shadow, 0 0 0 3px rgba(59, 130, 246, 0.12));
     cursor: default;
     overflow: hidden;
 }
+.ogx-global-search--expanded:focus-within {
+    border-color: var(--ogx-toolbar-input-focus-border, var(--ogx-color-primary, #3b82f6));
+    box-shadow: var(--ogx-toolbar-input-focus-shadow, 0 0 0 3px rgba(59, 130, 246, 0.12));
+}
 
 /* ─── Icon wrapper ────────────────────────────────────────────────────────── */
 .ogx-global-search__icon-wrapper {
@@ -70,7 +73,7 @@
     background: transparent;
     font-family: var(--ogx-font-family, system-ui, sans-serif);
     font-size: var(--ogx-font-size-sm, 13px);
-    color: var(--ogx-grid-row-text, #1e293b);
+    color: var(--ogx-toolbar-input-text, var(--ogx-grid-row-text, #1e293b));
     outline: none;
     opacity: 0;
     pointer-events: none;

package/lib/components/Toolbar/GlobalSearch.tsx

@@ -26,6 +26,11 @@ function CloseIcon() {
     );
 }
 
+/** Search text reduced to its terms, so 'john  london ' and 'john london' are the same search. */
+function normalizeSearch(text: string): string {
+    return text.trim().split(/\s+/).filter(Boolean).join(' ');
+}
+
 export function GlobalSearch({ value = '', onChange, placeholder = 'Search...', debounceMs = 250 }: GlobalSearchProps) {
     const [isExpanded, setIsExpanded] = useState(() => value.length > 0);
     // Fully uncontrolled: localValue is the single source of truth.
@@ -39,37 +44,22 @@ export function GlobalSearch({ value = '', onChange, placeholder = 'Search...',
     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);
-
-    // ── 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();
-        }
-    });
+
+    // The input stays mounted across re-renders, so React keeps its focus; nothing here moves
+    // focus except the explicit expand and clear actions.
 
     // ── External reset detection ──────────────────────────────────────────────
     // Only responds when the PARENT programmatically changes the value
-    // (e.g. "Clear all filters" button) — not from our own typing.
+    // (e.g. "Clear all filters" button) — not from our own typing. The parent may hand back our
+    // own search with whitespace normalised (the toolbar splits it into terms), which is not a reset.
     useEffect(() => {
         if (value === lastIncomingValueRef.current) return;
         lastIncomingValueRef.current = value;
 
-        if (value !== lastEmittedRef.current) {
+        if (normalizeSearch(value) !== normalizeSearch(lastEmittedRef.current)) {
             setLocalValue(value);
             lastEmittedRef.current = value;
-            if (!value) {
-                wasFocusedRef.current = false;
-                setIsExpanded(false);
-            } else {
-                setIsExpanded(true);
-            }
+            setIsExpanded(value.length > 0);
         }
     }, [value]);
 
@@ -84,6 +74,18 @@ export function GlobalSearch({ value = '', onChange, placeholder = 'Search...',
         return () => clearTimeout(handler);
     }, [localValue, debounceMs]);
 
+    // Typing still waiting for the debounce is sent when the search unmounts (the toolbar is
+    // hidden, the grid switches view), instead of being dropped.
+    const localValueRef = useRef(localValue);
+    useLayoutEffect(() => { localValueRef.current = localValue; });
+    useEffect(() => () => {
+        const pending = localValueRef.current;
+        if (pending !== lastEmittedRef.current) {
+            lastEmittedRef.current = pending;
+            onChangeRef.current(pending);
+        }
+    }, []);
+
     const handleExpand = useCallback(() => {
         setIsExpanded(true);
         requestAnimationFrame(() => inputRef.current?.focus());
@@ -98,22 +100,19 @@ export function GlobalSearch({ value = '', onChange, placeholder = 'Search...',
     }, []);
 
     const handleFocus = useCallback(() => {
-        wasFocusedRef.current = true;
         setIsExpanded(true);
     }, []);
 
     // 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;
+                // Focus is still inside the search box — keep it expanded
                 return;
             }
             if (!localValue) {
@@ -156,7 +155,7 @@ export function GlobalSearch({ value = '', onChange, placeholder = 'Search...',
                 autoComplete="off"
             />
             {localValue && (
-                <button className="ogx-global-search__clear" onClick={handleClear} aria-label="Clear search">
+                <button type="button" className="ogx-global-search__clear" onClick={handleClear} aria-label="Clear search">
                     <CloseIcon />
                 </button>
             )}

package/lib/components/Toolbar/GridToolbar.css

@@ -3,8 +3,9 @@
   align-items: center;
   gap: var(--ogx-spacing-sm);
   padding: var(--ogx-spacing-sm) var(--ogx-spacing-sm);
-  border-bottom: var(--ogx-border-width-thin) solid var(--ogx-grid-border-color);
-  background: var(--ogx-grid-header-background);
+  border-bottom: var(--ogx-border-width-thin) solid var(--ogx-toolbar-border, var(--ogx-grid-border-color));
+  background: var(--ogx-toolbar-background, var(--ogx-grid-header-background));
+  color: var(--ogx-toolbar-text, var(--ogx-grid-header-text));
   min-height: 44px;
   position: relative;
   z-index: 100;
@@ -37,17 +38,17 @@
   padding: 0;
   border: none;
   border-radius: 8px;
-  background: transparent;
-  color: var(--ogx-grid-header-text);
+  background: var(--ogx-toolbar-btn-bg, transparent);
+  color: var(--ogx-toolbar-btn-text, var(--ogx-grid-header-text));
   cursor: pointer;
   transition: background 0.15s, color 0.15s;
   position: relative;
 }
 .ogx-toolbar__icon-btn:hover {
-  background: var(--ogx-grid-header-hover-background);
+  background: var(--ogx-toolbar-btn-hover, var(--ogx-grid-header-hover-background));
 }
 .ogx-toolbar__icon-btn--active {
-  background: var(--ogx-grid-header-hover-background);
+  background: var(--ogx-toolbar-btn-hover, var(--ogx-grid-header-hover-background));
   outline: none;
 }
 .ogx-toolbar__icon-btn:focus {
@@ -106,7 +107,7 @@
   border: var(--ogx-border-width-thin) solid var(--ogx-border-color);
   border-radius: var(--ogx-border-radius-sm);
   background: transparent;
-  color: var(--ogx-color-error, #ef4444);
+  color: var(--ogx-toolbar-btn-danger-text, var(--ogx-color-error, #ef4444));
   font-family: var(--ogx-font-family);
   font-size: var(--ogx-font-size-xs);
   font-weight: 500;
@@ -114,8 +115,8 @@
   transition: background 0.15s, border-color 0.15s;
 }
 .ogx-toolbar__clear-btn:hover {
-  background: var(--ogx-toolbar-btn-danger-bg, rgba(239, 68, 68, 0.08));
-  border-color: var(--ogx-color-error, #ef4444);
+  background: var(--ogx-toolbar-btn-danger-hover, rgba(239, 68, 68, 0.15));
+  border-color: var(--ogx-toolbar-btn-danger-text, var(--ogx-color-error, #ef4444));
 }
 .ogx-toolbar__close-btn {
   padding: 2px 10px;
@@ -189,8 +190,8 @@
   padding: 3px 6px;
   border: var(--ogx-border-width-thin) solid var(--ogx-overlay-border, var(--ogx-border-color));
   border-radius: 999px;
-  background: transparent;
-  color: var(--ogx-grid-row-text);
+  background: var(--ogx-toolbar-chip-bg, transparent);
+  color: var(--ogx-toolbar-chip-text, var(--ogx-grid-row-text));
   font-family: var(--ogx-font-family-mono, monospace);
   font-size: 10px;
   font-weight: 500;

package/lib/components/Toolbar/GridToolbar.tsx

@@ -1,6 +1,10 @@
-import React, { useState, useRef, useEffect, useCallback, useLayoutEffect } from 'react';
+import React, { useState, useRef, useEffect, useCallback, useLayoutEffect, useContext } from 'react';
 import ReactDOM from 'react-dom';
 import type { GridColDef, GridAggregationModel, GridPivotModel, GridFilterModel } from '../../types';
+import { AGGREGATION_FUNCTIONS } from '../../utils/aggregation';
+import type { BuiltInAggFn } from '../../utils/aggregation';
+import { getViewportWidth } from '../../utils/viewport';
+import { GridToolbarHostContext } from '../../hooks/core/gridToolbarHostContext';
 import { PivotPanel, PivotIcon } from './PivotPanel';
 import { GlobalSearch } from './GlobalSearch';
 import { ColumnVisibilityPanel } from '../ColumnVisibilityPanel/ColumnVisibilityPanel';
@@ -78,7 +82,23 @@ export interface GridToolbarProps {
     showNonHideableColumns?: boolean;
 }
 
-const AGGREGATION_FUNCTIONS = ['none', 'sum', 'avg', 'count', 'min', 'max'] as const;
+const BUILT_IN_AGGREGATION_FUNCTIONS = Object.keys(AGGREGATION_FUNCTIONS) as BuiltInAggFn[];
+
+function isBuiltInAggregationFunction(fn: string): fn is BuiltInAggFn {
+    return Object.prototype.hasOwnProperty.call(AGGREGATION_FUNCTIONS, fn);
+}
+
+/**
+ * The summary functions offered for a column: its `availableAggregationFunctions` when set,
+ * otherwise every built-in one. Names the aggregation engine does not implement are dropped,
+ * because choosing one would show the label in the header but never compute a value.
+ */
+function getAggregationFunctions(col: GridColDef): BuiltInAggFn[] {
+    if (!col.availableAggregationFunctions) return BUILT_IN_AGGREGATION_FUNCTIONS;
+    return Array.from(new Set(col.availableAggregationFunctions.filter(isBuiltInAggregationFunction)));
+}
+
+type ToolbarPanel = 'summaries' | 'pivot' | 'columns' | 'filters';
 
 function SigmaIcon() {
     return (
@@ -135,7 +155,7 @@ function AggregationPanel({
 }) {
     const panelRef = useRef<HTMLDivElement>(null);
     const [pos, setPos] = useState<PanelPosition>({ top: 0, right: 0 });
-    const [portalContainer, setPortalContainer] = useState<Element>(document.body);
+    const [portalContainer, setPortalContainer] = useState<Element | null>(null);
 
     useLayoutEffect(() => {
         setPortalContainer(anchorRef.current?.closest('.ogx-theme-provider') ?? document.body);
@@ -146,7 +166,7 @@ function AggregationPanel({
         const rect = anchorRef.current.getBoundingClientRect();
         return {
             top: rect.bottom + 6,
-            right: window.innerWidth - rect.right,
+            right: getViewportWidth() - rect.right,
         };
     }, [anchorRef]);
 
@@ -195,6 +215,7 @@ function AggregationPanel({
                 </span>
                 {activeCount > 0 && (
                     <button
+                        type="button"
                         className="ogx-toolbar__clear-btn"
                         onClick={onClearAll}
                         title="Clear all summaries"
@@ -219,8 +240,9 @@ function AggregationPanel({
                                     {col.headerName || col.field}
                                 </span>
                                 <div className="ogx-toolbar__agg-pills">
-                                    {AGGREGATION_FUNCTIONS.map((fn) => (
+                                    {['none', ...getAggregationFunctions(col)].map((fn) => (
                                         <button
+                                            type="button"
                                             key={fn}
                                             className={`ogx-toolbar__pill${currentFn === fn ? ' ogx-toolbar__pill--active' : ''}`}
                                             onClick={() => onFunctionChange(col.field, fn)}
@@ -238,7 +260,7 @@ function AggregationPanel({
         </div>
     );
 
-    return ReactDOM.createPortal(panel, portalContainer);
+    return portalContainer ? ReactDOM.createPortal(panel, portalContainer) : null;
 }
 
 function ColumnsPanelWrapper({
@@ -266,7 +288,7 @@ function ColumnsPanelWrapper({
 }) {
     const panelRef = useRef<HTMLDivElement>(null);
     const [pos, setPos] = useState<PanelPosition>({ top: 0, right: 0 });
-    const [portalContainer, setPortalContainer] = useState<Element>(document.body);
+    const [portalContainer, setPortalContainer] = useState<Element | null>(null);
 
     useLayoutEffect(() => {
         setPortalContainer(anchorRef.current?.closest('.ogx-theme-provider') ?? document.body);
@@ -277,7 +299,7 @@ function ColumnsPanelWrapper({
         const rect = anchorRef.current.getBoundingClientRect();
         return {
             top: rect.bottom + 6,
-            right: window.innerWidth - rect.right,
+            right: getViewportWidth() - rect.right,
         };
     }, [anchorRef]);
 
@@ -305,6 +327,12 @@ function ColumnsPanelWrapper({
         return () => document.removeEventListener('mousedown', handleClick);
     }, [anchorRef, onClose]);
 
+    useEffect(() => {
+        function onKey(e: KeyboardEvent) { if (e.key === 'Escape') onClose(); }
+        document.addEventListener('keydown', onKey);
+        return () => document.removeEventListener('keydown', onKey);
+    }, [onClose]);
+
     const panel = (
         <div
             ref={panelRef}
@@ -326,7 +354,7 @@ function ColumnsPanelWrapper({
         </div>
     );
 
-    return ReactDOM.createPortal(panel, portalContainer);
+    return portalContainer ? ReactDOM.createPortal(panel, portalContainer) : null;
 }
 
 function FilterPanelWrapper({
@@ -349,7 +377,7 @@ function FilterPanelWrapper({
     // 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);
+    const [portalContainer, setPortalContainer] = useState<Element | null>(null);
 
     useLayoutEffect(() => {
         setPortalContainer(anchorRef.current?.closest('.ogx-theme-provider') ?? document.body);
@@ -360,7 +388,7 @@ function FilterPanelWrapper({
         const rect = anchorRef.current.getBoundingClientRect();
         return {
             top: rect.bottom + 6,
-            right: window.innerWidth - rect.right,
+            right: getViewportWidth() - rect.right,
         };
     }, [anchorRef]);
 
@@ -412,6 +440,7 @@ function FilterPanelWrapper({
                 <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
                     {activeFilterCount > 0 && (
                         <button
+                            type="button"
                             className="ogx-toolbar__clear-btn"
                             onClick={handleClearAll}
                             title="Clear all filters"
@@ -420,6 +449,7 @@ function FilterPanelWrapper({
                         </button>
                     )}
                     <button
+                        type="button"
                         className="ogx-toolbar__close-btn"
                         onClick={() => onCloseRef.current()}
                         title="Close filters"
@@ -440,7 +470,7 @@ function FilterPanelWrapper({
         </div>
     );
 
-    return ReactDOM.createPortal(panel, portalContainer);
+    return portalContainer ? ReactDOM.createPortal(panel, portalContainer) : null;
 }
 
 const EMPTY_PIVOT: GridPivotModel = { rowFields: [], columnFields: [], valueFields: [] };
@@ -471,20 +501,35 @@ export function GridToolbar({
     className,
     showNonHideableColumns,
 }: GridToolbarProps) {
-    const [aggOpen, setAggOpen] = useState(false);
-    const [pivotOpen, setPivotOpen] = useState(false);
-    const [colsOpen, setColsOpen] = useState(false);
-    const [filterOpen, setFilterOpen] = useState(false);
+    // At most one panel is open. Every way the Columns panel closes (its button, a custom
+    // button, another panel opening, click-outside, Escape) reports onColumnsPanelClose, so the
+    // grid can ask for it again with forceColumnsOpen.
+    const [openPanel, setOpenPanel] = useState<ToolbarPanel | null>(null);
+    const aggOpen = openPanel === 'summaries';
+    const pivotOpen = openPanel === 'pivot';
+    const colsOpen = openPanel === 'columns';
+    const filterOpen = openPanel === 'filters';
+
+    const switchPanel = (next: ToolbarPanel | null) => {
+        if (openPanel === 'columns' && next !== 'columns') onColumnsPanelClose?.();
+        setOpenPanel(next);
+    };
+    const togglePanel = (panel: ToolbarPanel) => switchPanel(openPanel === panel ? null : panel);
+    const closePanel = (panel: ToolbarPanel) => { if (openPanel === panel) switchPanel(null); };
 
     useEffect(() => {
-        if (forceColumnsOpen) {
-            setColsOpen(true);
-            setAggOpen(false);
-            setPivotOpen(false);
-            setFilterOpen(false);
-        }
+        if (forceColumnsOpen) setOpenPanel('columns');
     }, [forceColumnsOpen]);
 
+    // Tell the grid this toolbar shows the Columns panel for the column menu; it can only do so
+    // when the grid's forceColumnsOpen reaches it and the Columns panel is enabled.
+    const toolbarHost = useContext(GridToolbarHostContext);
+    const hostsColumnsPanel = forceColumnsOpen !== undefined && Boolean(onColumnVisibilityModelChange);
+    useEffect(() => {
+        if (!toolbarHost || !hostsColumnsPanel) return undefined;
+        return toolbarHost.registerColumnsPanel();
+    }, [toolbarHost, hostsColumnsPanel]);
+
     const aggButtonRef = useRef<HTMLButtonElement>(null);
     const pivotButtonRef = useRef<HTMLButtonElement>(null);
     const colsButtonRef = useRef<HTMLButtonElement>(null);
@@ -501,8 +546,13 @@ export function GridToolbar({
         || currentPivotModel.columnFields.length > 0
         || currentPivotModel.valueFields.length > 0;
 
+    // aggregationModel keys name source columns, so generated pivot columns (absent from baseColumns)
+    // are never offered: a summary on them would do nothing and leave a stray key in the model.
+    const baseFields = baseColumns ? new Set(baseColumns.map((c) => c.field)) : null;
     const aggregableColumns = columns.filter(
         (c) => c.aggregable !== false && (c.type === 'number' || c.aggregable === true)
+            && getAggregationFunctions(c).length > 0
+            && (!baseFields || baseFields.has(c.field))
     );
 
     const activeCount = Object.keys(aggregationModel).filter(
@@ -530,7 +580,9 @@ export function GridToolbar({
     const handleSearchChange = useCallback((value: string) => {
         if (!onFilterModelChange) return;
 
-        const values = value ? [value] : [];
+        // Each whitespace-separated word is its own term; a row matches when every term is found
+        // in some column, so "john london" finds first = John, city = London.
+        const values = value.trim().split(/\s+/).filter(Boolean);
         const nextModel = {
             ...(filterModel || {}),
             quickFilterValues: values,
@@ -539,7 +591,7 @@ export function GridToolbar({
         onFilterModelChange(nextModel);
     }, [filterModel, onFilterModelChange]);
 
-    const searchValue = filterModel?.quickFilterValues?.[0] || '';
+    const searchValue = (filterModel?.quickFilterValues ?? []).join(' ');
     const activeFilterCount = (filterModel?.items?.length || 0);
 
     // Column Visibility Logic
@@ -604,22 +656,20 @@ export function GridToolbar({
                     <div ref={colsWrapperRef} className="ogx-toolbar__dropdown-wrapper" style={{ marginRight: 4 }}>
                         {renderColumnsButton
                             ? renderColumnsButton({
-                                onClick: () => { setColsOpen(o => !o); setAggOpen(false); setPivotOpen(false); setFilterOpen(false); },
+                                onClick: () => togglePanel('columns'),
                                 isOpen: colsOpen,
                                 activeCount: columns.length - visibleColumns.size,
                             })
                             : (
                                 <GridTooltip title="Columns">
                                     <button
+                                        type="button"
                                         ref={colsButtonRef}
                                         className={`ogx-toolbar__icon-btn${colsOpen ? ' ogx-toolbar__icon-btn--active' : ''}`}
                                         aria-label="Manage columns"
-                                        onClick={() => {
-                                            setColsOpen(!colsOpen);
-                                            setAggOpen(false);
-                                            setPivotOpen(false);
-                                            setFilterOpen(false);
-                                        }}
+                                        aria-haspopup="dialog"
+                                        aria-expanded={colsOpen}
+                                        onClick={() => togglePanel('columns')}
                                     >
                                         <ViewColumnIcon />
                                     </button>
@@ -636,7 +686,7 @@ export function GridToolbar({
                                 onHideAll={handleHideAllColumns}
                                 onColumnReorder={onColumnReorder}
                                 onColumnOrderReset={onColumnOrderReset}
-                                onClose={() => { setColsOpen(false); onColumnsPanelClose?.(); }}
+                                onClose={() => closePanel('columns')}
                                 showNonHideableColumns={showNonHideableColumns}
                             />
                         )}
@@ -648,22 +698,20 @@ export function GridToolbar({
                     <div ref={filterWrapperRef} className="ogx-toolbar__dropdown-wrapper" style={{ marginRight: 4 }}>
                         {renderFilterButton
                             ? renderFilterButton({
-                                onClick: () => { setFilterOpen(o => !o); setAggOpen(false); setPivotOpen(false); setColsOpen(false); },
+                                onClick: () => togglePanel('filters'),
                                 isOpen: filterOpen,
                                 activeCount: activeFilterCount,
                             })
                             : (
                                 <GridTooltip title="Filters">
                                     <button
+                                        type="button"
                                         ref={filterButtonRef}
                                         className={`ogx-toolbar__icon-btn${filterOpen ? ' ogx-toolbar__icon-btn--active' : ''}`}
                                         aria-label="Advanced filters"
-                                        onClick={() => {
-                                            setFilterOpen(!filterOpen);
-                                            setAggOpen(false);
-                                            setPivotOpen(false);
-                                            setColsOpen(false);
-                                        }}
+                                        aria-haspopup="dialog"
+                                        aria-expanded={filterOpen}
+                                        onClick={() => togglePanel('filters')}
                                     >
                                         <FilterIcon />
                                         {activeFilterCount > 0 && (
@@ -679,7 +727,7 @@ export function GridToolbar({
                                 columns={columns}
                                 filterModel={filterModel || { items: [] }}
                                 onFilterModelChange={onFilterModelChange}
-                                onClose={() => setFilterOpen(false)}
+                                onClose={() => closePanel('filters')}
                             />
                         )}
                     </div>
@@ -690,16 +738,13 @@ export function GridToolbar({
                     <div className="ogx-toolbar__dropdown-wrapper" style={{ marginRight: 4 }}>
                         <GridTooltip title="Pivot">
                             <button
+                                type="button"
                                 ref={pivotButtonRef}
                                 className={`ogx-toolbar__icon-btn${pivotOpen ? ' ogx-toolbar__icon-btn--active' : ''}`}
                                 aria-label="Configure pivot"
+                                aria-haspopup="dialog"
                                 aria-expanded={pivotOpen}
-                                onClick={() => {
-                                    setPivotOpen(!pivotOpen);
-                                    setAggOpen(false);
-                                    setColsOpen(false);
-                                    setFilterOpen(false);
-                                }}
+                                onClick={() => togglePanel('pivot')}
                             >
                                 <PivotIcon />
                                 {pivotActive && (
@@ -714,55 +759,54 @@ export function GridToolbar({
                                 columns={baseColumns ?? columns}
                                 model={currentPivotModel}
                                 onChange={(m) => { onPivotModelChange?.(m); }}
-                                onClose={() => setPivotOpen(false)}
+                                onClose={() => closePanel('pivot')}
                             />
                         )}
                     </div>
                 )}
 
                 {/* Summaries button */}
-                <div ref={aggWrapperRef} className="ogx-toolbar__dropdown-wrapper" style={{ marginRight: 4 }}>
-                    {renderAggregationButton
-                        ? renderAggregationButton({
-                            onClick: () => { setAggOpen(o => !o); setPivotOpen(false); setColsOpen(false); setFilterOpen(false); },
-                            isOpen: aggOpen,
-                            activeCount,
-                        })
-                        : (
-                            <GridTooltip title="Summaries">
-                                <button
-                                    ref={aggButtonRef}
-                                    className={`ogx-toolbar__icon-btn${aggOpen ? ' ogx-toolbar__icon-btn--active' : ''}`}
-                                    aria-label="Configure summaries"
-                                    aria-expanded={aggOpen}
-                                    onClick={() => {
-                                        setAggOpen(!aggOpen);
-                                        setPivotOpen(false);
-                                        setColsOpen(false);
-                                        setFilterOpen(false);
-                                    }}
-                                >
-                                    <SigmaIcon />
-                                    {activeCount > 0 && (
-                                        <span className="ogx-toolbar__dot" aria-label={`${activeCount} active summaries`} />
-                                    )}
-                                </button>
-                            </GridTooltip>
-                        )
-                    }
-
-                    {aggOpen && (
-                        <AggregationPanel
-                            anchorRef={renderAggregationButton ? aggWrapperRef : aggButtonRef}
-                            aggregationModel={aggregationModel}
-                            aggregableColumns={aggregableColumns}
-                            onFunctionChange={handleFunctionChange}
-                            onClearAll={clearAllAgg}
-                            onClose={() => setAggOpen(false)}
-                            activeCount={activeCount}
-                        />
-                    )}
-                </div>
+                {onAggregationModelChange && (
+                    <div ref={aggWrapperRef} className="ogx-toolbar__dropdown-wrapper" style={{ marginRight: 4 }}>
+                        {renderAggregationButton
+                            ? renderAggregationButton({
+                                onClick: () => togglePanel('summaries'),
+                                isOpen: aggOpen,
+                                activeCount,
+                            })
+                            : (
+                                <GridTooltip title="Summaries">
+                                    <button
+                                        type="button"
+                                        ref={aggButtonRef}
+                                        className={`ogx-toolbar__icon-btn${aggOpen ? ' ogx-toolbar__icon-btn--active' : ''}`}
+                                        aria-label="Configure summaries"
+                                        aria-haspopup="dialog"
+                                        aria-expanded={aggOpen}
+                                        onClick={() => togglePanel('summaries')}
+                                    >
+                                        <SigmaIcon />
+                                        {activeCount > 0 && (
+                                            <span className="ogx-toolbar__dot" aria-label={`${activeCount} active summaries`} />
+                                        )}
+                                    </button>
+                                </GridTooltip>
+                            )
+                        }
+
+                        {aggOpen && (
+                            <AggregationPanel
+                                anchorRef={renderAggregationButton ? aggWrapperRef : aggButtonRef}
+                                aggregationModel={aggregationModel}
+                                aggregableColumns={aggregableColumns}
+                                onFunctionChange={handleFunctionChange}
+                                onClearAll={clearAllAgg}
+                                onClose={() => closePanel('summaries')}
+                                activeCount={activeCount}
+                            />
+                        )}
+                    </div>
+                )}
 
                 {/* Export button slot */}
                 {renderExportButton && renderExportButton()}