react-open-source-grid 1.5.0 → 1.5.1

package/dist/assets/components/DataGrid/GridBody.d.ts

@@ -0,0 +1,42 @@
+import React from 'react';
+import type { Column, Row, GridAction, EditState, FocusState, GroupedRow, AggregateConfig, VirtualScrollConfig, TreeNode, TreeConfig, DragRowConfig } from './types';
+interface GridBodyProps {
+    columns: Column[];
+    rows: (Row | GroupedRow | TreeNode)[];
+    pinnedRowsTop?: (Row | GroupedRow | TreeNode)[];
+    pinnedRowsBottom?: (Row | GroupedRow | TreeNode)[];
+    columnOrder: string[];
+    displayColumnOrder: string[];
+    columnWidths: {
+        [field: string]: number;
+    };
+    selectedRows: Set<string | number>;
+    editState: EditState;
+    focusState: FocusState | null;
+    dispatch: React.Dispatch<GridAction>;
+    onRowClick?: (row: Row) => void;
+    onCellEdit?: (rowIndex: number, field: string, value: any) => void;
+    pinnedLeft: string[];
+    pinnedRight: string[];
+    showGroupFooters?: boolean;
+    groupAggregates?: Map<string, {
+        [key: string]: number | null;
+    }>;
+    aggregateConfigs?: AggregateConfig[];
+    virtualScrollConfig?: VirtualScrollConfig;
+    treeConfig?: TreeConfig;
+    dragRowConfig?: DragRowConfig;
+    tableId?: string;
+    onRowReorder?: (rows: Row[]) => void;
+    onScroll?: (scrollTop: number, scrollLeft: number) => void;
+    currentPage?: number;
+    pageSize?: number;
+    totalRows?: number;
+    onContextMenu?: (event: React.MouseEvent, row: Row, column: Column, rowIndex: number, columnIndex: number) => void;
+    onCellMouseEnter?: (event: React.MouseEvent, row: Row, column: Column, value: any) => void;
+    onCellMouseLeave?: () => void;
+    onRowMouseEnter?: (event: React.MouseEvent, row: Row, rowIndex: number) => void;
+    onRowMouseLeave?: () => void;
+}
+export declare const GridBody: React.FC<GridBodyProps>;
+export {};

package/dist/assets/components/DataGrid/GridFooter.d.ts

@@ -0,0 +1,18 @@
+import React from 'react';
+import type { Column, AggregateConfig } from './types';
+interface GridFooterProps {
+    columns: Column[];
+    displayColumnOrder: string[];
+    columnWidths: {
+        [field: string]: number;
+    };
+    aggregates: {
+        [key: string]: number | null;
+    };
+    aggregateConfigs: AggregateConfig[];
+    pinnedLeft: string[];
+    pinnedRight: string[];
+    label?: string;
+}
+export declare const GridFooter: React.FC<GridFooterProps>;
+export {};

package/dist/assets/components/DataGrid/GridHeader.d.ts

@@ -0,0 +1,18 @@
+import React from 'react';
+import type { Column, GridAction, SortConfig } from './types';
+interface GridHeaderProps {
+    columns: Column[];
+    columnOrder: string[];
+    displayColumnOrder: string[];
+    columnWidths: {
+        [field: string]: number;
+    };
+    sortConfig: SortConfig;
+    dispatch: React.Dispatch<GridAction>;
+    pinnedLeft: string[];
+    pinnedRight: string[];
+    showColumnPinning: boolean;
+    onContextMenu?: (event: React.MouseEvent, column: Column, columnIndex: number) => void;
+}
+export declare const GridHeader: React.FC<GridHeaderProps>;
+export {};

package/dist/assets/components/DataGrid/GridPagination.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+import type { GridAction } from './types';
+interface GridPaginationProps {
+    currentPage: number;
+    pageSize: number;
+    totalRows: number;
+    dispatch: React.Dispatch<GridAction>;
+}
+export declare const GridPagination: React.FC<GridPaginationProps>;
+export {};

package/dist/assets/components/DataGrid/GroupByPanel.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import type { Column, GridAction } from './types';
+interface GroupByPanelProps {
+    columns: Column[];
+    groupBy: string[];
+    dispatch: React.Dispatch<GridAction>;
+}
+export declare const GroupByPanel: React.FC<GroupByPanelProps>;
+export {};

package/dist/assets/components/DataGrid/GroupRow.d.ts

