@alaarab/ogrid-core 2.1.2 → 2.1.4

package/dist/esm/utils/columnUtils.js

@@ -1,122 +0,0 @@
-function isColumnGroupDef(c) {
-    return 'children' in c && Array.isArray(c.children);
-}
-/**
- * Flattens a tree of column groups and column definitions into a single array of leaf columns.
- * Used for body rendering and when the grid accepts grouped columns.
- */
-export function flattenColumns(columns) {
-    const result = [];
-    for (const c of columns) {
-        if (isColumnGroupDef(c)) {
-            result.push(...flattenColumns(c.children));
-        }
-        else {
-            result.push(c);
-        }
-    }
-    return result;
-}
-/**
- * Builds an array of header rows from a column tree for multi-row <thead> rendering.
- *
- * - Flat columns (no groups) produce a single row of leaf cells.
- * - Grouped columns produce N rows where N = max nesting depth + 1.
- * - Group cells get colSpan = number of visible leaf descendants.
- * - Leaf cells at a depth shallower than maxDepth are placed at their own depth
- *   (the rendering layer can use rowSpan to stretch them down to the bottom row).
- * - If visibleColumns is provided, only visible leaf columns and their ancestors are included.
- *
- * @param columns - The column tree (mix of IColumnDef and IColumnGroupDef)
- * @param visibleColumns - Optional set of visible column ids (filters out hidden leaves + empty groups)
- * @returns Array of HeaderRow, from top (group headers) to bottom (leaf columns)
- */
-export function buildHeaderRows(columns, visibleColumns) {
-    // Step 1: Compute max depth of the column tree
-    function getMaxDepth(cols, depth) {
-        let max = depth;
-        for (const c of cols) {
-            if (isColumnGroupDef(c)) {
-                max = Math.max(max, getMaxDepth(c.children, depth + 1));
-            }
-        }
-        return max;
-    }
-    const maxDepth = getMaxDepth(columns, 0);
-    // If no groups at all, return a single row of leaf cells
-    if (maxDepth === 0) {
-        const row = [];
-        for (const c of columns) {
-            if (!isColumnGroupDef(c)) {
-                if (visibleColumns && !visibleColumns.has(c.columnId))
-                    continue;
-                row.push({
-                    label: c.name,
-                    colSpan: 1,
-                    isGroup: false,
-                    columnDef: c,
-                    depth: 0,
-                });
-            }
-        }
-        return [row];
-    }
-    // Step 2: Build rows for depth 0..maxDepth
-    // Total rows = maxDepth + 1 (groups use rows 0..maxDepth-1, leaves use row maxDepth)
-    const totalRows = maxDepth + 1;
-    const rows = Array.from({ length: totalRows }, () => []);
-    // Step 3: Walk the tree and place cells
-    // Cache leaf counts by children array ref to avoid O(n²) repeated traversals
-    const leafCountCache = new Map();
-    function countVisibleLeaves(cols) {
-        const cached = leafCountCache.get(cols);
-        if (cached !== undefined)
-            return cached;
-        let count = 0;
-        for (const c of cols) {
-            if (isColumnGroupDef(c)) {
-                count += countVisibleLeaves(c.children);
-            }
-            else {
-                if (!visibleColumns || visibleColumns.has(c.columnId)) {
-                    count++;
-                }
-            }
-        }
-        leafCountCache.set(cols, count);
-        return count;
-    }
-    function walk(cols, depth) {
-        for (const c of cols) {
-            if (isColumnGroupDef(c)) {
-                const leafCount = countVisibleLeaves(c.children);
-                if (leafCount === 0)
-                    continue; // Skip empty groups
-                rows[depth].push({
-                    label: c.headerName,
-                    colSpan: leafCount,
-                    isGroup: true,
-                    depth,
-                });
-                walk(c.children, depth + 1);
-            }
-            else {
-                if (visibleColumns && !visibleColumns.has(c.columnId))
-                    continue;
-                // Leaf column: place it at the current depth.
-                // If depth < maxDepth, the rendering layer should use rowSpan to stretch
-                // this cell down to the bottom row.
-                rows[depth].push({
-                    label: c.name,
-                    colSpan: 1,
-                    isGroup: false,
-                    columnDef: c,
-                    depth,
-                });
-            }
-        }
-    }
-    walk(columns, 0);
-    // Remove any completely empty rows (can happen with certain structures)
-    return rows.filter(row => row.length > 0);
-}

