@opencorestack/opengridx 3.8.1 → 3.9.0

package/docs/API_REFERENCE.md

@@ -243,7 +243,7 @@ Public CSS: `ogx__cell-fill-handle` (24 × 24 px hit area in the corner cell; th
 
 | Prop | Type | Default | Description |
 | :--- | :--- | :--- | :--- |
-| `localeText` | `GridLocaleText` | — | Override user-visible strings: the Pagination labels, the empty-state label (`noRowsLabel`, which wins over the `noRowsLabel` prop), the cell-range announcement, the Ask AI button (`aiAssistantButton`) and the header filter row (`headerFilter*`, v3.6). See [`GridLocaleText`](#gridlocaletext). |
+| `localeText` | `GridLocaleText` | — | Override user-visible strings: the Pagination labels, the empty-state label (`noRowsLabel`, which wins over the `noRowsLabel` prop), the cell-range announcement, the Ask AI button (`aiAssistantButton`), the header filter row (`headerFilter*`, v3.6) and, since v3.9, every other built-in string (toolbar, column menu, filter, columns, pivot and AI panels, rows, overlays, live region). See [`GridLocaleText`](#gridlocaletext). |
 
 #### Imperative Ref
 
@@ -663,8 +663,8 @@ Context provider for overriding the grid's visual system.
 - **`colors`**: `primary`, `primaryDark`, `primaryLight`, `primaryFocus`, `secondary*`, `success`, `warning`, `error`, `info`, `white`, `black`, `gray` (`{ 50 … 900 }`). Toolbar, menu, selection and focus accents derive from `primary*` unless set directly.
 - **`typography`**: `fontFamily`, `fontFamilyMono`, `fontSizeXs` … `fontSizeXl`.
 - **`spacing`**: `xs` … `xxl`. **`borders`**: `widthThin/Medium/Thick`, `radiusSm` … `radiusXl`, `color`, `colorHover`. **`shadows`**: `sm` … `xl`.
-- **`grid`**: surfaces (`background`, `borderColor`, `headerBackground`, `headerText`, `headerHoverBackground`, `headerSortedBackground`, `rowText`, `rowHoverBackground`, `rowAlternateBackground`, `rowSelectedBackground`, `rowSelectedHoverBackground`, `cellFocusBorder`, `rangeBackground`, `rangeBorder` (v3.3), `pinnedLeftShadow`, `pinnedRightShadow`, `checkboxBg`, `checkboxBorder`), sizing (`rowHeightCompact`, `rowHeightStandard`, `rowHeightComfortable`, `headerHeight` in px, read by the grid's layout; the `rowHeight` / `headerHeight` props win), `cellPaddingX`, `cellPaddingY`, `cellFontSize`, `headerFontSize`; v3.7: fonts (`headerFontFamily`, `headerFontWeight`, `cellFontFamily`, `cellFontWeight`), `headerPaddingX`, outer `borderWidth` and `borderRadius`, dividers (`columnDividerWidth`, `headerColumnDividerWidth`, `rowDividerWidth`, `columnDividerColor`, `rowDividerColor`; `0` hides a divider).
-- **`overlays`**: colours (`background`, `text`, `border`, `shadow`, `item*`) and, v3.7, `fontFamily`, `fontWeight`, `fontSize` for menus and panels.
+- **`grid`**: surfaces (`background`, `borderColor`, `headerBackground`, `headerText`, `headerHoverBackground`, `headerSortedBackground`, `rowText`, `rowHoverBackground`, `rowAlternateBackground`, `rowSelectedBackground`, `rowSelectedHoverBackground`, `cellFocusBorder`, `rangeBackground`, `rangeBorder` (v3.3), `pinnedLeftShadow`, `pinnedRightShadow`, `checkboxBg`, `checkboxBorder`; v3.9: `checkboxCheckedBackground`, `checkboxCheckmark`, `expandIconColor`, `expandIconHoverColor`), sizing (`rowHeightCompact`, `rowHeightStandard`, `rowHeightComfortable`, `headerHeight` in px, read by the grid's layout; the `rowHeight` / `headerHeight` props win), `cellPaddingX`, `cellPaddingY`, `cellFontSize`, `headerFontSize`; v3.7: fonts (`headerFontFamily`, `headerFontWeight`, `cellFontFamily`, `cellFontWeight`), `headerPaddingX`, outer `borderWidth` and `borderRadius`, dividers (`columnDividerWidth`, `headerColumnDividerWidth`, `rowDividerWidth`, `columnDividerColor`, `rowDividerColor`; `0` hides a divider).
+- **`overlays`**: colours (`background`, `text`, `border`, `shadow`, `item*`) and, v3.7, `fontFamily`, `fontWeight`, `fontSize` for menus and panels; v3.9: `itemIndicatorColor` (the selection dot), `itemSelectedIcon`, `iconColor`, `sectionLabelText`, `dividerColor`.
 - **`toolbar`**, **`scrollbar`** (`thumbColor`, `trackColor`, `size`), **`skeleton`** (`baseColor`, `highlightColor`), **`transitions`**.
 
 #### Theme types
@@ -906,7 +906,7 @@ interface GridPivotValueField {
 
 ### `GridLocaleText`
 
-Override user-visible strings in the Pagination component and the empty state. All fields are optional.
+Override the grid's user-visible strings (visible text, `aria-label`, `title`, placeholder). All fields are optional; each one left out keeps its English default. Strings that contain a value (a header, a row id, a count) are functions.
 
 ```typescript
 interface GridLocaleText {
@@ -931,9 +931,98 @@ interface GridLocaleText {
   headerFilterTrue?: string;                        // "Yes"
   headerFilterFalse?: string;                       // "No"
   headerFilterOperators?: Partial<Record<GridFilterOperator, string>>; // operator names
+
+  // ── v3.9: every other UI string (default English shown) ──
+  // Grid, list view, overlays, live region
+  gridLabel; listViewLabel;                          // "Data grid", "Data grid list view" (the aria-label prop wins)
+  listViewItemCount(n); listViewPage(p, pc); listViewSelectedCount(n); // "3 items", "page 1 of 2", "2 selected"
+  loadingLabel; liveRegionLoading;                   // "Loading data", "Loading data..."
+  liveRegionError(message); liveRegionRowsFound(n);  // "Error: …", "4 rows found"
+  errorOverlayTitle; errorOverlayRetry;              // "Oops! Something went wrong", "Retry"
+  aggregationFooterLabel;                            // "Aggregation totals"
+  cellErrorLabel(field); cellErrorTooltip;           // "Error in cell: name", "Render error"
+  // Header
+  headerRowReorderLabel; headerRowReorderTooltip; headerDetailPanelLabel;
+  headerSelectAllLabel; headerDeselectAllLabel;      // "Select all rows", "Deselect all rows"
+  headerSortDescription(direction, priority, total); // "Sorted ascending, sort priority 1 of 2"
+  headerColumnMenuButtonLabel(header);               // "Open column menu for Name"
+  headerColumnResizeLabel(field); headerFilterNoFilterLabel(header);
+  // Rows
+  rowSelectLabel(id); rowDeselectLabel(id);          // "Select row 1", "Deselect row 1"
+  rowReorderLabel; rowDetailPanelExpandLabel; rowDetailPanelCollapseLabel; rowExpandLabel; rowCollapseLabel;
+  // Column menu
+  columnMenuLabel(header); columnMenuSortAscending; columnMenuSortDescending; columnMenuUnsort;
+  columnMenuPinColumn; columnMenuPinLeft; columnMenuPinLeftLabel; columnMenuPinRight; columnMenuPinRightLabel;
+  columnMenuUnpin; columnMenuUnpinLabel; columnMenuHideColumn; columnMenuHideColumnLabel(header);
+  columnMenuManageColumns; columnMenuManageColumnsLabel;
+  // Columns panel
+  columnsPanelSearchPlaceholder; columnsPanelDragToReorder; columnsPanelShowHideAll; columnsPanelReset; columnsPanelClose;
+  // Filter panel
+  filterPanelValueLabel(header); filterPanelOperatorLabel(header); filterPanelClearLabel(header); filterPanelClearTooltip;
+  filterPanelAny; filterPanelTrue; filterPanelFalse; filterPanelNumberPlaceholder; filterPanelValuePlaceholder;
+  filterPanelMatch; filterPanelAnd; filterPanelOr; filterPanelHiddenConditions(n); filterPanelNoColumns;
+  filterPanelOperators;                              // Partial<Record<GridFilterOperator, string>>, default: the operator id
+  // Toolbar and search (toolbarSearchPlaceholder also for QuickFilter)
+  toolbarLabel; toolbarSearchPlaceholder; toolbarSearchLabel; toolbarSearchClear;
+  toolbarColumns; toolbarColumnsLabel; toolbarColumnsPanelLabel;
+  toolbarFilters; toolbarFiltersLabel; toolbarFiltersActive; toolbarFiltersClearAll; toolbarFiltersClearAllTooltip;
+  toolbarFiltersClose; toolbarFiltersCloseTooltip; toolbarFiltersCloseLabel;
+  toolbarPivot; toolbarPivotLabel; toolbarPivotActive;
+  toolbarSummaries; toolbarSummariesLabel; toolbarSummariesActive(n); toolbarSummariesPanelLabel;
+  toolbarSummariesClearAll; toolbarSummariesClearAllTooltip; toolbarSummariesEmpty;
+  toolbarSummariesEmptyHintBefore; toolbarSummariesEmptyHintAfter;
+  toolbarAggregationFunctions;                       // Partial<Record<string, string>>, default: the function id
+  // Pivot panel
+  pivotPanelLabel; pivotMode; pivotReset; pivotResetTooltip;
+  pivotRowFields; pivotColumnFields; pivotValueFields;
+  pivotRowFieldsPlaceholder; pivotColumnFieldsPlaceholder; pivotValueFieldsPlaceholder;
+  pivotRemoveTooltip(header); pivotRemoveRowLabel(header); pivotRemoveColumnLabel(header); pivotRemoveValueLabel(header, fn);
+  pivotAggregationTooltip; pivotAggregationLabel(header);
+  pivotAggregationFunctions;                         // Partial<Record<string, string>>, default: the id in upper case
+  pivotAvailableFields; pivotAllFieldsInUse; pivotAddRow; pivotAddColumn; pivotAddValue;
+  pivotAddRowTooltip; pivotAddColumnTooltip; pivotAddValueTooltip;
+  pivotAddRowLabel(header); pivotAddColumnLabel(header); pivotAddValueLabel(header);
+  // AI assistant panel (aiAssistant.placeholder wins over aiAssistantPlaceholder)
+  aiAssistantTitle; aiAssistantClose; aiAssistantPromptLabel; aiAssistantPlaceholder;
+  aiAssistantStartDictation; aiAssistantStopDictation; aiAssistantAsk; aiAssistantStop; aiAssistantSuggestions;
+  aiAssistantAppliedChanges; aiAssistantRemoveChange(label); aiAssistantUndo; aiAssistantIgnored; aiAssistantIgnoredItem(message);
+  aiAssistantEarlier; aiAssistantThinking; aiAssistantStopped; aiAssistantUndone; aiAssistantChangeRemoved;
+  aiAssistantApplied(applied, ignored); aiAssistantNotValidated; aiAssistantFailed(message); aiAssistantUnknownError;
+  // Pagination buttons
+  paginationLabel; paginationFirstPageLabel; paginationFirstPageTooltip; paginationPreviousPageLabel;
+  paginationPreviousPageTooltip; paginationNextPageLabel; paginationNextPageTooltip;
+  paginationLastPageLabel; paginationLastPageTooltip;
+  // Cell selection stats bar
+  cellSelectionStatsCount; cellSelectionStatsSum; cellSelectionStatsAverage;
 }
 ```
 
+Each key's English default and parameter types are documented on `GridLocaleText` in `lib/types/locale.ts` (shown by editors on hover).
+
+### Locale text for every UI string (v3.9)
+
+Since v3.9 every built-in string of the grid goes through `localeText`: the toolbar and its panels, the column menu, the filter, columns, pivot and AI assistant panels, the row and select-all checkboxes, the pagination buttons, the loading and error overlays, the aggregation footer and the live-region announcements. Pass only the keys you translate; the rest stay English.
+
+```tsx
+<DataGrid
+  rows={rows}
+  columns={columns}
+  slots={{ toolbar: GridToolbar }}
+  localeText={{
+    toolbarSearchPlaceholder: 'Rechercher…',
+    columnMenuSortAscending: 'Tri croissant',
+    columnMenuHideColumnLabel: (header) => `Masquer la colonne ${header}`,
+    filterPanelOperators: { contains: 'contient' },
+    rowSelectLabel: (id) => `Sélectionner la ligne ${id}`,
+  }}
+/>
+```
+
+- The strings reach portalled menus and panels through React context, so a custom toolbar slot that renders the built-in `GridToolbar` is translated too.
+- Components used outside a grid (`ColumnVisibilityPanel`, `GridToolbar`, `FilterPanel`, `Pagination`, `QuickFilter`) show English. Their own props (`placeholder`, `aiAssistantLabel`, `Pagination`'s `localeText`) still win.
+- Not covered: the grouping column's default header (`'Group'`, set `groupingColDef.headerName`), pivot's `'Grand Total'` row label, export file contents, the AI change chips' labels, and developer console warnings.
+- An inline object of strings is fine: while it holds the same entries as on the previous render (records such as `filterPanelOperators` compared one level deep), the grid keeps the resolved strings and the rows are not re-rendered. Functions are compared by identity, so define function entries (`rowSelectLabel: id => …`) outside the render, or keep the whole object in a module constant or `useMemo`.
+
 ### `GridRowMeta`
 
 Available via `params.rowMeta` in `renderCell`. Undefined for non-hierarchy rows.

package/docs/customization/theming.md

@@ -262,8 +262,12 @@ For visible gaps between cells instead of lines, set the divider colour to the g
 | `--ogx-fill-handle-color` | `var(--ogx-range-border)` | `var(--ogx-range-border)` | The fill handle square (`ogx__cell-fill-handle`, v3.5). Unset in the stylesheet, where it falls back to `--ogx-range-border`; every theme of `DataGridThemeProvider` sets it to `var(--ogx-range-border)`. Theme key `grid.fillHandleColor` |
 | `--ogx-grid-pinned-left-shadow` | `4px 0 24px...` | (darker) | Shadow on left-pinned columns |
 | `--ogx-grid-pinned-right-shadow` | `-4px 0 24px...` | (darker) | Shadow on right-pinned columns |
-| `--ogx-checkbox-bg` | — | `#1e293b` | Checkbox background (dark only) |
-| `--ogx-checkbox-border` | — | `#64748b` | Checkbox border (dark only) |
+| `--ogx-checkbox-bg` | — | `#1e293b` | Checkbox background (dark only). Theme key `grid.checkboxBg` |
+| `--ogx-checkbox-border` | — | `#64748b` | Checkbox border (dark only). Theme key `grid.checkboxBorder` |
+| `--ogx-checkbox-checked-bg` | primary | primary | Fill and border of a checked or indeterminate checkbox (v3.9). Theme key `grid.checkboxCheckedBackground` |
+| `--ogx-checkbox-checkmark` | `white` | `white` | Check mark and indeterminate dash (v3.9). Theme key `grid.checkboxCheckmark` |
+| `--ogx-expand-icon-color` | header text | header text | Expand / collapse chevron of group and tree rows (v3.9). Theme key `grid.expandIconColor` |
+| `--ogx-expand-icon-hover-color` | row text | row text | The chevron on hover (v3.9). Theme key `grid.expandIconHoverColor` |
 
 ### Toolbar, Overlay and Scrollbar Colors
 
@@ -282,6 +286,11 @@ Read with a fallback, so a grid without a provider looks the same as before. Ins
 | `--ogx-overlay-*` | `overlays.*` | white surface, gray border | Menus, panels, tooltips |
 | `--ogx-overlay-item-selected-bg` / `-text` | `overlays.itemSelected*` | 8% primary / primary-dark | Selected menu item |
 | `--ogx-overlay-item-danger-bg` / `-text` | `overlays.itemDanger*` | red tints | Remove-condition button in the filter panel |
+| `--ogx-overlay-item-indicator` | `overlays.itemIndicatorColor` (v3.9) | the selected item text | Dot before the selected option of a menu group (sort, pin) |
+| `--ogx-overlay-item-selected-icon` | `overlays.itemSelectedIcon` (v3.9) | primary | Icon of the selected menu option |
+| `--ogx-overlay-icon` | `overlays.iconColor` (v3.9) | gray-400 | Menu item icons |
+| `--ogx-overlay-section-label-text` | `overlays.sectionLabelText` (v3.9) | gray-400 | Menu section labels ("Pin column") |
+| `--ogx-overlay-divider` | `overlays.dividerColor` (v3.9) | overlay border | Lines between menu sections |
 | `--ogx-scrollbar-thumb` / `-track` / `-size` | `scrollbar.thumbColor` / `trackColor` / `size` | gray-300 / transparent / 8px | Grid viewport scrollbars |
 | `--ogx-skeleton-base` / `-highlight` | `skeleton.baseColor` / `highlightColor` | light grays | Loading skeleton rows |
 

package/docs/features/ai-toolkit.md

@@ -1,6 +1,6 @@
 # AI Toolkit: Schema, Validator, Assistant & Agent Tools
 
-*Since v3.4.0 (schema and validator); v3.5.0 (assistant panel, prompt handler, agent tools)* · Demos: [AI: Grid Schema & Validator](https://opencorestack.github.io/OpenGridX/ai-schema), [AI Assistant](https://opencorestack.github.io/OpenGridX/ai-assistant)
+*Since v3.4.0 (schema and validator); v3.5.0 (assistant panel, prompt handler, agent tools)* · Demos: [Grid Schema & Validator](https://opencorestack.github.io/OpenGridX/ai-schema), [AI Assistant](https://opencorestack.github.io/OpenGridX/ai-assistant)
 
 Let users drive the grid in plain language ("paid orders over $10k in the North, biggest first") with the model your app already uses. The `@opencorestack/opengridx/ai` entry point gives you the pieces the grid can own:
 

package/lib/components/AiAssistant/GridAiAssistantPanel.tsx

@@ -3,6 +3,7 @@ import type { GridAiAssistantPanelProps } from '../../types';
 import { Button } from '../ui/Button';
 import { Input } from '../ui/Input';
 import { useSpeechInput } from './useSpeechInput';
+import { useGridLocale } from '../DataGrid/gridLocaleContext';
 
 /** The sparkle of the Ask AI button and the panel title. */
 export function AiSparkleIcon() {
@@ -33,6 +34,7 @@ export function GridAiAssistantPanel(props: GridAiAssistantPanelProps) {
         status, statusText, message, errors, chips, history, suggestions, placeholder, voiceAvailable, canUndo,
         submit, stop, undo, removeChip, close,
     } = props;
+    const locale = useGridLocale();
     const [text, setText] = useState('');
     const inputRef = useRef<HTMLInputElement>(null);
     const speech = useSpeechInput(setText);
@@ -59,10 +61,10 @@ export function GridAiAssistantPanel(props: GridAiAssistantPanelProps) {
     };
 
     return (
-        <div className="ogx-ai-panel" role="dialog" aria-label="Ask AI">
+        <div className="ogx-ai-panel" role="dialog" aria-label={locale.aiAssistantTitle}>
             <div className="ogx-ai-panel__header">
-                <span className="ogx-ai-panel__title"><AiSparkleIcon />Ask AI</span>
-                <Button size="small" className="ogx-ai-panel__close" aria-label="Close" onClick={close}>×</Button>
+                <span className="ogx-ai-panel__title"><AiSparkleIcon />{locale.aiAssistantTitle}</span>
+                <Button size="small" className="ogx-ai-panel__close" aria-label={locale.aiAssistantClose} onClick={close}>×</Button>
             </div>
 
             <form className="ogx-ai-panel__form" onSubmit={handleSubmit}>
@@ -71,7 +73,7 @@ export function GridAiAssistantPanel(props: GridAiAssistantPanelProps) {
                     className="ogx-ai-panel__input"
                     value={text}
                     placeholder={placeholder}
-                    aria-label="Prompt"
+                    aria-label={locale.aiAssistantPromptLabel}
                     autoComplete="off"
                     onChange={(event) => setText(event.target.value)}
                 />
@@ -80,7 +82,7 @@ export function GridAiAssistantPanel(props: GridAiAssistantPanelProps) {
                         size="small"
                         variant="outlined"
                         className={`ogx-ai-panel__mic${speech.listening ? ' ogx-ai-panel__mic--on' : ''}`}
-                        aria-label={speech.listening ? 'Stop dictation' : 'Dictate a prompt'}
+                        aria-label={speech.listening ? locale.aiAssistantStopDictation : locale.aiAssistantStartDictation}
                         aria-pressed={speech.listening}
                         onClick={speech.toggle}
                     >
@@ -89,12 +91,12 @@ export function GridAiAssistantPanel(props: GridAiAssistantPanelProps) {
                 )}
                 {/* Separate keys: one reused <button> would turn into the submit button during the Stop click and submit again. */}
                 {running
-                    ? <Button key="stop" size="small" variant="outlined" onClick={thenFocusInput(stop)}>Stop</Button>
-                    : <Button key="ask" size="small" variant="contained" color="primary" type="submit" disabled={text.trim() === ''}>Ask</Button>}
+                    ? <Button key="stop" size="small" variant="outlined" onClick={thenFocusInput(stop)}>{locale.aiAssistantStop}</Button>
+                    : <Button key="ask" size="small" variant="contained" color="primary" type="submit" disabled={text.trim() === ''}>{locale.aiAssistantAsk}</Button>}
             </form>
 
             {suggestions.length > 0 && (
-                <div className="ogx-ai-panel__suggestions" aria-label="Suggestions" role="group">
+                <div className="ogx-ai-panel__suggestions" aria-label={locale.aiAssistantSuggestions} role="group">
                     {suggestions.map((suggestion) => (
                         <button key={suggestion} type="button" className="ogx-ai-panel__suggestion" disabled={running} onClick={() => send(suggestion)}>
                             {suggestion}
@@ -108,29 +110,29 @@ export function GridAiAssistantPanel(props: GridAiAssistantPanelProps) {
 
             {(chips.length > 0 || canUndo) && (
                 <div className="ogx-ai-panel__changes">
-                    <ul className="ogx-ai-panel__chips" aria-label="Applied changes">
+                    <ul className="ogx-ai-panel__chips" aria-label={locale.aiAssistantAppliedChanges}>
                         {chips.map((chip) => (
                             <li key={chip.id} className="ogx-ai-chip" data-part={chip.part}>
                                 <span className="ogx-ai-chip__label">{chip.label}</span>
-                                <button type="button" className="ogx-ai-chip__remove" aria-label={`Remove ${chip.label}`} onClick={thenFocusInput(() => removeChip(chip.id))}>×</button>
+                                <button type="button" className="ogx-ai-chip__remove" aria-label={locale.aiAssistantRemoveChange(chip.label)} onClick={thenFocusInput(() => removeChip(chip.id))}>×</button>
                             </li>
                         ))}
                     </ul>
-                    {canUndo && <Button size="small" variant="outlined" className="ogx-ai-panel__undo" onClick={thenFocusInput(undo)}>Undo</Button>}
+                    {canUndo && <Button size="small" variant="outlined" className="ogx-ai-panel__undo" onClick={thenFocusInput(undo)}>{locale.aiAssistantUndo}</Button>}
                 </div>
             )}
 
             {errors.length > 0 && (
-                <ul className="ogx-ai-panel__errors" aria-label="Ignored">
+                <ul className="ogx-ai-panel__errors" aria-label={locale.aiAssistantIgnored}>
                     {errors.map((error, i) => (
-                        <li key={`${error.path}:${i}`}>{error.path ? `Ignored: ${error.message}` : error.message}</li>
+                        <li key={`${error.path}:${i}`}>{error.path ? locale.aiAssistantIgnoredItem(error.message) : error.message}</li>
                     ))}
                 </ul>
             )}
 
             {history.length > 0 && (
                 <div className="ogx-ai-panel__history">
-                    <div className="ogx-ai-panel__history-title">Earlier</div>
+                    <div className="ogx-ai-panel__history-title">{locale.aiAssistantEarlier}</div>
                     <ul>
                         {history.map((entry, i) => (
                             <li key={`${i}:${entry.prompt}`}>

package/lib/components/Cell/CellErrorBoundary.tsx

@@ -1,4 +1,5 @@
 import React from 'react';
+import { useGridLocale } from '../DataGrid/gridLocaleContext';
 
 // Must live at module scope (not inline) so React sees a stable component type.
 // Calling renderFn() here puts the throw one level BELOW CellErrorBoundary,
@@ -10,6 +11,21 @@ function CellRenderTarget({ renderFn }: { renderFn: () => React.ReactNode }) {
     return <>{renderFn()}</>;
 }
 
+/** The cell content after `renderCell` threw: a warning sign labelled with the field. */
+function CellErrorMarker({ field, message }: { field: string; message: string | undefined }) {
+    const locale = useGridLocale();
+    return (
+        <div
+            className="ogx__cell-error"
+            role="img"
+            aria-label={locale.cellErrorLabel(field)}
+            title={message ?? locale.cellErrorTooltip}
+        >
+            ⚠
+        </div>
+    );
+}
+
 interface CellErrorBoundaryProps {
     renderFn: () => React.ReactNode;
     field: string;
@@ -59,16 +75,7 @@ export class CellErrorBoundary extends React.Component<CellErrorBoundaryProps, C
 
     override render() {
         if (this.state.hasError) {
-            return (
-                <div
-                    className="ogx__cell-error"
-                    role="img"
-                    aria-label={`Error in cell: ${this.props.field}`}
-                    title={this.state.error?.message ?? 'Render error'}
-                >
-                    ⚠
-                </div>
-            );
+            return <CellErrorMarker field={this.props.field} message={this.state.error?.message} />;
         }
         return <CellRenderTarget renderFn={this.props.renderFn} />;
     }

package/lib/components/CellSelectionStats/CellSelectionStats.tsx

@@ -1,5 +1,6 @@
 import { formatAggregationValue } from '../../utils/aggregation';
 import type { GridCellSelectionStatsSlotProps } from '../../types';
+import { useGridLocale } from '../DataGrid/gridLocaleContext';
 
 export type CellSelectionStatsProps = GridCellSelectionStatsSlotProps & Record<string, unknown>;
 
@@ -9,21 +10,22 @@ export type CellSelectionStatsProps = GridCellSelectionStatsSlotProps & Record<s
  * @since v3.3
  */
 export function CellSelectionStats({ count, sum, average }: CellSelectionStatsProps) {
+    const locale = useGridLocale();
     return (
         <div className="ogx__cell-selection-stats">
             <span className="ogx__cell-selection-stat">
-                <span className="ogx__cell-selection-stat-label">Count</span>
+                <span className="ogx__cell-selection-stat-label">{locale.cellSelectionStatsCount}</span>
                 <span className="ogx__cell-selection-stat-value" data-stat="count">{count.toLocaleString()}</span>
             </span>
             {sum !== null && (
                 <span className="ogx__cell-selection-stat">
-                    <span className="ogx__cell-selection-stat-label">Sum</span>
+                    <span className="ogx__cell-selection-stat-label">{locale.cellSelectionStatsSum}</span>
                     <span className="ogx__cell-selection-stat-value" data-stat="sum">{formatAggregationValue(sum, 'sum')}</span>
                 </span>
             )}
             {average !== null && (
                 <span className="ogx__cell-selection-stat">
-                    <span className="ogx__cell-selection-stat-label">Average</span>
+                    <span className="ogx__cell-selection-stat-label">{locale.cellSelectionStatsAverage}</span>
                     <span className="ogx__cell-selection-stat-value" data-stat="average">{formatAggregationValue(average, 'avg')}</span>
                 </span>
             )}

package/lib/components/ColumnResizeHandle/ColumnResizeHandle.tsx

@@ -1,6 +1,7 @@
 import React, { useCallback, useEffect, useRef, useState } from 'react';
 import { clampResizeWidth } from './clampResizeWidth';
 import { isRtl, logicalArrowKey } from '../../utils/direction';
+import { useGridLocale } from '../DataGrid/gridLocaleContext';
 
 
 export interface ColumnResizeHandleProps {
@@ -49,6 +50,7 @@ function suppressNextClick(): void {
 
 export function ColumnResizeHandle(props: ColumnResizeHandleProps) {
     const { field, currentWidth, onResize, onAutosize, minWidth, maxWidth, edge = 'end' } = props;
+    const locale = useGridLocale();
     const [isDragging, setIsDragging] = useState(false);
     const activeRef = useRef<ActiveResize | null>(null);
 
@@ -164,7 +166,7 @@ export function ColumnResizeHandle(props: ColumnResizeHandleProps) {
             onKeyDown={handleKeyDown}
             role="separator"
             aria-orientation="vertical"
-            aria-label={`Resize ${field} column`}
+            aria-label={locale.headerColumnResizeLabel(field)}
             aria-valuenow={Math.round(currentWidth)}
             aria-valuemin={Math.round(Math.min(minWidth ?? 50, currentWidth))}
             aria-valuemax={maxWidth}

package/lib/components/ColumnVisibilityPanel/ColumnVisibilityPanel.tsx

@@ -1,6 +1,7 @@
 import { useState, useMemo, useRef, useId } from 'react';
 import { Checkbox } from '../ui/Checkbox';
 import { Input } from '../ui/Input';
+import { useGridLocale } from '../DataGrid/gridLocaleContext';
 import type { GridColDef, GridRowModel, GridValidRowModel } from '../../types';
 
 
@@ -48,6 +49,7 @@ export function ColumnVisibilityPanel<R extends GridValidRowModel = GridRowModel
     props: ColumnVisibilityPanelProps<R>
 ) {
     const { columns, visibleColumns, onVisibilityChange, onShowAll, onHideAll, onColumnReorder, onColumnOrderReset, showNonHideableColumns } = props;
+    const locale = useGridLocale();
     const [searchQuery, setSearchQuery] = useState('');
     // Each checkbox is named by a <label htmlFor> holding the column name. (Wrapping Checkbox,
     // which renders its own <label>, in another <label> nested labels and left the name to a
@@ -119,7 +121,7 @@ export function ColumnVisibilityPanel<R extends GridValidRowModel = GridRowModel
                     <Input
                         autoComplete="off"
                         inputClassName="ogx-column-visibility-panel__search-input"
-                        placeholder="Search"
+                        placeholder={locale.columnsPanelSearchPlaceholder}
                         value={searchQuery}
                         onChange={(e) => setSearchQuery(e.target.value)}
                     />
@@ -153,7 +155,7 @@ export function ColumnVisibilityPanel<R extends GridValidRowModel = GridRowModel
                                     className="ogx-column-visibility-panel__drag-handle-wrapper"
                                     draggable
                                     onDragStart={handleDragStart(col.field)}
-                                    title="Drag to reorder"
+                                    title={locale.columnsPanelDragToReorder}
                                 >
                                     <DragHandleIcon />
                                 </span>
@@ -185,7 +187,7 @@ export function ColumnVisibilityPanel<R extends GridValidRowModel = GridRowModel
                         onChange={handleToggleAll}
                     />
                     <label htmlFor={`${idBase}-all`} className="ogx-column-visibility-panel__label">
-                        Show/Hide All
+                        {locale.columnsPanelShowHideAll}
                     </label>
                 </div>
                 <button
@@ -193,7 +195,7 @@ export function ColumnVisibilityPanel<R extends GridValidRowModel = GridRowModel
                     className="ogx-column-visibility-panel__reset-btn"
                     onClick={() => { onShowAll(); onColumnOrderReset?.(); }}
                 >
-                    Reset
+                    {locale.columnsPanelReset}
                 </button>
             </div>
         </div>

package/lib/components/DataGrid/GridAggregationFooter.tsx

@@ -3,6 +3,7 @@ import { formatAggregateForColumn, isAggregationAllowed } from '../../utils/aggr
 import type { GridColDef, GridAggregationModel, GridAggregationResult, GridColumnPinning } from '../../types';
 import { calculatePinnedPositions, getPinnedEdgeFields, isColumnPinned } from '../../utils/pinning';
 import { getRenderedColumnWidth } from '../../utils/columnWidth';
+import { useGridLocale } from './gridLocaleContext';
 
 const SYSTEM_COLUMN_WIDTH = 48;
 
@@ -41,6 +42,7 @@ export function GridAggregationFooter({
     pinnedColumns,
     loading = false,
 }: GridAggregationFooterProps) {
+    const locale = useGridLocale();
     // Same offsets as Row, so pinned totals sit exactly under their pinned body cells.
     const pinnedOffsets = useMemo(
         () => calculatePinnedPositions(
@@ -77,7 +79,7 @@ export function GridAggregationFooter({
         <div
             className={`ogx__aggregation-footer${loading ? ' ogx__aggregation-footer--loading' : ''}`}
             role="row"
-            aria-label="Aggregation totals"
+            aria-label={locale.aggregationFooterLabel}
             aria-live="polite"
             aria-busy={loading || undefined}
             style={{ minHeight: `${rowHeight}px` }}

package/lib/components/DataGrid/GridErrorOverlay.tsx

@@ -1,4 +1,5 @@
 import { getDataSourceErrorMessage } from '../../utils/dataSource';
+import { useGridLocale } from './gridLocaleContext';
 
 interface GridErrorOverlayProps {
     error: unknown;
@@ -7,6 +8,7 @@ interface GridErrorOverlayProps {
 }
 
 export function GridErrorOverlay({ error, onRetry }: GridErrorOverlayProps) {
+    const locale = useGridLocale();
     if (!error) return null;
     const message = getDataSourceErrorMessage(error);
     return (
@@ -17,7 +19,7 @@ export function GridErrorOverlay({ error, onRetry }: GridErrorOverlayProps) {
                 <line x1="12" y1="16" x2="12.01" y2="16" />
             </svg>
             <div className="ogx-error-overlay__title">
-                Oops! Something went wrong
+                {locale.errorOverlayTitle}
             </div>
             <div className="ogx-error-overlay__message">
                 {message}
@@ -28,7 +30,7 @@ export function GridErrorOverlay({ error, onRetry }: GridErrorOverlayProps) {
                     onClick={onRetry}
                     className="ogx-button ogx-button--primary"
                 >
-                    Retry
+                    {locale.errorOverlayRetry}
                 </button>
             )}
         </div>

package/lib/components/DataGrid/GridListView.tsx

@@ -4,6 +4,7 @@ import { Pagination } from '../Pagination/Pagination';
 import { ListViewRow } from '../ListView/ListViewRow';
 import { getPageCount, normalizePageSize } from '../../utils/pagination';
 import { useRowsScrollEndLatch } from '../../hooks/core/useRowsScrollEndLatch';
+import { useGridLocale } from './gridLocaleContext';
 import type {
     GridColDef,
     GridRowModel,
@@ -110,6 +111,7 @@ export function GridListView<R extends GridRowModel>({
     selectable = false,
     onToggleExpansion,
 }: GridListViewProps<R>) {
+    const locale = useGridLocale();
     const PaginationComponent = paginationSlot || Pagination;
 
     // Roving tab stop: the list is one Tab stop, on the last focused row (the first row until then,
@@ -192,15 +194,15 @@ export function GridListView<R extends GridRowModel>({
         <div
             className="ogx-list-view"
             role="grid"
-            aria-label={ariaLabel || 'Data grid list view'}
+            aria-label={ariaLabel || locale.listViewLabel}
             aria-rowcount={itemCount}
             aria-multiselectable={multiselectable}
         >
             <div className="ogx-list-view__toolbar">
                 <span>
-                    {itemCount} {itemCount === 1 ? 'item' : 'items'}
-                    {pagination ? ` · page ${currentPage + 1} of ${pageCount}` : ''}
-                    {selectedRowIds.size > 0 ? ` · ${selectedRowIds.size} selected` : ''}
+                    {locale.listViewItemCount(itemCount)}
+                    {pagination ? ` · ${locale.listViewPage(currentPage + 1, pageCount)}` : ''}
+                    {selectedRowIds.size > 0 ? ` · ${locale.listViewSelectedCount(selectedRowIds.size)}` : ''}
                 </span>
             </div>
 
@@ -209,7 +211,7 @@ export function GridListView<R extends GridRowModel>({
                 {allRenderableRows.length === 0 && loading ? (
                     // The grid's live region announces loading; the list shows no "No Data" meanwhile.
                     <div className="ogx-list-view__loading">
-                        {loadingOverlay ?? <div className="ogx__loading-bar" role="progressbar" aria-label="Loading data" />}
+                        {loadingOverlay ?? <div className="ogx__loading-bar" role="progressbar" aria-label={locale.loadingLabel} />}
                     </div>
                 ) : allRenderableRows.length === 0 && noRowsOverlay ? (
                     <div className="ogx-list-view__empty">{noRowsOverlay}</div>

package/lib/components/DataGrid/GridLiveRegion.tsx

@@ -1,5 +1,6 @@
 import { getDataSourceErrorMessage } from '../../utils/dataSource';
 import type { GridFilterModel } from '../../types';
+import { useGridLocale } from './gridLocaleContext';
 
 interface GridLiveRegionProps {
     loading: boolean;
@@ -22,15 +23,16 @@ interface GridLiveRegionProps {
  * the size of the selected cell range; and the AI assistant's status.
  */
 export function GridLiveRegion({ loading, error, noRowsLabel, filteredRowCount, dataRowCount, filterModel, cellSelectionAnnouncement, aiAssistantAnnouncement }: GridLiveRegionProps) {
+    const locale = useGridLocale();
     return (
         <div className="ogx-aria-live-status" role="status" aria-live="polite">
-            {loading ? 'Loading data...' : ''}
-            {error ? `Error: ${getDataSourceErrorMessage(error)}` : ''}
+            {loading ? locale.liveRegionLoading : ''}
+            {error ? locale.liveRegionError(getDataSourceErrorMessage(error)) : ''}
             {!loading && !error && (
                 filteredRowCount === 0
                     ? noRowsLabel
                     : (filterModel && ((filterModel.quickFilterValues?.length || 0) > 0 || (filterModel.items?.length || 0) > 0))
-                        ? `${dataRowCount} ${dataRowCount === 1 ? 'row' : 'rows'} found`
+                        ? locale.liveRegionRowsFound(dataRowCount)
                         : ''
             )}
             {cellSelectionAnnouncement ? <span className="ogx-aria-live-status__cells"> {cellSelectionAnnouncement}</span> : null}

package/lib/components/DataGrid/GridLoadingOverlay.tsx

@@ -1,4 +1,5 @@
 import React from 'react';
+import { useGridLocale } from './gridLocaleContext';
 
 interface GridLoadingOverlayProps {
     /** `slots.loadingOverlay`, rendered centred over the rows on a dimmed backdrop. */
@@ -12,6 +13,7 @@ interface GridLoadingOverlayProps {
  * or the loading overlay in place of the rows, so this is not rendered.
  */
 export function GridLoadingOverlay({ overlay }: GridLoadingOverlayProps) {
+    const locale = useGridLocale();
     if (overlay) {
         return (
             <div className="ogx__loading-overlay ogx__loading-overlay--over-rows ogx__loading-overlay--custom">
@@ -21,7 +23,7 @@ export function GridLoadingOverlay({ overlay }: GridLoadingOverlayProps) {
     }
     return (
         <div className="ogx__loading-overlay ogx__loading-overlay--over-rows">
-            <div className="ogx__loading-bar" role="progressbar" aria-label="Loading data" />
+            <div className="ogx__loading-bar" role="progressbar" aria-label={locale.loadingLabel} />
         </div>
     );
 }

package/lib/components/DataGrid/GridPinnedRows.tsx

@@ -154,7 +154,7 @@ export function GridPinnedRows<R extends GridRowModel>({
                     rowSpanningCaches={rowSpanningCaches}
                     rowHeight={rowHeight}
                     rowMeta={rowMetaMap.get(id)}
-                    editingCell={editingHandlers?.editingCell}
+                    editingCell={editingHandlers?.editingCell?.id === id ? editingHandlers.editingCell : null}
                     onEditStart={editingHandlers?.startCellEdit}
                     onEditStop={editingHandlers?.stopCellEdit}
                     onEditCellValueChange={editingHandlers?.setEditCellValue}

package/lib/components/DataGrid/GridRoot.tsx

@@ -1,4 +1,7 @@
-import React from 'react';
+import React, { useMemo } from 'react';
+import { GridLocaleContext } from './gridLocaleContext';
+import { resolveGridLocale } from '../../utils/gridLocale';
+import { useShallowStableValue } from '../../hooks/core/useShallowStableValue';
 import { GridToolbarHostContext } from '../../hooks/core/gridToolbarHostContext';
 import { GridToolbarSlot } from './GridToolbarSlot';
 import { GridAiAssistantArea } from '../AiAssistant/GridAiAssistantArea';
@@ -95,8 +98,11 @@ export function GridRoot<R extends GridRowModel>(props: GridRootProps<R>) {
     // body shows skeletons or the loading overlay instead, and infinite scroll appends skeleton rows.
     const showLoadingOverRows = effectiveLoading && allRenderableRows.length > 0 && paginationMode !== 'infinite';
     const ToolbarSlot = slots?.toolbar;
+    const stableLocaleText = useShallowStableValue(localeText);
+    const locale = useMemo(() => resolveGridLocale(stableLocaleText), [stableLocaleText]);
 
     return (
+        <GridLocaleContext.Provider value={locale}>
         <div
             ref={containerRef}
             className={['ogx', className, autoHeight && 'ogx--auto-height', !autoHeight && height === undefined && style?.height === undefined && 'ogx--fill', hasRowSpanning && 'ogx--row-spanning', listView && 'ogx--list-view'].filter(Boolean).join(' ')}
@@ -235,5 +241,6 @@ export function GridRoot<R extends GridRowModel>(props: GridRootProps<R>) {
 
             <GridErrorOverlay error={dataSourceError} onRetry={onRetry} />
         </div>
+        </GridLocaleContext.Provider>
     );
 }