@opencorestack/opengridx 2.0.4 → 3.0.0

package/lib/components/Row/Row.tsx

@@ -7,16 +7,51 @@ import { DragHandleIcon } from '../ui/DragHandleIcon';
 import { DetailPanel } from '../DetailPanel/DetailPanel';
 import type { GridRowModel, GridColDef, GridRowId, GridColumnPinning, GridRowPinning, GridRowParams, GridCellParams, GridDetailPanelHeight, GridRowMeta } from '../../types';
 import type { CellColSpanInfo, RowSpanningCaches } from '../../hooks/features/useGridSpanning';
-import { isColumnPinned, calculatePinnedPositions, isRowPinned } from '../../utils/pinning';
-
+import { isColumnPinned, calculatePinnedPositions, getPinnedEdgeFields, isRowPinned } from '../../utils/pinning';
+import { resolveCellEditable } from '../../utils/editing';
+import { tryGetCellValue } from '../../utils/values';
+import { isSyntheticRowId } from '../../utils/syntheticRows';
+import { getRenderedColumnWidth } from '../../utils/columnWidth';
+import { DEFAULT_DETAIL_PANEL_HEIGHT } from '../../utils/detailPanel';
+
+/** Sticky system cells (drag handle, detail toggle, checkbox) sit above scrolled, spanned and focused cells. */
+const SYSTEM_CELL_Z_INDEX = 12;
+
+
+/**
+ * Builds the Cell span info for a colSpan origin: the merged width and flex-grow are the sums over
+ * the columns it covers, taken from the rendered (layout-resolved) columns. The span never crosses a
+ * spacer, so a span cut by the column window only covers what is rendered.
+ */
+function mergeColSpan<R extends GridRowModel>(
+    columns: GridColDef<R>[],
+    originIndex: number,
+    colSpan: number,
+    columnWidths: Record<string, number>,
+): CellColSpanInfo {
+    let width = 0;
+    let flexGrow = 0;
+    let covered = 0;
+    for (let i = originIndex; i < columns.length && covered < colSpan; i++) {
+        const col = columns[i];
+        if (col.isSpacer) break;
+        width += getRenderedColumnWidth(col, columnWidths);
+        flexGrow += col.flex ?? 0;
+        covered++;
+    }
+    return { spannedByColSpan: false, cellProps: { colSpan: covered, width, flexGrow } };
+}
 
 export interface RowProps<R extends GridRowModel = GridRowModel> {
     row: R;
+    /** The row's id (from getRowId). Defaults to `row.id`; the grid always passes it. */
+    rowId?: GridRowId;
     columns: GridColDef<R>[];
     rowIndex: number;
     isSelected?: boolean;
     checkboxSelection?: boolean;
     onRowClick?: (params: GridRowParams<R>) => void;
+    onRowDoubleClick?: (params: GridRowParams<R>) => void;
     onCellClick?: (params: GridCellParams<R>) => void;
     onSelectionChange?: (rowId: GridRowId, isSelected: boolean) => void;
     columnWidths?: Record<string, number>;
@@ -28,6 +63,8 @@ export interface RowProps<R extends GridRowModel = GridRowModel> {
     onDetailPanelToggle?: (rowId: GridRowId) => void;
     detailPanelContent?: React.ReactNode;
     detailPanelHeight?: GridDetailPanelHeight;
+    /** Called with the rendered height of an `'auto'` detail panel whenever it changes. */
+    onDetailPanelHeightChange?: (rowId: GridRowId, height: number) => void;
 
     pinCheckboxColumn?: boolean;
     pinExpandColumn?: boolean;
@@ -42,8 +79,11 @@ export interface RowProps<R extends GridRowModel = GridRowModel> {
 
     editingCell?: { id: GridRowId; field: string; value: unknown; } | null;
     onEditStart?: (params: { id: GridRowId, field: string, value: unknown }) => void;
-    onEditStop?: (params?: { cancel?: boolean }) => void;
+    /** `id` / `field` name the cell whose editor asked to stop. */
+    onEditStop?: (params?: { cancel?: boolean; id?: GridRowId; field?: string }) => void;
     onEditCellValueChange?: (params: { id: GridRowId, field: string, value: unknown }) => void;
+    /** Per-cell editability predicate (`DataGrid.isCellEditable`). */
+    isCellEditable?: (params: GridCellParams<R>) => boolean;
 
     focusedCellField?: string | null;
     isFocusVisible?: boolean;
@@ -52,16 +92,22 @@ export interface RowProps<R extends GridRowModel = GridRowModel> {
     rowSpanningCaches?: RowSpanningCaches;
     rowHeight?: number;
     rowMeta?: GridRowMeta;
+    /** Position of each visible data column in render order, for `colIndex` and `aria-colindex`. */
+    columnIndexMap?: Map<string, number>;
+    /** 1-based `aria-rowindex` of this row in the whole grid (header rows included). Defaults to `rowIndex + 2`. */
+    ariaRowIndex?: number;
 }
 
 export function Row<R extends GridRowModel = GridRowModel>(props: RowProps<R>) {
     const {
         row,
+        rowId: rowIdProp,
         columns,
         rowIndex,
         isSelected = false,
         checkboxSelection = false,
         onRowClick,
+        onRowDoubleClick,
         onCellClick,
         onSelectionChange,
         columnWidths = {},
@@ -71,7 +117,8 @@ export function Row<R extends GridRowModel = GridRowModel>(props: RowProps<R>) {
         isDetailPanelExpanded = false,
         onDetailPanelToggle,
         detailPanelContent,
-        detailPanelHeight = 200,
+        detailPanelHeight = DEFAULT_DETAIL_PANEL_HEIGHT,
+        onDetailPanelHeightChange,
         pinCheckboxColumn = true,
         pinExpandColumn = true,
         rowReordering = false,
@@ -86,6 +133,7 @@ export function Row<R extends GridRowModel = GridRowModel>(props: RowProps<R>) {
         onEditStart,
         onEditStop,
         onEditCellValueChange,
+        isCellEditable,
 
         focusedCellField,
         isFocusVisible,
@@ -93,22 +141,16 @@ export function Row<R extends GridRowModel = GridRowModel>(props: RowProps<R>) {
         colspanMap,
         rowSpanningCaches,
         rowHeight = 52,
-        rowMeta
+        rowMeta,
+        columnIndexMap,
+        ariaRowIndex,
     } = props;
 
+    const id = rowIdProp ?? row.id;
+    // All hooks must come before any early returns (Rules of Hooks).
+    // DOM focus is moved onto the focused cell by useGridKeyboardNavigation, not by the row.
     const checkboxId = useId();
-    const expandCellRef = React.useRef<HTMLDivElement>(null);
-    const checkboxCellRef = React.useRef<HTMLDivElement>(null);
-
-    // All hooks must come before any early returns (Rules of Hooks)
-    React.useLayoutEffect(() => {
-        if (focusedCellField === '__expand_col__' && expandCellRef.current) {
-            expandCellRef.current.focus({ preventScroll: true });
-        }
-        if (focusedCellField === '__checkbox_col__' && checkboxCellRef.current) {
-            checkboxCellRef.current.focus({ preventScroll: true });
-        }
-    }, [focusedCellField]);
+    const detailPanelId = useId();
 
     const pinnedPositions = React.useMemo(() => {
         return calculatePinnedPositions(
@@ -123,21 +165,28 @@ export function Row<R extends GridRowModel = GridRowModel>(props: RowProps<R>) {
         );
     }, [columns, columnWidths, pinnedColumns, checkboxSelection, pinCheckboxColumn, hasDetailPanel, pinExpandColumn, rowReordering]);
 
-    const isGroupRow = rowMeta?.hasChildren === true;
+    const pinnedEdges = React.useMemo(() => getPinnedEdgeFields(columns, pinnedColumns), [columns, pinnedColumns]);
 
+    const isGroupRow = rowMeta?.hasChildren === true;
+    // Group rows, subtotal rows and auto-created tree parents: not data, so no selection or detail panel.
+    const isSyntheticRow = rowMeta?.isGroupRow === true;
+    const showDetailPanel = hasDetailPanel && !isSyntheticRow;
+    // The pivot Grand Total is synthetic too, but its cells show values like any row.
+    const isSelectableRow = !isSyntheticRow && !isSyntheticRowId(id);
+
+    // Which cells may be edited is decided per cell below (resolveCellEditable), not per row:
+    // tree-data parents are real rows and stay editable; synthetic group rows never are.
     const handleCellEditStart = React.useCallback((field: string, value: unknown) => {
-        if (!isGroupRow) {
-            onEditStart?.({ id: row.id, field, value });
-        }
-    }, [isGroupRow, row.id, onEditStart]);
+        onEditStart?.({ id, field, value });
+    }, [id, onEditStart]);
 
     const handleCellValueChange = React.useCallback((field: string, newValue: unknown) => {
-        onEditCellValueChange?.({ id: row.id, field, value: newValue });
-    }, [onEditCellValueChange, row.id]);
+        onEditCellValueChange?.({ id, field, value: newValue });
+    }, [onEditCellValueChange, id]);
 
-    const handleEditStopWrapper = React.useCallback((cancel?: boolean) => {
-        onEditStop?.({ cancel });
-    }, [onEditStop]);
+    const handleEditStopWrapper = React.useCallback((cancel?: boolean, field?: string) => {
+        onEditStop?.({ cancel, id, field });
+    }, [onEditStop, id]);
 
     // ── Skeleton row (shown during infinite-scroll fetch) ─────────────────────
     if (row._isSkeleton) {
@@ -159,25 +208,42 @@ export function Row<R extends GridRowModel = GridRowModel>(props: RowProps<R>) {
         );
     }
 
+    // `.ogx__cell--editing` covers custom renderEditCell editors, which have no .ogx__edit-cell wrapper.
     const handleRowClick = (event: React.MouseEvent) => {
 
-        if ((event.target as HTMLElement).closest('.ogx-checkbox-wrapper, .ogx-expand-icon, .ogx-drag-handle, .ogx__edit-cell')) {
+        if ((event.target as HTMLElement).closest('.ogx-checkbox-wrapper, .ogx-expand-icon, .ogx-drag-handle, .ogx__edit-cell, .ogx__cell--editing')) {
             return;
         }
-        onRowClick?.({ row, id: row.id, rowIndex });
+        onRowClick?.({ row, id, rowIndex });
+    };
+
+    const handleRowDoubleClick = (event: React.MouseEvent) => {
+        if ((event.target as HTMLElement).closest('.ogx-checkbox-wrapper, .ogx-expand-icon, .ogx-drag-handle, .ogx__edit-cell, .ogx__cell--editing')) {
+            return;
+        }
+        onRowDoubleClick?.({ row, id, rowIndex });
     };
 
     const handleCheckboxChange = (event: React.ChangeEvent<HTMLInputElement>) => {
         event.stopPropagation();
-        onSelectionChange?.(row.id, event.target.checked);
+        onSelectionChange?.(id, event.target.checked);
     };
 
     const handleDetailPanelToggle = (event: React.MouseEvent) => {
         event.stopPropagation();
-        onDetailPanelToggle?.(row.id);
+        onDetailPanelToggle?.(id);
     };
 
-    const rowPinnedPosition = isRowPinned(row.id, pinnedRows);
+    // aria-colindex: system columns first (reorder, expand, checkbox), then the data columns.
+    const reorderColIndex = rowReordering ? 1 : 0;
+    const expandColIndex = hasDetailPanel ? reorderColIndex + 1 : reorderColIndex;
+    const checkboxColIndex = checkboxSelection ? expandColIndex + 1 : expandColIndex;
+    const systemColumnCount = checkboxColIndex;
+    const dataColumnCount = columnIndexMap?.size ?? columns.filter(c => !c.isSpacer).length;
+    const isHierarchyRow = rowMeta !== undefined;
+    const hasChildren = rowMeta?.hasChildren === true;
+
+    const rowPinnedPosition = isRowPinned(id, pinnedRows);
     const isRowPinnedTop = rowPinnedPosition === 'top';
     const isRowPinnedBottom = rowPinnedPosition === 'bottom';
 
@@ -190,7 +256,8 @@ export function Row<R extends GridRowModel = GridRowModel>(props: RowProps<R>) {
         isRowPinnedBottom && 'ogx__row--pinned-bottom',
         isDragging && 'ogx__row--dragging',
         isDragOver && 'ogx__row--drag-over',
-        isGroupRow && 'ogx__row--group'
+        isGroupRow && 'ogx__row--group',
+        rowMeta?.isGroupFooter && 'ogx__row--group-footer'
     ].filter(Boolean).join(' ');
 
     return (
@@ -198,12 +265,15 @@ export function Row<R extends GridRowModel = GridRowModel>(props: RowProps<R>) {
             <div
                 className={classNames}
                 onClick={handleRowClick}
+                onDoubleClick={onRowDoubleClick ? handleRowDoubleClick : undefined}
                 role="row"
-                aria-rowindex={rowIndex + 1}
+                aria-rowindex={ariaRowIndex ?? rowIndex + 2}
                 aria-selected={isSelected}
+                aria-level={isHierarchyRow ? (rowMeta?.treeDepth ?? 0) + 1 : undefined}
+                aria-expanded={hasChildren ? rowMeta?.isExpanded === true : undefined}
                 data-rowindex={rowIndex}
-                onDragOver={onDragOver ? onDragOver(row.id) : undefined}
-                onDrop={onDrop ? onDrop(row.id) : undefined}
+                onDragOver={onDragOver ? onDragOver(id) : undefined}
+                onDrop={onDrop ? onDrop(id) : undefined}
                 style={{
                     maxHeight: `${rowHeight}px`,
                     minHeight: `${rowHeight}px`,
@@ -214,20 +284,23 @@ export function Row<R extends GridRowModel = GridRowModel>(props: RowProps<R>) {
                 { }
                 {rowReordering && (
                     <div
-                        className="ogx__cell ogx__cell--drag-handle"
+                        className={`ogx__cell ogx__cell--drag-handle ${focusedCellField === '__reorder_col__' ? 'ogx__cell--focused' : ''} ${(focusedCellField === '__reorder_col__' && isFocusVisible) ? 'ogx__cell--focus-visible' : ''}`}
                         role="gridcell"
-                        aria-label="Drag to reorder row"
+                        aria-label={onDragStart ? 'Drag to reorder row' : undefined}
+                        aria-colindex={reorderColIndex}
+                        data-field="__reorder_col__"
+                        tabIndex={-1}
                         style={{
                             position: 'sticky',
                             left: 0,
-                            zIndex: 4
+                            zIndex: SYSTEM_CELL_Z_INDEX
                         }}
-                        draggable={true}
-                        onDragStart={onDragStart ? onDragStart(row.id) : undefined}
+                        draggable={!!onDragStart}
+                        onDragStart={onDragStart ? onDragStart(id) : undefined}
                         onDragEnd={onDragEnd}
                         onClick={(e) => e.stopPropagation()}
                     >
-                        <DragHandleIcon />
+                        {onDragStart && <DragHandleIcon />}
                     </div>
                 )}
 
@@ -238,14 +311,16 @@ export function Row<R extends GridRowModel = GridRowModel>(props: RowProps<R>) {
                             } ${focusedCellField === '__expand_col__' ? 'ogx__cell--focused' : ''} ${(focusedCellField === '__expand_col__' && isFocusVisible) ? 'ogx__cell--focus-visible' : ''
                             }`}
                         role="gridcell"
-                        aria-label={isDetailPanelExpanded ? 'Collapse row details' : 'Expand row details'}
-                        aria-expanded={isDetailPanelExpanded}
+                        aria-label={showDetailPanel ? (isDetailPanelExpanded ? 'Collapse row details' : 'Expand row details') : undefined}
+                        aria-expanded={showDetailPanel ? isDetailPanelExpanded : undefined}
+                        aria-controls={showDetailPanel && isDetailPanelExpanded ? detailPanelId : undefined}
+                        aria-colindex={expandColIndex}
+                        data-field="__expand_col__"
                         style={{
                             position: pinExpandColumn ? 'sticky' : undefined,
                             left: pinExpandColumn ? (rowReordering ? 48 : 0) : undefined,
-                            zIndex: pinExpandColumn ? 5 : undefined
+                            zIndex: pinExpandColumn ? SYSTEM_CELL_Z_INDEX : undefined
                         }}
-                        ref={expandCellRef}
                         tabIndex={-1}
                         onClick={(e) => {
                             e.stopPropagation();
@@ -259,11 +334,14 @@ export function Row<R extends GridRowModel = GridRowModel>(props: RowProps<R>) {
                             });
                         }}
                     >
-                        <ExpandIcon
-                            isExpanded={isDetailPanelExpanded}
-                            onClick={handleDetailPanelToggle}
-                            variant="plus-minus"
-                        />
+                        {showDetailPanel && (
+                            <ExpandIcon
+                                isExpanded={isDetailPanelExpanded}
+                                onClick={handleDetailPanelToggle}
+                                variant="plus-minus"
+                                tabIndex={-1}
+                            />
+                        )}
                     </div>
                 )}
 
@@ -274,12 +352,13 @@ export function Row<R extends GridRowModel = GridRowModel>(props: RowProps<R>) {
                             } ${focusedCellField === '__checkbox_col__' ? 'ogx__cell--focused' : ''} ${(focusedCellField === '__checkbox_col__' && isFocusVisible) ? 'ogx__cell--focus-visible' : ''
                             }`}
                         role="gridcell"
+                        aria-colindex={checkboxColIndex}
+                        data-field="__checkbox_col__"
                         style={{
                             position: pinCheckboxColumn ? 'sticky' : undefined,
                             left: pinCheckboxColumn ? ((rowReordering ? 48 : 0) + (hasDetailPanel && pinExpandColumn ? 48 : 0)) : undefined,
-                            zIndex: pinCheckboxColumn ? 11 : undefined
+                            zIndex: pinCheckboxColumn ? SYSTEM_CELL_Z_INDEX : undefined
                         }}
-                        ref={checkboxCellRef}
                         tabIndex={-1}
                         onClick={(e) => {
                             e.stopPropagation();
@@ -293,21 +372,23 @@ export function Row<R extends GridRowModel = GridRowModel>(props: RowProps<R>) {
                             });
                         }}
                     >
-                        <Checkbox
-                            id={checkboxId}
-                            name={`ogx-select-row-${row.id}`}
-                            checked={isSelected}
-                            onChange={handleCheckboxChange}
-                            onClick={(e) => e.stopPropagation()}
-                            aria-label={isSelected ? `Deselect row ${row.id}` : `Select row ${row.id}`}
-                            tabIndex={-1}
-                            onMouseDown={(e) => e.preventDefault()}
-                        />
+                        {isSelectableRow && (
+                            <Checkbox
+                                id={checkboxId}
+                                name={`ogx-select-row-${id}`}
+                                checked={isSelected}
+                                onChange={handleCheckboxChange}
+                                onClick={(e) => e.stopPropagation()}
+                                aria-label={isSelected ? `Deselect row ${id}` : `Select row ${id}`}
+                                tabIndex={-1}
+                                onMouseDown={(e) => e.preventDefault()}
+                            />
+                        )}
                     </div>
                 )}
 
                 { }
-                {columns.map((colDef, colIndex) => {
+                {columns.map((colDef, localIndex) => {
                     if (colDef.isSpacer) {
                         return (
                             <div
@@ -317,22 +398,45 @@ export function Row<R extends GridRowModel = GridRowModel>(props: RowProps<R>) {
                             />
                         );
                     }
-                    const value = colDef.valueGetter
-                        ? colDef.valueGetter({ row, field: colDef.field, value: row[colDef.field] })
-                        : row[colDef.field];
+                    // A synthetic row holds its grouping value and aggregates under the column fields; a
+                    // valueGetter written for data rows would recompute (or crash) from fields it lacks.
+                    // A valueGetter that throws is contained to its cell.
+                    let value: unknown;
+                    let valueError: unknown;
+                    if (isSyntheticRow) {
+                        value = row[colDef.field];
+                    } else {
+                        ({ value, error: valueError } = tryGetCellValue(row, colDef.field, colDef));
+                    }
+                    const colIndex = columnIndexMap?.get(colDef.field) ?? localIndex;
 
                     const effectiveWidth = columnWidths[colDef.field] ?? colDef.width;
 
                     const pinnedPosition = isColumnPinned(colDef.field, pinnedColumns);
-                    const pinnedOffset = pinnedPosition ? pinnedPositions[colDef.field] : undefined;
 
-                    const isEditing = editingCell?.id === row.id && editingCell?.field === colDef.field;
+                    const isEditable = Boolean(onEditStart) && resolveCellEditable(
+                        { row, field: colDef.field, value, colDef, rowIndex, colIndex, rowMeta },
+                        isCellEditable
+                    );
+                    const isEditing = editingCell?.id === id && editingCell?.field === colDef.field;
 
                     const cellValue = isEditing ? editingCell?.value : value;
 
-                    const colSpanInfo = colspanMap?.get(row.id)?.[colDef.field];
-                    const rowSpan = rowSpanningCaches?.spannedCells[row.id]?.[colDef.field];
-                    const isHiddenByRowSpan = rowSpanningCaches?.hiddenCells[row.id]?.[colDef.field] || false;
+                    const storedColSpanInfo = colspanMap?.get(id)?.[colDef.field];
+                    const colSpanInfo = storedColSpanInfo && !storedColSpanInfo.spannedByColSpan && storedColSpanInfo.cellProps.colSpan > 1
+                        ? mergeColSpan(columns, colIndex, storedColSpanInfo.cellProps.colSpan, columnWidths)
+                        : storedColSpanInfo;
+                    // A merged cell ends at the last column it covers: a right-pinned one is anchored by
+                    // that column's right edge, and it is the left-pinned edge cell if that column is.
+                    const lastCoveredField = colSpanInfo && !colSpanInfo.spannedByColSpan
+                        ? columns[colIndex + colSpanInfo.cellProps.colSpan - 1]?.field ?? colDef.field
+                        : colDef.field;
+                    const offsetField = pinnedPosition === 'right' ? lastCoveredField : colDef.field;
+                    const pinnedOffset = pinnedPosition ? pinnedPositions[offsetField] : undefined;
+                    const isPinnedEdge = (pinnedPosition === 'left' && lastCoveredField === pinnedEdges.lastLeft)
+                        || (pinnedPosition === 'right' && colDef.field === pinnedEdges.firstRight);
+                    const rowSpan = rowSpanningCaches?.spannedCells[id]?.[colDef.field];
+                    const isHiddenByRowSpan = rowSpanningCaches?.hiddenCells[id]?.[colDef.field] || false;
 
                     return (
                         <Cell
@@ -342,16 +446,18 @@ export function Row<R extends GridRowModel = GridRowModel>(props: RowProps<R>) {
                             colDef={colDef}
                             rowIndex={rowIndex}
                             colIndex={colIndex}
+                            ariaColIndex={systemColumnCount + colIndex + 1}
                             isSelected={isSelected}
                             onCellClick={onCellClick}
                             width={effectiveWidth}
                             pinnedPosition={pinnedPosition}
                             pinnedOffset={pinnedOffset}
+                            isPinnedEdge={isPinnedEdge}
 
                             isFocused={focusedCellField === colDef.field}
                             isFocusVisible={isFocusVisible}
 
-                            isEditable={colDef.editable}
+                            isEditable={isEditable}
                             isEditing={isEditing}
                             onCellEditStart={handleCellEditStart}
                             onEditStop={handleEditStopWrapper}
@@ -361,20 +467,24 @@ export function Row<R extends GridRowModel = GridRowModel>(props: RowProps<R>) {
                             rowSpan={rowSpan}
                             isHiddenByRowSpan={isHiddenByRowSpan}
                             rowMeta={rowMeta}
+                            valueError={valueError}
                         />
                     );
                 })}
             </div>
 
             { }
-            {hasDetailPanel && (
+            {showDetailPanel && (
                 <DetailPanel
+                    id={detailPanelId}
+                    colSpan={systemColumnCount + dataColumnCount}
                     row={row}
-                    rowId={row.id}
+                    rowId={id}
                     rowIndex={rowIndex}
                     content={detailPanelContent}
                     height={detailPanelHeight}
                     isExpanded={isDetailPanelExpanded}
+                    onHeightChange={onDetailPanelHeightChange}
                 />
             )}
         </>

package/lib/components/Toolbar/GlobalSearch.css

@@ -31,12 +31,15 @@
    ─────────────────────────────────────────────────────────────────────────── */
 .ogx-global-search--expanded {
     width: 220px;
-    border-color: var(--ogx-toolbar-input-focus-border, var(--ogx-color-primary, #3b82f6));
+    border-color: var(--ogx-toolbar-input-border, var(--ogx-color-gray-300, #cbd5e1));
     background: var(--ogx-toolbar-input-bg, var(--ogx-grid-background, #fff));
-    box-shadow: var(--ogx-toolbar-input-focus-shadow, 0 0 0 3px rgba(59, 130, 246, 0.12));
     cursor: default;
     overflow: hidden;
 }
+.ogx-global-search--expanded:focus-within {
+    border-color: var(--ogx-toolbar-input-focus-border, var(--ogx-color-primary, #3b82f6));
+    box-shadow: var(--ogx-toolbar-input-focus-shadow, 0 0 0 3px rgba(59, 130, 246, 0.12));
+}
 
 /* ─── Icon wrapper ────────────────────────────────────────────────────────── */
 .ogx-global-search__icon-wrapper {
@@ -70,7 +73,7 @@
     background: transparent;
     font-family: var(--ogx-font-family, system-ui, sans-serif);
     font-size: var(--ogx-font-size-sm, 13px);
-    color: var(--ogx-grid-row-text, #1e293b);
+    color: var(--ogx-toolbar-input-text, var(--ogx-grid-row-text, #1e293b));
     outline: none;
     opacity: 0;
     pointer-events: none;

package/lib/components/Toolbar/GlobalSearch.tsx

@@ -26,6 +26,11 @@ function CloseIcon() {
     );
 }
 
+/** Search text reduced to its terms, so 'john  london ' and 'john london' are the same search. */
+function normalizeSearch(text: string): string {
+    return text.trim().split(/\s+/).filter(Boolean).join(' ');
+}
+
 export function GlobalSearch({ value = '', onChange, placeholder = 'Search...', debounceMs = 250 }: GlobalSearchProps) {
     const [isExpanded, setIsExpanded] = useState(() => value.length > 0);
     // Fully uncontrolled: localValue is the single source of truth.
@@ -39,37 +44,22 @@ export function GlobalSearch({ value = '', onChange, placeholder = 'Search...',
     const lastEmittedRef = useRef(value);
     // Track the last incoming prop value to detect external resets
     const lastIncomingValueRef = useRef(value);
-    // Track whether input was focused BEFORE a re-render so we can restore it
-    const wasFocusedRef = useRef(false);
-
-    // ── Focus preservation across re-renders ─────────────────────────────────
-    // When the parent updates filterModel (triggered by our debounce), React
-    // re-renders the entire tree. Even though the input element stays mounted,
-    // the browser can lose focus during heavy reconciliation. We detect this
-    // via useLayoutEffect (runs synchronously after DOM mutations, before paint)
-    // and immediately restore focus without any visual flicker.
-    useLayoutEffect(() => {
-        if (wasFocusedRef.current && document.activeElement !== inputRef.current) {
-            inputRef.current?.focus();
-        }
-    });
+
+    // The input stays mounted across re-renders, so React keeps its focus; nothing here moves
+    // focus except the explicit expand and clear actions.
 
     // ── External reset detection ──────────────────────────────────────────────
     // Only responds when the PARENT programmatically changes the value
-    // (e.g. "Clear all filters" button) — not from our own typing.
+    // (e.g. "Clear all filters" button) — not from our own typing. The parent may hand back our
+    // own search with whitespace normalised (the toolbar splits it into terms), which is not a reset.
     useEffect(() => {
         if (value === lastIncomingValueRef.current) return;
         lastIncomingValueRef.current = value;
 
-        if (value !== lastEmittedRef.current) {
+        if (normalizeSearch(value) !== normalizeSearch(lastEmittedRef.current)) {
             setLocalValue(value);
             lastEmittedRef.current = value;
-            if (!value) {
-                wasFocusedRef.current = false;
-                setIsExpanded(false);
-            } else {
-                setIsExpanded(true);
-            }
+            setIsExpanded(value.length > 0);
         }
     }, [value]);
 
@@ -84,6 +74,18 @@ export function GlobalSearch({ value = '', onChange, placeholder = 'Search...',
         return () => clearTimeout(handler);
     }, [localValue, debounceMs]);
 
+    // Typing still waiting for the debounce is sent when the search unmounts (the toolbar is
+    // hidden, the grid switches view), instead of being dropped.
+    const localValueRef = useRef(localValue);
+    useLayoutEffect(() => { localValueRef.current = localValue; });
+    useEffect(() => () => {
+        const pending = localValueRef.current;
+        if (pending !== lastEmittedRef.current) {
+            lastEmittedRef.current = pending;
+            onChangeRef.current(pending);
+        }
+    }, []);
+
     const handleExpand = useCallback(() => {
         setIsExpanded(true);
         requestAnimationFrame(() => inputRef.current?.focus());
@@ -98,22 +100,19 @@ export function GlobalSearch({ value = '', onChange, placeholder = 'Search...',
     }, []);
 
     const handleFocus = useCallback(() => {
-        wasFocusedRef.current = true;
         setIsExpanded(true);
     }, []);
 
     // Blur: defer 150ms to allow focus to move within the container first
     // (e.g. clicking the clear button) before deciding to collapse.
     const handleBlur = useCallback(() => {
-        wasFocusedRef.current = false;
         setTimeout(() => {
             if (
                 containerRef.current &&
                 document.activeElement &&
                 containerRef.current.contains(document.activeElement)
             ) {
-                // Focus is still inside — mark as focused again and abort
-                wasFocusedRef.current = true;
+                // Focus is still inside the search box — keep it expanded
                 return;
             }
             if (!localValue) {
@@ -156,7 +155,7 @@ export function GlobalSearch({ value = '', onChange, placeholder = 'Search...',
                 autoComplete="off"
             />
             {localValue && (
-                <button className="ogx-global-search__clear" onClick={handleClear} aria-label="Clear search">
+                <button type="button" className="ogx-global-search__clear" onClick={handleClear} aria-label="Clear search">
                     <CloseIcon />
                 </button>
             )}