package/dist/esm/utils/dataGridStatusBar.js

@@ -1,15 +0,0 @@
-/**
- * Derives status bar config for DataGridTable from props + current items/selection.
- * Use in Fluent, Material, and Radix DataGridTable so the same logic lives in one place.
- */
-export function getDataGridStatusBarConfig(statusBar, itemsLength, selectedCount, filteredCount) {
-    if (!statusBar)
-        return null;
-    if (typeof statusBar === 'object')
-        return statusBar;
-    return {
-        totalCount: itemsLength,
-        selectedCount: selectedCount > 0 ? selectedCount : undefined,
-        filteredCount: filteredCount !== undefined && filteredCount !== itemsLength ? filteredCount : undefined,
-    };
-}

package/dist/esm/utils/dataGridViewModel.js

@@ -1,206 +0,0 @@
-/**
- * View model helpers for DataGridTable.
- * Pure TypeScript — no framework dependencies (React, Angular, Vue).
- * Framework packages re-export these and may add thin framework-specific wrappers.
- */
-import { getCellValue } from './cellValue';
-import { isInSelectionRange } from '../types/dataGridTypes';
-import { isFilterConfig } from './ogridHelpers';
-/**
- * Returns ColumnHeaderFilter props from column def and grid filter/sort state.
- */
-export function getHeaderFilterConfig(col, input) {
-    const filterable = isFilterConfig(col.filterable) ? col.filterable : null;
-    const filterType = (filterable?.type ?? 'none');
-    const filterField = filterable?.filterField ?? col.columnId;
-    const sortable = col.sortable !== false;
-    const filterValue = input.filters[filterField];
-    const base = {
-        columnKey: col.columnId,
-        columnName: col.name,
-        filterType,
-        isSorted: input.sortBy === col.columnId,
-        isSortedDescending: input.sortBy === col.columnId && input.sortDirection === 'desc',
-        onSort: sortable ? () => input.onColumnSort(col.columnId) : undefined,
-    };
-    if (filterType === 'text') {
-        return {
-            ...base,
-            textValue: filterValue?.type === 'text' ? filterValue.value : '',
-            onTextChange: (v) => input.onFilterChange(filterField, v.trim() ? { type: 'text', value: v } : undefined),
-        };
-    }
-    if (filterType === 'people') {
-        return {
-            ...base,
-            selectedUser: filterValue?.type === 'people' ? filterValue.value : undefined,
-            onUserChange: (u) => input.onFilterChange(filterField, u ? { type: 'people', value: u } : undefined),
-            peopleSearch: input.peopleSearch,
-        };
-    }
-    if (filterType === 'multiSelect') {
-        return {
-            ...base,
-            options: input.filterOptions[filterField] ?? [],
-            isLoadingOptions: input.loadingFilterOptions[filterField] ?? false,
-            selectedValues: filterValue?.type === 'multiSelect' ? filterValue.value : [],
-            onFilterChange: (values) => input.onFilterChange(filterField, values.length ? { type: 'multiSelect', value: values } : undefined),
-        };
-    }
-    if (filterType === 'date') {
-        return {
-            ...base,
-            dateValue: filterValue?.type === 'date' ? filterValue.value : undefined,
-            onDateChange: (v) => input.onFilterChange(filterField, v ? { type: 'date', value: v } : undefined),
-        };
-    }
-    return base;
-}
-/**
- * Returns a descriptor for rendering a cell. UI uses this to decide editing-inline vs editing-popover vs display
- * and to apply isActive, isInRange, etc. without duplicating the boolean logic.
- */
-export function getCellRenderDescriptor(item, col, rowIndex, colIdx, input) {
-    const rowId = input.getRowId(item);
-    const globalColIndex = colIdx + input.colOffset;
-    const colEditable = col.editable === true ||
-        (typeof col.editable === 'function' && col.editable(item));
-    const canEditInline = input.editable !== false &&
-        !!colEditable &&
-        !!input.onCellValueChanged &&
-        typeof col.cellEditor !== 'function';
-    const canEditPopup = input.editable !== false &&
-        !!colEditable &&
-        !!input.onCellValueChanged &&
-        typeof col.cellEditor === 'function' &&
-        col.cellEditorPopup !== false;
-    const canEditAny = canEditInline || canEditPopup;
-    const isEditing = input.editingCell?.rowId === rowId &&
-        input.editingCell?.columnId === col.columnId;
-    const isActive = !input.isDragging &&
-        input.activeCell?.rowIndex === rowIndex &&
-        input.activeCell?.columnIndex === globalColIndex;
-    const isInRange = input.selectionRange != null &&
-        isInSelectionRange(input.selectionRange, rowIndex, colIdx);
-    const isInCutRange = input.cutRange != null &&
-        isInSelectionRange(input.cutRange, rowIndex, colIdx);
-    const isInCopyRange = input.copyRange != null &&
-        isInSelectionRange(input.copyRange, rowIndex, colIdx);
-    const isSelectionEndCell = !input.isDragging &&
-        input.copyRange == null &&
-        input.cutRange == null &&
-        input.selectionRange != null &&
-        rowIndex === input.selectionRange.endRow &&
-        colIdx === input.selectionRange.endCol;
-    const isPinned = col.pinned != null;
-    const pinnedSide = col.pinned ?? undefined;
-    // Compute cell value once — used in editing and display branches
-    const cellValue = getCellValue(item, col);
-    let mode = 'display';
-    let editorType;
-    if (isEditing && canEditInline) {
-        mode = 'editing-inline';
-        if (col.cellEditor === 'text' ||
-            col.cellEditor === 'select' ||
-            col.cellEditor === 'checkbox' ||
-            col.cellEditor === 'richSelect' ||
-            col.cellEditor === 'date') {
-            editorType = col.cellEditor;
-        }
-        else if (col.type === 'date') {
-            editorType = 'date';
-        }
-        else if (col.type === 'boolean') {
-            editorType = 'checkbox';
-        }
-        else {
-            editorType = 'text';
-        }
-    }
-    else if (isEditing && canEditPopup && typeof col.cellEditor === 'function') {
-        mode = 'editing-popover';
-    }
-    return {
-        mode,
-        editorType,
-        value: cellValue,
-        isActive,
-        isInRange,
-        isInCutRange,
-        isInCopyRange,
-        isSelectionEndCell,
-        canEditAny,
-        isPinned,
-        pinnedSide,
-        globalColIndex,
-        rowId,
-        rowIndex,
-        displayValue: cellValue,
-    };
-}
-/**
- * Resolves display content for a cell in display mode.
- * Handles the renderCell -> valueFormatter -> String() fallback chain.
- * Returns `unknown` — framework packages may narrow to their own node type.
- */
-export function resolveCellDisplayContent(col, item, displayValue) {
-    const c = col;
-    if (c.renderCell && typeof c.renderCell === 'function') {
-        return c.renderCell(item);
-    }
-    if (col.valueFormatter)
-        return col.valueFormatter(displayValue, item);
-    if (displayValue == null)
-        return null;
-    if (col.type === 'date') {
-        const d = new Date(String(displayValue));
-        if (!Number.isNaN(d.getTime()))
-            return d.toLocaleDateString();
-    }
-    if (col.type === 'boolean') {
-        return displayValue ? 'True' : 'False';
-    }
-    return String(displayValue);
-}
-/**
- * Resolves the cellStyle from a column def, handling both function and static values.
- */
-export function resolveCellStyle(col, item) {
-    const c = col;
-    if (!c.cellStyle)
-        return undefined;
-    return typeof c.cellStyle === 'function' ? c.cellStyle(item) : c.cellStyle;
-}
-/**
- * Builds props for InlineCellEditor. Shared across all UI packages.
- */
-export function buildInlineEditorProps(item, col, descriptor, callbacks) {
-    return {
-        value: descriptor.value,
-        item,
-        column: col,
-        rowIndex: descriptor.rowIndex,
-        editorType: (descriptor.editorType ?? 'text'),
-        onCommit: (newValue) => callbacks.commitCellEdit(item, col.columnId, descriptor.value, newValue, descriptor.rowIndex, descriptor.globalColIndex),
-        onCancel: () => callbacks.setEditingCell(null),
-    };
-}
-/**
- * Builds ICellEditorProps for custom popover editors. Shared across all UI packages.
- */
-export function buildPopoverEditorProps(item, col, descriptor, pendingEditorValue, callbacks) {
-    const oldValue = descriptor.value;
-    const displayValue = pendingEditorValue !== undefined ? pendingEditorValue : oldValue;
-    return {
-        value: displayValue,
-        onValueChange: callbacks.setPendingEditorValue,
-        onCommit: () => {
-            const newValue = pendingEditorValue !== undefined ? pendingEditorValue : oldValue;
-            callbacks.commitCellEdit(item, col.columnId, oldValue, newValue, descriptor.rowIndex, descriptor.globalColIndex);
-        },
-        onCancel: callbacks.cancelPopoverEdit,
-        item,
-        column: col,
-        cellEditorParams: col.cellEditorParams,
-    };
-}