@@ -0,0 +1,31 @@
+import React from 'react';
+import type { GroupedRow, Column, GridAction, AggregateConfig } from './types';
+interface GroupRowProps {
+    group: GroupedRow;
+    columns: Column[];
+    columnOrder: string[];
+    displayColumnOrder: string[];
+    columnWidths: {
+        [field: string]: number;
+    };
+    dispatch: React.Dispatch<GridAction>;
+    pinnedLeft: string[];
+    pinnedRight: string[];
+}
+export declare const GroupRow: React.FC<GroupRowProps>;
+interface GroupFooterRowProps {
+    group: GroupedRow;
+    columns: Column[];
+    displayColumnOrder: string[];
+    columnWidths: {
+        [field: string]: number;
+    };
+    aggregates: {
+        [key: string]: number | null;
+    };
+    aggregateConfigs: AggregateConfig[];
+    pinnedLeft: string[];
+    pinnedRight: string[];
+}
+export declare const GroupFooterRow: React.FC<GroupFooterRowProps>;
+export {};

package/dist/assets/components/DataGrid/InfiniteScrollDataGrid.d.ts

@@ -0,0 +1,39 @@
+/**
+ * InfiniteScrollDataGrid Component
+ *
+ * DataGrid with server-side infinite scrolling support.
+ * Handles massive datasets (100M+ rows) with:
+ * - Server-side data fetching
+ * - Server-side filtering
+ * - Server-side sorting
+ * - Local block caching
+ * - Virtual scrolling
+ */
+import React from 'react';
+import type { Column, Row, VirtualScrollConfig } from './types';
+import type { ServerSideDataSourceConfig } from './ServerSideDataSource';
+import { ServerSideDataSource } from './ServerSideDataSource';
+import type { ThemeName } from './themes';
+export interface InfiniteScrollDataGridProps {
+    columns: Column[];
+    dataSource: ServerSideDataSource | ServerSideDataSourceConfig;
+    pageSize?: number;
+    showColumnPinning?: boolean;
+    virtualScrollConfig?: VirtualScrollConfig;
+    theme?: ThemeName;
+    onRowClick?: (row: Row) => void;
+    onCellEdit?: (rowIndex: number, field: string, value: unknown) => void;
+    onSelectionChange?: (selectedIds: (string | number)[]) => void;
+}
+/**
+ * InfiniteScrollDataGrid
+ *
+ * A DataGrid component optimized for infinite scrolling with server-side data source.
+ */
+export declare const InfiniteScrollDataGrid: React.FC<InfiniteScrollDataGridProps>;
+/**
+ * ThemedInfiniteScrollDataGrid - Legacy alias for backward compatibility
+ * @deprecated Use InfiniteScrollDataGrid directly with theme prop instead
+ */
+export declare const ThemedInfiniteScrollDataGrid: React.FC<InfiniteScrollDataGridProps>;
+export default InfiniteScrollDataGrid;

package/dist/assets/components/DataGrid/LayoutPresetsManager.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+import type { LayoutPreset } from './types';
+import { LayoutPersistenceManager } from './layoutPersistence';
+interface LayoutPresetsManagerProps {
+    manager: LayoutPersistenceManager;
+    currentLayout: LayoutPreset['layout'];
+    onLoadPreset: (layout: LayoutPreset['layout']) => void;
+    onResetLayout: () => void;
+}
+export declare const LayoutPresetsManager: React.FC<LayoutPresetsManagerProps>;
+export {};

package/dist/assets/components/DataGrid/MarketDataEngine.d.ts

