@alaarab/ogrid-react 2.0.7 → 2.0.8

package/dist/esm/hooks/usePeopleFilterState.js

@@ -4,7 +4,7 @@
  * Includes debounced people search effect.
  */
 import { useState, useCallback, useEffect, useRef } from 'react';
-const PEOPLE_SEARCH_DEBOUNCE_MS = 300;
+import { PEOPLE_SEARCH_DEBOUNCE_MS } from '@alaarab/ogrid-core';
 export function usePeopleFilterState(params) {
     const { onUserChange, peopleSearch, isFilterOpen, filterType } = params;
     const peopleInputRef = useRef(null);

package/dist/esm/utils/dataGridViewModel.js

@@ -1,205 +1,39 @@
 /**
- * View model helpers for DataGridTable. Core owns the logic; UI packages only render.
+ * View model helpers for DataGridTable.
+ * Pure functions are now in @alaarab/ogrid-core. This file re-exports them
+ * and adds React-specific helpers / type narrowing.
  */
-import { getCellValue, isInSelectionRange } from '@alaarab/ogrid-core';
-/**
- * Returns ColumnHeaderFilter props from column def and grid filter/sort state.
- * Use in Fluent/Material/Radix DataGridTable instead of createHeaderWithFilter.
- */
-export function getHeaderFilterConfig(col, input) {
-    const filterable = col.filterable && typeof col.filterable === 'object' ? col.filterable : null;
-    const filterType = (filterable?.type ?? 'none');
-    const filterField = filterable?.filterField ?? col.columnId;
-    const sortable = col.sortable !== false;
-    const filterValue = input.filters[filterField];
-    const base = {
-        columnKey: col.columnId,
-        columnName: col.name,
-        filterType,
-        isSorted: input.sortBy === col.columnId,
-        isSortedDescending: input.sortBy === col.columnId && input.sortDirection === 'desc',
-        onSort: sortable ? () => input.onColumnSort(col.columnId) : undefined,
-    };
-    if (filterType === 'text') {
-        return {
-            ...base,
-            textValue: filterValue?.type === 'text' ? filterValue.value : '',
-            onTextChange: (v) => input.onFilterChange(filterField, v.trim() ? { type: 'text', value: v } : undefined),
-        };
-    }
-    if (filterType === 'people') {
-        return {
-            ...base,
-            selectedUser: filterValue?.type === 'people' ? filterValue.value : undefined,
-            onUserChange: (u) => input.onFilterChange(filterField, u ? { type: 'people', value: u } : undefined),
-            peopleSearch: input.peopleSearch,
-        };
-    }
-    if (filterType === 'multiSelect') {
-        return {
-            ...base,
-            options: input.filterOptions[filterField] ?? [],
-            isLoadingOptions: input.loadingFilterOptions[filterField] ?? false,
-            selectedValues: filterValue?.type === 'multiSelect' ? filterValue.value : [],
-            onFilterChange: (values) => input.onFilterChange(filterField, values.length ? { type: 'multiSelect', value: values } : undefined),
-        };
-    }
-    if (filterType === 'date') {
-        return {
-            ...base,
-            dateValue: filterValue?.type === 'date' ? filterValue.value : undefined,
-            onDateChange: (v) => input.onFilterChange(filterField, v ? { type: 'date', value: v } : undefined),
-        };
-    }
-    return base;
-}
-/**
- * Returns a descriptor for rendering a cell. UI uses this to decide editing-inline vs editing-popover vs display
- * and to apply isActive, isInRange, etc. without duplicating the boolean logic.
- */
-export function getCellRenderDescriptor(item, col, rowIndex, colIdx, input) {
-    const rowId = input.getRowId(item);
-    const globalColIndex = colIdx + input.colOffset;
-    const colEditable = col.editable === true ||
-        (typeof col.editable === 'function' && col.editable(item));
-    const canEditInline = input.editable !== false &&
-        !!colEditable &&
-        !!input.onCellValueChanged &&
-        typeof col.cellEditor !== 'function';
-    const canEditPopup = input.editable !== false &&
-        !!colEditable &&
-        !!input.onCellValueChanged &&
-        typeof col.cellEditor === 'function' &&
-        col.cellEditorPopup !== false;
-    const canEditAny = canEditInline || canEditPopup;
-    const isEditing = input.editingCell?.rowId === rowId &&
-        input.editingCell?.columnId === col.columnId;
-    const isActive = input.activeCell?.rowIndex === rowIndex &&
-        input.activeCell?.columnIndex === globalColIndex;
-    const isInRange = input.selectionRange != null &&
-        isInSelectionRange(input.selectionRange, rowIndex, colIdx);
-    const isInCutRange = input.cutRange != null &&
-        isInSelectionRange(input.cutRange, rowIndex, colIdx);
-    const isInCopyRange = input.copyRange != null &&
-        isInSelectionRange(input.copyRange, rowIndex, colIdx);
-    const isSelectionEndCell = !input.isDragging &&
-        input.copyRange == null &&
-        input.cutRange == null &&
-        input.selectionRange != null &&
-        rowIndex === input.selectionRange.endRow &&
-        colIdx === input.selectionRange.endCol;
-    const isPinned = col.pinned != null;
-    const pinnedSide = col.pinned ?? undefined;
-    let mode = 'display';
-    let editorType;
-    let value;
-    if (isEditing && canEditInline) {
-        mode = 'editing-inline';
-        if (col.cellEditor === 'text' ||
-            col.cellEditor === 'select' ||
-            col.cellEditor === 'checkbox' ||
-            col.cellEditor === 'richSelect' ||
-            col.cellEditor === 'date') {
-            editorType = col.cellEditor;
-        }
-        else if (col.type === 'date') {
-            editorType = 'date';
-        }
-        else if (col.type === 'boolean') {
-            editorType = 'checkbox';
-        }
-        else {
-            editorType = 'text';
-        }
-        value = getCellValue(item, col);
-    }
-    else if (isEditing && canEditPopup && typeof col.cellEditor === 'function') {
-        mode = 'editing-popover';
-        value = getCellValue(item, col);
-    }
-    else {
-        value = getCellValue(item, col);
-    }
-    return {
-        mode,
-        editorType,
-        value,
-        isActive,
-        isInRange,
-        isInCutRange,
-        isInCopyRange,
-        isSelectionEndCell,
-        canEditAny,
-        isPinned,
-        pinnedSide,
-        globalColIndex,
-        rowId,
-        rowIndex,
-        displayValue: value,
-    };
-}
-// --- Cell rendering helpers (reduce DataGridTable view-layer duplication) ---
+import { resolveCellDisplayContent as coreResolveCellDisplayContent, resolveCellStyle as coreResolveCellStyle, buildInlineEditorProps as coreBuildInlineEditorProps, buildPopoverEditorProps as coreBuildPopoverEditorProps, } from '@alaarab/ogrid-core';
+// Re-export pure functions from core (no type narrowing needed)
+export { getHeaderFilterConfig, getCellRenderDescriptor, } from '@alaarab/ogrid-core';
+// --- React-typed wrappers for functions that need type narrowing ---
 /**
  * Resolves display content for a cell in display mode.
- * Handles the renderCell → valueFormatter → String() fallback chain.
+ * Returns React.ReactNode for JSX compatibility.
  */
 export function resolveCellDisplayContent(col, item, displayValue) {
-    if (col.renderCell)
-        return col.renderCell(item);
-    if (col.valueFormatter)
-        return col.valueFormatter(displayValue, item);
-    if (displayValue == null)
-        return null;
-    if (col.type === 'date') {
-        const d = new Date(String(displayValue));
-        if (!Number.isNaN(d.getTime()))
-            return d.toLocaleDateString();
-    }
-    if (col.type === 'boolean') {
-        return displayValue ? 'True' : 'False';
-    }
-    return String(displayValue);
+    return coreResolveCellDisplayContent(col, item, displayValue);
 }
 /**
- * Resolves the cellStyle from a column def, handling both function and static values.
+ * Resolves the cellStyle from a column def.
+ * Returns React.CSSProperties for JSX compatibility.
  */
 export function resolveCellStyle(col, item) {
-    if (!col.cellStyle)
-        return undefined;
-    return typeof col.cellStyle === 'function' ? col.cellStyle(item) : col.cellStyle;
+    return coreResolveCellStyle(col, item);
 }
 /**
- * Builds props for InlineCellEditor. Shared across all UI packages.
+ * Builds props for InlineCellEditor with React-specific IColumnDef.
  */
 export function buildInlineEditorProps(item, col, descriptor, callbacks) {
-    return {
-        value: descriptor.value,
-        item,
-        column: col,
-        rowIndex: descriptor.rowIndex,
-        editorType: (descriptor.editorType ?? 'text'),
-        onCommit: (newValue) => callbacks.commitCellEdit(item, col.columnId, descriptor.value, newValue, descriptor.rowIndex, descriptor.globalColIndex),
-        onCancel: () => callbacks.setEditingCell(null),
-    };
+    const result = coreBuildInlineEditorProps(item, col, descriptor, callbacks);
+    return { ...result, column: col };
 }
 /**
- * Builds ICellEditorProps for custom popover editors. Shared across all UI packages.
+ * Builds ICellEditorProps for custom popover editors with React-specific IColumnDef.
  */
 export function buildPopoverEditorProps(item, col, descriptor, pendingEditorValue, callbacks) {
-    const oldValue = descriptor.value;
-    const displayValue = pendingEditorValue !== undefined ? pendingEditorValue : oldValue;
-    return {
-        value: displayValue,
-        onValueChange: callbacks.setPendingEditorValue,
-        onCommit: () => {
-            const newValue = pendingEditorValue !== undefined ? pendingEditorValue : oldValue;
-            callbacks.commitCellEdit(item, col.columnId, oldValue, newValue, descriptor.rowIndex, descriptor.globalColIndex);
-        },
-        onCancel: callbacks.cancelPopoverEdit,
-        item,
-        column: col,
-        cellEditorParams: col.cellEditorParams,
-    };
+    const result = coreBuildPopoverEditorProps(item, col, descriptor, pendingEditorValue, callbacks);
+    return { ...result, column: col };
 }
 export function getCellInteractionProps(descriptor, columnId, handlers) {
     return {

package/dist/esm/utils/index.js

@@ -1,5 +1,5 @@
 // Shared utilities re-exported from core
 export { escapeCsvValue, buildCsvHeader, buildCsvRows, exportToCsv, triggerCsvDownload, getCellValue, flattenColumns, buildHeaderRows, getFilterField, mergeFilter, deriveFilterOptionsFromData, getMultiSelectFilterFields, getStatusBarParts, getDataGridStatusBarConfig, getPaginationViewModel, PAGE_SIZE_OPTIONS, MAX_PAGE_BUTTONS, GRID_CONTEXT_MENU_ITEMS, getContextMenuHandlers, formatShortcut, parseValue, numberParser, currencyParser, dateParser, emailParser, booleanParser, computeAggregations, processClientSideData, } from '@alaarab/ogrid-core';
-// React-specific utilities (not in core)
+// View model utilities (re-exported from core + React-specific getCellInteractionProps)
 export { getHeaderFilterConfig, getCellRenderDescriptor, resolveCellDisplayContent, resolveCellStyle, buildInlineEditorProps, buildPopoverEditorProps, getCellInteractionProps, } from './dataGridViewModel';
 export { areGridRowPropsEqual, isRowInRange } from './gridRowComparator';

package/dist/types/utils/dataGridViewModel.d.ts

@@ -1,115 +1,27 @@
 /**
- * View model helpers for DataGridTable. Core owns the logic; UI packages only render.
+ * View model helpers for DataGridTable.
+ * Pure functions are now in @alaarab/ogrid-core. This file re-exports them
+ * and adds React-specific helpers / type narrowing.
  */
 import type * as React from 'react';
-import type { ColumnFilterType, ICellEditorProps, IDateFilterValue } from '../types/columnTypes';
 import type { IColumnDef } from '../types/columnTypes';
-import type { RowId, UserLike, IFilters, FilterValue } from '../types/dataGridTypes';
-export interface HeaderFilterConfigInput {
-    sortBy?: string;
-    sortDirection: 'asc' | 'desc';
-    onColumnSort: (columnKey: string) => void;
-    filters: IFilters;
-    onFilterChange: (key: string, value: FilterValue | undefined) => void;
-    filterOptions: Record<string, string[]>;
-    loadingFilterOptions: Record<string, boolean>;
-    peopleSearch?: (query: string) => Promise<UserLike[]>;
-}
-/** Props to pass to ColumnHeaderFilter. Matches IColumnHeaderFilterProps. */
-export interface HeaderFilterConfig {
-    columnKey: string;
-    columnName: string;
-    filterType: ColumnFilterType;
-    isSorted?: boolean;
-    isSortedDescending?: boolean;
-    onSort?: () => void;
-    selectedValues?: string[];
-    onFilterChange?: (values: string[]) => void;
-    options?: string[];
-    isLoadingOptions?: boolean;
-    textValue?: string;
-    onTextChange?: (value: string) => void;
-    selectedUser?: UserLike;
-    onUserChange?: (user: UserLike | undefined) => void;
-    peopleSearch?: (query: string) => Promise<UserLike[]>;
-    dateValue?: IDateFilterValue;
-    onDateChange?: (value: IDateFilterValue | undefined) => void;
-}
-/**
- * Returns ColumnHeaderFilter props from column def and grid filter/sort state.
- * Use in Fluent/Material/Radix DataGridTable instead of createHeaderWithFilter.
- */
-export declare function getHeaderFilterConfig<T>(col: IColumnDef<T>, input: HeaderFilterConfigInput): HeaderFilterConfig;
-export type CellRenderMode = 'editing-inline' | 'editing-popover' | 'display';
-export interface CellRenderDescriptorInput<T> {
-    editingCell: {
-        rowId: RowId;
-        columnId: string;
-    } | null;
-    activeCell: {
-        rowIndex: number;
-        columnIndex: number;
-    } | null;
-    selectionRange: {
-        startRow: number;
-        startCol: number;
-        endRow: number;
-        endCol: number;
-    } | null;
-    cutRange: {
-        startRow: number;
-        startCol: number;
-        endRow: number;
-        endCol: number;
-    } | null;
-    copyRange: {
-        startRow: number;
-        startCol: number;
-        endRow: number;
-        endCol: number;
-    } | null;
-    colOffset: number;
-    itemsLength: number;
-    getRowId: (item: T) => RowId;
-    editable?: boolean;
-    onCellValueChanged?: (event: import('../types/columnTypes').ICellValueChangedEvent<T>) => void;
-    /** True while user is drag-selecting cells — hides fill handle during drag. */
-    isDragging?: boolean;
-}
-export interface CellRenderDescriptor {
-    mode: CellRenderMode;
-    editorType?: 'text' | 'select' | 'checkbox' | 'richSelect' | 'date';
-    value?: unknown;
-    isActive: boolean;
-    isInRange: boolean;
-    isInCutRange: boolean;
-    isInCopyRange: boolean;
-    isSelectionEndCell: boolean;
-    canEditAny: boolean;
-    isPinned: boolean;
-    pinnedSide?: 'left' | 'right';
-    globalColIndex: number;
-    rowId: RowId;
-    rowIndex: number;
-    /** Raw value for display (when mode === 'display'). UI uses col.renderCell or col.valueFormatter. */
-    displayValue?: unknown;
-}
-/**
- * Returns a descriptor for rendering a cell. UI uses this to decide editing-inline vs editing-popover vs display
- * and to apply isActive, isInRange, etc. without duplicating the boolean logic.
- */
-export declare function getCellRenderDescriptor<T>(item: T, col: IColumnDef<T>, rowIndex: number, colIdx: number, input: CellRenderDescriptorInput<T>): CellRenderDescriptor;
+import type { RowId } from '../types/dataGridTypes';
+import type { ICellEditorProps } from '../types/columnTypes';
+import type { CellRenderDescriptor } from '@alaarab/ogrid-core';
+export { getHeaderFilterConfig, getCellRenderDescriptor, } from '@alaarab/ogrid-core';
+export type { HeaderFilterConfigInput, HeaderFilterConfig, CellRenderDescriptorInput, CellRenderDescriptor, CellRenderMode, } from '@alaarab/ogrid-core';
 /**
  * Resolves display content for a cell in display mode.
- * Handles the renderCell → valueFormatter → String() fallback chain.
+ * Returns React.ReactNode for JSX compatibility.
  */
 export declare function resolveCellDisplayContent<T>(col: IColumnDef<T>, item: T, displayValue: unknown): React.ReactNode;
 /**
- * Resolves the cellStyle from a column def, handling both function and static values.
+ * Resolves the cellStyle from a column def.
+ * Returns React.CSSProperties for JSX compatibility.
  */
 export declare function resolveCellStyle<T>(col: IColumnDef<T>, item: T): React.CSSProperties | undefined;
 /**
- * Builds props for InlineCellEditor. Shared across all UI packages.
+ * Builds props for InlineCellEditor with React-specific IColumnDef.
  */
 export declare function buildInlineEditorProps<T>(item: T, col: IColumnDef<T>, descriptor: CellRenderDescriptor, callbacks: {
     commitCellEdit: (item: T, columnId: string, oldValue: unknown, newValue: unknown, rowIndex: number, globalColIndex: number) => void;
@@ -119,23 +31,18 @@ export declare function buildInlineEditorProps<T>(item: T, col: IColumnDef<T>, d
     item: T;
     column: IColumnDef<T>;
     rowIndex: number;
-    editorType: "text" | "select" | "checkbox" | "richSelect" | "date";
+    editorType: 'text' | 'select' | 'checkbox' | 'richSelect' | 'date';
     onCommit: (newValue: unknown) => void;
     onCancel: () => void;
 };
 /**
- * Builds ICellEditorProps for custom popover editors. Shared across all UI packages.
+ * Builds ICellEditorProps for custom popover editors with React-specific IColumnDef.
  */
 export declare function buildPopoverEditorProps<T>(item: T, col: IColumnDef<T>, descriptor: CellRenderDescriptor, pendingEditorValue: unknown, callbacks: {
     setPendingEditorValue: (value: unknown) => void;
     commitCellEdit: (item: T, columnId: string, oldValue: unknown, newValue: unknown, rowIndex: number, globalColIndex: number) => void;
     cancelPopoverEdit: () => void;
 }): ICellEditorProps<T>;
-/**
- * Common interaction props for cell wrapper elements.
- * Includes data attributes, event handlers, and accessibility props.
- * Spread onto the cell wrapper div/Box in each UI package.
- */
 export interface CellInteractionHandlers {
     handleCellMouseDown: (e: React.MouseEvent, rowIndex: number, colIndex: number) => void;
     setActiveCell: (cell: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@alaarab/ogrid-react",
-  "version": "2.0.7",
+  "version": "2.0.8",
   "description": "OGrid React – React hooks, headless components, and utilities for OGrid data grids.",
   "main": "dist/esm/index.js",
   "module": "dist/esm/index.js",
@@ -36,12 +36,17 @@
     "node": ">=18"
   },
   "dependencies": {
-    "@alaarab/ogrid-core": "2.0.7",
-    "@tanstack/react-virtual": "^3.13.18"
+    "@alaarab/ogrid-core": "2.0.7"
   },
   "peerDependencies": {
+    "@tanstack/react-virtual": "^3.0.0",
     "react": "^17.0.0 || ^18.0.0 || ^19.0.0"
   },
+  "peerDependenciesMeta": {
+    "@tanstack/react-virtual": {
+      "optional": true
+    }
+  },
   "devDependencies": {
     "@testing-library/jest-dom": "^6.9.1",
     "@testing-library/react": "^16.3.2",