react-open-source-grid 1.5.3 → 1.5.7

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

@@ -0,0 +1,64 @@
+import React from 'react';
+/**
+ * Cell Renderer Components
+ *
+ * Reusable custom cell renderer components for common use cases:
+ * - StatusChip: Badge component for status indicators
+ * - ProgressBar: Visual progress bar
+ * - IconCell: Cell with icon
+ * - ImageCell: Cell with image
+ * - ButtonCell: Actionable button in cell
+ * - BadgeCell: Generic badge component
+ */
+interface StatusChipProps {
+    status: string;
+}
+export declare const StatusChip: React.FC<StatusChipProps>;
+interface ProgressBarProps {
+    value: number;
+    color?: string;
+    showLabel?: boolean;
+}
+export declare const ProgressBar: React.FC<ProgressBarProps>;
+interface IconCellProps {
+    icon: string;
+    text?: string;
+    iconColor?: string;
+}
+export declare const IconCell: React.FC<IconCellProps>;
+interface ImageCellProps {
+    src: string;
+    alt: string;
+    text?: string;
+    size?: number;
+}
+export declare const ImageCell: React.FC<ImageCellProps>;
+interface ButtonCellProps {
+    label: string;
+    onClick: (e: React.MouseEvent) => void;
+    variant?: 'primary' | 'secondary' | 'danger';
+    disabled?: boolean;
+}
+export declare const ButtonCell: React.FC<ButtonCellProps>;
+interface BadgeCellProps {
+    text: string;
+    color?: string;
+    backgroundColor?: string;
+}
+export declare const BadgeCell: React.FC<BadgeCellProps>;
+interface PriorityIndicatorProps {
+    priority: 'low' | 'medium' | 'high' | 'critical';
+}
+export declare const PriorityIndicator: React.FC<PriorityIndicatorProps>;
+interface RatingProps {
+    rating: number;
+    maxRating?: number;
+}
+export declare const Rating: React.FC<RatingProps>;
+interface CurrencyCellProps {
+    amount: number;
+    currency?: string;
+    locale?: string;
+}
+export declare const CurrencyCell: React.FC<CurrencyCellProps>;
+export {};

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

@@ -0,0 +1,12 @@
+import React from 'react';
+import type { Column } from './types';
+interface ColumnChooserProps {
+    columns: Column[];
+    columnOrder: string[];
+    hiddenColumns: string[];
+    onToggleVisibility: (field: string) => void;
+    onReorderColumns: (fromIndex: number, toIndex: number) => void;
+    onResetLayout: () => void;
+}
+export declare const ColumnChooser: React.FC<ColumnChooserProps>;
+export {};

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

@@ -0,0 +1,16 @@
+import React from 'react';
+import type { Column, FilterConfig, GridAction, Row } from './types';
+interface ColumnFiltersProps {
+    columns: Column[];
+    displayColumnOrder: string[];
+    columnWidths: {
+        [field: string]: number;
+    };
+    filterConfig: FilterConfig;
+    dispatch: React.Dispatch<GridAction>;
+    pinnedLeft: string[];
+    pinnedRight: string[];
+    rows: Row[];
+}
+export declare const ColumnFilters: React.FC<ColumnFiltersProps>;
+export {};

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

@@ -0,0 +1,10 @@
+import React from 'react';
+import type { ContextMenuProps } from './types';
+import './ContextMenu.css';
+/**
+ * ContextMenu Component
+ *
+ * A customizable right-click context menu for the DataGrid.
+ * Supports nested submenus, separators, disabled items, and custom menu items.
+ */
+export declare const ContextMenu: React.FC<ContextMenuProps>;

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

@@ -0,0 +1,22 @@
+import React from 'react';
+import type { DataGridProps } from './types';
+import type { GridApi } from './gridApi.types';
+/**
+ * DataGrid Component
+ *
+ * A feature-rich data grid component with sorting, filtering, pagination,
+ * column resizing, column reordering, row selection, cell editing, and keyboard navigation.
+ *
+ * Features:
+ * - Sortable columns (click header to sort asc/desc/none)
+ * - Column filtering (text filter for each column)
+ * - Pagination with configurable page size (10, 20, 50)
+ * - Column resizing (drag column border to resize)
+ * - Column reorder (drag and drop column headers)
+ * - Row selection (single click, Ctrl+click for multi, Shift+click for range)
+ * - Editable cells (double-click to edit, Enter to confirm, Escape to cancel)
+ * - Keyboard navigation (arrow keys to move focus, Enter to edit)
+ * - Sticky header (header stays visible when scrolling)
+ * - Grid API: Programmatic control via ref (AG Grid-inspired API)
+ */
+export declare const DataGrid: React.ForwardRefExoticComponent<DataGridProps & React.RefAttributes<GridApi>>;

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

