@opencorestack/opengridx 3.5.1 → 3.7.0

package/lib/components/SkeletonRow/SkeletonRow.tsx

@@ -72,8 +72,8 @@ export const SkeletonRow: React.FC<SkeletonRowProps> = ({
                             width,
                             minWidth: col.minWidth,
                             maxWidth: col.maxWidth,
-                            left: col.left,
-                            right: col.right,
+                            insetInlineStart: col.left,
+                            insetInlineEnd: col.right,
                             position: col.isSpacer ? 'relative' : (col.pinned ? 'sticky' : 'relative'),
                             zIndex: col.zIndex
                         }}

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/GridToolbar.tsx

@@ -4,6 +4,7 @@ import type { GridColDef, GridAggregationModel, GridPivotModel, GridFilterModel
 import { AGGREGATION_FUNCTIONS } from '../../utils/aggregation';
 import type { BuiltInAggFn } from '../../utils/aggregation';
 import { getViewportWidth } from '../../utils/viewport';
+import { getPanelPosition, type GridPanelPosition } from '../../utils/direction';
 import { GridToolbarHostContext } from '../../hooks/core/gridToolbarHostContext';
 import { PivotPanel, PivotIcon } from './PivotPanel';
 import { GlobalSearch } from './GlobalSearch';
@@ -149,7 +150,7 @@ function FilterIcon() {
     );
 }
 
