@opencorestack/opengridx 0.1.6 → 0.1.8

package/lib/hooks/core/useDataGrid.ts

@@ -0,0 +1,392 @@
+
+import { useReducer, useCallback, useMemo, useRef, useEffect } from 'react';
+import type {
+  GridState,
+  GridRowModel,
+  GridColDef,
+  GridRowId,
+  GridSortItem,
+  GridFilterModel,
+  GridPaginationModel,
+  GridColumnVisibilityModel,
+  GridApi
+} from '../../types';
+
+type GridAction =
+  | { type: 'SET_ROWS'; payload: GridRowModel[] | ((prev: GridRowModel[]) => GridRowModel[]); preserveRowCount?: boolean }
+  | { type: 'SET_COLUMNS'; payload: GridColDef[] }
+  | { type: 'SET_SORT_MODEL'; payload: GridSortItem[] }
+  | { type: 'SET_FILTER_MODEL'; payload: GridFilterModel }
+  | { type: 'SET_PAGINATION_MODEL'; payload: GridPaginationModel }
+  | { type: 'SET_SELECTION'; payload: Set<GridRowId> }
+  | { type: 'SET_SCROLL'; payload: { scrollTop: number; scrollLeft: number } }
+  | { type: 'SET_DIMENSIONS'; payload: { viewportWidth: number; viewportHeight: number } }
+  | { type: 'SET_DATASOURCE_LOADING'; payload: boolean }
+  | { type: 'SET_DATASOURCE_ERROR'; payload: any }
+  | { type: 'SET_ROW_COUNT'; payload: number };
+
+function createInitialState(rows: GridRowModel[], columns: GridColDef[], columnVisibilityModel: GridColumnVisibilityModel = {}): GridState {
+  const idRowsLookup = new Map<GridRowId, GridRowModel>();
+  const allRows: GridRowId[] = [];
+
+  rows.forEach(row => {
+    const id = row.id;
+    idRowsLookup.set(id, row);
+    allRows.push(id);
+  });
+
+  const columnLookup = new Map<string, GridColDef>();
+  const orderedFields: string[] = [];
+
+  columns.forEach(col => {
+    columnLookup.set(col.field, col);
+    orderedFields.push(col.field);
+  });
+
+  return {
+    rows: {
+      idRowsLookup,
+      allRows
+    },
+    columns: {
+      all: columns,
+      lookup: columnLookup,
+      orderedFields,
+      columnVisibilityModel
+    },
+    sorting: {
+      sortModel: []
+    },
+    filter: {
+      filterModel: { items: [] }
+    },
+    pagination: {
+      paginationModel: { page: 0, pageSize: 100 },
+      rowCount: rows.length
+    },
+    selection: {
+      selectedRows: new Set()
+    },
+    pinning: {
+      pinnedColumns: {},
+      pinnedRows: {}
+    },
+    virtualization: {
+      renderContext: {
+        firstRowIndex: 0,
+        lastRowIndex: 0,
+        firstColumnIndex: 0,
+        lastColumnIndex: 0
+      },
+      scrollTop: 0,
+      scrollLeft: 0
+    },
+    dimensions: {
+      rowHeight: 52,
+      headerHeight: 56,
+      viewportWidth: 0,
+      viewportHeight: 0
+    },
+    dataSource: {
+      loading: false,
+      error: null
+    }
+  };
+}
+
+function gridReducer(state: GridState, action: GridAction): GridState {
+  switch (action.type) {
+    case 'SET_ROWS': {
+      const currentRows = Array.from(state.rows.idRowsLookup.values());
+      const newRows = typeof action.payload === 'function' 
+        ? action.payload(currentRows)
+        : action.payload;
+
+      const idRowsLookup = new Map<GridRowId, GridRowModel>();
+      const allRows: GridRowId[] = [];
+
+      newRows.forEach(row => {
+        idRowsLookup.set(row.id, row);
+        allRows.push(row.id);
+      });
+
+      return {
+        ...state,
+        rows: { idRowsLookup, allRows },
+        pagination: {
+          ...state.pagination,
+          // Only override rowCount when we're NOT in server mode (i.e. no preserveRowCount flag)
+          // Server-side fetches set rowCount separately via SET_ROW_COUNT.
+          rowCount: action.preserveRowCount ? state.pagination.rowCount : newRows.length
+        }
+      };
+    }
+
+    case 'SET_COLUMNS': {
+      const columnLookup = new Map<string, GridColDef>();
+      const orderedFields: string[] = [];
+
+      action.payload.forEach(col => {
+        columnLookup.set(col.field, col);
+        orderedFields.push(col.field);
+      });
+
+      return {
+        ...state,
+        columns: {
+          all: action.payload,
+          lookup: columnLookup,
+          orderedFields,
+          columnVisibilityModel: {}
+        }
+      };
+    }
+
+    case 'SET_SORT_MODEL':
+      return {
+        ...state,
+        sorting: { sortModel: action.payload }
+      };
+
+    case 'SET_FILTER_MODEL':
+      return {
+        ...state,
+        filter: { filterModel: action.payload }
+      };
+
+    case 'SET_PAGINATION_MODEL':
+      return {
+        ...state,
+        pagination: {
+          ...state.pagination,
+          paginationModel: action.payload
+        }
+      };
+
+    case 'SET_SELECTION':
+      return {
+        ...state,
+        selection: { selectedRows: action.payload }
+      };
+
+    case 'SET_SCROLL':
+      return {
+        ...state,
+        virtualization: {
+          ...state.virtualization,
+          scrollTop: action.payload.scrollTop,
+          scrollLeft: action.payload.scrollLeft
+        }
+      };
+
+    case 'SET_DIMENSIONS':
+      return {
+        ...state,
+        dimensions: {
+          ...state.dimensions,
+          viewportWidth: action.payload.viewportWidth,
+          viewportHeight: action.payload.viewportHeight
+        }
+      };
+
+    case 'SET_DATASOURCE_LOADING':
+      return {
+        ...state,
+        dataSource: {
+          ...state.dataSource,
+          loading: action.payload
+        }
+      };
+
+    case 'SET_DATASOURCE_ERROR':
+      return {
+        ...state,
+        dataSource: {
+          ...state.dataSource,
+          error: action.payload
+        }
+      };
+
+    case 'SET_ROW_COUNT':
+      return {
+        ...state,
+        pagination: {
+          ...state.pagination,
+          rowCount: action.payload
+        }
+      };
+
+    default:
+      return state;
+  }
+}
+
+export interface UseDataGridParams<R extends GridRowModel = GridRowModel> {
+  rows: R[];
+  columns: GridColDef<R>[];
+  rowHeight?: number;
+  headerHeight?: number;
+  rowCount?: number;
+  columnVisibilityModel?: GridColumnVisibilityModel;
+  initialState?: import('../../state/types').GridInitialState;
+}
+
+export function useDataGrid<R extends GridRowModel = GridRowModel>(params: UseDataGridParams<R>) {
+  const { rows, columns, rowHeight = 52, headerHeight = 56, columnVisibilityModel, initialState: propInitialState } = params;
+
+  const internalInitialState = useMemo(
+    () => createInitialState(rows, columns as any, columnVisibilityModel),
+    [] 
+  );
+
+  const [state, dispatch] = useReducer(gridReducer, {
+    ...internalInitialState,
+    sorting: propInitialState?.sorting || internalInitialState.sorting,
+    filter: propInitialState?.filter || internalInitialState.filter,
+    dataSource: (propInitialState?.dataSource 
+      ? { ...internalInitialState.dataSource, ...propInitialState.dataSource }
+      : internalInitialState.dataSource) as any,
+    pagination: {
+      ...internalInitialState.pagination,
+      ...(propInitialState?.pagination || {}),
+      rowCount: params.rowCount ?? propInitialState?.pagination?.rowCount ?? internalInitialState.pagination.rowCount
+    },
+    dimensions: {
+      ...internalInitialState.dimensions,
+      rowHeight,
+      headerHeight
+    }
+  });
+
+  const stateRef = useRef(state);
+  stateRef.current = state;
+
+  // Sync internal state when the external `rows` prop changes
+  const prevRowsRef = useRef(rows);
+  useEffect(() => {
+    if (rows !== prevRowsRef.current) {
+      prevRowsRef.current = rows;
+      dispatch({ type: 'SET_ROWS', payload: rows as GridRowModel[] });
+    }
+  }, [rows]);
+
+  const setRows = useCallback((rowsOrUpdater: GridRowModel[] | ((prev: GridRowModel[]) => GridRowModel[]), preserveRowCount?: boolean) => {
+    dispatch({ type: 'SET_ROWS', payload: rowsOrUpdater, preserveRowCount });
+  }, []);
+
+  const setColumns = useCallback((newColumns: GridColDef[]) => {
+    dispatch({ type: 'SET_COLUMNS', payload: newColumns });
+  }, []);
+
+  const setSortModel = useCallback((sortModel: GridSortItem[]) => {
+    dispatch({ type: 'SET_SORT_MODEL', payload: sortModel });
+  }, []);
+
+  const setFilterModel = useCallback((filterModel: GridFilterModel) => {
+    dispatch({ type: 'SET_FILTER_MODEL', payload: filterModel });
+  }, []);
+
+  const setPaginationModel = useCallback((paginationModel: GridPaginationModel) => {
+    dispatch({ type: 'SET_PAGINATION_MODEL', payload: paginationModel });
+  }, []);
+
+  const setSelection = useCallback((selectedRows: Set<GridRowId>) => {
+    dispatch({ type: 'SET_SELECTION', payload: selectedRows });
+  }, []);
+
+  const setScroll = useCallback((scrollTop: number, scrollLeft: number) => {
+    dispatch({ type: 'SET_SCROLL', payload: { scrollTop, scrollLeft } });
+  }, []);
+
+  const setDimensions = useCallback((viewportWidth: number, viewportHeight: number) => {
+    dispatch({ type: 'SET_DIMENSIONS', payload: { viewportWidth, viewportHeight } });
+  }, []);
+
+  const setDataSourceLoading = useCallback((loading: boolean) => {
+    dispatch({ type: 'SET_DATASOURCE_LOADING', payload: loading });
+  }, []);
+
+  const setDataSourceError = useCallback((error: any) => {
+    dispatch({ type: 'SET_DATASOURCE_ERROR', payload: error });
+  }, []);
+
+  const setRowCount = useCallback((count: number) => {
+    dispatch({ type: 'SET_ROW_COUNT', payload: count });
+  }, []);
+
+  const apiRef = useRef<GridApi>({
+    getRow: (id: GridRowId) => stateRef.current.rows.idRowsLookup.get(id) || null,
+    getAllRows: () => Array.from(stateRef.current.rows.idRowsLookup.values()),
+    getVisibleRows: () => Array.from(stateRef.current.rows.idRowsLookup.values()),
+    getAggregationResult: () => null,
+    getAggregationModel: () => null,
+    getColumn: (field: string) => stateRef.current.columns.lookup.get(field) || null,
+    getAllColumns: () => stateRef.current.columns.all,
+    getVisibleColumns: () => stateRef.current.columns.all,
+    selectRow: (id: GridRowId, isSelected = true) => {
+      const newSelection = new Set(stateRef.current.selection.selectedRows);
+      if (isSelected) {
+        newSelection.add(id);
+      } else {
+        newSelection.delete(id);
+      }
+      setSelection(newSelection);
+    },
+    selectRows: (ids: GridRowId[], isSelected = true) => {
+      const newSelection = new Set(stateRef.current.selection.selectedRows);
+      ids.forEach(id => {
+        if (isSelected) {
+          newSelection.add(id);
+        } else {
+          newSelection.delete(id);
+        }
+      });
+      setSelection(newSelection);
+    },
+    getSelectedRows: () => Array.from(stateRef.current.selection.selectedRows),
+    sortColumn: (field: string, direction) => {
+      if (direction === null) {
+        setSortModel(stateRef.current.sorting.sortModel.filter(item => item.field !== field));
+      } else {
+        const existingIndex = stateRef.current.sorting.sortModel.findIndex(item => item.field === field);
+        if (existingIndex >= 0) {
+          const newModel = [...stateRef.current.sorting.sortModel];
+          newModel[existingIndex] = { field, sort: direction };
+          setSortModel(newModel);
+        } else {
+          setSortModel([...stateRef.current.sorting.sortModel, { field, sort: direction }]);
+        }
+      }
+    },
+    getSortModel: () => stateRef.current.sorting.sortModel,
+    setFilterModel,
+    getFilterModel: () => stateRef.current.filter.filterModel,
+    setPage: (page: number) => {
+      setPaginationModel({ ...stateRef.current.pagination.paginationModel, page });
+    },
+    setPageSize: (pageSize: number) => {
+      setPaginationModel({ ...stateRef.current.pagination.paginationModel, pageSize, page: 0 });
+    },
+    scrollToIndexes: () => {
+
+    },
+    copySelectedRows: () => Promise.resolve()
+  });
+
+  return {
+    state,
+    dispatch,
+    apiRef,
+    setRows,
+    setColumns,
+    setSortModel,
+    setFilterModel,
+    setPaginationModel,
+    setSelection,
+    setScroll,
+    setDimensions,
+    setDataSourceLoading,
+    setDataSourceError,
+    setRowCount
+  };
+}

