@opencorestack/opengridx 3.8.1 → 3.9.0

package/lib/components/Toolbar/GlobalSearch.tsx

@@ -1,5 +1,6 @@
 import React, { useState, useEffect, useRef, useCallback, useLayoutEffect } from 'react';
 import { Input } from '../ui/Input';
+import { useGridLocale } from '../DataGrid/gridLocaleContext';
 
 
 interface GlobalSearchProps {
@@ -32,7 +33,9 @@ function normalizeSearch(text: string): string {
     return text.trim().split(/\s+/).filter(Boolean).join(' ');
 }
 
-export function GlobalSearch({ value = '', onChange, placeholder = 'Search...', debounceMs = 250 }: GlobalSearchProps) {
+export function GlobalSearch({ value = '', onChange, placeholder: placeholderProp, debounceMs = 250 }: GlobalSearchProps) {
+    const locale = useGridLocale();
+    const placeholder = placeholderProp ?? locale.toolbarSearchPlaceholder;
     const [isExpanded, setIsExpanded] = useState(() => value.length > 0);
     // Fully uncontrolled: localValue is the single source of truth.
     const [localValue, setLocalValue] = useState(value);
@@ -152,11 +155,11 @@ export function GlobalSearch({ value = '', onChange, placeholder = 'Search...',
                 onFocus={handleFocus}
                 onBlur={handleBlur}
                 placeholder={placeholder}
-                aria-label="Global Search"
+                aria-label={locale.toolbarSearchLabel}
                 autoComplete="off"
             />
             {localValue && (
-                <button type="button" className="ogx-global-search__clear" onClick={handleClear} aria-label="Clear search">
+                <button type="button" className="ogx-global-search__clear" onClick={handleClear} aria-label={locale.toolbarSearchClear}>
                     <CloseIcon />
                 </button>
             )}

package/lib/components/Toolbar/GridToolbar.tsx

@@ -12,6 +12,7 @@ import { ColumnVisibilityPanel } from '../ColumnVisibilityPanel/ColumnVisibility
 import { FilterPanel } from '../FilterPanel/FilterPanel';
 import { GridTooltip } from '../Tooltip/Tooltip';
 import { AiSparkleIcon } from '../AiAssistant/GridAiAssistantPanel';
+import { useGridLocale } from '../DataGrid/gridLocaleContext';
 
 /** Props passed to a custom toolbar button renderer. */
 export interface ToolbarButtonRenderProps {
@@ -169,6 +170,7 @@ function AggregationPanel({
     onClose: () => void;
     activeCount: number;
 }) {
+    const locale = useGridLocale();
     const panelRef = useRef<HTMLDivElement>(null);
     const [pos, setPos] = useState<PanelPosition>({ top: 0, right: 0 });
     const [portalContainer, setPortalContainer] = useState<Element | null>(null);
@@ -214,22 +216,22 @@ function AggregationPanel({
             ref={panelRef}
             className="ogx-toolbar__panel"
             role="dialog"
-            aria-label="Summaries configuration"
+            aria-label={locale.toolbarSummariesPanelLabel}
             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">
                     <SigmaIcon />
-                    Summaries
+                    {locale.toolbarSummaries}
                 </span>
                 {activeCount > 0 && (
                     <button
                         type="button"
                         className="ogx-toolbar__clear-btn"
                         onClick={onClearAll}
-                        title="Clear all summaries"
+                        title={locale.toolbarSummariesClearAllTooltip}
                     >
-                        Clear all
+                        {locale.toolbarSummariesClearAll}
                     </button>
                 )}
             </div>
@@ -237,8 +239,8 @@ function AggregationPanel({
             <div className="ogx-toolbar__panel-body">
                 {aggregableColumns.length === 0 ? (
                     <p className="ogx-toolbar__empty">
-                        No aggregable columns.<br />
-                        Set <code>aggregable: true</code> on a column to enable.
+                        {locale.toolbarSummariesEmpty}<br />
+                        {`${locale.toolbarSummariesEmptyHintBefore} `}<code>aggregable: true</code>{` ${locale.toolbarSummariesEmptyHintAfter}`}
                     </p>
                 ) : (
                     aggregableColumns.map((col) => {
@@ -257,7 +259,7 @@ function AggregationPanel({
                                             onClick={() => onFunctionChange(col.field, fn)}
                                             aria-pressed={currentFn === fn}
                                         >
-                                            {fn}
+                                            {locale.toolbarAggregationFunction(fn)}
                                         </button>
                                     ))}
                                 </div>
@@ -295,6 +297,7 @@ function ColumnsPanelWrapper({
     onClose: () => void;
     showNonHideableColumns?: boolean;
 }) {
+    const locale = useGridLocale();
     const panelRef = useRef<HTMLDivElement>(null);
     const [pos, setPos] = useState<PanelPosition>({ top: 0, right: 0 });
     const [portalContainer, setPortalContainer] = useState<Element | null>(null);
@@ -340,7 +343,7 @@ function ColumnsPanelWrapper({
             ref={panelRef}
             className="ogx-toolbar__panel"
             role="dialog"
-            aria-label="Column visibility"
+            aria-label={locale.toolbarColumnsPanelLabel}
             style={{ top: pos.top, right: pos.right, left: pos.left, width: 280, padding: 0 }}
         >
             <ColumnVisibilityPanel
@@ -372,6 +375,7 @@ function FilterPanelWrapper({
     onFilterModelChange: (model: GridFilterModel) => void;
     onClose: () => void;
 }) {
+    const locale = useGridLocale();
     const panelRef = useRef<HTMLDivElement>(null);
     const [pos, setPos] = useState<PanelPosition>({ top: 0, right: 0 });
     // Stable ref for onClose — prevents the mousedown effect from
@@ -421,13 +425,13 @@ function FilterPanelWrapper({
             ref={panelRef}
             className="ogx-toolbar__panel ogx-toolbar__panel--filter"
             role="dialog"
-            aria-label="Advanced filters"
+            aria-label={locale.toolbarFiltersLabel}
             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">
                     <FilterIcon />
-                    Filters
+                    {locale.toolbarFilters}
                     {activeFilterCount > 0 && (
                         <span className="ogx-toolbar__panel-count">{activeFilterCount}</span>
                     )}
@@ -438,19 +442,19 @@ function FilterPanelWrapper({
                             type="button"
                             className="ogx-toolbar__clear-btn"
                             onClick={handleClearAll}
-                            title="Clear all filters"
+                            title={locale.toolbarFiltersClearAllTooltip}
                         >
-                            Clear all
+                            {locale.toolbarFiltersClearAll}
                         </button>
                     )}
                     <button
                         type="button"
                         className="ogx-toolbar__close-btn"
                         onClick={() => onCloseRef.current()}
-                        title="Close filters"
-                        aria-label="Close filters panel"
+                        title={locale.toolbarFiltersCloseTooltip}
+                        aria-label={locale.toolbarFiltersCloseLabel}
                     >
-                        Close
+                        {locale.toolbarFiltersClose}
                     </button>
                 </div>
             </div>
@@ -501,8 +505,10 @@ export function GridToolbar({
     showNonHideableColumns,
     onAiAssistantToggle,
     aiAssistantOpen = false,
-    aiAssistantLabel = 'Ask AI',
+    aiAssistantLabel: aiAssistantLabelProp,
 }: GridToolbarProps) {
+    const locale = useGridLocale();
+    const aiAssistantLabel = aiAssistantLabelProp ?? locale.aiAssistantButton;
     // At most one panel is open. Every way the Columns panel closes (its button, a custom
     // button, another panel opening, click-outside, Escape) reports onColumnsPanelClose, so the
     // grid can ask for it again with forceColumnsOpen.
@@ -646,7 +652,7 @@ export function GridToolbar({
     }, [columns, columnVisibilityModel, onColumnVisibilityModelChange]);
 
     return (
-        <div className={['ogx-toolbar', className].filter(Boolean).join(' ')} role="toolbar" aria-label="Grid toolbar" style={style}>
+        <div className={['ogx-toolbar', className].filter(Boolean).join(' ')} role="toolbar" aria-label={locale.toolbarLabel} style={style}>
             {/* Left slot — custom content */}
             {children && <div className="ogx-toolbar__left">{children}</div>}
 
@@ -681,7 +687,7 @@ export function GridToolbar({
                                 <GlobalSearch
                                     value={searchValue}
                                     onChange={handleSearchChange}
-                                    placeholder="Search..."
+                                    placeholder={locale.toolbarSearchPlaceholder}
                                 />
                             )
                         }
@@ -698,12 +704,12 @@ export function GridToolbar({
                                 activeCount: columns.length - visibleColumns.size,
                             })
                             : (
-                                <GridTooltip title="Columns">
+                                <GridTooltip title={locale.toolbarColumns}>
                                     <button
                                         type="button"
                                         ref={colsButtonRef}
                                         className={`ogx-toolbar__icon-btn${colsOpen ? ' ogx-toolbar__icon-btn--active' : ''}`}
-                                        aria-label="Manage columns"
+                                        aria-label={locale.toolbarColumnsLabel}
                                         aria-haspopup="dialog"
                                         aria-expanded={colsOpen}
                                         onClick={() => togglePanel('columns')}
@@ -740,19 +746,19 @@ export function GridToolbar({
                                 activeCount: activeFilterCount,
                             })
                             : (
-                                <GridTooltip title="Filters">
+                                <GridTooltip title={locale.toolbarFilters}>
                                     <button
                                         type="button"
                                         ref={filterButtonRef}
                                         className={`ogx-toolbar__icon-btn${filterOpen ? ' ogx-toolbar__icon-btn--active' : ''}`}
-                                        aria-label="Advanced filters"
+                                        aria-label={locale.toolbarFiltersLabel}
                                         aria-haspopup="dialog"
                                         aria-expanded={filterOpen}
                                         onClick={() => togglePanel('filters')}
                                     >
                                         <FilterIcon />
                                         {activeFilterCount > 0 && (
-                                            <span className="ogx-toolbar__dot" aria-label="Filters active" />
+                                            <span className="ogx-toolbar__dot" aria-label={locale.toolbarFiltersActive} />
                                         )}
                                     </button>
                                 </GridTooltip>
@@ -773,19 +779,19 @@ export function GridToolbar({
                 {/* Pivot button */}
                 {onPivotModelChange && (
                     <div className="ogx-toolbar__dropdown-wrapper" style={{ marginRight: 4 }}>
-                        <GridTooltip title="Pivot">
+                        <GridTooltip title={locale.toolbarPivot}>
                             <button
                                 type="button"
                                 ref={pivotButtonRef}
                                 className={`ogx-toolbar__icon-btn${pivotOpen ? ' ogx-toolbar__icon-btn--active' : ''}`}
-                                aria-label="Configure pivot"
+                                aria-label={locale.toolbarPivotLabel}
                                 aria-haspopup="dialog"
                                 aria-expanded={pivotOpen}
                                 onClick={() => togglePanel('pivot')}
                             >
                                 <PivotIcon />
                                 {pivotActive && (
-                                    <span className="ogx-toolbar__dot" aria-label="Pivot active" />
+                                    <span className="ogx-toolbar__dot" aria-label={locale.toolbarPivotActive} />
                                 )}
                             </button>
                         </GridTooltip>
@@ -812,19 +818,19 @@ export function GridToolbar({
                                 activeCount,
                             })
                             : (
-                                <GridTooltip title="Summaries">
+                                <GridTooltip title={locale.toolbarSummaries}>
                                     <button
                                         type="button"
                                         ref={aggButtonRef}
                                         className={`ogx-toolbar__icon-btn${aggOpen ? ' ogx-toolbar__icon-btn--active' : ''}`}
-                                        aria-label="Configure summaries"
+                                        aria-label={locale.toolbarSummariesLabel}
                                         aria-haspopup="dialog"
                                         aria-expanded={aggOpen}
                                         onClick={() => togglePanel('summaries')}
                                     >
                                         <SigmaIcon />
                                         {activeCount > 0 && (
-                                            <span className="ogx-toolbar__dot" aria-label={`${activeCount} active summaries`} />
+                                            <span className="ogx-toolbar__dot" aria-label={locale.toolbarSummariesActive(activeCount)} />
                                         )}
                                     </button>
                                 </GridTooltip>

package/lib/components/Toolbar/PivotPanel.tsx

@@ -4,6 +4,7 @@ import type { GridColDef } from '../../types';
 import type { GridPivotModel, GridPivotAggFn, GridPivotValueField } from '../../types';
 import { getViewportWidth } from '../../utils/viewport';
 import { getPanelPosition, type GridPanelPosition } from '../../utils/direction';
+import { useGridLocale } from '../DataGrid/gridLocaleContext';
 
 const AGG_FNS: GridPivotAggFn[] = ['sum', 'avg', 'count', 'min', 'max'];
 
@@ -31,6 +32,7 @@ export interface PivotPanelProps {
 }
 
 export function PivotPanel({ anchorRef, columns, model, onChange, onClose }: PivotPanelProps) {
+    const locale = useGridLocale();
     const panelRef = useRef<HTMLDivElement>(null);
     const [pos, setPos] = useState<GridPanelPosition>({ top: 0, right: 0 });
     const [portalContainer, setPortalContainer] = useState<Element | null>(null);
@@ -128,18 +130,18 @@ export function PivotPanel({ anchorRef, columns, model, onChange, onClose }: Piv
             ref={panelRef}
             className="ogx-pivot-panel"
             role="dialog"
-            aria-label="Pivot configuration"
+            aria-label={locale.pivotPanelLabel}
             style={{ top: pos.top, right: pos.right, left: pos.left }}
         >
             { }
             <div className="ogx-pivot-panel__header">
                 <span className="ogx-pivot-panel__title">
                     <PivotIcon />
-                    Pivot Mode
+                    {locale.pivotMode}
                 </span>
                 {totalActive > 0 && (
-                    <button type="button" className="ogx-pivot-panel__reset-btn" onClick={reset} title="Reset pivot">
-                        Reset
+                    <button type="button" className="ogx-pivot-panel__reset-btn" onClick={reset} title={locale.pivotResetTooltip}>
+                        {locale.pivotReset}
                     </button>
                 )}
             </div>
@@ -150,11 +152,11 @@ export function PivotPanel({ anchorRef, columns, model, onChange, onClose }: Piv
                 <div className="ogx-pivot-zone">
                     <span className="ogx-pivot-zone__label">
                         <span className="ogx-pivot-zone__dot ogx-pivot-zone__dot--row" />
-                        Row Fields
+                        {locale.pivotRowFields}
                     </span>
                     <div
                         className={`ogx-pivot-chips${model.rowFields.length === 0 ? ' ogx-pivot-chips--empty' : ''}`}
-                        data-placeholder="Add fields here — each becomes a row label"
+                        data-placeholder={locale.pivotRowFieldsPlaceholder}
                     >
                         {model.rowFields.map((f, i) => (
                             <span key={`${i}:${f}`} className="ogx-pivot-chip ogx-pivot-chip--row">
@@ -163,8 +165,8 @@ export function PivotPanel({ anchorRef, columns, model, onChange, onClose }: Piv
                                     type="button"
                                     className="ogx-pivot-chip__remove"
                                     onClick={() => removeRow(i)}
-                                    title={`Remove ${colLabel(f)}`}
-                                    aria-label={`Remove ${colLabel(f)} from Row Fields`}
+                                    title={locale.pivotRemoveTooltip(colLabel(f))}
+                                    aria-label={locale.pivotRemoveRowLabel(colLabel(f))}
                                 >×</button>
                             </span>
                         ))}
@@ -175,11 +177,11 @@ export function PivotPanel({ anchorRef, columns, model, onChange, onClose }: Piv
                 <div className="ogx-pivot-zone">
                     <span className="ogx-pivot-zone__label">
                         <span className="ogx-pivot-zone__dot ogx-pivot-zone__dot--col" />
-                        Column Fields
+                        {locale.pivotColumnFields}
                     </span>
                     <div
                         className={`ogx-pivot-chips${model.columnFields.length === 0 ? ' ogx-pivot-chips--empty' : ''}`}
-                        data-placeholder="Add fields here — unique values become column headers"
+                        data-placeholder={locale.pivotColumnFieldsPlaceholder}
                     >
                         {model.columnFields.map((f, i) => (
                             <span key={`${i}:${f}`} className="ogx-pivot-chip ogx-pivot-chip--col">
@@ -188,8 +190,8 @@ export function PivotPanel({ anchorRef, columns, model, onChange, onClose }: Piv
                                     type="button"
                                     className="ogx-pivot-chip__remove"
                                     onClick={() => removeCol(i)}
-                                    title={`Remove ${colLabel(f)}`}
-                                    aria-label={`Remove ${colLabel(f)} from Column Fields`}
+                                    title={locale.pivotRemoveTooltip(colLabel(f))}
+                                    aria-label={locale.pivotRemoveColumnLabel(colLabel(f))}
                                 >×</button>
                             </span>
                         ))}
@@ -200,11 +202,11 @@ export function PivotPanel({ anchorRef, columns, model, onChange, onClose }: Piv
                 <div className="ogx-pivot-zone">
                     <span className="ogx-pivot-zone__label">
                         <span className="ogx-pivot-zone__dot ogx-pivot-zone__dot--value" />
-                        Value Fields (aggregated)
+                        {locale.pivotValueFields}
                     </span>
                     <div
                         className={`ogx-pivot-chips${model.valueFields.length === 0 ? ' ogx-pivot-chips--empty' : ''}`}
-                        data-placeholder="Add numeric fields here — values are aggregated"
+                        data-placeholder={locale.pivotValueFieldsPlaceholder}
                     >
                         {model.valueFields.map((vf: GridPivotValueField, i) => {
                             const allowed = allowedFns(vf.field);
@@ -216,19 +218,19 @@ export function PivotPanel({ anchorRef, columns, model, onChange, onClose }: Piv
                                         className="ogx-pivot-chip__fn-select"
                                         value={vf.aggFn}
                                         onChange={(e) => changeValueFn(i, e.target.value as GridPivotAggFn)}
-                                        title="Aggregation function"
-                                        aria-label={`Aggregation function for ${colLabel(vf.field)}`}
+                                        title={locale.pivotAggregationTooltip}
+                                        aria-label={locale.pivotAggregationLabel(colLabel(vf.field))}
                                     >
                                         {fnOptions.map((fn) => (
-                                            <option key={fn} value={fn}>{fn.toUpperCase()}</option>
+                                            <option key={fn} value={fn}>{locale.pivotAggregationFunction(fn)}</option>
                                         ))}
                                     </select>
                                     <button
                                         type="button"
                                         className="ogx-pivot-chip__remove"
                                         onClick={() => removeValue(i)}
-                                        title={`Remove ${colLabel(vf.field)}`}
-                                        aria-label={`Remove ${colLabel(vf.field)} (${vf.aggFn.toUpperCase()}) from Value Fields`}
+                                        title={locale.pivotRemoveTooltip(colLabel(vf.field))}
+                                        aria-label={locale.pivotRemoveValueLabel(colLabel(vf.field), locale.pivotAggregationFunction(vf.aggFn))}
                                     >×</button>
                                 </span>
                             );
@@ -240,7 +242,7 @@ export function PivotPanel({ anchorRef, columns, model, onChange, onClose }: Piv
 
                 { }
                 <div>
-                    <div className="ogx-pivot-panel__fields-label">Available Fields</div>
+                    <div className="ogx-pivot-panel__fields-label">{locale.pivotAvailableFields}</div>
                     <div className="ogx-pivot-fields">
                         {availableColumns.map((col) => {
                             const isNum = canBeValue(col);
@@ -253,13 +255,13 @@ export function PivotPanel({ anchorRef, columns, model, onChange, onClose }: Piv
                                     </span>
                                     <div className="ogx-pivot-field-actions">
                                         {isDimension && (
-                                            <button type="button" className="ogx-pivot-add-btn ogx-pivot-add-btn--row" onClick={() => addRow(col.field)} title="Add to Row Fields" aria-label={`Add ${label} to Row Fields`}>Row</button>
+                                            <button type="button" className="ogx-pivot-add-btn ogx-pivot-add-btn--row" onClick={() => addRow(col.field)} title={locale.pivotAddRowTooltip} aria-label={locale.pivotAddRowLabel(label)}>{locale.pivotAddRow}</button>
                                         )}
                                         {isDimension && (
-                                            <button type="button" className="ogx-pivot-add-btn ogx-pivot-add-btn--col" onClick={() => addCol(col.field)} title="Add to Column Fields" aria-label={`Add ${label} to Column Fields`}>Col</button>
+                                            <button type="button" className="ogx-pivot-add-btn ogx-pivot-add-btn--col" onClick={() => addCol(col.field)} title={locale.pivotAddColumnTooltip} aria-label={locale.pivotAddColumnLabel(label)}>{locale.pivotAddColumn}</button>
                                         )}
                                         {isNum && (
-                                            <button type="button" className="ogx-pivot-add-btn ogx-pivot-add-btn--value" onClick={() => addValue(col.field)} title="Add to Value Fields" aria-label={`Add ${label} to Value Fields`}>Val</button>
+                                            <button type="button" className="ogx-pivot-add-btn ogx-pivot-add-btn--value" onClick={() => addValue(col.field)} title={locale.pivotAddValueTooltip} aria-label={locale.pivotAddValueLabel(label)}>{locale.pivotAddValue}</button>
                                         )}
                                     </div>
                                 </div>
@@ -267,7 +269,7 @@ export function PivotPanel({ anchorRef, columns, model, onChange, onClose }: Piv
                         })}
                         {availableColumns.length === 0 && (
                             <span style={{ fontSize: 12, color: 'var(--ogx-color-gray-400, #94a3b8)' }}>
-                                All fields are in use.
+                                {locale.pivotAllFieldsInUse}
                             </span>
                         )}
                     </div>

package/lib/components/ui/Checkbox.css

@@ -26,7 +26,7 @@
   border-radius: 4px;
   background: var(--ogx-checkbox-bg, var(--ogx-color-white));
   transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
-  color: white; 
+  color: var(--ogx-checkbox-checkmark, white);
   flex-shrink: 0;
 }
 .ogx-checkbox__icon {
@@ -43,15 +43,15 @@
   line-height: 1;
 }
 .ogx-checkbox__input:checked + .ogx-checkbox__box {
-  background: var(--ogx-color-primary);
-  border-color: var(--ogx-color-primary);
+  background: var(--ogx-checkbox-checked-bg, var(--ogx-color-primary));
+  border-color: var(--ogx-checkbox-checked-bg, var(--ogx-color-primary));
 }
 .ogx-checkbox__input:checked + .ogx-checkbox__box .ogx-checkbox__icon {
   transform: scale(1);
 }
 .ogx-checkbox__input:indeterminate + .ogx-checkbox__box {
-  background: var(--ogx-color-primary);
-  border-color: var(--ogx-color-primary);
+  background: var(--ogx-checkbox-checked-bg, var(--ogx-color-primary));
+  border-color: var(--ogx-checkbox-checked-bg, var(--ogx-color-primary));
 }
 .ogx-checkbox__input:indeterminate + .ogx-checkbox__box .ogx-checkbox__icon {
   transform: scale(1);

package/lib/components/ui/DragHandleIcon.tsx

@@ -1,13 +1,15 @@
 import React from 'react';
+import { useGridLocale } from '../DataGrid/gridLocaleContext';
 
 export type DragHandleIconProps = React.ButtonHTMLAttributes<HTMLButtonElement>;
 
 export const DragHandleIcon: React.FC<DragHandleIconProps> = ({ className = '', ...props }) => {
+    const locale = useGridLocale();
     return (
         <button
             type="button"
             className={`ogx-drag-handle ${className}`}
-            aria-label="Drag to reorder row"
+            aria-label={locale.rowReorderLabel}
             {...props}
         >
             <svg viewBox="0 0 24 24" width="20" height="20" fill="currentColor" aria-hidden="true">

package/lib/components/ui/ExpandIcon.css

@@ -8,13 +8,13 @@
   border: none;
   background: transparent;
   cursor: pointer;
-  color: var(--ogx-grid-header-text);
+  color: var(--ogx-expand-icon-color, var(--ogx-grid-header-text));
   transition: color 0.2s ease;
   border-radius: 4px;
 }
 .ogx-expand-icon:hover {
-  background: transparent; 
-  color: var(--ogx-grid-row-text);
+  background: transparent;
+  color: var(--ogx-expand-icon-hover-color, var(--ogx-grid-row-text));
 }
 .ogx-expand-icon:focus {
   outline: none; 

package/lib/components/ui/ExpandIcon.tsx

@@ -1,5 +1,6 @@
 
 import React from 'react';
+import { useGridLocale } from '../DataGrid/gridLocaleContext';
 
 export interface ExpandIconProps {
     isExpanded: boolean;
@@ -10,6 +11,7 @@ export interface ExpandIconProps {
 }
 
 export function ExpandIcon({ isExpanded, onClick, variant = 'chevron', tabIndex }: ExpandIconProps) {
+    const locale = useGridLocale();
     return (
         <button
             className={`ogx-expand-icon ${isExpanded ? 'ogx-expand-icon--expanded' : ''}`}
@@ -18,7 +20,7 @@ export function ExpandIcon({ isExpanded, onClick, variant = 'chevron', tabIndex
                     onClick(e);
                 }
             }}
-            aria-label={isExpanded ? 'Collapse row' : 'Expand row'}
+            aria-label={isExpanded ? locale.rowCollapseLabel : locale.rowExpandLabel}
             type="button"
             tabIndex={tabIndex}
         >

package/lib/hooks/core/useGridRowInteractions.ts

@@ -1,4 +1,4 @@
-import { useCallback, useMemo } from 'react';
+import { useCallback, useLayoutEffect, useMemo, useRef } from 'react';
 import { useGridRowSelection, type UseGridRowSelectionReturn } from './useGridRowSelection';
 import { PIVOT_GRAND_TOTAL_ID } from '../../utils/pivot';
 import { isSyntheticRowId } from '../../utils/syntheticRows';
@@ -56,7 +56,7 @@ export function useGridRowInteractions<R extends GridRowModel>(
     // handlers keep their identity and memoised rows do not re-render.
     const { clickRow, toggleRow } = rowSelection;
 
-    const handleRowClick = useCallback((rowParams: GridRowParams<R>) => {
+    const rowClick = useCallback((rowParams: GridRowParams<R>) => {
         const { id } = rowParams;
 
         // Synthetic group rows toggle on click and are never selected. Tree-data parents are real rows:
@@ -77,10 +77,20 @@ export function useGridRowInteractions<R extends GridRowModel>(
 
     // Honors disableMultipleRowSelection like a row click does. Synthetic group / subtotal rows
     // and the pivot Grand Total are not data: their ids never enter the selection model.
-    const handleSelectionChange = useCallback((rowId: GridRowId, isSelected: boolean) => {
+    const selectionChange = useCallback((rowId: GridRowId, isSelected: boolean) => {
         if (isSyntheticRowId(rowId, rowMetaMap)) return;
         toggleRow(rowId, isSelected);
     }, [rowMetaMap, toggleRow]);
 
+    // Rows receive these handlers and are memoised on their props: stable identities (reading the
+    // latest handlers at event time) keep a selection change from re-rendering every visible row.
+    const latestRef = useRef({ rowClick, selectionChange });
+    useLayoutEffect(() => { latestRef.current = { rowClick, selectionChange }; });
+    const handleRowClick = useCallback((rowParams: GridRowParams<R>) => latestRef.current.rowClick(rowParams), []);
+    const handleSelectionChange = useCallback(
+        (rowId: GridRowId, isSelected: boolean) => latestRef.current.selectionChange(rowId, isSelected),
+        []
+    );
+
     return { rowSelection, handleRowClick, handleSelectionChange };
 }

package/lib/hooks/core/useGridToolbarStack.ts

@@ -13,7 +13,7 @@ export type GridToolbarStackToolbarParams<R extends GridRowModel> = Omit<UseGrid
 export interface UseGridToolbarStackParams<R extends GridRowModel> {
     apiRef: MutableRefObject<GridApi>;
     containerRef: RefObject<HTMLDivElement | null>;
-    aiAssistant: Omit<UseGridAiAssistantParams, 'apiRef'>;
+    aiAssistant: Omit<UseGridAiAssistantParams, 'apiRef' | 'localeText'>;
     toolbar: GridToolbarStackToolbarParams<R>;
     localeText: GridLocaleText | undefined;
 }
@@ -30,7 +30,7 @@ export function useGridToolbarStack<R extends GridRowModel>(params: UseGridToolb
     useGridStylesheetWarning(containerRef);
 
     // The aiAssistant prompt panel (v3.5): applies validated replies through apiRef; apiRef.openAiAssistant.
-    const aiAssistantPanel = useGridAiAssistant({ apiRef, ...aiAssistant });
+    const aiAssistantPanel = useGridAiAssistant({ apiRef, localeText, ...aiAssistant });
 
     const toolbarProps = useGridToolbarProps<R>({
         ...toolbar,