@opencorestack/opengridx 3.8.0 → 3.8.1

package/docs/API_REFERENCE.md

@@ -546,6 +546,21 @@ In every exporter, a non-empty `selectedRows` takes precedence over `groupedRows
 
 Every exporter takes `columns` typed for your rows (`GridColDef<R>[]`) or untyped (`GridColDef[]`), and its options also accept `getRowId?: (row: R) => GridRowId`. Pass the grid's `getRowId` when you use one: `selectedRows` holds those ids, and since v3.0 the grid no longer copies them onto `row.id`.
 
+### Export option types
+
+Each exporter's options are exported as a type. Fields common to all of them: `fileName`, `selectedRows`, `getRowId`, `aggregationResult`, `aggregationModel`, `groupedRows`.
+
+| Type | For | Its own fields |
+| :--- | :--- | :--- |
+| `CsvExportOptions<R>` | `exportToCsv` | `includeHeaders`, `delimiter`, `escapeFormulas`, `bom` |
+| `JsonExportOptions<R>` | `exportToJson` | `pretty` |
+| `ExcelExportOptions<R>` | `exportToExcel` (HTML `.xls`) | `sheetName`, `includeHeaders`, `escapeFormulas` |
+| `ExcelAdvancedExportOptions<R>` | `exportToExcelAdvanced` (`.xlsx`) | `sheets`, `columnStyles`, `headerFillColor`, `headerTextColor`, `headerFontSize`, `bodyFontSize` |
+| `ExcelSheetDefinition` | one entry of `sheets` | `name`, `rows` (`'all'` / `'selected'`), `includeHeaders`, `includeSummary`, `autoFilter`, `frozenHeader`, `alternateRowColor`; `{ type: 'summary', name? }` adds a totals sheet |
+| `ExcelColumnStyle` | a value of `columnStyles` (by field) | `numFmt` (e.g. `'$#,##0.00'`), `width`, `alignment`, `embedImage`, `imageWidth`, `imageHeight` |
+
+`PdfExportOptions` and `PrintOptions` are described in [PDF Export](features/pdf-export.md) and the [Export Guide](features/export-guide.md).
+
 ---
 
 ## 🤖 AI Toolkit (`@opencorestack/opengridx/ai`)
@@ -652,6 +667,10 @@ Context provider for overriding the grid's visual system.
 - **`overlays`**: colours (`background`, `text`, `border`, `shadow`, `item*`) and, v3.7, `fontFamily`, `fontWeight`, `fontSize` for menus and panels.
 - **`toolbar`**, **`scrollbar`** (`thumbColor`, `trackColor`, `size`), **`skeleton`** (`baseColor`, `highlightColor`), **`transitions`**.
 
+#### Theme types
+
+`DataGridThemeProviderProps`: `theme: GridTheme`, `children`, `className?`, `style?` (both on the wrapper element). Each key of `GridTheme` has its own exported type, for building a theme in parts: `GridThemeColors` (with `GridThemeGrayScale` for `gray`), `GridThemeTypography`, `GridThemeSpacing`, `GridThemeBorders`, `GridThemeShadows`, `GridThemeGrid`, `GridThemeOverlays`, `GridThemeToolbar`, `GridThemeScrollbar`, `GridThemeSkeleton`, `GridThemeTransitions`. Every field is optional.
+
 Presets: `darkTheme`, `roseTheme`, `emeraldTheme`, `amberTheme`, `compactTheme`. See [Theming](customization/theming.md).
 
 ---
@@ -836,6 +855,15 @@ If the key can change while the grid stays mounted, remount the grid with it (`<
 
 ## ⚙️ Interfaces & Types
 
