@alaarab/ogrid-react 2.0.23 → 2.1.0

package/dist/esm/hooks/useFilterOptions.js

@@ -1,4 +1,4 @@
-import { useState, useEffect, useCallback, useMemo } from 'react';
+import { useState, useEffect, useCallback } from 'react';
 /**
  * Load filter options for the given fields from a data source.
  *
@@ -7,7 +7,6 @@ import { useState, useEffect, useCallback, useMemo } from 'react';
 export function useFilterOptions(dataSource, fields) {
     const [filterOptions, setFilterOptions] = useState({});
     const [loadingOptions, setLoadingOptions] = useState({});
-    const fieldsKey = useMemo(() => [...fields].sort().join(','), [fields]);
     const load = useCallback(async () => {
         const fetcher = 'fetchFilterOptions' in dataSource && typeof dataSource.fetchFilterOptions === 'function'
             ? dataSource.fetchFilterOptions.bind(dataSource)
@@ -31,8 +30,7 @@ export function useFilterOptions(dataSource, fields) {
         }));
         setFilterOptions(results);
         setLoadingOptions({});
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [dataSource, fieldsKey]);
+    }, [dataSource, fields]);
     useEffect(() => {
         load().catch(() => { });
     }, [load]);

package/dist/esm/hooks/useInlineCellEditorState.js

@@ -10,35 +10,29 @@ import { useState, useCallback } from 'react';
 export function useInlineCellEditorState(params) {
     const { value, editorType, onCommit, onCancel } = params;
     const [localValue, setLocalValue] = useState(value !== null && value !== undefined ? String(value) : '');
-    const commit = useCallback((v) => {
-        onCommit(v);
-    }, [onCommit]);
-    const cancel = useCallback(() => {
-        onCancel();
-    }, [onCancel]);
     const handleKeyDown = useCallback((e) => {
         if (e.key === 'Escape') {
             e.preventDefault();
             e.stopPropagation(); // Don't let the grid handler clear selection on Escape
-            cancel();
+            onCancel();
         }
         if (e.key === 'Enter' && editorType === 'text') {
             e.preventDefault();
             e.stopPropagation(); // Don't let the grid handler re-open an editor
-            commit(localValue);
+            onCommit(localValue);
         }
-    }, [cancel, commit, localValue, editorType]);
+    }, [onCancel, onCommit, localValue, editorType]);
     const handleBlur = useCallback(() => {
         if (editorType === 'text') {
-            commit(localValue);
+            onCommit(localValue);
         }
-    }, [editorType, localValue, commit]);
+    }, [editorType, localValue, onCommit]);
     return {
         localValue,
         setLocalValue,
         handleKeyDown,
         handleBlur,
-        commit,
-        cancel,
+        commit: onCommit,
+        cancel: onCancel,
     };
 }

package/dist/esm/hooks/useKeyboardNavigation.js

@@ -1,6 +1,5 @@
 import { useCallback, useRef } from 'react';
-import { normalizeSelectionRange } from '../types';
-import { getCellValue, parseValue, findCtrlArrowTarget, computeTabNavigation } from '../utils';
+import { getCellValue, computeTabNavigation, computeArrowNavigation, applyCellDeletion } from '../utils';
 /**
  * Handles all keyboard navigation, shortcuts, and cell editing triggers for the grid.
  * @param params - Grouped data, state, handlers, and feature flags for keyboard interactions.
@@ -70,114 +69,23 @@ export function useKeyboardNavigation(params) {
                     void handlePaste();
                 }
                 break;
-            case 'ArrowDown': {
-                e.preventDefault();
-                const ctrl = e.ctrlKey || e.metaKey;
-                const newRow = ctrl
-                    ? findCtrlArrowTarget(rowIndex, maxRowIndex, 1, (r) => isEmptyAt(r, Math.max(0, dataColIndex)))
-                    : Math.min(rowIndex + 1, maxRowIndex);
-                if (shift) {
-                    setSelectionRange(normalizeSelectionRange({
-                        startRow: selectionRange?.startRow ?? rowIndex,
-                        startCol: selectionRange?.startCol ?? dataColIndex,
-                        endRow: newRow,
-                        endCol: selectionRange?.endCol ?? dataColIndex,
-                    }));
-                }
-                else {
-                    setSelectionRange({
-                        startRow: newRow,
-                        startCol: dataColIndex,
-                        endRow: newRow,
-                        endCol: dataColIndex,
-                    });
-                }
-                setActiveCell({ rowIndex: newRow, columnIndex });
-                break;
-            }
-            case 'ArrowUp': {
-                e.preventDefault();
-                const ctrl = e.ctrlKey || e.metaKey;
-                const newRowUp = ctrl
-                    ? findCtrlArrowTarget(rowIndex, 0, -1, (r) => isEmptyAt(r, Math.max(0, dataColIndex)))
-                    : Math.max(rowIndex - 1, 0);
-                if (shift) {
-                    setSelectionRange(normalizeSelectionRange({
-                        startRow: selectionRange?.startRow ?? rowIndex,
-                        startCol: selectionRange?.startCol ?? dataColIndex,
-                        endRow: newRowUp,
-                        endCol: selectionRange?.endCol ?? dataColIndex,
-                    }));
-                }
-                else {
-                    setSelectionRange({
-                        startRow: newRowUp,
-                        startCol: dataColIndex,
-                        endRow: newRowUp,
-                        endCol: dataColIndex,
-                    });
-                }
-                setActiveCell({ rowIndex: newRowUp, columnIndex });
-                break;
-            }
-            case 'ArrowRight': {
-                e.preventDefault();
-                const ctrl = e.ctrlKey || e.metaKey;
-                let newCol;
-                if (ctrl && dataColIndex >= 0) {
-                    newCol = findCtrlArrowTarget(dataColIndex, visibleCols.length - 1, 1, (c) => isEmptyAt(rowIndex, c)) + colOffset;
-                }
-                else {
-                    newCol = Math.min(columnIndex + 1, maxColIndex);
-                }
-                const newDataCol = newCol - colOffset;
-                if (shift) {
-                    setSelectionRange(normalizeSelectionRange({
-                        startRow: selectionRange?.startRow ?? rowIndex,
-                        startCol: selectionRange?.startCol ?? dataColIndex,
-                        endRow: selectionRange?.endRow ?? rowIndex,
-                        endCol: newDataCol,
-                    }));
-                }
-                else {
-                    setSelectionRange({
-                        startRow: rowIndex,
-                        startCol: newDataCol,
-                        endRow: rowIndex,
-                        endCol: newDataCol,
-                    });
-                }
-                setActiveCell({ rowIndex, columnIndex: newCol });
-                break;
-            }
+            case 'ArrowDown':
+            case 'ArrowUp':
+            case 'ArrowRight':
             case 'ArrowLeft': {
                 e.preventDefault();
-                const ctrl = e.ctrlKey || e.metaKey;
-                let newColLeft;
-                if (ctrl && dataColIndex >= 0) {
-                    newColLeft = findCtrlArrowTarget(dataColIndex, 0, -1, (c) => isEmptyAt(rowIndex, c)) + colOffset;
-                }
-                else {
-                    newColLeft = Math.max(columnIndex - 1, colOffset);
-                }
-                const newDataColLeft = newColLeft - colOffset;
-                if (shift) {
-                    setSelectionRange(normalizeSelectionRange({
-                        startRow: selectionRange?.startRow ?? rowIndex,
-                        startCol: selectionRange?.startCol ?? dataColIndex,
-                        endRow: selectionRange?.endRow ?? rowIndex,
-                        endCol: newDataColLeft,
-                    }));
-                }
-                else {
-                    setSelectionRange({
-                        startRow: rowIndex,
-                        startCol: newDataColLeft,
-                        endRow: rowIndex,
-                        endCol: newDataColLeft,
-                    });
-                }
-                setActiveCell({ rowIndex, columnIndex: newColLeft });
+                const { newRowIndex, newColumnIndex, newRange } = computeArrowNavigation({
+                    direction: e.key,
+                    rowIndex, columnIndex, dataColIndex, colOffset,
+                    maxRowIndex, maxColIndex,
+                    visibleColCount: visibleCols.length,
+                    isCtrl: e.ctrlKey || e.metaKey,
+                    isShift: shift,
+                    selectionRange,
+                    isEmptyAt,
+                });
+                setSelectionRange(newRange);
+                setActiveCell({ rowIndex: newRowIndex, columnIndex: newColumnIndex });
                 break;
             }
             case 'Tab': {
@@ -317,30 +225,9 @@ export function useKeyboardNavigation(params) {
                 if (range == null)
                     break;
                 e.preventDefault();
-                const norm = normalizeSelectionRange(range);
-                for (let r = norm.startRow; r <= norm.endRow; r++) {
-                    for (let c = norm.startCol; c <= norm.endCol; c++) {
-                        if (r >= items.length || c >= visibleCols.length)
-                            continue;
-                        const item = items[r];
-                        const col = visibleCols[c];
-                        const colEditable = col.editable === true ||
-                            (typeof col.editable === 'function' && col.editable(item));
-                        if (!colEditable)
-                            continue;
-                        const oldValue = getCellValue(item, col);
-                        const result = parseValue('', oldValue, item, col);
-                        if (!result.valid)
-                            continue;
-                        onCellValueChanged({
-                            item,
-                            columnId: col.columnId,
-                            oldValue,
-                            newValue: result.value,
-                            rowIndex: r,
-                        });
-                    }
-                }
+                const deleteEvents = applyCellDeletion(range, items, visibleCols);
+                for (const evt of deleteEvents)
+                    onCellValueChanged(evt);
                 break;
             }
             case 'F10':

package/dist/esm/hooks/useMultiSelectFilterState.js

@@ -38,7 +38,7 @@ export function useMultiSelectFilterState(params) {
         });
     }, []);
     const handleSelectAll = useCallback(() => {
-        setTempSelected(new Set(filteredOptions));
+        setTempSelected((prev) => new Set([...prev, ...filteredOptions]));
     }, [filteredOptions]);
     const handleClearSelection = useCallback(() => setTempSelected(new Set()), []);
     const handleApplyMultiSelect = useCallback(() => {