-interface PanelPosition { top: number; right: number; }
+type PanelPosition = GridPanelPosition;
 
 function AggregationPanel({
     anchorRef,
@@ -176,14 +177,7 @@ function AggregationPanel({
         setPortalContainer(anchorRef.current?.closest('.ogx-theme-provider') ?? document.body);
     }, [anchorRef]);
 
-    const computePos = useCallback((): PanelPosition => {
-        if (!anchorRef.current) return { top: 0, right: 0 };
-        const rect = anchorRef.current.getBoundingClientRect();
-        return {
-            top: rect.bottom + 6,
-            right: getViewportWidth() - rect.right,
-        };
-    }, [anchorRef]);
+    const computePos = useCallback((): PanelPosition => getPanelPosition(anchorRef.current, getViewportWidth()), [anchorRef]);
 
     useEffect(() => {
         setPos(computePos());
@@ -221,7 +215,7 @@ function AggregationPanel({
             className="ogx-toolbar__panel"
             role="dialog"
             aria-label="Summaries configuration"
-            style={{ top: pos.top, right: pos.right, width: 400, maxWidth: 'calc(100vw - 24px)' }}
+            style={{ top: pos.top, right: pos.right, left: pos.left, width: 400, maxWidth: 'calc(100vw - 24px)' }}
         >
             <div className="ogx-toolbar__panel-header">
                 <span className="ogx-toolbar__panel-title">
@@ -309,14 +303,7 @@ function ColumnsPanelWrapper({
         setPortalContainer(anchorRef.current?.closest('.ogx-theme-provider') ?? document.body);
     }, [anchorRef]);
 
-    const computePos = useCallback((): PanelPosition => {
-        if (!anchorRef.current) return { top: 0, right: 0 };
-        const rect = anchorRef.current.getBoundingClientRect();
-        return {
-            top: rect.bottom + 6,
-            right: getViewportWidth() - rect.right,
-        };
-    }, [anchorRef]);
+    const computePos = useCallback((): PanelPosition => getPanelPosition(anchorRef.current, getViewportWidth()), [anchorRef]);
 
     useEffect(() => {
         setPos(computePos());
@@ -354,7 +341,7 @@ function ColumnsPanelWrapper({
             className="ogx-toolbar__panel"
             role="dialog"
             aria-label="Column visibility"
-            style={{ top: pos.top, right: pos.right, width: 280, padding: 0 }}
+            style={{ top: pos.top, right: pos.right, left: pos.left, width: 280, padding: 0 }}
         >
             <ColumnVisibilityPanel
                 columns={columns}
@@ -398,14 +385,7 @@ function FilterPanelWrapper({
         setPortalContainer(anchorRef.current?.closest('.ogx-theme-provider') ?? document.body);
     }, [anchorRef]);
 
-    const computePos = useCallback((): PanelPosition => {
-        if (!anchorRef.current) return { top: 0, right: 0 };
-        const rect = anchorRef.current.getBoundingClientRect();
-        return {
-            top: rect.bottom + 6,
-            right: getViewportWidth() - rect.right,
-        };
-    }, [anchorRef]);
+    const computePos = useCallback((): PanelPosition => getPanelPosition(anchorRef.current, getViewportWidth()), [anchorRef]);
 
     useEffect(() => {
         setPos(computePos());
@@ -442,7 +422,7 @@ function FilterPanelWrapper({
             className="ogx-toolbar__panel ogx-toolbar__panel--filter"
             role="dialog"
             aria-label="Advanced filters"
-            style={{ top: pos.top, right: pos.right, width: 540, maxWidth: 'calc(100vw - 24px)' }}
+            style={{ top: pos.top, right: pos.right, left: pos.left, width: 540, maxWidth: 'calc(100vw - 24px)' }}
         >
             <div className="ogx-toolbar__panel-header">
                 <span className="ogx-toolbar__panel-title">

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/components/Toolbar/PivotPanel.tsx

@@ -3,6 +3,7 @@ import ReactDOM from 'react-dom';
 import type { GridColDef } from '../../types';
 import type { GridPivotModel, GridPivotAggFn, GridPivotValueField } from '../../types';
 import { getViewportWidth } from '../../utils/viewport';
+import { getPanelPosition, type GridPanelPosition } from '../../utils/direction';
 
 const AGG_FNS: GridPivotAggFn[] = ['sum', 'avg', 'count', 'min', 'max'];
 
@@ -31,18 +32,14 @@ export interface PivotPanelProps {
 
 export function PivotPanel({ anchorRef, columns, model, onChange, onClose }: PivotPanelProps) {
     const panelRef = useRef<HTMLDivElement>(null);
-    const [pos, setPos] = useState({ top: 0, right: 0 });
+    const [pos, setPos] = useState<GridPanelPosition>({ top: 0, right: 0 });
     const [portalContainer, setPortalContainer] = useState<Element | null>(null);
 
     useLayoutEffect(() => {
         setPortalContainer(anchorRef.current?.closest('.ogx-theme-provider') ?? document.body);
     }, [anchorRef]);
 
-    const computePos = useCallback(() => {
-        if (!anchorRef.current) return { top: 0, right: 0 };
-        const rect = anchorRef.current.getBoundingClientRect();
-        return { top: rect.bottom + 6, right: getViewportWidth() - rect.right };
-    }, [anchorRef]);
+    const computePos = useCallback(() => getPanelPosition(anchorRef.current, getViewportWidth()), [anchorRef]);
 
     useEffect(() => {
         setPos(computePos());
@@ -132,7 +129,7 @@ export function PivotPanel({ anchorRef, columns, model, onChange, onClose }: Piv
             className="ogx-pivot-panel"
             role="dialog"
             aria-label="Pivot configuration"
-            style={{ top: pos.top, right: pos.right }}
+            style={{ top: pos.top, right: pos.right, left: pos.left }}
         >
             { }
             <div className="ogx-pivot-panel__header">

package/lib/components/ui/ExpandIcon.css

@@ -27,3 +27,16 @@
   display: block;
   transition: transform 0.2s ease;
 }
+/* The chevron points towards the inline end (right, or left in a right-to-left grid) and down when expanded. */
+.ogx-expand-icon__chevron {
+  transform: rotate(0deg);
+}
+.ogx-expand-icon--expanded .ogx-expand-icon__chevron {
+  transform: rotate(90deg);
+}
+.ogx-expand-icon__chevron:dir(rtl) {
+  transform: scaleX(-1) rotate(0deg);
+}
+.ogx-expand-icon--expanded .ogx-expand-icon__chevron:dir(rtl) {
+  transform: scaleX(-1) rotate(90deg);
+}

package/lib/components/ui/ExpandIcon.tsx

@@ -59,10 +59,8 @@ export function ExpandIcon({ isExpanded, onClick, variant = 'chevron', tabIndex
                     viewBox="0 0 16 16"
                     fill="none"
                     xmlns="http://www.w3.org/2000/svg"
-                    style={{
-                        transform: isExpanded ? 'rotate(90deg)' : 'rotate(0deg)',
-                        transition: 'transform 0.2s ease'
-                    }}
+                    className="ogx-expand-icon__chevron"
+                    aria-hidden="true"
                 >
                     <path
                         d="M6 4L10 8L6 12"

package/lib/hooks/core/useGridCellSelection.ts

@@ -1,6 +1,7 @@
 import { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react';
 import type { RefObject } from 'react';
 import { scrollColumnIntoView, scrollRowIntoView } from '../../utils/scroll';
+import { isRtl } from '../../utils/direction';
 import { isSyntheticRowId } from '../../utils/syntheticRows';
 import { isTextEntryElement } from '../../utils/focus';
 import type { FocusedCell } from '../../utils/focus';
@@ -132,6 +133,11 @@ interface DragState {
     y: number;
     frame: number;
     moved: boolean;
+    /**
+     * Whether the viewport lays out right to left, read once per drag: `getComputedStyle` every frame
+     * forces a style recalculation, which slowed WebKit's auto-scroll enough to delay the release.
+     */
+    rtl?: boolean;
     /** Ends the drag; `cancelled` unless the button was released normally (tracked drags: Escape cancels). */
     stop: (cancelled?: boolean, altKey?: boolean) => void;
     /** A tracked drag (fill handle): told the cell under the pointer each frame instead of moving the range. */
@@ -448,11 +454,17 @@ export function useGridCellSelection<R extends GridRowModel>(params: UseGridCell
         const bodyTop = stickyTop ? stickyTop.getBoundingClientRect().bottom : box.top;
         const bodyBottom = Math.min(box.top + height, stickyBottom ? stickyBottom.getBoundingClientRect().top : box.top + height);
         const headerBottom = headerWrap ? headerWrap.getBoundingClientRect().bottom : bodyTop;
-        const bodyLeft = box.left + layout.pinnedSystemColumnsWidth + layout.leftWidth;
-        const bodyRight = box.left + width - layout.rightWidth;
+        // Left-pinned columns (and pinned system columns) sit at the inline start: on the right in a
+        // right-to-left grid, whose vertical scrollbar is on the left.
+        if (drag.rtl === undefined) drag.rtl = isRtl(viewport);
+        const rtl = drag.rtl;
+        const contentLeft = rtl ? box.right - width : box.left;
+        const startPinnedWidth = layout.pinnedSystemColumnsWidth + layout.leftWidth;
+        const bodyLeft = contentLeft + (rtl ? layout.rightWidth : startPinnedWidth);
+        const bodyRight = contentLeft + width - (rtl ? startPinnedWidth : layout.rightWidth);
 
         // The cell under the pointer; outside the viewport (or over the header) the nearest body cell.
-        const x = clamp(drag.x, box.left + 1, box.left + width - 2);
+        const x = clamp(drag.x, contentLeft + 1, contentLeft + width - 2);
         let y = drag.y;
         if (y < box.top || y > box.top + height || y < headerBottom) y = clamp(y, bodyTop + 1, Math.max(bodyTop + 1, bodyBottom - 2));
         // During fast auto-scroll the rows under the pointer may not be rendered yet (virtualization
@@ -476,7 +488,7 @@ export function useGridCellSelection<R extends GridRowModel>(params: UseGridCell
         if (drag.onTrack) drag.onTrack(drag.head, drag.x, drag.y);
 
         if (!allowScroll) return;
-        const outside = drag.y < bodyTop || drag.y > bodyBottom || drag.x < box.left || drag.x > box.left + width;
+        const outside = drag.y < bodyTop || drag.y > bodyBottom || drag.x < contentLeft || drag.x > contentLeft + width;
         if (!drag.moved && !outside) return;
         let dy = 0;
         let dx = 0;
@@ -485,7 +497,10 @@ export function useGridCellSelection<R extends GridRowModel>(params: UseGridCell
         if (drag.x < bodyLeft + AUTO_SCROLL_EDGE) dx = -autoScrollStep(bodyLeft + AUTO_SCROLL_EDGE - drag.x);
         else if (drag.x > bodyRight - AUTO_SCROLL_EDGE) dx = autoScrollStep(drag.x - (bodyRight - AUTO_SCROLL_EDGE));
         const canScrollY = (dy < 0 && viewport.scrollTop > 0) || (dy > 0 && viewport.scrollTop + height < viewport.scrollHeight - 1);
-        const canScrollX = (dx < 0 && viewport.scrollLeft > 0) || (dx > 0 && viewport.scrollLeft + width < viewport.scrollWidth - 1);
+        // scrollLeft runs from 0 to the maximum, or from minus the maximum to 0 right to left.
+        const maxScroll = viewport.scrollWidth - width;
+        const minLeft = rtl ? -maxScroll : 0;
+        const canScrollX = (dx < 0 && viewport.scrollLeft > minLeft) || (dx > 0 && viewport.scrollLeft < minLeft + maxScroll - 1);
         if (!canScrollY && !canScrollX) return;
         if (canScrollY) viewport.scrollTop += dy;
         if (canScrollX) viewport.scrollLeft += dx;

package/lib/hooks/core/useGridColumns.tsx

@@ -282,8 +282,8 @@ export function useGridColumns<R extends GridRowModel>(
                         const content = custom.useDefault ? defaultHierarchyContent(cellParams, isRowGrouping, isTreeData) : custom.content;
 
                         return (
-                            <div style={{ display: 'flex', alignItems: 'center', paddingLeft: depth * 24, width: '100%', height: '100%' }}>
-                                <div style={{ marginRight: 4, width: 24, height: 24, display: 'flex', alignItems: 'center', justifyContent: 'center', cursor: hasChildren ? 'pointer' : 'default', flexShrink: 0 }}>
+                            <div style={{ display: 'flex', alignItems: 'center', paddingInlineStart: depth * 24, width: '100%', height: '100%' }}>
+                                <div style={{ marginInlineEnd: 4, width: 24, height: 24, display: 'flex', alignItems: 'center', justifyContent: 'center', cursor: hasChildren ? 'pointer' : 'default', flexShrink: 0 }}>
                                     {hasChildren ? (
                                         <div
                                             onClick={(e) => { e.stopPropagation(); e.preventDefault(); activeHierarchyHandlers?.toggleExpansion(getRowId(cellParams.row)); }}

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/useGridKeyboardNavigation.ts

@@ -1,4 +1,5 @@
 import { useState, useCallback, useMemo, useRef, useLayoutEffect } from 'react';
+import { getScrollStart, isRtl, logicalArrowKey, setScrollStart } from '../../utils/direction';
 import { scrollRowIntoView } from '../../utils/scroll';
 import { resolveCellEditable } from '../../utils/editing';
 import { getCellValue } from '../../utils/values';
@@ -256,12 +257,13 @@ export function useGridKeyboardNavigation<R extends GridRowModel>(
             const isPinned = field === REORDER_FIELD
                 || (field === EXPAND_FIELD && pinExpandColumn)
                 || (field === CHECKBOX_FIELD && pinCheckboxColumn);
-            if (!isPinned && el.scrollLeft > 0) el.scrollLeft = 0;
+            if (!isPinned && getScrollStart(el) > 0) setScrollStart(el, 0);
             return;
         }
         if (!columnMetrics) return;
 
-        const { clientWidth, scrollLeft } = el;
+        const { clientWidth } = el;
+        const scrollLeft = getScrollStart(el);
         const { leftPinnedWidth, rightPinnedWidth, unpinnedAccWidths, unpinnedCols, totalSpecialsWidth, pinnedSpecialsWidth } = columnMetrics;
         const unpinnedIndex = unpinnedCols.findIndex(c => c.field === field);
         if (unpinnedIndex === -1) return;
@@ -277,7 +279,7 @@ export function useGridKeyboardNavigation<R extends GridRowModel>(
         } else if (colRight > visibleEnd) {
             newScrollLeft = colRight - clientWidth + rightPinnedWidth;
         }
-        if (newScrollLeft !== scrollLeft) el.scrollLeft = newScrollLeft;
+        if (newScrollLeft !== scrollLeft) setScrollStart(el, newScrollLeft);
     }, [viewportRef, virtualization, pinnedTopRowCount, rowHeight, pinCheckboxColumn, pinExpandColumn]);
 
     // Keep DOM focus on the element of the focused cell. This covers keyboard moves, a cell that
@@ -365,7 +367,8 @@ export function useGridKeyboardNavigation<R extends GridRowModel>(
         // While an IME is composing, Enter / Escape / arrows confirm or navigate candidates.
         if (event.nativeEvent?.isComposing || event.keyCode === 229) return;
 
-        const { key } = event;
+        // In a right-to-left grid ArrowLeft moves to the column on the left: the next column.
+        const key = logicalArrowKey(event.key, isRtl(viewport));
         const isSpace = key === ' ' || key === 'Spacebar';
         const isEditing = Boolean(editingHandlers.editingCell);
 

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 };
+}