@alaarab/ogrid-react 2.0.0-beta

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

@@ -0,0 +1,161 @@
+/**
+ * View model helpers for DataGridTable. Core owns the logic; UI packages only render.
+ */
+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;
+/**
+ * Resolves display content for a cell in display mode.
+ * Handles the renderCell → valueFormatter → String() fallback chain.
+ */
+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.
+ */
+export declare function resolveCellStyle<T>(col: IColumnDef<T>, item: T): React.CSSProperties | undefined;
+/**
+ * Builds props for InlineCellEditor. Shared across all UI packages.
+ */
+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;
+    setEditingCell: (cell: null) => void;
+}): {
+    value: unknown;
+    item: T;
+    column: IColumnDef<T>;
+    rowIndex: number;
+    editorType: "text" | "select" | "checkbox" | "richSelect" | "date";
+    onCommit: (newValue: unknown) => void;
+    onCancel: () => void;
+};
+/**
+ * Builds ICellEditorProps for custom popover editors. Shared across all UI packages.
+ */
+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: {
+        rowIndex: number;
+        columnIndex: number;
+    }) => void;
+    setEditingCell: (cell: {
+        rowId: RowId;
+        columnId: string;
+    } | null) => void;
+    handleCellContextMenu: (e: React.MouseEvent) => void;
+}
+export declare function getCellInteractionProps(descriptor: CellRenderDescriptor, columnId: string, handlers: CellInteractionHandlers): {
+    role?: "button" | undefined;
+    onDoubleClick?: (() => void) | undefined;
+    tabIndex: number;
+    onMouseDown: (e: React.MouseEvent) => void;
+    onClick: () => void;
+    onContextMenu: (e: React.MouseEvent) => void;
+    'data-in-range'?: "true" | undefined;
+    'data-row-index': number;
+    'data-col-index': number;
+};

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

@@ -0,0 +1,2 @@
+export { areGridRowPropsEqual, isRowInRange } from '@alaarab/ogrid-core';
+export type { GridRowComparatorProps } from '@alaarab/ogrid-core';

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

@@ -0,0 +1,6 @@
+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';
+export type { CsvColumn, StatusBarPart, StatusBarPartsInput, GridContextMenuItem, GridContextMenuHandlerProps, PaginationViewModel, ParseValueResult, AggregationResult, } from '@alaarab/ogrid-core';
+export { getHeaderFilterConfig, getCellRenderDescriptor, resolveCellDisplayContent, resolveCellStyle, buildInlineEditorProps, buildPopoverEditorProps, getCellInteractionProps, } from './dataGridViewModel';
+export type { HeaderFilterConfigInput, HeaderFilterConfig, CellRenderDescriptorInput, CellRenderDescriptor, CellRenderMode, CellInteractionHandlers, } from './dataGridViewModel';
+export { areGridRowPropsEqual, isRowInRange } from './gridRowComparator';
+export type { GridRowComparatorProps } from './gridRowComparator';

package/package.json

@@ -0,0 +1,46 @@
+{
+  "name": "@alaarab/ogrid-react",
+  "version": "2.0.0-beta",
+  "description": "OGrid React – React hooks, headless components, and utilities for OGrid data grids.",
+  "main": "dist/esm/index.js",
+  "module": "dist/esm/index.js",
+  "types": "dist/types/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/types/index.d.ts",
+      "import": "./dist/esm/index.js",
+      "require": "./dist/esm/index.js"
+    }
+  },
+  "scripts": {
+    "build": "rimraf dist && tsc -p tsconfig.build.json",
+    "test": "jest"
+  },
+  "keywords": [
+    "ogrid",
+    "datatable",
+    "react",
+    "typescript",
+    "grid",
+    "core"
+  ],
+  "author": "Ala Arab",
+  "license": "MIT",
+  "files": [
+    "dist",
+    "README.md",
+    "LICENSE"
+  ],
+  "engines": {
+    "node": ">=18"
+  },
+  "dependencies": {
+    "@alaarab/ogrid-core": "2.0.0-beta"
+  },
+  "peerDependencies": {
+    "react": "^17.0.0 || ^18.0.0 || ^19.0.0"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}