@opencorestack/opengridx 2.0.4 → 3.0.0

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()}