react-open-source-grid 1.5.3 → 1.5.7

package/dist/lib/components/DataGrid/MarketDataGridUtils.d.ts

@@ -0,0 +1,13 @@
+import type { MarketDataConfig } from './types';
+import { MarketDataEngine } from './MarketDataEngine';
+import React from 'react';
+export interface WithMarketDataProps {
+    marketDataConfig?: MarketDataConfig;
+    engine?: MarketDataEngine;
+}
+export declare function withMarketData<P extends object>(Component: React.ComponentType<P>): React.FC<P & WithMarketDataProps>;
+export declare const getColumnClass: (field: string) => string;
+export declare const formatCellValue: (value: unknown) => string;
+export declare const formatPrice: (value: number) => string;
+export declare const formatChange: (value: number, isPercent: boolean) => React.ReactElement;
+export declare const formatVolume: (value: number) => string;

package/dist/lib/components/DataGrid/ScreenReaderAnnouncer.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+/**
+ * Helper component to render the live region for screen readers
+ */
+export declare const ScreenReaderAnnouncer: React.FC<{
+    message: string;
+    priority?: 'polite' | 'assertive';
+}>;

package/dist/lib/components/DataGrid/ServerSideDataSource.d.ts

@@ -0,0 +1,136 @@
+/**
+ * Server-Side DataSource for Infinite Scrolling
+ *
+ * Handles:
+ * - Fetching data blocks from server
+ * - Server-side filtering
+ * - Server-side sorting
+ * - Local block caching
+ * - Infinite scrolling for massive datasets (100M+ rows)
+ */
+import type { Row, SortConfig, FilterConfig } from './types';
+export interface ServerSideRequest {
+    startRow: number;
+    endRow: number;
+    sortModel?: SortConfig[];
+    filterModel?: FilterConfig;
+    groupKeys?: string[];
+}
+export interface ServerSideResponse {
+    rows: Row[];
+    totalRows: number;
+    lastRow?: number;
+}
+export interface ServerSideDataSourceConfig {
+    blockSize?: number;
+    maxConcurrentRequests?: number;
+    cacheBlockCount?: number;
+    cacheTimeout?: number;
+    getRows: (request: ServerSideRequest) => Promise<ServerSideResponse>;
+}
+/**
+ * ServerSideDataSource
+ *
+ * Manages infinite scrolling with server-side data fetching, filtering, and sorting.
+ * Similar to AG Grid's server-side row model.
+ */
+export declare class ServerSideDataSource {
+    private blockSize;
+    private maxConcurrentRequests;
+    private cacheBlockCount;
+    private cacheTimeout;
+    private getRows;
+    private blockCache;
+    private blockStatus;
+    private activeRequests;
+    private requestQueue;
+    private totalRows;
+    private sortModel;
+    private filterModel;
+    private observers;
+    constructor(config: ServerSideDataSourceConfig);
+    /**
+     * Subscribe to data changes
+     */
+    subscribe(callback: () => void): () => void;
+    /**
+     * Notify observers of data changes
+     */
+    private notifyObservers;
+    /**
+     * Get block index for a given row index
+     */
+    private getBlockIndex;
+    /**
+     * Get start row for a block
+     */
+    private getBlockStartRow;
+    /**
+     * Get end row for a block
+     */
+    private getBlockEndRow;
+    /**
+     * Check if a block is cached and valid
+     */
+    private isBlockCached;
+    /**
+     * Purge old cache entries to maintain cache size limit
+     */
+    private purgeCache;
+    /**
+     * Fetch a block from the server
+     */
+    private fetchBlock;
+    /**
+     * Queue a block request
+     */
+    private queueBlockRequest;
+    /**
+     * Process queued requests
+     */
+    private processQueue;
+    /**
+     * Ensure blocks are loaded for a given range
+     */
+    private ensureBlocksLoaded;
+    /**
+     * Get rows for a given range
+     */
+    getRowsInRange(startRow: number, endRow: number): Row[];
+    /**
+     * Get a single row by index
+     */
+    getRow(rowIndex: number): Row | undefined;
+    /**
+     * Get total row count (may be undefined until first response)
+     */
+    getTotalRows(): number | undefined;
+    /**
+     * Check if a block is loading
+     */
+    isBlockLoading(blockIndex: number): boolean;
+    /**
+     * Update sort model and refresh data
+     */
+    setSortModel(sortModel: SortConfig[]): void;
+    /**
+     * Update filter model and refresh data
+     */
+    setFilterModel(filterModel: FilterConfig): void;
+    /**
+     * Refresh all data (clears cache and reloads)
+     */
+    refresh(): void;
+    /**
+     * Purge a specific block from cache
+     */
+    purgeBlock(blockIndex: number): void;
+    /**
+     * Destroy the data source (cleanup)
+     */
+    destroy(): void;
+}
+/**
+ * Create a mock server-side data source for testing
+ */
+export declare function createMockServerDataSource(totalRows?: number, delay?: number): ServerSideDataSource;

