@opencorestack/opengridx 2.1.0 → 3.0.1

package/lib/components/Header/Header.tsx

@@ -1,8 +1,11 @@
 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';
-import { isColumnPinned, calculatePinnedPositions } from '../../utils/pinning';
+import { clampResizeWidth } from '../ColumnResizeHandle/clampResizeWidth';
+import type { GridColDef, GridRowModel, GridSortDirection, GridColumnPinning, GridAggregationModel, GridColumnGroupingModel } from '../../types';
+import { isColumnPinned, calculatePinnedPositions, getPinnedEdgeFields } from '../../utils/pinning';
+import { getRenderedColumnWidth } from '../../utils/columnWidth';
+import { buildColumnGroupRow, getColumnGroupDepth, getColumnGroupPaths } from '../../utils/columnGroups';
 import { ColumnMenu } from './ColumnMenu';
 
 
@@ -23,92 +26,14 @@ function SwapIcon() {
 }
 
 
-// ─── Group header helpers ─────────────────────────────────────────────────────
-
-/** Collect all leaf field names from a group node (recursive). */
-function collectGroupFields(group: GridColumnGroup): string[] {
-    const out: string[] = [];
-    for (const child of group.children) {
-        if (typeof child === 'string') out.push(child);
-        else out.push(...collectGroupFields(child));
-    }
-    return out;
-}
-
-/** Max nesting depth of the group tree (1 = single level). */
-function groupTreeDepth(groups: GridColumnGroupingModel): number {
-    let d = 0;
-    function walk(g: GridColumnGroup, depth: number) {
-        d = Math.max(d, depth);
-        for (const c of g.children) if (typeof c !== 'string') walk(c, depth + 1);
-    }
-    groups.forEach(g => walk(g, 1));
-    return d;
-}
-
-interface GroupCell { key: string; label: string; width: number; isGroup: boolean; }
-
-/**
- * Builds the flat array of GroupCell descriptors for one row (level).
- * level 0 = top-most group row.
- * allFields is the ORDERED list of all visible columns (including spacers).
- */
-function buildGroupRow(
-    groups: GridColumnGroupingModel,
-    allFields: { field: string; width: number }[],
-    level: number,
-): GroupCell[] {
-    // Map each field → the group that owns it at `level`
-    function findAtLevel(g: GridColumnGroup, field: string, cur: number): GridColumnGroup | null {
-        if (!collectGroupFields(g).includes(field)) return null;
-        if (cur === level) return g;
-        for (const child of g.children) {
-            if (typeof child !== 'string') {
-                const found = findAtLevel(child, field, cur + 1);
-                if (found) return found;
-            }
-        }
-        return null;
-    }
-
-    const fieldGroup = new Map<string, GridColumnGroup | null>();
-    for (const f of allFields) {
-        let found: GridColumnGroup | null = null;
-        for (const g of groups) {
-            found = findAtLevel(g, f.field, 0);
-            if (found) break;
-        }
-        fieldGroup.set(f.field, found);
-    }
-
-    const cells: GroupCell[] = [];
-    let i = 0;
-    while (i < allFields.length) {
-        const item = allFields[i];
-        const group = fieldGroup.get(item.field) ?? null;
-        const w = item.width;
-
-        if (!group) {
-            cells.push({ key: `fg-${item.field}-${level}`, label: '', width: w, isGroup: false });
-            i++;
-        } else {
-            let totalW = 0;
-            let j = i;
-            while (j < allFields.length && fieldGroup.get(allFields[j].field) === group) {
-                totalW += allFields[j].width;
-                j++;
-            }
-            cells.push({ key: `${group.groupId}-${level}`, label: group.headerName, width: totalW, isGroup: true });
-            i = j;
-        }
-    }
-    return cells;
-}
-
 // ─── Props ────────────────────────────────────────────────────────────────────
 
 export interface HeaderProps<R extends GridRowModel = GridRowModel> {
     columns: GridColDef<R>[];
+    /**
+     * Every rendered data column in render order (left-pinned, unpinned, right-pinned) with its
+     * resolved width. Column group header rows are laid out over these; defaults to `columns`.
+     */
     allColumns?: GridColDef<R>[];
     columnGroupingModel?: GridColumnGroupingModel;
     checkboxSelection?: boolean;
@@ -132,13 +57,16 @@ export interface HeaderProps<R extends GridRowModel = GridRowModel> {
     onDragOver?: (field: string) => (event: React.DragEvent) => void;
     onDragEnd?: () => void;
     onDrop?: (targetField: string) => (event: React.DragEvent) => void;
-    focusedCell?: { id: string | number; field: string } | null;
+    /** The grid's focus position; `id: null` means a header cell is focused. */
+    focusedCell?: { id: string | number | null; field: string } | null;
     onHeaderClick?: (field: string) => void;
     onSortAdd?: (field: string, direction: GridSortDirection) => void;
     multiSort?: boolean;
     onHideColumn?: (field: string) => void;
     onPinColumn?: (field: string, side: 'left' | 'right' | null) => void;
     onManageColumns?: () => void;
+    /** Position of each visible data column in render order, for `colIndex` and `aria-colindex`. */
+    columnIndexMap?: Map<string, number>;
 }
 
 export function Header<R extends GridRowModel = GridRowModel>(props: HeaderProps<R>) {
@@ -173,10 +101,10 @@ export function Header<R extends GridRowModel = GridRowModel>(props: HeaderProps
         onHideColumn,
         onPinColumn,
         onManageColumns,
+        columnIndexMap,
     } = props;
 
     const selectAllId = useId();
-    const cellRefs = React.useRef<Record<string, HTMLElement | null>>({});
     const [menuOpenParams, setMenuOpenParams] = React.useState<{ colDef: GridColDef<R>; anchorEl: HTMLElement } | null>(null);
 
     const handleMenuOpen = (colDef: GridColDef<R>) => (event: React.MouseEvent) => {
@@ -184,18 +112,38 @@ export function Header<R extends GridRowModel = GridRowModel>(props: HeaderProps
         setMenuOpenParams({ colDef, anchorEl: event.currentTarget as HTMLElement });
     };
 
-    const handleMenuClose = () => {
+    const handleMenuClose = React.useCallback(() => {
         setMenuOpenParams(null);
+    }, []);
+
+    // Alt+ArrowDown or Ctrl/Cmd+Enter on a focused header cell opens its column menu.
+    // DOM focus is moved onto the focused header cell by useGridKeyboardNavigation.
+    const handleHeaderKeyDown = (colDef: GridColDef<R>) => (event: React.KeyboardEvent<HTMLDivElement>) => {
+        // Alt+ArrowLeft / Alt+ArrowRight resize the column (Shift for bigger steps).
+        const resizes = event.altKey && (event.key === 'ArrowLeft' || event.key === 'ArrowRight');
+        if (resizes && event.target === event.currentTarget) {
+            if (colDef.resizable === false || !onColumnResize) return;
+            event.preventDefault();
+            event.stopPropagation();
+            const width = getRenderedColumnWidth(colDef, columnWidths);
+            const step = (event.shiftKey ? 50 : 10) * (event.key === 'ArrowRight' ? 1 : -1);
+            onColumnResize(colDef.field, clampResizeWidth(width + step, width, colDef.minWidth, colDef.maxWidth));
+            return;
+        }
+        const opensMenu = (event.altKey && event.key === 'ArrowDown') || ((event.ctrlKey || event.metaKey) && event.key === 'Enter');
+        if (!opensMenu || colDef.disableColumnMenu || event.target !== event.currentTarget) return;
+        event.preventDefault();
+        event.stopPropagation();
+        const anchor = event.currentTarget.querySelector<HTMLElement>('.ogx__menu-icon-btn') ?? event.currentTarget;
+        setMenuOpenParams({ colDef, anchorEl: anchor });
     };
 
-    React.useLayoutEffect(() => {
-        if (focusedCell?.id === 'HEADER') {
-            const element = cellRefs.current[focusedCell.field];
-            if (element) {
-                element.focus();
-            }
-        }
-    }, [focusedCell]);
+    const isHeaderFocused = (field: string) => focusedCell?.id === null && focusedCell.field === field;
+
+    // aria-colindex: system columns first (reorder, expand, checkbox), then the data columns.
+    const reorderColIndex = rowReordering ? 1 : 0;
+    const expandColIndex = hasDetailPanel ? reorderColIndex + 1 : reorderColIndex;
+    const checkboxColIndex = checkboxSelection ? expandColIndex + 1 : expandColIndex;
 
     const handleColumnClick = (colDef: GridColDef<R>) => (e: React.MouseEvent) => {
         if (colDef.sortable === false) return;
@@ -218,6 +166,19 @@ export function Header<R extends GridRowModel = GridRowModel>(props: HeaderProps
         }
     };
 
+    // Column menu: act on this column only. "Unsort" removes just this key, and picking a direction
+    // for a column that is already sorted keeps the other keys. A new sort replaces the model
+    // unless multiSort is on, matching a plain header click.
+    const handleMenuSort = (field: string, direction: GridSortDirection) => {
+        const isSorted = sortModel.some(item => item.field === field);
+        const keepOtherKeys = direction === null || isSorted || multiSort;
+        if (onSortAdd && (keepOtherKeys || !onSort)) {
+            onSortAdd(field, direction);
+        } else {
+            onSort?.(field, direction);
+        }
+    };
+
     const getSortIcon = (field: string) => {
         const sortItem = sortModel.find(item => item.field === field);
         if (!sortItem) return null;
@@ -246,16 +207,23 @@ export function Header<R extends GridRowModel = GridRowModel>(props: HeaderProps
         );
     }, [columns, columnWidths, pinnedColumns, checkboxSelection, pinCheckboxColumn, hasDetailPanel, pinExpandColumn, rowReordering]);
 
-    const groupDepth = columnGroupingModel ? groupTreeDepth(columnGroupingModel) : 0;
+    const pinnedEdges = React.useMemo(() => getPinnedEdgeFields(columns, pinnedColumns), [columns, pinnedColumns]);
 
-    // All non-spacer fields in order (for group-span math) with their effective physical width
-    const allCols = allColumns ?? columns;
-    const allLeafFields = allCols
-        .filter(c => !c.isSpacer)
-        .map(c => ({
+    const groupDepth = getColumnGroupDepth(columnGroupingModel);
+    const groupPaths = React.useMemo(() => getColumnGroupPaths(columnGroupingModel), [columnGroupingModel]);
+
+    // Group rows are laid out over every rendered data column (not just the horizontal render
+    // window), in render order and with the layout-resolved widths, so they line up with the headers.
+    const groupColumns = React.useMemo(() => {
+        if (groupDepth === 0) return [];
+        return (allColumns ?? columns).map(c => ({
             field: c.field,
-            width: columnWidths[c.field] ?? c.width ?? 100
+            width: getRenderedColumnWidth(c, columnWidths),
+            flex: c.isSpacer ? 0 : c.flex,
+            pinned: c.isSpacer ? null : isColumnPinned(c.field, pinnedColumns),
+            isSpacer: c.isSpacer,
         }));
+    }, [groupDepth, allColumns, columns, columnWidths, pinnedColumns]);
 
     // --- CHECKBOX / DETAIL / REORDER prefix width (for group filler) ---
     const CHECKBOX_W = 48;
@@ -265,6 +233,12 @@ export function Header<R extends GridRowModel = GridRowModel>(props: HeaderProps
         (rowReordering ? REORDER_W : 0) +
         (hasDetailPanel ? EXPAND_W : 0) +
         (checkboxSelection ? CHECKBOX_W : 0);
+    // The prefix filler sticks with the system columns when all of them are pinned.
+    const isPrefixPinned =
+        (rowReordering || hasDetailPanel || checkboxSelection) &&
+        (!hasDetailPanel || pinExpandColumn) &&
+        (!checkboxSelection || pinCheckboxColumn);
+    const systemColumnCount = (rowReordering ? 1 : 0) + (hasDetailPanel ? 1 : 0) + (checkboxSelection ? 1 : 0);
 
     return (
         // Outer sticky wrapper — both group rows AND column header row live here
@@ -272,53 +246,85 @@ export function Header<R extends GridRowModel = GridRowModel>(props: HeaderProps
         <div className="ogx__header-wrap">
             {/* ── Group header rows ── */}
             {groupDepth > 0 && Array.from({ length: groupDepth }, (_, level) => {
-                const row = buildGroupRow(
-                    columnGroupingModel!,
-                    allLeafFields,
-                    level,
-                );
+                const cells = buildColumnGroupRow(groupColumns, groupPaths, level);
                 return (
-                    <div key={`ogx-grp-${level}`} className="ogx-col-group-row" role="row">
+                    <div key={`ogx-grp-${level}`} className="ogx-col-group-row" role="row" aria-rowindex={level + 1}>
                         {/* Filler for checkbox / reorder / detailPanel prefix */}
                         {prefixWidth > 0 && (
                             <div
-                                className="ogx-col-group-cell ogx-col-group-cell--filler"
-                                style={{ width: prefixWidth, minWidth: prefixWidth, flexShrink: 0 }}
-                                role="columnheader"
+                                className={`ogx-col-group-cell ogx-col-group-cell--filler${isPrefixPinned ? ' ogx-col-group-cell--pinned ogx-col-group-cell--pinned-left' : ''}`}
+                                style={{
+                                    width: prefixWidth,
+                                    minWidth: prefixWidth,
+                                    flexShrink: 0,
+                                    position: isPrefixPinned ? 'sticky' : undefined,
+                                    left: isPrefixPinned ? 0 : undefined,
+                                }}
+                                aria-hidden="true"
                             />
                         )}
-                        {row.map(cell => (
-                            <div
-                                key={cell.key}
-                                role="columnheader"
-                                className={`ogx-col-group-cell ${cell.isGroup ? 'ogx-col-group-cell--group' : 'ogx-col-group-cell--filler'}`}
-                                style={{ width: cell.width, minWidth: cell.width, flexShrink: 0 }}
-                                title={cell.isGroup ? cell.label : undefined}
-                            >
-                                {cell.isGroup && (
+                        {cells.map((cell, cellIndex) => {
+                            const pinnedClass = cell.pinned ? ` ogx-col-group-cell--pinned ogx-col-group-cell--pinned-${cell.pinned}` : '';
+                            const style: React.CSSProperties = {
+                                width: cell.width,
+                                minWidth: cell.width,
+                                flexShrink: 0,
+                                flexGrow: cell.flexGrow,
+                            };
+                            if (cell.pinned === 'left') {
+                                style.position = 'sticky';
+                                style.left = pinnedPositions[cell.fields[0]];
+                            } else if (cell.pinned === 'right') {
+                                style.position = 'sticky';
+                                style.right = pinnedPositions[cell.fields[cell.fields.length - 1]];
+                                // Free space goes before the right-pinned section, as in the column header row.
+                                if (cells[cellIndex - 1]?.pinned !== 'right') style.marginLeft = 'auto';
+                            }
+                            if (!cell.isGroup) {
+                                return (
+                                    <div
+                                        key={cell.key}
+                                        className={`ogx-col-group-cell ogx-col-group-cell--filler${pinnedClass}`}
+                                        style={style}
+                                        aria-hidden="true"
+                                    />
+                                );
+                            }
+                            return (
+                                <div
+                                    key={cell.key}
+                                    role="columnheader"
+                                    aria-colspan={cell.fields.length}
+                                    aria-colindex={systemColumnCount + cell.firstDataIndex + 1}
+                                    className={`ogx-col-group-cell ogx-col-group-cell--group${pinnedClass}${cell.headerClassName ? ` ${cell.headerClassName}` : ''}`}
+                                    style={style}
+                                    title={cell.label}
+                                >
                                     <span className="ogx-col-group-cell__label">{cell.label}</span>
-                                )}
-                            </div>
-                        ))}
+                                </div>
+                            );
+                        })}
                     </div>
                 );
             })}
 
             {/* ── Column header row ── */}
-            <div className="ogx__header" role="row">
+            <div className="ogx__header" role="row" aria-rowindex={groupDepth + 1}>
                 { }
                 {rowReordering && (
                     <div
-                        className="ogx__header-cell ogx__header-cell--pinned ogx__header-cell--pinned-left"
+                        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-colindex={reorderColIndex}
+                        data-field="__reorder_col__"
+                        tabIndex={-1}
                         title="Drag to reorder rows"
                         style={{
                             minWidth: 48,
                             maxWidth: 48,
                             position: 'sticky',
                             left: 0,
-                            zIndex: 4
                         }}
                     />
                 )}
@@ -327,15 +333,17 @@ export function Header<R extends GridRowModel = GridRowModel>(props: HeaderProps
                 {hasDetailPanel && (
                     <div
                         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-colindex={expandColIndex}
+                        data-field="__expand_col__"
+                        tabIndex={-1}
                         style={{
                             minWidth: 48,
                             maxWidth: 48,
                             position: pinExpandColumn ? 'sticky' : undefined,
                             left: pinExpandColumn ? (rowReordering ? 48 : 0) : undefined,
-                            zIndex: pinExpandColumn ? 5 : undefined
                         }}
                     >
                         { }
@@ -346,25 +354,29 @@ export function Header<R extends GridRowModel = GridRowModel>(props: HeaderProps
                 {checkboxSelection && (
                     <div
                         className={`ogx__header-cell ogx__header-cell--checkbox ${pinCheckboxColumn ? 'ogx__header-cell--pinned ogx__header-cell--pinned-left' : ''
-                            }`}
+                            } ${isHeaderFocused('__checkbox_col__') ? 'ogx__header-cell--focused' : ''}`}
                         role="columnheader"
+                        aria-colindex={checkboxColIndex}
+                        data-field="__checkbox_col__"
                         style={{
                             position: pinCheckboxColumn ? 'sticky' : undefined,
                             left: pinCheckboxColumn ? ((rowReordering ? 48 : 0) + (hasDetailPanel && pinExpandColumn ? 48 : 0)) : undefined,
 
                         }}
                     >
-                        <Checkbox
-                            id={selectAllId}
-                            name={selectAllId}
-                            checked={allSelected}
-                            indeterminate={someSelected}
-                            onChange={(e) => onSelectAll?.(e.target.checked)}
-                            aria-label={allSelected ? 'Deselect all rows' : 'Select all rows'}
-                            tabIndex={focusedCell?.id === 'HEADER' && focusedCell.field === '__checkbox_col__' ? 0 : -1}
-                            onMouseDown={(e) => e.preventDefault()}
-                            inputRef={(el) => { cellRefs.current['__checkbox_col__'] = el; }}
-                        />
+                        {/* No select-all without a handler (single-row selection has none). */}
+                        {onSelectAll && (
+                            <Checkbox
+                                id={selectAllId}
+                                name={selectAllId}
+                                checked={allSelected}
+                                indeterminate={someSelected}
+                                onChange={(e) => onSelectAll(e.target.checked)}
+                                aria-label={allSelected ? 'Deselect all rows' : 'Select all rows'}
+                                tabIndex={-1}
+                                onMouseDown={(e) => e.preventDefault()}
+                            />
+                        )}
                     </div>
                 )}
 
@@ -379,7 +391,18 @@ export function Header<R extends GridRowModel = GridRowModel>(props: HeaderProps
                         );
                     }
                     const isSortable = colDef.sortable !== false;
-                    const isSorted = sortModel.some(item => item.field === colDef.field);
+                    const sortPosition = sortModel.findIndex(item => item.field === colDef.field);
+                    const isSorted = sortPosition !== -1;
+                    const sortDirection = isSorted ? sortModel[sortPosition].sort : null;
+                    const colIndex = columnIndexMap?.get(colDef.field) ?? index;
+                    // Only the primary sort column carries aria-sort (WAI-ARIA allows one per grid);
+                    // with multi-sort every sorted column describes its direction and priority.
+                    const ariaSort = !isSortable ? undefined
+                        : 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}`
+                        : undefined;
                     const isResizable = colDef.resizable !== false;
                     const pinnedPosition = isColumnPinned(colDef.field, pinnedColumns);
                     const isPinned = pinnedPosition !== null;
@@ -393,9 +416,11 @@ export function Header<R extends GridRowModel = GridRowModel>(props: HeaderProps
                         isSorted && 'ogx__header-cell--sorted',
                         isPinned && `ogx__header-cell--pinned`,
                         isPinned && `ogx__header-cell--pinned-${pinnedPosition}`,
+                        pinnedPosition === 'left' && colDef.field === pinnedEdges.lastLeft && 'ogx__header-cell--pinned-left-last',
+                        pinnedPosition === 'right' && colDef.field === pinnedEdges.firstRight && 'ogx__header-cell--pinned-right-first',
                         isDragging && 'ogx__header-cell--dragging',
                         isDragOver && 'ogx__header-cell--drag-over',
-                        (focusedCell?.id === 'HEADER' && focusedCell.field === colDef.field) && 'ogx__header-cell--focused',
+                        isHeaderFocused(colDef.field) && 'ogx__header-cell--focused',
                         colDef.headerClassName
                     ].filter(Boolean).join(' ');
 
@@ -424,7 +449,7 @@ export function Header<R extends GridRowModel = GridRowModel>(props: HeaderProps
                     }
 
                     const headerContent = colDef.renderHeader
-                        ? colDef.renderHeader({ field: colDef.field, colDef: colDef as unknown as GridColDef, colIndex: index })
+                        ? colDef.renderHeader({ field: colDef.field, colDef: colDef as unknown as GridColDef, colIndex })
                         : colDef.headerName || colDef.field;
 
                     const handleHeaderClick = (e: React.MouseEvent) => {
@@ -438,9 +463,10 @@ export function Header<R extends GridRowModel = GridRowModel>(props: HeaderProps
                         }
                     };
 
-                    const handleDragStart = onDragStart ? onDragStart(colDef.field) : undefined;
-                    const handleDragOver = onDragOver ? onDragOver(colDef.field) : undefined;
-                    const handleDrop = onDrop ? onDrop(colDef.field) : undefined;
+                    // Pinned columns keep their place: they are neither dragged nor drop targets.
+                    const handleDragStart = onDragStart && !isPinned ? onDragStart(colDef.field) : undefined;
+                    const handleDragOver = onDragOver && !isPinned ? onDragOver(colDef.field) : undefined;
+                    const handleDrop = onDrop && !isPinned ? onDrop(colDef.field) : undefined;
 
                     return (
                         <div
@@ -450,24 +476,17 @@ export function Header<R extends GridRowModel = GridRowModel>(props: HeaderProps
                             title={colDef.description}
                             onClick={handleHeaderClick}
                             role="columnheader"
-                            draggable={!!onDragStart}
+                            draggable={!!handleDragStart}
                             onDragStart={handleDragStart}
                             onDragOver={handleDragOver}
                             onDragEnd={onDragEnd}
                             onDrop={handleDrop}
-                            aria-sort={
-                                isSortable
-                                    ? (isSorted
-                                        ? sortModel.find(item => item.field === colDef.field)?.sort === 'asc'
-                                            ? 'ascending'
-                                            : 'descending'
-                                        : 'none')
-                                    : undefined
-                            }
-                            aria-colindex={index + 1 + (checkboxSelection ? 1 : 0)}
+                            onKeyDown={handleHeaderKeyDown(colDef)}
+                            aria-sort={ariaSort}
+                            aria-description={sortDescription}
+                            aria-colindex={systemColumnCount + colIndex + 1}
                             data-field={colDef.field}
                             tabIndex={-1}
-                            ref={(el) => { cellRefs.current[colDef.field] = el; }}
                         >
                             <div className="ogx__header-cell-content">
                                 {isDragging && (
@@ -488,6 +507,7 @@ export function Header<R extends GridRowModel = GridRowModel>(props: HeaderProps
                                 {isSortable && getSortIcon(colDef.field)}
                                 {!colDef.disableColumnMenu && (
                                     <button
+                                        type="button"
                                         className="ogx__menu-icon-btn"
                                         onClick={handleMenuOpen(colDef)}
                                         aria-label={`Open column menu for ${colDef.headerName || colDef.field}`}
@@ -503,10 +523,11 @@ export function Header<R extends GridRowModel = GridRowModel>(props: HeaderProps
                             {isResizable && onColumnResize && (
                                 <ColumnResizeHandle
                                     field={colDef.field}
-                                    currentWidth={effectiveWidth}
+                                    currentWidth={getRenderedColumnWidth(colDef, columnWidths)}
                                     onResize={onColumnResize}
                                     minWidth={colDef.minWidth}
                                     maxWidth={colDef.maxWidth}
+                                    edge={pinnedPosition === 'right' ? 'start' : 'end'}
                                 />
                             )}
                         </div>
@@ -517,7 +538,7 @@ export function Header<R extends GridRowModel = GridRowModel>(props: HeaderProps
                     <ColumnMenu
                         colDef={menuOpenParams.colDef as unknown as GridColDef<GridRowModel>}
                         sortModel={sortModel}
-                        onSort={onSort}
+                        onSort={onSort || onSortAdd ? handleMenuSort : undefined}
                         onHide={onHideColumn}
                         onPin={onPinColumn}
                         pinnedColumns={pinnedColumns}

package/lib/components/ListView/ListView.css

@@ -31,6 +31,15 @@
   background: var(--ogx-color-gray-50, #f8fafc);
 }
 
+/* Keyboard focus (roving tab stop between list rows). */
+.ogx-list-view__row:focus {
+  outline: none;
+}
+.ogx-list-view__row:focus-visible {
+  outline: 2px solid var(--ogx-color-primary);
+  outline-offset: -2px;
+}
+
 .ogx-list-view__row--selected {
   background: var(--ogx-selection-bg, rgba(59, 130, 246, 0.08));
 }
@@ -40,6 +49,13 @@
 }
 
 /* ─── Checkbox column inside list row ────────────────────────────────────── */
+.ogx-list-view__expand {
+  display: flex;
+  align-items: center;
+  flex-shrink: 0;
+  min-width: 32px;
+}
+
 .ogx-list-view__checkbox {
   display: flex;
   align-items: center;
@@ -110,3 +126,12 @@
     display: none;
   }
 }
+
+/* Loading with no rows yet: a progress bar, or slots.loadingOverlay centred. */
+.ogx-list-view__loading {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 120px;
+}