@@ -0,0 +1,165 @@
+/**
+ * MarketDataEngine.ts
+ *
+ * High-performance market data update engine for handling 1000+ updates/sec
+ * with minimal React re-renders and optimal DOM patching.
+ *
+ * Features:
+ * - RequestAnimationFrame batching for smooth 60fps updates
+ * - Diff buffer for tracking changed cells
+ * - Direct DOM manipulation to bypass React reconciliation
+ * - Cell flash animations (green/red for up/down)
+ * - Memory-efficient row cache
+ * - CPU usage monitoring and auto-throttling
+ */
+export interface CellUpdate {
+    rowId: string | number;
+    field: string;
+    oldValue: any;
+    newValue: any;
+    timestamp: number;
+}
+export interface FlashAnimation {
+    cellKey: string;
+    direction: 'up' | 'down';
+    startTime: number;
+    duration: number;
+}
+export interface MarketDataRow {
+    id: string | number;
+    [key: string]: any;
+}
+export interface MarketDataEngineConfig {
+    flashDuration?: number;
+    batchInterval?: number;
+    enableFlash?: boolean;
+    maxUpdatesPerFrame?: number;
+    cpuThreshold?: number;
+    enableLiveSorting?: boolean;
+    enableRankingMovement?: boolean;
+}
+export interface RowUpdate {
+    rowId: string | number;
+    updates: {
+        [field: string]: any;
+    };
+    timestamp: number;
+}
+/**
+ * MarketDataEngine
+ *
+ * Manages high-frequency data updates with minimal performance impact.
+ * Uses RAF batching and direct DOM manipulation to achieve sub-millisecond latencies.
+ */
+export declare class MarketDataEngine {
+    private config;
+    private rowCache;
+    private updateBuffer;
+    private flashAnimations;
+    private rafId;
+    private lastUpdateTime;
+    private isPaused;
+    private isThrottled;
+    private updateCallbacks;
+    private cellUpdateCallbacks;
+    private frameCount;
+    private lastFrameTime;
+    private avgFrameTime;
+    constructor(config?: MarketDataEngineConfig);
+    /**
+     * Initialize the engine with row data
+     */
+    initialize(rows: MarketDataRow[]): void;
+    /**
+     * Process incoming market data updates
+     * This method is optimized for high-frequency calls
+     */
+    processUpdate(update: RowUpdate): void;
+    /**
+     * Process updates in batches using RAF
+     */
+    private processFrame;
+    /**
+     * Apply DOM updates directly without React re-renders
+     */
+    private applyDOMUpdates;
+    /**
+     * Get DOM element for a specific cell
+     */
+    private getCellElement;
+    /**
+     * Update cell content in DOM
+     */
+    private updateCellContent;
+    /**
+     * Apply flash animation to cell
+     */
+    private applyFlashAnimation;
+    /**
+     * Clean up expired flash animations
+     */
+    private cleanupFlashAnimations;
+    /**
+     * Format cell value for display
+     */
+    private formatCellValue;
+    /**
+     * Check if field values are numeric for flash animation
+     */
+    private isNumericField;
+    /**
+     * Subscribe to row data updates
+     */
+    onUpdate(callback: (rows: MarketDataRow[]) => void): () => void;
+    /**
+     * Subscribe to individual cell updates
+     */
+    onCellUpdate(callback: (update: CellUpdate) => void): () => void;
+    /**
+     * Get current row data from cache
+     */
+    getRows(): MarketDataRow[];
+    /**
+     * Get specific row from cache
+     */
+    getRow(rowId: string | number): MarketDataRow | undefined;
+    /**
+     * Pause live updates (data ingestion continues)
+     */
+    pause(): void;
+    /**
+     * Resume live updates
+     */
+    resume(): void;
+    /**
+     * Check if updates are paused
+     */
+    isPausedState(): boolean;
+    /**
+     * Check if engine is throttled due to CPU load
+     */
+    isThrottledState(): boolean;
+    /**
+     * Get performance metrics
+     */
+    getMetrics(): {
+        avgFrameTime: number;
+        fps: number;
+        pendingUpdates: number;
+        activeFlashes: number;
+        rowCount: number;
+        isThrottled: boolean;
+    };
+    /**
+     * Clear all data and reset engine
+     */
+    clear(): void;
+    /**
+     * Destroy engine and clean up
+     */
+    destroy(): void;
+}
+/**
+ * Create a market data engine instance
+ */
+export declare function createMarketDataEngine(config?: MarketDataEngineConfig): MarketDataEngine;

package/dist/assets/components/DataGrid/MarketDataGrid.d.ts

@@ -0,0 +1,33 @@
+/**
+ * MarketDataGrid.tsx
+ *
+ * High-performance DataGrid wrapper optimized for live market data.
+ * Integrates MarketDataEngine with React DataGrid component.
+ *
+ * Features:
+ * - Ultra-low latency updates
+ * - Cell flash animations
+ * - Density mode for compact display
+ * - Market-specific column formatting
+ * - Live sorting and ranking
+ */
+import React from 'react';
+import type { Column, Row, MarketDataConfig } from './types';
+import { MarketDataEngine } from './MarketDataEngine';
+import './MarketDataGrid.css';
+export interface MarketDataGridProps {
+    columns: Column[];
+    rows: Row[];
+    engine: MarketDataEngine;
+    config?: MarketDataConfig;
+    className?: string;
+    onCellClick?: (rowId: string | number, field: string, value: any) => void;
+    onRowClick?: (row: Row) => void;
+}
+/**
+ * MarketDataGrid Component
+ *
+ * Optimized grid for displaying live market data with minimal latency.
+ * Uses direct DOM manipulation for cell updates to bypass React reconciliation.
+ */
+export declare const MarketDataGrid: React.FC<MarketDataGridProps>;

package/dist/assets/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/assets/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/assets/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/assets/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/assets/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/assets/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/assets/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;