package/dist/lib/components/DataGrid/ThemeSelector.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+import type { ThemeName } from './themes';
+interface ThemeSelectorProps {
+    currentTheme: ThemeName;
+    onThemeChange: (theme: ThemeName) => void;
+}
+/**
+ * ThemeSelector Component
+ * Dropdown to switch between available themes
+ */
+export declare const ThemeSelector: React.FC<ThemeSelectorProps>;
+export {};

package/dist/lib/components/DataGrid/Tooltip.d.ts

@@ -0,0 +1,15 @@
+import React from 'react';
+import type { TooltipState } from './types';
+interface TooltipProps {
+    state: TooltipState;
+    maxWidth?: number;
+    offset?: number;
+}
+/**
+ * Tooltip Component
+ *
+ * Renders tooltips using React portals for proper z-index layering.
+ * Includes smart placement logic to keep tooltips within viewport bounds.
+ */
+export declare const Tooltip: React.FC<TooltipProps>;
+export {};

package/dist/lib/components/DataGrid/TreeRow.d.ts

@@ -0,0 +1,31 @@
+import React from 'react';
+import type { TreeNode, Column, GridAction, TreeConfig } from './types';
+interface TreeRowProps {
+    node: TreeNode;
+    columns: Column[];
+    columnOrder: string[];
+    displayColumnOrder: string[];
+    columnWidths: {
+        [field: string]: number;
+    };
+    selectedRows: Set<string | number>;
+    editState: {
+        rowId: string | number | null;
+        field: string | null;
+        value: any;
+    };
+    focusState: {
+        rowIndex: number;
+        columnIndex: number;
+    } | null;
+    rowIndex: number;
+    dispatch: React.Dispatch<GridAction>;
+    onRowClick?: (row: TreeNode) => void;
+    onCellEdit?: (rowIndex: number, field: string, value: any) => void;
+    pinnedLeft: string[];
+    pinnedRight: string[];
+    treeConfig: TreeConfig;
+    editInputRef?: React.RefObject<HTMLInputElement | null>;
+}
+export declare const TreeRow: React.FC<TreeRowProps>;
+export {};

package/dist/lib/components/DataGrid/VirtualScroller.d.ts

@@ -0,0 +1,35 @@
+import React from 'react';
+export interface VirtualScrollerProps<T = unknown> {
+    items: T[];
+    itemHeight?: number | ((index: number, item: T) => number);
+    overscanCount?: number;
+    containerHeight?: number;
+    containerWidth?: number;
+    columns?: Array<{
+        field: string;
+        width: number;
+    }>;
+    totalColumnWidth?: number;
+    columnOverscan?: number;
+    renderItem: (item: T, index: number, style: React.CSSProperties) => React.ReactNode;
+    renderRow?: (item: T, index: number, visibleColumns: Array<{
+        field: string;
+        width: number;
+        offset: number;
+    }>, style: React.CSSProperties) => React.ReactNode;
+    onScroll?: (scrollTop: number, scrollLeft: number) => void;
+    className?: string;
+    innerClassName?: string;
+}
+/**
+ * VirtualScroller Component
+ *
+ * High-performance virtual scrolling with:
+ * - Row virtualization (windowing)
+ * - Column virtualization
+ * - Dynamic row heights
+ * - Cell recycling
+ * - Optimized for 50,000+ rows and 200+ columns
+ */
+export declare const VirtualScroller: <T = unknown>({ items, itemHeight, overscanCount, containerHeight, containerWidth, columns, totalColumnWidth, columnOverscan, renderItem, renderRow, onScroll, className, innerClassName, }: VirtualScrollerProps<T>) => import("react/jsx-runtime").JSX.Element;
+export default VirtualScroller;

package/dist/lib/components/DataGrid/WebSocketMockFeed.d.ts

