@alaarab/ogrid-core 2.1.2 → 2.1.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@alaarab/ogrid-core",
-  "version": "2.1.2",
+  "version": "2.1.4",
   "description": "OGrid core – framework-agnostic types, algorithms, and utilities for OGrid data grids.",
   "main": "dist/esm/index.js",
   "module": "dist/esm/index.js",
@@ -9,11 +9,11 @@
     ".": {
       "types": "./dist/types/index.d.ts",
       "import": "./dist/esm/index.js",
-      "require": "./dist/esm/index.js"
+      "default": "./dist/esm/index.js"
     }
   },
   "scripts": {
-    "build": "rimraf dist && tsc -p tsconfig.build.json",
+    "build": "rimraf dist && tsup && tsc -p tsconfig.build.json",
     "test": "jest"
   },
   "keywords": [

package/dist/esm/constants/index.js

@@ -1,3 +0,0 @@
-export { CHECKBOX_COLUMN_WIDTH, ROW_NUMBER_COLUMN_WIDTH, DEFAULT_MIN_COLUMN_WIDTH, CELL_PADDING, GRID_BORDER_RADIUS, } from './layout';
-export { DEFAULT_DEBOUNCE_MS, PEOPLE_SEARCH_DEBOUNCE_MS, SIDEBAR_TRANSITION_MS, } from './timing';
-export { Z_INDEX } from './zIndex';

package/dist/esm/constants/layout.js

@@ -1,13 +0,0 @@
-/**
- * Layout and sizing constants for OGrid components.
- */
-/** Width of the row selection checkbox column in pixels. */
-export const CHECKBOX_COLUMN_WIDTH = 48;
-/** Width of the row numbers column in pixels. */
-export const ROW_NUMBER_COLUMN_WIDTH = 50;
-/** Default minimum width for resizable columns in pixels. */
-export const DEFAULT_MIN_COLUMN_WIDTH = 80;
-/** Horizontal padding inside cells, used for width calculations. */
-export const CELL_PADDING = 16;
-/** Border radius for the grid container in pixels. */
-export const GRID_BORDER_RADIUS = 6;

package/dist/esm/constants/timing.js

@@ -1,10 +0,0 @@
-/**
- * Timing constants used across OGrid.
- * Centralizes magic numbers for consistency and easier tuning.
- */
-/** Default debounce delay for generic inputs (milliseconds) */
-export const DEFAULT_DEBOUNCE_MS = 300;
-/** Debounce delay for people/user search inputs (milliseconds) */
-export const PEOPLE_SEARCH_DEBOUNCE_MS = DEFAULT_DEBOUNCE_MS;
-/** Sidebar panel transition duration (milliseconds) */
-export const SIDEBAR_TRANSITION_MS = 300;

package/dist/esm/constants/zIndex.js

@@ -1,16 +0,0 @@
-/**
- * Z-index constants for layering OGrid UI elements.
- * Ensures consistent stacking order across all packages.
- */
-export const Z_INDEX = {
-    /** Selection range overlay (marching ants) */
-    SELECTION_OVERLAY: 4,
-    /** Clipboard overlay (copy/cut animation) */
-    CLIPBOARD_OVERLAY: 5,
-    /** Dropdown menus (column chooser, pagination size select) */
-    DROPDOWN: 1000,
-    /** Modal dialogs */
-    MODAL: 2000,
-    /** Context menus (right-click grid menu) */
-    CONTEXT_MENU: 9999,
-};

package/dist/esm/types/columnTypes.js

@@ -1 +0,0 @@
-export {};

package/dist/esm/types/dataGridTypes.js

@@ -1,27 +0,0 @@
-export function toUserLike(u) {
-    if (!u)
-        return undefined;
-    return {
-        id: u.id,
-        displayName: u.displayName,
-        email: 'email' in u && u.email ? u.email : (u.mail || u.userPrincipalName || ''),
-        photo: u.photo
-    };
-}
-/** Returns true if (row, col) is inside the range (inclusive). */
-export function isInSelectionRange(range, row, col) {
-    const minR = Math.min(range.startRow, range.endRow);
-    const maxR = Math.max(range.startRow, range.endRow);
-    const minC = Math.min(range.startCol, range.endCol);
-    const maxC = Math.max(range.startCol, range.endCol);
-    return row >= minR && row <= maxR && col >= minC && col <= maxC;
-}
-/** Normalize range so start ≤ end for both dimensions. */
-export function normalizeSelectionRange(range) {
-    return {
-        startRow: Math.min(range.startRow, range.endRow),
-        endRow: Math.max(range.startRow, range.endRow),
-        startCol: Math.min(range.startCol, range.endCol),
-        endCol: Math.max(range.startCol, range.endCol),
-    };
-}

package/dist/esm/types/index.js

@@ -1,2 +0,0 @@
-// Utility functions
-export { toUserLike, isInSelectionRange, normalizeSelectionRange, } from './dataGridTypes';

package/dist/esm/utils/aggregationUtils.js

@@ -1,48 +0,0 @@
-import { getCellValue } from './cellValue';
-import { normalizeSelectionRange } from '../types/dataGridTypes';
-/**
- * Computes numeric aggregations (sum, avg, min, max, count) for selected cells.
- * Only numeric values are included in sum/avg/min/max. Count includes only numeric cells.
- * Returns null when selection is absent, has fewer than 2 cells, or contains no numeric values.
- */
-export function computeAggregations(items, visibleCols, selectionRange) {
-    if (!selectionRange)
-        return null;
-    const norm = normalizeSelectionRange(selectionRange);
-    let totalCells = 0;
-    let sum = 0;
-    let min = Infinity;
-    let max = -Infinity;
-    let count = 0;
-    for (let r = norm.startRow; r <= norm.endRow; r++) {
-        for (let c = norm.startCol; c <= norm.endCol; c++) {
-            if (r >= items.length || c >= visibleCols.length)
-                continue;
-            totalCells++;
-            const item = items[r];
-            const col = visibleCols[c];
-            const raw = getCellValue(item, col);
-            // Use Number() instead of parseFloat() so date strings like "2020-08-22"
-            // return NaN instead of partially parsing to 2020
-            const num = typeof raw === 'number' ? raw : Number(raw);
-            if (!isNaN(num) && isFinite(num)) {
-                sum += num;
-                if (num < min)
-                    min = num;
-                if (num > max)
-                    max = num;
-                count++;
-            }
-        }
-    }
-    // Need at least 2 cells selected and at least 1 numeric value to show aggregation
-    if (totalCells < 2 || count === 0)
-        return null;
-    return {
-        sum,
-        avg: sum / count,
-        min,
-        max,
-        count,
-    };
-}

package/dist/esm/utils/cellValue.js

@@ -1,14 +0,0 @@
-/**
- * Get the cell value for a row/column, using valueGetter when defined otherwise item[columnId].
- *
- * @param item - The row data object.
- * @param col  - Column definition. If `valueGetter` is defined it takes priority;
- *               otherwise the value is read via `item[col.columnId]`.
- *               Assumes `columnId` is a valid key on the item when no `valueGetter` is provided.
- * @returns The raw cell value (`unknown`). May be `undefined` if the key does not exist on the item.
- */
-export function getCellValue(item, col) {
-    if (col.valueGetter)
-        return col.valueGetter(item);
-    return item[col.columnId];
-}

package/dist/esm/utils/clientSideData.js

@@ -1,155 +0,0 @@
-import { getCellValue } from './cellValue';
-import { getFilterField } from './ogridHelpers';
-/**
- * Cached column map to avoid rebuilding on every call.
- * WeakMap keyed by columns array reference.
- */
-const columnMapCache = new WeakMap();
-/**
- * Apply client-side filtering and sorting to data.
- * Extracted from useOGrid for testability and reuse.
- *
- * @param data - The full dataset to process
- * @param columns - Column definitions (used for filtering and sorting)
- * @param filters - Current filter state (discriminated FilterValue union)
- * @param sortBy - Column ID to sort by (optional)
- * @param sortDirection - Sort direction (optional)
- * @returns Filtered and sorted array
- */
-export function processClientSideData(data, columns, filters, sortBy, sortDirection) {
-    // Get or build column lookup map (cached via WeakMap)
-    let columnMap = columnMapCache.get(columns);
-    if (!columnMap) {
-        columnMap = new Map();
-        for (let i = 0; i < columns.length; i++) {
-            columnMap.set(columns[i].columnId, columns[i]);
-        }
-        columnMapCache.set(columns, columnMap);
-    }
-    // --- Filtering (single-pass: build predicates, then one .filter()) ---
-    const predicates = [];
-    for (let i = 0; i < columns.length; i++) {
-        const col = columns[i];
-        const filterKey = getFilterField(col);
-        const val = filters[filterKey];
-        if (!val)
-            continue;
-        switch (val.type) {
-            case 'multiSelect':
-                // NOTE: Cell values are coerced to string via String() for set membership checks.
-                // Object-typed column values will produce "[object Object]" — use valueGetter or
-                // valueFormatter on the column def to ensure meaningful string representation.
-                if (val.value.length > 0) {
-                    const allowedSet = new Set(val.value);
-                    predicates.push((r) => allowedSet.has(String(getCellValue(r, col))));
-                }
-                break;
-            case 'text': {
-                const trimmed = val.value.trim();
-                if (trimmed) {
-                    const lower = trimmed.toLowerCase();
-                    predicates.push((r) => String(getCellValue(r, col) ?? '').toLowerCase().includes(lower));
-                }
-                break;
-            }
-            case 'people': {
-                const email = val.value.email.toLowerCase();
-                predicates.push((r) => String(getCellValue(r, col) ?? '').toLowerCase() === email);
-                break;
-            }
-            case 'date': {
-                const dv = val.value;
-                // Pre-compute filter boundary timestamps to avoid repeated Date parsing in the filter loop
-                const fromTs = dv.from ? new Date(dv.from + 'T00:00:00').getTime() : NaN;
-                const toTs = dv.to ? new Date(dv.to + 'T23:59:59.999').getTime() : NaN;
-                predicates.push((r) => {
-                    const cellVal = getCellValue(r, col);
-                    if (cellVal == null)
-                        return false;
-                    const cellTs = new Date(String(cellVal)).getTime();
-                    if (Number.isNaN(cellTs))
-                        return false;
-                    if (!Number.isNaN(fromTs) && cellTs < fromTs)
-                        return false;
-                    if (!Number.isNaN(toTs) && cellTs > toTs)
-                        return false;
-                    return true;
-                });
-                break;
-            }
-        }
-    }
-    const filtered = predicates.length > 0;
-    const rows = filtered
-        ? data.filter((row) => {
-            for (let i = 0; i < predicates.length; i++) {
-                if (!predicates[i](row))
-                    return false;
-            }
-            return true;
-        })
-        : data;
-    // --- Sorting ---
-    if (sortBy) {
-        // Copy before sorting if we didn't filter (filter already creates a new array).
-        // This avoids mutating the caller's original data array.
-        const sortable = filtered ? rows : rows.slice();
-        const sortCol = columnMap.get(sortBy);
-        const compare = sortCol?.compare;
-        const dir = sortDirection === 'asc' ? 1 : -1;
-        const isDateSort = sortCol?.type === 'date';
-        // For date columns, pre-compute timestamps to avoid repeated new Date() in O(n log n) comparisons.
-        // NOTE: The timestamp cache is scoped to this single sort invocation. It is rebuilt on every call,
-        // so mutating row objects between calls is safe — stale timestamps cannot persist across invocations.
-        if (isDateSort && !compare) {
-            const timestampCache = new Map();
-            for (let i = 0; i < sortable.length; i++) {
-                const row = sortable[i];
-                const val = sortCol ? getCellValue(row, sortCol) : row[sortBy];
-                if (val == null) {
-                    timestampCache.set(row, NaN);
-                }
-                else {
-                    const t = new Date(String(val)).getTime();
-                    timestampCache.set(row, Number.isNaN(t) ? 0 : t);
-                }
-            }
-            sortable.sort((a, b) => {
-                const at = timestampCache.get(a) ?? NaN;
-                const bt = timestampCache.get(b) ?? NaN;
-                if (Number.isNaN(at) && Number.isNaN(bt))
-                    return 0;
-                if (Number.isNaN(at))
-                    return -1 * dir;
-                if (Number.isNaN(bt))
-                    return 1 * dir;
-                return at === bt ? 0 : at > bt ? dir : -dir;
-            });
-        }
-        else {
-            sortable.sort((a, b) => {
-                if (compare)
-                    return compare(a, b) * dir;
-                const av = sortCol
-                    ? getCellValue(a, sortCol)
-                    : a[sortBy];
-                const bv = sortCol
-                    ? getCellValue(b, sortCol)
-                    : b[sortBy];
-                if (av == null && bv == null)
-                    return 0;
-                if (av == null)
-                    return -1 * dir;
-                if (bv == null)
-                    return 1 * dir;
-                if (typeof av === 'number' && typeof bv === 'number')
-                    return av === bv ? 0 : av > bv ? dir : -dir;
-                const as = String(av).toLowerCase();
-                const bs = String(bv).toLowerCase();
-                return as === bs ? 0 : as > bs ? dir : -dir;
-            });
-        }
-        return sortable;
-    }
-    return rows;
-}

package/dist/esm/utils/clipboardHelpers.js

@@ -1,142 +0,0 @@
-import { getCellValue } from './cellValue';
-import { parseValue } from './valueParsers';
-import { normalizeSelectionRange } from '../types';
-/**
- * Format a single cell value for inclusion in a TSV clipboard string.
- * Strips tabs and newlines so they don't corrupt the TSV structure.
- *
- * @param raw         Raw cell value (from getCellValue).
- * @param formatted   Formatted value (from valueFormatter, if present).
- * @returns TSV-safe string representation of the cell.
- */
-export function formatCellValueForTsv(raw, formatted) {
-    const val = formatted != null && formatted !== '' ? formatted : raw;
-    if (val == null || val === '')
-        return '';
-    try {
-        return String(val).replace(/[\t\n]/g, ' ');
-    }
-    catch {
-        return '[Object]';
-    }
-}
-/**
- * Serialize a rectangular cell range to a TSV (tab-separated values) string
- * suitable for writing to the clipboard.
- *
- * @param items       Flat array of all row data objects.
- * @param visibleCols Visible column definitions.
- * @param range       The selection range to serialize (will be normalized).
- * @returns TSV string with rows separated by \\r\\n and columns by \\t.
- */
-export function formatSelectionAsTsv(items, visibleCols, range) {
-    const norm = normalizeSelectionRange(range);
-    const rows = [];
-    for (let r = norm.startRow; r <= norm.endRow; r++) {
-        const cells = [];
-        for (let c = norm.startCol; c <= norm.endCol; c++) {
-            if (r >= items.length || c >= visibleCols.length)
-                break;
-            const item = items[r];
-            const col = visibleCols[c];
-            const raw = getCellValue(item, col);
-            const clipboard = col.clipboardFormatter ? col.clipboardFormatter(raw, item) : null;
-            const formatted = clipboard ?? (col.valueFormatter ? col.valueFormatter(raw, item) : raw);
-            cells.push(formatCellValueForTsv(raw, formatted));
-        }
-        rows.push(cells.join('\t'));
-    }
-    return rows.join('\r\n');
-}
-/**
- * Parse a TSV clipboard string into a 2D array of cell strings.
- * Handles both \\r\\n and \\n line endings. Ignores trailing empty lines.
- *
- * @param text  Raw clipboard text (TSV format).
- * @returns 2D array: rows of cells. Empty if text is blank.
- */
-export function parseTsvClipboard(text) {
-    if (!text.trim())
-        return [];
-    const lines = text.split(/\r?\n/).filter((l) => l.length > 0);
-    return lines.map((line) => line.split('\t'));
-}
-/**
- * Apply parsed clipboard rows to the grid starting at anchor position.
- * For each cell in the parsed rows, validates editability, parses the value,
- * and produces a cell value changed event.
- *
- * @param parsedRows   2D array of string values (from parseTsvClipboard).
- * @param anchorRow    Target starting row index.
- * @param anchorCol    Target starting column index (data column, not absolute).
- * @param items        Array of all row data objects.
- * @param visibleCols  Visible column definitions.
- * @returns Array of cell value changed events to apply.
- */
-export function applyPastedValues(parsedRows, anchorRow, anchorCol, items, visibleCols) {
-    const events = [];
-    for (let r = 0; r < parsedRows.length; r++) {
-        const cells = parsedRows[r];
-        for (let c = 0; c < cells.length; c++) {
-            const targetRow = anchorRow + r;
-            const targetCol = anchorCol + c;
-            if (targetRow >= items.length || targetCol >= visibleCols.length)
-                continue;
-            const item = items[targetRow];
-            const col = visibleCols[targetCol];
-            const colEditable = col.editable === true ||
-                (typeof col.editable === 'function' && col.editable(item));
-            if (!colEditable)
-                continue;
-            const rawValue = cells[c] ?? '';
-            const oldValue = getCellValue(item, col);
-            const result = parseValue(rawValue, oldValue, item, col);
-            if (!result.valid)
-                continue;
-            events.push({
-                item,
-                columnId: col.columnId,
-                oldValue,
-                newValue: result.value,
-                rowIndex: targetRow,
-            });
-        }
-    }
-    return events;
-}
-/**
- * Clear cells in a cut range by setting each editable cell to an empty-string-parsed value.
- * Used after pasting cut content to clear the original cells.
- *
- * @param cutRange     The normalized range of cells to clear.
- * @param items        Array of all row data objects.
- * @param visibleCols  Visible column definitions.
- * @returns Array of cell value changed events to apply.
- */
-export function applyCutClear(cutRange, items, visibleCols) {
-    const events = [];
-    for (let r = cutRange.startRow; r <= cutRange.endRow; r++) {
-        for (let c = cutRange.startCol; c <= cutRange.endCol; c++) {
-            if (r >= items.length || c >= visibleCols.length)
-                continue;
-            const item = items[r];
-            const col = visibleCols[c];
-            const colEditable = col.editable === true ||
-                (typeof col.editable === 'function' && col.editable(item));
-            if (!colEditable)
-                continue;
-            const oldValue = getCellValue(item, col);
-            const result = parseValue('', oldValue, item, col);
-            if (!result.valid)
-                continue;
-            events.push({
-                item,
-                columnId: col.columnId,
-                oldValue,
-                newValue: result.value,
-                rowIndex: r,
-            });
-        }
-    }
-    return events;
-}

package/dist/esm/utils/columnAutosize.js

@@ -1,38 +0,0 @@
-/**
- * Column autosize DOM measurement utilities shared across all frameworks.
- */
-import { DEFAULT_MIN_COLUMN_WIDTH } from '../constants/layout';
-/** Extra pixels added to header label width to account for filter icon + padding. */
-export const AUTOSIZE_EXTRA_PX = 28;
-/** Maximum column width from autosize. */
-export const AUTOSIZE_MAX_PX = 520;
-/**
- * Measure the ideal width for a column by scanning all DOM cells with
- * `[data-column-id="<columnId>"]` and computing the maximum scrollWidth.
- *
- * Header cells with a `[data-header-label]` child get extra padding for icons.
- *
- * @param columnId - Column to measure
- * @param minWidth - Minimum width (defaults to DEFAULT_MIN_COLUMN_WIDTH)
- * @param container - Optional container element to scope the query (defaults to `document`)
- * @returns The ideal column width in pixels, clamped between minWidth and AUTOSIZE_MAX_PX
- */
-export function measureColumnContentWidth(columnId, minWidth, container) {
-    const minW = minWidth ?? DEFAULT_MIN_COLUMN_WIDTH;
-    const root = container ?? document;
-    const cells = root.querySelectorAll(`[data-column-id="${columnId}"]`);
-    if (cells.length === 0)
-        return minW;
-    let maxWidth = minW;
-    cells.forEach((cell) => {
-        const el = cell;
-        const label = el.querySelector?.('[data-header-label]');
-        if (label) {
-            maxWidth = Math.max(maxWidth, label.scrollWidth + AUTOSIZE_EXTRA_PX);
-        }
-        else {
-            maxWidth = Math.max(maxWidth, el.scrollWidth);
-        }
-    });
-    return Math.min(AUTOSIZE_MAX_PX, Math.max(minW, Math.ceil(maxWidth)));
-}

package/dist/esm/utils/columnReorder.js

@@ -1,99 +0,0 @@
-/**
- * Determine which pin zone a column belongs to.
- */
-export function getPinStateForColumn(columnId, pinnedColumns) {
-    if (!pinnedColumns)
-        return 'unpinned';
-    if (pinnedColumns.left?.includes(columnId))
-        return 'left';
-    if (pinnedColumns.right?.includes(columnId))
-        return 'right';
-    return 'unpinned';
-}
-/**
- * Remove `columnId` from `order` and insert it at `targetIndex`.
- * Returns a new array (does not mutate the input).
- */
-export function reorderColumnArray(order, columnId, targetIndex) {
-    const filtered = order.filter(id => id !== columnId);
-    const clampedIndex = Math.max(0, Math.min(targetIndex, filtered.length));
-    const result = [...filtered];
-    result.splice(clampedIndex, 0, columnId);
-    return result;
-}
-/**
- * Calculate the drop target for a dragged column based on mouse position.
- *
- * Iterates visible column header elements (queried via `[data-column-id]`),
- * finds the midpoint of each header cell, and determines insertion side.
- * Respects pinning zones: a left-pinned column can only drop among left-pinned, etc.
- *
- * @param params - Options object containing mouseX, columnOrder, draggedColumnId,
- *   draggedPinState, tableElement, and optional pinnedColumns.
- * @returns Drop target with insertion index and indicator X, or null if no valid target.
- */
-export function calculateDropTarget(params) {
-    const { mouseX, columnOrder, draggedColumnId, draggedPinState, tableElement, pinnedColumns } = params;
-    const headerCells = tableElement.querySelectorAll('[data-column-id]');
-    if (headerCells.length === 0)
-        return null;
-    // Build ordered list of header rects for columns in the same pin zone
-    const targets = [];
-    headerCells.forEach(cell => {
-        const colId = cell.getAttribute('data-column-id');
-        if (!colId)
-            return;
-        const pinState = getPinStateForColumn(colId, pinnedColumns);
-        if (pinState !== draggedPinState)
-            return;
-        const rect = cell.getBoundingClientRect();
-        const orderIndex = columnOrder.indexOf(colId);
-        if (orderIndex === -1)
-            return;
-        targets.push({
-            columnId: colId,
-            left: rect.left,
-            right: rect.right,
-            midX: rect.left + rect.width / 2,
-            orderIndex,
-        });
-    });
-    if (targets.length === 0)
-        return null;
-    // Sort by visual position (left edge)
-    targets.sort((a, b) => a.left - b.left);
-    // Find where mouse falls relative to column midpoints
-    let targetIndex;
-    let indicatorX;
-    if (mouseX <= targets[0].midX) {
-        // Before the first target
-        targetIndex = targets[0].orderIndex;
-        indicatorX = targets[0].left;
-    }
-    else if (mouseX >= targets[targets.length - 1].midX) {
-        // After the last target
-        const last = targets[targets.length - 1];
-        targetIndex = last.orderIndex + 1;
-        indicatorX = last.right;
-    }
-    else {
-        // Between two targets — find the boundary
-        let matchIndex = -1;
-        for (let i = 0; i < targets.length - 1; i++) {
-            if (mouseX >= targets[i].midX && mouseX < targets[i + 1].midX) {
-                matchIndex = i;
-                break;
-            }
-        }
-        if (matchIndex === -1)
-            return null;
-        targetIndex = targets[matchIndex].orderIndex + 1;
-        indicatorX = targets[matchIndex].right;
-    }
-    // Check if this is a no-op (dropping at same position)
-    const currentIndex = columnOrder.indexOf(draggedColumnId);
-    if (currentIndex === targetIndex || currentIndex + 1 === targetIndex) {
-        return { targetIndex, indicatorX: null };
-    }
-    return { targetIndex, indicatorX };
-}