@alaarab/ogrid-core 2.0.9 → 2.0.12

package/dist/esm/utils/columnAutosize.js

@@ -0,0 +1,38 @@
+/**
+ * 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 sort/filter icons + padding. */
+export const AUTOSIZE_EXTRA_PX = 44;
+/** 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/dataGridViewModel.js

@@ -76,7 +76,8 @@ export function getCellRenderDescriptor(item, col, rowIndex, colIdx, input) {
     const canEditAny = canEditInline || canEditPopup;
     const isEditing = input.editingCell?.rowId === rowId &&
         input.editingCell?.columnId === col.columnId;
-    const isActive = input.activeCell?.rowIndex === rowIndex &&
+    const isActive = !input.isDragging &&
+        input.activeCell?.rowIndex === rowIndex &&
         input.activeCell?.columnIndex === globalColIndex;
     const isInRange = input.selectionRange != null &&
         isInSelectionRange(input.selectionRange, rowIndex, colIdx);

package/dist/esm/utils/dom.js

@@ -0,0 +1,53 @@
+/**
+ * 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/gridContextMenuHelpers.js

@@ -50,3 +50,31 @@ export const COLUMN_HEADER_MENU_ITEMS = [
     { 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;
+}

package/dist/esm/utils/index.js

@@ -5,7 +5,7 @@ export { getFilterField, mergeFilter, deriveFilterOptionsFromData, getMultiSelec
 export { getStatusBarParts } from './statusBarHelpers';
 export { getDataGridStatusBarConfig } from './dataGridStatusBar';
 export { getPaginationViewModel, PAGE_SIZE_OPTIONS, MAX_PAGE_BUTTONS, } from './paginationHelpers';
-export { GRID_CONTEXT_MENU_ITEMS, COLUMN_HEADER_MENU_ITEMS, getContextMenuHandlers, formatShortcut } from './gridContextMenuHelpers';
+export { GRID_CONTEXT_MENU_ITEMS, COLUMN_HEADER_MENU_ITEMS, getContextMenuHandlers, getColumnHeaderMenuItems, formatShortcut } from './gridContextMenuHelpers';
 export { parseValue, numberParser, currencyParser, dateParser, emailParser, booleanParser, } from './valueParsers';
 export { computeAggregations } from './aggregationUtils';
 export { processClientSideData } from './clientSideData';
@@ -14,3 +14,6 @@ export { getPinStateForColumn, reorderColumnArray, calculateDropTarget, } from '
 export { computeVisibleRange, computeTotalHeight, getScrollTopForRow, } from './virtualScroll';
 export { getHeaderFilterConfig, getCellRenderDescriptor, resolveCellDisplayContent, resolveCellStyle, buildInlineEditorProps, buildPopoverEditorProps, } from './dataGridViewModel';
 export { debounce } from './debounce';
+export { measureRange, injectGlobalStyles } from './dom';
+export { computeNextSortState } from './sortHelpers';
+export { measureColumnContentWidth, AUTOSIZE_EXTRA_PX, AUTOSIZE_MAX_PX } from './columnAutosize';

package/dist/esm/utils/sortHelpers.js

@@ -0,0 +1,28 @@
+/**
+ * Sort state computation helpers shared across all frameworks.
+ */
+/**
+ * Compute the next sort state given the current state and a sort request.
+ *
+ * @param current - Current sort state
+ * @param columnKey - Column being sorted
+ * @param direction - Explicit direction, `null` to clear, or `undefined` to toggle
+ * @returns New sort state
+ */
+export function computeNextSortState(current, columnKey, direction) {
+    if (direction === null) {
+        // Clear sort
+        return { field: '', direction: 'asc' };
+    }
+    else if (direction) {
+        // Explicit direction (from column menu)
+        return { field: columnKey, direction };
+    }
+    else {
+        // Toggle (existing behavior for header click)
+        return {
+            field: columnKey,
+            direction: current.field === columnKey && current.direction === 'asc' ? 'desc' : 'asc',
+        };
+    }
+}

package/dist/types/utils/columnAutosize.d.ts

@@ -0,0 +1,21 @@
+/**
+ * Column autosize DOM measurement utilities shared across all frameworks.
+ */
+/** Extra pixels added to header label width to account for sort/filter icons + padding. */
+export declare const AUTOSIZE_EXTRA_PX = 44;
+/** Maximum column width from autosize. */
+export declare 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 declare function measureColumnContentWidth(columnId: string, minWidth?: number, container?: {
+    querySelectorAll: (selector: string) => NodeListOf<Element>;
+}): number;

package/dist/types/utils/dataGridViewModel.d.ts