package/lib/hooks/core/useGridApiRef.ts

@@ -0,0 +1,10 @@
+import { useRef } from 'react';
+import type { GridApi } from '../../types';
+
+/**
+ * Hook to create a ref for the DataGrid API.
+ * This ref can be passed to the `apiRef` prop of the `DataGrid` component.
+ */
+export function useGridApiRef() {
+    return useRef<GridApi>(null!);
+}

package/lib/hooks/features/useAggregation.ts

@@ -0,0 +1,143 @@
+
+import { useMemo, useEffect, useRef, useCallback, useState } from 'react';
+import type {
+    GridRowModel,
+    GridAggregationModel,
+    GridAggregationResult,
+    GridFilterModel,
+    GridSortItem,
+    GridDataSource,
+} from '../../types';
+
+export type BuiltInAggFn = 'sum' | 'avg' | 'count' | 'min' | 'max' | 'unique';
+
+const AGGREGATION_FUNCTIONS: Record<BuiltInAggFn, (values: any[]) => any> = {
+    sum: (values) => {
+        const nums = values.filter((v) => v != null && !isNaN(Number(v)));
+        return nums.reduce((acc, v) => acc + Number(v), 0);
+    },
+    avg: (values) => {
+        const nums = values.filter((v) => v != null && !isNaN(Number(v)));
+        if (nums.length === 0) return null;
+        return nums.reduce((acc, v) => acc + Number(v), 0) / nums.length;
+    },
+    count: (values) => values.filter((v) => v != null).length,
+    min: (values) => {
+        const nums = values.filter((v) => v != null && !isNaN(Number(v))).map(Number);
+        return nums.length ? Math.min(...nums) : null;
+    },
+    max: (values) => {
+        const nums = values.filter((v) => v != null && !isNaN(Number(v))).map(Number);
+        return nums.length ? Math.max(...nums) : null;
+    },
+    unique: (values) => new Set(values.filter((v) => v != null)).size,
+};
+
+export function formatAggregationValue(value: any, fnName: string): string {
+    if (value == null) return '—';
+    if (typeof value === 'number') {
+        if (fnName === 'avg') {
+            return value.toLocaleString(undefined, { maximumFractionDigits: 2 });
+        }
+        return value.toLocaleString();
+    }
+    return String(value);
+}
+
+export interface UseAggregationParams<R extends GridRowModel> {
+        rows: R[];
+        aggregationModel: GridAggregationModel;
+        isServerSide: boolean;
+        dataSource?: GridDataSource<R>;
+        filterModel?: GridFilterModel;
+        sortModel?: GridSortItem[];
+        serverAggregationResults?: GridAggregationResult | null;
+}
+
+export interface UseAggregationReturn {
+        aggregationResult: GridAggregationResult;
+        isLoading: boolean;
+        error: any;
+}
+
+export function useAggregation<R extends GridRowModel>(
+    params: UseAggregationParams<R>
+): UseAggregationReturn {
+    const {
+        rows,
+        aggregationModel,
+        isServerSide,
+        dataSource,
+        filterModel,
+        sortModel,
+        serverAggregationResults,
+    } = params;
+
+    const clientResult = useMemo<GridAggregationResult>(() => {
+        if (isServerSide || Object.keys(aggregationModel).length === 0) return {};
+
+        const result: GridAggregationResult = {};
+        for (const [field, fnName] of Object.entries(aggregationModel)) {
+            const fn = AGGREGATION_FUNCTIONS[fnName as BuiltInAggFn];
+            if (!fn) {
+                console.warn(`[useAggregation] Unknown aggregation function: "${fnName}"`);
+                continue;
+            }
+            const values = rows.map((row) => (row as any)[field]);
+            result[field] = fn(values);
+        }
+        return result;
+    }, [rows, aggregationModel, isServerSide]);
+
+    const [serverResult, setServerResult] = useState<GridAggregationResult>({});
+    const [isLoading, setIsLoading] = useState(false);
+    const [error, setError] = useState<any>(null);
+    const requestIdRef = useRef(0);
+
+    const fetchServerAggregations = useCallback(async () => {
+        if (!dataSource?.getAggregations || Object.keys(aggregationModel).length === 0) return;
+
+        const requestId = ++requestIdRef.current;
+        setIsLoading(true);
+        setError(null);
+
+        try {
+            const result = await dataSource.getAggregations({
+                sortModel: sortModel ?? [],
+                filterModel: filterModel ?? { items: [] },
+                groupKeys: [],
+                aggregationModel,
+            });
+
+            if (requestId === requestIdRef.current) {
+                setServerResult(result);
+            }
+        } catch (err) {
+            if (requestId === requestIdRef.current) {
+                setError(err);
+                console.error('[useAggregation] Server aggregation error:', err);
+            }
+        } finally {
+            if (requestId === requestIdRef.current) {
+                setIsLoading(false);
+            }
+        }
+    }, [dataSource, aggregationModel, filterModel, sortModel]);
+
+    useEffect(() => {
+        if (isServerSide && dataSource?.getAggregations && !serverAggregationResults) {
+            fetchServerAggregations();
+        }
+    }, [fetchServerAggregations, isServerSide, dataSource, serverAggregationResults]);
+
+    const aggregationResult = useMemo<GridAggregationResult>(() => {
+        if (!isServerSide) return clientResult;
+
+        if (serverAggregationResults && Object.keys(serverAggregationResults).length > 0) {
+            return serverAggregationResults;
+        }
+        return serverResult;
+    }, [isServerSide, clientResult, serverAggregationResults, serverResult]);
+
+    return { aggregationResult, isLoading, error };
+}

