@opencorestack/opengridx 2.0.4 → 3.0.0

package/lib/components/Toolbar/PivotPanel.tsx

@@ -2,6 +2,7 @@ import React, { useCallback, useEffect, useLayoutEffect, useRef, useState } from
 import ReactDOM from 'react-dom';
 import type { GridColDef } from '../../types';
 import type { GridPivotModel, GridPivotAggFn, GridPivotValueField } from '../../types';
+import { getViewportWidth } from '../../utils/viewport';
 
 const AGG_FNS: GridPivotAggFn[] = ['sum', 'avg', 'count', 'min', 'max'];
 
@@ -31,7 +32,7 @@ export interface PivotPanelProps {
 export function PivotPanel({ anchorRef, columns, model, onChange, onClose }: PivotPanelProps) {
     const panelRef = useRef<HTMLDivElement>(null);
     const [pos, setPos] = useState({ top: 0, right: 0 });
-    const [portalContainer, setPortalContainer] = useState<Element>(document.body);
+    const [portalContainer, setPortalContainer] = useState<Element | null>(null);
 
     useLayoutEffect(() => {
         setPortalContainer(anchorRef.current?.closest('.ogx-theme-provider') ?? document.body);
@@ -40,7 +41,7 @@ export function PivotPanel({ anchorRef, columns, model, onChange, onClose }: Piv
     const computePos = useCallback(() => {
         if (!anchorRef.current) return { top: 0, right: 0 };
         const rect = anchorRef.current.getBoundingClientRect();
-        return { top: rect.bottom + 6, right: window.innerWidth - rect.right };
+        return { top: rect.bottom + 6, right: getViewportWidth() - rect.right };
     }, [anchorRef]);
 
     useEffect(() => {
@@ -75,6 +76,20 @@ export function PivotPanel({ anchorRef, columns, model, onChange, onClose }: Piv
     const inValue = new Set(model.valueFields.map((v) => v.field));
     const isUsed = (f: string) => inRow.has(f) || inCol.has(f) || inValue.has(f);
 
+    const colDefOf = (field: string) => columns.find((c) => c.field === field);
+    const colLabel = (field: string) => colDefOf(field)?.headerName ?? field;
+
+    // The same column rules the grid applies elsewhere: availableAggregationFunctions limits the
+    // functions, aggregable: false keeps a column out of the values (as in the Summaries panel), and
+    // groupable: false keeps it out of the row and column dimensions (as in row grouping).
+    const allowedFns = (field: string): GridPivotAggFn[] => {
+        const allowed = colDefOf(field)?.availableAggregationFunctions;
+        return allowed ? AGG_FNS.filter((fn) => allowed.includes(fn)) : AGG_FNS;
+    };
+    const canBeValue = (col: GridColDef) =>
+        col.aggregable !== false && (col.type === 'number' || col.aggregable === true) && allowedFns(col.field).length > 0;
+    const canBeDimension = (col: GridColDef) => col.groupable !== false;
+
     function addRow(field: string) {
         if (inRow.has(field)) return;
         onChange({ ...model, rowFields: [...model.rowFields, field] });
@@ -83,35 +98,33 @@ export function PivotPanel({ anchorRef, columns, model, onChange, onClose }: Piv
         if (inCol.has(field)) return;
         onChange({ ...model, columnFields: [...model.columnFields, field] });
     }
-    function addValue(field: string, aggFn: GridPivotAggFn = 'sum') {
+    function addValue(field: string) {
         if (inValue.has(field)) return;
-        onChange({ ...model, valueFields: [...model.valueFields, { field, aggFn }] });
+        onChange({ ...model, valueFields: [...model.valueFields, { field, aggFn: allowedFns(field)[0] ?? 'sum' }] });
     }
-    function removeRow(field: string) {
-        onChange({ ...model, rowFields: model.rowFields.filter((f) => f !== field) });
+    function removeRow(index: number) {
+        onChange({ ...model, rowFields: model.rowFields.filter((_, i) => i !== index) });
     }
-    function removeCol(field: string) {
-        onChange({ ...model, columnFields: model.columnFields.filter((f) => f !== field) });
+    function removeCol(index: number) {
+        onChange({ ...model, columnFields: model.columnFields.filter((_, i) => i !== index) });
     }
-    function removeValue(field: string) {
-        onChange({ ...model, valueFields: model.valueFields.filter((v) => v.field !== field) });
+    // Value chips are addressed by position: one field may appear with several functions.
+    function removeValue(index: number) {
+        onChange({ ...model, valueFields: model.valueFields.filter((_, i) => i !== index) });
     }
-    function changeValueFn(field: string, aggFn: GridPivotAggFn) {
+    function changeValueFn(index: number, aggFn: GridPivotAggFn) {
         onChange({
             ...model,
-            valueFields: model.valueFields.map((v) => v.field === field ? { ...v, aggFn } : v),
+            valueFields: model.valueFields.map((v, i) => i === index ? { ...v, aggFn } : v),
         });
     }
     function reset() {
         onChange({ rowFields: [], columnFields: [], valueFields: [] });
     }
 
-    const numericFields = new Set(columns.filter((c) => c.type === 'number' || c.aggregable).map((c) => c.field));
-
     const totalActive = model.rowFields.length + model.columnFields.length + model.valueFields.length;
 
-    const colLabel = (field: string) =>
-        columns.find((c) => c.field === field)?.headerName ?? field;
+    const availableColumns = columns.filter((col) => !isUsed(col.field) && (canBeDimension(col) || canBeValue(col)));
 
     const panel = (
         <div
@@ -128,7 +141,7 @@ export function PivotPanel({ anchorRef, columns, model, onChange, onClose }: Piv
                     Pivot Mode
                 </span>
                 {totalActive > 0 && (
-                    <button className="ogx-pivot-panel__reset-btn" onClick={reset} title="Reset pivot">
+                    <button type="button" className="ogx-pivot-panel__reset-btn" onClick={reset} title="Reset pivot">
                         Reset
                     </button>
                 )}
@@ -146,10 +159,16 @@ export function PivotPanel({ anchorRef, columns, model, onChange, onClose }: Piv
                         className={`ogx-pivot-chips${model.rowFields.length === 0 ? ' ogx-pivot-chips--empty' : ''}`}
                         data-placeholder="Add fields here — each becomes a row label"
                     >
-                        {model.rowFields.map((f) => (
-                            <span key={f} className="ogx-pivot-chip ogx-pivot-chip--row">
+                        {model.rowFields.map((f, i) => (
+                            <span key={`${i}:${f}`} className="ogx-pivot-chip ogx-pivot-chip--row">
                                 {colLabel(f)}
-                                <button className="ogx-pivot-chip__remove" onClick={() => removeRow(f)} title={`Remove ${colLabel(f)}`}>×</button>
+                                <button
+                                    type="button"
+                                    className="ogx-pivot-chip__remove"
+                                    onClick={() => removeRow(i)}
+                                    title={`Remove ${colLabel(f)}`}
+                                    aria-label={`Remove ${colLabel(f)} from Row Fields`}
+                                >×</button>
                             </span>
                         ))}
                     </div>
@@ -165,10 +184,16 @@ export function PivotPanel({ anchorRef, columns, model, onChange, onClose }: Piv
                         className={`ogx-pivot-chips${model.columnFields.length === 0 ? ' ogx-pivot-chips--empty' : ''}`}
                         data-placeholder="Add fields here — unique values become column headers"
                     >
-                        {model.columnFields.map((f) => (
-                            <span key={f} className="ogx-pivot-chip ogx-pivot-chip--col">
+                        {model.columnFields.map((f, i) => (
+                            <span key={`${i}:${f}`} className="ogx-pivot-chip ogx-pivot-chip--col">
                                 {colLabel(f)}
-                                <button className="ogx-pivot-chip__remove" onClick={() => removeCol(f)} title={`Remove ${colLabel(f)}`}>×</button>
+                                <button
+                                    type="button"
+                                    className="ogx-pivot-chip__remove"
+                                    onClick={() => removeCol(i)}
+                                    title={`Remove ${colLabel(f)}`}
+                                    aria-label={`Remove ${colLabel(f)} from Column Fields`}
+                                >×</button>
                             </span>
                         ))}
                     </div>
@@ -184,22 +209,33 @@ export function PivotPanel({ anchorRef, columns, model, onChange, onClose }: Piv
                         className={`ogx-pivot-chips${model.valueFields.length === 0 ? ' ogx-pivot-chips--empty' : ''}`}
                         data-placeholder="Add numeric fields here — values are aggregated"
                     >
-                        {model.valueFields.map((vf: GridPivotValueField) => (
-                            <span key={vf.field} className="ogx-pivot-chip ogx-pivot-chip--value">
-                                {colLabel(vf.field)}
-                                <select
-                                    className="ogx-pivot-chip__fn-select"
-                                    value={vf.aggFn}
-                                    onChange={(e) => changeValueFn(vf.field, e.target.value as GridPivotAggFn)}
-                                    title="Aggregation function"
-                                >
-                                    {AGG_FNS.map((fn) => (
-                                        <option key={fn} value={fn}>{fn.toUpperCase()}</option>
-                                    ))}
-                                </select>
-                                <button className="ogx-pivot-chip__remove" onClick={() => removeValue(vf.field)} title={`Remove ${colLabel(vf.field)}`}>×</button>
-                            </span>
-                        ))}
+                        {model.valueFields.map((vf: GridPivotValueField, i) => {
+                            const allowed = allowedFns(vf.field);
+                            const fnOptions = allowed.includes(vf.aggFn) ? allowed : [vf.aggFn, ...allowed];
+                            return (
+                                <span key={`${i}:${vf.field}:${vf.aggFn}`} className="ogx-pivot-chip ogx-pivot-chip--value">
+                                    {colLabel(vf.field)}
+                                    <select
+                                        className="ogx-pivot-chip__fn-select"
+                                        value={vf.aggFn}
+                                        onChange={(e) => changeValueFn(i, e.target.value as GridPivotAggFn)}
+                                        title="Aggregation function"
+                                        aria-label={`Aggregation function for ${colLabel(vf.field)}`}
+                                    >
+                                        {fnOptions.map((fn) => (
+                                            <option key={fn} value={fn}>{fn.toUpperCase()}</option>
+                                        ))}
+                                    </select>
+                                    <button
+                                        type="button"
+                                        className="ogx-pivot-chip__remove"
+                                        onClick={() => removeValue(i)}
+                                        title={`Remove ${colLabel(vf.field)}`}
+                                        aria-label={`Remove ${colLabel(vf.field)} (${vf.aggFn.toUpperCase()}) from Value Fields`}
+                                    >×</button>
+                                </span>
+                            );
+                        })}
                     </div>
                 </div>
 
@@ -209,26 +245,30 @@ export function PivotPanel({ anchorRef, columns, model, onChange, onClose }: Piv
                 <div>
                     <div className="ogx-pivot-panel__fields-label">Available Fields</div>
                     <div className="ogx-pivot-fields">
-                        {columns.map((col) => {
-                            const isNum = numericFields.has(col.field);
-                            const used = isUsed(col.field);
-                            if (used) return null;
+                        {availableColumns.map((col) => {
+                            const isNum = canBeValue(col);
+                            const isDimension = canBeDimension(col);
+                            const label = col.headerName ?? col.field;
                             return (
                                 <div key={col.field} style={{ display: 'flex', alignItems: 'center', gap: 3 }}>
                                     <span className={`ogx-pivot-field-btn${isNum ? ' ogx-pivot-field-btn--numeric' : ''}`}>
-                                        {col.headerName ?? col.field}
+                                        {label}
                                     </span>
                                     <div className="ogx-pivot-field-actions">
-                                        <button className="ogx-pivot-add-btn ogx-pivot-add-btn--row" onClick={() => addRow(col.field)} title="Add to Row Fields">Row</button>
-                                        <button className="ogx-pivot-add-btn ogx-pivot-add-btn--col" onClick={() => addCol(col.field)} title="Add to Column Fields">Col</button>
+                                        {isDimension && (
+                                            <button type="button" className="ogx-pivot-add-btn ogx-pivot-add-btn--row" onClick={() => addRow(col.field)} title="Add to Row Fields" aria-label={`Add ${label} to Row Fields`}>Row</button>
+                                        )}
+                                        {isDimension && (
+                                            <button type="button" className="ogx-pivot-add-btn ogx-pivot-add-btn--col" onClick={() => addCol(col.field)} title="Add to Column Fields" aria-label={`Add ${label} to Column Fields`}>Col</button>
+                                        )}
                                         {isNum && (
-                                            <button className="ogx-pivot-add-btn ogx-pivot-add-btn--value" onClick={() => addValue(col.field)} title="Add to Value Fields">Val</button>
+                                            <button type="button" className="ogx-pivot-add-btn ogx-pivot-add-btn--value" onClick={() => addValue(col.field)} title="Add to Value Fields" aria-label={`Add ${label} to Value Fields`}>Val</button>
                                         )}
                                     </div>
                                 </div>
                             );
                         })}
-                        {columns.every((col) => isUsed(col.field)) && (
+                        {availableColumns.length === 0 && (
                             <span style={{ fontSize: 12, color: 'var(--ogx-color-gray-400, #94a3b8)' }}>
                                 All fields are in use.
                             </span>
@@ -240,5 +280,5 @@ export function PivotPanel({ anchorRef, columns, model, onChange, onClose }: Piv
         </div>
     );
 
-    return ReactDOM.createPortal(panel, portalContainer);
+    return portalContainer ? ReactDOM.createPortal(panel, portalContainer) : null;
 }

package/lib/components/Tooltip/Tooltip.css

@@ -22,6 +22,26 @@
   animation: ogx-tooltip-in-bottom 0.15s ease-out;
 }
 
+.ogx-tooltip--left {
+  transform: translate(-100%, -50%);
+  animation: ogx-tooltip-in-left 0.15s ease-out;
+}
+
+.ogx-tooltip--right {
+  transform: translate(0, -50%);
+  animation: ogx-tooltip-in-right 0.15s ease-out;
+}
+
+@keyframes ogx-tooltip-in-left {
+  from { opacity: 0; transform: translate(-95%, -50%) scale(0.98); }
+  to   { opacity: 1; transform: translate(-100%, -50%) scale(1); }
+}
+
+@keyframes ogx-tooltip-in-right {
+  from { opacity: 0; transform: translate(4px, -50%) scale(0.98); }
+  to   { opacity: 1; transform: translate(0, -50%) scale(1); }
+}
+
 @keyframes ogx-tooltip-in-top {
   from { opacity: 0; transform: translate(-50%, -95%) scale(0.98); }
   to   { opacity: 1; transform: translate(-50%, -100%) scale(1); }

package/lib/components/Tooltip/Tooltip.tsx

@@ -1,8 +1,8 @@
-import { useState, useRef, useLayoutEffect, useCallback } from 'react';
+import React, { useState, useRef, useLayoutEffect, useEffect, useCallback, useId, cloneElement, isValidElement } from 'react';
 import ReactDOM from 'react-dom';
 import './Tooltip.css';
 
-interface GridTooltipProps {
+export interface GridTooltipProps {
     title: React.ReactNode;
     children: React.ReactElement;
     placement?: 'top' | 'bottom' | 'left' | 'right';
@@ -10,6 +10,13 @@ interface GridTooltipProps {
     leaveDelay?: number;
 }
 
+/** Distance in px between the child and the tooltip. */
+const GAP = 8;
+
+interface ChildAriaProps {
+    'aria-describedby'?: string;
+}
+
 export function GridTooltip({
     title,
     children,
@@ -19,52 +26,62 @@ export function GridTooltip({
 }: GridTooltipProps) {
     const [open, setOpen] = useState(false);
     const [coords, setCoords] = useState({ top: 0, left: 0 });
-    const timerRef = useRef<NodeJS.Timeout | null>(null);
+    // Resolved when the tooltip opens: the closest DataGridThemeProvider, so the tooltip picks up
+    // the theme's --ogx-overlay-* variables like the grid's other popovers, or document.body.
+    const [portalTarget, setPortalTarget] = useState<Element | null>(null);
+    const timerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
     const childRef = useRef<HTMLElement | null>(null);
+    const tooltipId = useId();
 
+    // Viewport coordinates of the anchor point; the tooltip is position: fixed and its CSS
+    // transform (per placement) moves it off that point.
     const updateCoords = useCallback(() => {
         if (!childRef.current) return;
         const rect = childRef.current.getBoundingClientRect();
-
-        let t = 0;
-        let l = 0;
-
-        // Note: These calculations are for positioning absolute relative to document.body
-        const scrollX = window.pageXOffset || document.documentElement.scrollLeft;
-        const scrollY = window.pageYOffset || document.documentElement.scrollTop;
-
-        if (placement === 'top') {
-            t = rect.top + scrollY - 8;
-            l = rect.left + scrollX + rect.width / 2;
-        } else if (placement === 'bottom') {
-            t = rect.bottom + scrollY + 8;
-            l = rect.left + scrollX + rect.width / 2;
+        const centerX = rect.left + rect.width / 2;
+        const centerY = rect.top + rect.height / 2;
+        switch (placement) {
+            case 'bottom': setCoords({ top: rect.bottom + GAP, left: centerX }); break;
+            case 'left': setCoords({ top: centerY, left: rect.left - GAP }); break;
+            case 'right': setCoords({ top: centerY, left: rect.right + GAP }); break;
+            default: setCoords({ top: rect.top - GAP, left: centerX });
         }
-
-        setCoords({ top: t, left: l });
     }, [placement]);
 
+    const clearTimer = useCallback(() => {
+        if (timerRef.current) clearTimeout(timerRef.current);
+        timerRef.current = null;
+    }, []);
+
     useLayoutEffect(() => {
-        if (open) {
-            updateCoords();
-            window.addEventListener('scroll', updateCoords, true);
-            window.addEventListener('resize', updateCoords);
-        }
+        if (!open) return;
+        updateCoords();
+        const handleKeyDown = (e: KeyboardEvent) => {
+            if (e.key === 'Escape') { clearTimer(); setOpen(false); }
+        };
+        window.addEventListener('scroll', updateCoords, true);
+        window.addEventListener('resize', updateCoords);
+        document.addEventListener('keydown', handleKeyDown);
         return () => {
             window.removeEventListener('scroll', updateCoords, true);
             window.removeEventListener('resize', updateCoords);
+            document.removeEventListener('keydown', handleKeyDown);
         };
-    }, [open, updateCoords]);
+    }, [open, updateCoords, clearTimer]);
 
-    const handleMouseEnter = () => {
-        if (timerRef.current) clearTimeout(timerRef.current);
+    // A pending enter/leave timer must not fire after unmount.
+    useEffect(() => clearTimer, [clearTimer]);
+
+    const show = () => {
+        clearTimer();
         timerRef.current = setTimeout(() => {
+            setPortalTarget(childRef.current?.closest('.ogx-theme-provider') ?? document.body);
             setOpen(true);
         }, enterDelay);
     };
 
-    const handleMouseLeave = () => {
-        if (timerRef.current) clearTimeout(timerRef.current);
+    const hide = () => {
+        clearTimer();
         timerRef.current = setTimeout(() => {
             setOpen(false);
         }, leaveDelay);
@@ -77,29 +94,45 @@ export function GridTooltip({
         childRef.current = node ? (node.firstElementChild as HTMLElement) ?? node : null;
     }, []);
 
+    const isShown = open && Boolean(title) && portalTarget !== null;
+
+    // While shown, the child is described by the tooltip (added to any aria-describedby it has).
+    let child: React.ReactNode = children;
+    if (isShown && isValidElement(children)) {
+        const element = children as React.ReactElement<ChildAriaProps>;
+        const describedBy = element.props['aria-describedby'];
+        child = cloneElement(element, {
+            'aria-describedby': describedBy ? `${describedBy} ${tooltipId}` : tooltipId,
+        });
+    }
+
     return (
         <>
             <span
                 ref={wrapperRef}
                 style={{ display: 'inline-block', lineHeight: 0 }}
-                onMouseEnter={handleMouseEnter}
-                onMouseLeave={handleMouseLeave}
+                onMouseEnter={show}
+                onMouseLeave={hide}
+                onFocus={show}
+                onBlur={hide}
             >
-                {children}
+                {child}
             </span>
-            {open && title && ReactDOM.createPortal(
+            {isShown && portalTarget && ReactDOM.createPortal(
                 <div
+                    id={tooltipId}
+                    role="tooltip"
                     className={`ogx-tooltip ogx-tooltip--${placement}`}
                     style={{
                         top: coords.top,
                         left: coords.left,
-                        position: 'absolute',
+                        position: 'fixed',
                         zIndex: 99999
                     }}
                 >
                     {title}
                 </div>,
-                document.body
+                portalTarget
             )}
         </>
     );

package/lib/components/ui/Button.tsx

@@ -15,6 +15,8 @@ export const Button: React.FC<ButtonProps> = ({
     color = 'default',
     disabled = false,
     className = '',
+    // A <button> defaults to type="submit"; the grid often sits inside a form.
+    type = 'button',
     children,
     ...props
 }) => {
@@ -29,6 +31,7 @@ export const Button: React.FC<ButtonProps> = ({
 
     return (
         <button
+            type={type}
             className={classNames}
             disabled={disabled}
             {...props}

package/lib/components/ui/Checkbox.tsx

@@ -41,11 +41,12 @@ export const Checkbox: React.FC<CheckboxProps> = ({
 
     return (
         <label className={wrapperClassNames}>
+            {/* No fallback aria-label: it would override the name from `label`, a <label htmlFor>
+                or aria-labelledby. Pass `label` or `aria-label` when nothing else names it. */}
             <input
                 ref={setRef}
                 type="checkbox"
                 className="ogx-checkbox__input"
-                aria-label={label || props['aria-label'] || (indeterminate ? 'Select some' : props.checked ? 'Deselect' : 'Select')}
                 {...props}
             />
             <span className="ogx-checkbox__box">

package/lib/components/ui/ExpandIcon.css

@@ -27,12 +27,3 @@
   display: block;
   transition: transform 0.2s ease;
 }
-@media (prefers-color-scheme: dark) {
-  .ogx-expand-icon {
-    color: var(--ogx-color-gray-400);
-  }
-  .ogx-expand-icon:hover {
-    background: var(--ogx-color-gray-800);
-    color: var(--ogx-color-gray-100);
-  }
-}

package/lib/components/ui/ExpandIcon.tsx

@@ -5,9 +5,11 @@ export interface ExpandIconProps {
     isExpanded: boolean;
     onClick?: (event: React.MouseEvent) => void;
     variant?: 'chevron' | 'plus-minus';
+    /** Pass -1 inside grid cells: the cell, not the button, is the keyboard focus stop. */
+    tabIndex?: number;
 }
 
-export function ExpandIcon({ isExpanded, onClick, variant = 'chevron' }: ExpandIconProps) {
+export function ExpandIcon({ isExpanded, onClick, variant = 'chevron', tabIndex }: ExpandIconProps) {
     return (
         <button
             className={`ogx-expand-icon ${isExpanded ? 'ogx-expand-icon--expanded' : ''}`}
@@ -18,6 +20,7 @@ export function ExpandIcon({ isExpanded, onClick, variant = 'chevron' }: ExpandI
             }}
             aria-label={isExpanded ? 'Collapse row' : 'Expand row'}
             type="button"
+            tabIndex={tabIndex}
         >
             {variant === 'plus-minus' ? (
                 <svg

package/lib/hooks/core/gridApiPlaceholder.ts

@@ -0,0 +1,34 @@
+import type { GridApi } from '../../types';
+
+const noop = () => {};
+
+/**
+ * A complete GridApi whose methods are safe no-ops. `useGridApiRef()` starts with one so
+ * `apiRef.current` is never null (its type says it is not) before the grid has mounted;
+ * the grid replaces it with the live API when it mounts.
+ */
+export function createGridApiPlaceholder(): GridApi {
+    return {
+        getRow: () => null,
+        getAllRows: () => [],
+        getVisibleRows: () => [],
+        getAllFilteredRows: () => [],
+        getGroupedExportRows: () => null,
+        getAggregationResult: () => null,
+        getAggregationModel: () => null,
+        getColumn: () => null,
+        getAllColumns: () => [],
+        getVisibleColumns: () => [],
+        selectRow: noop,
+        selectRows: noop,
+        getSelectedRows: () => [],
+        sortColumn: noop,
+        getSortModel: () => [],
+        setFilterModel: noop,
+        getFilterModel: () => ({ items: [] }),
+        setPage: noop,
+        setPageSize: noop,
+        scrollToIndexes: noop,
+        copySelectedRows: () => Promise.resolve(),
+    };
+}

package/lib/hooks/core/gridToolbarHostContext.ts

@@ -0,0 +1,14 @@
+import { createContext } from 'react';
+
+/**
+ * Lets a `GridToolbar` rendered in `slots.toolbar` tell the grid that it will show the Columns
+ * panel when the column menu asks for it (through `forceColumnsOpen`). When no toolbar has
+ * registered (a custom toolbar that does not render `GridToolbar`, or one that does not forward
+ * the grid's props), the column menu's **Manage columns** opens the standalone panel instead.
+ */
+export interface GridToolbarHost {
+    /** Registers a toolbar that can show the Columns panel. Returns the function that unregisters it. */
+    registerColumnsPanel: () => () => void;
+}
+
+export const GridToolbarHostContext = createContext<GridToolbarHost | null>(null);