@opencorestack/opengridx 0.1.8 → 0.1.9

package/lib/components/Cell/Cell.tsx

@@ -62,39 +62,7 @@ function CellImpl<R extends GridRowModel = GridRowModel>(props: CellProps<R>) {
         isHiddenByRowSpan
     } = props;
 
-    if (colSpanInfo?.spannedByColSpan) {
-
-        return null;
-    }
-
-    if (isHiddenByRowSpan) {
-
-        return (
-            <div
-                className="ogx__cell ogx__cell--hidden"
-                style={{ width: width ?? colDef.width ?? 100 }}
-                role="presentation"
-                data-field={colDef.field}
-                data-colindex={colIndex}
-            />
-        );
-    }
-
-    const handleClick = (e: React.MouseEvent) => {
-        if (onCellClick) {
-            e.stopPropagation();
-            onCellClick({
-                row,
-                field: colDef.field,
-                value,
-                colDef,
-                rowIndex,
-                colIndex
-            });
-        }
-        onClick?.(e);
-    };
-
+    // All hooks must come before any early returns (Rules of Hooks)
     const handleValueChange = React.useCallback((newValue: any) => {
         if (onCellValueChange) {
             onCellValueChange(colDef.field, newValue);
@@ -103,17 +71,6 @@ function CellImpl<R extends GridRowModel = GridRowModel>(props: CellProps<R>) {
         }
     }, [onCellValueChange, onValueChange, colDef.field]);
 
-    const handleDoubleClick = (e: React.MouseEvent) => {
-        if (isEditable && (onEditStart || onCellEditStart)) {
-            e.stopPropagation();
-            if (onCellEditStart) {
-                onCellEditStart(colDef.field, value);
-            } else {
-                onEditStart?.();
-            }
-        }
-    };
-
     const formattedValue = React.useMemo(() => {
         if (colDef.valueFormatter) {
             return colDef.valueFormatter({
@@ -130,7 +87,6 @@ function CellImpl<R extends GridRowModel = GridRowModel>(props: CellProps<R>) {
         return String(value);
     }, [value, row, colDef]);
 
-    // Render custom cell content OR Edit Content
     const cellContent = React.useMemo(() => {
         if (isEditing && (onCellValueChange || onValueChange) && onEditStop) {
             if (colDef.renderEditCell) {
@@ -172,8 +128,6 @@ function CellImpl<R extends GridRowModel = GridRowModel>(props: CellProps<R>) {
         return formattedValue;
     }, [value, row, colDef, rowIndex, colIndex, formattedValue, isEditing, handleValueChange, onEditStop, onCellValueChange, onValueChange]);
 
-    const isPinned = pinnedPosition !== null && pinnedPosition !== undefined;
-
     const resolvedCellClassName = React.useMemo(() => {
         if (!colDef.cellClassName) return '';
         if (typeof colDef.cellClassName === 'function') {
@@ -182,6 +136,58 @@ function CellImpl<R extends GridRowModel = GridRowModel>(props: CellProps<R>) {
         return colDef.cellClassName;
     }, [colDef, value, row, rowIndex, colIndex]);
 
+    const cellRef = React.useRef<HTMLDivElement>(null);
+
+    React.useLayoutEffect(() => {
+        if (isFocused && cellRef.current) {
+            cellRef.current.focus({ preventScroll: true });
+        }
+    }, [isFocused]);
+
+    if (colSpanInfo?.spannedByColSpan) {
+        return null;
+    }
+
+    if (isHiddenByRowSpan) {
+        return (
+            <div
+                className="ogx__cell ogx__cell--hidden"
+                style={{ width: width ?? colDef.width ?? 100 }}
+                role="presentation"
+                data-field={colDef.field}
+                data-colindex={colIndex}
+            />
+        );
+    }
+
+    const handleClick = (e: React.MouseEvent) => {
+        if (onCellClick) {
+            e.stopPropagation();
+            onCellClick({
+                row,
+                field: colDef.field,
+                value,
+                colDef,
+                rowIndex,
+                colIndex
+            });
+        }
+        onClick?.(e);
+    };
+
+    const handleDoubleClick = (e: React.MouseEvent) => {
+        if (isEditable && (onEditStart || onCellEditStart)) {
+            e.stopPropagation();
+            if (onCellEditStart) {
+                onCellEditStart(colDef.field, value);
+            } else {
+                onEditStart?.();
+            }
+        }
+    };
+
+    const isPinned = pinnedPosition !== null && pinnedPosition !== undefined;
+
     const classNames = [
         'ogx__cell',
         `ogx__cell--align-${colDef.align || 'left'}`,
@@ -230,14 +236,6 @@ function CellImpl<R extends GridRowModel = GridRowModel>(props: CellProps<R>) {
         }
     }
 
-    const cellRef = React.useRef<HTMLDivElement>(null);
-
-    React.useLayoutEffect(() => {
-        if (isFocused && cellRef.current) {
-            cellRef.current.focus({ preventScroll: true });
-        }
-    }, [isFocused]);
-
     return (
         <div
             ref={cellRef}

package/lib/components/DataGrid/DataGrid.smoke.test.tsx

@@ -0,0 +1,58 @@
+import React from 'react';
+import { describe, it, expect } from 'vitest';
+import { render, screen } from '@testing-library/react';
+import { DataGrid } from './DataGrid';
+import type { GridColDef } from '../../types';
+
+const COLUMNS: GridColDef[] = [
+    { field: 'id', headerName: 'ID', width: 80 },
+    { field: 'name', headerName: 'Name', width: 150 },
+    { field: 'age', headerName: 'Age', width: 100, type: 'number' },
+];
+
+const ROWS = [
+    { id: 1, name: 'Alice', age: 30 },
+    { id: 2, name: 'Bob', age: 25 },
+    { id: 3, name: 'Charlie', age: 35 },
+];
+
+describe('DataGrid — smoke tests', () => {
+    it('renders without throwing', () => {
+        expect(() =>
+            render(<DataGrid rows={ROWS} columns={COLUMNS} />)
+        ).not.toThrow();
+    });
+
+    it('renders column headers', () => {
+        render(<DataGrid rows={ROWS} columns={COLUMNS} />);
+        expect(screen.getByText('Name')).toBeInTheDocument();
+        expect(screen.getByText('Age')).toBeInTheDocument();
+    });
+
+    it('renders row data', () => {
+        render(<DataGrid rows={ROWS} columns={COLUMNS} />);
+        expect(screen.getByText('Alice')).toBeInTheDocument();
+        expect(screen.getByText('Bob')).toBeInTheDocument();
+        expect(screen.getByText('Charlie')).toBeInTheDocument();
+    });
+
+    it('renders with empty rows without throwing', () => {
+        expect(() =>
+            render(<DataGrid rows={[]} columns={COLUMNS} />)
+        ).not.toThrow();
+    });
+
+    it('renders with empty columns without throwing', () => {
+        expect(() =>
+            render(<DataGrid rows={ROWS} columns={[]} />)
+        ).not.toThrow();
+    });
+
+    it('renders with checkboxSelection enabled', () => {
+        const { container } = render(
+            <DataGrid rows={ROWS} columns={COLUMNS} checkboxSelection />
+        );
+        const checkboxes = container.querySelectorAll('input[type="checkbox"]');
+        expect(checkboxes.length).toBeGreaterThan(0);
+    });
+});