@opencorestack/opengridx 0.1.9 → 1.0.0

package/lib/components/FilterPanel/FilterPanel.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback, useEffect, useRef, useState } from 'react';
+import React, { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react';
 import type {
     GridFilterModel,
     GridFilterItem,
@@ -30,34 +30,42 @@ const FilterRow: React.FC<{
     const currentOperator = item?.operator ?? operators[0];
 
     // Local input state to prevent full filter-panel re-render on every keystroke
-    const [localValue, setLocalValue] = useState(item?.value ?? '');
+    const [localValue, setLocalValue] = useState<string>(item?.value != null ? String(item.value) : '');
     const onChangeRef = useRef(onChange);
-    onChangeRef.current = onChange;
+    const itemRef = useRef(item);
+    const colFieldRef = useRef(col.field);
+    const operatorRef = useRef(currentOperator);
+    useLayoutEffect(() => {
+        onChangeRef.current = onChange;
+        itemRef.current = item;
+        colFieldRef.current = col.field;
+        operatorRef.current = currentOperator;
+    });
 
     // Sync when the external item changes (e.g. operator change, clear)
     const prevItemValue = useRef(item?.value);
     useEffect(() => {
         if (item?.value !== prevItemValue.current) {
             prevItemValue.current = item?.value;
-            setLocalValue(item?.value ?? '');
+            setLocalValue(item?.value != null ? String(item.value) : '');
         }
     }, [item?.value]);
 
     // Debounce propagating the value upward (300ms)
     useEffect(() => {
         const handler = setTimeout(() => {
-            const currentValue = item?.value ?? '';
+            const currentItem = itemRef.current;
+            const currentValue = currentItem?.value ?? '';
             if (localValue !== currentValue) {
                 onChangeRef.current({
-                    id: item?.id ?? `${col.field}-${Date.now()}`,
-                    field: col.field,
-                    operator: currentOperator as GridFilterOperator,
+                    id: currentItem?.id ?? `${colFieldRef.current}-${Date.now()}`,
+                    field: colFieldRef.current,
+                    operator: operatorRef.current as GridFilterOperator,
                     value: localValue,
                 });
             }
         }, 300);
         return () => clearTimeout(handler);
-    // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [localValue]);
 
     const handleOperatorChange = (op: string) => {
@@ -158,7 +166,7 @@ const FilterRow: React.FC<{
 // ── Root panel ────────────────────────────────────────────────────────────────
 
 export const FilterPanel: React.FC<FilterPanelProps> = ({ filterModel, columns, onFilterModelChange }) => {
-    const items: GridFilterItem[] = (filterModel.items ?? []) as GridFilterItem[];
+    const items = useMemo<GridFilterItem[]>(() => (filterModel.items ?? []) as GridFilterItem[], [filterModel.items]);
     const logicOperator = filterModel.logicOperator ?? 'and';
 
     const handleItemChange = useCallback((field: string, newItem: GridFilterItem | null) => {

package/lib/components/Header/ColumnMenu.tsx

@@ -1,10 +1,10 @@
 import React, { useRef, useEffect, useState } from 'react';
 import ReactDOM from 'react-dom';
-import type { GridColDef, GridSortDirection, GridColumnPinning } from '../../types';
+import type { GridColDef, GridRowModel, GridSortDirection, GridColumnPinning } from '../../types';
 
 
 interface ColumnMenuProps {
-    colDef: GridColDef<any>;
+    colDef: GridColDef<GridRowModel>;
     sortModel?: Array<{ field: string; sort: 'asc' | 'desc' }>;
     onSort?: (field: string, direction: GridSortDirection) => void;
     onHide?: (field: string) => void;

package/lib/components/Header/Header.tsx

@@ -236,7 +236,7 @@ export function Header<R extends GridRowModel = GridRowModel>(props: HeaderProps
     // All non-spacer fields in order (for group-span math) with their effective physical width
     const allCols = allColumns ?? columns;
     const allLeafFields = allCols
-        .filter(c => !(c as any).isSpacer)
+        .filter(c => !c.isSpacer)
         .map(c => ({
             field: c.field,
             width: columnWidths[c.field] ?? c.width ?? 100
@@ -354,7 +354,7 @@ export function Header<R extends GridRowModel = GridRowModel>(props: HeaderProps
                 )}
 
                 {columns.map((colDef, index) => {
-                    if ((colDef as any).isSpacer) {
+                    if (colDef.isSpacer) {
                         return (
                             <div
                                 key={colDef.field}
@@ -409,7 +409,7 @@ export function Header<R extends GridRowModel = GridRowModel>(props: HeaderProps
                     }
 
                     const headerContent = colDef.renderHeader
-                        ? colDef.renderHeader({ field: colDef.field, colDef: colDef as any, colIndex: index })
+                        ? colDef.renderHeader({ field: colDef.field, colDef: colDef as unknown as GridColDef, colIndex: index })
                         : colDef.headerName || colDef.field;
 
                     const handleHeaderClick = (e: React.MouseEvent) => {
@@ -499,7 +499,7 @@ export function Header<R extends GridRowModel = GridRowModel>(props: HeaderProps
 
                 {menuOpenParams && (
                     <ColumnMenu
-                        colDef={menuOpenParams.colDef}
+                        colDef={menuOpenParams.colDef as unknown as GridColDef<GridRowModel>}
                         sortModel={sortModel}
                         onSort={onSort}
                         onHide={onHideColumn}

package/lib/components/ListView/ListViewRow.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import type { GridRowModel, GridRowId, GridListViewColDef, GridRenderCellParams } from '../../types';
+import type { GridColDef, GridRowModel, GridRowId, GridListViewColDef, GridRenderCellParams } from '../../types';
 
 export interface ListViewRowProps<R extends GridRowModel = GridRowModel> {
     row: R;
@@ -26,7 +26,7 @@ export function ListViewRow<R extends GridRowModel = GridRowModel>({
         row,
         value: undefined,
         field: listViewColumn.field,
-        colDef: { field: listViewColumn.field } as any,
+        colDef: { field: listViewColumn.field } as unknown as GridColDef<R>,
         rowIndex,
         colIndex: 0,
     };

package/lib/components/Row/Row.tsx

@@ -40,10 +40,10 @@ export interface RowProps<R extends GridRowModel = GridRowModel> {
     isDragging?: boolean;
     isDragOver?: boolean;
 
-    editingCell?: { id: GridRowId; field: string; value: any; } | null;
-    onEditStart?: (params: { id: GridRowId, field: string, value: any }) => void;
+    editingCell?: { id: GridRowId; field: string; value: unknown; } | null;
+    onEditStart?: (params: { id: GridRowId, field: string, value: unknown }) => void;
     onEditStop?: (params?: { cancel?: boolean }) => void;
-    onEditCellValueChange?: (params: { id: GridRowId, field: string, value: any }) => void;
+    onEditCellValueChange?: (params: { id: GridRowId, field: string, value: unknown }) => void;
 
     focusedCellField?: string | null;
     isFocusVisible?: boolean;
@@ -120,15 +120,15 @@ export function Row<R extends GridRowModel = GridRowModel>(props: RowProps<R>) {
         );
     }, [columns, columnWidths, pinnedColumns, checkboxSelection, pinCheckboxColumn, hasDetailPanel, pinExpandColumn, rowReordering]);
 
-    const isGroupRow = (row as any)._hasChildren === true;
+    const isGroupRow = row._hasChildren === true;
 
-    const handleCellEditStart = React.useCallback((field: string, value: any) => {
+    const handleCellEditStart = React.useCallback((field: string, value: unknown) => {
         if (!isGroupRow) {
             onEditStart?.({ id: row.id, field, value });
         }
     }, [isGroupRow, row.id, onEditStart]);
 
-    const handleCellValueChange = React.useCallback((field: string, newValue: any) => {
+    const handleCellValueChange = React.useCallback((field: string, newValue: unknown) => {
         onEditCellValueChange?.({ id: row.id, field, value: newValue });
     }, [onEditCellValueChange, row.id]);
 
@@ -137,7 +137,7 @@ export function Row<R extends GridRowModel = GridRowModel>(props: RowProps<R>) {
     }, [onEditStop]);
 
     // ── Skeleton row (shown during infinite-scroll fetch) ─────────────────────
-    if ((row as any)._isSkeleton) {
+    if (row._isSkeleton) {
         // Render shimmer placeholders — one per visible column, matching row height
         const cellCount = Math.max(columns.length, 5);
         return (
@@ -250,7 +250,7 @@ export function Row<R extends GridRowModel = GridRowModel>(props: RowProps<R>) {
                                 row,
                                 field: '__expand_col__',
                                 value: isDetailPanelExpanded,
-                                colDef: { field: '__expand_col__', width: 48 } as any,
+                                colDef: { field: '__expand_col__', width: 48 } as unknown as GridColDef<R>,
                                 rowIndex,
                                 colIndex: -1
                             });
@@ -284,7 +284,7 @@ export function Row<R extends GridRowModel = GridRowModel>(props: RowProps<R>) {
                                 row,
                                 field: '__checkbox_col__',
                                 value: isSelected,
-                                colDef: { field: '__checkbox_col__', width: 48 } as any,
+                                colDef: { field: '__checkbox_col__', width: 48 } as unknown as GridColDef<R>,
                                 rowIndex,
                                 colIndex: -1
                             });
@@ -305,7 +305,7 @@ export function Row<R extends GridRowModel = GridRowModel>(props: RowProps<R>) {
 
                 { }
                 {columns.map((colDef, colIndex) => {
-                    if ((colDef as any).isSpacer) {
+                    if (colDef.isSpacer) {
                         return (
                             <div
                                 key={colDef.field}

package/lib/components/SkeletonRow/SkeletonRow.tsx

@@ -1,8 +1,15 @@
 import React from 'react';
+import type { GridColDef } from '../../types';
 
+interface SkeletonColumn extends GridColDef {
+    left?: number;
+    right?: number;
+    pinned?: 'left' | 'right';
+    zIndex?: number;
+}
 
 interface SkeletonRowProps {
-    columns: any[];
+    columns: SkeletonColumn[];
     rowHeight: number;
     checkboxSelection?: boolean;
     hasDetailPanel?: boolean;
@@ -54,7 +61,7 @@ export const SkeletonRow: React.FC<SkeletonRowProps> = ({
 
             { }
             {columns.map((col, index) => {
-                const width = col.width || 150;
+                const width = typeof col.width === 'number' ? col.width : 150;
                 const skeletonWidth = Math.min(width * 0.7, width - 20);
 
                 return (

package/lib/components/Toolbar/GridToolbar.tsx

@@ -23,6 +23,7 @@ export interface GridToolbarProps {
     columnVisibilityModel?: Record<string, boolean>;
     onColumnVisibilityModelChange?: (model: Record<string, boolean>) => void;
     onColumnReorder?: (fromField: string, toField: string) => void;
+    onColumnOrderReset?: () => void;
     forceColumnsOpen?: boolean;
     onColumnsPanelClose?: () => void;
     children?: React.ReactNode;
@@ -201,6 +202,7 @@ function ColumnsPanelWrapper({
     onShowAll,
     onHideAll,
     onColumnReorder,
+    onColumnOrderReset,
     onClose
 }: {
     anchorRef: React.RefObject<HTMLButtonElement | null>;
@@ -210,6 +212,7 @@ function ColumnsPanelWrapper({
     onShowAll: () => void;
     onHideAll: () => void;
     onColumnReorder?: (fromField: string, toField: string) => void;
+    onColumnOrderReset?: () => void;
     onClose: () => void;
 }) {
     const panelRef = useRef<HTMLDivElement>(null);
@@ -268,6 +271,7 @@ function ColumnsPanelWrapper({
                 onShowAll={onShowAll}
                 onHideAll={onHideAll}
                 onColumnReorder={onColumnReorder}
+                onColumnOrderReset={onColumnOrderReset}
             />
         </div>
     );
@@ -403,6 +407,7 @@ export function GridToolbar({
     columnVisibilityModel = {},
     onColumnVisibilityModelChange,
     onColumnReorder,
+    onColumnOrderReset,
     forceColumnsOpen,
     onColumnsPanelClose,
     children,
@@ -553,6 +558,7 @@ export function GridToolbar({
                                 onShowAll={handleShowAllColumns}
                                 onHideAll={handleHideAllColumns}
                                 onColumnReorder={onColumnReorder}
+                                onColumnOrderReset={onColumnOrderReset}
                                 onClose={() => { setColsOpen(false); onColumnsPanelClose?.(); }}
                             />
                         )}

package/lib/hooks/core/useDataGrid.regression.test.ts

@@ -0,0 +1,66 @@
+/**
+ * Regression tests for bugs fixed in the useDataGrid reducer.
+ *
+ * Each describe block names the bug and the commit that fixed it, so a
+ * future failure tells you exactly what regressed and where to look.
+ */
+
+import { describe, it, expect } from 'vitest';
+import { renderHook, act } from '@testing-library/react';
+import { useDataGrid } from './useDataGrid';
+import type { GridColDef } from '../../types';
+
+const COLS: GridColDef[] = [
+    { field: 'id',   headerName: 'ID',   width: 80 },
+    { field: 'name', headerName: 'Name', width: 150 },
+    { field: 'age',  headerName: 'Age',  width: 100 },
+];
+
+const ROWS = [
+    { id: 1, name: 'Alice', age: 30 },
+    { id: 2, name: 'Bob',   age: 25 },
+];
+
+// ─────────────────────────────────────────────────────────────────────────────
+// Bug: SET_COLUMNS reducer was hardcoding columnVisibilityModel: {} on every
+// column update, silently wiping any hidden columns.
+// ─────────────────────────────────────────────────────────────────────────────
+describe('SET_COLUMNS preserves columnVisibilityModel', () => {
+    it('keeps hidden columns hidden after setColumns is called', () => {
+        const { result } = renderHook(() =>
+            useDataGrid({
+                rows: ROWS,
+                columns: COLS,
+                columnVisibilityModel: { age: false },
+            })
+        );
+
+        // Confirm the initial visibility model was applied.
+        expect(result.current.state.columns.columnVisibilityModel).toEqual({ age: false });
+
+        // Simulate a column update (e.g. a width change coming from a resize handler).
+        const updatedCols: GridColDef[] = COLS.map(c =>
+            c.field === 'name' ? { ...c, width: 200 } : c
+        );
+
+        act(() => {
+            result.current.setColumns(updatedCols);
+        });
+
+        // The visibility model must survive the column update — not reset to {}.
+        expect(result.current.state.columns.columnVisibilityModel).toEqual({ age: false });
+    });
+
+    it('does not gain a visibility entry for columns that were already visible', () => {
+        const { result } = renderHook(() =>
+            useDataGrid({ rows: ROWS, columns: COLS })
+        );
+
+        act(() => {
+            result.current.setColumns(COLS);
+        });
+
+        // No spurious entries: an empty model means all columns are visible.
+        expect(result.current.state.columns.columnVisibilityModel).toEqual({});
+    });
+});

package/lib/hooks/core/useDataGrid.ts

@@ -1,7 +1,7 @@
 
-import { useReducer, useCallback, useMemo, useRef, useEffect, useLayoutEffect } from 'react';
+import { useReducer, useCallback, useState, useRef, useEffect, useLayoutEffect } from 'react';
 import type {
-  GridState,
+  GridInternalState as GridState,
   GridRowModel,
   GridColDef,
   GridRowId,
@@ -19,27 +19,25 @@ type GridAction =
   | { type: 'SET_FILTER_MODEL'; payload: GridFilterModel }
   | { type: 'SET_PAGINATION_MODEL'; payload: GridPaginationModel }
   | { type: 'SET_SELECTION'; payload: Set<GridRowId> }
-  | { type: 'SET_SCROLL'; payload: { scrollTop: number; scrollLeft: number } }
   | { type: 'SET_DIMENSIONS'; payload: { viewportWidth: number; viewportHeight: number } }
   | { type: 'SET_DATASOURCE_LOADING'; payload: boolean }
-  | { type: 'SET_DATASOURCE_ERROR'; payload: any }
+  | { type: 'SET_DATASOURCE_ERROR'; payload: unknown }
   | { type: 'SET_ROW_COUNT'; payload: number };
 
-function createInitialState(rows: GridRowModel[], columns: GridColDef[], columnVisibilityModel: GridColumnVisibilityModel = {}): GridState {
+function createInitialState<R extends GridRowModel>(rows: R[], columns: GridColDef<R>[], columnVisibilityModel: GridColumnVisibilityModel = {}): GridState {
   const idRowsLookup = new Map<GridRowId, GridRowModel>();
   const allRows: GridRowId[] = [];
 
   rows.forEach(row => {
-    const id = row.id;
-    idRowsLookup.set(id, row);
-    allRows.push(id);
+    idRowsLookup.set(row.id, row);
+    allRows.push(row.id);
   });
 
   const columnLookup = new Map<string, GridColDef>();
   const orderedFields: string[] = [];
 
   columns.forEach(col => {
-    columnLookup.set(col.field, col);
+    columnLookup.set(col.field, col as unknown as GridColDef);
     orderedFields.push(col.field);
   });
 
@@ -49,7 +47,7 @@ function createInitialState(rows: GridRowModel[], columns: GridColDef[], columnV
       allRows
     },
     columns: {
-      all: columns,
+      all: columns as unknown as GridColDef[],
       lookup: columnLookup,
       orderedFields,
       columnVisibilityModel
@@ -78,8 +76,6 @@ function createInitialState(rows: GridRowModel[], columns: GridColDef[], columnV
         firstColumnIndex: 0,
         lastColumnIndex: 0
       },
-      scrollTop: 0,
-      scrollLeft: 0
     },
     dimensions: {
       rowHeight: 52,
@@ -137,7 +133,7 @@ function gridReducer(state: GridState, action: GridAction): GridState {
           all: action.payload,
           lookup: columnLookup,
           orderedFields,
-          columnVisibilityModel: {}
+          columnVisibilityModel: state.columns.columnVisibilityModel
         }
       };
     }
@@ -169,16 +165,6 @@ function gridReducer(state: GridState, action: GridAction): GridState {
         selection: { selectedRows: action.payload }
       };
 
-    case 'SET_SCROLL':
-      return {
-        ...state,
-        virtualization: {
-          ...state.virtualization,
-          scrollTop: action.payload.scrollTop,
-          scrollLeft: action.payload.scrollLeft
-        }
-      };
-
     case 'SET_DIMENSIONS':
       return {
         ...state,
@@ -234,18 +220,17 @@ export interface UseDataGridParams<R extends GridRowModel = GridRowModel> {
 export function useDataGrid<R extends GridRowModel = GridRowModel>(params: UseDataGridParams<R>) {
   const { rows, columns, rowHeight = 52, headerHeight = 56, columnVisibilityModel, initialState: propInitialState } = params;
 
-  const internalInitialState = useMemo(
-    () => createInitialState(rows, columns as any, columnVisibilityModel),
-    [] 
+  const [internalInitialState] = useState(() =>
+    createInitialState(rows, columns, columnVisibilityModel)
   );
 
   const [state, dispatch] = useReducer(gridReducer, {
     ...internalInitialState,
     sorting: propInitialState?.sorting || internalInitialState.sorting,
     filter: propInitialState?.filter || internalInitialState.filter,
-    dataSource: (propInitialState?.dataSource 
+    dataSource: propInitialState?.dataSource
       ? { ...internalInitialState.dataSource, ...propInitialState.dataSource }
-      : internalInitialState.dataSource) as any,
+      : internalInitialState.dataSource,
     pagination: {
       ...internalInitialState.pagination,
       ...(propInitialState?.pagination || {}),
@@ -294,10 +279,6 @@ export function useDataGrid<R extends GridRowModel = GridRowModel>(params: UseDa
     dispatch({ type: 'SET_SELECTION', payload: selectedRows });
   }, []);
 
-  const setScroll = useCallback((scrollTop: number, scrollLeft: number) => {
-    dispatch({ type: 'SET_SCROLL', payload: { scrollTop, scrollLeft } });
-  }, []);
-
   const setDimensions = useCallback((viewportWidth: number, viewportHeight: number) => {
     dispatch({ type: 'SET_DIMENSIONS', payload: { viewportWidth, viewportHeight } });
   }, []);
@@ -306,7 +287,7 @@ export function useDataGrid<R extends GridRowModel = GridRowModel>(params: UseDa
     dispatch({ type: 'SET_DATASOURCE_LOADING', payload: loading });
   }, []);
 
-  const setDataSourceError = useCallback((error: any) => {
+  const setDataSourceError = useCallback((error: unknown) => {
     dispatch({ type: 'SET_DATASOURCE_ERROR', payload: error });
   }, []);
 
@@ -383,7 +364,6 @@ export function useDataGrid<R extends GridRowModel = GridRowModel>(params: UseDa
     setFilterModel,
     setPaginationModel,
     setSelection,
-    setScroll,
     setDimensions,
     setDataSourceLoading,
     setDataSourceError,