+### Small shared types
+
+| Type | Definition | Used by |
+| :--- | :--- | :--- |
+| `GridAlignment` | `'left' \| 'center' \| 'right'` | `GridColDef.align`, `headerAlign` |
+| `GridSortDirection` | `'asc' \| 'desc' \| null` | a column's sort state (`null`: unsorted) |
+| `GridSortModel` | `{ field: string; sort: GridSortDirection }`: like `GridSortItem`, but `sort` may be `null` | a single column's sort state |
+| `GridPinnedPosition` | `'left' \| 'right'` (logical: inline start / end in RTL) | column pinning |
+
 ### `GridSortItem`
 ```typescript
 interface GridSortItem {

package/lib/components/AiAssistant/GridAiAssistantPanel.css

@@ -71,7 +71,7 @@
 .ogx-ai-panel__suggestion {
   padding: 3px 10px;
   border: 1px solid var(--ogx-border-color, var(--ogx-grid-border-color));
-  border-radius: var(--ogx-border-radius-round, 999px);
+  border-radius: 999px;
   background: var(--ogx-grid-header-background);
   color: inherit;
   font: inherit;
@@ -119,7 +119,7 @@
   align-items: center;
   gap: 4px;
   padding: 2px 4px 2px 10px;
-  border-radius: var(--ogx-border-radius-round, 999px);
+  border-radius: 999px;
   background: var(--ogx-color-primary-light, #e0e7ff);
   color: var(--ogx-color-primary-dark, #1e3a8a);
 }

package/lib/components/Cell/Cell.css

@@ -27,9 +27,7 @@
   outline: 2px solid var(--ogx-grid-cell-focus-border, var(--ogx-color-primary, #2563eb));
   outline-offset: -2px;
 }
-.ogx__cell--editable {
-  cursor: text;
-}
+
 /*
  * Cell range selection (cellSelection, v3.3). The tint is a background image, so it also covers
  * pinned cells' own background; the outline is an inset box-shadow, so the layout never shifts.

package/lib/components/ColumnGroupHeader/ColumnGroupHeader.css

@@ -67,7 +67,6 @@
 }
 
 /* ─── Dark-mode overrides ────────────────────────────────────────────────────*/
-[data-theme="dark"] .ogx-col-group-cell__label,
-.ogx--dark .ogx-col-group-cell__label {
+[data-theme="dark"] .ogx-col-group-cell__label {
     color: var(--ogx-color-gray-300, #cbd5e1);
 }

package/lib/components/DataGrid/DataGrid.css

@@ -67,24 +67,7 @@
   background: var(--ogx-grid-background);
   box-shadow: 0 -4px 6px -1px rgba(0, 0, 0, 0.05);
 }
-.ogx--loading {
-  opacity: 0.6;
-  pointer-events: none;
-}
-.ogx--loading::after {
-  content: '';
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  background: color-mix(in srgb, var(--ogx-grid-background) 60%, transparent);
-  backdrop-filter: blur(2px);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  z-index: var(--ogx-z-index-modal);
-}
+
 /* No height prop: fill the container, as a block child of a sized box (height: 100%) or as a
    flex item (flex: 1 with min-height: 0). In an auto-height parent 100% resolves to auto. */
 .ogx--fill {
@@ -312,16 +295,6 @@
   text-overflow: ellipsis;
 }
 
-.ogx--density-compact .ogx__cell,
-.ogx--density-compact .ogx__header-cell {
-  padding: var(--ogx-spacing-xs) var(--ogx-spacing-sm);
-  font-size: var(--ogx-font-size-xs);
-}
-.ogx--density-comfortable .ogx__cell,
-.ogx--density-comfortable .ogx__header-cell {
-  padding: var(--ogx-spacing-md) var(--ogx-spacing-lg);
-  font-size: var(--ogx-font-size-md);
-}
 .ogx__group-cell-content {
   font-weight: 500;
   text-align: start;

package/lib/components/DataGrid/GridVirtualRows.tsx

@@ -228,7 +228,8 @@ export function GridVirtualRows<R extends GridRowModel>({
                         {Array.from({ length: infiniteScrollSkeletonCount }).map((_, i) => (
                             <Row<R>
                                 key={`__skeleton_${i}__`}
-                                row={{ id: `__skeleton_${i}__`, _isSkeleton: true } as unknown as R}
+                                row={{ id: `__skeleton_${i}__` } as unknown as R}
+                                skeleton
                                 columns={virtualColumns}
                                 rowIndex={unpinnedRowsLength + i}
                                 rowHeight={rowHeight}

package/lib/components/FilterPanel/FilterPanel.tsx

@@ -7,9 +7,9 @@ import type {
     GridFilterOperator
 } from '../../types';
 import { filterValueToInputText, getOperatorsForType, NO_VALUE_OPERATORS } from '../../utils/filtering';
+import { filterValueFromInputText, getFilterValueOptions, isSameFilterValue, matchesFilterValueOption } from '../../utils/filtering/filterInput';
 import { Input } from '../ui/Input';
 
-
 export interface FilterPanelProps {
     filterModel: GridFilterModel;
     columns: GridColDef[];
@@ -29,17 +29,10 @@ function getActiveFilter(items: readonly FilterEntry[], field: string): GridFilt
     return items.find((entry): entry is GridFilterItem => isFilterItem(entry) && entry.field === field);
 }
 
-function sameValue(a: unknown, b: unknown): boolean {
-    if (Object.is(a, b)) return true;
-    if (a instanceof Date && b instanceof Date) return a.getTime() === b.getTime();
-    if (Array.isArray(a) && Array.isArray(b)) return a.length === b.length && a.every((v, i) => sameValue(v, b[i]));
-    return false;
-}
-
 function sameEntry(a: FilterEntry, b: FilterEntry): boolean {
     if (a === b) return true;
     if (isFilterItem(a) && isFilterItem(b)) {
-        return a.id === b.id && a.field === b.field && a.operator === b.operator && sameValue(a.value, b.value);
+        return a.id === b.id && a.field === b.field && a.operator === b.operator && isSameFilterValue(a.value, b.value);
     }
     if (!isFilterItem(a) && !isFilterItem(b)) {
         return a.id === b.id && a.logicOperator === b.logicOperator && sameEntries(a.items, b.items);
@@ -52,36 +45,11 @@ function sameEntries(a: readonly FilterEntry[], b: readonly FilterEntry[]): bool
     return a.length === b.length && a.every((entry, i) => sameEntry(entry, b[i]));
 }
 
-interface ValueOption {
-    key: string;
-    value: unknown;
-    label: string;
-}
-
-function getValueOptions(col: GridColDef): ValueOption[] {
-    return (col.valueOptions ?? []).map((option, index) => (
-        option !== null && typeof option === 'object'
-            ? { key: String(index), value: option.value, label: option.label }
-            : { key: String(index), value: option, label: String(option) }
-    ));
-}
-
-function matchesOption(option: ValueOption, value: unknown): boolean {
-    if (Object.is(option.value, value)) return true;
-    return value != null && String(option.value).toLowerCase() === String(value).toLowerCase();
-}
-
 /** Text shown in the value input for a committed value. Never used to emit anything. */
 function toInputText(value: unknown, col: GridColDef): string {
     return filterValueToInputText(value, col.type);
 }
 
-/** The item value for typed text. isAnyOf takes a comma-separated list. */
-function fromInputText(text: string, operator: GridFilterOperator): unknown {
-    if (operator === 'isAnyOf') return text.split(',').map(part => part.trim()).filter(part => part !== '');
-    return text;
-}
-
 /** Carry a value over to a newly picked operator: lists for isAnyOf, scalars for the rest. */
 function convertValueForOperator(value: unknown, operator: GridFilterOperator): unknown {
     if (NO_VALUE_OPERATORS.has(operator)) return undefined;
@@ -144,7 +112,7 @@ const FilterRow: React.FC<{
         const unchanged = current ? text === toInputText(current.value, colRef.current) : text.trim() === '';
         if (unchanged) return;
         const operator = current?.operator ?? defaultOperator;
-        onChangeRef.current(buildItem(operator, fromInputText(text, operator)));
+        onChangeRef.current(buildItem(operator, filterValueFromInputText(text, operator)));
     }, [defaultOperator, buildItem]);
 
     // Text still waiting for the debounce; flushed when the panel closes (unmounts) meanwhile.
@@ -172,7 +140,7 @@ const FilterRow: React.FC<{
 
     const handleOperatorChange = (op: GridFilterOperator) => {
         // Keep what the user typed even if the debounce has not committed it yet.
-        const value = draft !== null ? fromInputText(draft, op) : item?.value;
+        const value = draft !== null ? filterValueFromInputText(draft, op) : item?.value;
         setDraft(null);
         onChange(buildItem(op, convertValueForOperator(value, op)));
     };
@@ -183,7 +151,7 @@ const FilterRow: React.FC<{
     };
 
     const showValue = !NO_VALUE_OPERATORS.has(currentOperator);
-    const valueOptions = getValueOptions(col);
+    const valueOptions = getFilterValueOptions(col);
     const valueClassName = `ogx-filter__value-input${isActive ? ' ogx-filter__value-input--active' : ''}`;
     const valueLabel = `Filter value for ${label}`;
 
@@ -215,7 +183,7 @@ const FilterRow: React.FC<{
                 className={`${valueClassName} ogx-filter__value-multiselect`}
                 multiple
                 size={Math.min(valueOptions.length, 4)}
-                value={valueOptions.filter(o => selected.some(v => matchesOption(o, v))).map(o => o.key)}
+                value={valueOptions.filter(o => selected.some(v => matchesFilterValueOption(o, v))).map(o => o.key)}
                 onChange={(e) => {
                     const keys = new Set(Array.from(e.target.selectedOptions, option => option.value));
                     onChange(buildItem('isAnyOf', valueOptions.filter(o => keys.has(o.key)).map(o => o.value)));
@@ -226,7 +194,7 @@ const FilterRow: React.FC<{
             </select>
         );
     } else if (showValue && col.type === 'singleSelect' && valueOptions.length > 0 && (currentOperator === 'is' || currentOperator === 'not')) {
-        const current = valueOptions.find(o => matchesOption(o, item?.value));
+        const current = valueOptions.find(o => matchesFilterValueOption(o, item?.value));
         valueControl = (
             <select
                 id={`${filterId}-val`}

package/lib/components/Header/Header.css

@@ -207,12 +207,7 @@
   background-color: var(--ogx-grid-header-hover-background);
   z-index: 6;
 }
-.ogx__header-cell--focus-visible {
-  outline: 2px solid var(--ogx-grid-cell-focus-border, var(--ogx-color-primary));
-  outline-offset: -2px;
-  background-color: var(--ogx-grid-header-hover-background);
-  z-index: 6; 
-}
+
 .ogx__header-cell:focus, .ogx__header-cell:focus-visible {
   outline: none !important;
 }
@@ -241,8 +236,4 @@
   background: var(--ogx-grid-header-hover-background);
   color: var(--ogx-grid-header-text);
 }
-.ogx__menu-icon-btn--active {
-  opacity: 1;
-  background: var(--ogx-color-primary-light);
-  color: var(--ogx-color-primary);
-}
+

package/lib/components/HeaderFilter/HeaderFilterCell.tsx

@@ -10,6 +10,7 @@ import {
     getHeaderFilterOperators,
     type GridHeaderFilterState,
 } from '../../utils/headerFilters';
+import { filterValueFromInputText, getFilterValueOptions, isSameFilterValue, matchesFilterValueOption } from '../../utils/filtering/filterInput';
 import { Input } from '../ui/Input';
 import { HeaderFilterOperatorMenu } from './HeaderFilterOperatorMenu';
 import type { HeaderFilterLocale } from '../../utils/headerFilterLocale';
@@ -29,42 +30,10 @@ export interface HeaderFilterCellProps {
     locale: HeaderFilterLocale;
 }
 
-interface ValueOption {
-    key: string;
-    value: unknown;
-    label: string;
-}
-
-function getValueOptions(col: GridColDef): ValueOption[] {
-    return (col.valueOptions ?? []).map((option, index) => (
-        option !== null && typeof option === 'object'
-            ? { key: String(index), value: option.value, label: option.label }
-            : { key: String(index), value: option, label: String(option) }
-    ));
-}
-
-function matchesOption(option: ValueOption, value: unknown): boolean {
-    const single = Array.isArray(value) ? value[0] : value;
-    if (Object.is(option.value, single)) return true;
-    return single != null && String(option.value).toLowerCase() === String(single).toLowerCase();
-}
-
-/** The item value for typed text. isAnyOf takes a comma-separated list. */
-function fromInputText(text: string, operator: GridFilterOperator): unknown {
-    if (operator === 'isAnyOf') return text.split(',').map(part => part.trim()).filter(part => part !== '');
-    return text;
-}
-
-function sameValue(a: unknown, b: unknown): boolean {
-    if (Object.is(a, b)) return true;
-    if (Array.isArray(a) && Array.isArray(b)) return a.length === b.length && a.every((v, i) => sameValue(v, b[i]));
-    return false;
-}
-
 function sameItem(a: GridFilterItem | undefined, b: GridFilterItem | undefined): boolean {
     if (a === b) return true;
     if (!a || !b) return false;
-    return a.operator === b.operator && sameValue(a.value, b.value);
+    return a.operator === b.operator && isSameFilterValue(a.value, b.value);
 }
 
 function ClearIcon() {
@@ -81,7 +50,7 @@ export function HeaderFilterCell({ colDef, state, style, className, ariaColIndex
     const label = colDef.headerName || colDef.field;
     const item = state.kind === 'editable' ? state.item : undefined;
     const operator: GridFilterOperator = item?.operator ?? getHeaderFilterDefaultOperator(colDef);
-    const valueOptions = getValueOptions(colDef);
+    const valueOptions = getFilterValueOptions(colDef);
     const usesSelect = colDef.type === 'boolean' || (colDef.type === 'singleSelect' && valueOptions.length > 0);
     const showsValue = !NO_VALUE_OPERATORS.has(operator);
 
@@ -117,7 +86,7 @@ export function HeaderFilterCell({ colDef, state, style, className, ariaColIndex
         const unchanged = current ? text === filterValueToInputText(current.value, col.type) : text.trim() === '';
         if (unchanged) return;
         const op = current?.operator ?? getHeaderFilterDefaultOperator(col);
-        const next = buildHeaderFilterItem(col, op, fromInputText(text, op));
+        const next = buildHeaderFilterItem(col, op, filterValueFromInputText(text, op));
         setLastEmitted(next);
         emit(col.field, next);
     }, []);
@@ -173,7 +142,7 @@ export function HeaderFilterCell({ colDef, state, style, className, ariaColIndex
 
     const selectOperator = (op: GridFilterOperator) => {
         // Keep what was typed even if the debounce has not committed it yet.
-        const value = draft !== null ? fromInputText(draft, op) : item?.value;
+        const value = draft !== null ? filterValueFromInputText(draft, op) : item?.value;
         setDraft(null);
         setMenuAnchor(null);
         report(buildHeaderFilterItem(colDef, op, convertHeaderFilterValue(value, op)));
@@ -271,7 +240,7 @@ export function HeaderFilterCell({ colDef, state, style, className, ariaColIndex
                 </select>
             );
         } else if (usesSelect) {
-            const selected = valueOptions.find(o => matchesOption(o, item?.value));
+            const selected = valueOptions.find(o => matchesFilterValueOption(o, item?.value));
             valueControl = (
                 <select
                     ref={selectRef}

package/lib/components/ListView/ListView.css

@@ -109,22 +109,6 @@
   color: var(--ogx-text-secondary, #9ca3af);
 }
 
-/* ─── Responsive: auto switch at ≤768px when using ogx--list-auto class ─── */
-@media (max-width: 768px) {
-  .ogx--list-auto .ogx__viewport {
-    display: none;
-  }
-  .ogx--list-auto .ogx-list-view {
-    display: flex;
-  }
-}
-
-@media (min-width: 769px) {
-  .ogx--list-auto .ogx-list-view {
-    display: none;
-  }
-}
-
 /* Loading with no rows yet: a progress bar, or slots.loadingOverlay centred. */
 .ogx-list-view__loading {
   position: relative;

package/lib/components/Row/Row.tsx

@@ -46,6 +46,8 @@ function mergeColSpan<R extends GridRowModel>(
 
 export interface RowProps<R extends GridRowModel = GridRowModel> {
     row: R;
+    /** A shimmer placeholder shown while infinite scroll loads more rows (`row` is unused). */
+    skeleton?: boolean;
     /** The row's id (from getRowId). Defaults to `row.id`; the grid always passes it. */
     rowId?: GridRowId;
     columns: GridColDef<R>[];
@@ -108,6 +110,7 @@ export interface RowProps<R extends GridRowModel = GridRowModel> {
 function RowImpl<R extends GridRowModel = GridRowModel>(props: RowProps<R>) {
     const {
         row,
+        skeleton = false,
         rowId: rowIdProp,
         columns,
         rowIndex,
@@ -197,7 +200,7 @@ function RowImpl<R extends GridRowModel = GridRowModel>(props: RowProps<R>) {
     }, [onEditStop, id]);
 
     // ── Skeleton row (shown during infinite-scroll fetch) ─────────────────────
-    if (row._isSkeleton) {
+    if (skeleton) {
         // Render shimmer placeholders — one per visible column, matching row height
         const cellCount = Math.max(columns.length, 5);
         return (

package/lib/hooks/features/useGridSpanning.ts

@@ -356,7 +356,7 @@ function computeSection<R extends GridRowModel>(
 
     for (let r = 0; r < rows.length; r++) {
         const row = rows[r];
-        if (!row || row._isSkeleton) continue;
+        if (!row) continue;
         // Synthetic rows hold no data of their own: they are never a span origin (spans from above
         // already end before them).
         if (isSyntheticRowId(getRowId(row), rowMetaMap)) continue;

package/lib/styles/base/reset.css

@@ -5,18 +5,17 @@
 :where([class*="ogx"], [class*="ogx"] *)::after {
   box-sizing: border-box;
 }
-.ogx--dragging {
-  user-select: none;
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-}
+
 .ogx *:focus {
   outline: none;
 }
-.ogx button:not(.ogx-menu-item) {
+/* Background and border at zero specificity: a component's own button class (.ogx-button--contained,
+   the AI panel's suggestions, …) must win over this reset. Font and cursor keep their old weight. */
+:where(.ogx button:not(.ogx-menu-item)) {
   background: none;
   border: none;
+}
+.ogx button:not(.ogx-menu-item) {
   cursor: pointer;
   font-family: inherit;
   font-size: inherit;