@opencorestack/opengridx 3.5.0 → 3.6.0

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

@@ -10,8 +10,16 @@ export interface UseGridDevWarningsParams {
     totalRowCount: number;
     /** `pinnedRows` is set while tree data or row grouping is active, where it has no effect. */
     pinnedRowsIgnored?: boolean;
-    /** Pixel height of the scrollable content. */
+    /** Pixel height of the scrollable content, uncapped. */
     scrollHeight?: number;
+    /**
+     * The tallest element the browser lays out (`getMaxElementHeight`): `undefined` until measured (the warning
+     * waits), `Infinity` where there is no layout engine (the lowest known cap is used).
+     */
+    maxContentHeight?: number;
+    /** Unpinned rows the user can scroll to, and how many unpinned rows there are. */
+    reachableRowCount?: number;
+    unpinnedRowCount?: number;
     /** `listView` is set but `listViewColumn` is not, so the grid view is shown. */
     listViewWithoutColumn?: boolean;
     /** Number of items the list view renders (0 when the list view is not shown). It does not virtualize. */
@@ -31,7 +39,7 @@ export const LIST_VIEW_WARN_THRESHOLD = 2000;
 export const MAX_SCROLLABLE_HEIGHT = 17_800_000;
 
 export function useGridDevWarnings(params: UseGridDevWarningsParams): void {
-    const { paginationRequested, isRowGrouping, autoHeight, viewportHeight, renderedRowCount, totalRowCount, pinnedRowsIgnored = false, scrollHeight = 0, listViewWithoutColumn = false, listViewRowCount = 0 } = params;
+    const { paginationRequested, isRowGrouping, autoHeight, viewportHeight, renderedRowCount, totalRowCount, pinnedRowsIgnored = false, scrollHeight = 0, maxContentHeight, reachableRowCount, unpinnedRowCount, listViewWithoutColumn = false, listViewRowCount = 0 } = params;
     const warnedPaginationRef = useRef(false);
     const warnedUnboundedRef = useRef(false);
     const warnedPinnedRowsRef = useRef(false);
@@ -67,14 +75,21 @@ export function useGridDevWarnings(params: UseGridDevWarningsParams): void {
     }, [pinnedRowsIgnored]);
 
     useEffect(() => {
-        if (process.env.NODE_ENV === 'production' || warnedHeightRef.current || scrollHeight <= MAX_SCROLLABLE_HEIGHT) return;
+        if (process.env.NODE_ENV === 'production' || warnedHeightRef.current || maxContentHeight === undefined) return;
+        const measured = Number.isFinite(maxContentHeight);
+        // Once the browser's cap is measured, warn only when rows are actually cut off; before that (and
+        // where there is no layout engine) fall back to the lowest known cap.
+        if (measured ? scrollHeight <= maxContentHeight : scrollHeight <= MAX_SCROLLABLE_HEIGHT) return;
         warnedHeightRef.current = true;
+        const reach = measured && reachableRowCount !== undefined && unpinnedRowCount !== undefined
+            ? `Only the first ${reachableRowCount.toLocaleString('en-US')} of ${unpinnedRowCount.toLocaleString('en-US')} rows can be scrolled to in this browser. `
+            : 'The last rows may not be reachable by scrolling. ';
         console.warn(
-            `[OpenGridX] The grid content is ${Math.round(scrollHeight)}px tall. Browsers cap element heights ` +
-            '(about 17.9M px in Firefox, 33.5M px in Chrome and Safari), so the last rows may not be reachable by scrolling. ' +
+            `[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.'
         );
-    }, [scrollHeight]);
+    }, [scrollHeight, maxContentHeight, reachableRowCount, unpinnedRowCount]);
 
     useEffect(() => {
         if (process.env.NODE_ENV === 'production' || warnedPaginationRef.current) return;

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

@@ -0,0 +1,16 @@
+import { useLayoutEffect, useState } from 'react';
+import type { RefObject } from 'react';
+import { getMaxElementHeight } from '../../utils/maxElementHeight';
+
+/**
+ * The tallest element this browser lays out (see `getMaxElementHeight`), measured once per document after
+ * mount: `undefined` until measured, `Infinity` where there is no layout engine (jsdom, SSR).
+ */
+export function useGridMaxContentHeight(containerRef: RefObject<HTMLElement | null>): number | undefined {
+    const [maxHeight, setMaxHeight] = useState<number | undefined>(undefined);
+    useLayoutEffect(() => {
+        const measured = getMaxElementHeight(containerRef.current?.ownerDocument);
+        setMaxHeight(prev => (prev === measured ? prev : measured));
+    }, [containerRef]);
+    return maxHeight;
+}

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

@@ -16,6 +16,11 @@ export interface UseGridVirtualizationParams<R extends GridRowModel> {
     pinExpandColumn: boolean;
     /** Adaptive overscan row count from useGridScrollSync. Defaults to 5. */
     overscanRows?: number;
+    /**
+     * The tallest element the browser lays out (`getMaxElementHeight`); the scrollable content is capped to
+     * it. Defaults to no cap.
+     */
+    maxContentHeight?: number;
 }
 
 export interface GridVirtualizationResult<R extends GridRowModel = GridRowModel> {
@@ -28,6 +33,11 @@ export interface GridVirtualizationResult<R extends GridRowModel = GridRowModel>
     offsetTop: number;
     offsetLeft: number;
     totalHeight: number;
+    /**
+     * Height of the unpinned rows' container: their full height, capped so the whole content stays under
+     * `maxContentHeight`. Rows below the cap cannot be scrolled to (the dev warning names how many can).
+     */
+    virtualContainerHeight: number;
     pinnedTopHeight: number;
     pinnedBottomHeight: number;
     totalWidth: number;
@@ -60,6 +70,7 @@ export function useGridVirtualization<R extends GridRowModel>(
         pinCheckboxColumn,
         pinExpandColumn,
         overscanRows = 5,
+        maxContentHeight = Infinity,
     } = params;
 
     return useMemo<GridVirtualizationResult<R>>(() => {
@@ -122,6 +133,12 @@ export function useGridVirtualization<R extends GridRowModel>(
         const hasHorizontalScroll = viewportWidth > 0 && totalWidth > viewportWidth;
         const scrollbarBuffer = hasHorizontalScroll ? 16 : 0;
         const totalHeight = pinnedTopHeight + unpinnedRowsHeight + pinnedBottomHeight + scrollbarBuffer + 2;
+        // Firefox collapses an element taller than its cap (about 17.9M px) instead of clamping it, which
+        // made a large grid unscrollable there; keep the rows' container under the browser's cap.
+        const fullContainerHeight = totalHeight - pinnedTopHeight - pinnedBottomHeight;
+        const virtualContainerHeight = Number.isFinite(maxContentHeight)
+            ? Math.max(0, Math.min(fullContainerHeight, maxContentHeight - pinnedTopHeight - pinnedBottomHeight))
+            : fullContainerHeight;
 
         let firstRowIndex = 0;
         let lastRowIndex  = unpinnedRowsLength - 1;
@@ -157,6 +174,7 @@ export function useGridVirtualization<R extends GridRowModel>(
             offsetTop,
             offsetLeft: 0,
             totalHeight,
+            virtualContainerHeight,
             pinnedTopHeight,
             pinnedBottomHeight,
             totalWidth,
@@ -185,5 +203,6 @@ export function useGridVirtualization<R extends GridRowModel>(
         pinCheckboxColumn,
         pinExpandColumn,
         overscanRows,
+        maxContentHeight,
     ]);
 }

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 '—';