package/dist/esm/utils/debounce.js

@@ -1,40 +0,0 @@
-/**
- * Debounces a function call, delaying execution until after `delayMs` milliseconds
- * have elapsed since the last invocation.
- *
- * @param fn - The function to debounce
- * @param delayMs - Delay in milliseconds
- * @returns Debounced function with a `cancel` method
- *
- * @example
- * ```typescript
- * const search = debounce((query: string) => {
- *   console.log('Searching:', query);
- * }, 300);
- *
- * search('a');
- * search('ab');
- * search('abc'); // Only this will execute after 300ms
- *
- * search.cancel(); // Cancel pending execution
- * ```
- */
-export function debounce(fn, delayMs) {
-    let timeoutId = null;
-    const debounced = ((...args) => {
-        if (timeoutId !== null) {
-            clearTimeout(timeoutId);
-        }
-        timeoutId = setTimeout(() => {
-            fn(...args);
-            timeoutId = null;
-        }, delayMs);
-    });
-    debounced.cancel = () => {
-        if (timeoutId !== null) {
-            clearTimeout(timeoutId);
-            timeoutId = null;
-        }
-    };
-    return debounced;
-}

package/dist/esm/utils/dom.js

@@ -1,53 +0,0 @@
-/**
- * DOM utility functions for OGrid components.
- * These utilities are framework-agnostic and can be used across React, Angular, Vue, and vanilla JS implementations.
- */
-/**
- * Measure the bounding rect of a cell range within a container.
- *
- * @param container - The grid container element with position: relative
- * @param range - The selection range to measure
- * @param colOffset - Column offset (1 when checkbox column is present, else 0)
- * @returns Rectangle describing the range position and size, or null if cells not found
- */
-export function measureRange(container, range, colOffset) {
-    const startGlobalCol = range.startCol + colOffset;
-    const endGlobalCol = range.endCol + colOffset;
-    const topLeft = container.querySelector(`[data-row-index="${range.startRow}"][data-col-index="${startGlobalCol}"]`);
-    const bottomRight = container.querySelector(`[data-row-index="${range.endRow}"][data-col-index="${endGlobalCol}"]`);
-    if (!topLeft || !bottomRight)
-        return null;
-    const cRect = container.getBoundingClientRect();
-    const tlRect = topLeft.getBoundingClientRect();
-    const brRect = bottomRight.getBoundingClientRect();
-    return {
-        top: tlRect.top - cRect.top,
-        left: tlRect.left - cRect.left,
-        width: brRect.right - tlRect.left,
-        height: brRect.bottom - tlRect.top,
-    };
-}
-/**
- * Inject a global CSS rule into the document head (once per page, deduplicated by ID).
- *
- * @param id - Unique ID for the style element (prevents duplicates)
- * @param css - CSS content to inject
- *
- * @example
- * ```ts
- * injectGlobalStyles(
- *   'ogrid-marching-ants-keyframes',
- *   '@keyframes ogrid-marching-ants{to{stroke-dashoffset:-8}}'
- * );
- * ```
- */
-export function injectGlobalStyles(id, css) {
-    if (typeof document === 'undefined')
-        return;
-    if (document.getElementById(id))
-        return;
-    const style = document.createElement('style');
-    style.id = id;
-    style.textContent = css;
-    document.head.appendChild(style);
-}