@@ -9,7 +9,7 @@ import type { RowId, UserLike, IFilters, FilterValue } from '../types/dataGridTy
 export interface HeaderFilterConfigInput {
     sortBy?: string;
     sortDirection: 'asc' | 'desc';
-    onColumnSort: (columnKey: string) => void;
+    onColumnSort: (columnKey: string, direction?: 'asc' | 'desc' | null) => void;
     filters: IFilters;
     onFilterChange: (key: string, value: FilterValue | undefined) => void;
     filterOptions: Record<string, string[]>;

package/dist/types/utils/dom.d.ts

@@ -0,0 +1,38 @@
+/**
+ * DOM utility functions for OGrid components.
+ * These utilities are framework-agnostic and can be used across React, Angular, Vue, and vanilla JS implementations.
+ */
+import type { ISelectionRange } from '../types';
+/**
+ * Rectangle describing position and dimensions of a DOM element.
+ */
+export interface OverlayRect {
+    top: number;
+    left: number;
+    width: number;
+    height: number;
+}
+/**
+ * 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 declare function measureRange(container: HTMLElement, range: ISelectionRange, colOffset: number): OverlayRect | null;
+/**
+ * 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 declare function injectGlobalStyles(id: string, css: string): void;

package/dist/types/utils/gridContextMenuHelpers.d.ts

@@ -34,6 +34,34 @@ export interface IColumnHeaderMenuItem {
     id: string;
     label: string;
     icon?: string;
+    disabled?: boolean;
+    divider?: boolean;
 }
 /** Column header menu items for pin/unpin actions. */
 export declare const COLUMN_HEADER_MENU_ITEMS: IColumnHeaderMenuItem[];
+/** Input for building column header menu items. */
+export interface ColumnHeaderMenuInput {
+    canPinLeft: boolean;
+    canPinRight: boolean;
+    canUnpin: boolean;
+    currentSort?: 'asc' | 'desc' | null;
+    isSortable?: boolean;
+    isResizable?: boolean;
+}
+/**
+ * Builds the complete column header menu items based on current state.
+ * Returns pinning, sorting, and sizing options.
+ */
+export declare function getColumnHeaderMenuItems(input: ColumnHeaderMenuInput): IColumnHeaderMenuItem[];
+/** Handlers for column header menu actions. */
+export interface ColumnHeaderMenuHandlers {
+    onPinLeft: () => void;
+    onPinRight: () => void;
+    onUnpin: () => void;
+    onSortAsc: () => void;
+    onSortDesc: () => void;
+    onClearSort: () => void;
+    onAutosizeThis: () => void;
+    onAutosizeAll: () => void;
+    onClose: () => void;
+}

package/dist/types/utils/index.d.ts

@@ -6,10 +6,10 @@ export { getStatusBarParts } from './statusBarHelpers';
 export { getDataGridStatusBarConfig } from './dataGridStatusBar';
 export { getPaginationViewModel, PAGE_SIZE_OPTIONS, MAX_PAGE_BUTTONS, } from './paginationHelpers';
 export type { PaginationViewModel } from './paginationHelpers';
-export { GRID_CONTEXT_MENU_ITEMS, COLUMN_HEADER_MENU_ITEMS, getContextMenuHandlers, formatShortcut } from './gridContextMenuHelpers';
+export { GRID_CONTEXT_MENU_ITEMS, COLUMN_HEADER_MENU_ITEMS, getContextMenuHandlers, getColumnHeaderMenuItems, formatShortcut } from './gridContextMenuHelpers';
 export type { CsvColumn } from './exportToCsv';
 export type { StatusBarPart, StatusBarPartsInput } from './statusBarHelpers';
-export type { GridContextMenuItem, IColumnHeaderMenuItem, GridContextMenuHandlerProps } from './gridContextMenuHelpers';
+export type { GridContextMenuItem, IColumnHeaderMenuItem, GridContextMenuHandlerProps, ColumnHeaderMenuInput, ColumnHeaderMenuHandlers } from './gridContextMenuHelpers';
 export { parseValue, numberParser, currencyParser, dateParser, emailParser, booleanParser, } from './valueParsers';
 export type { ParseValueResult } from './valueParsers';
 export { computeAggregations } from './aggregationUtils';
@@ -24,3 +24,8 @@ export type { IVisibleRange } from './virtualScroll';
 export { getHeaderFilterConfig, getCellRenderDescriptor, resolveCellDisplayContent, resolveCellStyle, buildInlineEditorProps, buildPopoverEditorProps, } from './dataGridViewModel';
 export type { HeaderFilterConfigInput, HeaderFilterConfig, CellRenderDescriptorInput, CellRenderDescriptor, CellRenderMode, } from './dataGridViewModel';
 export { debounce } from './debounce';
+export { measureRange, injectGlobalStyles } from './dom';
+export type { OverlayRect } from './dom';
+export { computeNextSortState } from './sortHelpers';
+export type { ISortState } from './sortHelpers';
+export { measureColumnContentWidth, AUTOSIZE_EXTRA_PX, AUTOSIZE_MAX_PX } from './columnAutosize';

package/dist/types/utils/sortHelpers.d.ts

@@ -0,0 +1,16 @@
+/**
+ * Sort state computation helpers shared across all frameworks.
+ */
+export interface ISortState {
+    field: string;
+    direction: 'asc' | 'desc';
+}
+/**
+ * Compute the next sort state given the current state and a sort request.
+ *
+ * @param current - Current sort state
+ * @param columnKey - Column being sorted
+ * @param direction - Explicit direction, `null` to clear, or `undefined` to toggle
+ * @returns New sort state
+ */
+export declare function computeNextSortState(current: ISortState, columnKey: string, direction?: 'asc' | 'desc' | null): ISortState;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@alaarab/ogrid-core",
-  "version": "2.0.9",
+  "version": "2.0.12",
   "description": "OGrid core – framework-agnostic types, algorithms, and utilities for OGrid data grids.",
   "main": "dist/esm/index.js",
   "module": "dist/esm/index.js",