@alaarab/ogrid-core 2.0.9 → 2.0.11

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,4 @@ 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';

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,5 @@ 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';

package/package.json

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