@opencorestack/opengridx 3.8.0 → 3.9.0

package/lib/components/Header/Header.tsx

@@ -11,6 +11,7 @@ import { getHeaderLineClamp, shouldWrapHeaderText } from '../../utils/headerWrap
 import { getHeaderColumnStyle } from './headerColumnStyle';
 import { HeaderFilterRow } from '../HeaderFilter/HeaderFilterRow';
 import { isRtl, logicalArrowKey } from '../../utils/direction';
+import { useGridLocale } from '../DataGrid/gridLocaleContext';
 
 
 function MenuIcon() {
@@ -93,6 +94,7 @@ export interface HeaderProps<R extends GridRowModel = GridRowModel> {
 }
 
 export function Header<R extends GridRowModel = GridRowModel>(props: HeaderProps<R>) {
+    const locale = useGridLocale();
     const {
         columns,
         allColumns,
@@ -348,11 +350,11 @@ export function Header<R extends GridRowModel = GridRowModel>(props: HeaderProps
                     <div
                         className={`ogx__header-cell ogx__header-cell--pinned ogx__header-cell--pinned-left ${isHeaderFocused('__reorder_col__') ? 'ogx__header-cell--focused' : ''}`}
                         role="columnheader"
-                        aria-label="Row reorder handle"
+                        aria-label={locale.headerRowReorderLabel}
                         aria-colindex={reorderColIndex}
                         data-field="__reorder_col__"
                         tabIndex={-1}
-                        title="Drag to reorder rows"
+                        title={locale.headerRowReorderTooltip}
                         style={{
                             minWidth: 48,
                             maxWidth: 48,
@@ -368,7 +370,7 @@ export function Header<R extends GridRowModel = GridRowModel>(props: HeaderProps
                         className={`ogx__header-cell ogx__header-cell--expand ${pinExpandColumn ? 'ogx__header-cell--pinned ogx__header-cell--pinned-left' : ''
                             } ${isHeaderFocused('__expand_col__') ? 'ogx__header-cell--focused' : ''}`}
                         role="columnheader"
-                        aria-label="Expand row details"
+                        aria-label={locale.headerDetailPanelLabel}
                         aria-colindex={expandColIndex}
                         data-field="__expand_col__"
                         tabIndex={-1}
@@ -405,7 +407,7 @@ export function Header<R extends GridRowModel = GridRowModel>(props: HeaderProps
                                 checked={allSelected}
                                 indeterminate={someSelected}
                                 onChange={(e) => onSelectAll(e.target.checked)}
-                                aria-label={allSelected ? 'Deselect all rows' : 'Select all rows'}
+                                aria-label={allSelected ? locale.headerDeselectAllLabel : locale.headerSelectAllLabel}
                                 tabIndex={-1}
                                 onMouseDown={(e) => e.preventDefault()}
                             />
@@ -434,7 +436,7 @@ export function Header<R extends GridRowModel = GridRowModel>(props: HeaderProps
                         : sortPosition === 0 ? (sortDirection === 'asc' ? 'ascending' : 'descending')
                         : 'none';
                     const sortDescription = isSorted && sortModel.length > 1
-                        ? `Sorted ${sortDirection === 'asc' ? 'ascending' : 'descending'}, sort priority ${sortPosition + 1} of ${sortModel.length}`
+                        ? locale.headerSortDescription(sortDirection === 'asc' ? 'asc' : 'desc', sortPosition + 1, sortModel.length)
                         : undefined;
                     const isResizable = colDef.resizable !== false;
                     const pinnedPosition = isColumnPinned(colDef.field, pinnedColumns);
@@ -531,7 +533,7 @@ export function Header<R extends GridRowModel = GridRowModel>(props: HeaderProps
                                         type="button"
                                         className="ogx__menu-icon-btn"
                                         onClick={handleMenuOpen(colDef)}
-                                        aria-label={`Open column menu for ${colDef.headerName || colDef.field}`}
+                                        aria-label={locale.headerColumnMenuButtonLabel(colDef.headerName || colDef.field)}
                                         aria-haspopup="menu"
                                         tabIndex={-1}
                                     >

package/lib/components/HeaderFilter/HeaderFilterCell.tsx

@@ -10,6 +10,7 @@ import {
     getHeaderFilterOperators,
     type GridHeaderFilterState,
 } from '../../utils/headerFilters';
+import { filterValueFromInputText, getFilterValueOptions, isSameFilterValue, matchesFilterValueOption } from '../../utils/filtering/filterInput';
 import { Input } from '../ui/Input';
 import { HeaderFilterOperatorMenu } from './HeaderFilterOperatorMenu';
 import type { HeaderFilterLocale } from '../../utils/headerFilterLocale';
@@ -29,42 +30,10 @@ export interface HeaderFilterCellProps {
     locale: HeaderFilterLocale;
 }
 
-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 {
-    const single = Array.isArray(value) ? value[0] : value;
-    if (Object.is(option.value, single)) return true;
-    return single != null && String(option.value).toLowerCase() === String(single).toLowerCase();
-}
-
-/** 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;
-}
-
-function sameValue(a: unknown, b: unknown): boolean {
-    if (Object.is(a, b)) return true;
-    if (Array.isArray(a) && Array.isArray(b)) return a.length === b.length && a.every((v, i) => sameValue(v, b[i]));
-    return false;
-}
-
 function sameItem(a: GridFilterItem | undefined, b: GridFilterItem | undefined): boolean {
     if (a === b) return true;
     if (!a || !b) return false;
-    return a.operator === b.operator && sameValue(a.value, b.value);
+    return a.operator === b.operator && isSameFilterValue(a.value, b.value);
 }
 
 function ClearIcon() {
@@ -81,7 +50,7 @@ export function HeaderFilterCell({ colDef, state, style, className, ariaColIndex
     const label = colDef.headerName || colDef.field;
     const item = state.kind === 'editable' ? state.item : undefined;
     const operator: GridFilterOperator = item?.operator ?? getHeaderFilterDefaultOperator(colDef);
-    const valueOptions = getValueOptions(colDef);
+    const valueOptions = getFilterValueOptions(colDef);
     const usesSelect = colDef.type === 'boolean' || (colDef.type === 'singleSelect' && valueOptions.length > 0);
     const showsValue = !NO_VALUE_OPERATORS.has(operator);
 
@@ -117,7 +86,7 @@ export function HeaderFilterCell({ colDef, state, style, className, ariaColIndex
         const unchanged = current ? text === filterValueToInputText(current.value, col.type) : text.trim() === '';
         if (unchanged) return;
         const op = current?.operator ?? getHeaderFilterDefaultOperator(col);
-        const next = buildHeaderFilterItem(col, op, fromInputText(text, op));
+        const next = buildHeaderFilterItem(col, op, filterValueFromInputText(text, op));
         setLastEmitted(next);
         emit(col.field, next);
     }, []);
@@ -173,7 +142,7 @@ export function HeaderFilterCell({ colDef, state, style, className, ariaColIndex
 
     const selectOperator = (op: GridFilterOperator) => {
         // Keep what was 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);
         setMenuAnchor(null);
         report(buildHeaderFilterItem(colDef, op, convertHeaderFilterValue(value, op)));
@@ -271,7 +240,7 @@ export function HeaderFilterCell({ colDef, state, style, className, ariaColIndex
                 </select>
             );
         } else if (usesSelect) {
-            const selected = valueOptions.find(o => matchesOption(o, item?.value));
+            const selected = valueOptions.find(o => matchesFilterValueOption(o, item?.value));
             valueControl = (
                 <select
                     ref={selectRef}

package/lib/components/HeaderFilter/HeaderFilterRow.tsx

@@ -6,6 +6,7 @@ import { resolveHeaderFilterLocale } from '../../utils/headerFilterLocale';
 import { getHeaderFilterState, hasHeaderFilter, setHeaderFilterItem } from '../../utils/headerFilters';
 import { getHeaderColumnStyle } from '../Header/headerColumnStyle';
 import { HeaderFilterCell } from './HeaderFilterCell';
+import { useGridLocale } from '../DataGrid/gridLocaleContext';
 
 export interface HeaderFilterRowProps {
     /** The rendered columns of the column header row (render window with spacers), in render order. */
@@ -68,6 +69,7 @@ function SystemFilterCell({ field, ariaColIndex, sticky, left, focused }: {
  * through the root-level items it owns (`header:<field>`).
  */
 export function HeaderFilterRow(props: HeaderFilterRowProps) {
+    const gridLocale = useGridLocale();
     const {
         columns, columnWidths, pinnedColumns, pinnedPositions, pinnedEdges, rowReordering, hasDetailPanel,
         checkboxSelection, pinExpandColumn, pinCheckboxColumn, columnIndexMap, ariaRowIndex, filterModel,
@@ -137,7 +139,7 @@ export function HeaderFilterRow(props: HeaderFilterRowProps) {
                             className={`ogx__header-filter-cell ogx__header-filter-cell--empty ${className}`}
                             style={style}
                             role="columnheader"
-                            aria-label={`No filter for ${colDef.headerName || colDef.field}`}
+                            aria-label={gridLocale.headerFilterNoFilterLabel(colDef.headerName || colDef.field)}
                             aria-colindex={ariaColIndex}
                             data-field={colDef.field}
                             tabIndex={-1}

package/lib/components/ListView/ListView.css

@@ -109,22 +109,6 @@
   color: var(--ogx-text-secondary, #9ca3af);
 }
 
-/* ─── Responsive: auto switch at ≤768px when using ogx--list-auto class ─── */
-@media (max-width: 768px) {
-  .ogx--list-auto .ogx__viewport {
-    display: none;
-  }
-  .ogx--list-auto .ogx-list-view {
-    display: flex;
-  }
-}
-
-@media (min-width: 769px) {
-  .ogx--list-auto .ogx-list-view {
-    display: none;
-  }
-}
-
 /* Loading with no rows yet: a progress bar, or slots.loadingOverlay centred. */
 .ogx-list-view__loading {
   position: relative;

package/lib/components/ListView/ListViewRow.tsx

@@ -4,6 +4,7 @@ import { ExpandIcon } from '../ui/ExpandIcon';
 import { Checkbox } from '../ui/Checkbox';
 import { CellErrorBoundary } from '../Cell/CellErrorBoundary';
 import { isSyntheticRowId } from '../../utils/syntheticRows';
+import { useGridLocale } from '../DataGrid/gridLocaleContext';
 import type { GridColDef, GridRowModel, GridRowId, GridRowMeta, GridListViewColDef, GridRenderCellParams } from '../../types';
 
 export interface ListViewRowProps<R extends GridRowModel = GridRowModel> {
@@ -71,6 +72,7 @@ export function ListViewRow<R extends GridRowModel = GridRowModel>({
         rowMeta,
     };
 
+    const locale = useGridLocale();
     const handleCheckboxChange = (e: React.ChangeEvent<HTMLInputElement>) => {
         e.stopPropagation();
         onSelectionChange?.(id, e.target.checked);
@@ -96,7 +98,7 @@ export function ListViewRow<R extends GridRowModel = GridRowModel>({
                     {!isSyntheticRow && <Checkbox
                         checked={isSelected}
                         onChange={handleCheckboxChange}
-                        aria-label={`Select row ${id}`}
+                        aria-label={locale.rowSelectLabel(id)}
                         // Not a Tab stop of its own: the list is one Tab stop, Shift+Space selects the focused row.
                         tabIndex={-1}
                     />}

package/lib/components/Pagination/Pagination.tsx

@@ -3,6 +3,7 @@ import React, { useId } from 'react';
 import { Button } from '../ui/Button';
 import { normalizePageSize, getPageCount, clampPage } from '../../utils/pagination';
 import type { GridLocaleText } from '../../types';
+import { useGridLocale } from '../DataGrid/gridLocaleContext';
 
 export interface PaginationProps {
     page: number;
@@ -18,6 +19,7 @@ export interface PaginationProps {
 
 export function Pagination(props: PaginationProps) {
     const pageSizeId = useId();
+    const locale = useGridLocale();
     const {
         page,
         pageSize,
@@ -43,15 +45,10 @@ export function Pagination(props: PaginationProps) {
 
     const firstRowIndex = currentPage * safePageSize;
     const lastRowIndex = Math.min(firstRowIndex + safePageSize, rowCount);
-    const displayedRows = rowCount === 0 ? 0 : `${firstRowIndex + 1}–${lastRowIndex}`;
-
-    const rowsPerPageLabel = localeText?.paginationRowsPerPage ?? 'Rows per page:';
-    const ofLabel = localeText?.paginationOf
-        ? localeText.paginationOf(rowCount === 0 ? 0 : firstRowIndex + 1, lastRowIndex, rowCount)
-        : `${displayedRows} of ${rowCount}`;
-    const pageLabel = localeText?.paginationPage
-        ? localeText.paginationPage(currentPage + 1, pageCount)
-        : `Page ${currentPage + 1} of ${pageCount}`;
+    // An explicit `localeText` prop (standalone use) wins over the grid's strings.
+    const rowsPerPageLabel = localeText?.paginationRowsPerPage ?? locale.paginationRowsPerPage;
+    const ofLabel = (localeText?.paginationOf ?? locale.paginationOf)(rowCount === 0 ? 0 : firstRowIndex + 1, lastRowIndex, rowCount);
+    const pageLabel = (localeText?.paginationPage ?? locale.paginationPage)(currentPage + 1, pageCount);
 
     const handleFirstPage = () => {
         onPageChange(0);
@@ -79,7 +76,7 @@ export function Pagination(props: PaginationProps) {
     const isLastPage = currentPage >= pageCount - 1;
 
     return (
-        <div className="ogx-pagination" role="navigation" aria-label="Pagination">
+        <div className="ogx-pagination" role="navigation" aria-label={locale.paginationLabel}>
             { }
             <div className="ogx-pagination__page-size">
                 <label htmlFor={pageSizeId} className="ogx-pagination__label">
@@ -112,8 +109,8 @@ export function Pagination(props: PaginationProps) {
                         size="small"
                         onClick={handleFirstPage}
                         disabled={isFirstPage}
-                        aria-label="Go to first page"
-                        title="First page"
+                        aria-label={locale.paginationFirstPageLabel}
+                        title={locale.paginationFirstPageTooltip}
                     >
                         <svg className="ogx-pagination__icon" width="20" height="20" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
                             <path d="M18.41 16.59L13.82 12l4.59-4.59L17 6l-6 6 6 6zM6 6h2v12H6z" />
@@ -126,8 +123,8 @@ export function Pagination(props: PaginationProps) {
                     size="small"
                     onClick={handlePreviousPage}
                     disabled={isFirstPage}
-                    aria-label="Go to previous page"
-                    title="Previous page"
+                    aria-label={locale.paginationPreviousPageLabel}
+                    title={locale.paginationPreviousPageTooltip}
                 >
                     <svg className="ogx-pagination__icon" width="20" height="20" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
                         <path d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z" />
@@ -143,8 +140,8 @@ export function Pagination(props: PaginationProps) {
                     size="small"
                     onClick={handleNextPage}
                     disabled={isLastPage}
-                    aria-label="Go to next page"
-                    title="Next page"
+                    aria-label={locale.paginationNextPageLabel}
+                    title={locale.paginationNextPageTooltip}
                 >
                     <svg className="ogx-pagination__icon" width="20" height="20" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
                         <path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z" />
@@ -157,8 +154,8 @@ export function Pagination(props: PaginationProps) {
                         size="small"
                         onClick={handleLastPage}
                         disabled={isLastPage}
-                        aria-label="Go to last page"
-                        title="Last page"
+                        aria-label={locale.paginationLastPageLabel}
+                        title={locale.paginationLastPageTooltip}
                     >
                         <svg className="ogx-pagination__icon" width="20" height="20" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
                             <path d="M5.59 7.41L10.18 12l-4.59 4.59L7 18l6-6-6-6zM16 6h2v12h-2z" />

package/lib/components/QuickFilter/QuickFilter.tsx

@@ -1,6 +1,7 @@
 
 import React, { useState, useCallback } from 'react';
 import { Input } from '../ui/Input';
+import { useGridLocale } from '../DataGrid/gridLocaleContext';
 
 export interface QuickFilterProps {
     value?: string;
@@ -13,9 +14,11 @@ export function QuickFilter(props: QuickFilterProps) {
     const {
         value = '',
         onChange,
-        placeholder = 'Search...',
+        placeholder: placeholderProp,
         debounceMs = 300
     } = props;
+    const locale = useGridLocale();
+    const placeholder = placeholderProp ?? locale.toolbarSearchPlaceholder;
 
     const [localValue, setLocalValue] = useState(value);
     const [timeoutId, setTimeoutId] = useState<NodeJS.Timeout | null>(null);
@@ -55,7 +58,7 @@ export function QuickFilter(props: QuickFilterProps) {
         <button
             className="ogx-quick-filter__clear"
             onClick={handleClear}
-            aria-label="Clear search"
+            aria-label={locale.toolbarSearchClear}
             type="button"
         >
             <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor">

package/lib/components/Row/Row.tsx

@@ -5,6 +5,7 @@ import { Checkbox } from '../ui/Checkbox';
 import { ExpandIcon } from '../ui/ExpandIcon';
 import { DragHandleIcon } from '../ui/DragHandleIcon';
 import { DetailPanel } from '../DetailPanel/DetailPanel';
+import { useGridLocale } from '../DataGrid/gridLocaleContext';
 import type { GridRowModel, GridColDef, GridRowId, GridColumnPinning, GridRowPinning, GridRowParams, GridCellParams, GridDetailPanelHeight, GridRowMeta } from '../../types';
 import type { CellColSpanInfo, RowSpanningCaches } from '../../hooks/features/useGridSpanning';
 import { isColumnPinned, calculatePinnedPositions, getPinnedEdgeFields, isRowPinned } from '../../utils/pinning';
@@ -46,6 +47,8 @@ function mergeColSpan<R extends GridRowModel>(
 
 export interface RowProps<R extends GridRowModel = GridRowModel> {
     row: R;
+    /** A shimmer placeholder shown while infinite scroll loads more rows (`row` is unused). */
+    skeleton?: boolean;
     /** The row's id (from getRowId). Defaults to `row.id`; the grid always passes it. */
     rowId?: GridRowId;
     columns: GridColDef<R>[];
@@ -106,8 +109,10 @@ export interface RowProps<R extends GridRowModel = GridRowModel> {
 }
 
 function RowImpl<R extends GridRowModel = GridRowModel>(props: RowProps<R>) {
+    const locale = useGridLocale();
     const {
         row,
+        skeleton = false,
         rowId: rowIdProp,
         columns,
         rowIndex,
@@ -197,7 +202,7 @@ function RowImpl<R extends GridRowModel = GridRowModel>(props: RowProps<R>) {
     }, [onEditStop, id]);
 
     // ── Skeleton row (shown during infinite-scroll fetch) ─────────────────────
-    if (row._isSkeleton) {
+    if (skeleton) {
         // Render shimmer placeholders — one per visible column, matching row height
         const cellCount = Math.max(columns.length, 5);
         return (
@@ -294,7 +299,7 @@ function RowImpl<R extends GridRowModel = GridRowModel>(props: RowProps<R>) {
                     <div
                         className={`ogx__cell ogx__cell--drag-handle ${focusedCellField === '__reorder_col__' ? 'ogx__cell--focused' : ''} ${(focusedCellField === '__reorder_col__' && isFocusVisible) ? 'ogx__cell--focus-visible' : ''}`}
                         role="gridcell"
-                        aria-label={onDragStart ? 'Drag to reorder row' : undefined}
+                        aria-label={onDragStart ? locale.rowReorderLabel : undefined}
                         aria-colindex={reorderColIndex}
                         data-field="__reorder_col__"
                         tabIndex={-1}
@@ -319,7 +324,7 @@ function RowImpl<R extends GridRowModel = GridRowModel>(props: RowProps<R>) {
                             } ${focusedCellField === '__expand_col__' ? 'ogx__cell--focused' : ''} ${(focusedCellField === '__expand_col__' && isFocusVisible) ? 'ogx__cell--focus-visible' : ''
                             }`}
                         role="gridcell"
-                        aria-label={showDetailPanel ? (isDetailPanelExpanded ? 'Collapse row details' : 'Expand row details') : undefined}
+                        aria-label={showDetailPanel ? (isDetailPanelExpanded ? locale.rowDetailPanelCollapseLabel : locale.rowDetailPanelExpandLabel) : undefined}
                         aria-expanded={showDetailPanel ? isDetailPanelExpanded : undefined}
                         aria-controls={showDetailPanel && isDetailPanelExpanded ? detailPanelId : undefined}
                         aria-colindex={expandColIndex}
@@ -387,7 +392,7 @@ function RowImpl<R extends GridRowModel = GridRowModel>(props: RowProps<R>) {
                                 checked={isSelected}
                                 onChange={handleCheckboxChange}
                                 onClick={(e) => e.stopPropagation()}
-                                aria-label={isSelected ? `Deselect row ${id}` : `Select row ${id}`}
+                                aria-label={isSelected ? locale.rowDeselectLabel(id) : locale.rowSelectLabel(id)}
                                 tabIndex={-1}
                                 onMouseDown={(e) => e.preventDefault()}
                             />

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