@@ -0,0 +1,23 @@
+import React from 'react';
+import type { DensityMode } from './densityModes';
+export interface DensityToggleProps {
+    value: DensityMode;
+    onChange: (mode: DensityMode) => void;
+    className?: string;
+    disabled?: boolean;
+}
+/**
+ * DensityToggle Component
+ *
+ * A segmented control for switching between Compact, Normal, and Comfortable density modes.
+ * Displays as a horizontal button group with clear visual feedback.
+ *
+ * @example
+ * ```tsx
+ * <DensityToggle
+ *   value={densityMode}
+ *   onChange={setDensityMode}
+ * />
+ * ```
+ */
+export declare const DensityToggle: React.FC<DensityToggleProps>;

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

@@ -0,0 +1,7 @@
+import React from 'react';
+interface DragHandleProps {
+    position?: 'left' | 'right';
+    isDragging?: boolean;
+}
+export declare const DragHandle: React.FC<DragHandleProps>;
+export default DragHandle;

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

@@ -0,0 +1,14 @@
+import React from 'react';
+import type { Row, DragRowConfig } from './types';
+interface DraggableRowProps {
+    row: Row;
+    rowIndex: number;
+    config: DragRowConfig;
+    sourceTableId?: string;
+    onRowReorder?: (rows: Row[]) => void;
+    rows: Row[];
+    style?: React.CSSProperties;
+    children: React.ReactNode;
+}
+export declare const DraggableRow: React.FC<DraggableRowProps>;
+export default DraggableRow;

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

@@ -0,0 +1,12 @@
+import React from 'react';
+import type { Column, Row } from './types';
+interface ExportMenuProps {
+    columns: Column[];
+    fullDataset: Row[];
+    filteredData: Row[];
+    selectedRows: Set<string | number>;
+    currentPageData: Row[];
+    onExport?: (exported: boolean) => void;
+}
+export declare const ExportMenu: React.FC<ExportMenuProps>;
+export {};

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

@@ -0,0 +1,29 @@
+/**
+ * FacetedSearch Component
+ *
+ * A filter panel that shows value counts for categorical fields.
+ * Perfect for e-commerce and analytics dashboards.
+ * Provides instant visual feedback about data distribution and filtering options.
+ */
+import React from 'react';
+import type { Column, Row, FilterConfig } from './types';
+export interface FacetConfig {
+    field: string;
+    label?: string;
+    maxItems?: number;
+    sortBy?: 'count' | 'value' | 'alpha';
+    expanded?: boolean;
+}
+export interface FacetedSearchProps {
+    columns: Column[];
+    rows: Row[];
+    facetConfigs: FacetConfig[];
+    filterConfig: FilterConfig;
+    onFilterChange: (field: string, values: any[] | null) => void;
+    onClearAll?: () => void;
+    className?: string;
+    showSearch?: boolean;
+    collapsible?: boolean;
+}
+export declare const FacetedSearch: React.FC<FacetedSearchProps>;
+export default FacetedSearch;

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

@@ -0,0 +1,36 @@
+/**
+ * FilteredSearchBar Component
+ *
+ * Advanced search bar with token-based filtering (similar to GitLab/GitHub)
+ * Features:
+ * - Token/pill-based filters
+ * - Autocomplete dropdown
+ * - Multi-criteria search
+ * - Visual feedback with colored tokens
+ * - Keyboard navigation
+ */
+import React from 'react';
+export interface SearchToken {
+    id: string;
+    field: string;
+    label: string;
+    value: string | string[];
+    operator?: 'equals' | 'contains' | 'startsWith' | 'in';
+    color?: string;
+}
+export interface FilterOption {
+    field: string;
+    label: string;
+    type: 'text' | 'select' | 'multiselect' | 'date' | 'number';
+    options?: string[];
+    placeholder?: string;
+    color?: string;
+}
+export interface FilteredSearchBarProps {
+    filters: FilterOption[];
+    onSearch: (tokens: SearchToken[]) => void;
+    placeholder?: string;
+    maxTokens?: number;
+}
+export declare const FilteredSearchBar: React.FC<FilteredSearchBarProps>;
+export default FilteredSearchBar;

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

@@ -0,0 +1,12 @@
+import React from 'react';
+export interface FocusTrapProps {
+    children: React.ReactNode;
+    className?: string;
+    style?: React.CSSProperties;
+    enabled?: boolean;
+    initialFocus?: 'first' | 'last' | HTMLElement | null;
+    returnFocus?: boolean;
+    escapeDeactivates?: boolean;
+    onEscape?: () => void;
+}
+export declare const FocusTrap: React.FC<FocusTrapProps>;

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

@@ -0,0 +1,6 @@
+import React from 'react';
+/**
+ * Grid API Demo Component
+ * Demonstrates how to use the GridApi ref to programmatically control the grid
+ */
+export declare const GridApiDemo: React.FC;

package/dist/lib/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/lib/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/lib/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/lib/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/lib/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/lib/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/lib/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/lib/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/lib/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/lib/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 | null;
+    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>;