@opencorestack/opengridx 3.6.0 → 3.7.0

package/lib/components/Pagination/Pagination.css

@@ -9,7 +9,7 @@
   font-size: var(--ogx-font-size-sm);
   color: var(--ogx-grid-row-text);
   min-height: 52px;
-  border-radius: 0 0 var(--ogx-border-radius-lg) var(--ogx-border-radius-lg);
+  border-radius: 0 0 var(--ogx-grid-border-radius, var(--ogx-border-radius-lg)) var(--ogx-grid-border-radius, var(--ogx-border-radius-lg));
 }
 .ogx-pagination__page-size {
   display: flex;

package/lib/components/Row/Row.css

@@ -1,7 +1,7 @@
 .ogx__row {
   display: flex;
   align-items: stretch;
-  border-bottom: 1px solid var(--ogx-grid-border-color);
+  border-bottom: var(--ogx-grid-row-divider-width) solid var(--ogx-grid-row-divider-color, var(--ogx-grid-border-color));
   background: var(--ogx-grid-background);
   position: relative;
   min-height: var(--ogx-row-height);
@@ -94,7 +94,7 @@
 }
 .ogx__row--skeleton {
     pointer-events: none;
-    border-bottom: 1px solid var(--ogx-grid-border-color);
+    border-bottom: var(--ogx-grid-row-divider-width) solid var(--ogx-grid-row-divider-color, var(--ogx-grid-border-color));
     background-color: var(--ogx-grid-background);
 }
 .ogx__row--skeleton .ogx__skeleton-cell {

package/lib/components/Toolbar/GridToolbar.css

@@ -80,6 +80,7 @@
   z-index: 9999;
   overflow: hidden;
   animation: ogx-panel-in 0.15s ease-out;
+  font-family: var(--ogx-overlay-font-family, inherit);
 }
 @keyframes ogx-panel-in {
   from { opacity: 0; transform: translateY(-6px) scale(0.98); }
@@ -97,7 +98,7 @@
   display: flex;
   align-items: center;
   gap: var(--ogx-spacing-xs);
-  font-family: var(--ogx-font-family);
+  font-family: var(--ogx-overlay-font-family, var(--ogx-font-family));
   font-size: var(--ogx-font-size-sm);
   font-weight: 600;
   color: var(--ogx-grid-header-text);
@@ -108,7 +109,7 @@
   border-radius: var(--ogx-border-radius-sm);
   background: transparent;
   color: var(--ogx-toolbar-btn-danger-text, var(--ogx-color-error, #ef4444));
-  font-family: var(--ogx-font-family);
+  font-family: var(--ogx-overlay-font-family, var(--ogx-font-family));
   font-size: var(--ogx-font-size-xs);
   font-weight: 500;
   cursor: pointer;
@@ -124,7 +125,7 @@
   border-radius: var(--ogx-border-radius-sm);
   background: transparent;
   color: var(--ogx-grid-header-text);
-  font-family: var(--ogx-font-family);
+  font-family: var(--ogx-overlay-font-family, var(--ogx-font-family));
   font-size: var(--ogx-font-size-xs);
   font-weight: 500;
   cursor: pointer;
@@ -142,7 +143,7 @@
 }
 .ogx-toolbar__empty {
   padding: var(--ogx-spacing-md) var(--ogx-spacing-md);
-  font-family: var(--ogx-font-family);
+  font-family: var(--ogx-overlay-font-family, var(--ogx-font-family));
   font-size: var(--ogx-font-size-sm);
   color: var(--ogx-grid-header-text);
   line-height: 1.5;
@@ -171,9 +172,9 @@
 }
 .ogx-toolbar__agg-label {
   flex: 0 0 100px;
-  font-family: var(--ogx-font-family);
-  font-size: var(--ogx-font-size-xs);
-  font-weight: 500;
+  font-family: var(--ogx-overlay-font-family, var(--ogx-font-family));
+  font-size: var(--ogx-overlay-font-size, var(--ogx-font-size-xs));
+  font-weight: var(--ogx-overlay-font-weight, 500);
   color: var(--ogx-grid-row-text);
   overflow: hidden;
   text-overflow: ellipsis;

package/lib/components/Toolbar/PivotPanel.css

@@ -9,7 +9,7 @@
   z-index: 9999;
   overflow: hidden;
   animation: ogx-panel-in 0.15s ease-out;
-  font-family: var(--ogx-font-family);
+  font-family: var(--ogx-overlay-font-family, var(--ogx-font-family));
 }
 @keyframes ogx-panel-in {
   from { opacity: 0; transform: translateY(-6px) scale(0.98); }
@@ -37,7 +37,7 @@
   border-radius: var(--ogx-border-radius-sm);
   background: transparent;
   color: var(--ogx-color-error, #ef4444);
-  font-family: var(--ogx-font-family);
+  font-family: var(--ogx-overlay-font-family, var(--ogx-font-family));
   font-size: var(--ogx-font-size-xs);
   font-weight: 500;
   cursor: pointer;
@@ -163,7 +163,7 @@
   border-radius: 999px;
   background: var(--ogx-grid-header-background);
   color: var(--ogx-grid-row-text);
-  font-family: var(--ogx-font-family);
+  font-family: var(--ogx-overlay-font-family, var(--ogx-font-family));
   font-size: 12px;
   font-weight: 500;
   cursor: pointer;

package/lib/hooks/core/useGridDevWarnings.ts

@@ -87,7 +87,9 @@ export function useGridDevWarnings(params: UseGridDevWarningsParams): void {
         console.warn(
             `[OpenGridX] The grid content is ${Math.round(scrollHeight)}px tall, more than this browser lays out ` +
             '(about 17.9M px in Firefox, 33.5M px in Chrome and Safari). ' + reach +
-            'Use pagination, server-side or infinite loading, or a smaller rowHeight. See docs/features/virtualization.md.'
+            'Load the rows on demand with a `dataSource` (server-side pages or infinite scroll, ' +
+            'docs/features/data-source.md), use `pagination`, or a smaller rowHeight (density="compact"). ' +
+            'See docs/features/virtualization.md#the-browser-height-limit.'
         );
     }, [scrollHeight, maxContentHeight, reachableRowCount, unpinnedRowCount]);
 

package/lib/hooks/core/useGridEditPipeline.ts

@@ -0,0 +1,55 @@
+import type { GridColDef, GridRowId, GridRowModel } from '../../types';
+import { useGridEditCommitChannel } from './useGridUndoRedo';
+import { useGridBatchEdit, type UseGridBatchEditParams } from '../features/useGridBatchEdit';
+import { useGridEditing } from '../features/useGridEditing';
+
+export interface UseGridEditPipelineParams<R extends GridRowModel> {
+    /** The row store's lookup (rows stored since the last render are read through `batchEdit.getRow`). */
+    rowsLookup: ReadonlyMap<GridRowId, R>;
+    /** The stored rows, in store order. */
+    rows: R[];
+    getRowId: (row: R) => GridRowId;
+    columns: GridColDef<R>[];
+    processRowUpdate: UseGridBatchEditParams<R>['processRowUpdate'];
+    onProcessRowUpdateError: UseGridBatchEditParams<R>['onProcessRowUpdateError'];
+    replaceRows: UseGridBatchEditParams<R>['replaceRows'];
+}
+
+/**
+ * Steps 12a–13 of `DataGrid` (docs/architecture/datagrid-orchestration.md), in their call order: the edit
+ * commit channel, the batch edit and single-cell editing. Single edits store through `batchEdit.storeRow`
+ * and report to the channel; the undo/redo history (`useGridRangeEditing`, later) listens on it.
+ */
+export function useGridEditPipeline<R extends GridRowModel>(params: UseGridEditPipelineParams<R>) {
+    const { rowsLookup, rows, getRowId, columns, processRowUpdate, onProcessRowUpdateError, replaceRows } = params;
+
+    // Commits (single edits and batch edits) reach the undo/redo history created further down.
+    const editCommitChannel = useGridEditCommitChannel();
+    // Batch edits (paste, range clear, undo, redo): one processRowUpdate per row, one store update.
+    const batchEdit = useGridBatchEdit<R>({
+        rowsLookup,
+        columns,
+        processRowUpdate,
+        onProcessRowUpdateError,
+        replaceRows,
+        onCommitted: editCommitChannel.emit,
+    });
+
+    const editingHandlers = useGridEditing({
+        rows,
+        getRowId,
+        columns,
+        processRowUpdate,
+        onProcessRowUpdateError,
+        onRowChange: (updatedRow, rowId) => {
+            // Replaces the edited row in the *current* store, under the edited row's id: this runs
+            // after an awaited processRowUpdate, by which time the rows prop (or a dataSource
+            // fetch) may have replaced the rows this render saw. The returned row is stored as is
+            // (the grid never writes an id onto it), even if it does not carry its key itself.
+            batchEdit.storeRow(rowId, updatedRow);
+        },
+        onCommitted: (changes) => editCommitChannel.emit(changes, 'edit'),
+    });
+
+    return { editCommitChannel, batchEdit, editingHandlers };
+}

package/lib/hooks/core/useGridRangeEditing.ts

@@ -0,0 +1,129 @@
+import type { MutableRefObject, RefObject } from 'react';
+import type { DataGridProps, GridApi, GridCellParams, GridCellSelectionModel, GridColDef, GridRowId, GridRowMeta, GridRowModel } from '../../types';
+import type { UseGridCellSelectionReturn } from './useGridCellSelection';
+import type { FocusedCell } from './useGridKeyboardNavigation';
+import type { LayoutResult } from './useLayout';
+import type { UseGridBatchEditReturn } from '../features/useGridBatchEdit';
+import { useGridCellSelectionApi } from './useGridCellSelectionApi';
+import { useGridClipboardPaste } from './useGridClipboardPaste';
+import { useGridUndoRedo, UNDO_HISTORY_LIMIT, type GridEditCommitChannel } from './useGridUndoRedo';
+import { useGridFillHandle } from './useGridFillHandle';
+
+/** The `DataGrid` props the range editing hooks read. */
+export type GridRangeEditingProps<R extends GridRowModel> = Pick<DataGridProps<R>,
+    'disableClipboardPaste' | 'disableRangeClear' | 'onClipboardPaste' | 'onBeforeClipboardPaste' |
+    'undoRedo' | 'onHistoryChange' | 'disableFillHandle' | 'onFill'>;
+
+export interface UseGridRangeEditingParams<R extends GridRowModel> {
+    props: GridRangeEditingProps<R>;
+    apiRef: MutableRefObject<GridApi>;
+    containerRef: RefObject<HTMLDivElement | null>;
+    viewportRef: RefObject<HTMLDivElement | null>;
+    selection: UseGridCellSelectionReturn;
+    model: GridCellSelectionModel;
+    getPendingModel: () => GridCellSelectionModel | null;
+    focusedCell: FocusedCell | null;
+    setFocusedCell: React.Dispatch<React.SetStateAction<FocusedCell | null>>;
+    allRenderableRows: R[];
+    getRowId: (row: R) => GridRowId;
+    navigationColumns: GridColDef<R>[];
+    columnIndexMap: Map<string, number>;
+    isCellEditable?: (params: GridCellParams<R>) => boolean;
+    rowMetaMap: Map<GridRowId, GridRowMeta>;
+    getSpanOrigin?: (rowId: GridRowId, field: string) => { rowId: GridRowId; field: string } | null;
+    isEditing: boolean;
+    batchEdit: UseGridBatchEditReturn<R>;
+    channel: GridEditCommitChannel;
+    layout: LayoutResult<R>;
+    rowHeight: number;
+    pinnedTopRowCount: number;
+}
+
+/**
+ * Steps 36a–36d of `DataGrid` (docs/architecture/datagrid-orchestration.md), in their call order: the cell
+ * selection API (anchor and focus kept together), clipboard paste and range clear, undo/redo, and the fill
+ * handle. Returns the fill handle (its position goes to the row renderers).
+ */
+export function useGridRangeEditing<R extends GridRowModel>(params: UseGridRangeEditingParams<R>) {
+    const {
+        props, apiRef, containerRef, viewportRef, selection, model, getPendingModel, focusedCell, setFocusedCell,
+        allRenderableRows, getRowId, navigationColumns, columnIndexMap, isCellEditable, rowMetaMap, getSpanOrigin,
+        isEditing, batchEdit, channel, layout, rowHeight, pinnedTopRowCount,
+    } = params;
+    const {
+        disableClipboardPaste = false,
+        disableRangeClear = false,
+        onClipboardPaste,
+        onBeforeClipboardPaste,
+        undoRedo = false,
+        disableFillHandle = false,
+        onFill,
+        onHistoryChange,
+    } = props;
+
+    // Keeps the range anchor and the focused cell together; installs the cell selection API.
+    useGridCellSelectionApi({
+        apiRef,
+        selection,
+        model,
+        getPendingModel,
+        focusedCell,
+        setFocusedCell,
+        containerRef,
+    });
+
+    // Ctrl/Cmd+V and Delete on a range (cellSelection); apiRef.pasteText.
+    useGridClipboardPaste<R>({
+        apiRef, containerRef, viewportRef,
+        selection,
+        disableClipboardPaste, disableRangeClear,
+        focusedCell,
+        allRenderableRows,
+        getRowId,
+        navigationColumns,
+        isCellEditable,
+        rowMetaMap,
+        getSpanOrigin,
+        isEditing,
+        batchEdit,
+        onClipboardPaste,
+        onBeforeClipboardPaste,
+    });
+
+    // Undo / redo (undoRedo): history of committed edits, keys and apiRef methods.
+    useGridUndoRedo<R>({
+        apiRef,
+        enabled: Boolean(undoRedo),
+        limit: (typeof undoRedo === 'object' && undoRedo.limit) || UNDO_HISTORY_LIMIT,
+        onHistoryChange,
+        channel,
+        batchEdit,
+        isEditing,
+        containerRef, viewportRef,
+        selection,
+        setFocusedCell,
+        allRenderableRows,
+        getRowId,
+        navigationColumns,
+        layout,
+        rowHeight,
+        pinnedTopRowCount,
+    });
+
+    // Fill handle (cellSelection): drag the range's corner, Ctrl/Cmd+D and Ctrl/Cmd+R.
+    return useGridFillHandle<R>({
+        containerRef, viewportRef,
+        selection,
+        disableFillHandle,
+        isEditing,
+        allRenderableRows,
+        getRowId,
+        navigationColumns,
+        columnIndexMap,
+        isCellEditable,
+        rowMetaMap,
+        getSpanOrigin,
+        batchEdit,
+        onFill,
+    });
+}

package/lib/hooks/core/useGridRenderWindow.ts

@@ -0,0 +1,66 @@
+import type { GridColDef, GridRowId, GridRowModel } from '../../types';
+import type { GridAriaRowLayout } from '../../utils/aria';
+import type { GridSpanningResult } from '../features/useGridSpanning';
+import { useGridSpanRowWindow, useGridSpanColumnWindow } from '../features/useGridSpanRenderWindow';
+import { useGridAriaRows, type UseGridAriaRowsParams } from './useGridAriaRows';
+import { useGridVisibleRows, type GridVisibleRow } from './useGridVisibleRows';
+import type { GridVirtualizationResult } from './useGridVirtualization';
+import type { LayoutResult } from './useLayout';
+
+export interface UseGridRenderWindowParams<R extends GridRowModel> {
+    aria: UseGridAriaRowsParams;
+    spanning: GridSpanningResult;
+    virtualization: GridVirtualizationResult<R>;
+    layout: LayoutResult<R>;
+    pinnedTopRows: R[];
+    pinnedBottomRows: R[];
+    paginatedUnpinnedRows: R[];
+    sortedUnpinnedRows: R[];
+    pagination: boolean;
+    getRowId: (row: R) => GridRowId;
+}
+
+export interface UseGridRenderWindowResult<R extends GridRowModel> {
+    ariaRows: GridAriaRowLayout;
+    spanRowWindow: ReturnType<typeof useGridSpanRowWindow>;
+    visibleRows: GridVisibleRow<R>[];
+    renderColumns: GridColDef<R>[];
+}
+
+/**
+ * Steps 38–41 of `DataGrid` (docs/architecture/datagrid-orchestration.md), in their call order: the
+ * `aria-rowcount` / `aria-rowindex` bases, the render window widened to whole row spans, the rows to
+ * render (pinned + virtual centre) and the columns to render, widened to whole column spans.
+ */
+export function useGridRenderWindow<R extends GridRowModel>(params: UseGridRenderWindowParams<R>): UseGridRenderWindowResult<R> {
+    const {
+        aria, spanning, virtualization, layout, pinnedTopRows, pinnedBottomRows, paginatedUnpinnedRows, sortedUnpinnedRows,
+        pagination, getRowId,
+    } = params;
+
+    const ariaRows = useGridAriaRows(aria);
+
+    const spanRowWindow = useGridSpanRowWindow({
+        spanning,
+        renderContext: virtualization.renderContext,
+        offsetTop: virtualization.offsetTop,
+        cumulativeHeights: layout.cumulativeHeights,
+    });
+
+    const visibleRows = useGridVisibleRows<R>({
+        renderContext: spanRowWindow.renderContext,
+        pinnedTopRows, pinnedBottomRows, paginatedUnpinnedRows, sortedUnpinnedRows, pagination,
+        getRowId,
+    });
+
+    const renderColumns = useGridSpanColumnWindow<R>({
+        spanning,
+        firstColumnIndex: virtualization.renderContext.firstColumnIndex,
+        lastColumnIndex: virtualization.renderContext.lastColumnIndex,
+        virtualColumns: virtualization.virtualColumns,
+        layout,
+        rows: visibleRows,
+    });
+
+    return { ariaRows, spanRowWindow, visibleRows, renderColumns };
+}

package/lib/hooks/core/useGridScrollViewport.ts

@@ -0,0 +1,42 @@
+import type { MutableRefObject, RefObject } from 'react';
+import type { GridRowModel } from '../../types';
+import { useGridViewport, type UseGridViewportParams } from './useGridViewport';
+import { useGridMaxContentHeight } from './useGridMaxContentHeight';
+import { useGridVirtualization, type UseGridVirtualizationParams } from './useGridVirtualization';
+import type { LayoutResult } from './useLayout';
+
+export interface UseGridScrollViewportParams<R extends GridRowModel> {
+    viewport: Omit<UseGridViewportParams, 'viewportRef' | 'rowCount'>;
+    viewportRef: MutableRefObject<HTMLDivElement | null>;
+    containerRef: RefObject<HTMLDivElement | null>;
+    layout: LayoutResult<R>;
+    viewportWidth: number;
+    viewportHeight: number;
+    /** The virtualization inputs that do not come from the viewport. */
+    virtualization: Pick<UseGridVirtualizationParams<R>,
+        'autoHeight' | 'rowReordering' | 'hasDetailPanel' | 'checkboxSelection' | 'pinCheckboxColumn' | 'pinExpandColumn'>;
+}
+
+/**
+ * Steps 32–33 of `DataGrid` (docs/architecture/datagrid-orchestration.md), in their call order: scroll sync
+ * and viewport measurement, the tallest element this browser lays out (32a), and the render window.
+ */
+export function useGridScrollViewport<R extends GridRowModel>(params: UseGridScrollViewportParams<R>) {
+    const { viewport, viewportRef, containerRef, layout, viewportWidth, viewportHeight, virtualization: options } = params;
+
+    const { scrollTop, scrollLeft, overscanRows, handleScroll, setViewportElement } = useGridViewport({
+        ...viewport, rowCount: layout.unpinnedRowsLength, viewportRef,
+    });
+
+    const maxContentHeight = useGridMaxContentHeight(containerRef);
+    const virtualization = useGridVirtualization({
+        layout, scrollTop, scrollLeft,
+        viewportWidth,
+        viewportHeight,
+        ...options,
+        overscanRows,
+        maxContentHeight: maxContentHeight ?? Infinity,
+    });
+
+    return { handleScroll, setViewportElement, maxContentHeight, virtualization };
+}

package/lib/hooks/core/useGridSelectionAndStateApi.ts

@@ -0,0 +1,61 @@
+import type { GridRowModel } from '../../types';
+import { useGridRowInteractions, type UseGridRowInteractionsParams, type UseGridRowInteractionsResult } from './useGridRowInteractions';
+import { useGridApiMethods, type UseGridApiMethodsParams } from './useGridApiMethods';
+import type { UseGridControlledStateReturn } from './useGridControlledState';
+
+/** The state API inputs that do not come from `useGridControlledState`. */
+export type GridStateApiParams = Pick<UseGridApiMethodsParams,
+    'apiRef' | 'multiSort' | 'selectedRowIds' | 'disableMultipleRowSelection' | 'isSyntheticRowId' | 'getVisibleRows' |
+    'getAllFilteredRows' | 'visibleColumns'>;
+
+export interface UseGridSelectionAndStateApiParams<R extends GridRowModel> {
+    controlledState: UseGridControlledStateReturn;
+    interactions: Omit<UseGridRowInteractionsParams<R>, 'selectedRowIds' | 'onSelectionModelChange' | 'disableMultipleRowSelection'>;
+    api: GridStateApiParams;
+}
+
+/**
+ * Steps 23–24 of `DataGrid` (docs/architecture/datagrid-orchestration.md), in their call order: row
+ * selection and the row click / checkbox handlers, then the state API methods (sort, filter, pagination,
+ * selection, row grouping, aggregation, visibility and pivot setters, `getGridAiState`) installed on `apiRef`.
+ */
+export function useGridSelectionAndStateApi<R extends GridRowModel>(
+    params: UseGridSelectionAndStateApiParams<R>
+): UseGridRowInteractionsResult<R> {
+    const { controlledState, interactions, api } = params;
+    const {
+        sortModel, handleSortModelChange, filterModel, handleFilterModelChange, effectivePaginationModel,
+        handlePaginationModelChange, handleRowSelectionModelChange, rowGroupingModel, handleRowGroupingModelChange,
+        aggregationModel, handleAggregationModelChange, columnVisibilityModel, handleColumnVisibilityModelChange,
+        currentPivotModel, handlePivotModelChange,
+    } = controlledState;
+
+    const result = useGridRowInteractions<R>({
+        ...interactions,
+        selectedRowIds: api.selectedRowIds,
+        onSelectionModelChange: handleRowSelectionModelChange,
+        disableMultipleRowSelection: api.disableMultipleRowSelection,
+    });
+
+    useGridApiMethods({
+        ...api,
+        onSortModelChange: handleSortModelChange,
+        sortModel,
+        filterModel,
+        onFilterModelChange: handleFilterModelChange,
+        paginationModel: effectivePaginationModel,
+        onPaginationModelChange: handlePaginationModelChange,
+        getPendingRowSelectionModel: controlledState.getPendingRowSelectionModel,
+        onRowSelectionModelChange: handleRowSelectionModelChange,
+        rowGroupingModel,
+        onRowGroupingModelChange: handleRowGroupingModelChange,
+        aggregationModel,
+        onAggregationModelChange: handleAggregationModelChange,
+        columnVisibilityModel,
+        onColumnVisibilityModelChange: handleColumnVisibilityModelChange,
+        pivotModel: currentPivotModel,
+        onPivotModelChange: handlePivotModelChange,
+    });
+
+    return result;
+}

package/lib/hooks/core/useGridToolbarStack.ts

@@ -0,0 +1,49 @@
+import type { MutableRefObject, RefObject } from 'react';
+import type { GridApi, GridLocaleText, GridRowModel } from '../../types';
+import { useGridColumnsPanel } from './useGridColumnsPanel';
+import { useGridStylesheetWarning } from './useGridDevWarnings';
+import { useGridAiAssistant, type UseGridAiAssistantParams } from '../features/useGridAiAssistant';
+import { useGridToolbarProps, type UseGridToolbarPropsParams } from './useGridToolbarProps';
+
+/** What `useGridToolbarProps` needs besides the columns panel and the AI assistant built here. */
+export type GridToolbarStackToolbarParams<R extends GridRowModel> = Omit<UseGridToolbarPropsParams<R>,
+    'forceColumnsOpen' | 'onColumnsPanelClose' | 'aiAssistantEnabled' | 'aiAssistantOpen' | 'onAiAssistantToggle' |
+    'aiAssistantLabel' | 'forceFiltersOpen' | 'onFiltersPanelClose' | 'apiRef'>;
+
+export interface UseGridToolbarStackParams<R extends GridRowModel> {
+    apiRef: MutableRefObject<GridApi>;
+    containerRef: RefObject<HTMLDivElement | null>;
+    aiAssistant: Omit<UseGridAiAssistantParams, 'apiRef'>;
+    toolbar: GridToolbarStackToolbarParams<R>;
+    localeText: GridLocaleText | undefined;
+}
+
+/**
+ * Steps 44–46 of `DataGrid` (docs/architecture/datagrid-orchestration.md), in their call order: the columns
+ * panel (toolbar or standalone), the missing-stylesheet warning, the `aiAssistant` panel, and the props for
+ * `slots.toolbar` (which gets its Ask AI button from the assistant).
+ */
+export function useGridToolbarStack<R extends GridRowModel>(params: UseGridToolbarStackParams<R>) {
+    const { apiRef, containerRef, aiAssistant, toolbar, localeText } = params;
+
+    const columnsPanel = useGridColumnsPanel();
+    useGridStylesheetWarning(containerRef);
+
+    // The aiAssistant prompt panel (v3.5): applies validated replies through apiRef; apiRef.openAiAssistant.
+    const aiAssistantPanel = useGridAiAssistant({ apiRef, ...aiAssistant });
+
+    const toolbarProps = useGridToolbarProps<R>({
+        ...toolbar,
+        apiRef,
+        forceColumnsOpen: columnsPanel.toolbarPanelRequested,
+        onColumnsPanelClose: columnsPanel.closeToolbarPanel,
+        aiAssistantEnabled: aiAssistantPanel.enabled,
+        aiAssistantOpen: aiAssistantPanel.open,
+        onAiAssistantToggle: aiAssistantPanel.togglePanel,
+        aiAssistantLabel: localeText?.aiAssistantButton,
+        forceFiltersOpen: columnsPanel.toolbarFiltersRequested,
+        onFiltersPanelClose: columnsPanel.closeToolbarFiltersPanel,
+    });
+
+    return { columnsPanel, aiAssistantPanel, toolbarProps };
+}

package/lib/hooks/core/useGridViewApis.ts

@@ -0,0 +1,46 @@
+import type { MutableRefObject, RefObject } from 'react';
+import type { GridApi, GridColDef, GridRowId, GridRowModel } from '../../types';
+import { useGridClipboardApi } from './useGridClipboardApi';
+import { useGridScrollToIndexesApi } from './useGridScrollToIndexesApi';
+import { useGridColumnAutosize } from './useGridColumnAutosize';
+import type { LayoutResult } from './useLayout';
+
+export interface UseGridViewApisParams<R extends GridRowModel> {
+    apiRef: MutableRefObject<GridApi>;
+    containerRef: RefObject<HTMLDivElement | null>;
+    viewportRef: RefObject<HTMLDivElement | null>;
+    /** Rendered data columns with their layout-resolved widths, in render order (what Ctrl/Cmd+C copies). */
+    copyColumns: GridColDef[];
+    getRowId: (row: GridRowModel) => GridRowId;
+    disableClipboardCopy: boolean;
+    /** The cell range's copy text while `cellSelection` is on. */
+    getCellRangeCopyText: (() => string | null) | undefined;
+    layout: LayoutResult<R>;
+    rowHeight: number;
+    /** Every column in display order (what auto-size measures). */
+    orderedColumns: GridColDef<R>[];
+    onColumnResize: (field: string, width: number) => void;
+}
+
+/**
+ * Steps 30–31a of `DataGrid` (docs/architecture/datagrid-orchestration.md), in their call order: the
+ * `apiRef` installers that need the laid-out view — copy, `scrollToIndexes` and column auto-size.
+ * Returns the resize handle's auto-size handler.
+ */
+export function useGridViewApis<R extends GridRowModel>(params: UseGridViewApisParams<R>): (field: string) => void {
+    const {
+        apiRef, containerRef, viewportRef, copyColumns, getRowId, disableClipboardCopy, getCellRangeCopyText, layout, rowHeight,
+        orderedColumns, onColumnResize,
+    } = params;
+
+    useGridClipboardApi({
+        apiRef,
+        columns: copyColumns,
+        getRowId,
+        containerRef,
+        disableKeyboardShortcut: disableClipboardCopy,
+        getCellRangeCopyText,
+    });
+    useGridScrollToIndexesApi<R>({ apiRef, viewportRef, layout, rowHeight });
+    return useGridColumnAutosize<R>({ apiRef, containerRef, columns: orderedColumns, onColumnResize });
+}

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) {