@opencorestack/opengridx 3.6.0 → 3.7.1

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/styles/base/variables.css

@@ -81,6 +81,18 @@
   --ogx-grid-cell-font-size: 13px;
   --ogx-grid-header-font-size: 13px;
   --ogx-grid-line-height: var(--ogx-line-height-normal);
+  /* Outer border and divider widths (v3.7). 0 hides a divider. Their colours,
+     --ogx-grid-column-divider-color and --ogx-grid-row-divider-color, are unset here and fall back
+     to --ogx-grid-border-color where they are used. So do the other theme-builder variables:
+     --ogx-grid-border-radius (--ogx-border-radius-lg), --ogx-grid-header-padding-x
+     (--ogx-grid-cell-padding-x), --ogx-grid-header-font-family / -font-weight and
+     --ogx-grid-cell-font-family / -font-weight (inherited; header weight 600), and
+     --ogx-overlay-font-family / -font-weight / -font-size (the grid font, each item's own weight,
+     --ogx-font-size-xs for menu and panel items). */
+  --ogx-grid-border-width: 1px;
+  --ogx-grid-column-divider-width: 1px;
+  --ogx-grid-header-column-divider-width: 1px;
+  --ogx-grid-row-divider-width: 1px;
   --ogx-grid-background: var(--ogx-color-white);
   --ogx-grid-border-color: var(--ogx-color-gray-200);
   --ogx-grid-header-background: var(--ogx-color-gray-50);

package/lib/theme/DataGridThemeProvider.tsx

@@ -272,6 +272,18 @@ function themeToCSS(theme: GridTheme): Record<string, string> {
         set('--ogx-grid-cell-padding-y', g.cellPaddingY);
         set('--ogx-grid-cell-font-size', g.cellFontSize);
         set('--ogx-grid-header-font-size', g.headerFontSize);
+        set('--ogx-grid-header-font-family', g.headerFontFamily);
+        set('--ogx-grid-header-font-weight', g.headerFontWeight);
+        set('--ogx-grid-cell-font-family', g.cellFontFamily);
+        set('--ogx-grid-cell-font-weight', g.cellFontWeight);
+        set('--ogx-grid-header-padding-x', g.headerPaddingX);
+        set('--ogx-grid-border-width', g.borderWidth);
+        set('--ogx-grid-border-radius', g.borderRadius);
+        set('--ogx-grid-column-divider-width', g.columnDividerWidth);
+        set('--ogx-grid-header-column-divider-width', g.headerColumnDividerWidth);
+        set('--ogx-grid-row-divider-width', g.rowDividerWidth);
+        set('--ogx-grid-column-divider-color', g.columnDividerColor);
+        set('--ogx-grid-row-divider-color', g.rowDividerColor);
         set('--ogx-grid-background', g.background);
         set('--ogx-grid-border-color', g.borderColor);
         set('--ogx-grid-header-background', g.headerBackground);
@@ -338,6 +350,9 @@ function themeToCSS(theme: GridTheme): Record<string, string> {
         set('--ogx-overlay-item-selected-text', o.itemSelectedText);
         set('--ogx-overlay-item-danger-bg', o.itemDangerBackground);
         set('--ogx-overlay-item-danger-text', o.itemDangerText);
+        set('--ogx-overlay-font-family', o.fontFamily);
+        set('--ogx-overlay-font-weight', o.fontWeight);
+        set('--ogx-overlay-font-size', o.fontSize);
     }
 
     if (theme.scrollbar) {