@opencorestack/opengridx 3.4.0 → 3.5.0

package/lib/components/HeaderFilter/HeaderFilterRow.tsx

@@ -0,0 +1,157 @@
+import { useCallback, useLayoutEffect, useRef } from 'react';
+import type { GridColDef, GridColumnPinning, GridFilterItem, GridFilterModel } from '../../types';
+import { isColumnPinned, SYSTEM_COLUMN_WIDTH } from '../../utils/pinning';
+import { CHECKBOX_FIELD, EXPAND_FIELD, REORDER_FIELD } from '../../utils/focus';
+import { getHeaderFilterState, hasHeaderFilter, setHeaderFilterItem } from '../../utils/headerFilters';
+import { getHeaderColumnStyle } from '../Header/headerColumnStyle';
+import { HeaderFilterCell } from './HeaderFilterCell';
+
+export interface HeaderFilterRowProps {
+    /** The rendered columns of the column header row (render window with spacers), in render order. */
+    columns: GridColDef[];
+    columnWidths: Record<string, number>;
+    pinnedColumns?: GridColumnPinning;
+    /** Sticky offsets of the pinned columns (`calculatePinnedPositions`). */
+    pinnedPositions: Record<string, number>;
+    pinnedEdges: { lastLeft: string | null; firstRight: string | null };
+    rowReordering: boolean;
+    hasDetailPanel: boolean;
+    checkboxSelection: boolean;
+    pinExpandColumn: boolean;
+    pinCheckboxColumn: boolean;
+    columnIndexMap?: Map<string, number>;
+    /** `aria-rowindex` of the row: right after the column header row. */
+    ariaRowIndex: number;
+    filterModel?: GridFilterModel;
+    onFilterModelChange?: (model: GridFilterModel) => void;
+    onOpenFilterPanel?: () => void;
+    /** Field of the focused filter cell, or null. */
+    focusedField: string | null;
+}
+
+function SystemFilterCell({ field, ariaColIndex, sticky, left, focused }: {
+    field: string;
+    ariaColIndex: number;
+    sticky: boolean;
+    left: number;
+    focused: boolean;
+}) {
+    return (
+        <div
+            className={[
+                'ogx__header-filter-cell',
+                'ogx__header-filter-cell--system',
+                sticky && 'ogx__header-filter-cell--pinned ogx__header-filter-cell--pinned-left',
+                focused && 'ogx__header-filter-cell--focused',
+            ].filter(Boolean).join(' ')}
+            style={{
+                width: SYSTEM_COLUMN_WIDTH,
+                minWidth: SYSTEM_COLUMN_WIDTH,
+                maxWidth: SYSTEM_COLUMN_WIDTH,
+                position: sticky ? 'sticky' : undefined,
+                left: sticky ? left : undefined,
+            }}
+            role="columnheader"
+            aria-colindex={ariaColIndex}
+            data-field={field}
+            tabIndex={-1}
+        />
+    );
+}
+
+/**
+ * The header filter row (`headerFilters`): one cell per rendered column, laid out like the column
+ * header row above it, so pinned and virtualized columns line up. It edits the shared filter model
+ * through the root-level items it owns (`header:<field>`).
+ */
+export function HeaderFilterRow(props: HeaderFilterRowProps) {
+    const {
+        columns, columnWidths, pinnedColumns, pinnedPositions, pinnedEdges, rowReordering, hasDetailPanel,
+        checkboxSelection, pinExpandColumn, pinCheckboxColumn, columnIndexMap, ariaRowIndex, filterModel,
+        onFilterModelChange, onOpenFilterPanel, focusedField,
+    } = props;
+
+    // Cells commit from timers and unmount cleanups: they read the newest model, and two commits
+    // before the next render build on each other.
+    const latestRef = useRef({ filterModel, onFilterModelChange });
+    useLayoutEffect(() => {
+        latestRef.current = { filterModel, onFilterModelChange };
+    });
+    const handleItemChange = useCallback((field: string, item: GridFilterItem | null) => {
+        const { filterModel: current, onFilterModelChange: emit } = latestRef.current;
+        if (!emit) return;
+        const next = setHeaderFilterItem(current, field, item);
+        if (next === current) return;
+        latestRef.current = { filterModel: next, onFilterModelChange: emit };
+        emit(next);
+    }, []);
+
+    const reorderColIndex = rowReordering ? 1 : 0;
+    const expandColIndex = hasDetailPanel ? reorderColIndex + 1 : reorderColIndex;
+    const checkboxColIndex = checkboxSelection ? expandColIndex + 1 : expandColIndex;
+    const systemColumnCount = checkboxColIndex;
+    const expandLeft = rowReordering ? SYSTEM_COLUMN_WIDTH : 0;
+    const checkboxLeft = expandLeft + (hasDetailPanel && pinExpandColumn ? SYSTEM_COLUMN_WIDTH : 0);
+
+    return (
+        <div className="ogx__header-filter-row" role="row" aria-rowindex={ariaRowIndex}>
+            {rowReordering && (
+                <SystemFilterCell field={REORDER_FIELD} ariaColIndex={reorderColIndex} sticky left={0} focused={focusedField === REORDER_FIELD} />
+            )}
+            {hasDetailPanel && (
+                <SystemFilterCell field={EXPAND_FIELD} ariaColIndex={expandColIndex} sticky={pinExpandColumn} left={expandLeft} focused={focusedField === EXPAND_FIELD} />
+            )}
+            {checkboxSelection && (
+                <SystemFilterCell field={CHECKBOX_FIELD} ariaColIndex={checkboxColIndex} sticky={pinCheckboxColumn} left={checkboxLeft} focused={focusedField === CHECKBOX_FIELD} />
+            )}
+            {columns.map((colDef, index) => {
+                if (colDef.isSpacer) {
+                    return (
+                        <div
+                            key={colDef.field}
+                            style={{ width: colDef.width, minWidth: colDef.width, flexShrink: 0 }}
+                            aria-hidden="true"
+                        />
+                    );
+                }
+                const pinnedPosition = isColumnPinned(colDef.field, pinnedColumns);
+                const style = getHeaderColumnStyle(colDef, columnWidths, pinnedPosition, pinnedPosition ? pinnedPositions[colDef.field] : undefined);
+                const ariaColIndex = systemColumnCount + (columnIndexMap?.get(colDef.field) ?? index) + 1;
+                const className = [
+                    pinnedPosition && 'ogx__header-filter-cell--pinned',
+                    pinnedPosition && `ogx__header-filter-cell--pinned-${pinnedPosition}`,
+                    pinnedPosition === 'left' && colDef.field === pinnedEdges.lastLeft && 'ogx__header-filter-cell--pinned-left-last',
+                    pinnedPosition === 'right' && colDef.field === pinnedEdges.firstRight && 'ogx__header-filter-cell--pinned-right-first',
+                    focusedField === colDef.field && 'ogx__header-filter-cell--focused',
+                ].filter(Boolean).join(' ');
+
+                if (!hasHeaderFilter(colDef)) {
+                    return (
+                        <div
+                            key={colDef.field}
+                            className={`ogx__header-filter-cell ogx__header-filter-cell--empty ${className}`}
+                            style={style}
+                            role="columnheader"
+                            aria-label={`No filter for ${colDef.headerName || colDef.field}`}
+                            aria-colindex={ariaColIndex}
+                            data-field={colDef.field}
+                            tabIndex={-1}
+                        />
+                    );
+                }
+                return (
+                    <HeaderFilterCell
+                        key={colDef.field}
+                        colDef={colDef}
+                        state={getHeaderFilterState(filterModel, colDef.field)}
+                        style={style}
+                        className={className}
+                        ariaColIndex={ariaColIndex}
+                        onItemChange={handleItemChange}
+                        onOpenFilterPanel={onOpenFilterPanel}
+                    />
+                );
+            })}
+        </div>
+    );
+}