package/dist/esm/utils/exportToCsv.js

@@ -1,50 +0,0 @@
-export function escapeCsvValue(value) {
-    if (value === null || value === undefined) {
-        return '';
-    }
-    const s = String(value);
-    if (s.includes(',') || s.includes('"') || s.includes('\n')) {
-        return `"${s.replace(/"/g, '""')}"`;
-    }
-    return s;
-}
-export function buildCsvHeader(columns) {
-    return columns.map((c) => escapeCsvValue(c.name)).join(',');
-}
-export function buildCsvRows(items, columns, getValue) {
-    return items.map((item) => columns.map((c) => escapeCsvValue(getValue(item, c.columnId))).join(','));
-}
-export function exportToCsv(items, columns, getValue, filename) {
-    const header = buildCsvHeader(columns);
-    const rows = buildCsvRows(items, columns, getValue);
-    const csv = [header, ...rows].join('\n');
-    triggerCsvDownload(csv, filename ?? `export_${new Date().toISOString().slice(0, 10)}.csv`);
-}
-/**
- * Triggers a browser CSV file download.
- *
- * NOTE: This function uses DOM APIs (document.createElement, document.body) and therefore
- * requires a browser environment. It is intentionally kept in the core package because all
- * framework packages (React, Angular, Vue, JS) need CSV export, and duplicating it would be
- * worse than the DOM dependency. In server-side rendering (SSR) contexts, call exportToCsv
- * only from browser-side code (e.g. event handlers), not during server rendering.
- */
-export function triggerCsvDownload(csvContent, filename) {
-    const blob = new Blob([csvContent], { type: 'text/csv;charset=utf-8;' });
-    const url = URL.createObjectURL(blob);
-    const link = document.createElement('a');
-    try {
-        link.setAttribute('href', url);
-        link.setAttribute('download', filename);
-        link.style.visibility = 'hidden';
-        document.body.appendChild(link);
-        link.click();
-    }
-    finally {
-        try {
-            document.body.removeChild(link);
-        }
-        catch { /* noop */ }
-        URL.revokeObjectURL(url);
-    }
-}

