@opencorestack/opengridx 1.0.6 → 1.1.0

package/lib/components/DataGrid/GridListView.tsx

@@ -8,6 +8,7 @@ import type {
     GridListViewColDef,
     GridPaginationModel,
     GridDataSource,
+    GridLocaleText,
 } from '../../types';
 
 export interface GridListViewProps<R extends GridRowModel> {
@@ -27,6 +28,7 @@ export interface GridListViewProps<R extends GridRowModel> {
     serverRowCount: number;
     paginationSlot?: React.ComponentType<Record<string, unknown>>;
     paginationSlotProps?: Record<string, unknown>;
+    localeText?: Pick<GridLocaleText, 'paginationRowsPerPage' | 'paginationOf' | 'paginationPage'>;
     onRowClick: (params: GridRowParams<R>) => void;
     onSelectionChange: (rowId: GridRowId, isSelected: boolean) => void;
     onPaginationModelChange: (model: GridPaginationModel) => void;
@@ -49,6 +51,7 @@ export function GridListView<R extends GridRowModel>({
     serverRowCount,
     paginationSlot,
     paginationSlotProps,
+    localeText,
     onRowClick,
     onSelectionChange,
     onPaginationModelChange,
@@ -108,6 +111,7 @@ export function GridListView<R extends GridRowModel>({
                     pageSizeOptions={pageSizeOptions}
                     onPageChange={(newPage: number) => onPaginationModelChange({ ...effectivePaginationModel, page: newPage })}
                     onPageSizeChange={(newPageSize: number) => onPaginationModelChange({ ...effectivePaginationModel, pageSize: newPageSize, page: 0 })}
+                    localeText={localeText}
                     {...paginationSlotProps}
                 />
             )}

package/lib/components/DataGrid/GridPinnedRows.tsx

@@ -10,6 +10,7 @@ import type {
     GridRowPinning,
     GridDetailPanelParams,
     GridDetailPanelHeight,
+    GridRowMeta,
 } from '../../types';
 import type { CellColSpanInfo, RowSpanningCaches } from '../../hooks/features/useGridSpanning';
 
@@ -36,6 +37,7 @@ export interface GridPinnedRowsProps<R extends GridRowModel> {
     colspanMap?: Map<GridRowId, Record<string, CellColSpanInfo>>;
     rowSpanningCaches?: RowSpanningCaches;
     rowHeight: number;
+    rowMetaMap: Map<GridRowId, GridRowMeta>;
 }
 
 export function GridPinnedRows<R extends GridRowModel>({
@@ -61,6 +63,7 @@ export function GridPinnedRows<R extends GridRowModel>({
     colspanMap,
     rowSpanningCaches,
     rowHeight,
+    rowMetaMap,
 }: GridPinnedRowsProps<R>) {
     if (rows.length === 0) return null;
 
@@ -91,6 +94,7 @@ export function GridPinnedRows<R extends GridRowModel>({
                     colspanMap={colspanMap}
                     rowSpanningCaches={rowSpanningCaches}
                     rowHeight={rowHeight}
+                    rowMeta={rowMetaMap.get(row.id)}
                 />
             ))}
         </div>

package/lib/components/DataGrid/GridStandaloneColumnPanel.tsx

@@ -6,6 +6,7 @@ import type { GridColDef, GridRowModel, GridColumnOrderChangeParams } from '../.
 export interface GridStandaloneColumnPanelProps<R extends GridRowModel> {
     isOpen: boolean;
     containerRef: React.RefObject<HTMLDivElement | null>;
+    panelRef?: React.RefObject<HTMLDivElement | null>;
     effectiveColumns: GridColDef<R>[];
     columnVisibilityModel: Record<string, boolean>;
     effectiveColumnOrder: string[];
@@ -20,6 +21,7 @@ export interface GridStandaloneColumnPanelProps<R extends GridRowModel> {
 export function GridStandaloneColumnPanel<R extends GridRowModel>({
     isOpen,
     containerRef,
+    panelRef,
     effectiveColumns,
     columnVisibilityModel,
     effectiveColumnOrder,
@@ -64,7 +66,7 @@ export function GridStandaloneColumnPanel<R extends GridRowModel>({
 
     return ReactDOM.createPortal(
         <div
-            id="ogx-standalone-col-panel"
+            ref={panelRef}
             style={{
                 position: 'fixed',
                 top: panelTop,

package/lib/components/DataGrid/GridVirtualRows.tsx

@@ -12,6 +12,7 @@ import type {
     GridRowPinning,
     GridDetailPanelParams,
     GridDetailPanelHeight,
+    GridRowMeta,
 } from '../../types';
 import type { GridVisibleRow } from '../../hooks/core/useGridVisibleRows';
 import type { UseRowReorderReturn } from '../../hooks/useRowReorder';
@@ -60,6 +61,7 @@ export interface GridVirtualRowsProps<R extends GridRowModel> {
     sortedUnpinnedRowCount: number;
     infiniteScrollSkeletonCount: number;
     unpinnedRowsLength: number;
+    rowMetaMap: Map<GridRowId, GridRowMeta>;
 }
 
 export function GridVirtualRows<R extends GridRowModel>({
@@ -97,6 +99,7 @@ export function GridVirtualRows<R extends GridRowModel>({
     sortedUnpinnedRowCount,
     infiniteScrollSkeletonCount,
     unpinnedRowsLength,
+    rowMetaMap,
 }: GridVirtualRowsProps<R>) {
     const skeletonColumns: GridColDef<R>[] = baseColumns.length > 0
         ? baseColumns
@@ -179,6 +182,7 @@ export function GridVirtualRows<R extends GridRowModel>({
                             colspanMap={colspanMap}
                             rowSpanningCaches={rowSpanningCaches}
                             rowHeight={rowHeight}
+                            rowMeta={rowMetaMap.get(row.id)}
                         />
                     ))
                 )}

package/lib/components/FilterPanel/FilterPanel.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react';
+import React, { useCallback, useEffect, useId, useLayoutEffect, useMemo, useRef, useState } from 'react';
 import type {
     GridFilterModel,
     GridFilterItem,
@@ -25,6 +25,7 @@ const FilterRow: React.FC<{
     item: GridFilterItem | undefined;
     onChange: (item: GridFilterItem | null) => void;
 }> = ({ col, item, onChange }) => {
+    const filterId = useId();
     const operators = getOperatorsForType(col.type);
     const isActive = !!item;
     const currentOperator = item?.operator ?? operators[0];
@@ -99,7 +100,7 @@ const FilterRow: React.FC<{
             <div className="ogx-filter__controls">
                 { }
                 <select
-                    id={`ogx-filter-op-${col.field}`}
+                    id={`${filterId}-op`}
                     name={`filter-op-${col.field}`}
                     className={`ogx-filter__op-select${isActive ? ' ogx-filter__op-select--active' : ''}`}
                     value={String(currentOperator)}
@@ -114,7 +115,7 @@ const FilterRow: React.FC<{
                 { }
                 {showValue && isBoolean && (
                     <select
-                        id={`ogx-filter-val-${col.field}`}
+                        id={`${filterId}-val`}
                         name={`filter-val-${col.field}`}
                         className={`ogx-filter__value-input ogx-filter__value-select${isActive ? ' ogx-filter__value-input--active' : ''}`}
                         value={String(item?.value ?? 'true')}
@@ -136,7 +137,7 @@ const FilterRow: React.FC<{
 
                 {showValue && !isBoolean && (
                     <input
-                        id={`ogx-filter-val-${col.field}`}
+                        id={`${filterId}-val`}
                         name={`filter-val-${col.field}`}
                         className={`ogx-filter__value-input${isActive ? ' ogx-filter__value-input--active' : ''}`}
                         type="text"

package/lib/components/Header/Header.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useId } from 'react';
 import { Checkbox } from '../ui/Checkbox';
 import { ColumnResizeHandle } from '../ColumnResizeHandle/ColumnResizeHandle';
 import type { GridColDef, GridRowModel, GridSortDirection, GridColumnPinning, GridAggregationModel, GridColumnGroup, GridColumnGroupingModel } from '../../types';
@@ -171,6 +171,7 @@ export function Header<R extends GridRowModel = GridRowModel>(props: HeaderProps
         onManageColumns,
     } = props;
 
+    const selectAllId = useId();
     const cellRefs = React.useRef<Record<string, HTMLElement | null>>({});
     const [menuOpenParams, setMenuOpenParams] = React.useState<{ colDef: GridColDef<R>; anchorEl: HTMLElement } | null>(null);
 
@@ -340,8 +341,8 @@ export function Header<R extends GridRowModel = GridRowModel>(props: HeaderProps
                         }}
                     >
                         <Checkbox
-                            id="ogx-select-all"
-                            name="ogx-select-all"
+                            id={selectAllId}
+                            name={selectAllId}
                             checked={allSelected}
                             indeterminate={someSelected}
                             onChange={(e) => onSelectAll?.(e.target.checked)}

package/lib/components/Pagination/Pagination.test.tsx

@@ -0,0 +1,64 @@
+import { describe, it, expect, vi } from 'vitest';
+import { render, screen } from '@testing-library/react';
+import { Pagination } from './Pagination';
+
+const NOOP = () => {};
+
+describe('Pagination', () => {
+    it('renders "0 of 0" when rowCount is 0', () => {
+        render(
+            <Pagination
+                page={0}
+                pageSize={10}
+                rowCount={0}
+                onPageChange={NOOP}
+                onPageSizeChange={NOOP}
+            />
+        );
+        expect(screen.getByText('0 of 0')).toBeTruthy();
+    });
+
+    it('calls localeText.paginationOf with (0, 0, 0) when rowCount is 0', () => {
+        const paginationOf = vi.fn().mockReturnValue('custom empty');
+        render(
+            <Pagination
+                page={0}
+                pageSize={10}
+                rowCount={0}
+                onPageChange={NOOP}
+                onPageSizeChange={NOOP}
+                localeText={{ paginationOf }}
+            />
+        );
+        expect(paginationOf).toHaveBeenCalledWith(0, 0, 0);
+        expect(screen.getByText('custom empty')).toBeTruthy();
+    });
+
+    it('renders correct row range label for non-empty data', () => {
+        render(
+            <Pagination
+                page={0}
+                pageSize={10}
+                rowCount={25}
+                onPageChange={NOOP}
+                onPageSizeChange={NOOP}
+            />
+        );
+        expect(screen.getByText('1–10 of 25')).toBeTruthy();
+    });
+
+    it('calls localeText.paginationOf with correct args for non-empty data', () => {
+        const paginationOf = vi.fn().mockReturnValue('custom range');
+        render(
+            <Pagination
+                page={1}
+                pageSize={10}
+                rowCount={25}
+                onPageChange={NOOP}
+                onPageSizeChange={NOOP}
+                localeText={{ paginationOf }}
+            />
+        );
+        expect(paginationOf).toHaveBeenCalledWith(11, 20, 25);
+    });
+});

package/lib/components/Pagination/Pagination.tsx

@@ -1,6 +1,7 @@
 
-import React from 'react';
+import React, { useId } from 'react';
 import { Button } from '../ui/Button';
+import type { GridLocaleText } from '../../types';
 
 export interface PaginationProps {
     page: number;
@@ -11,9 +12,11 @@ export interface PaginationProps {
     pageSizeOptions?: number[];
     showFirstButton?: boolean;
     showLastButton?: boolean;
+    localeText?: Pick<GridLocaleText, 'paginationRowsPerPage' | 'paginationOf' | 'paginationPage'>;
 }
 
 export function Pagination(props: PaginationProps) {
+    const pageSizeId = useId();
     const {
         page,
         pageSize,
@@ -22,7 +25,8 @@ export function Pagination(props: PaginationProps) {
         onPageSizeChange,
         pageSizeOptions = [10, 25, 50, 100],
         showFirstButton = true,
-        showLastButton = true
+        showLastButton = true,
+        localeText,
     } = props;
 
     const pageCount = Math.max(1, Math.ceil(rowCount / pageSize));
@@ -32,6 +36,14 @@ export function Pagination(props: PaginationProps) {
     const lastRowIndex = Math.min(firstRowIndex + pageSize, 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}`;
+
     const handleFirstPage = () => {
         onPageChange(0);
     };
@@ -61,11 +73,11 @@ export function Pagination(props: PaginationProps) {
         <div className="ogx-pagination" role="navigation" aria-label="Pagination">
             { }
             <div className="ogx-pagination__page-size">
-                <label htmlFor="page-size-select" className="ogx-pagination__label">
-                    Rows per page:
+                <label htmlFor={pageSizeId} className="ogx-pagination__label">
+                    {rowsPerPageLabel}
                 </label>
                 <select
-                    id="page-size-select"
+                    id={pageSizeId}
                     className="ogx-pagination__select"
                     value={pageSize}
                     onChange={handlePageSizeChange}
@@ -81,7 +93,7 @@ export function Pagination(props: PaginationProps) {
 
             { }
             <div className="ogx-pagination__info" aria-live="polite" aria-atomic="true">
-                {displayedRows} of {rowCount}
+                {ofLabel}
             </div>
 
             { }
@@ -115,7 +127,7 @@ export function Pagination(props: PaginationProps) {
                 </Button>
 
                 <div className="ogx-pagination__page-info" aria-current="page">
-                    Page {currentPage + 1} of {pageCount}
+                    {pageLabel}
                 </div>
 
                 <Button

package/lib/components/Row/Row.tsx

@@ -1,11 +1,11 @@
 
-import React from 'react';
+import React, { useId } from 'react';
 import { Cell } from '../Cell/Cell';
 import { Checkbox } from '../ui/Checkbox';
 import { ExpandIcon } from '../ui/ExpandIcon';
 import { DragHandleIcon } from '../ui/DragHandleIcon';
 import { DetailPanel } from '../DetailPanel/DetailPanel';
-import type { GridRowModel, GridColDef, GridRowId, GridColumnPinning, GridRowPinning, GridRowParams, GridCellParams, GridDetailPanelHeight } from '../../types';
+import type { GridRowModel, GridColDef, GridRowId, GridColumnPinning, GridRowPinning, GridRowParams, GridCellParams, GridDetailPanelHeight, GridRowMeta } from '../../types';
 import type { CellColSpanInfo, RowSpanningCaches } from '../../hooks/features/useGridSpanning';
 import { isColumnPinned, calculatePinnedPositions, isRowPinned } from '../../utils/pinning';
 
@@ -51,6 +51,7 @@ export interface RowProps<R extends GridRowModel = GridRowModel> {
     colspanMap?: Map<GridRowId, Record<string, CellColSpanInfo>>;
     rowSpanningCaches?: RowSpanningCaches;
     rowHeight?: number;
+    rowMeta?: GridRowMeta;
 }
 
 export function Row<R extends GridRowModel = GridRowModel>(props: RowProps<R>) {
@@ -91,9 +92,11 @@ export function Row<R extends GridRowModel = GridRowModel>(props: RowProps<R>) {
 
         colspanMap,
         rowSpanningCaches,
-        rowHeight = 52
+        rowHeight = 52,
+        rowMeta
     } = props;
 
+    const checkboxId = useId();
     const expandCellRef = React.useRef<HTMLDivElement>(null);
     const checkboxCellRef = React.useRef<HTMLDivElement>(null);
 
@@ -120,7 +123,7 @@ export function Row<R extends GridRowModel = GridRowModel>(props: RowProps<R>) {
         );
     }, [columns, columnWidths, pinnedColumns, checkboxSelection, pinCheckboxColumn, hasDetailPanel, pinExpandColumn, rowReordering]);
 
-    const isGroupRow = row._hasChildren === true;
+    const isGroupRow = rowMeta?.hasChildren === true;
 
     const handleCellEditStart = React.useCallback((field: string, value: unknown) => {
         if (!isGroupRow) {
@@ -291,7 +294,7 @@ export function Row<R extends GridRowModel = GridRowModel>(props: RowProps<R>) {
                         }}
                     >
                         <Checkbox
-                            id={`ogx-select-row-${row.id}`}
+                            id={checkboxId}
                             name={`ogx-select-row-${row.id}`}
                             checked={isSelected}
                             onChange={handleCheckboxChange}
@@ -357,6 +360,7 @@ export function Row<R extends GridRowModel = GridRowModel>(props: RowProps<R>) {
                             colSpanInfo={colSpanInfo}
                             rowSpan={rowSpan}
                             isHiddenByRowSpan={isHiddenByRowSpan}
+                            rowMeta={rowMeta}
                         />
                     );
                 })}

package/lib/components/Toolbar/GlobalSearch.tsx

@@ -146,8 +146,6 @@ export function GlobalSearch({ value = '', onChange, placeholder = 'Search...',
             </div>
             <input
                 ref={inputRef}
-                id="ogx-global-search-input"
-                name="ogx-global-search"
                 className="ogx-global-search__input"
                 value={localValue}
                 onChange={(e) => setLocalValue(e.target.value)}

package/lib/components/Toolbar/GridToolbar.tsx

@@ -684,11 +684,9 @@ export function GridToolbar({
                         <GridTooltip title="Pivot">
                             <button
                                 ref={pivotButtonRef}
-                                id="ogx-pivot-btn"
                                 className={`ogx-toolbar__icon-btn${pivotOpen ? ' ogx-toolbar__icon-btn--active' : ''}`}
                                 aria-label="Configure pivot"
                                 aria-expanded={pivotOpen}
-                                aria-controls="ogx-pivot-panel"
                                 onClick={() => {
                                     setPivotOpen(!pivotOpen);
                                     setAggOpen(false);
@@ -727,11 +725,9 @@ export function GridToolbar({
                             <GridTooltip title="Summaries">
                                 <button
                                     ref={aggButtonRef}
-                                    id="ogx-aggregation-btn"
                                     className={`ogx-toolbar__icon-btn${aggOpen ? ' ogx-toolbar__icon-btn--active' : ''}`}
                                     aria-label="Configure summaries"
                                     aria-expanded={aggOpen}
-                                    aria-controls="ogx-aggregation-panel"
                                     onClick={() => {
                                         setAggOpen(!aggOpen);
                                         setPivotOpen(false);

package/lib/hooks/core/useGridColumns.tsx

@@ -74,14 +74,14 @@ export function useGridColumns<R extends GridRowModel>(
                 return {
                     ...col,
                     renderCell: (cellParams: GridRenderCellParams<R>) => {
-                        const r = cellParams.row as Record<string, unknown>;
-                        const depth = typeof r._treeDepth === 'number' ? r._treeDepth : 0;
-                        const hasChildren = Boolean(r._hasChildren);
-                        const isExpanded = Boolean(r._isExpanded);
-                        const groupingField = typeof r._groupingField === 'string' ? r._groupingField : undefined;
-                        const groupingValue = r._groupingValue;
-                        const descendantCount = typeof r._descendantCount === 'number' ? r._descendantCount : undefined;
-                        const isGroupRow = Boolean(r._isGroupRow);
+                        const meta = cellParams.rowMeta;
+                        const depth = meta?.treeDepth ?? 0;
+                        const hasChildren = Boolean(meta?.hasChildren);
+                        const isExpanded = Boolean(meta?.isExpanded);
+                        const groupingField = meta?.groupingField;
+                        const groupingValue = meta?.groupingValue;
+                        const descendantCount = meta?.descendantCount;
+                        const isGroupRow = Boolean(meta?.isGroupRow);
 
                         let content: React.ReactNode = col.renderCell ? col.renderCell(cellParams) : cellParams.value as React.ReactNode;
 
@@ -130,9 +130,9 @@ export function useGridColumns<R extends GridRowModel>(
             return {
                 ...col,
                 renderCell: (cellParams: GridRenderCellParams<R>) => {
-                    const r = cellParams.row as Record<string, unknown>;
-                    const hasChildren = Boolean(r._hasChildren);
-                    const groupingField = typeof r._groupingField === 'string' ? r._groupingField : undefined;
+                    const meta = cellParams.rowMeta;
+                    const hasChildren = Boolean(meta?.hasChildren);
+                    const groupingField = meta?.groupingField;
 
                     if (isRowGrouping && hasChildren) {
                         if (col.field === groupingField) return null;

package/lib/hooks/core/useGridControlledState.test.ts

@@ -0,0 +1,86 @@
+import { describe, it, expect } from 'vitest';
+import { renderHook, act } from '@testing-library/react';
+import { useGridControlledState } from './useGridControlledState';
+
+const BASE_PARAMS = {
+    sortModel: undefined,
+    paginationModel: undefined,
+    rowSelectionModel: undefined,
+};
+
+describe('useGridControlledState — sort', () => {
+    it('uncontrolled: setInternalSortModel updates sortModel', () => {
+        const { result } = renderHook(() => useGridControlledState(BASE_PARAMS));
+        expect(result.current.sortModel).toEqual([]);
+        act(() => {
+            result.current.setInternalSortModel([{ field: 'name', sort: 'asc' }]);
+        });
+        expect(result.current.sortModel).toEqual([{ field: 'name', sort: 'asc' }]);
+    });
+
+    it('controlled: external sortModel prop always wins', () => {
+        const externalSort = [{ field: 'age', sort: 'desc' as const }];
+        const { result } = renderHook(() =>
+            useGridControlledState({ ...BASE_PARAMS, sortModel: externalSort })
+        );
+        expect(result.current.isSortControlled).toBe(true);
+        expect(result.current.sortModel).toEqual(externalSort);
+        act(() => {
+            result.current.setInternalSortModel([{ field: 'name', sort: 'asc' }]);
+        });
+        // External prop still wins
+        expect(result.current.sortModel).toEqual(externalSort);
+    });
+
+    it('initialState.sorting seeds the internal sort model', () => {
+        const { result } = renderHook(() =>
+            useGridControlledState({
+                ...BASE_PARAMS,
+                initialState: { sorting: { sortModel: [{ field: 'name', sort: 'asc' }] } },
+            })
+        );
+        expect(result.current.sortModel).toEqual([{ field: 'name', sort: 'asc' }]);
+    });
+});
+
+describe('useGridControlledState — pagination', () => {
+    it('uncontrolled: handlePaginationModelChange updates effectivePaginationModel', () => {
+        const { result } = renderHook(() => useGridControlledState(BASE_PARAMS));
+        act(() => {
+            result.current.handlePaginationModelChange({ page: 2, pageSize: 25 });
+        });
+        expect(result.current.effectivePaginationModel).toEqual({ page: 2, pageSize: 25 });
+    });
+
+    it('controlled: external paginationModel always wins', () => {
+        const externalPagination = { page: 3, pageSize: 50 };
+        const { result } = renderHook(() =>
+            useGridControlledState({ ...BASE_PARAMS, paginationModel: externalPagination })
+        );
+        expect(result.current.effectivePaginationModel).toEqual(externalPagination);
+        act(() => {
+            result.current.handlePaginationModelChange({ page: 0, pageSize: 10 });
+        });
+        expect(result.current.effectivePaginationModel).toEqual(externalPagination);
+    });
+
+    it('initialState.pagination seeds page and pageSize', () => {
+        const { result } = renderHook(() =>
+            useGridControlledState({
+                ...BASE_PARAMS,
+                initialState: { pagination: { paginationModel: { page: 1, pageSize: 25 } } },
+            })
+        );
+        expect(result.current.effectivePaginationModel).toEqual({ page: 1, pageSize: 25 });
+    });
+});
+
+describe('useGridControlledState — selection', () => {
+    it('uncontrolled: setInternalRowSelectionModel updates selectedRowIds', () => {
+        const { result } = renderHook(() => useGridControlledState(BASE_PARAMS));
+        act(() => {
+            result.current.setInternalRowSelectionModel([1, 2, 3]);
+        });
+        expect(result.current.selectedRowIds).toEqual(new Set([1, 2, 3]));
+    });
+});