package/lib/components/Toolbar/GridToolbar.tsx

@@ -10,6 +10,7 @@ import { GlobalSearch } from './GlobalSearch';
 import { ColumnVisibilityPanel } from '../ColumnVisibilityPanel/ColumnVisibilityPanel';
 import { FilterPanel } from '../FilterPanel/FilterPanel';
 import { GridTooltip } from '../Tooltip/Tooltip';
+import { AiSparkleIcon } from '../AiAssistant/GridAiAssistantPanel';
 
 /** Props passed to a custom toolbar button renderer. */
 export interface ToolbarButtonRenderProps {
@@ -48,6 +49,10 @@ export interface GridToolbarProps {
     onColumnOrderReset?: () => void;
     forceColumnsOpen?: boolean;
     onColumnsPanelClose?: () => void;
+    /** Opens the filter panel when it turns true (the grid passes it for the header filter row). @since v3.5 */
+    forceFiltersOpen?: boolean;
+    /** Called whenever the filter panel closes. @since v3.5 */
+    onFiltersPanelClose?: () => void;
     children?: React.ReactNode;
     rightContent?: React.ReactNode;
     style?: React.CSSProperties;
@@ -80,6 +85,16 @@ export interface GridToolbarProps {
     className?: string;
     /** Show columns with `hideable: false` in the Columns panel as disabled rows. Default: false. */
     showNonHideableColumns?: boolean;
+    /**
+     * Opens or closes the `aiAssistant` panel. The grid passes it when `aiAssistant` is set; the
+     * **Ask AI** button is shown only with it. Receives the button, which gets focus back on close.
+     * @since v3.5
+     */
+    onAiAssistantToggle?: (trigger: HTMLElement | null) => void;
+    /** Whether the `aiAssistant` panel is open. @since v3.5 */
+    aiAssistantOpen?: boolean;
+    /** Label of the Ask AI button (`localeText.aiAssistantButton`). Default: `"Ask AI"`. @since v3.5 */
+    aiAssistantLabel?: string;
 }
 
 const BUILT_IN_AGGREGATION_FUNCTIONS = Object.keys(AGGREGATION_FUNCTIONS) as BuiltInAggFn[];
@@ -492,6 +507,8 @@ export function GridToolbar({
     onColumnOrderReset,
     forceColumnsOpen,
     onColumnsPanelClose,
+    forceFiltersOpen,
+    onFiltersPanelClose,
     children,
     rightContent,
     style,
@@ -502,6 +519,9 @@ export function GridToolbar({
     renderQuickFilter,
     className,
     showNonHideableColumns,
+    onAiAssistantToggle,
+    aiAssistantOpen = false,
+    aiAssistantLabel = 'Ask AI',
 }: GridToolbarProps) {
     // 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
@@ -514,6 +534,7 @@ export function GridToolbar({
 
     const switchPanel = (next: ToolbarPanel | null) => {
         if (openPanel === 'columns' && next !== 'columns') onColumnsPanelClose?.();
+        if (openPanel === 'filters' && next !== 'filters') onFiltersPanelClose?.();
         setOpenPanel(next);
     };
     const togglePanel = (panel: ToolbarPanel) => switchPanel(openPanel === panel ? null : panel);
@@ -526,6 +547,12 @@ export function GridToolbar({
         setSeenForceColumnsOpen(forceColumnsOpen);
         if (forceColumnsOpen) setOpenPanel('columns');
     }
+    // forceFiltersOpen turning true opens the filter panel, the same way.
+    const [seenForceFiltersOpen, setSeenForceFiltersOpen] = useState(forceFiltersOpen);
+    if (seenForceFiltersOpen !== forceFiltersOpen) {
+        setSeenForceFiltersOpen(forceFiltersOpen);
+        if (forceFiltersOpen && onFilterModelChange) setOpenPanel('filters');
+    }
 
     // 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.
@@ -535,8 +562,14 @@ export function GridToolbar({
         if (!toolbarHost || !hostsColumnsPanel) return undefined;
         return toolbarHost.registerColumnsPanel();
     }, [toolbarHost, hostsColumnsPanel]);
+    const hostsFiltersPanel = forceFiltersOpen !== undefined && Boolean(onFilterModelChange);
+    useEffect(() => {
+        if (!toolbarHost || !hostsFiltersPanel) return undefined;
+        return toolbarHost.registerFiltersPanel();
+    }, [toolbarHost, hostsFiltersPanel]);
 
     const aggButtonRef = useRef<HTMLButtonElement>(null);
+    const aiButtonRef = useRef<HTMLButtonElement>(null);
     const pivotButtonRef = useRef<HTMLButtonElement>(null);
     const colsButtonRef = useRef<HTMLButtonElement>(null);
     const filterButtonRef = useRef<HTMLButtonElement>(null);
@@ -642,6 +675,24 @@ export function GridToolbar({
 
             {/* Right: built-in buttons */}
             <div className="ogx-toolbar__actions">
+                {onAiAssistantToggle && (
+                    <div className="ogx-toolbar__dropdown-wrapper" style={{ marginRight: 4 }}>
+                        <button
+                            type="button"
+                            ref={aiButtonRef}
+                            className={`ogx-toolbar__icon-btn ogx-toolbar__ai-btn${aiAssistantOpen ? ' ogx-toolbar__icon-btn--active' : ''}`}
+                            aria-haspopup="dialog"
+                            aria-expanded={aiAssistantOpen}
+                            onClick={() => {
+                                switchPanel(null);
+                                onAiAssistantToggle(aiButtonRef.current);
+                            }}
+                        >
+                            <AiSparkleIcon />
+                            {aiAssistantLabel}
+                        </button>
+                    </div>
+                )}
                 {onFilterModelChange && (
                     <div className="ogx-toolbar__dropdown-wrapper" style={{ marginRight: 4 }}>
                         {renderQuickFilter

package/lib/hooks/core/gridApiPlaceholder.ts

@@ -45,5 +45,13 @@ export function createGridApiPlaceholder<R extends GridValidRowModel = GridRowMo
         canUndo: () => false,
         canRedo: () => false,
         clearHistory: noop,
+        setSortModel: noop,
+        setRowGroupingModel: noop,
+        setAggregationModel: noop,
+        setColumnVisibilityModel: noop,
+        setPivotModel: noop,
+        getGridAiState: () => ({}),
+        openAiAssistant: noop,
+        closeAiAssistant: noop,
     };
 }

package/lib/hooks/core/gridToolbarHostContext.ts

@@ -9,6 +9,11 @@ import { createContext } from 'react';
 export interface GridToolbarHost {
     /** Registers a toolbar that can show the Columns panel. Returns the function that unregisters it. */
     registerColumnsPanel: () => () => void;
+    /**
+     * Registers a toolbar that can show the filter panel when the header filter row asks for it
+     * (through `forceFiltersOpen`). Returns the function that unregisters it.
+     */
+    registerFiltersPanel: () => () => void;
 }
 
 export const GridToolbarHostContext = createContext<GridToolbarHost | null>(null);

package/lib/hooks/core/useGridApiMethods.ts

@@ -1,9 +1,13 @@
 import { useLayoutEffect, useRef } from 'react';
 import type {
+    GridAggregationModel,
     GridApi,
     GridColDef,
+    GridColumnVisibilityModel,
     GridFilterModel,
     GridPaginationModel,
+    GridPivotModel,
+    GridRowGroupingModel,
     GridRowId,
     GridRowModel,
     GridSortItem,
@@ -45,6 +49,16 @@ export interface UseGridApiMethodsParams {
     getAllFilteredRows: () => GridRowModel[];
     /** Columns on screen, in display order. */
     visibleColumns: GridColDef[];
+
+    // v3.5: the remaining models, for the setters and getGridAiState.
+    rowGroupingModel: GridRowGroupingModel;
+    onRowGroupingModelChange: (model: GridRowGroupingModel) => void;
+    aggregationModel: GridAggregationModel;
+    onAggregationModelChange: (model: GridAggregationModel) => void;
+    columnVisibilityModel: GridColumnVisibilityModel;
+    onColumnVisibilityModelChange: (model: GridColumnVisibilityModel) => void;
+    pivotModel: GridPivotModel;
+    onPivotModelChange: (model: GridPivotModel) => void;
 }
 
 /**
@@ -111,5 +125,30 @@ export function useGridApiMethods(params: UseGridApiMethodsParams): void {
         api.getVisibleRows = () => latest().getVisibleRows();
         api.getAllFilteredRows = () => latest().getAllFilteredRows();
         api.getVisibleColumns = () => latest().visibleColumns;
+
+        api.setSortModel = (model) => {
+            latestRef.current = { ...latest(), sortModel: model };
+            latest().onSortModelChange(model);
+        };
+        api.setRowGroupingModel = (model) => {
+            latestRef.current = { ...latest(), rowGroupingModel: model };
+            latest().onRowGroupingModelChange(model);
+        };
+        api.setAggregationModel = (model) => {
+            latestRef.current = { ...latest(), aggregationModel: model };
+            latest().onAggregationModelChange(model);
+        };
+        api.setColumnVisibilityModel = (model) => {
+            latestRef.current = { ...latest(), columnVisibilityModel: model };
+            latest().onColumnVisibilityModelChange(model);
+        };
+        api.setPivotModel = (model) => {
+            latestRef.current = { ...latest(), pivotModel: model };
+            latest().onPivotModelChange(model);
+        };
+        api.getGridAiState = () => {
+            const { filterModel, sortModel, rowGroupingModel, aggregationModel, pivotModel, columnVisibilityModel } = latest();
+            return { filterModel, sortModel, rowGroupingModel, aggregationModel, pivotModel, columnVisibilityModel };
+        };
     }, [apiRef]);
 }

package/lib/hooks/core/useGridAriaRows.ts

@@ -5,6 +5,8 @@ import type { GridColumnGroupingModel, GridPaginationModel } from '../../types';
 
 export interface UseGridAriaRowsParams {
     columnGroupingModel: GridColumnGroupingModel | undefined;
+    /** Whether the header filter row (`headerFilters`) is rendered: one more header row. */
+    headerFilterRow?: boolean;
     pinnedTopCount: number;
     pinnedBottomCount: number;
     pagination: boolean;
@@ -19,13 +21,13 @@ export interface UseGridAriaRowsParams {
 /** `aria-rowcount` and the `aria-rowindex` bases of the pinned and centre rows. */
 export function useGridAriaRows(params: UseGridAriaRowsParams): GridAriaRowLayout {
     const {
-        columnGroupingModel, pinnedTopCount, pinnedBottomCount, pagination, paginationMode, paginationModel,
+        columnGroupingModel, headerFilterRow = false, pinnedTopCount, pinnedBottomCount, pagination, paginationMode, paginationModel,
         paginationRowCount, paginatedUnpinnedRowCount, sortedUnpinnedRowCount,
     } = params;
     const { page, pageSize } = paginationModel;
 
     return useMemo(() => getAriaRowLayout({
-        headerRowCount: 1 + getColumnGroupDepth(columnGroupingModel),
+        headerRowCount: 1 + getColumnGroupDepth(columnGroupingModel) + (headerFilterRow ? 1 : 0),
         pinnedTopCount,
         pinnedBottomCount,
         pageRowCount: pagination ? paginatedUnpinnedRowCount : sortedUnpinnedRowCount,
@@ -33,6 +35,6 @@ export function useGridAriaRows(params: UseGridAriaRowsParams): GridAriaRowLayou
             ? Math.max(paginationRowCount, paginatedUnpinnedRowCount)
             : sortedUnpinnedRowCount,
         pageOffset: pagination ? page * pageSize : 0,
-    }), [columnGroupingModel, pinnedTopCount, pinnedBottomCount, pagination, paginatedUnpinnedRowCount,
+    }), [columnGroupingModel, headerFilterRow, pinnedTopCount, pinnedBottomCount, pagination, paginatedUnpinnedRowCount,
         sortedUnpinnedRowCount, paginationMode, paginationRowCount, page, pageSize]);
 }

package/lib/hooks/core/useGridCellSelection.ts

@@ -121,6 +121,8 @@ export interface UseGridCellSelectionReturn {
      * address the renderable rows and the range columns of `navigationColumns` (`isRangeColumnField`).
      */
     getCurrentRange: () => { range: GridCellSelectionModel[number] | null; resolved: ResolvedCellRange | null };
+    /** Starts a tracked pointer drag with the range drag's auto-scroll (fill handle). Stable. @since v3.5 */
+    startTrackedDrag: (options: GridTrackedDragOptions) => void;
 }
 
 interface DragState {
@@ -130,7 +132,24 @@ interface DragState {
     y: number;
     frame: number;
     moved: boolean;
-    stop: () => void;
+    /** Ends the drag; `cancelled` unless the button was released normally (tracked drags: Escape cancels). */
+    stop: (cancelled?: boolean, altKey?: boolean) => void;
+    /** A tracked drag (fill handle): told the cell under the pointer each frame instead of moving the range. */
+    onTrack?: (head: GridCellCoordinates, x: number, y: number) => void;
+}
+
+/** A drag that reuses the range drag's hit testing and auto-scroll without selecting (the fill handle, v3.5). */
+export interface GridTrackedDragOptions {
+    /** The cell the drag starts on. */
+    start: GridCellCoordinates;
+    x: number;
+    y: number;
+    /** Pointer events of this pointer are followed (touch included), not mouse events. */
+    pointerId: number;
+    /** Each frame: the cell under the pointer (or nearest it) and the pointer position. */
+    onTrack: (head: GridCellCoordinates, x: number, y: number) => void;
+    /** Once: released (`cancelled: false`, with the Alt key state) or cancelled. */
+    onEnd: (details: { cancelled: boolean; altKey: boolean }) => void;
 }
 
 /** The body cell of `viewport` holding `target`: its row index and field. Not cells of nested grids or detail panels. */
@@ -451,8 +470,10 @@ export function useGridCellSelection<R extends GridRowModel>(params: UseGridCell
                 latestRef.current.containerRef.current?.classList.add(RANGE_DRAGGING_CLASS);
                 clearTextSelection(viewport.ownerDocument);
             }
-            setRange(drag.anchor, head, 'pointer');
+            if (!drag.onTrack) setRange(drag.anchor, head, 'pointer');
         }
+        // A tracked drag hears every frame: its target can change while the head stays in one cell.
+        if (drag.onTrack) drag.onTrack(drag.head, drag.x, drag.y);
 
         if (!allowScroll) return;
         const outside = drag.y < bodyTop || drag.y > bodyBottom || drag.x < box.left || drag.x > box.left + width;
@@ -475,11 +496,22 @@ export function useGridCellSelection<R extends GridRowModel>(params: UseGridCell
         runDragFrameRef.current = runDragFrame;
     }, [runDragFrame]);
 
-    const startDrag = useCallback((anchor: GridCellCoordinates, head: GridCellCoordinates, x: number, y: number, doc: Document) => {
+    const startDrag = useCallback((
+        anchor: GridCellCoordinates,
+        head: GridCellCoordinates,
+        x: number,
+        y: number,
+        doc: Document,
+        tracked?: Pick<GridTrackedDragOptions, 'pointerId' | 'onTrack' | 'onEnd'>,
+    ) => {
         dragRef.current?.stop();
+        // A range drag follows the mouse; a tracked drag (fill handle) follows its pointer, touch included.
+        const moveType = tracked ? 'pointermove' : 'mousemove';
+        const upType = tracked ? 'pointerup' : 'mouseup';
+        const isOwnEvent = (event: MouseEvent) => !tracked || (event as PointerEvent).pointerId === tracked.pointerId;
         const onMove = (event: MouseEvent) => {
             const drag = dragRef.current;
-            if (!drag) return;
+            if (!drag || !isOwnEvent(event)) return;
             if (event.buttons === 0) {
                 // Released outside the window.
                 drag.stop();
@@ -497,12 +529,12 @@ export function useGridCellSelection<R extends GridRowModel>(params: UseGridCell
         };
         const onUp = (event: MouseEvent) => {
             const drag = dragRef.current;
-            if (!drag) return;
+            if (!drag || !isOwnEvent(event)) return;
             drag.x = event.clientX;
             drag.y = event.clientY;
             runDragFrame(false);
             const moved = drag.moved;
-            drag.stop();
+            drag.stop(false, event.altKey);
             if (moved) clearTextSelection(doc);
             if (moved) {
                 // The click that follows lands on the common ancestor of both cells (often the row):
@@ -511,26 +543,57 @@ export function useGridCellSelection<R extends GridRowModel>(params: UseGridCell
                 setTimeout(() => { suppressClickRef.current = false; }, 0);
             }
         };
+        const onCancel = (event: Event) => {
+            if (isOwnEvent(event as MouseEvent)) dragRef.current?.stop();
+        };
+        // Escape abandons a tracked drag (the fill writes nothing).
+        const onKeyDown = (event: KeyboardEvent) => {
+            if (event.key !== 'Escape' || !dragRef.current) return;
+            event.preventDefault();
+            event.stopPropagation();
+            dragRef.current.stop();
+        };
         const view = doc.defaultView;
         const onBlur = () => dragRef.current?.stop();
+        let ended = false;
         const drag: DragState = {
             anchor, head, x, y, frame: 0, moved: false,
-            stop: () => {
+            onTrack: tracked?.onTrack,
+            stop: (cancelled = true, altKey = false) => {
                 if (drag.frame) cancelAnimationFrame(drag.frame);
                 drag.frame = 0;
-                doc.removeEventListener('mousemove', onMove, true);
-                doc.removeEventListener('mouseup', onUp, true);
+                doc.removeEventListener(moveType, onMove, true);
+                doc.removeEventListener(upType, onUp, true);
+                if (tracked) {
+                    doc.removeEventListener('pointercancel', onCancel, true);
+                    doc.removeEventListener('keydown', onKeyDown, true);
+                }
                 view?.removeEventListener('blur', onBlur);
                 latestRef.current.containerRef.current?.classList.remove(RANGE_DRAGGING_CLASS);
                 if (dragRef.current === drag) dragRef.current = null;
+                if (!ended) {
+                    ended = true;
+                    if (tracked) tracked.onEnd({ cancelled, altKey });
+                }
             },
         };
         dragRef.current = drag;
-        doc.addEventListener('mousemove', onMove, true);
-        doc.addEventListener('mouseup', onUp, true);
+        doc.addEventListener(moveType, onMove, true);
+        doc.addEventListener(upType, onUp, true);
+        if (tracked) {
+            doc.addEventListener('pointercancel', onCancel, true);
+            doc.addEventListener('keydown', onKeyDown, true);
+        }
         view?.addEventListener('blur', onBlur);
     }, [runDragFrame]);
 
+    const startTrackedDrag = useCallback((options: GridTrackedDragOptions) => {
+        const viewport = latestRef.current.viewportRef.current;
+        if (!viewport || !latestRef.current.enabled) return;
+        const { start, x, y, pointerId, onTrack, onEnd } = options;
+        startDrag(start, start, x, y, viewport.ownerDocument, { pointerId, onTrack, onEnd });
+    }, [startDrag]);
+
     const handleMouseDown = useCallback((event: React.MouseEvent<HTMLElement>) => {
         if (event.button !== 0 || event.defaultPrevented) return;
         const { context: ctx } = latestRef.current;
@@ -538,6 +601,8 @@ export function useGridCellSelection<R extends GridRowModel>(params: UseGridCell
         const viewport = event.currentTarget;
         const hit = cellFromTarget(event.target, viewport);
         if (!hit || !isRangeColumnField(hit.field)) return;
+        // The fill handle starts its own drag (useGridFillHandle).
+        if ((event.target as Element).closest?.('.ogx__cell-fill-handle')) return;
         // Typing targets and open editors keep the pointer to themselves.
         if (hit.element.classList.contains('ogx__cell--editing') || isTextEntryElement(event.target as Element)) return;
         const id = ctx.rowIds[hit.rowIndex];
@@ -626,6 +691,7 @@ export function useGridCellSelection<R extends GridRowModel>(params: UseGridCell
         reportFocus,
         setModel,
         getCurrentRange: currentRange,
+        startTrackedDrag,
     };
 }
 

package/lib/hooks/core/useGridColumnsPanel.ts

@@ -16,26 +16,46 @@ export interface UseGridColumnsPanelResult {
     standalonePanelRef: RefObject<HTMLDivElement | null>;
     /** The column menu's **Manage columns** action. */
     openColumnsPanel: () => void;
+    /** Passed to the toolbar as `forceFiltersOpen`. */
+    toolbarFiltersRequested: boolean;
+    /** Passed to the toolbar as `onFiltersPanelClose`. */
+    closeToolbarFiltersPanel: () => void;
+    /**
+     * Opens the toolbar's filter panel (a header filter cell's "Custom filter"); undefined while no
+     * `GridToolbar` that can show it is rendered.
+     */
+    openFiltersPanel: (() => void) | undefined;
 }
 
 /**
  * Opens the Columns panel for the column menu: in the toolbar when a `GridToolbar` has registered
  * through `GridToolbarHostContext`, otherwise as the standalone panel, which closes on Escape or a
- * mousedown outside it.
+ * mousedown outside it. Also opens the toolbar's filter panel for the header filter row, when a
+ * `GridToolbar` has registered that it can show it.
  */
 export function useGridColumnsPanel(): UseGridColumnsPanelResult {
     const [toolbarPanelRequested, setToolbarPanelRequested] = useState(false);
     const [standalonePanelOpen, setStandalonePanelOpen] = useState(false);
     const standalonePanelRef = useRef<HTMLDivElement>(null);
     const toolbarHostCountRef = useRef(0);
+    // State, not a ref: whether "Custom filter" can open the panel decides how it renders.
+    const [filtersHostCount, setFiltersHostCount] = useState(0);
+    const [toolbarFiltersRequested, setToolbarFiltersRequested] = useState(false);
 
     const toolbarHost = useMemo<GridToolbarHost>(() => ({
         registerColumnsPanel: () => {
             toolbarHostCountRef.current += 1;
             return () => { toolbarHostCountRef.current -= 1; };
         },
+        registerFiltersPanel: () => {
+            setFiltersHostCount(count => count + 1);
+            return () => setFiltersHostCount(count => count - 1);
+        },
     }), []);
 
+    const requestFiltersPanel = useCallback(() => setToolbarFiltersRequested(true), []);
+    const closeToolbarFiltersPanel = useCallback(() => setToolbarFiltersRequested(false), []);
+
     const openColumnsPanel = useCallback(() => {
         if (toolbarHostCountRef.current > 0) {
             setToolbarPanelRequested(true);
@@ -73,5 +93,8 @@ export function useGridColumnsPanel(): UseGridColumnsPanelResult {
         closeStandalonePanel,
         standalonePanelRef,
         openColumnsPanel,
+        toolbarFiltersRequested,
+        closeToolbarFiltersPanel,
+        openFiltersPanel: filtersHostCount > 0 ? requestFiltersPanel : undefined,
     };
 }