@opencorestack/opengridx 3.7.0 → 3.7.1

package/lib/components/DataGrid/DataGrid.css

@@ -19,9 +19,6 @@
   border-bottom-left-radius: max(0px, calc(var(--ogx-grid-border-radius, var(--ogx-border-radius-lg)) - var(--ogx-grid-border-width)));
   border-bottom-right-radius: max(0px, calc(var(--ogx-grid-border-radius, var(--ogx-border-radius-lg)) - var(--ogx-grid-border-width)));
 }
-.ogx:hover {
-  box-shadow: var(--ogx-shadow-md);
-}
 .ogx__viewport {
   flex: 1;
   overflow: auto;

package/lib/components/ListView/ListView.css

@@ -28,7 +28,7 @@
 }
 
 .ogx-list-view__row:hover {
-  background: var(--ogx-color-gray-50, #f8fafc);
+  background: var(--ogx-grid-row-hover-background);
 }
 
 /* Keyboard focus (roving tab stop between list rows). */
@@ -41,11 +41,11 @@
 }
 
 .ogx-list-view__row--selected {
-  background: var(--ogx-selection-bg, rgba(59, 130, 246, 0.08));
+  background: var(--ogx-selection-bg, var(--ogx-grid-row-selected-background));
 }
 
 .ogx-list-view__row--selected:hover {
-  background: var(--ogx-selection-hover-bg, rgba(59, 130, 246, 0.13));
+  background: var(--ogx-selection-hover-bg, var(--ogx-grid-row-selected-hover-background));
 }
 
 /* ─── Checkbox column inside list row ────────────────────────────────────── */
@@ -79,7 +79,7 @@
   min-width: 0;
   font-family: var(--ogx-font-family);
   font-size: var(--ogx-font-size-sm);
-  color: var(--ogx-grid-cell-text);
+  color: var(--ogx-grid-row-text);
 }
 
 /* ─── Toolbar in list view mode ──────────────────────────────────────────── */

package/lib/hooks/core/useLayout.ts

@@ -245,7 +245,9 @@ export function useLayout<R extends GridRowModel>(params: UseLayoutParams<R>): L
         getRowId = defaultGetRowId,
     } = params;
 
-    return useMemo<LayoutResult<R>>(() => {
+    // Rows and columns are measured in separate memos: a column resize must not walk every row
+    // (1M rows), and a sort or filter must not recompute column widths.
+    const rowLayout = useMemo(() => {
         const unpinnedRows = pagination ? paginatedUnpinnedRows : sortedUnpinnedRows;
 
         const heightOf = (row: R, rowIndex: number) => {
@@ -279,6 +281,35 @@ export function useLayout<R extends GridRowModel>(params: UseLayoutParams<R>): L
         const pinnedTopHeight = pinnedBlockHeight(pinnedTopRows, pinnedTopRowsLength);
         const pinnedBottomHeight = pinnedBlockHeight(pinnedBottomRows, pinnedBottomRowsLength);
 
+        return {
+            rowHeights,
+            cumulativeHeights,
+            unpinnedRowsHeight,
+            pinnedTopHeight,
+            pinnedBottomHeight,
+            pinnedTopRowsLength,
+            pinnedBottomRowsLength,
+            unpinnedRowsLength: rowCount,
+        };
+    }, [
+        rowHeight,
+        pagination,
+        paginatedUnpinnedRows,
+        sortedUnpinnedRows,
+        expandedRowIds,
+        getDetailPanelHeight,
+        detailPanelHeights,
+        pinnedTopRowsLength,
+        pinnedBottomRowsLength,
+        pinnedTopRows,
+        pinnedBottomRows,
+        paginationMode,
+        isLoading,
+        pageSize,
+        getRowId,
+    ]);
+
+    const columnLayout = useMemo(() => {
         // Pinned columns render in pinnedColumns.left / .right order; unpinned ones in column order.
         const { left: rawLeftPinnedCols, center: unpinnedCols, right: rawRightPinnedCols } =
             getPinnedColumnGroups(visibleOrderedColumns, pinnedColumns);
@@ -326,11 +357,6 @@ export function useLayout<R extends GridRowModel>(params: UseLayoutParams<R>): L
         }, [] as number[]);
 
         return {
-            rowHeights,
-            cumulativeHeights,
-            unpinnedRowsHeight,
-            pinnedTopHeight,
-            pinnedBottomHeight,
             leftPinnedCols,
             rightPinnedCols,
             unpinnedColsWithWidth,
@@ -342,22 +368,8 @@ export function useLayout<R extends GridRowModel>(params: UseLayoutParams<R>): L
             unpinnedTotalWidth,
             systemColumnsWidth,
             pinnedSystemColumnsWidth,
-            pinnedTopRowsLength,
-            pinnedBottomRowsLength,
-            unpinnedRowsLength: unpinnedRows.length,
         };
     }, [
-        rowHeight,
-        pagination,
-        paginatedUnpinnedRows,
-        sortedUnpinnedRows,
-        expandedRowIds,
-        getDetailPanelHeight,
-        detailPanelHeights,
-        pinnedTopRowsLength,
-        pinnedBottomRowsLength,
-        pinnedTopRows,
-        pinnedBottomRows,
         visibleOrderedColumns,
         pinnedColumns,
         columnWidths,
@@ -367,9 +379,7 @@ export function useLayout<R extends GridRowModel>(params: UseLayoutParams<R>): L
         rowReordering,
         pinCheckboxColumn,
         pinExpandColumn,
-        paginationMode,
-        isLoading,
-        pageSize,
-        getRowId,
     ]);
+
+    return useMemo<LayoutResult<R>>(() => ({ ...rowLayout, ...columnLayout }), [rowLayout, columnLayout]);
 }