@@ -0,0 +1,121 @@
+/**
+ * WebSocketMockFeed.ts
+ *
+ * Mock WebSocket server that simulates live market data feed.
+ * Generates realistic tick updates for testing market data mode.
+ *
+ * Features:
+ * - Simulates 1000+ ticks/sec
+ * - Random price movements
+ * - Bid/Ask spreads
+ * - Volume tracking
+ * - Burst updates
+ * - Configurable update frequency
+ */
+export interface MockMarketData {
+    symbol: string;
+    price: number;
+    bid: number;
+    ask: number;
+    size: number;
+    volume: number;
+    change: number;
+    changePercent: number;
+    high: number;
+    low: number;
+    open: number;
+    lastUpdate: number;
+}
+export interface MockFeedConfig {
+    symbols?: string[];
+    updateFrequency?: number;
+    priceVolatility?: number;
+    burstProbability?: number;
+    burstSize?: number;
+    port?: number;
+}
+/**
+ * Mock WebSocket Feed
+ * Simulates a WebSocket server for market data
+ */
+export declare class WebSocketMockFeed {
+    private config;
+    private marketData;
+    private updateIntervals;
+    private clients;
+    private isRunning;
+    constructor(config?: MockFeedConfig);
+    /**
+     * Generate default symbol list
+     */
+    private generateDefaultSymbols;
+    /**
+     * Initialize market data with random values
+     */
+    private initializeMarketData;
+    /**
+     * Generate random price
+     */
+    private randomPrice;
+    /**
+     * Update market data for a symbol
+     */
+    private updateSymbol;
+    /**
+     * Trigger burst of rapid updates
+     */
+    private triggerBurst;
+    /**
+     * Broadcast update to all connected clients
+     */
+    private broadcastUpdate;
+    /**
+     * Start generating updates
+     */
+    start(): void;
+    /**
+     * Stop generating updates
+     */
+    stop(): void;
+    /**
+     * Register a mock WebSocket client
+     */
+    connect(client: MockWebSocket): void;
+    /**
+     * Unregister a mock WebSocket client
+     */
+    disconnect(client: MockWebSocket): void;
+    /**
+     * Get current market data snapshot
+     */
+    getSnapshot(): MockMarketData[];
+    /**
+     * Get data for specific symbol
+     */
+    getSymbolData(symbol: string): MockMarketData | undefined;
+}
+/**
+ * Mock WebSocket client interface
+ */
+export interface MockWebSocket {
+    readyState: number;
+    send: (data: string) => void;
+    onmessage: ((event: {
+        data: string;
+    }) => void) | null;
+    onopen: (() => void) | null;
+    onclose: (() => void) | null;
+    onerror: ((error: any) => void) | null;
+    close: () => void;
+}
+/**
+ * Create a mock WebSocket that connects to the feed
+ */
+export declare function createMockWebSocket(feed: WebSocketMockFeed): MockWebSocket;
+/**
+ * Create and start a mock market data feed
+ */
+export declare function createMockFeed(config?: MockFeedConfig): {
+    feed: WebSocketMockFeed;
+    createConnection: () => MockWebSocket;
+};

package/dist/lib/components/DataGrid/aggregationUtils.d.ts

@@ -0,0 +1,25 @@
+import type { Row, AggregateFunction, AggregateConfig, GroupedRow } from './types';
+/**
+ * Compute a single aggregate value for a set of rows
+ */
+export declare const computeAggregate: (rows: Row[], field: string, func: AggregateFunction) => number | null;
+/**
+ * Compute all configured aggregates for a set of rows
+ */
+export declare const computeAggregations: (rows: Row[], aggregateConfigs: AggregateConfig[]) => {
+    [key: string]: number | null;
+};
+/**
+ * Compute group-level aggregations for each group in grouped rows
+ */
+export declare const computeGroupAggregations: (groupedRows: (Row | GroupedRow)[], aggregateConfigs: AggregateConfig[]) => Map<string, {
+    [key: string]: number | null;
+}>;
+/**
+ * Format aggregate value for display
+ */
+export declare const formatAggregateValue: (value: number | null, func: AggregateFunction) => string;
+/**
+ * Get display label for an aggregate function
+ */
+export declare const getAggregateLabel: (func: AggregateFunction) => string;

package/dist/lib/components/DataGrid/contextMenuUtils.d.ts