package/dist/esm/utils/fillHelpers.js

@@ -1,47 +0,0 @@
-import { getCellValue } from './cellValue';
-import { parseValue } from './valueParsers';
-/**
- * Apply fill values from a source cell across a normalized selection range.
- * Copies the value from the start cell of the range to every other editable cell.
- *
- * @param range           The normalized fill range (startRow/startCol is the source).
- * @param sourceRow       The original source row index (skipped during fill).
- * @param sourceCol       The original source col index (skipped during fill).
- * @param items           Array of all row data objects.
- * @param visibleCols     Visible column definitions.
- * @returns Array of cell value changed events to apply. Empty if source cell is out of bounds.
- */
-export function applyFillValues(range, sourceRow, sourceCol, items, visibleCols) {
-    const events = [];
-    const startItem = items[range.startRow];
-    const startColDef = visibleCols[range.startCol];
-    if (!startItem || !startColDef)
-        return events;
-    const startValue = getCellValue(startItem, startColDef);
-    for (let row = range.startRow; row <= range.endRow; row++) {
-        for (let col = range.startCol; col <= range.endCol; col++) {
-            if (row === sourceRow && col === sourceCol)
-                continue;
-            if (row >= items.length || col >= visibleCols.length)
-                continue;
-            const item = items[row];
-            const colDef = visibleCols[col];
-            const colEditable = colDef.editable === true ||
-                (typeof colDef.editable === 'function' && colDef.editable(item));
-            if (!colEditable)
-                continue;
-            const oldValue = getCellValue(item, colDef);
-            const result = parseValue(startValue, oldValue, item, colDef);
-            if (!result.valid)
-                continue;
-            events.push({
-                item,
-                columnId: colDef.columnId,
-                oldValue,
-                newValue: result.value,
-                rowIndex: row,
-            });
-        }
-    }
-    return events;
-}

