@ornery/ui-grid-react 0.1.9 → 1.0.0

package/src/useGridState.ts

@@ -56,6 +56,7 @@ import {
   buildGridFocusCellResult,
   findNextGridCell,
   isPrintableGridKey,
+  isGridNavigationKey,
   isGridCellPosition,
   exportCsvRows,
   buildGridRows,
@@ -222,6 +223,7 @@ export interface UseGridStateResult {
   paginationSelectedPageSize: number;
   rowSize: number;
   viewportHeightPx: string;
+  autoViewportHeight: number | null;
 
   // Display helpers
   headerLabel: (column: GridColumnDef) => string;
@@ -239,6 +241,7 @@ export interface UseGridStateResult {
   groupDisclosureLabel: (item: GroupItem) => string;
   displayValue: (row: GridRow, column: GridColumnDef) => string;
   isFocusedCell: (row: GridRow, column: GridColumnDef) => boolean;
+  isFocusedRow: (row: GridRow) => boolean;
   isEditingCell: (row: GridRow, column: GridColumnDef) => boolean;
   editorInputType: (column: GridColumnDef) => string;
   cellContext: (row: GridRow, column: GridColumnDef) => GridCellTemplateContext;
@@ -307,6 +310,9 @@ export interface UseGridStateResult {
   toggleTreeRow: (row: GridRow, event?: React.MouseEvent) => void;
   moveColumn: (fromIndex: number, toIndex: number) => void;
   moveVisibleColumn: (columnName: string, targetColumnName: string) => void;
+  canResizeColumns: () => boolean;
+  handleHeaderResizeMouseDown: (column: GridColumnDef, event: React.MouseEvent) => void;
+  autoSizeColumn: (column: GridColumnDef, event: React.MouseEvent) => void;
   nextPage: () => void;
   previousPage: () => void;
   onPageSizeChange: (value: string) => void;
@@ -344,6 +350,7 @@ export function useGridState(
   });
   const [autoViewportHeight, setAutoViewportHeight] = useState<number | null>(null);
   const [pinnedColumns, setPinnedColumns] = useState<PinnedColumnState>({});
+  const [columnWidthOverrides, setColumnWidthOverrides] = useState<Record<string, string>>({});
 
   const gridContainerRef = useRef<HTMLDivElement | null>(null);
   const initializedGridIdRef = useRef<string | null>(null);
@@ -384,6 +391,16 @@ export function useGridState(
   currentPageRef.current = currentPage;
   const pageSizeRef = useRef(pageSize);
   pageSizeRef.current = pageSize;
+
+  const setEditingCellState = useCallback((nextEditingCell: GridCellPosition | null): void => {
+    editingCellRef.current = nextEditingCell;
+    setEditingCell(nextEditingCell);
+  }, []);
+
+  const setEditingValueState = useCallback((nextEditingValue: string): void => {
+    editingValueRef.current = nextEditingValue;
+    setEditingValue(nextEditingValue);
+  }, []);
   const infiniteScrollStateRef = useRef(infiniteScrollState);
   infiniteScrollStateRef.current = infiniteScrollState;
   const optionsRef = useRef(options);
@@ -393,9 +410,15 @@ export function useGridState(
 
   const visibleColumns = useMemo(() => {
     const orderedColumns = orderVisibleColumns(options.columnDefs, columnOrder);
+    const applyWidthOverrides = (columns: GridColumnDef[]): GridColumnDef[] =>
+      columns.map((col) => {
+        const override = columnWidthOverrides[col.name];
+        return override == null ? col : { ...col, width: override };
+      });
+
     const pinnedEntries = Object.entries(pinnedColumns);
     if (pinnedEntries.length === 0) {
-      return orderedColumns;
+      return applyWidthOverrides(orderedColumns);
     }
 
     const columnByName = new Map(orderedColumns.map((column) => [column.name, column]));
@@ -411,8 +434,8 @@ export function useGridState(
       (column) => pinnedColumns[column.name] === undefined,
     );
 
-    return [...pinnedLeft, ...centerColumns, ...pinnedRight];
-  }, [options.columnDefs, columnOrder, pinnedColumns]);
+    return applyWidthOverrides([...pinnedLeft, ...centerColumns, ...pinnedRight]);
+  }, [options.columnDefs, columnOrder, pinnedColumns, columnWidthOverrides]);
 
   const visibleColumnsRef = useRef(visibleColumns);
   visibleColumnsRef.current = visibleColumns;
@@ -578,12 +601,15 @@ export function useGridState(
         if (retry) requestAnimationFrame(() => doFocus(false));
         return;
       }
-      target.focus();
+      target.focus({ preventScroll: true });
       if (retry && container.ownerDocument.activeElement !== target) {
         requestAnimationFrame(() => doFocus(false));
       }
     };
 
+    // Attempt synchronous focus first to avoid the browser scrolling the viewport
+    // (e.g. when ArrowDown is pressed) before async focus runs.
+    doFocus(true);
     queueMicrotask(() => doFocus(true));
   }, []);
 
