@opencorestack/opengridx 3.3.0 → 3.5.0

package/lib/components/Toolbar/GlobalSearch.css

@@ -74,6 +74,7 @@
     font-family: var(--ogx-font-family, system-ui, sans-serif);
     font-size: var(--ogx-font-size-sm, 13px);
     color: var(--ogx-toolbar-input-text, var(--ogx-grid-row-text, #1e293b));
+    line-height: revert;
     outline: none;
     opacity: 0;
     pointer-events: none;
@@ -88,6 +89,21 @@
     font-size: var(--ogx-font-size-sm, 13px);
 }
 
+/* The input renders through the shared Input: its wrapper is the flex item and the container
+   draws the box, so the wrapper has none of its own. */
+.ogx-global-search .ogx-input-wrapper {
+    flex: 1 1 auto;
+    min-width: 0;
+    height: 100%;
+    border: none;
+    border-radius: 0;
+    background: transparent;
+    transition: none;
+}
+.ogx-global-search .ogx-input-wrapper:focus-within {
+    box-shadow: none;
+}
+
 /* ─── Clear button ────────────────────────────────────────────────────────── */
 .ogx-global-search__clear {
     position: absolute;

package/lib/components/Toolbar/GlobalSearch.tsx

@@ -1,4 +1,5 @@
 import React, { useState, useEffect, useRef, useCallback, useLayoutEffect } from 'react';
+import { Input } from '../ui/Input';
 
 
 interface GlobalSearchProps {
@@ -143,9 +144,9 @@ export function GlobalSearch({ value = '', onChange, placeholder = 'Search...',
             <div className="ogx-global-search__icon-wrapper">
                 <SearchIcon />
             </div>
-            <input
+            <Input
                 ref={inputRef}
-                className="ogx-global-search__input"
+                inputClassName="ogx-global-search__input"
                 value={localValue}
                 onChange={(e) => setLocalValue(e.target.value)}
                 onFocus={handleFocus}

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/components/ui/Checkbox.tsx

@@ -4,7 +4,10 @@ import React from 'react';
 export interface CheckboxProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'type'> {
     indeterminate?: boolean;
     label?: string;
+    /** A ref to the `<input>`; the forwarded `ref` reaches it as well. */
     inputRef?: React.Ref<HTMLInputElement>;
+    /** Classes added to the `<input>` itself, next to `ogx-checkbox__input`. `className` goes to the wrapper `<label>`. */
+    inputClassName?: string;
 }
 
 /** Points a callback or object ref at `element`. Outside the component, so it does not mutate a prop in render scope. */
@@ -16,13 +19,18 @@ function assignRef(ref: React.Ref<HTMLInputElement> | undefined, element: HTMLIn
     }
 }
 
-export const Checkbox: React.FC<CheckboxProps> = ({
+/**
+ * A styled checkbox: a visually hidden `<input type="checkbox">` inside a `<label>`. Other props
+ * (`onChange`, `onMouseDown`, `tabIndex`, `aria-*`, …) go to the `<input>`, and so does `ref`.
+ */
+export const Checkbox = React.forwardRef<HTMLInputElement, CheckboxProps>(function Checkbox({
     indeterminate = false,
     label,
     className = '',
+    inputClassName = '',
     inputRef,
     ...props
-}) => {
+}, forwardedRef) {
     const internalRef = React.useRef<HTMLInputElement>(null);
 
     // Combine refs
@@ -30,7 +38,8 @@ export const Checkbox: React.FC<CheckboxProps> = ({
         internalRef.current = element;
 
         assignRef(inputRef, element);
-    }, [inputRef]);
+        assignRef(forwardedRef, element);
+    }, [inputRef, forwardedRef]);
 
     React.useEffect(() => {
         if (internalRef.current) {
@@ -51,7 +60,7 @@ export const Checkbox: React.FC<CheckboxProps> = ({
             <input
                 ref={setRef}
                 type="checkbox"
-                className="ogx-checkbox__input"
+                className={['ogx-checkbox__input', inputClassName].filter(Boolean).join(' ')}
                 {...props}
             />
             <span className="ogx-checkbox__box">
@@ -69,4 +78,6 @@ export const Checkbox: React.FC<CheckboxProps> = ({
             {label && <span className="ogx-checkbox__label">{label}</span>}
         </label>
     );
-};
+});
+
+Checkbox.displayName = 'Checkbox';

package/lib/components/ui/Input.css

@@ -57,3 +57,46 @@
 .ogx-input-wrapper--disabled .ogx-input {
   cursor: not-allowed;
 }
+
+/* ── Cell variant: an editor that fills a grid cell ───────────────────── */
+.ogx-input-wrapper--cell {
+  /* Not positioned: the editing cell's focus outline must stay painted over the editor. */
+  position: static;
+  display: flex;
+  width: 100%;
+  height: 100%;
+  border: none;
+  border-radius: 0;
+  background: transparent;
+  box-shadow: none;
+  transition: none;
+}
+.ogx-input-wrapper--cell:hover:not(.ogx-input-wrapper--disabled),
+.ogx-input-wrapper--cell:focus-within:not(.ogx-input-wrapper--disabled) {
+  box-shadow: none;
+}
+.ogx-input-wrapper--cell .ogx-input {
+  width: 100%;
+  min-width: 0;
+  height: 100%;
+  padding: 0 10px;
+  font-family: inherit;
+  font-size: inherit;
+  line-height: normal;
+  color: inherit;
+}
+.ogx-input-wrapper--cell .ogx-input__adornment--start {
+  padding-left: 10px;
+}
+.ogx-input-wrapper--cell .ogx-input__adornment--start + .ogx-input {
+  padding-left: 4px;
+}
+.ogx-input-wrapper--cell .ogx-input__adornment--end {
+  padding-right: 10px;
+}
+.ogx-input-wrapper--cell.ogx-input-wrapper--error,
+.ogx-input-wrapper--cell.ogx-input-wrapper--error:focus-within:not(.ogx-input-wrapper--disabled) {
+  /* Positioned, so the error edge is painted over the cell's focus outline. */
+  position: relative;
+  box-shadow: inset 0 0 0 2px var(--ogx-color-error);
+}

package/lib/components/ui/Input.tsx

@@ -1,4 +1,3 @@
-
 import React from 'react';
 
 export interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {
@@ -6,24 +5,40 @@ export interface InputProps extends React.InputHTMLAttributes<HTMLInputElement>
     error?: boolean;
     startAdornment?: React.ReactNode;
     endAdornment?: React.ReactNode;
+    /** Classes added to the `<input>` itself, next to `ogx-input`. `className` goes to the wrapper. */
+    inputClassName?: string;
+    /**
+     * `'field'` (default): a bordered form field. `'cell'`: fills a grid cell with no border,
+     * background or focus ring, in the cell's font, for use in `renderEditCell`.
+     */
+    variant?: 'field' | 'cell';
 }
 
-export const Input: React.FC<InputProps> = ({
+/**
+ * A text field: an `<input>` inside an `.ogx-input-wrapper` that holds the adornments.
+ * `ref` reaches the `<input>` (React 18 and 19).
+ */
+export const Input = React.forwardRef<HTMLInputElement, InputProps>(function Input({
     fullWidth = false,
     error = false,
     startAdornment,
     endAdornment,
     className = '',
+    inputClassName = '',
+    variant = 'field',
     ...props
-}) => {
+}, ref) {
     const wrapperClassNames = [
         'ogx-input-wrapper',
+        variant === 'cell' && 'ogx-input-wrapper--cell',
         fullWidth && 'ogx-input-wrapper--full-width',
         error && 'ogx-input-wrapper--error',
         props.disabled && 'ogx-input-wrapper--disabled',
         className
     ].filter(Boolean).join(' ');
 
+    const inputClassNames = ['ogx-input', inputClassName].filter(Boolean).join(' ');
+
     return (
         <div className={wrapperClassNames}>
             {startAdornment && (
@@ -32,7 +47,9 @@ export const Input: React.FC<InputProps> = ({
                 </div>
             )}
             <input
-                className="ogx-input"
+                ref={ref}
+                className={inputClassNames}
+                aria-invalid={error ? true : undefined}
                 {...props}
             />
             {endAdornment && (
@@ -42,4 +59,6 @@ export const Input: React.FC<InputProps> = ({
             )}
         </div>
     );
-};
+});
+
+Input.displayName = 'Input';

package/lib/hooks/core/gridApiPlaceholder.ts

@@ -1,6 +1,7 @@
-import type { GridApi, GridRowModel, GridValidRowModel } from '../../types';
+import type { GridApi, GridBatchEditResult, GridRowModel, GridValidRowModel } from '../../types';
 
 const noop = () => {};
+const emptyEditResult = (): Promise<GridBatchEditResult> => Promise.resolve({ updated: [], failed: [], skipped: [] });
 
 /**
  * A complete GridApi whose methods are safe no-ops. `useGridApiRef()` starts with one so
@@ -38,5 +39,19 @@ export function createGridApiPlaceholder<R extends GridValidRowModel = GridRowMo
         clearCellSelection: noop,
         getSelectedCells: () => [],
         copySelectedCells: () => Promise.resolve(),
+        pasteText: emptyEditResult,
+        undo: emptyEditResult,
+        redo: emptyEditResult,
+        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/useDataGrid.ts

@@ -18,6 +18,7 @@ type GetRowId = (row: GridRowModel) => GridRowId;
 type GridAction =
   | { type: 'SET_ROWS'; payload: GridRowModel[] | ((prev: GridRowModel[]) => GridRowModel[]); getRowId: GetRowId }
   | { type: 'REPLACE_ROW'; id: GridRowId; row: GridRowModel }
+  | { type: 'REPLACE_ROWS'; rows: ReadonlyMap<GridRowId, GridRowModel> }
   | { type: 'SET_COLUMNS'; payload: GridColDef[] }
   | { type: 'SET_DIMENSIONS'; payload: { viewportWidth: number; viewportHeight: number } }
   | { type: 'SET_DATASOURCE_LOADING'; payload: boolean }
@@ -134,6 +135,26 @@ function gridReducer(state: GridState, action: GridAction): GridState {
       };
     }
 
+    case 'REPLACE_ROWS': {
+      // A batch edit (paste, range clear, undo, redo): every stored row in one update.
+      let changed = false;
+      const idRowsLookup = new Map(state.rows.idRowsLookup);
+      const idByRow = new Map(state.rows.idByRow);
+      for (const [id, row] of action.rows) {
+        const previous = idRowsLookup.get(id);
+        if (previous === undefined) continue;
+        changed = true;
+        idRowsLookup.set(id, row);
+        idByRow.delete(previous);
+        idByRow.set(row, id);
+      }
+      if (!changed) return state;
+      return {
+        ...state,
+        rows: { ...state.rows, idRowsLookup, idByRow },
+      };
+    }
+
     case 'SET_COLUMNS': {
       const columnLookup = new Map<string, GridColDef>();
       const orderedFields: string[] = [];
@@ -270,6 +291,11 @@ export function useDataGrid<R extends GridRowModel = GridRowModel>(params: UseDa
     dispatch({ type: 'REPLACE_ROW', id, row });
   }, []);
 
+  /** Replaces several stored rows in one update (a batch edit); ids no longer stored are ignored. */
+  const replaceRows = useCallback((rowsById: ReadonlyMap<GridRowId, GridRowModel>) => {
+    if (rowsById.size > 0) dispatch({ type: 'REPLACE_ROWS', rows: rowsById });
+  }, []);
+
   const setColumns = useCallback((newColumns: GridColDef[]) => {
     dispatch({ type: 'SET_COLUMNS', payload: newColumns });
   }, []);
@@ -307,6 +333,7 @@ export function useDataGrid<R extends GridRowModel = GridRowModel>(params: UseDa
     apiRef,
     setRows,
     replaceRow,
+    replaceRows,
     setColumns,
     setDimensions,
     setDataSourceLoading,

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]);
 }