@opencorestack/opengridx 3.4.0 → 3.5.1

package/lib/hooks/core/useGridKeyboardNavigation.ts

@@ -100,6 +100,11 @@ export interface UseGridKeyboardNavigationParams<R extends GridRowModel> {
      * Ctrl/Cmd+A selects every data cell instead of every row.
      */
     cellSelection?: GridKeyboardCellSelection;
+    /**
+     * Whether the header filter row (`headerFilters`) is rendered: ArrowDown on a column header
+     * moves to its filter cell, and ArrowDown there into the first row.
+     */
+    headerFilters?: boolean;
 }
 
 export interface GridKeyboardCellSelection {
@@ -134,14 +139,18 @@ function resolveFocus<R extends GridRowModel>(
     cell: FocusedCell | null,
     rows: R[],
     columns: ReadonlyArray<NavigationColumn<R>>,
-    getRowId: (row: R) => GridRowId
+    getRowId: (row: R) => GridRowId,
+    headerFilters: boolean
 ): { cell: FocusedCell | null; rowIndex: number } {
     if (!cell || columns.length === 0) return { cell: null, rowIndex: -1 };
     const fallbackField = (columns.find(c => !isSystemField(c.field)) ?? columns[0]).field;
     const field = columns.some(c => c.field === cell.field) ? cell.field : fallbackField;
 
     if (cell.id === null) {
-        return { cell: field === cell.field ? cell : { id: null, field }, rowIndex: -1 };
+        // A filter cell whose row was turned off falls back to its column header.
+        const headerFilter = Boolean(cell.headerFilter) && headerFilters;
+        if (field === cell.field && headerFilter === Boolean(cell.headerFilter)) return { cell, rowIndex: -1 };
+        return { cell: headerFilter ? { id: null, field, headerFilter } : { id: null, field }, rowIndex: -1 };
     }
     const hint = cell.rowIndex;
     let rowIndex = hint !== undefined && rows[hint] && getRowId(rows[hint]) === cell.id ? hint : rows.findIndex(r => getRowId(r) === cell.id);
@@ -187,14 +196,15 @@ export function useGridKeyboardNavigation<R extends GridRowModel>(
         rowHeight,
         getSpanOrigin,
         cellSelection,
+        headerFilters = false,
     } = params;
 
     const [storedFocus, setFocusedCell] = useState<FocusedCell | null>(null);
     const [focusWithin, setFocusWithin] = useState(false);
 
     const resolved = useMemo(
-        () => resolveFocus(storedFocus, allRenderableRows, navigationColumns, getRowId),
-        [storedFocus, allRenderableRows, navigationColumns, getRowId]
+        () => resolveFocus(storedFocus, allRenderableRows, navigationColumns, getRowId, headerFilters),
+        [storedFocus, allRenderableRows, navigationColumns, getRowId, headerFilters]
     );
     const focusedCell = resolved.cell;
     const focusedRowIndex = resolved.rowIndex;
@@ -359,10 +369,15 @@ export function useGridKeyboardNavigation<R extends GridRowModel>(
         const isSpace = key === ' ' || key === 'Spacebar';
         const isEditing = Boolean(editingHandlers.editingCell);
 
+        // Row positions: rows from 0, the column header row at `headerRow`, and the header filter
+        // row (when rendered) at -1, between the header and the rows.
+        const headerRow = headerFilters ? -2 : -1;
         const moveTo = (r: number, c: number) => {
             const col = navigationColumns[c];
-            if (!col || r < -1 || r >= allRenderableRows.length) return;
-            setFocusedCell(r === -1 ? { id: null, field: col.field } : { id: getRowId(allRenderableRows[r]), field: col.field, rowIndex: r });
+            if (!col || r < headerRow || r >= allRenderableRows.length) return;
+            if (r === headerRow) setFocusedCell({ id: null, field: col.field });
+            else if (r < 0) setFocusedCell({ id: null, field: col.field, headerFilter: true });
+            else setFocusedCell({ id: getRowId(allRenderableRows[r]), field: col.field, rowIndex: r });
             scrollCellIntoView(r, col.field);
         };
 
@@ -377,7 +392,8 @@ export function useGridKeyboardNavigation<R extends GridRowModel>(
         }
 
         const { id, field } = focusedCell;
-        const rowIndex = focusedRowIndex;
+        const onHeaderFilter = id === null && Boolean(focusedCell.headerFilter);
+        const rowIndex = id !== null ? focusedRowIndex : onHeaderFilter ? -1 : headerRow;
         const colIndex = navigationColumns.findIndex(c => c.field === field);
         const systemColumnCount = navigationColumns.filter(c => isSystemField(c.field)).length;
         const isSyntheticRow = (rowId: GridRowId) => isSyntheticRowId(rowId, rowMetaMap);
@@ -455,6 +471,8 @@ export function useGridKeyboardNavigation<R extends GridRowModel>(
             return;
         }
 
+        // A filter cell handles Enter, Space and typing itself (HeaderFilterCell).
+        if (onHeaderFilter && (key === 'Enter' || isSpace)) return;
         if (id === null) {
             if (key === 'Enter' || isSpace) {
                 event.preventDefault();
@@ -533,13 +551,13 @@ export function useGridKeyboardNavigation<R extends GridRowModel>(
                 case 'ArrowLeft': return c - 1 < 0 ? { r: r - 1, c: lastCol } : { r, c: c - 1 };
                 case 'ArrowDown': return { r: r + 1, c };
                 case 'ArrowUp': return { r: r - 1, c };
-                case 'Home': return { r: withModifier ? -1 : r, c: 0 };
+                case 'Home': return { r: withModifier ? headerRow : r, c: 0 };
                 case 'End': return { r: withModifier ? lastRow : r, c: lastCol };
-                case 'PageUp': return { r: Math.max(-1, r - page), c };
+                case 'PageUp': return { r: Math.max(headerRow, r - page), c };
                 default: return { r: Math.min(lastRow, r + page), c };
             }
         };
-        const inGrid = ({ r, c }: { r: number; c: number }) => r >= -1 && r <= lastRow && c >= 0 && c <= lastCol;
+        const inGrid = ({ r, c }: { r: number; c: number }) => r >= headerRow && r <= lastRow && c >= 0 && c <= lastCol;
         const spanOriginAt = ({ r, c }: { r: number; c: number }) =>
             r >= 0 ? getSpanOrigin?.(getRowId(allRenderableRows[r]), navigationColumns[c].field) ?? null : null;
 
@@ -590,6 +608,7 @@ export function useGridKeyboardNavigation<R extends GridRowModel>(
         getSpanOrigin,
         getRowId,
         cellSelection,
+        headerFilters,
     ]);
 
     return {

package/lib/hooks/core/useGridMaxContentHeight.ts

@@ -0,0 +1,16 @@
+import { useLayoutEffect, useState } from 'react';
+import type { RefObject } from 'react';
+import { getMaxElementHeight } from '../../utils/maxElementHeight';
+
+/**
+ * The tallest element this browser lays out (see `getMaxElementHeight`), measured once per document after
+ * mount: `undefined` until measured, `Infinity` where there is no layout engine (jsdom, SSR).
+ */
+export function useGridMaxContentHeight(containerRef: RefObject<HTMLElement | null>): number | undefined {
+    const [maxHeight, setMaxHeight] = useState<number | undefined>(undefined);
+    useLayoutEffect(() => {
+        const measured = getMaxElementHeight(containerRef.current?.ownerDocument);
+        setMaxHeight(prev => (prev === measured ? prev : measured));
+    }, [containerRef]);
+    return maxHeight;
+}

package/lib/hooks/core/useGridToolbarProps.ts

@@ -46,6 +46,14 @@ export interface UseGridToolbarPropsParams<R extends GridRowModel> {
     /** `useGridColumnsPanel().toolbarPanelRequested`. */
     forceColumnsOpen: boolean;
     onColumnsPanelClose: () => void;
+    /** `aiAssistant` is set: the toolbar shows the Ask AI button. */
+    aiAssistantEnabled?: boolean;
+    aiAssistantOpen?: boolean;
+    onAiAssistantToggle?: (trigger: HTMLElement | null) => void;
+    aiAssistantLabel?: string;
+    /** `useGridColumnsPanel().toolbarFiltersRequested`. */
+    forceFiltersOpen: boolean;
+    onFiltersPanelClose: () => void;
 }
 
 /** The props the grid passes to `slots.toolbar`, or null when there is no toolbar slot. */
@@ -57,6 +65,8 @@ export function useGridToolbarProps<R extends GridRowModel>(
         pivotMode, pivotModelProp, onPivotModelChangeProp, pivotModel, onPivotModelChange, filterModel,
         onFilterModelChange, columnVisibilityModel, onColumnVisibilityModelChange, disableColumnReorder,
         columnGroupingModel, moveColumn, resetColumnOrder, forceColumnsOpen, onColumnsPanelClose,
+        aiAssistantEnabled = false, aiAssistantOpen = false, onAiAssistantToggle, aiAssistantLabel,
+        forceFiltersOpen, onFiltersPanelClose,
     } = params;
 
     return useMemo(() => {
@@ -85,6 +95,13 @@ export function useGridToolbarProps<R extends GridRowModel>(
             onColumnOrderReset: disableColumnReorder ? undefined : resetColumnOrder,
             forceColumnsOpen,
             onColumnsPanelClose,
+            ...(aiAssistantEnabled && onAiAssistantToggle ? {
+                onAiAssistantToggle,
+                aiAssistantOpen,
+                ...(aiAssistantLabel ? { aiAssistantLabel } : {}),
+            } : {}),
+            forceFiltersOpen,
+            onFiltersPanelClose,
             ...toolbarSlotProps,
         };
     }, [
@@ -93,5 +110,7 @@ export function useGridToolbarProps<R extends GridRowModel>(
         pivotModelProp, onPivotModelChangeProp, pivotModel, onPivotModelChange,
         filterModel, onFilterModelChange, columnVisibilityModel,
         onColumnVisibilityModelChange, forceColumnsOpen, onColumnsPanelClose, toolbarSlotProps, columnGroupingModel,
+        aiAssistantEnabled, aiAssistantOpen, onAiAssistantToggle, aiAssistantLabel,
+        forceFiltersOpen, onFiltersPanelClose,
     ]);
 }

package/lib/hooks/core/useGridVirtualization.ts

@@ -16,6 +16,11 @@ export interface UseGridVirtualizationParams<R extends GridRowModel> {
     pinExpandColumn: boolean;
     /** Adaptive overscan row count from useGridScrollSync. Defaults to 5. */
     overscanRows?: number;
+    /**
+     * The tallest element the browser lays out (`getMaxElementHeight`); the scrollable content is capped to
+     * it. Defaults to no cap.
+     */
+    maxContentHeight?: number;
 }
 
 export interface GridVirtualizationResult<R extends GridRowModel = GridRowModel> {
@@ -28,6 +33,11 @@ export interface GridVirtualizationResult<R extends GridRowModel = GridRowModel>
     offsetTop: number;
     offsetLeft: number;
     totalHeight: number;
+    /**
+     * Height of the unpinned rows' container: their full height, capped so the whole content stays under
+     * `maxContentHeight`. Rows below the cap cannot be scrolled to (the dev warning names how many can).
+     */
+    virtualContainerHeight: number;
     pinnedTopHeight: number;
     pinnedBottomHeight: number;
     totalWidth: number;
@@ -60,6 +70,7 @@ export function useGridVirtualization<R extends GridRowModel>(
         pinCheckboxColumn,
         pinExpandColumn,
         overscanRows = 5,
+        maxContentHeight = Infinity,
     } = params;
 
     return useMemo<GridVirtualizationResult<R>>(() => {
@@ -122,6 +133,12 @@ export function useGridVirtualization<R extends GridRowModel>(
         const hasHorizontalScroll = viewportWidth > 0 && totalWidth > viewportWidth;
         const scrollbarBuffer = hasHorizontalScroll ? 16 : 0;
         const totalHeight = pinnedTopHeight + unpinnedRowsHeight + pinnedBottomHeight + scrollbarBuffer + 2;
+        // Firefox collapses an element taller than its cap (about 17.9M px) instead of clamping it, which
+        // made a large grid unscrollable there; keep the rows' container under the browser's cap.
+        const fullContainerHeight = totalHeight - pinnedTopHeight - pinnedBottomHeight;
+        const virtualContainerHeight = Number.isFinite(maxContentHeight)
+            ? Math.max(0, Math.min(fullContainerHeight, maxContentHeight - pinnedTopHeight - pinnedBottomHeight))
+            : fullContainerHeight;
 
         let firstRowIndex = 0;
         let lastRowIndex  = unpinnedRowsLength - 1;
@@ -157,6 +174,7 @@ export function useGridVirtualization<R extends GridRowModel>(
             offsetTop,
             offsetLeft: 0,
             totalHeight,
+            virtualContainerHeight,
             pinnedTopHeight,
             pinnedBottomHeight,
             totalWidth,
@@ -185,5 +203,6 @@ export function useGridVirtualization<R extends GridRowModel>(
         pinCheckboxColumn,
         pinExpandColumn,
         overscanRows,
+        maxContentHeight,
     ]);
 }

package/lib/hooks/features/useGridAiAssistant.ts

@@ -0,0 +1,284 @@
+import { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react';
+import type { MutableRefObject } from 'react';
+import type {
+    GridAiAssistantOptions,
+    GridAiAssistantPanelProps,
+    GridAiAssistantStatus,
+    GridAiHistoryEntry,
+    GridAiPromptResult,
+    GridAiState,
+    GridAiValidationError,
+    GridApi,
+    GridColDef,
+} from '../../types';
+import { attempt } from '../../utils/attempt';
+import { isGridAiValidated } from '../../utils/aiBrand';
+import {
+    AI_PARTS,
+    applyGridAiState,
+    buildAiChips,
+    dropEmptiedParts,
+    effectiveState,
+    pickAllowedParts,
+    removeAiChip,
+    snapshotParts,
+} from '../../utils/aiAssistant';
+
+export interface UseGridAiAssistantParams {
+    apiRef: MutableRefObject<GridApi>;
+    /** The `aiAssistant` prop. Without it the hook is inert. */
+    options: GridAiAssistantOptions | undefined;
+    /** Columns, for the chip labels (header names). */
+    columns: readonly GridColDef[];
+    onApply?: (result: GridAiPromptResult) => void;
+    onError?: (error: unknown) => void;
+}
+
+export interface UseGridAiAssistantResult {
+    enabled: boolean;
+    open: boolean;
+    /** Opens the panel; focus returns to `trigger` (default: the focused element) when it closes. */
+    openPanel: (trigger?: HTMLElement | null) => void;
+    /** Opens the panel, or closes it when it is open. */
+    togglePanel: (trigger?: HTMLElement | null) => void;
+    closePanel: () => void;
+    /** Props of the panel while it is open, else null. */
+    panelProps: GridAiAssistantPanelProps | null;
+    /** The status line for the grid's live region. */
+    announcement: string;
+}
+
+const DEFAULT_PLACEHOLDER = 'Ask about this table…';
+const NO_SUGGESTIONS: string[] = [];
+const NO_ERRORS: GridAiValidationError[] = [];
+const NOT_VALIDATED = 'The reply was not validated';
+
+interface Applied {
+    /** The reply's parts the grid applied (chips are built from it). */
+    state: GridAiState;
+    /** The same parts as they were before: what Undo restores. */
+    previous: GridAiState;
+}
+
+/** Whether this browser has speech recognition. The microphone is never asked for here. */
+export function hasSpeechRecognition(): boolean {
+    return typeof window !== 'undefined' && ('SpeechRecognition' in window || 'webkitSpeechRecognition' in window);
+}
+
+function isAbortError(error: unknown): boolean {
+    return typeof error === 'object' && error !== null && (error as { name?: unknown }).name === 'AbortError';
+}
+
+function errorText(error: unknown): string {
+    return error instanceof Error && error.message ? error.message : 'Unknown error';
+}
+
+function changesText(count: number, ignored: number): string {
+    const applied = count === 0 ? 'No changes' : `Applied ${count} ${count === 1 ? 'change' : 'changes'}`;
+    return ignored > 0 ? `${applied}, ${ignored} ignored` : applied;
+}
+
+/** Calls a consumer callback; a throw is warned about (development) and otherwise ignored. */
+function notify<T>(callback: ((value: T) => void) | undefined, value: T, name: string): void {
+    if (!callback) return;
+    const result = attempt(() => callback(value));
+    if (!result.ok && process.env.NODE_ENV !== 'production') console.warn(`[OpenGridX] ${name} threw.`, result.error);
+}
+
+/**
+ * The `aiAssistant` prompt panel: open state, the request (with Stop), applying a validated reply as
+ * one undoable step, chips, Undo, the session's prompts and the status line. Results are applied only
+ * when their `state` carries the brand of `validateGridAiState`. Installs `apiRef.openAiAssistant` /
+ * `closeAiAssistant`.
+ */
+export function useGridAiAssistant(params: UseGridAiAssistantParams): UseGridAiAssistantResult {
+    const { apiRef, options, columns } = params;
+    const enabled = Boolean(options);
+    const [open, setOpen] = useState(false);
+    const [status, setStatus] = useState<GridAiAssistantStatus>('idle');
+    const [statusText, setStatusText] = useState('');
+    const [message, setMessage] = useState<string | null>(null);
+    const [errors, setErrors] = useState<GridAiValidationError[]>(NO_ERRORS);
+    const [applied, setApplied] = useState<Applied | null>(null);
+    const [history, setHistory] = useState<GridAiHistoryEntry[]>([]);
+
+    const controllerRef = useRef<AbortController | null>(null);
+    const returnFocusRef = useRef<HTMLElement | null>(null);
+    const latestRef = useRef({ params, applied, history, open });
+    useLayoutEffect(() => {
+        latestRef.current = { params, applied, history, open };
+    });
+
+    const labelOf = useMemo(() => {
+        const byField = new Map(columns.map((col) => [col.field, col.headerName || col.field]));
+        return (field: string) => byField.get(field) ?? field;
+    }, [columns]);
+    const chips = useMemo(() => (applied ? buildAiChips(applied.state, labelOf) : []), [applied, labelOf]);
+
+    const abortRequest = useCallback(() => {
+        const controller = controllerRef.current;
+        controllerRef.current = null;
+        if (controller) controller.abort();
+    }, []);
+
+    // Abort a running request when the grid unmounts.
+    useEffect(() => abortRequest, [abortRequest]);
+
+    const openPanel = useCallback((trigger?: HTMLElement | null) => {
+        if (!latestRef.current.params.options) return;
+        const active = typeof document === 'undefined' ? null : document.activeElement;
+        returnFocusRef.current = trigger ?? (active instanceof HTMLElement ? active : null);
+        setOpen(true);
+    }, []);
+
+    const closePanel = useCallback(() => {
+        if (controllerRef.current) {
+            abortRequest();
+            setStatus('stopped');
+            setStatusText('Stopped');
+        }
+        setOpen(false);
+        const target = returnFocusRef.current;
+        returnFocusRef.current = null;
+        if (target && target.isConnected) target.focus();
+    }, [abortRequest]);
+
+    const togglePanel = useCallback((trigger?: HTMLElement | null) => {
+        if (latestRef.current.open) closePanel();
+        else openPanel(trigger);
+    }, [openPanel, closePanel]);
+
+    const fail = useCallback((text: string, error: unknown) => {
+        setStatus('error');
+        setStatusText(text);
+        setMessage(null);
+        setErrors(NO_ERRORS);
+        notify(latestRef.current.params.onError, error, 'onAiAssistantError');
+    }, []);
+
+    const applyResult = useCallback((prompt: string, result: GridAiPromptResult) => {
+        const { params: current } = latestRef.current;
+        const isObject = typeof result === 'object' && result !== null;
+        if (!isObject || !isGridAiValidated(result.state)) {
+            if (process.env.NODE_ENV !== 'production') {
+                console.warn('[OpenGridX] aiAssistant: the onPrompt result was not applied because its state was not validated. Return the result of createGridAiPromptHandler, or pass the model reply through validateGridAiState (from @opencorestack/opengridx/ai) and return its state.');
+            }
+            fail(NOT_VALIDATED, new Error(NOT_VALIDATED));
+            return;
+        }
+        const allowed = pickAllowedParts(result.state, current.options?.parts ?? AI_PARTS);
+        const ignored = [...(Array.isArray(result.errors) ? result.errors : []), ...allowed.errors];
+        const state = dropEmptiedParts(allowed.state, ignored);
+        const api = apiRef.current;
+        const previous = snapshotParts(state, api.getGridAiState());
+        applyGridAiState(api, effectiveState(state, previous));
+        setApplied({ state, previous });
+        setErrors(ignored);
+        setMessage(typeof result.message === 'string' && result.message ? result.message : null);
+        setHistory((list) => [...list, { prompt, applied: state }]);
+        setStatus('applied');
+        setStatusText(changesText(buildAiChips(state, (f) => f).length, ignored.length));
+        notify(current.onApply, result, 'onAiAssistantApply');
+    }, [apiRef, fail]);
+
+    const submit = useCallback((text: string) => {
+        const prompt = text.trim();
+        const { params: current, history: earlier } = latestRef.current;
+        const onPrompt = current.options?.onPrompt;
+        if (!prompt || !onPrompt) return;
+        abortRequest();
+        const controller = new AbortController();
+        controllerRef.current = controller;
+        setStatus('running');
+        setStatusText('Thinking…');
+        setMessage(null);
+        setErrors(NO_ERRORS);
+        const context = { currentState: apiRef.current.getGridAiState(), history: earlier, signal: controller.signal };
+        const call = attempt(() => onPrompt(prompt, context));
+        const pending = call.ok ? Promise.resolve(call.value) : Promise.reject(call.error);
+        pending.then(
+            (result) => {
+                if (controllerRef.current !== controller) return;
+                controllerRef.current = null;
+                applyResult(prompt, result);
+            },
+            (error: unknown) => {
+                if (controllerRef.current !== controller) return;
+                controllerRef.current = null;
+                if (controller.signal.aborted || isAbortError(error)) {
+                    setStatus('stopped');
+                    setStatusText('Stopped');
+                    return;
+                }
+                fail(`The assistant could not answer: ${errorText(error)}`, error);
+            },
+        );
+    }, [apiRef, abortRequest, applyResult, fail]);
+
+    const stop = useCallback(() => {
+        if (!controllerRef.current) return;
+        abortRequest();
+        setStatus('stopped');
+        setStatusText('Stopped');
+    }, [abortRequest]);
+
+    const undo = useCallback(() => {
+        const last = latestRef.current.applied;
+        if (!last) return;
+        applyGridAiState(apiRef.current, last.previous);
+        setApplied(null);
+        setErrors(NO_ERRORS);
+        setMessage(null);
+        setStatus('idle');
+        setStatusText('Undone');
+    }, [apiRef]);
+
+    const removeChip = useCallback((id: string) => {
+        const last = latestRef.current.applied;
+        if (!last) return;
+        const state = removeAiChip(last.state, id);
+        applyGridAiState(apiRef.current, effectiveState(state, last.previous));
+        setApplied({ state, previous: last.previous });
+        setStatusText('Change removed');
+    }, [apiRef]);
+
+    useLayoutEffect(() => {
+        const api = apiRef.current;
+        api.openAiAssistant = () => openPanel();
+        api.closeAiAssistant = () => {
+            if (latestRef.current.open) closePanel();
+        };
+    }, [apiRef, openPanel, closePanel]);
+
+    const isOpen = enabled && open;
+    const panelProps = useMemo<GridAiAssistantPanelProps | null>(() => {
+        if (!isOpen || !options) return null;
+        return {
+            status,
+            statusText,
+            message,
+            errors,
+            chips,
+            history,
+            suggestions: options.suggestions ?? NO_SUGGESTIONS,
+            placeholder: options.placeholder ?? DEFAULT_PLACEHOLDER,
+            voiceAvailable: options.voice !== false && hasSpeechRecognition(),
+            canUndo: applied !== null,
+            submit,
+            stop,
+            undo,
+            removeChip,
+            close: closePanel,
+        };
+    }, [isOpen, options, status, statusText, message, errors, chips, history, applied, submit, stop, undo, removeChip, closePanel]);
+
+    return {
+        enabled,
+        open: isOpen,
+        openPanel,
+        togglePanel,
+        closePanel,
+        panelProps,
+        announcement: enabled ? statusText : '',
+    };
+}

package/lib/hooks/features/useGridBatchEdit.ts

@@ -11,8 +11,8 @@ import {
 } from '../../utils/editing/commit';
 import type { GridCellChange } from '../../utils/editing/commit';
 
-/** What made a commit: history records `edit`, `paste` and `clear`; `undo` / `redo` replay it. */
-export type GridEditSource = 'edit' | 'paste' | 'clear' | 'undo' | 'redo';
+/** What made a commit: history records `edit`, `paste`, `clear` and `fill`; `undo` / `redo` replay it. */
+export type GridEditSource = 'edit' | 'paste' | 'clear' | 'fill' | 'undo' | 'redo';
 
 /** One cell to write in a batch edit. */
 export interface GridBatchCellEdit {

package/lib/index.ts

@@ -112,6 +112,9 @@ export type {
     GridEditSkipReason,
     GridBatchEditResult,
     GridClipboardPasteResult,
+    GridFillDirection,
+    GridFillResult,
+    GridFillValueParams,
     GridBeforeClipboardPasteParams,
     GridHistoryChangeParams,
     GridUndoRedoOptions,

package/lib/styles/opengridx.css

@@ -4,6 +4,7 @@
 @import '../components/ui/Input.css';
 @import '../components/DataGrid/DataGrid.css';
 @import '../components/Header/Header.css';
+@import '../components/HeaderFilter/HeaderFilter.css';
 @import '../components/Row/Row.css';
 @import '../components/Cell/Cell.css';
 @import '../components/Cell/GridEditInputCell.css';
@@ -27,3 +28,4 @@
 @import '../components/ColumnGroupHeader/ColumnGroupHeader.css';
 @import '../components/Tooltip/Tooltip.css';
 @import '../components/CellSelectionStats/CellSelectionStats.css';
+@import '../components/AiAssistant/GridAiAssistantPanel.css';

package/lib/theme/DataGridThemeProvider.tsx

@@ -11,6 +11,7 @@ const primaryDerived: Record<string, string> = {
     '--ogx-grid-cell-focus-border': 'var(--ogx-color-primary)',
     '--ogx-range-background': 'color-mix(in srgb, var(--ogx-color-primary) 12%, transparent)',
     '--ogx-range-border': 'var(--ogx-color-primary)',
+    '--ogx-fill-handle-color': 'var(--ogx-range-border)',
     '--ogx-toolbar-btn-primary-bg': 'var(--ogx-color-primary)',
     '--ogx-toolbar-btn-primary-hover': 'var(--ogx-color-primary-dark)',
     '--ogx-toolbar-input-focus-border': 'var(--ogx-color-primary)',
@@ -285,6 +286,7 @@ function themeToCSS(theme: GridTheme): Record<string, string> {
         set('--ogx-grid-cell-focus-border', g.cellFocusBorder);
         set('--ogx-range-background', g.rangeBackground);
         set('--ogx-range-border', g.rangeBorder);
+        set('--ogx-fill-handle-color', g.fillHandleColor);
         set('--ogx-grid-pinned-left-shadow', g.pinnedLeftShadow);
         set('--ogx-grid-pinned-right-shadow', g.pinnedRightShadow);
         set('--ogx-checkbox-bg', g.checkboxBg);

package/lib/theme/types.ts

@@ -163,6 +163,8 @@ export interface GridThemeGrid {
     rangeBackground?: string;
     /** Outline of a selected cell range (`--ogx-range-border`). Default: the primary colour. @since v3.3 */
     rangeBorder?: string;
+    /** The fill handle on the range's corner (`--ogx-fill-handle-color`). Default: the range border colour. @since v3.5 */
+    fillHandleColor?: string;
     pinnedLeftShadow?: string;
   pinnedRightShadow?: string;
     checkboxBg?: string;