@@ -944,8 +970,8 @@ export function useGridState(
         gridApiRef.current!,
         {
           setFocusedCell: (fc) => setFocusedCell(fc),
-          setEditingCell: (ec2) => setEditingCell(ec2),
-          setEditingValue: (ev) => setEditingValue(ev),
+          setEditingCell: setEditingCellState,
+          setEditingValue: setEditingValueState,
         },
         row,
         column,
@@ -958,7 +984,7 @@ export function useGridState(
         queueMicrotask(() => focusEditorInput(focusToken));
       }
     },
-    [focusEditorInput],
+    [focusEditorInput, setEditingCellState, setEditingValueState],
   );
 
   const commitCellEditFn = useCallback(
@@ -966,8 +992,8 @@ export function useGridState(
       const result = commitGridCellEditCommand(gridApiRef.current!, {
         getEditingCell: () => editingCellRef.current,
         getEditingValue: () => editingValueRef.current,
-        setEditingCell: (ec) => setEditingCell(ec),
-        setEditingValue: (ev) => setEditingValue(ev),
+        setEditingCell: setEditingCellState,
+        setEditingValue: setEditingValueState,
         findRowById: (rowId) =>
           coreFindGridRowById(buildRowsFromData(optionsRef.current.data), rowId),
         findColumnByName: (columnName) =>
@@ -991,15 +1017,15 @@ export function useGridState(
         focusRenderedCell(result.focusTarget);
       }
     },
-    [buildRowsFromData, focusRenderedCell],
+    [buildRowsFromData, focusRenderedCell, setEditingCellState, setEditingValueState],
   );
 
   const cancelCellEditFn = useCallback((): void => {
     const hadEditingCell = editingCellRef.current !== null;
     const result = cancelGridCellEditCommand(gridApiRef.current!, {
       getEditingCell: () => editingCellRef.current,
-      setEditingCell: (ec) => setEditingCell(ec),
-      setEditingValue: (ev) => setEditingValue(ev),
+      setEditingCell: setEditingCellState,
+      setEditingValue: setEditingValueState,
       findRowById: (rowId) =>
         coreFindGridRowById(buildRowsFromData(optionsRef.current.data), rowId),
       findColumnByName: (columnName) =>
@@ -1009,7 +1035,7 @@ export function useGridState(
     if (!hadEditingCell) return;
     editorFocusTokenRef.current += 1;
     if (result.focusTarget) focusRenderedCell(result.focusTarget);
-  }, [buildRowsFromData, focusRenderedCell]);
+  }, [buildRowsFromData, focusRenderedCell, setEditingCellState, setEditingValueState]);
 
   const moveFocusFn = useCallback(
     (
@@ -1019,7 +1045,9 @@ export function useGridState(
       triggerEvent?: Event | KeyboardEvent | null,
     ): boolean => {
       const nextCell = findNextGridCell({
-        rows: pipelineRef.current.visibleRows,
+        rows: pipelineRef.current.displayItems
+          .filter((item) => item.kind === 'row')
+          .map((item) => (item as RowItem).row),
         columns: visibleColumnsRef.current,
         rowId: row.id,
         columnName: column.name,
@@ -1111,8 +1139,8 @@ export function useGridState(
     setHiddenRowReasons({});
     setCollapsedGroups({});
     setFocusedCell(null);
-    setEditingCell(null);
-    setEditingValue('');
+    setEditingCellState(null);
+    setEditingValueState('');
     setExpandedRows({});
     setExpandedTreeRows({});
     setColumnOrder(options.columnDefs.map((column) => column.name));
@@ -1155,8 +1183,11 @@ export function useGridState(
 
   // --- Auto resize effect ---
 
+  // Auto-resize is on by default so the grid fills its container. The
+  // ResizeObserver measures the host element and writes `autoViewportHeight`
+  // so the grid always fills available space (matching the old ui-grid).
   useEffect(() => {
-    if (!FEATURE_AUTO_RESIZE || !options.enableAutoResize) return;
+    if (!FEATURE_AUTO_RESIZE) return;
 
     const container = gridContainerRef.current;
     if (!container) return;
@@ -1175,14 +1206,14 @@ export function useGridState(
       lastGridHeightRef.current = nextHeight;
       lastGridWidthRef.current = nextWidth;
 
-      if (!options.viewportHeight && nextHeight > 0) {
+      if (nextHeight > 0) {
         setAutoViewportHeight(nextHeight);
       }
     });
 
     if (!observer) return;
     return () => observer.disconnect();
-  }, [options.enableAutoResize, options.viewportHeight, gridApi]);
+  }, [options.enableAutoResize, gridApi]);
 
   // --- Computed values ---
 
@@ -1194,7 +1225,7 @@ export function useGridState(
   const paginationCurrentPage = getCurrentPageValueFn();
   const paginationTotalPages = getTotalPagesValueFn();
   const paginationSelectedPageSize = effectivePageSizeFn(pipeline.totalItems);
-  const viewportHeightPx = computeViewportHeightPx(options.viewportHeight, autoViewportHeight);
+  const viewportHeightPx = computeViewportHeightPx(autoViewportHeight, options.minRowsToShow, options.rowHeight);
 
   // --- Display helper functions ---
 
@@ -1283,6 +1314,12 @@ export function useGridState(
     return isGridCellPosition(focusedCellRef.current, row.id, column.name);
   }, []);
 
+  const isFocusedRowFn = useCallback((row: GridRow): boolean => {
+    return (
+      focusedCellRef.current?.rowId === row.id || editingCellRef.current?.rowId === row.id
+    );
+  }, []);
+
   const isEditingCellFn = useCallback((row: GridRow, column: GridColumnDef): boolean => {
     return isGridCellPosition(editingCellRef.current, row.id, column.name);
   }, []);
@@ -1445,35 +1482,46 @@ export function useGridState(
 
   const handleCellKeyDownFn = useCallback(
     (row: GridRow, column: GridColumnDef, event: React.KeyboardEvent): void => {
-      focusCellFn(row, column, event.nativeEvent);
+      if (isGridNavigationKey(event.key)) {
+        setFocusedCell({ rowId: row.id, columnName: column.name });
+      } else {
+        focusCellFn(row, column, event.nativeEvent);
+      }
 
       switch (event.key) {
         case 'ArrowLeft':
           event.preventDefault();
+          event.stopPropagation();
           moveFocusFn(row, column, 'left', event.nativeEvent);
           return;
         case 'ArrowRight':
           event.preventDefault();
+          event.stopPropagation();
           moveFocusFn(row, column, 'right', event.nativeEvent);
           return;
         case 'ArrowUp':
           event.preventDefault();
+          event.stopPropagation();
           moveFocusFn(row, column, 'up', event.nativeEvent);
           return;
         case 'ArrowDown':
           event.preventDefault();
+          event.stopPropagation();
           moveFocusFn(row, column, 'down', event.nativeEvent);
           return;
         case 'Tab':
           event.preventDefault();
+          event.stopPropagation();
           moveFocusFn(row, column, event.shiftKey ? 'left' : 'right', event.nativeEvent);
           return;
         case 'Enter':
           event.preventDefault();
+          event.stopPropagation();
           moveFocusFn(row, column, event.shiftKey ? 'up' : 'down', event.nativeEvent);
           return;
         case 'F2':
           event.preventDefault();
+          event.stopPropagation();
           if (isCellEditable(row, column, event.nativeEvent)) {
             startCellEditFn(row, column, event.nativeEvent);
           }
@@ -1482,6 +1530,7 @@ export function useGridState(
         case 'Delete':
           if (isCellEditable(row, column, event.nativeEvent)) {
             event.preventDefault();
+            event.stopPropagation();
             startCellEditFn(row, column, event.nativeEvent, '');
           }
           return;
@@ -1494,6 +1543,7 @@ export function useGridState(
         isCellEditable(row, column, event.nativeEvent)
       ) {
         event.preventDefault();
+        event.stopPropagation();
         startCellEditFn(row, column, event.nativeEvent, event.key);
       }
     },
@@ -1511,24 +1561,33 @@ export function useGridState(
   );
 
   const updateEditingValueFn = useCallback((value: string): void => {
-    setEditingValue(value);
-  }, []);
+    setEditingValueState(value);
+  }, [setEditingValueState]);
 
   const handleEditorKeyDownFn = useCallback(
     (event: React.KeyboardEvent): void => {
       if (event.key === 'Escape') {
         event.preventDefault();
+        event.stopPropagation();
         cancelCellEditFn();
         return;
       }
       if (event.key === 'Enter') {
         event.preventDefault();
+        event.stopPropagation();
         commitCellEditFn(event.shiftKey ? 'up' : 'down');
         return;
       }
       if (event.key === 'Tab') {
         event.preventDefault();
+        event.stopPropagation();
         commitCellEditFn(event.shiftKey ? 'left' : 'right');
+        return;
+      }
+      if (event.key === 'ArrowUp' || event.key === 'ArrowDown') {
+        event.preventDefault();
+        event.stopPropagation();
+        commitCellEditFn(event.key === 'ArrowUp' ? 'up' : 'down');
       }
     },
     [cancelCellEditFn, commitCellEditFn],
@@ -1599,6 +1658,90 @@ export function useGridState(
     [setPaginationPageSizeFn],
   );
 
+  // --- Column resizing ---
+
+  const canResizeColumnsFn = useCallback((): boolean => {
+    return optionsRef.current.enableColumnResizing !== false;
+  }, []);
+
+  const setColumnWidthOverrideFn = useCallback((columnName: string, widthPx: number): void => {
+    const nextWidth = `${Math.max(88, Math.round(widthPx))}px`;
+    setColumnWidthOverrides((current) => ({ ...current, [columnName]: nextWidth }));
+  }, []);
+
+  const measureAutoColumnWidthFn = useCallback((columnName: string): number => {
+    const container = gridContainerRef.current;
+    if (container == null) return 176;
+    const escaped = CSS.escape ? CSS.escape(columnName) : columnName.replace(/([\\".#:[\](){}+~> ])/g, '\\$1');
+    const selectors = [
+      `.header-cell[data-col-name="${escaped}"]`,
+      `.filter-cell[data-col-name="${escaped}"]`,
+      `.body-cell[data-col-name="${escaped}"] .cell-shell`,
+    ];
+    let maxWidth = 0;
+    for (const selector of selectors) {
+      const elements = container.querySelectorAll<HTMLElement>(selector);
+      for (const element of elements) {
+        maxWidth = Math.max(maxWidth, element.scrollWidth);
+      }
+    }
+    return maxWidth + 12;
+  }, []);
+
+  const handleHeaderResizeMouseDownFn = useCallback(
+    (column: GridColumnDef, event: React.MouseEvent): void => {
+      if (!canResizeColumnsFn()) return;
+      event.preventDefault();
+      event.stopPropagation();
+
+      const headerCell = (event.currentTarget as HTMLElement).closest<HTMLElement>('.header-cell');
+      if (headerCell == null) return;
+
+      const startX = event.clientX;
+      const startWidth = headerCell.getBoundingClientRect().width;
+      let lastWidth = startWidth;
+
+      const handleMove = (moveEvent: MouseEvent): void => {
+        lastWidth = Math.max(88, startWidth + (moveEvent.clientX - startX));
+
+        // Compute the new column template directly — no React state, no re-render.
+        // This keeps virtualized resize smooth since the pipeline never re-runs mid-drag.
+        const widthStr = `${Math.round(lastWidth)}px`;
+        const newTemplate = buildGridTemplateColumns(
+          visibleColumnsRef.current.map((c) =>
+            c.name === column.name ? { ...c, width: widthStr } : c,
+          ),
+        );
+        gridContainerRef.current
+          ?.querySelectorAll<HTMLElement>('.header-grid, .filter-grid, .body-grid')
+          .forEach((el) => {
+            el.style.gridTemplateColumns = newTemplate;
+          });
+      };
+
+      const handleUp = (): void => {
+        window.removeEventListener('mousemove', handleMove);
+        window.removeEventListener('mouseup', handleUp);
+        // Commit the final width to React state once — triggers one clean re-render.
+        setColumnWidthOverrideFn(column.name, lastWidth);
+      };
+
+      window.addEventListener('mousemove', handleMove);
+      window.addEventListener('mouseup', handleUp);
+    },
+    [canResizeColumnsFn, setColumnWidthOverrideFn],
+  );
+
+  const autoSizeColumnFn = useCallback(
+    (column: GridColumnDef, event: React.MouseEvent): void => {
+      if (!canResizeColumnsFn()) return;
+      event.preventDefault();
+      event.stopPropagation();
+      setColumnWidthOverrideFn(column.name, measureAutoColumnWidthFn(column.name));
+    },
+    [canResizeColumnsFn, setColumnWidthOverrideFn, measureAutoColumnWidthFn],
+  );
+
   const onViewportScrollFn = useCallback((startIndex: number): void => {
     if (!scrollingRef.current) {
       scrollingRef.current = true;
@@ -1627,8 +1770,9 @@ export function useGridState(
       startIndex,
       visibleRows: pipelineRef.current.visibleRows.length,
       viewportRows: computeViewportRows(
-        optionsRef.current.viewportHeight,
+        autoViewportHeight,
         optionsRef.current.rowHeight,
+        optionsRef.current.minRowsToShow,
       ),
       threshold: optionsRef.current.infiniteScrollRowsFromEnd ?? 20,
       setState: (state) => setInfiniteScrollState(state),
@@ -1667,6 +1811,7 @@ export function useGridState(
     paginationSelectedPageSize,
     rowSize,
     viewportHeightPx,
+    autoViewportHeight,
 
     headerLabel: headerLabelFn,
     isGroupItem: isGroupItemFn,
@@ -1683,6 +1828,7 @@ export function useGridState(
     groupDisclosureLabel: groupDisclosureLabelFn,
     displayValue: displayValueFn,
     isFocusedCell: isFocusedCellFn,
+    isFocusedRow: isFocusedRowFn,
     isEditingCell: isEditingCellFn,
     editorInputType: editorInputTypeFn,
     cellContext: cellContextFn,
@@ -1732,6 +1878,9 @@ export function useGridState(
     toggleTreeRow: toggleTreeRowFn,
     moveColumn: moveColumnFn,
     moveVisibleColumn: moveVisibleColumnFn,
+    canResizeColumns: canResizeColumnsFn,
+    handleHeaderResizeMouseDown: handleHeaderResizeMouseDownFn,
+    autoSizeColumn: autoSizeColumnFn,
     nextPage: nextPageFn,
     previousPage: previousPageFn,
     onPageSizeChange: onPageSizeChangeFn,

package/tsconfig.dts.json

@@ -7,9 +7,10 @@
     "outDir": "./dist",
     "rootDir": "./src",
     "paths": {
-      "@ornery/ui-grid-core": ["../ui-grid-core/dist/index.d.ts"]
+      "@ornery/ui-grid-core": ["../ui-grid-core/dist/index.d.ts"],
+      "@ornery/ui-grid-vanilla": ["../ui-grid-vanilla/dist/index.d.ts"]
     }
   },
   "include": ["src/**/*.ts", "src/**/*.tsx"],
-  "exclude": ["src/**/*.test.ts", "src/**/*.test.tsx"]
+  "exclude": ["src/**/*.test.ts", "src/**/*.test.tsx", "src/test-setup.ts"]
 }

package/tsconfig.json

@@ -7,7 +7,8 @@
     "declarationMap": true,
     "baseUrl": ".",
     "paths": {
-      "@ornery/ui-grid-core": ["../ui-grid-core/src/index.ts"]
+      "@ornery/ui-grid-core": ["../ui-grid-core/src/index.ts"],
+      "@ornery/ui-grid-vanilla": ["../ui-grid-vanilla/src/index.ts"]
     }
   },
   "include": ["src"]

package/vitest.config.ts

@@ -5,10 +5,12 @@ export default defineConfig({
   resolve: {
     alias: {
       '@ornery/ui-grid-core': path.resolve(__dirname, '../ui-grid-core/src/index.ts'),
+      '@ornery/ui-grid-vanilla': path.resolve(__dirname, '../ui-grid-vanilla/src/index.ts'),
     },
   },
   test: {
     environment: 'jsdom',
     globals: true,
+    setupFiles: ['./src/test-setup.ts'],
   },
 });