@opencorestack/opengridx 3.2.2 → 3.4.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

@@ -474,9 +474,11 @@ function FilterPanelWrapper({
 }
 
 const EMPTY_PIVOT: GridPivotModel = { rowFields: [], columnFields: [], valueFields: [] };
+// Module-level default, so `columns` is the same frozen value on every render (React Compiler).
+const NO_COLUMNS: GridColDef[] = [];
 
 export function GridToolbar({
-    columns = [],
+    columns = NO_COLUMNS,
     baseColumns,
     aggregationModel = {},
     onAggregationModelChange,
@@ -504,7 +506,7 @@ export function GridToolbar({
     // At most one panel is open. Every way the Columns panel closes (its button, a custom
     // button, another panel opening, click-outside, Escape) reports onColumnsPanelClose, so the
     // grid can ask for it again with forceColumnsOpen.
-    const [openPanel, setOpenPanel] = useState<ToolbarPanel | null>(null);
+    const [openPanel, setOpenPanel] = useState<ToolbarPanel | null>(forceColumnsOpen ? 'columns' : null);
     const aggOpen = openPanel === 'summaries';
     const pivotOpen = openPanel === 'pivot';
     const colsOpen = openPanel === 'columns';
@@ -517,9 +519,13 @@ export function GridToolbar({
     const togglePanel = (panel: ToolbarPanel) => switchPanel(openPanel === panel ? null : panel);
     const closePanel = (panel: ToolbarPanel) => { if (openPanel === panel) switchPanel(null); };
 
-    useEffect(() => {
+    // forceColumnsOpen turning true opens the Columns panel. Adjusted during render (not in an
+    // effect) so the panel opens in the same commit.
+    const [seenForceColumnsOpen, setSeenForceColumnsOpen] = useState(forceColumnsOpen);
+    if (seenForceColumnsOpen !== forceColumnsOpen) {
+        setSeenForceColumnsOpen(forceColumnsOpen);
         if (forceColumnsOpen) setOpenPanel('columns');
-    }, [forceColumnsOpen]);
+    }
 
     // Tell the grid this toolbar shows the Columns panel for the column menu; it can only do so
     // when the grid's forceColumnsOpen reaches it and the Columns panel is enabled.

package/lib/components/ui/Checkbox.tsx

@@ -4,28 +4,42 @@ 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;
 }
 
-export const Checkbox: React.FC<CheckboxProps> = ({
+/** Points a callback or object ref at `element`. Outside the component, so it does not mutate a prop in render scope. */
+function assignRef(ref: React.Ref<HTMLInputElement> | undefined, element: HTMLInputElement | null): void {
+    if (typeof ref === 'function') {
+        ref(element);
+    } else if (ref) {
+        (ref as React.MutableRefObject<HTMLInputElement | null>).current = element;
+    }
+}
+
+/**
+ * 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
     const setRef = React.useCallback((element: HTMLInputElement | null) => {
         internalRef.current = element;
 
-        if (typeof inputRef === 'function') {
-            inputRef(element);
-        } else if (inputRef) {
-            (inputRef as React.MutableRefObject<HTMLInputElement | null>).current = element;
-        }
-    }, [inputRef]);
+        assignRef(inputRef, element);
+        assignRef(forwardedRef, element);
+    }, [inputRef, forwardedRef]);
 
     React.useEffect(() => {
         if (internalRef.current) {
@@ -46,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">
@@ -64,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
@@ -32,5 +33,17 @@ export function createGridApiPlaceholder<R extends GridValidRowModel = GridRowMo
         autosizeColumn: noop,
         autosizeColumns: noop,
         copySelectedRows: () => Promise.resolve(),
+        getCellSelectionModel: () => [],
+        setCellSelectionModel: noop,
+        selectCellRange: noop,
+        clearCellSelection: noop,
+        getSelectedCells: () => [],
+        copySelectedCells: () => Promise.resolve(),
+        pasteText: emptyEditResult,
+        undo: emptyEditResult,
+        redo: emptyEditResult,
+        canUndo: () => false,
+        canRedo: () => false,
+        clearHistory: noop,
     };
 }

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,