@@ -0,0 +1,36 @@
+import type { Row, Column, FilterValue } from './types';
+/**
+ * Context Menu Utility Functions
+ *
+ * Helper functions for context menu actions like copy, export, etc.
+ */
+/**
+ * Copy selected cells to clipboard
+ */
+export declare const copyToClipboard: (selectedRows: Set<string | number>, columns: Column[], rows: Row[], includeHeaders?: boolean) => Promise<void>;
+/**
+ * Copy a specific cell range to clipboard
+ */
+export declare const copyCellRange: (startRow: number, endRow: number, startCol: number, endCol: number, columns: Column[], rows: Row[], includeHeaders?: boolean) => Promise<void>;
+/**
+ * Export selected rows to CSV
+ */
+export declare const exportSelectedToCSV: (selectedRows: Set<string | number>, columns: Column[], rows: Row[], filename?: string) => void;
+/**
+ * Calculate optimal column width based on content
+ */
+export declare const calculateOptimalWidth: (column: Column, rows: Row[], minWidth?: number, maxWidth?: number, padding?: number) => number;
+/**
+ * Auto-size all columns
+ */
+export declare const autoSizeAllColumns: (columns: Column[], rows: Row[]) => {
+    [field: string]: number;
+};
+/**
+ * Create a "filter by value" filter configuration
+ */
+export declare const createFilterByValue: (value: unknown) => FilterValue;
+/**
+ * Get unique values for a column (for filter suggestions)
+ */
+export declare const getUniqueColumnValues: (column: Column, rows: Row[], maxValues?: number) => unknown[];

package/dist/lib/components/DataGrid/demos/TooltipDemo.d.ts

@@ -0,0 +1 @@
+export declare const TooltipDemo: () => import("react/jsx-runtime").JSX.Element;

package/dist/lib/components/DataGrid/densityModes.d.ts

@@ -0,0 +1,42 @@
+/**
+ * DataGrid Density Mode System
+ * Provides Ultra Compact, Compact, Normal, and Comfortable display modes with CSS variables
+ */
+export type DensityMode = 'ultraCompact' | 'compact' | 'normal' | 'comfortable';
+export interface DensityConfig {
+    mode: DensityMode;
+    rowHeight: string;
+    cellPadding: string;
+    headerPadding: string;
+    fontSize: string;
+    fontSizeSmall: string;
+}
+/**
+ * Density mode configurations
+ * Defines row height, padding, and font sizes for each density mode
+ */
+export declare const densityConfigs: Record<DensityMode, DensityConfig>;
+/**
+ * Get density configuration by mode
+ */
+export declare function getDensityConfig(mode?: DensityMode): DensityConfig;
+/**
+ * Generate CSS variables from density configuration
+ */
+export declare function generateDensityCSS(mode: DensityMode): Record<string, string>;
+/**
+ * Get all density mode names
+ */
+export declare function getDensityModes(): DensityMode[];
+/**
+ * Get display label for density mode
+ */
+export declare function getDensityLabel(mode: DensityMode): string;
+/**
+ * Persist density mode to localStorage
+ */
+export declare function saveDensityMode(mode: DensityMode, key?: string): void;
+/**
+ * Load density mode from localStorage
+ */
+export declare function loadDensityMode(key?: string): DensityMode | null;

package/dist/lib/components/DataGrid/dragRowUtils.d.ts

