@alaarab/ogrid-react 2.4.0 → 2.4.2

package/dist/esm/index.js

@@ -1200,7 +1200,8 @@ function computeCellDescriptor(item, col, rowIndex, colIdx, input) {
     globalColIndex,
     rowId,
     rowIndex,
-    displayValue: formulaDisplay !== void 0 ? formulaDisplay : cellValue
+    displayValue: formulaDisplay !== void 0 ? formulaDisplay : cellValue,
+    columnType: col.type
   };
 }
 function resolveCellDisplayContent(col, item, displayValue) {
@@ -1314,6 +1315,8 @@ var CHECKBOX_COLUMN_WIDTH = 48;
 var ROW_NUMBER_COLUMN_WIDTH = 50;
 var DEFAULT_MIN_COLUMN_WIDTH = 80;
 var CELL_PADDING = 16;
+var ROW_NUMBER_COLUMN_MIN_WIDTH = 30;
+var ROW_NUMBER_COLUMN_ID = "__row_number__";
 var GRID_BORDER_RADIUS = 6;
 var AUTOSIZE_EXTRA_PX = 16;
 var AUTOSIZE_MAX_PX = 520;
@@ -8803,6 +8806,7 @@ function useKeyboardNavigation(params) {
         case "ArrowUp":
         case "ArrowRight":
         case "ArrowLeft": {
+          if (editingCell != null) break;
           e.preventDefault();
           const { newRowIndex, newColumnIndex, newRange } = computeArrowNavigation({
             direction: e.key,
@@ -10792,9 +10796,10 @@ function useColumnResize({
         [columnId]: { widthPx: latestWidth }
       }));
     };
+    const effectiveMinWidth = columnId === ROW_NUMBER_COLUMN_ID ? ROW_NUMBER_COLUMN_MIN_WIDTH : minWidth;
     const onMove = (moveEvent) => {
       const deltaX = moveEvent.clientX - startX;
-      latestWidth = Math.max(minWidth, startWidth + deltaX);
+      latestWidth = Math.max(effectiveMinWidth, startWidth + deltaX);
       if (!rafRef.current) {
         rafRef.current = requestAnimationFrame(() => {
           rafRef.current = 0;
@@ -10855,9 +10860,14 @@ function getSelectDisplayText(value, formatValue) {
   return value != null ? String(value) : "";
 }
 function useRichSelectState(params) {
-  const { values, formatValue, onCommit, onCancel } = params;
+  const { values, formatValue, initialValue, onCommit, onCancel } = params;
   const [searchText, setSearchText] = useState("");
-  const [highlightedIndex, setHighlightedIndex] = useState(0);
+  const initialIndex = values.findIndex((v) => String(v) === String(initialValue));
+  const [highlightedIndex, setHighlightedIndex] = useState(Math.max(initialIndex, 0));
+  useEffect(() => {
+    const idx = values.findIndex((v) => String(v) === String(initialValue));
+    setHighlightedIndex(Math.max(idx, 0));
+  }, [initialValue, values]);
   const getDisplayText = useCallback(
     (value) => getSelectDisplayText(value, formatValue),
     [formatValue]
@@ -10919,6 +10929,10 @@ function useSelectState(params) {
   );
   const initialIndex = values.findIndex((v) => String(v) === String(initialValue));
   const [highlightedIndex, setHighlightedIndex] = useState(Math.max(initialIndex, 0));
+  useEffect(() => {
+    const idx = values.findIndex((v) => String(v) === String(initialValue));
+    setHighlightedIndex(Math.max(idx, 0));
+  }, [initialValue, values]);
   useEffect(() => {
     const dropdown = dropdownRef.current;
     if (!dropdown) return;
@@ -12990,12 +13004,15 @@ var selectChevronStyle = {
 function BaseInlineCellEditor(props) {
   const { value, column, editorType, onCommit, onCancel, renderCheckbox } = props;
   const wrapperRef = React5.useRef(null);
+  const onCancelRef = React5.useRef(onCancel);
+  onCancelRef.current = onCancel;
   const { localValue, setLocalValue, handleKeyDown, handleBlur, commit, cancel } = useInlineCellEditorState({ value, editorType, onCommit, onCancel });
   const editorValues = column.cellEditorParams?.values ?? [];
   const editorFormatValue = column.cellEditorParams?.formatValue;
   const richSelect = useRichSelectState({
     values: editorValues,
     formatValue: editorFormatValue,
+    initialValue: value,
     onCommit,
     onCancel
   });
@@ -13028,6 +13045,16 @@ function BaseInlineCellEditor(props) {
       boxShadow: "var(--ogrid-shadow, 0 4px 16px rgba(0,0,0,0.2))",
       textAlign: "left"
     });
+    const scrollParent = wrapper.closest(".ogrid-table-wrapper") ?? wrapper.closest('[style*="overflow"]');
+    const handleScroll = () => onCancelRef.current();
+    if (scrollParent) {
+      scrollParent.addEventListener("scroll", handleScroll, { passive: true });
+    }
+    window.addEventListener("scroll", handleScroll, { passive: true });
+    return () => {
+      if (scrollParent) scrollParent.removeEventListener("scroll", handleScroll);
+      window.removeEventListener("scroll", handleScroll);
+    };
   }, [editorType]);
   const computedDropdownStyle = fixedDropdownStyle ?? richSelectDropdownStyle;
   React5.useEffect(() => {
@@ -13893,4 +13920,4 @@ function createBaseFilterRenderers(components, dateClassNames) {
   };
 }
 
-export { BaseColumnHeaderMenu, BaseDropIndicator, BaseEmptyState, BaseInlineCellEditor, BaseLoadingOverlay, CELL_PADDING, CHECKBOX_COLUMN_WIDTH, COLUMN_HEADER_MENU_ITEMS, CURSOR_CELL_STYLE, CellDescriptorCache, CellErrorBoundary, ColumnChooserContent, DEFAULT_MIN_COLUMN_WIDTH, DateFilterContent, EmptyState, FormulaBar, FormulaRefOverlay, GRID_BORDER_RADIUS, GRID_CONTEXT_MENU_ITEMS, GRID_ROOT_STYLE, GridContextMenu, MAX_PAGE_BUTTONS, MarchingAntsOverlay, NOOP3 as NOOP, OGridLayout, PAGE_SIZE_OPTIONS, POPOVER_ANCHOR_STYLE, PREVENT_DEFAULT, PaginationControlsBase, ROW_NUMBER_COLUMN_WIDTH, STOP_PROPAGATION, SheetTabs, SideBar, StatusBar, UndoRedoStack, areGridRowPropsEqual, booleanParser, buildCsvHeader, buildCsvRows, buildHeaderRows, buildInlineEditorProps2 as buildInlineEditorProps, buildPopoverEditorProps2 as buildPopoverEditorProps, clampSelectionToBounds, computeAggregations, computeAutoScrollSpeed, computeTabNavigation, createBaseFilterRenderers, createOGrid, currencyParser, dateParser, deriveFilterOptionsFromData, editorInputStyle, editorWrapperStyle, emailParser, escapeCsvValue, exportToCsv, findCtrlArrowTarget, flattenColumns, formatCellReference, formatCellValueForTsv, formatSelectionAsTsv, formatShortcut, getCellInteractionProps, getCellRenderDescriptor, getCellValue, getColumnHeaderFilterStateParams, getColumnHeaderMenuItems, getColumnHeaderMenuProps, getContextMenuHandlers, getDataGridStatusBarConfig, getDateFilterContentProps, getFilterField, getHeaderFilterConfig, getMultiSelectFilterFields, getPaginationViewModel, getStatusBarParts, indexToColumnLetter, isInSelectionRange, isRowInRange, mergeFilter, normalizeSelectionRange, numberParser, parseTsvClipboard, parseValue, partitionColumnsForVirtualization, processClientSideData, rangesEqual, renderFilterContent, resolveCellDisplayContent2 as resolveCellDisplayContent, resolveCellStyle2 as resolveCellStyle, richSelectDropdownStyle, richSelectNoMatchesStyle, richSelectOptionHighlightedStyle, richSelectOptionStyle, richSelectWrapperStyle, selectChevronStyle, selectDisplayStyle, selectEditorStyle, toUserLike, triggerCsvDownload, useActiveCell, useCellEditing, useCellSelection, useClipboard, useColumnChooserState, useColumnHeaderFilterState, useColumnMeta, useColumnReorder, useColumnResize, useContextMenu, useDataGridState, useDataGridTableOrchestration, useDateFilterState, useDebounce, useFillHandle, useFilterOptions, useFormulaBar, useFormulaEngine, useInlineCellEditorState, useKeyboardNavigation, useLatestRef, useListVirtualizer, useMultiSelectFilterState, useOGrid, usePaginationControls, usePeopleFilterState, useRichSelectState, useRowSelection, useSelectState, useSideBarState, useTableLayout, useTextFilterState, useUndoRedo, useVirtualScroll };
+export { BaseColumnHeaderMenu, BaseDropIndicator, BaseEmptyState, BaseInlineCellEditor, BaseLoadingOverlay, CELL_PADDING, CHECKBOX_COLUMN_WIDTH, COLUMN_HEADER_MENU_ITEMS, CURSOR_CELL_STYLE, CellDescriptorCache, CellErrorBoundary, ColumnChooserContent, DEFAULT_MIN_COLUMN_WIDTH, DateFilterContent, EmptyState, FormulaBar, FormulaRefOverlay, GRID_BORDER_RADIUS, GRID_CONTEXT_MENU_ITEMS, GRID_ROOT_STYLE, GridContextMenu, MAX_PAGE_BUTTONS, MarchingAntsOverlay, NOOP3 as NOOP, OGridLayout, PAGE_SIZE_OPTIONS, POPOVER_ANCHOR_STYLE, PREVENT_DEFAULT, PaginationControlsBase, ROW_NUMBER_COLUMN_ID, ROW_NUMBER_COLUMN_MIN_WIDTH, ROW_NUMBER_COLUMN_WIDTH, STOP_PROPAGATION, SheetTabs, SideBar, StatusBar, UndoRedoStack, areGridRowPropsEqual, booleanParser, buildCsvHeader, buildCsvRows, buildHeaderRows, buildInlineEditorProps2 as buildInlineEditorProps, buildPopoverEditorProps2 as buildPopoverEditorProps, clampSelectionToBounds, computeAggregations, computeAutoScrollSpeed, computeTabNavigation, createBaseFilterRenderers, createOGrid, currencyParser, dateParser, deriveFilterOptionsFromData, editorInputStyle, editorWrapperStyle, emailParser, escapeCsvValue, exportToCsv, findCtrlArrowTarget, flattenColumns, formatCellReference, formatCellValueForTsv, formatSelectionAsTsv, formatShortcut, getCellInteractionProps, getCellRenderDescriptor, getCellValue, getColumnHeaderFilterStateParams, getColumnHeaderMenuItems, getColumnHeaderMenuProps, getContextMenuHandlers, getDataGridStatusBarConfig, getDateFilterContentProps, getFilterField, getHeaderFilterConfig, getMultiSelectFilterFields, getPaginationViewModel, getStatusBarParts, indexToColumnLetter, isInSelectionRange, isRowInRange, mergeFilter, normalizeSelectionRange, numberParser, parseTsvClipboard, parseValue, partitionColumnsForVirtualization, processClientSideData, rangesEqual, renderFilterContent, resolveCellDisplayContent2 as resolveCellDisplayContent, resolveCellStyle2 as resolveCellStyle, richSelectDropdownStyle, richSelectNoMatchesStyle, richSelectOptionHighlightedStyle, richSelectOptionStyle, richSelectWrapperStyle, selectChevronStyle, selectDisplayStyle, selectEditorStyle, toUserLike, triggerCsvDownload, useActiveCell, useCellEditing, useCellSelection, useClipboard, useColumnChooserState, useColumnHeaderFilterState, useColumnMeta, useColumnReorder, useColumnResize, useContextMenu, useDataGridState, useDataGridTableOrchestration, useDateFilterState, useDebounce, useFillHandle, useFilterOptions, useFormulaBar, useFormulaEngine, useInlineCellEditorState, useKeyboardNavigation, useLatestRef, useListVirtualizer, useMultiSelectFilterState, useOGrid, usePaginationControls, usePeopleFilterState, useRichSelectState, useRowSelection, useSelectState, useSideBarState, useTableLayout, useTextFilterState, useUndoRedo, useVirtualScroll };

package/dist/types/index.d.ts

@@ -1,4 +1,4 @@
-export { CHECKBOX_COLUMN_WIDTH, ROW_NUMBER_COLUMN_WIDTH, DEFAULT_MIN_COLUMN_WIDTH, CELL_PADDING, GRID_BORDER_RADIUS, } from '@alaarab/ogrid-core';
+export { CHECKBOX_COLUMN_WIDTH, ROW_NUMBER_COLUMN_WIDTH, ROW_NUMBER_COLUMN_MIN_WIDTH, ROW_NUMBER_COLUMN_ID, DEFAULT_MIN_COLUMN_WIDTH, CELL_PADDING, GRID_BORDER_RADIUS, } from '@alaarab/ogrid-core';
 export type { ColumnFilterType, IColumnFilterDef, IColumnMeta, IColumnDef, IColumnGroupDef, IColumnDefinition, ICellValueChangedEvent, ICellEditorProps, CellEditorParams, IValueParserParams, UserLike, UserLikeInput, FilterValue, IFilters, IFetchParams, IPageResult, IDataSource, IGridColumnState, IOGridApi, IOGridProps, IOGridDataGridProps, RowSelectionMode, RowId, IRowSelectionChangeEvent, StatusBarPanel, IStatusBarProps, IActiveCell, ISelectionRange, HeaderCell, HeaderRow, SideBarPanelId, ISideBarDef, IDateFilterValue, IVirtualScrollConfig, IColumnReorderConfig, ISheetDef, } from './types';
 export { toUserLike, isInSelectionRange, normalizeSelectionRange } from './types';
 export { useFilterOptions, useOGrid, useActiveCell, useCellEditing, useContextMenu, useCellSelection, useClipboard, useRowSelection, useKeyboardNavigation, useUndoRedo, useDebounce, useFillHandle, useDataGridState, useColumnHeaderFilterState, useTextFilterState, useMultiSelectFilterState, usePeopleFilterState, useDateFilterState, useColumnChooserState, useInlineCellEditorState, useColumnResize, useRichSelectState, useSelectState, useSideBarState, useTableLayout, useColumnReorder, useVirtualScroll, useListVirtualizer, useLatestRef, usePaginationControls, useDataGridTableOrchestration, useColumnMeta, useFormulaEngine, useFormulaBar, getColumnHeaderMenuProps, } from './hooks';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@alaarab/ogrid-react",
-  "version": "2.4.0",
+  "version": "2.4.2",
   "description": "OGrid React – React hooks, headless components, and utilities for OGrid data grids.",
   "main": "dist/esm/index.js",
   "module": "dist/esm/index.js",
@@ -39,7 +39,7 @@
     "node": ">=18"
   },
   "dependencies": {
-    "@alaarab/ogrid-core": "2.4.0",
+    "@alaarab/ogrid-core": "2.4.2",
     "@tanstack/react-virtual": "^3.0.0"
   },
   "peerDependencies": {