package/lib/hooks/features/useGridClipboard.ts

@@ -0,0 +1,133 @@
+import { useEffect, useCallback } from 'react';
+import type { GridColDef, GridRowModel, GridRowId } from '../../types';
+
+interface UseGridClipboardProps {
+  /** The currently selected row IDs — must come from the live selection source (not state.selection which is stale). */
+  selectedRowIds: Set<GridRowId>;
+  columns: GridColDef[];
+  getVisibleRows: () => GridRowModel[];
+  getRowId: (row: GridRowModel) => GridRowId;
+}
+
+function copyTextSynchronous(text: string): boolean {
+  const textarea = document.createElement('textarea');
+  textarea.value = text;
+  textarea.style.cssText = 'position:fixed;top:-9999px;left:-9999px;opacity:0;';
+  document.body.appendChild(textarea);
+  textarea.focus();
+  textarea.select();
+  let success = false;
+  try {
+    success = document.execCommand('copy');
+  } finally {
+    document.body.removeChild(textarea);
+  }
+  return success;
+}
+
+/**
+ * Writes text to clipboard.
+ * Uses both execCommand (synchronous, needed for non-HTTPS or non-async-gesture environments)
+ * and navigator.clipboard for modern browser support.
+ */
+async function writeToClipboard(text: string): Promise<void> {
+  let fallbackSuccess = false;
+  try {
+    fallbackSuccess = copyTextSynchronous(text);
+  } catch (e) {
+    // Ignore fallback errors
+  }
+
+  if (navigator.clipboard && typeof navigator.clipboard.writeText === 'function') {
+    try {
+      await navigator.clipboard.writeText(text);
+      return;
+    } catch (e) {
+      if (fallbackSuccess) return;
+      throw e;
+    }
+  } else if (!fallbackSuccess) {
+    throw new Error('Clipboard API not available and fallback failed.');
+  }
+}
+
+/**
+ * Hook to handle clipboard operations.
+ * Copies selected rows as Tab-Separated Values (TSV) on Ctrl+C / Cmd+C.
+ * Also exposes `copySelectedRows` for programmatic use via apiRef.
+ */
+export function useGridClipboard(props: UseGridClipboardProps) {
+  const { selectedRowIds, columns, getVisibleRows, getRowId } = props;
+
+  const copySelectedRows = useCallback(async () => {
+
+    if (selectedRowIds.size === 0) return;
+
+    const visibleRows = getVisibleRows();
+    const rowsToCopy = visibleRows.filter((row) => selectedRowIds.has(getRowId(row)));
+
+
+
+    if (rowsToCopy.length === 0) return;
+
+    // Exclude internal grid columns (checkbox, expand, reorder)
+    const visibleColumns = columns.filter((col) => !col.field.startsWith('__'));
+
+    // Header row
+    const headerRow = visibleColumns
+      .map((col) => col.headerName || col.field)
+      .join('\t');
+
+    // Data rows
+    const dataRows = rowsToCopy
+      .map((row) =>
+        visibleColumns
+          .map((col) => {
+            const value = row[col.field];
+            if (col.valueFormatter) {
+              return col.valueFormatter({ value, row, field: col.field });
+            }
+            return value ?? '';
+          })
+          .join('\t')
+      )
+      .join('\n');
+
+    const fullContent = `${headerRow}\n${dataRows}`;
+
+    try {
+      await writeToClipboard(fullContent);
+
+    } catch (err) {
+      console.error('[OpenGridX] Failed to copy to clipboard:', err);
+    }
+  }, [selectedRowIds, columns, getVisibleRows, getRowId]);
+
+  // Keyboard shortcut: Ctrl+C / Cmd+C
+  useEffect(() => {
+    const handleKeyDown = (event: KeyboardEvent) => {
+      if (!(event.ctrlKey || event.metaKey) || event.key !== 'c') return;
+
+      // Don't intercept when user is typing in an input / editor
+      const activeEl = document.activeElement as HTMLElement;
+      const tag = activeEl?.tagName.toLowerCase();
+      const type = (activeEl as HTMLInputElement)?.type;
+
+      // Skip capturing Ctrl+C if we are genuinely inside a text input
+      if (
+        (tag === 'input' && type !== 'checkbox' && type !== 'radio') ||
+        tag === 'textarea' ||
+        tag === 'select'
+      ) return;
+
+      if (activeEl?.isContentEditable) return;
+
+      copySelectedRows();
+    };
+
+    window.addEventListener('keydown', handleKeyDown);
+    return () => window.removeEventListener('keydown', handleKeyDown);
+  }, [copySelectedRows]);
+
+  return { copySelectedRows };
+}