@@ -0,0 +1,98 @@
+import type { Row, TreeNode, GroupedRow } from './types';
+/**
+ * Row Dragging / Reorder Utilities
+ *
+ * Utilities for implementing drag-and-drop row reordering functionality.
+ */
+export interface DragRowConfig {
+    enabled: boolean;
+    showDragHandle?: boolean;
+    allowCrossGroup?: boolean;
+    allowExternalDrop?: boolean;
+    onRowDrop?: (sourceIndex: number, targetIndex: number, row: Row) => void;
+    onRowMove?: (sourceIndex: number, targetIndex: number) => void;
+    onExternalDrop?: (data: any, targetIndex: number) => void;
+    dragHandlePosition?: 'left' | 'right';
+}
+export interface DragState {
+    isDragging: boolean;
+    draggedRowId: string | number | null;
+    draggedRowIndex: number | null;
+    dropTargetIndex: number | null;
+    dropPosition: 'before' | 'after' | null;
+}
+export declare const initialDragState: DragState;
+/**
+ * Reorder rows array based on drag-and-drop indices
+ */
+export declare const reorderRows: <T extends Row>(rows: T[], sourceIndex: number, targetIndex: number) => T[];
+/**
+ * Get the drop position (before/after) based on mouse position within the row
+ */
+export declare const getDropPosition: (event: React.DragEvent, rowElement: HTMLElement) => "before" | "after";
+/**
+ * Calculate the target index based on drop position
+ */
+export declare const calculateTargetIndex: (dropTargetIndex: number, dropPosition: "before" | "after" | null, sourceIndex: number) => number;
+/**
+ * Check if a row can be dropped at the target location
+ */
+export declare const canDropRow: (sourceIndex: number, targetIndex: number, _sourceRow: Row | TreeNode | GroupedRow, _targetRow: Row | TreeNode | GroupedRow, config: DragRowConfig) => boolean;
+/**
+ * Create drag data transfer object
+ */
+export declare const createDragData: (row: Row, rowIndex: number, tableId?: string) => string;
+/**
+ * Parse drag data transfer object
+ */
+export declare const parseDragData: (dataTransfer: string) => {
+    row: Row;
+    rowIndex: number;
+    tableId?: string;
+    timestamp: number;
+} | null;
+/**
+ * Check if drag data is from the same table
+ */
+export declare const isSameTable: (dragData: ReturnType<typeof parseDragData>, currentTableId?: string) => boolean;
+/**
+ * Get visual drop indicator styles
+ */
+export declare const getDropIndicatorStyle: (isOver: boolean, position: "before" | "after" | null) => React.CSSProperties;
+/**
+ * Handle drag start event
+ */
+export declare const handleDragStart: (event: React.DragEvent, row: Row, rowIndex: number, tableId?: string) => void;
+/**
+ * Handle drag end event
+ */
+export declare const handleDragEnd: (event: React.DragEvent) => void;
+/**
+ * Handle drag over event (required for drop to work)
+ */
+export declare const handleDragOver: (event: React.DragEvent) => void;
+/**
+ * Validate drop operation
+ */
+export declare const validateDrop: (event: React.DragEvent, config: DragRowConfig, tableId?: string) => boolean;
+/**
+ * Get draggable row props
+ */
+export declare const getDraggableRowProps: (row: Row, rowIndex: number, isDragging: boolean, config: DragRowConfig, tableId?: string) => {
+    draggable: boolean;
+    onDragStart: (e: React.DragEvent) => void;
+    onDragEnd: (event: React.DragEvent) => void;
+    style: {
+        cursor: string;
+        opacity: number;
+        transition: string;
+    };
+};
+/**
+ * Get drop target props
+ */
+export declare const getDropTargetProps: (rowIndex: number, onDragOver: (e: React.DragEvent, index: number) => void, onDragLeave: () => void, onDrop: (e: React.DragEvent, index: number) => void) => {
+    onDragOver: (e: React.DragEvent) => void;
+    onDragLeave: () => void;
+    onDrop: (e: React.DragEvent) => void;
+};

package/dist/lib/components/DataGrid/exportUtils.d.ts

@@ -0,0 +1,30 @@
+import type { Column, Row } from './types';
+export type ExportFormat = 'csv' | 'xlsx';
+export type ExportScope = 'all' | 'filtered' | 'selected' | 'page';
+export type ExcelStyling = 'basic' | 'professional';
+export interface ExportOptions {
+    format: ExportFormat;
+    scope: ExportScope;
+    includeHeader?: boolean;
+    styling?: ExcelStyling;
+    filename?: string;
+}
+/**
+ * Converts a dataset to CSV format and triggers download
+ */
+export declare const exportToCSV: (data: Row[], columns: Column[], filename?: string) => void;
+/**
+ * Converts a dataset to XLSX format with optional styling and triggers download
+ */
+export declare const exportToXLSX: (data: Row[], columns: Column[], options?: {
+    filename?: string;
+    styling?: ExcelStyling;
+}) => Promise<void>;
+/**
+ * Generates a filename with timestamp
+ */
+export declare const generateFilename: (format: ExportFormat, scope: ExportScope) => string;
+/**
+ * Handles the complete export process
+ */
+export declare const handleExport: (data: Row[], columns: Column[], options: ExportOptions) => Promise<void>;

package/dist/lib/components/DataGrid/filterUtils.d.ts

@@ -0,0 +1,17 @@
+import type { Row, FilterConfig } from './types';
+/**
+ * Apply all filters to rows
+ */
+export declare const applyFilters: (rows: Row[], filterConfig: FilterConfig) => Row[];
+/**
+ * Check if any filters are active
+ */
+export declare const hasActiveFilters: (filterConfig: FilterConfig) => boolean;
+/**
+ * Get count of active filters
+ */
+export declare const getActiveFilterCount: (filterConfig: FilterConfig) => number;
+/**
+ * Clear all filters
+ */
+export declare const clearAllFilters: () => FilterConfig;