package/dist/esm/utils/gridContextMenuHelpers.js

@@ -1,80 +0,0 @@
-export const GRID_CONTEXT_MENU_ITEMS = [
-    { id: 'undo', label: 'Undo', shortcut: 'Ctrl+Z' },
-    { id: 'redo', label: 'Redo', shortcut: 'Ctrl+Y' },
-    { id: 'copy', label: 'Copy', shortcut: 'Ctrl+C', disabledWhenNoSelection: true, dividerBefore: true },
-    { id: 'cut', label: 'Cut', shortcut: 'Ctrl+X', disabledWhenNoSelection: true },
-    { id: 'paste', label: 'Paste', shortcut: 'Ctrl+V' },
-    { id: 'selectAll', label: 'Select all', shortcut: 'Ctrl+A', dividerBefore: true },
-];
-/** Returns the shortcut string with Ctrl swapped to ⌘ on Mac. */
-export function formatShortcut(shortcut) {
-    const isMac = typeof navigator !== 'undefined' && /Mac|iPhone|iPad|iPod/.test(navigator.userAgent);
-    return isMac ? shortcut.replace('Ctrl', '\u2318') : shortcut;
-}
-/**
- * Returns a map of menu item id -> click handler. Each handler invokes the corresponding
- * action and then onClose. Used by Fluent, Material, and Radix GridContextMenu components.
- */
-export function getContextMenuHandlers(props) {
-    const { onCopy, onCut, onPaste, onSelectAll, onUndo, onRedo, onClose } = props;
-    return {
-        undo: () => {
-            onUndo();
-            onClose();
-        },
-        redo: () => {
-            onRedo();
-            onClose();
-        },
-        copy: () => {
-            onCopy();
-            onClose();
-        },
-        cut: () => {
-            onCut();
-            onClose();
-        },
-        paste: () => {
-            onPaste();
-            onClose();
-        },
-        selectAll: () => {
-            onSelectAll();
-            onClose();
-        },
-    };
-}
-/** Column header menu items for pin/unpin actions. */
-export const COLUMN_HEADER_MENU_ITEMS = [
-    { id: 'pinLeft', label: 'Pin left' },
-    { id: 'pinRight', label: 'Pin right' },
-    { id: 'unpin', label: 'Unpin' },
-];
-/**
- * Builds the complete column header menu items based on current state.
- * Returns pinning, sorting, and sizing options.
- */
-export function getColumnHeaderMenuItems(input) {
-    const { canPinLeft, canPinRight, canUnpin, currentSort, isSortable = true, isResizable = true } = input;
-    const items = [];
-    // Pinning section
-    items.push({ id: 'pinLeft', label: 'Pin left', disabled: !canPinLeft }, { id: 'pinRight', label: 'Pin right', disabled: !canPinRight }, { id: 'unpin', label: 'Unpin', disabled: !canUnpin, divider: isSortable || isResizable });
-    // Sorting section
-    if (isSortable) {
-        if (!currentSort) {
-            // No sort applied - show both options
-            items.push({ id: 'sortAsc', label: 'Sort ascending' }, { id: 'sortDesc', label: 'Sort descending', divider: isResizable });
-        }
-        else {
-            // Sort applied - show opposite + clear
-            const oppositeSort = currentSort === 'asc' ? 'desc' : 'asc';
-            const oppositeLabel = currentSort === 'asc' ? 'Sort descending' : 'Sort ascending';
-            items.push({ id: `sort${oppositeSort === 'asc' ? 'Asc' : 'Desc'}`, label: oppositeLabel }, { id: 'clearSort', label: 'Clear sort', divider: isResizable });
-        }
-    }
-    // Autosize section
-    if (isResizable) {
-        items.push({ id: 'autosizeThis', label: 'Autosize this column' }, { id: 'autosizeAll', label: 'Autosize all columns' });
-    }
-    return items;
-}