@opencorestack/opengridx 3.5.1 → 3.6.0

package/lib/components/Pagination/Pagination.tsx

@@ -115,7 +115,7 @@ export function Pagination(props: PaginationProps) {
                         aria-label="Go to first page"
                         title="First page"
                     >
-                        <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
+                        <svg className="ogx-pagination__icon" width="20" height="20" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
                             <path d="M18.41 16.59L13.82 12l4.59-4.59L17 6l-6 6 6 6zM6 6h2v12H6z" />
                         </svg>
                     </Button>
@@ -129,7 +129,7 @@ export function Pagination(props: PaginationProps) {
                     aria-label="Go to previous page"
                     title="Previous page"
                 >
-                    <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
+                    <svg className="ogx-pagination__icon" width="20" height="20" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
                         <path d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z" />
                     </svg>
                 </Button>
@@ -146,7 +146,7 @@ export function Pagination(props: PaginationProps) {
                     aria-label="Go to next page"
                     title="Next page"
                 >
-                    <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
+                    <svg className="ogx-pagination__icon" width="20" height="20" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
                         <path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z" />
                     </svg>
                 </Button>
@@ -160,7 +160,7 @@ export function Pagination(props: PaginationProps) {
                         aria-label="Go to last page"
                         title="Last page"
                     >
-                        <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
+                        <svg className="ogx-pagination__icon" width="20" height="20" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
                             <path d="M5.59 7.41L10.18 12l-4.59 4.59L7 18l6-6-6-6zM16 6h2v12h-2z" />
                         </svg>
                     </Button>

package/lib/components/Row/Row.tsx

@@ -300,7 +300,7 @@ function RowImpl<R extends GridRowModel = GridRowModel>(props: RowProps<R>) {
                         tabIndex={-1}
                         style={{
                             position: 'sticky',
-                            left: 0,
+                            insetInlineStart: 0,
                             zIndex: SYSTEM_CELL_Z_INDEX
                         }}
                         draggable={!!onDragStart}
@@ -326,7 +326,7 @@ function RowImpl<R extends GridRowModel = GridRowModel>(props: RowProps<R>) {
                         data-field="__expand_col__"
                         style={{
                             position: pinExpandColumn ? 'sticky' : undefined,
-                            left: pinExpandColumn ? (rowReordering ? 48 : 0) : undefined,
+                            insetInlineStart: pinExpandColumn ? (rowReordering ? 48 : 0) : undefined,
                             zIndex: pinExpandColumn ? SYSTEM_CELL_Z_INDEX : undefined
                         }}
                         tabIndex={-1}
@@ -364,7 +364,7 @@ function RowImpl<R extends GridRowModel = GridRowModel>(props: RowProps<R>) {
                         data-field="__checkbox_col__"
                         style={{
                             position: pinCheckboxColumn ? 'sticky' : undefined,
-                            left: pinCheckboxColumn ? ((rowReordering ? 48 : 0) + (hasDetailPanel && pinExpandColumn ? 48 : 0)) : undefined,
+                            insetInlineStart: pinCheckboxColumn ? ((rowReordering ? 48 : 0) + (hasDetailPanel && pinExpandColumn ? 48 : 0)) : undefined,
                             zIndex: pinCheckboxColumn ? SYSTEM_CELL_Z_INDEX : undefined
                         }}
                         tabIndex={-1}

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

@@ -1,4 +1,5 @@
 import { useRef, useState, useCallback, useEffect } from 'react';
+import { getScrollStart, setScrollStart } from '../../utils/direction';
 import type { GridRowScrollEndParams } from '../../types';
 import { getRowsScrollEndParams } from '../../utils/scroll/scrollEnd';
 
@@ -82,16 +83,18 @@ export function useGridScrollSync(params: UseGridScrollSyncParams): UseGridScrol
     const handleScroll = useCallback((event: React.UIEvent<HTMLDivElement>) => {
         const target = event.currentTarget;
         const now = performance.now();
+        // Counted from the inline start, so the column window is the same in a right-to-left grid.
+        const scrollLeft = getScrollStart(target);
 
         // Velocity: total positional delta / elapsed time (px/ms)
         const deltaPos = Math.abs(target.scrollTop  - prevRef.current.scrollTop)
-                       + Math.abs(target.scrollLeft - prevRef.current.scrollLeft);
+                       + Math.abs(scrollLeft - prevRef.current.scrollLeft);
         const deltaTime = now - prevRef.current.time;
         const velocity = deltaTime > 0 ? deltaPos / deltaTime : 0;
         const movedVertically = target.scrollTop !== prevRef.current.scrollTop;
 
-        prevRef.current = { scrollTop: target.scrollTop, scrollLeft: target.scrollLeft, time: now };
-        pendingRef.current = { scrollTop: target.scrollTop, scrollLeft: target.scrollLeft, velocity };
+        prevRef.current = { scrollTop: target.scrollTop, scrollLeft, time: now };
+        pendingRef.current = { scrollTop: target.scrollTop, scrollLeft, velocity };
 
         if (rafRef.current !== null) cancelAnimationFrame(rafRef.current);
         rafRef.current = requestAnimationFrame(() => {
@@ -120,16 +123,36 @@ export function useGridScrollSync(params: UseGridScrollSyncParams): UseGridScrol
         checkRowsScrollEnd(el);
     }, [rowCount, autoHeight, checkRowsScrollEnd]);
 
+    // Switching `dir` on the grid or an ancestor moves the content to the other side, and browsers
+    // reset (Firefox without a scroll event) or keep the scroll position as they please. Re-read it
+    // so the column window matches what the viewport shows.
+    useEffect(() => {
+        const doc = elementRef.current?.ownerDocument ?? (typeof document === 'undefined' ? null : document);
+        if (!doc || typeof MutationObserver === 'undefined') return;
+        const observer = new MutationObserver(() => {
+            const target = elementRef.current;
+            if (!target) return;
+            const actual = { scrollTop: target.scrollTop, scrollLeft: getScrollStart(target) };
+            const pending = pendingRef.current;
+            if (actual.scrollTop === pending.scrollTop && actual.scrollLeft === pending.scrollLeft) return;
+            pendingRef.current = { ...pending, ...actual };
+            prevRef.current = { ...prevRef.current, ...actual };
+            setScrollState(prev => ({ ...prev, ...actual }));
+        });
+        observer.observe(doc.documentElement, { attributes: true, attributeFilter: ['dir'], subtree: true });
+        return () => observer.disconnect();
+    }, []);
+
     const attachViewport = useCallback((element: HTMLDivElement | null) => {
         elementRef.current = element;
         if (!element) return;
         const { scrollTop, scrollLeft } = pendingRef.current;
         if (scrollTop === 0 && scrollLeft === 0) return;
         element.scrollTop = scrollTop;
-        element.scrollLeft = scrollLeft;
+        setScrollStart(element, scrollLeft);
         // The browser clamps to the new content. If it did, sync the state to what the element
         // shows (no scroll event fires when the position ends up unchanged).
-        const actual = { scrollTop: element.scrollTop, scrollLeft: element.scrollLeft };
+        const actual = { scrollTop: element.scrollTop, scrollLeft: getScrollStart(element) };
         if (actual.scrollTop !== scrollTop || actual.scrollLeft !== scrollLeft) {
             pendingRef.current = { ...pendingRef.current, ...actual };
             prevRef.current = { ...prevRef.current, ...actual };

package/lib/hooks/core/useLayout.ts

@@ -255,12 +255,19 @@ export function useLayout<R extends GridRowModel>(params: UseLayoutParams<R>): L
             return rowHeight + getDetailPanelLayoutHeight(panelHeight, detailPanelHeights?.get(id));
         };
 
-        const rowHeights = unpinnedRows.map((row, index) => heightOf(row, pinnedTopRowsLength + index));
-
-        const cumulativeHeights = rowHeights.reduce((acc, height, index) => {
-            acc.push((acc[index - 1] || 0) + height);
-            return acc;
-        }, [] as number[]);
+        // One pass with preallocated arrays: this runs for every row after each sort or filter. With
+        // no detail panel open every row has the plain height, so row ids are not looked up.
+        const rowCount = unpinnedRows.length;
+        const rowHeights = new Array<number>(rowCount);
+        const cumulativeHeights = new Array<number>(rowCount);
+        const anyPanelOpen = expandedRowIds.size > 0;
+        let runningHeight = 0;
+        for (let index = 0; index < rowCount; index++) {
+            const height = anyPanelOpen ? heightOf(unpinnedRows[index], pinnedTopRowsLength + index) : rowHeight;
+            rowHeights[index] = height;
+            runningHeight = (runningHeight || 0) + height; // as before: a NaN total restarts from 0
+            cumulativeHeights[index] = runningHeight;
+        }
 
         const skeletonCount = (paginationMode === 'infinite' && isLoading && unpinnedRows.length > 0)
             ? Math.min(pageSize, 20)

package/lib/hooks/useRowGrouping.ts

@@ -307,13 +307,15 @@ export function useRowGrouping<R extends GridRowModel>(params: UseRowGroupingPar
     ), [defaultGroupingExpansionDepth]);
 
     const expandedGroupIds = useMemo<Set<GridRowId>>(() => {
+        // Only group nodes have children, so walk the groups rather than every leaf, in tree order.
         const ids = new Set<GridRowId>();
-        treeNodes.forEach((node, id) => {
-            if (!node.children || node.children.length === 0) return;
+        for (const id of groupIds) {
+            const node = treeNodes.get(id);
+            if (!node?.children || node.children.length === 0) continue;
             if (overrides.get(id) ?? isDefaultExpanded(node)) ids.add(id);
-        });
+        }
         return ids;
-    }, [treeNodes, overrides, isDefaultExpanded]);
+    }, [groupIds, treeNodes, overrides, isDefaultExpanded]);
 
     const toggleExpansion = useCallback((id: GridRowId) => {
         setExpansionState(prev => {
@@ -439,11 +441,9 @@ export function useRowGrouping<R extends GridRowModel>(params: UseRowGroupingPar
         treeNodes.forEach((node, id) => {
             const variants = groupRowVariants.get(id);
             if (!variants) {
-                map.set(id, {
-                    hasChildren: false,
-                    treeDepth: node.depth,
-                    isGroupRow: false,
-                });
+                // One object per row (not shared per depth): `params.rowMeta` is public, and a consumer that
+                // writes to it must not change other rows.
+                map.set(id, { hasChildren: false, treeDepth: node.depth, isGroupRow: false });
                 return;
             }
             const groupMeta: GridRowMeta = {

package/lib/types/index.ts

@@ -940,6 +940,36 @@ export interface GridLocaleText {
     cellSelectionAnnouncement?: (cellCount: number, rowCount: number, columnCount: number) => string;
     /** Label of the toolbar button that opens the `aiAssistant` panel. Default: `"Ask AI"` @since v3.5 */
     aiAssistantButton?: string;
+    /** Header filter cell whose column has a filter the row cannot edit. Default: `"Custom filter"` @since v3.6 */
+    headerFilterCustom?: string;
+    /** Tooltip of the "Custom filter" cell. Default: `"Set in the filter panel"` @since v3.6 */
+    headerFilterCustomTooltip?: string;
+    /** `aria-label` of a header filter cell. Receives the column header. Default: `` (h) => `Filter ${h}` `` @since v3.6 */
+    headerFilterCellLabel?: (header: string) => string;
+    /** `aria-label` of the value input or select. Default: `` (h) => `Filter value for ${h}` `` @since v3.6 */
+    headerFilterValueLabel?: (header: string) => string;
+    /**
+     * `aria-label` of the operator button. Receives the header and the operator's label.
+     * Default: `` (h, op) => `Filter operator for ${h}: ${op}` `` @since v3.6
+     */
+    headerFilterOperatorButtonLabel?: (header: string, operatorLabel: string) => string;
+    /** `aria-label` of the operator menu. Default: `` (h) => `Filter operator for ${h}` `` @since v3.6 */
+    headerFilterOperatorMenuLabel?: (header: string) => string;
+    /** `aria-label` of the clear button. Default: `` (h) => `Clear filter for ${h}` `` @since v3.6 */
+    headerFilterClearLabel?: (header: string) => string;
+    /** Tooltip of the clear button. Default: `"Clear"` @since v3.6 */
+    headerFilterClearTooltip?: string;
+    /** Empty choice of the boolean and single-select filters. Default: `"Any"` @since v3.6 */
+    headerFilterAny?: string;
+    /** "true" choice of the boolean filter. Default: `"Yes"` @since v3.6 */
+    headerFilterTrue?: string;
+    /** "false" choice of the boolean filter. Default: `"No"` @since v3.6 */
+    headerFilterFalse?: string;
+    /**
+     * Operator names in the header filter menu, tooltips and no-value cells ("Is empty"). Missing
+     * operators keep their English name. @since v3.6
+     */
+    headerFilterOperators?: Partial<Record<GridFilterOperator, string>>;
 }
 
 /**

package/lib/utils/aggregation/index.ts

@@ -85,11 +85,66 @@ export function computeAggregations<R extends GridRowModel>(
             console.warn(`[${warnPrefix}] Unknown aggregation function: "${fnName}"`);
             continue;
         }
-        result[field] = fn(rows.map((row) => getCellValue(row, field, colDef as GridColDef | undefined)));
+        result[field] = Object.prototype.hasOwnProperty.call(AGGREGATION_FUNCTIONS, fnName)
+            ? aggregateRows(rows, field, colDef as GridColDef | undefined, fnName as BuiltInAggFn)
+            : fn(rows.map((row) => getCellValue(row, field, colDef as GridColDef | undefined)));
     }
     return result;
 }
 
+/**
+ * AGGREGATION_FUNCTIONS[fnName] over the cells of `field`, read row by row instead of through
+ * intermediate value arrays (group rows and the footer aggregate every row). Same additions in the
+ * same order, so the results are identical.
+ */
+function aggregateRows(rows: readonly GridRowModel[], field: string, colDef: GridColDef | undefined, fnName: BuiltInAggFn): unknown {
+    switch (fnName) {
+        case 'sum':
+        case 'avg': {
+            let sum = 0;
+            let count = 0;
+            for (const row of rows) {
+                const n = toNumber(getCellValue(row, field, colDef));
+                if (n === null) continue;
+                sum += n;
+                count++;
+            }
+            if (fnName === 'sum') return sum;
+            return count ? sum / count : null;
+        }
+        case 'count': {
+            let count = 0;
+            for (const row of rows) if (!isEmptyAggregateValue(getCellValue(row, field, colDef))) count++;
+            return count;
+        }
+        case 'min':
+        case 'max': {
+            const isMin = fnName === 'min';
+            let best: number | null = null;
+            let bestValue: unknown = null;
+            for (const row of rows) {
+                const v = getCellValue(row, field, colDef);
+                const n = toNumber(v);
+                if (n === null) continue;
+                if (best === null || (isMin ? n < best : n > best)) {
+                    best = n;
+                    bestValue = v;
+                }
+            }
+            if (best === null) return null;
+            return bestValue instanceof Date ? bestValue : best;
+        }
+        case 'unique': {
+            const seen = new Set<unknown>();
+            for (const row of rows) {
+                const v = getCellValue(row, field, colDef);
+                if (!isEmptyAggregateValue(v)) seen.add(v);
+            }
+            return seen.size;
+        }
+    }
+}
+
 /** Default display string for an aggregate: `—` when missing, locale-grouped numbers, avg to 2 decimals. */
 export function formatAggregationValue(value: unknown, fnName: string): string {
     if (value == null) return '—';

package/lib/utils/direction.ts

@@ -0,0 +1,52 @@
+/** Whether `element` lays out right to left (`dir="rtl"` on it or an ancestor, or `direction: rtl`). */
+export function isRtl(element: Element | null | undefined): boolean {
+    if (!element) return false;
+    const view = element.ownerDocument.defaultView;
+    return view ? view.getComputedStyle(element).direction === 'rtl' : false;
+}
+
+/**
+ * The key as seen in a left-to-right layout: in a right-to-left one ArrowLeft and ArrowRight are
+ * swapped, so ArrowLeft always moves (or resizes, expands) towards the left of the screen.
+ */
+export function logicalArrowKey(key: string, rtl: boolean): string {
+    if (!rtl) return key;
+    if (key === 'ArrowLeft') return 'ArrowRight';
+    if (key === 'ArrowRight') return 'ArrowLeft';
+    return key;
+}
+
+/**
+ * How far `element` is scrolled from its inline start, never negative. In a right-to-left
+ * scroller modern engines report `scrollLeft` from 0 (at the start, on the right) down to
+ * `-(scrollWidth - clientWidth)`; the grid's column maths counts from the start edge.
+ */
+export function getScrollStart(element: HTMLElement): number {
+    return isRtl(element) ? -element.scrollLeft : element.scrollLeft;
+}
+
+/** Scrolls `element` to `offset` pixels from its inline start (see `getScrollStart`). */
+export function setScrollStart(element: HTMLElement, offset: number): void {
+    element.scrollLeft = isRtl(element) ? -offset : offset;
+}
+
+/** Fixed position of a toolbar panel under its button. */
+export interface GridPanelPosition {
+    top: number;
+    /** Distance from the viewport's right edge to the panel's right edge (left-to-right). */
+    right?: number;
+    /** Distance from the viewport's left edge to the panel's left edge (right-to-left). */
+    left?: number;
+}
+
+/**
+ * Places a panel under `anchor`, lined up with the button's end edge and opening towards the
+ * grid: leftwards in a left-to-right grid, rightwards in a right-to-left one.
+ */
+export function getPanelPosition(anchor: HTMLElement | null, viewportWidth: number): GridPanelPosition {
+    if (!anchor) return { top: 0, right: 0 };
+    const rect = anchor.getBoundingClientRect();
+    return isRtl(anchor)
+        ? { top: rect.bottom + 6, left: rect.left }
+        : { top: rect.bottom + 6, right: viewportWidth - rect.right };
+}