@opencorestack/opengridx 3.5.1 → 3.7.0

package/lib/components/Header/ColumnMenu.tsx

@@ -2,6 +2,7 @@ import React, { useRef, useEffect, useState } from 'react';
 import ReactDOM from 'react-dom';
 import type { GridColDef, GridRowModel, GridSortDirection, GridColumnPinning } from '../../types';
 import { getViewportWidth, getViewportHeight } from '../../utils/viewport';
+import { isRtl } from '../../utils/direction';
 
 
 interface ColumnMenuProps {
@@ -222,6 +223,13 @@ export function ColumnMenu({ colDef, sortModel, onSort, onHide, onPin, pinnedCol
     const isPinnedLeft = pinnedColumns?.left?.includes(colDef.field) ?? false;
     const isPinnedRight = pinnedColumns?.right?.includes(colDef.field) ?? false;
     const isUnpinned = !isPinnedLeft && !isPinnedRight;
+    // `pinnedColumns.left` / `.right` are the inline start / end: in a right-to-left grid the start
+    // is on the right, so the item labelled by screen side pins to the opposite list.
+    const rtl = isRtl(anchorEl);
+    const screenLeftSide = rtl ? 'right' : 'left';
+    const screenRightSide = rtl ? 'left' : 'right';
+    const isPinnedScreenLeft = rtl ? isPinnedRight : isPinnedLeft;
+    const isPinnedScreenRight = rtl ? isPinnedLeft : isPinnedRight;
 
     const colLabel = colDef.headerName || colDef.field;
 
@@ -257,15 +265,15 @@ export function ColumnMenu({ colDef, sortModel, onSort, onHide, onPin, pinnedCol
             {canPin && (
                 <>
                     <div className="ogx-menu-section-label" aria-hidden="true">Pin column</div>
-                    <button type="button" className={`ogx-menu-item${isPinnedLeft ? ' ogx-menu-item--active' : ''}`}
-                        onClick={() => handlePin('left')} role="menuitemradio" aria-checked={isPinnedLeft} aria-label="Pin to left">
-                        <span className="ogx-menu-item__indicator" aria-hidden="true">{isPinnedLeft ? <ActiveDotIcon /> : <InactiveDotIcon />}</span>
+                    <button type="button" className={`ogx-menu-item${isPinnedScreenLeft ? ' ogx-menu-item--active' : ''}`}
+                        onClick={() => handlePin(screenLeftSide)} role="menuitemradio" aria-checked={isPinnedScreenLeft} aria-label="Pin to left">
+                        <span className="ogx-menu-item__indicator" aria-hidden="true">{isPinnedScreenLeft ? <ActiveDotIcon /> : <InactiveDotIcon />}</span>
                         <span className="ogx-menu-item__icon" aria-hidden="true"><PinLeftIcon /></span>
                         Pin to Left
                     </button>
-                    <button type="button" className={`ogx-menu-item${isPinnedRight ? ' ogx-menu-item--active' : ''}`}
-                        onClick={() => handlePin('right')} role="menuitemradio" aria-checked={isPinnedRight} aria-label="Pin to right">
-                        <span className="ogx-menu-item__indicator" aria-hidden="true">{isPinnedRight ? <ActiveDotIcon /> : <InactiveDotIcon />}</span>
+                    <button type="button" className={`ogx-menu-item${isPinnedScreenRight ? ' ogx-menu-item--active' : ''}`}
+                        onClick={() => handlePin(screenRightSide)} role="menuitemradio" aria-checked={isPinnedScreenRight} aria-label="Pin to right">
+                        <span className="ogx-menu-item__indicator" aria-hidden="true">{isPinnedScreenRight ? <ActiveDotIcon /> : <InactiveDotIcon />}</span>
                         <span className="ogx-menu-item__icon" aria-hidden="true"><PinRightIcon /></span>
                         Pin to Right
                     </button>

package/lib/components/Header/Header.css

@@ -12,7 +12,7 @@
   display: flex;
   align-items: stretch;
   background: var(--ogx-grid-header-background);
-  border-bottom: 1px solid var(--ogx-grid-border-color);
+  border-bottom: var(--ogx-grid-row-divider-width) solid var(--ogx-grid-row-divider-color, var(--ogx-grid-border-color));
   min-height: var(--ogx-header-height);
   box-shadow: var(--ogx-shadow-sm, 0 1px 2px rgba(0, 0, 0, 0.03));
 }
@@ -20,15 +20,16 @@
   width: 48px;
   min-width: 48px;
   flex-shrink: 0;
-  border-right: 1px solid transparent; 
+  border-inline-end: 1px solid transparent;
 }
 .ogx__header-cell {
   display: flex;
   align-items: center;
-  padding: var(--ogx-grid-cell-padding-y) var(--ogx-grid-cell-padding-x);
+  padding: var(--ogx-grid-cell-padding-y) var(--ogx-grid-header-padding-x, var(--ogx-grid-cell-padding-x));
   position: relative;
+  font-family: var(--ogx-grid-header-font-family, inherit);
   font-size: var(--ogx-grid-header-font-size);
-  font-weight: 600; 
+  font-weight: var(--ogx-grid-header-font-weight, 600);
   color: var(--ogx-grid-header-text);
   overflow: hidden;
   box-sizing: border-box;
@@ -39,10 +40,10 @@
 .ogx__header-cell:not(:last-child)::after {
   content: '';
   position: absolute;
-  right: 0;
+  inset-inline-end: 0;
   top: 25%;
   height: 50%;
-  width: 1px;
+  width: var(--ogx-grid-header-column-divider-width);
   background-color: var(--ogx-color-gray-300);
   opacity: 0.5;
 }
@@ -106,11 +107,11 @@
 }
 .ogx__header-cell--align-right .ogx__header-cell-title-wrapper {
   align-items: flex-end;
-  text-align: right;
+  text-align: end;
 }
 .ogx__header-cell--align-right .ogx__menu-icon-btn {
-  margin-left: 0;
-  margin-right: auto;
+  margin-inline-start: 0;
+  margin-inline-end: auto;
 }
 .ogx__header-cell--sortable {
   cursor: pointer;
@@ -131,7 +132,7 @@
   justify-content: center;
   width: 16px;
   height: 16px;
-  margin-left: 4px;
+  margin-inline-start: 4px;
   flex-shrink: 0;
   font-size: 14px;
   line-height: 1;
@@ -161,11 +162,19 @@
   box-shadow: var(--ogx-grid-pinned-left-shadow, 4px 0 12px -4px rgba(0, 0, 0, 0.05)); 
 }
 .ogx__header-cell--pinned-right-first {
-  margin-left: auto;
+  margin-inline-start: auto;
 }
 .ogx__header-cell--pinned-right {
   box-shadow: var(--ogx-grid-pinned-right-shadow, -4px 0 12px -4px rgba(0, 0, 0, 0.05));
 }
+/* Right to left: the start-pinned section is on the right and casts its shadow leftwards, the
+   end-pinned one on the left casts it rightwards (the mirrored shadow tokens). */
+.ogx__header-cell--pinned-left:dir(rtl) {
+  box-shadow: var(--ogx-grid-pinned-right-shadow, -4px 0 12px -4px rgba(0, 0, 0, 0.05));
+}
+.ogx__header-cell--pinned-right:dir(rtl) {
+  box-shadow: var(--ogx-grid-pinned-left-shadow, 4px 0 12px -4px rgba(0, 0, 0, 0.05));
+}
 .ogx__header-cell--pinned::after {
   display: none;
 }
@@ -178,7 +187,7 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  margin-right: 8px;
+  margin-inline-end: 8px;
   color: var(--ogx-color-primary);
   animation: ogx-pulse 1.5s infinite ease-in-out;
 }
@@ -188,7 +197,7 @@
   100% { transform: scale(1); }
 }
 .ogx__header-cell--drag-over {
-  border-left: 2px solid var(--ogx-color-primary) !important;
+  border-inline-start: 2px solid var(--ogx-color-primary) !important;
   background: var(--ogx-color-primary-light);
 }
 /* Show ring on header cells during keyboard navigation */
@@ -222,7 +231,7 @@
   cursor: pointer;
   opacity: 0;
   transition: opacity 0.15s ease, background 0.15s ease, color 0.15s ease;
-  margin-left: auto;
+  margin-inline-start: auto;
 }
 .ogx__header-cell:hover .ogx__menu-icon-btn,
 .ogx__header-cell--sorted .ogx__menu-icon-btn {

package/lib/components/Header/Header.tsx

@@ -2,7 +2,7 @@ import React, { useId } from 'react';
 import { Checkbox } from '../ui/Checkbox';
 import { ColumnResizeHandle } from '../ColumnResizeHandle/ColumnResizeHandle';
 import { clampResizeWidth } from '../ColumnResizeHandle/clampResizeWidth';
-import type { GridColDef, GridRowModel, GridSortDirection, GridColumnPinning, GridAggregationModel, GridColumnGroupingModel, GridFilterModel } from '../../types';
+import type { GridColDef, GridRowModel, GridSortDirection, GridColumnPinning, GridAggregationModel, GridColumnGroupingModel, GridFilterModel, GridLocaleText } from '../../types';
 import { isColumnPinned, calculatePinnedPositions, getPinnedEdgeFields } from '../../utils/pinning';
 import { getRenderedColumnWidth } from '../../utils/columnWidth';
 import { buildColumnGroupRow, getColumnGroupDepth, getColumnGroupPaths } from '../../utils/columnGroups';
@@ -10,6 +10,7 @@ import { ColumnMenu } from './ColumnMenu';
 import { getHeaderLineClamp, shouldWrapHeaderText } from '../../utils/headerWrap';
 import { getHeaderColumnStyle } from './headerColumnStyle';
 import { HeaderFilterRow } from '../HeaderFilter/HeaderFilterRow';
+import { isRtl, logicalArrowKey } from '../../utils/direction';
 
 
 function MenuIcon() {
@@ -87,6 +88,8 @@ export interface HeaderProps<R extends GridRowModel = GridRowModel> {
     onFilterModelChange?: (model: GridFilterModel) => void;
     /** Opens the filter panel; a header filter cell showing "Custom filter" calls it. */
     onOpenFilterPanel?: () => void;
+    /** Translations of the header filter row's strings. */
+    localeText?: GridLocaleText;
 }
 
 export function Header<R extends GridRowModel = GridRowModel>(props: HeaderProps<R>) {
@@ -129,6 +132,7 @@ export function Header<R extends GridRowModel = GridRowModel>(props: HeaderProps
         filterModel,
         onFilterModelChange,
         onOpenFilterPanel,
+        localeText,
     } = props;
 
     const selectAllId = useId();
@@ -153,7 +157,9 @@ export function Header<R extends GridRowModel = GridRowModel>(props: HeaderProps
             event.preventDefault();
             event.stopPropagation();
             const width = getRenderedColumnWidth(colDef, columnWidths);
-            const step = (event.shiftKey ? 50 : 10) * (event.key === 'ArrowRight' ? 1 : -1);
+            // ArrowRight widens: towards the column's end edge, on the left in a right-to-left grid.
+            const key = logicalArrowKey(event.key, isRtl(event.currentTarget));
+            const step = (event.shiftKey ? 50 : 10) * (key === 'ArrowRight' ? 1 : -1);
             onColumnResize(colDef.field, clampResizeWidth(width + step, width, colDef.minWidth, colDef.maxWidth));
             return;
         }
@@ -285,7 +291,7 @@ export function Header<R extends GridRowModel = GridRowModel>(props: HeaderProps
                                     minWidth: prefixWidth,
                                     flexShrink: 0,
                                     position: isPrefixPinned ? 'sticky' : undefined,
-                                    left: isPrefixPinned ? 0 : undefined,
+                                    insetInlineStart: isPrefixPinned ? 0 : undefined,
                                 }}
                                 aria-hidden="true"
                             />
@@ -300,12 +306,12 @@ export function Header<R extends GridRowModel = GridRowModel>(props: HeaderProps
                             };
                             if (cell.pinned === 'left') {
                                 style.position = 'sticky';
-                                style.left = pinnedPositions[cell.fields[0]];
+                                style.insetInlineStart = pinnedPositions[cell.fields[0]];
                             } else if (cell.pinned === 'right') {
                                 style.position = 'sticky';
-                                style.right = pinnedPositions[cell.fields[cell.fields.length - 1]];
+                                style.insetInlineEnd = pinnedPositions[cell.fields[cell.fields.length - 1]];
                                 // Free space goes before the right-pinned section, as in the column header row.
-                                if (cells[cellIndex - 1]?.pinned !== 'right') style.marginLeft = 'auto';
+                                if (cells[cellIndex - 1]?.pinned !== 'right') style.marginInlineStart = 'auto';
                             }
                             if (!cell.isGroup) {
                                 return (
@@ -351,7 +357,7 @@ export function Header<R extends GridRowModel = GridRowModel>(props: HeaderProps
                             minWidth: 48,
                             maxWidth: 48,
                             position: 'sticky',
-                            left: 0,
+                            insetInlineStart: 0,
                         }}
                     />
                 )}
@@ -370,7 +376,7 @@ export function Header<R extends GridRowModel = GridRowModel>(props: HeaderProps
                             minWidth: 48,
                             maxWidth: 48,
                             position: pinExpandColumn ? 'sticky' : undefined,
-                            left: pinExpandColumn ? (rowReordering ? 48 : 0) : undefined,
+                            insetInlineStart: pinExpandColumn ? (rowReordering ? 48 : 0) : undefined,
                         }}
                     >
                         { }
@@ -387,7 +393,7 @@ export function Header<R extends GridRowModel = GridRowModel>(props: HeaderProps
                         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,
 
                         }}
                     >
@@ -583,6 +589,7 @@ export function Header<R extends GridRowModel = GridRowModel>(props: HeaderProps
                     filterModel={filterModel}
                     onFilterModelChange={onFilterModelChange}
                     onOpenFilterPanel={onOpenFilterPanel}
+                    localeText={localeText}
                     focusedField={focusedCell?.id === null && focusedCell.headerFilter ? focusedCell.field : null}
                 />
             )}

