@opencorestack/opengridx 3.8.0 → 3.9.0

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>
     );
 }

package/lib/components/DataGrid/GridStandaloneColumnPanel.tsx

@@ -4,6 +4,7 @@ import { ColumnVisibilityPanel } from '../ColumnVisibilityPanel/ColumnVisibility
 import type { GridColDef, GridRowModel, GridColumnGroupingModel } from '../../types';
 import { canReorderWithinColumnGroups } from '../../utils/columnGroups';
 import { getViewportWidth } from '../../utils/viewport';
+import { useGridLocale } from './gridLocaleContext';
 
 export interface GridStandaloneColumnPanelProps<R extends GridRowModel> {
     isOpen: boolean;
@@ -42,6 +43,7 @@ export function GridStandaloneColumnPanel<R extends GridRowModel>({
     onColumnOrderReset,
     columnGroupingModel,
 }: GridStandaloneColumnPanelProps<R>) {
+    const locale = useGridLocale();
     // Resolved from the DOM after mount, never during render, so the grid renders on the server.
     const [placement, setPlacement] = useState<PanelPlacement | null>(null);
 
@@ -97,7 +99,7 @@ export function GridStandaloneColumnPanel<R extends GridRowModel>({
                     zIndex: 1,
                     boxShadow: '0 1px 4px rgba(0,0,0,0.2)',
                 }}
-                aria-label="Close"
+                aria-label={locale.columnsPanelClose}
             >×</button>
             <ColumnVisibilityPanel<R>
                 columns={columns}

package/lib/components/DataGrid/GridViewport.tsx

@@ -4,6 +4,7 @@ import { GridPinnedRows, type GridPinnedRowsProps } from './GridPinnedRows';
 import { GridVirtualRows, type GridVirtualRowsProps } from './GridVirtualRows';
 import { GridEmptyState } from './GridEmptyState';
 import { GridAggregationFooter } from './GridAggregationFooter';
+import { useGridLocale } from './gridLocaleContext';
 import type { GridAggregationModel, GridAggregationResult, GridColDef, GridColumnPinning, GridRowId, GridRowModel } from '../../types';
 import type { GridAriaRowLayout } from '../../utils/aria';
 import type { UseGridCellSelectionReturn } from '../../hooks/core/useGridCellSelection';
@@ -120,6 +121,7 @@ export interface GridViewportProps<R extends GridRowModel> {
  * empty state, the virtual centre rows and the aggregation footer.
  */
 export function GridViewport<R extends GridRowModel>(props: GridViewportProps<R>) {
+    const locale = useGridLocale();
     const {
         setViewportElement, handleScroll, ariaLabel, ariaRows, navigationColumnCount, rowSelectionEnabled,
         disableMultipleRowSelection, cellSelection, effectiveLoading, viewportTabIndex, setKeyboardMode,
@@ -165,7 +167,7 @@ export function GridViewport<R extends GridRowModel>(props: GridViewportProps<R>
             className="ogx__viewport"
             onScroll={handleScroll}
             role="grid"
-            aria-label={ariaLabel || 'Data grid'}
+            aria-label={ariaLabel || locale.gridLabel}
             aria-rowcount={ariaRows.rowCount}
             aria-colcount={navigationColumnCount}
             aria-multiselectable={(rowSelectionEnabled && !disableMultipleRowSelection) || cellSelection.enabled}

package/lib/components/DataGrid/GridVirtualRows.tsx

@@ -208,7 +208,7 @@ export function GridVirtualRows<R extends GridRowModel>({
                             onDrop={rowReorderHandlers.onDrop}
                             isDragging={rowReorderHandlers.draggedRowId === id}
                             isDragOver={rowReorderHandlers.dragOverRowId === id}
-                            editingCell={editingHandlers.editingCell}
+                            editingCell={editingHandlers.editingCell?.id === id ? editingHandlers.editingCell : null}
                             onEditStart={editingHandlers.startCellEdit}
                             onEditStop={editingHandlers.stopCellEdit}
                             onEditCellValueChange={editingHandlers.setEditCellValue}
@@ -228,7 +228,8 @@ export function GridVirtualRows<R extends GridRowModel>({
                         {Array.from({ length: infiniteScrollSkeletonCount }).map((_, i) => (
                             <Row<R>
                                 key={`__skeleton_${i}__`}
-                                row={{ id: `__skeleton_${i}__`, _isSkeleton: true } as unknown as R}
+                                row={{ id: `__skeleton_${i}__` } as unknown as R}
+                                skeleton
                                 columns={virtualColumns}
                                 rowIndex={unpinnedRowsLength + i}
                                 rowHeight={rowHeight}

package/lib/components/DataGrid/gridLocaleContext.ts

@@ -0,0 +1,13 @@
+import { createContext, useContext } from 'react';
+import { resolveGridLocale, type ResolvedGridLocale } from '../../utils/gridLocale';
+
+/**
+ * The grid's resolved `localeText`, provided once by `GridRoot`. Components rendered outside a grid
+ * (the exported `ColumnVisibilityPanel`, `GridToolbar`, `FilterPanel`, …) get the English default.
+ */
+export const GridLocaleContext = createContext<ResolvedGridLocale>(resolveGridLocale(undefined));
+
+/** The strings of the enclosing grid, English outside one. */
+export function useGridLocale(): ResolvedGridLocale {
+    return useContext(GridLocaleContext);
+}

package/lib/components/FilterPanel/FilterPanel.tsx

@@ -7,8 +7,9 @@ import type {
     GridFilterOperator
 } from '../../types';
 import { filterValueToInputText, getOperatorsForType, NO_VALUE_OPERATORS } from '../../utils/filtering';
+import { filterValueFromInputText, getFilterValueOptions, isSameFilterValue, matchesFilterValueOption } from '../../utils/filtering/filterInput';
 import { Input } from '../ui/Input';
-
+import { useGridLocale } from '../DataGrid/gridLocaleContext';
 
 export interface FilterPanelProps {
     filterModel: GridFilterModel;
@@ -29,17 +30,10 @@ function getActiveFilter(items: readonly FilterEntry[], field: string): GridFilt
     return items.find((entry): entry is GridFilterItem => isFilterItem(entry) && entry.field === field);
 }
 
-function sameValue(a: unknown, b: unknown): boolean {
-    if (Object.is(a, b)) return true;
-    if (a instanceof Date && b instanceof Date) return a.getTime() === b.getTime();
-    if (Array.isArray(a) && Array.isArray(b)) return a.length === b.length && a.every((v, i) => sameValue(v, b[i]));
-    return false;
-}
-
 function sameEntry(a: FilterEntry, b: FilterEntry): boolean {
     if (a === b) return true;
     if (isFilterItem(a) && isFilterItem(b)) {
-        return a.id === b.id && a.field === b.field && a.operator === b.operator && sameValue(a.value, b.value);
+        return a.id === b.id && a.field === b.field && a.operator === b.operator && isSameFilterValue(a.value, b.value);
     }
     if (!isFilterItem(a) && !isFilterItem(b)) {
         return a.id === b.id && a.logicOperator === b.logicOperator && sameEntries(a.items, b.items);
@@ -52,36 +46,11 @@ function sameEntries(a: readonly FilterEntry[], b: readonly FilterEntry[]): bool
     return a.length === b.length && a.every((entry, i) => sameEntry(entry, b[i]));
 }
 
-interface ValueOption {
-    key: string;
-    value: unknown;
-    label: string;
-}
-
-function getValueOptions(col: GridColDef): ValueOption[] {
-    return (col.valueOptions ?? []).map((option, index) => (
-        option !== null && typeof option === 'object'
-            ? { key: String(index), value: option.value, label: option.label }
-            : { key: String(index), value: option, label: String(option) }
-    ));
-}
-
-function matchesOption(option: ValueOption, value: unknown): boolean {
-    if (Object.is(option.value, value)) return true;
-    return value != null && String(option.value).toLowerCase() === String(value).toLowerCase();
-}
-
 /** Text shown in the value input for a committed value. Never used to emit anything. */
 function toInputText(value: unknown, col: GridColDef): string {
     return filterValueToInputText(value, col.type);
 }
 
-/** The item value for typed text. isAnyOf takes a comma-separated list. */
-function fromInputText(text: string, operator: GridFilterOperator): unknown {
-    if (operator === 'isAnyOf') return text.split(',').map(part => part.trim()).filter(part => part !== '');
-    return text;
-}
-
 /** Carry a value over to a newly picked operator: lists for isAnyOf, scalars for the rest. */
 function convertValueForOperator(value: unknown, operator: GridFilterOperator): unknown {
     if (NO_VALUE_OPERATORS.has(operator)) return undefined;
@@ -101,6 +70,7 @@ const FilterRow: React.FC<{
     onChange: (item: GridFilterItem | null) => void;
 }> = ({ col, item, resetToken, onChange }) => {
     const filterId = useId();
+    const locale = useGridLocale();
     // Memoized so React Compiler treats the list as frozen and can keep the callbacks below memoized.
     const typeOperators = useMemo(() => getOperatorsForType(col.type), [col.type]);
     const defaultOperator = typeOperators[0];
@@ -144,7 +114,7 @@ const FilterRow: React.FC<{
         const unchanged = current ? text === toInputText(current.value, colRef.current) : text.trim() === '';
         if (unchanged) return;
         const operator = current?.operator ?? defaultOperator;
-        onChangeRef.current(buildItem(operator, fromInputText(text, operator)));
+        onChangeRef.current(buildItem(operator, filterValueFromInputText(text, operator)));
     }, [defaultOperator, buildItem]);
 
     // Text still waiting for the debounce; flushed when the panel closes (unmounts) meanwhile.
@@ -172,7 +142,7 @@ const FilterRow: React.FC<{
 
     const handleOperatorChange = (op: GridFilterOperator) => {
         // Keep what the user typed even if the debounce has not committed it yet.
-        const value = draft !== null ? fromInputText(draft, op) : item?.value;
+        const value = draft !== null ? filterValueFromInputText(draft, op) : item?.value;
         setDraft(null);
         onChange(buildItem(op, convertValueForOperator(value, op)));
     };
@@ -183,9 +153,9 @@ const FilterRow: React.FC<{
     };
 
     const showValue = !NO_VALUE_OPERATORS.has(currentOperator);
-    const valueOptions = getValueOptions(col);
+    const valueOptions = getFilterValueOptions(col);
     const valueClassName = `ogx-filter__value-input${isActive ? ' ogx-filter__value-input--active' : ''}`;
-    const valueLabel = `Filter value for ${label}`;
+    const valueLabel = locale.filterPanelValueLabel(label);
 
     let valueControl: React.ReactNode = null;
     if (showValue && col.type === 'boolean') {
@@ -201,9 +171,9 @@ const FilterRow: React.FC<{
                 }}
                 aria-label={valueLabel}
             >
-                <option value="">Any</option>
-                <option value="true">true</option>
-                <option value="false">false</option>
+                <option value="">{locale.filterPanelAny}</option>
+                <option value="true">{locale.filterPanelTrue}</option>
+                <option value="false">{locale.filterPanelFalse}</option>
             </select>
         );
     } else if (showValue && col.type === 'singleSelect' && valueOptions.length > 0 && currentOperator === 'isAnyOf') {
@@ -215,7 +185,7 @@ const FilterRow: React.FC<{
                 className={`${valueClassName} ogx-filter__value-multiselect`}
                 multiple
                 size={Math.min(valueOptions.length, 4)}
-                value={valueOptions.filter(o => selected.some(v => matchesOption(o, v))).map(o => o.key)}
+                value={valueOptions.filter(o => selected.some(v => matchesFilterValueOption(o, v))).map(o => o.key)}
                 onChange={(e) => {
                     const keys = new Set(Array.from(e.target.selectedOptions, option => option.value));
                     onChange(buildItem('isAnyOf', valueOptions.filter(o => keys.has(o.key)).map(o => o.value)));
@@ -226,7 +196,7 @@ const FilterRow: React.FC<{
             </select>
         );
     } else if (showValue && col.type === 'singleSelect' && valueOptions.length > 0 && (currentOperator === 'is' || currentOperator === 'not')) {
-        const current = valueOptions.find(o => matchesOption(o, item?.value));
+        const current = valueOptions.find(o => matchesFilterValueOption(o, item?.value));
         valueControl = (
             <select
                 id={`${filterId}-val`}
@@ -239,7 +209,7 @@ const FilterRow: React.FC<{
                 }}
                 aria-label={valueLabel}
             >
-                <option value="">Any</option>
+                <option value="">{locale.filterPanelAny}</option>
                 {valueOptions.map(o => <option key={o.key} value={o.key}>{o.label}</option>)}
             </select>
         );
@@ -252,7 +222,7 @@ const FilterRow: React.FC<{
                 type={col.type === 'date' ? 'date' : 'text'}
                 value={draft ?? toInputText(item?.value, col)}
                 onChange={(e) => setDraft(e.target.value)}
-                placeholder={col.type === 'number' ? 'Number…' : 'Value…'}
+                placeholder={col.type === 'number' ? locale.filterPanelNumberPlaceholder : locale.filterPanelValuePlaceholder}
                 aria-label={valueLabel}
             />
         );
@@ -271,10 +241,10 @@ const FilterRow: React.FC<{
                     className={`ogx-filter__op-select${isActive ? ' ogx-filter__op-select--active' : ''}`}
                     value={currentOperator}
                     onChange={(e) => handleOperatorChange(e.target.value as GridFilterOperator)}
-                    aria-label={`Filter operator for ${label}`}
+                    aria-label={locale.filterPanelOperatorLabel(label)}
                 >
                     {operators.map(op => (
-                        <option key={op} value={op}>{op}</option>
+                        <option key={op} value={op}>{locale.filterPanelOperator(op)}</option>
                     ))}
                 </select>
 
@@ -286,8 +256,8 @@ const FilterRow: React.FC<{
                         type="button"
                         className="ogx-filter__row-clear"
                         onClick={handleClear}
-                        aria-label={`Clear filter for ${label}`}
-                        title="Clear"
+                        aria-label={locale.filterPanelClearLabel(label)}
+                        title={locale.filterPanelClearTooltip}
                     >
                         ×
                     </button>
@@ -300,6 +270,7 @@ const FilterRow: React.FC<{
 // ── Root panel ────────────────────────────────────────────────────────────────
 
 export const FilterPanel: React.FC<FilterPanelProps> = ({ filterModel, columns, onFilterModelChange }) => {
+    const locale = useGridLocale();
     const items = useMemo<FilterEntry[]>(() => filterModel.items ?? [], [filterModel.items]);
     const logicOperator = filterModel.logicOperator ?? 'and';
 
@@ -345,14 +316,14 @@ export const FilterPanel: React.FC<FilterPanelProps> = ({ filterModel, columns,
         <>
             {items.length > 1 && (
                 <div className="ogx-filter__logic-bar">
-                    <span className="ogx-filter__logic-label">Match:</span>
+                    <span className="ogx-filter__logic-label">{locale.filterPanelMatch}</span>
                     <button
                         type="button"
                         className={`ogx-filter__logic-pill${logicOperator === 'and' ? ' ogx-filter__logic-pill--active' : ''}`}
                         onClick={() => handleLogicChange('and')}
                         aria-pressed={logicOperator === 'and'}
                     >
-                        ALL (AND)
+                        {locale.filterPanelAnd}
                     </button>
                     <button
                         type="button"
@@ -360,21 +331,19 @@ export const FilterPanel: React.FC<FilterPanelProps> = ({ filterModel, columns,
                         onClick={() => handleLogicChange('or')}
                         aria-pressed={logicOperator === 'or'}
                     >
-                        ANY (OR)
+                        {locale.filterPanelOr}
                     </button>
                 </div>
             )}
 
             {notShownCount > 0 && (
                 <div className="ogx-filter__hidden-note" role="note">
-                    {notShownCount === 1
-                        ? '1 more condition (a filter group or a second condition on a column) is applied and not shown here.'
-                        : `${notShownCount} more conditions (filter groups or further conditions on a column) are applied and not shown here.`}
+                    {locale.filterPanelHiddenConditions(notShownCount)}
                 </div>
             )}
 
             {filterableColumns.length === 0 ? (
-                <div className="ogx-filter__empty">No filterable columns.</div>
+                <div className="ogx-filter__empty">{locale.filterPanelNoColumns}</div>
             ) : (
                 filterableColumns.map(col => (
                     <FilterRow

package/lib/components/Header/ColumnMenu.css

@@ -14,7 +14,7 @@
     font-weight: 600;
     text-transform: uppercase;
     letter-spacing: 0.06em;
-    color: var(--ogx-color-gray-400, #94a3b8);
+    color: var(--ogx-overlay-section-label-text, var(--ogx-color-gray-400, #94a3b8));
     user-select: none;
 }
 .ogx-menu-item {
@@ -49,21 +49,21 @@
     display: flex;
     align-items: center;
     justify-content: center;
-    color: var(--ogx-overlay-item-selected-text, #1976d2);
+    color: var(--ogx-overlay-item-indicator, var(--ogx-overlay-item-selected-text, #1976d2));
 }
 .ogx-menu-item__icon {
     flex: 0 0 16px;
     display: flex;
     align-items: center;
     justify-content: center;
-    color: var(--ogx-color-gray-400, #94a3b8);
+    color: var(--ogx-overlay-icon, var(--ogx-color-gray-400, #94a3b8));
     transition: color 0.1s;
 }
 .ogx-menu-item--active .ogx-menu-item__icon {
-    color: var(--ogx-color-primary, #1976d2);
+    color: var(--ogx-overlay-item-selected-icon, var(--ogx-color-primary, #1976d2));
 }
 .ogx-menu-divider {
     height: 1px;
-    background: var(--ogx-overlay-border, #e2e8f0);
+    background: var(--ogx-overlay-divider, var(--ogx-overlay-border, #e2e8f0));
     margin: 4px 0;
 }

package/lib/components/Header/ColumnMenu.tsx

@@ -3,6 +3,7 @@ import ReactDOM from 'react-dom';
 import type { GridColDef, GridRowModel, GridSortDirection, GridColumnPinning } from '../../types';
 import { getViewportWidth, getViewportHeight } from '../../utils/viewport';
 import { isRtl } from '../../utils/direction';
+import { useGridLocale } from '../DataGrid/gridLocaleContext';
 
 
 interface ColumnMenuProps {
@@ -123,6 +124,7 @@ const menuItemsOf = (menu: HTMLElement | null): HTMLElement[] =>
 
 export function ColumnMenu({ colDef, sortModel, onSort, onHide, onPin, pinnedColumns, onManageColumns, onClose, anchorEl }: ColumnMenuProps) {
     const menuRef = useRef<HTMLDivElement>(null);
+    const locale = useGridLocale();
 
     // Closes the menu; when it was left from the keyboard or by choosing an item, focus goes back
     // to the header cell that owns it (WAI-ARIA menu button pattern).
@@ -234,7 +236,7 @@ export function ColumnMenu({ colDef, sortModel, onSort, onHide, onPin, pinnedCol
     const colLabel = colDef.headerName || colDef.field;
 
     return ReactDOM.createPortal(
-        <div ref={menuRef} className="ogx-column-menu" style={style} role="menu" aria-label={`Column options for ${colLabel}`} onKeyDown={handleMenuKeyDown}>
+        <div ref={menuRef} className="ogx-column-menu" style={style} role="menu" aria-label={locale.columnMenuLabel(colLabel)} onKeyDown={handleMenuKeyDown}>
 
             { }
             {onSort && colDef.sortable !== false && (
@@ -243,19 +245,19 @@ export function ColumnMenu({ colDef, sortModel, onSort, onHide, onPin, pinnedCol
                         onClick={() => handleSort('asc')} role="menuitemradio" aria-checked={currentSort === 'asc'}>
                         <span className="ogx-menu-item__indicator" aria-hidden="true">{currentSort === 'asc' ? <ActiveDotIcon /> : <InactiveDotIcon />}</span>
                         <span className="ogx-menu-item__icon" aria-hidden="true"><AscIcon /></span>
-                        Sort Ascending
+                        {locale.columnMenuSortAscending}
                     </button>
                     <button type="button" className={`ogx-menu-item${currentSort === 'desc' ? ' ogx-menu-item--active' : ''}`}
                         onClick={() => handleSort('desc')} role="menuitemradio" aria-checked={currentSort === 'desc'}>
                         <span className="ogx-menu-item__indicator" aria-hidden="true">{currentSort === 'desc' ? <ActiveDotIcon /> : <InactiveDotIcon />}</span>
                         <span className="ogx-menu-item__icon" aria-hidden="true"><DescIcon /></span>
-                        Sort Descending
+                        {locale.columnMenuSortDescending}
                     </button>
                     <button type="button" className={`ogx-menu-item${isUnsorted ? ' ogx-menu-item--active' : ''}`}
                         onClick={() => handleSort(null)} role="menuitemradio" aria-checked={isUnsorted}>
                         <span className="ogx-menu-item__indicator" aria-hidden="true">{isUnsorted ? <ActiveDotIcon /> : <InactiveDotIcon />}</span>
                         <span className="ogx-menu-item__icon" aria-hidden="true"><UnsortIcon /></span>
-                        Unsort
+                        {locale.columnMenuUnsort}
                     </button>
                     <div className="ogx-menu-divider" />
                 </>
@@ -264,24 +266,24 @@ export function ColumnMenu({ colDef, sortModel, onSort, onHide, onPin, pinnedCol
             { }
             {canPin && (
                 <>
-                    <div className="ogx-menu-section-label" aria-hidden="true">Pin column</div>
+                    <div className="ogx-menu-section-label" aria-hidden="true">{locale.columnMenuPinColumn}</div>
                     <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">
+                        onClick={() => handlePin(screenLeftSide)} role="menuitemradio" aria-checked={isPinnedScreenLeft} aria-label={locale.columnMenuPinLeftLabel}>
                         <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
+                        {locale.columnMenuPinLeft}
                     </button>
                     <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">
+                        onClick={() => handlePin(screenRightSide)} role="menuitemradio" aria-checked={isPinnedScreenRight} aria-label={locale.columnMenuPinRightLabel}>
                         <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
+                        {locale.columnMenuPinRight}
                     </button>
                     <button type="button" className={`ogx-menu-item${isUnpinned ? ' ogx-menu-item--active' : ''}`}
-                        onClick={() => handlePin(null)} role="menuitemradio" aria-checked={isUnpinned} aria-label="Unpin column">
+                        onClick={() => handlePin(null)} role="menuitemradio" aria-checked={isUnpinned} aria-label={locale.columnMenuUnpinLabel}>
                         <span className="ogx-menu-item__indicator" aria-hidden="true">{isUnpinned ? <ActiveDotIcon /> : <InactiveDotIcon />}</span>
                         <span className="ogx-menu-item__icon" aria-hidden="true"><UnpinIcon /></span>
-                        Unpin
+                        {locale.columnMenuUnpin}
                     </button>
                     <div className="ogx-menu-divider" />
                 </>
@@ -289,19 +291,19 @@ export function ColumnMenu({ colDef, sortModel, onSort, onHide, onPin, pinnedCol
 
             {canHide && (
                 <>
-                    <button type="button" className="ogx-menu-item" onClick={handleHide} role="menuitem" aria-label={`Hide ${colLabel} column`}>
+                    <button type="button" className="ogx-menu-item" onClick={handleHide} role="menuitem" aria-label={locale.columnMenuHideColumnLabel(colLabel)}>
                         <span className="ogx-menu-item__indicator" aria-hidden="true" />
                         <span className="ogx-menu-item__icon" aria-hidden="true"><HideIcon /></span>
-                        Hide Column
+                        {locale.columnMenuHideColumn}
                     </button>
                     <div className="ogx-menu-divider" />
                 </>
             )}
 
-            <button type="button" className="ogx-menu-item" onClick={() => { onManageColumns?.(); close(false); }} role="menuitem" aria-label="Manage all columns">
+            <button type="button" className="ogx-menu-item" onClick={() => { onManageColumns?.(); close(false); }} role="menuitem" aria-label={locale.columnMenuManageColumnsLabel}>
                 <span className="ogx-menu-item__indicator" aria-hidden="true" />
                 <span className="ogx-menu-item__icon" aria-hidden="true"><ManageColumnsIcon /></span>
-                Manage columns
+                {locale.columnMenuManageColumns}
             </button>
         </div>,
         (anchorEl?.closest('.ogx-theme-provider') || document.body)

package/lib/components/Header/Header.css

@@ -207,12 +207,7 @@
   background-color: var(--ogx-grid-header-hover-background);
   z-index: 6;
 }
-.ogx__header-cell--focus-visible {
-  outline: 2px solid var(--ogx-grid-cell-focus-border, var(--ogx-color-primary));
-  outline-offset: -2px;
-  background-color: var(--ogx-grid-header-hover-background);
-  z-index: 6; 
-}
+
 .ogx__header-cell:focus, .ogx__header-cell:focus-visible {
   outline: none !important;
 }
@@ -241,8 +236,4 @@
   background: var(--ogx-grid-header-hover-background);
   color: var(--ogx-grid-header-text);
 }
-.ogx__menu-icon-btn--active {
-  opacity: 1;
-  background: var(--ogx-color-primary-light);
-  color: var(--ogx-color-primary);
-}
+