package/lib/styles/base/reset.css

@@ -1,6 +1,8 @@
-*,
-*::before,
-*::after {
+/* Only the grid's own elements, including its portalled menus and panels (all carry an ogx class).
+   :where() keeps the specificity at zero, so a consumer's own box-sizing rule still wins. */
+:where([class*="ogx"], [class*="ogx"] *),
+:where([class*="ogx"], [class*="ogx"] *)::before,
+:where([class*="ogx"], [class*="ogx"] *)::after {
   box-sizing: border-box;
 }
 .ogx--dragging {

package/lib/utils/export/exportShared.ts

@@ -1,6 +1,6 @@
 import type { GridAggregationModel, GridColDef, GridGroupedExportRow, GridRowId, GridRowModel } from '../../types';
 import { computeAggregations, formatAggregateForColumn } from '../aggregation';
-import { formatValueByType } from '../values';
+import { formatValueByType, getCellValue } from '../values';
 import { isSystemField } from '../focus';
 
 /**
@@ -77,10 +77,12 @@ export function aggregationForExport<R extends GridRowModel>(
     return computeAggregations(exportedRows, aggregationModel, lookup, 'export');
 }
 
-/** The cell's raw value: `row[field]`, then the column's `valueGetter`. */
+/**
+ * The cell's raw value, read like the grid reads it (`getCellValue`): a `valueGetter` that throws
+ * exports as an empty value instead of aborting the export.
+ */
 export function getRawExportValue<R extends GridRowModel>(row: R, col: GridColDef<R>): unknown {
-    const value: unknown = (row as GridRowModel)[col.field];
-    return col.valueGetter ? col.valueGetter({ row, field: col.field, value }) : value;
+    return getCellValue(row, col.field, col);
 }
 
 /**
@@ -159,6 +161,22 @@ export function neutralizeFormula(text: string, fromNonText = false): string {
     return `'${text}`;
 }
 
+/**
+ * Text that reads as a formatted number (digits, signs, separators, brackets, %, currency symbols),
+ * which no spreadsheet runs as a formula. One character class: linear on any input.
+ */
+const NUMERIC_DISPLAY = /^[\d\s.,'%+\-()\p{Sc}]*$/u;
+
+/**
+ * Whether a data cell's text may skip formula escaping: the grid formatted a number, date or
+ * boolean itself, or a `valueFormatter` turned such a value into plain numeric text ("-$3").
+ * Anything else a formatter writes is escaped like text, since it may come from user data.
+ */
+export function isTrustedNonText(raw: unknown, text: string, hasFormatter: boolean): boolean {
+    if (!isNonTextValue(raw)) return false;
+    return !hasFormatter || NUMERIC_DISPLAY.test(text);
+}
+
 /** Whether a raw value is a number, bigint, boolean or Date, whose formatted text is not user-typed. */
 export function isNonTextValue(value: unknown): boolean {
     return typeof value === 'number' || typeof value === 'bigint' || typeof value === 'boolean' || value instanceof Date;

package/lib/utils/export/index.ts

@@ -10,6 +10,7 @@ import {
     getRawExportValue,
     hasSelection,
     isNonTextValue,
+    isTrustedNonText,
     neutralizeFormula,
     pickExportedAggregates,
     rowsForExport,
@@ -55,11 +56,14 @@ export interface CsvExportOptions<R extends GridValidRowModel = GridRowModel> {
 interface ExportCell {
     text: string;
     raw: unknown;
+    /** The text came from the grid's own formatting of a number, date or boolean (see `isTrustedNonText`). */
+    fromNonText: boolean;
 }
 
 function exportCell<R extends GridRowModel>(row: R, col: GridColDef<R>): ExportCell {
     const raw = getRawExportValue(row, col);
-    return { text: formatExportValue(row, col, raw), raw };
+    const text = formatExportValue(row, col, raw);
+    return { text, raw, fromNonText: isTrustedNonText(raw, text, !!col.valueFormatter) };
 }
 
 /** Aggregate text per export column for one subtotal / total record. */
@@ -111,7 +115,7 @@ export function exportToCsv<R extends GridRowModel>(
                 const row = entry.row as R;
                 const cells = exportColumns.map((col, i) => {
                     const cell = exportCell(row, col);
-                    const text = escapeFormulas ? neutralizeFormula(cell.text, isNonTextValue(cell.raw)) : cell.text;
+                    const text = escapeFormulas ? neutralizeFormula(cell.text, cell.fromNonText) : cell.text;
                     return escapeCSV((i === 0 ? indent : '') + text, delimiter);
                 });
                 csvContent += cells.join(delimiter) + '\n';
@@ -138,7 +142,7 @@ export function exportToCsv<R extends GridRowModel>(
         rowsToExport.forEach(row => {
             const values = exportColumns.map(col => {
                 const cell = exportCell(row, col);
-                return field(cell.text, isNonTextValue(cell.raw));
+                return field(cell.text, cell.fromNonText);
             });
             csvContent += values.join(delimiter) + '\n';
         });
@@ -255,7 +259,7 @@ export function exportToExcel<R extends GridRowModel>(
     html += '<tbody>';
 
     const dataCell = (cell: ExportCell, col: GridColDef<R>, prefix = ''): string => {
-        const content = prefix + cellText(cell.text, isNonTextValue(cell.raw));
+        const content = prefix + cellText(cell.text, cell.fromNonText);
         return isXlsTextCell(col, cell.raw) ? textTd(content) : `<td>${content}</td>`;
     };
 

package/lib/utils/filtering/index.ts

@@ -1,7 +1,7 @@
 
 import type { GridRowModel, GridFilterItem, GridFilterModel, GridFilterGroup, GridFilterOperator, GridColDef } from '../../types';
 import type { GridColumnLookup } from '../columnLookup';
-import { getCellValue, getFormattedValue, toLocalDateString, toLocalDayKey, toNumber } from '../values';
+import { getCellValue, formatValueByType, getFormattedValue, toLocalDateString, toLocalDayKey, toNumber } from '../values';
 
 /** Compares a cell value with the filter item's value. */
 export type GridFilterOperatorFn = (value: unknown, filterValue?: unknown) => boolean;
@@ -230,7 +230,13 @@ function getQuickFilterTexts(row: GridRowModel, columns: GridColumnLookup | unde
   for (const col of columns.quickFilterColumns) {
     const value = getCellValue(row, col.field, col);
     const formatted = getFormattedValue(row, col.field, value, col);
-    if (formatted != null && formatted !== '') texts.push(String(formatted).toLowerCase());
+    if (formatted != null && formatted !== '') {
+      texts.push(String(formatted).toLowerCase());
+    } else if (col.type === 'date' || col.type === 'boolean' || col.type === 'singleSelect') {
+      // Without a formatter the grid shows a locale date, Yes / No or the option label: search that too.
+      const shown = formatValueByType(value, col);
+      if (shown !== '') texts.push(shown.toLowerCase());
+    }
     pushSearchText(texts, value);
   }
   return texts;

package/lib/utils/parsing.ts

@@ -131,6 +131,19 @@ export function parseNumberText(text: string): GridParsedValue {
 
 const ISO_DATE_PREFIX = /^(\d{4}-\d{2}-\d{2})/;
 const pad2 = (n: number) => String(n).padStart(2, '0');
+/** Whether an ISO date-time string ends with `Z` or a `±hh:mm` / `±hhmm` offset. A loop, not a regex. */
+function hasZone(text: string): boolean {
+    const end = text.trimEnd();
+    if (end.endsWith('Z') || end.endsWith('z')) return true;
+    const tIndex = end.indexOf('T');
+    if (tIndex < 0) return false;
+    for (let i = end.length - 1; i > tIndex; i--) {
+        const ch = end[i];
+        if (ch === '+' || ch === '-') return true;
+        if (!(ch >= '0' && ch <= '9') && ch !== ':') return false;
+    }
+    return false;
+}
 const localDay = (date: Date) => `${date.getFullYear()}-${pad2(date.getMonth() + 1)}-${pad2(date.getDate())}`;
 
 /**
@@ -147,7 +160,17 @@ export function parseDateText(text: string, current?: unknown): GridParsedValue
     if (typeof current === 'number') return valid(date.getTime());
     if (typeof current === 'string') {
         const day = localDay(date);
-        return valid(ISO_DATE_PREFIX.test(current) && current.length > 10 ? day + current.slice(10) : day);
+        if (!ISO_DATE_PREFIX.test(current) || current.length <= 10) return valid(day);
+        // A zoned date-time ("…Z", "…+05:30") is shown as a local day: keep its local time of day on
+        // the pasted day and write UTC, or west of UTC the cell would show the day before.
+        const held = hasZone(current) ? new Date(current) : null;
+        if (held && !Number.isNaN(held.getTime())) {
+            return valid(new Date(
+                date.getFullYear(), date.getMonth(), date.getDate(),
+                held.getHours(), held.getMinutes(), held.getSeconds(), held.getMilliseconds(),
+            ).toISOString());
+        }
+        return valid(day + current.slice(10));
     }
     return valid(date);
 }

package/lib/utils/values.ts

@@ -132,6 +132,7 @@ export function toDate(value: unknown): Date | null {
             // Reject roll-overs such as 2024-02-31.
             if (date.getMonth() !== month || date.getDate() !== day) return null;
         } else {
+            if (!hasOnlyDateWords(trimmed)) return null;
             date = new Date(trimmed);
         }
     } else {
@@ -140,6 +141,36 @@ export function toDate(value: unknown): Date | null {
     return Number.isNaN(date.getTime()) ? null : date;
 }
 
+const DATE_WORDS = [
+    'january', 'february', 'march', 'april', 'may', 'june', 'july', 'august', 'september', 'october',
+    'november', 'december', 'monday', 'tuesday', 'wednesday', 'thursday', 'friday', 'saturday', 'sunday',
+];
+const DATE_TOKENS = new Set(['t', 'z', 'am', 'pm', 'gmt', 'utc', 'sept']);
+
+function isDateWord(word: string): boolean {
+    if (DATE_TOKENS.has(word)) return true;
+    return word.length >= 3 && DATE_WORDS.some(name => name.startsWith(word));
+}
+
+/**
+ * Whether every run of letters in `text` is a month or weekday name (or abbreviation), or one of
+ * T, Z, AM, PM, GMT, UTC. `Date.parse` accepts free text such as "hello 5" (as a 2001 date in V8),
+ * which must not become a date. A loop, not a regex.
+ */
+function hasOnlyDateWords(text: string): boolean {
+    let word = '';
+    for (let i = 0; i <= text.length; i++) {
+        const ch = i < text.length ? text[i].toLowerCase() : '';
+        if (ch >= 'a' && ch <= 'z') {
+            word += ch;
+            continue;
+        }
+        if (word !== '' && !isDateWord(word)) return false;
+        word = '';
+    }
+    return true;
+}
+
 /** A sortable integer for the local calendar day of a date (YYYYMMDD), or null when unparsable. */
 export function toLocalDayKey(value: unknown): number | null {
     const date = toDate(value);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opencorestack/opengridx",
-  "version": "3.7.0",
+  "version": "3.7.1",
   "description": "OpenGridX: High-performance React data infrastructure. Unlock advanced Row Grouping, Excel Export, and Column Pinning without the usual \"Pro\" gatekeeping. Built for speed, scale, and complete architectural freedom. Fully open, virtualization-ready, and feature-complete.",
   "type": "module",
   "main": "./dist/opengridx.umd.js",