package/lib/components/Header/headerColumnStyle.ts

@@ -21,8 +21,9 @@ export function getHeaderColumnStyle<R extends GridRowModel>(
         boxSizing: 'border-box',
         position: pinnedPosition ? 'sticky' : 'relative',
     };
-    if (pinnedPosition === 'left') style.left = pinnedOffset;
-    else if (pinnedPosition === 'right') style.right = pinnedOffset;
+    // Logical sides: `left` pinning sticks to the inline start (the right edge in a right-to-left grid).
+    if (pinnedPosition === 'left') style.insetInlineStart = pinnedOffset;
+    else if (pinnedPosition === 'right') style.insetInlineEnd = pinnedOffset;
     return style;
 }
 

package/lib/components/HeaderFilter/HeaderFilter.css

@@ -7,7 +7,7 @@
   height: var(--ogx-header-filter-height, 40px);
   min-height: var(--ogx-header-filter-height, 40px);
   background: var(--ogx-grid-header-background);
-  border-bottom: 1px solid var(--ogx-grid-border-color);
+  border-bottom: var(--ogx-grid-row-divider-width) solid var(--ogx-grid-row-divider-color, var(--ogx-grid-border-color));
 }
 .ogx__header-filter-cell {
   display: flex;
@@ -39,9 +39,15 @@
   box-shadow: var(--ogx-grid-pinned-left-shadow, 4px 0 12px -4px rgba(0, 0, 0, 0.05));
 }
 .ogx__header-filter-cell--pinned-right-first {
-  margin-left: auto;
+  margin-inline-start: auto;
   box-shadow: var(--ogx-grid-pinned-right-shadow, -4px 0 12px -4px rgba(0, 0, 0, 0.05));
 }
+.ogx__header-filter-cell--pinned-left-last:dir(rtl) {
+  box-shadow: var(--ogx-grid-pinned-right-shadow, -4px 0 12px -4px rgba(0, 0, 0, 0.05));
+}
+.ogx__header-filter-cell--pinned-right-first:dir(rtl) {
+  box-shadow: var(--ogx-grid-pinned-left-shadow, 4px 0 12px -4px rgba(0, 0, 0, 0.05));
+}
 
 /* Operator button: a compact symbol for the current operator; opens the operator menu. */
 .ogx__header-filter-operator {
@@ -152,7 +158,7 @@
   color: var(--ogx-color-primary);
   font: inherit;
   font-style: italic;
-  text-align: left;
+  text-align: start;
 }
 button.ogx__header-filter-custom {
   cursor: pointer;

package/lib/components/HeaderFilter/HeaderFilterCell.tsx

@@ -3,7 +3,6 @@ import type { GridColDef, GridFilterItem, GridFilterOperator } from '../../types
 import { filterValueToInputText, NO_VALUE_OPERATORS } from '../../utils/filtering';
 import {
     HEADER_FILTER_DEBOUNCE_MS,
-    HEADER_FILTER_OPERATOR_LABELS,
     HEADER_FILTER_OPERATOR_SYMBOLS,
     buildHeaderFilterItem,
     convertHeaderFilterValue,
@@ -13,6 +12,7 @@ import {
 } from '../../utils/headerFilters';
 import { Input } from '../ui/Input';
 import { HeaderFilterOperatorMenu } from './HeaderFilterOperatorMenu';
+import type { HeaderFilterLocale } from '../../utils/headerFilterLocale';
 
 export interface HeaderFilterCellProps {
     colDef: GridColDef;
@@ -25,6 +25,8 @@ export interface HeaderFilterCellProps {
     /** Stores (or removes, with null) the cell's own filter item. Must keep its identity. */
     onItemChange: (field: string, item: GridFilterItem | null) => void;
     onOpenFilterPanel?: () => void;
+    /** The row's strings (`resolveHeaderFilterLocale`). */
+    locale: HeaderFilterLocale;
 }
 
 interface ValueOption {
@@ -75,7 +77,7 @@ function ClearIcon() {
 }
 
 /** One cell of the header filter row: operator button, value control and clear button. */
-export function HeaderFilterCell({ colDef, state, style, className, ariaColIndex, onItemChange, onOpenFilterPanel }: HeaderFilterCellProps) {
+export function HeaderFilterCell({ colDef, state, style, className, ariaColIndex, onItemChange, onOpenFilterPanel, locale }: HeaderFilterCellProps) {
     const label = colDef.headerName || colDef.field;
     const item = state.kind === 'editable' ? state.item : undefined;
     const operator: GridFilterOperator = item?.operator ?? getHeaderFilterDefaultOperator(colDef);
@@ -242,17 +244,17 @@ export function HeaderFilterCell({ colDef, state, style, className, ariaColIndex
                 className="ogx__header-filter-custom"
                 tabIndex={-1}
                 onClick={onOpenFilterPanel}
-                title="Set in the filter panel"
+                title={locale.customTooltip}
             >
-                Custom filter
+                {locale.custom}
             </button>
         ) : (
-            <span className="ogx__header-filter-custom" title="Set in the filter panel">Custom filter</span>
+            <span className="ogx__header-filter-custom" title={locale.customTooltip}>{locale.custom}</span>
         );
     } else {
         let valueControl: React.ReactNode;
         if (!showsValue) {
-            valueControl = <span className="ogx__header-filter-operator-label">{HEADER_FILTER_OPERATOR_LABELS[operator] ?? operator}</span>;
+            valueControl = <span className="ogx__header-filter-operator-label">{locale.operator(operator)}</span>;
         } else if (colDef.type === 'boolean') {
             valueControl = (
                 <select
@@ -261,11 +263,11 @@ export function HeaderFilterCell({ colDef, state, style, className, ariaColIndex
                     tabIndex={-1}
                     value={item?.value == null || item.value === '' ? '' : String(item.value)}
                     onChange={(e) => setValue(e.target.value === '' ? '' : e.target.value === 'true')}
-                    aria-label={`Filter value for ${label}`}
+                    aria-label={locale.valueLabel(label)}
                 >
-                    <option value="">Any</option>
-                    <option value="true">Yes</option>
-                    <option value="false">No</option>
+                    <option value="">{locale.any}</option>
+                    <option value="true">{locale.yes}</option>
+                    <option value="false">{locale.no}</option>
                 </select>
             );
         } else if (usesSelect) {
@@ -280,9 +282,9 @@ export function HeaderFilterCell({ colDef, state, style, className, ariaColIndex
                         const option = valueOptions.find(o => o.key === e.target.value);
                         setValue(convertHeaderFilterValue(option ? option.value : '', operator));
                     }}
-                    aria-label={`Filter value for ${label}`}
+                    aria-label={locale.valueLabel(label)}
                 >
-                    <option value="">Any</option>
+                    <option value="">{locale.any}</option>
                     {valueOptions.map(o => <option key={o.key} value={o.key}>{o.label}</option>)}
                 </select>
             );
@@ -298,11 +300,11 @@ export function HeaderFilterCell({ colDef, state, style, className, ariaColIndex
                     autoComplete="off"
                     value={draft ?? filterValueToInputText(item?.value, colDef.type)}
                     onChange={(e) => setDraft(e.target.value)}
-                    aria-label={`Filter value for ${label}`}
+                    aria-label={locale.valueLabel(label)}
                 />
             );
         }
-        const operatorLabel = HEADER_FILTER_OPERATOR_LABELS[operator] ?? operator;
+        const operatorLabel = locale.operator(operator);
         content = (
             <>
                 <button
@@ -312,7 +314,7 @@ export function HeaderFilterCell({ colDef, state, style, className, ariaColIndex
                     tabIndex={-1}
                     aria-haspopup="menu"
                     aria-expanded={menuAnchor !== null}
-                    aria-label={`Filter operator for ${label}: ${operatorLabel}`}
+                    aria-label={locale.operatorButtonLabel(label, operatorLabel)}
                     title={operatorLabel}
                     onClick={() => (menuAnchor ? setMenuAnchor(null) : openMenu())}
                 >
@@ -324,8 +326,8 @@ export function HeaderFilterCell({ colDef, state, style, className, ariaColIndex
                         type="button"
                         className="ogx__header-filter-clear"
                         tabIndex={-1}
-                        aria-label={`Clear filter for ${label}`}
-                        title="Clear"
+                        aria-label={locale.clearLabel(label)}
+                        title={locale.clearTooltip}
                         onClick={() => { clear(); focusCell(); }}
                     >
                         <ClearIcon />
@@ -335,6 +337,7 @@ export function HeaderFilterCell({ colDef, state, style, className, ariaColIndex
                     <HeaderFilterOperatorMenu
                         anchorEl={menuAnchor}
                         columnLabel={label}
+                        locale={locale}
                         operators={getHeaderFilterOperators(colDef)}
                         current={operator}
                         onSelect={selectOperator}
@@ -358,7 +361,7 @@ export function HeaderFilterCell({ colDef, state, style, className, ariaColIndex
             className={classNames}
             style={style}
             role="columnheader"
-            aria-label={`Filter ${label}`}
+            aria-label={locale.cellLabel(label)}
             aria-colindex={ariaColIndex}
             data-field={colDef.field}
             tabIndex={-1}

package/lib/components/HeaderFilter/HeaderFilterOperatorMenu.tsx

@@ -1,7 +1,7 @@
 import React, { useEffect, useLayoutEffect, useRef, useState } from 'react';
 import ReactDOM from 'react-dom';
 import type { GridFilterOperator } from '../../types';
-import { HEADER_FILTER_OPERATOR_LABELS } from '../../utils/headerFilters';
+import type { HeaderFilterLocale } from '../../utils/headerFilterLocale';
 import { getViewportHeight, getViewportWidth } from '../../utils/viewport';
 
 export interface HeaderFilterOperatorMenuProps {
@@ -13,6 +13,7 @@ export interface HeaderFilterOperatorMenuProps {
     onSelect: (operator: GridFilterOperator) => void;
     /** `restoreFocus`: the menu was left from the keyboard or by choosing an item. */
     onClose: (restoreFocus: boolean) => void;
+    locale: HeaderFilterLocale;
 }
 
 const HIDDEN_STYLE: React.CSSProperties = { position: 'fixed', zIndex: 1300, top: 0, left: 0, visibility: 'hidden' };
@@ -21,7 +22,7 @@ const itemsOf = (menu: HTMLElement | null): HTMLElement[] =>
     menu ? Array.from(menu.querySelectorAll<HTMLElement>('[role="menuitemradio"]')) : [];
 
 /** The operator menu of a header filter cell: a menu of radio items, portalled out of the header. */
-export function HeaderFilterOperatorMenu({ anchorEl, columnLabel, operators, current, onSelect, onClose }: HeaderFilterOperatorMenuProps) {
+export function HeaderFilterOperatorMenu({ anchorEl, columnLabel, operators, current, onSelect, onClose, locale }: HeaderFilterOperatorMenuProps) {
     const menuRef = useRef<HTMLDivElement>(null);
     const [style, setStyle] = useState<React.CSSProperties>(HIDDEN_STYLE);
 
@@ -102,7 +103,7 @@ export function HeaderFilterOperatorMenu({ anchorEl, columnLabel, operators, cur
             className="ogx-column-menu ogx__header-filter-menu"
             style={style}
             role="menu"
-            aria-label={`Filter operator for ${columnLabel}`}
+            aria-label={locale.operatorMenuLabel(columnLabel)}
             onKeyDown={handleKeyDown}
         >
             {operators.map(op => (
@@ -115,7 +116,7 @@ export function HeaderFilterOperatorMenu({ anchorEl, columnLabel, operators, cur
                     className={`ogx-menu-item${op === current ? ' ogx-menu-item--active' : ''}`}
                     onClick={() => onSelect(op)}
                 >
-                    {HEADER_FILTER_OPERATOR_LABELS[op] ?? op}
+                    {locale.operator(op)}
                 </button>
             ))}
         </div>,

package/lib/components/HeaderFilter/HeaderFilterRow.tsx

@@ -1,7 +1,8 @@
 import { useCallback, useLayoutEffect, useRef } from 'react';
-import type { GridColDef, GridColumnPinning, GridFilterItem, GridFilterModel } from '../../types';
+import type { GridColDef, GridColumnPinning, GridFilterItem, GridFilterModel, GridLocaleText } from '../../types';
 import { isColumnPinned, SYSTEM_COLUMN_WIDTH } from '../../utils/pinning';
 import { CHECKBOX_FIELD, EXPAND_FIELD, REORDER_FIELD } from '../../utils/focus';
+import { resolveHeaderFilterLocale } from '../../utils/headerFilterLocale';
 import { getHeaderFilterState, hasHeaderFilter, setHeaderFilterItem } from '../../utils/headerFilters';
 import { getHeaderColumnStyle } from '../Header/headerColumnStyle';
 import { HeaderFilterCell } from './HeaderFilterCell';
@@ -27,6 +28,8 @@ export interface HeaderFilterRowProps {
     onOpenFilterPanel?: () => void;
     /** Field of the focused filter cell, or null. */
     focusedField: string | null;
+    /** Translations of the row's strings. */
+    localeText?: GridLocaleText;
 }
 
 function SystemFilterCell({ field, ariaColIndex, sticky, left, focused }: {
@@ -49,7 +52,7 @@ function SystemFilterCell({ field, ariaColIndex, sticky, left, focused }: {
                 minWidth: SYSTEM_COLUMN_WIDTH,
                 maxWidth: SYSTEM_COLUMN_WIDTH,
                 position: sticky ? 'sticky' : undefined,
-                left: sticky ? left : undefined,
+                insetInlineStart: sticky ? left : undefined,
             }}
             role="columnheader"
             aria-colindex={ariaColIndex}
@@ -68,7 +71,7 @@ export function HeaderFilterRow(props: HeaderFilterRowProps) {
     const {
         columns, columnWidths, pinnedColumns, pinnedPositions, pinnedEdges, rowReordering, hasDetailPanel,
         checkboxSelection, pinExpandColumn, pinCheckboxColumn, columnIndexMap, ariaRowIndex, filterModel,
-        onFilterModelChange, onOpenFilterPanel, focusedField,
+        onFilterModelChange, onOpenFilterPanel, focusedField, localeText,
     } = props;
 
     // Cells commit from timers and unmount cleanups: they read the newest model, and two commits
@@ -86,6 +89,8 @@ export function HeaderFilterRow(props: HeaderFilterRowProps) {
         emit(next);
     }, []);
 
+    const locale = resolveHeaderFilterLocale(localeText);
+
     const reorderColIndex = rowReordering ? 1 : 0;
     const expandColIndex = hasDetailPanel ? reorderColIndex + 1 : reorderColIndex;
     const checkboxColIndex = checkboxSelection ? expandColIndex + 1 : expandColIndex;
@@ -149,6 +154,7 @@ export function HeaderFilterRow(props: HeaderFilterRowProps) {
                         ariaColIndex={ariaColIndex}
                         onItemChange={handleItemChange}
                         onOpenFilterPanel={onOpenFilterPanel}
+                        locale={locale}
                     />
                 );
             })}

package/lib/components/ListView/ListViewRow.tsx

@@ -107,7 +107,7 @@ export function ListViewRow<R extends GridRowModel = GridRowModel>({
                 // (not a Tab stop: Enter or Alt+Arrow toggle the focused row).
                 <div
                     className="ogx-list-view__expand"
-                    style={{ paddingLeft: (rowMeta.treeDepth ?? 0) * 16 }}
+                    style={{ paddingInlineStart: (rowMeta.treeDepth ?? 0) * 16 }}
                     onClick={(e) => e.stopPropagation()}
                     onDoubleClick={(e) => e.stopPropagation()}
                 >

package/lib/components/Pagination/Pagination.css

@@ -9,7 +9,7 @@
   font-size: var(--ogx-font-size-sm);
   color: var(--ogx-grid-row-text);
   min-height: 52px;
-  border-radius: 0 0 var(--ogx-border-radius-lg) var(--ogx-border-radius-lg);
+  border-radius: 0 0 var(--ogx-grid-border-radius, var(--ogx-border-radius-lg)) var(--ogx-grid-border-radius, var(--ogx-border-radius-lg));
 }
 .ogx-pagination__page-size {
   display: flex;
@@ -89,3 +89,7 @@
     order: 2;
   }
 }
+/* First / previous / next / last arrows point the way the pages run: mirrored right to left. */
+.ogx-pagination__icon:dir(rtl) {
+  transform: scaleX(-1);
+}

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.css

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

package/lib/components/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}