@alaarab/ogrid-react-fluent 2.0.8 → 2.0.11

package/dist/esm/ColumnHeaderFilter/ColumnHeaderFilter.js

@@ -44,6 +44,6 @@ export const ColumnHeaderFilter = React.memo((props) => {
         return null;
     };
     return (_jsxs("div", { className: styles.columnHeader, ref: headerRef, children: [_jsx("div", { className: styles.headerContent, children: _jsx("span", { className: styles.columnName, title: columnName, "data-header-label": true, children: columnName }) }), _jsxs("div", { className: styles.headerActions, children: [onSort && (_jsx("button", { type: "button", className: `${styles.sortIcon} ${isSorted ? styles.sortActive : ''}`, onClick: handlers.handleSortClick, "aria-label": `Sort by ${columnName}`, title: isSorted ? (isSortedDescending ? 'Sorted descending' : 'Sorted ascending') : 'Sort', children: isSorted ? (isSortedDescending ? _jsx(ArrowDownRegular, {}) : _jsx(ArrowUpRegular, {})) : (_jsx(ArrowSortRegular, {})) })), filterType !== 'none' && (_jsxs(_Fragment, { children: [_jsxs("button", { ref: filterBtnRef, type: "button", className: `${styles.filterIcon} ${hasActiveFilter ? styles.filterActive : ''} ${isFilterOpen ? styles.filterOpen : ''}`, onClick: handlers.handleFilterIconClick, "aria-label": `Filter ${columnName}`, title: `Filter ${columnName}`, children: [_jsx(FilterRegular, {}), hasActiveFilter && _jsx("span", { className: styles.filterBadge })] }), _jsx(Popover, { open: isFilterOpen, onOpenChange: (_, data) => { if (!data.open)
-                                    setFilterOpen(false); }, positioning: { target: filterBtnRef.current ?? undefined, position: 'below', align: 'start', offset: 4 }, trapFocus: false, children: _jsxs(PopoverSurface, { ref: popoverRef, className: styles.filterPopover, onClick: handlers.handlePopoverClick, children: [_jsxs("div", { className: styles.popoverHeader, children: ["Filter: ", columnName] }), renderPopoverContent()] }) })] }))] })] }));
+                                    setFilterOpen(false); }, positioning: { target: filterBtnRef.current ?? undefined, position: 'below', align: 'start', offset: 4 }, trapFocus: false, children: _jsxs(PopoverSurface, { ref: popoverRef, className: styles.filterPopover, onClick: handlers.handlePopoverClick, style: { padding: 0 }, children: [_jsxs("div", { className: styles.popoverHeader, children: ["Filter: ", columnName] }), renderPopoverContent()] }) })] }))] })] }));
 });
 ColumnHeaderFilter.displayName = 'ColumnHeaderFilter';

package/dist/esm/ColumnHeaderFilter/ColumnHeaderFilter.module.css

@@ -158,6 +158,9 @@
 .popoverSearch .searchInput {
   width: 100%;
 }
+.popoverSearch .searchInput :global .fui-Input__input {
+  border-width: 1px !important;
+}
 
 .nativeInputWrapper {
   display: flex;

package/dist/esm/ColumnHeaderMenu/ColumnHeaderMenu.js

@@ -1,53 +1,28 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { useRef, useEffect } from 'react';
-import { COLUMN_HEADER_MENU_ITEMS } from '@alaarab/ogrid-core';
-import { makeStyles, tokens } from '@fluentui/react-components';
-const useStyles = makeStyles({
-    menu: {
-        position: 'fixed',
-        minWidth: '140px',
-        backgroundColor: tokens.colorNeutralBackground1,
-        borderRadius: tokens.borderRadiusMedium,
-        padding: '4px',
-        boxShadow: tokens.shadow16,
-        zIndex: 100,
-    },
-    menuItem: {
-        display: 'flex',
-        alignItems: 'center',
-        height: '28px',
-        padding: '0 8px',
-        fontSize: tokens.fontSizeBase200,
-        color: tokens.colorNeutralForeground1,
-        borderRadius: tokens.borderRadiusSmall,
-        cursor: 'pointer',
-        userSelect: 'none',
-        outline: 'none',
-        backgroundColor: 'transparent',
-        border: 'none',
-        width: '100%',
-        textAlign: 'left',
-        ':hover:not([disabled])': {
-            backgroundColor: tokens.colorNeutralBackground1Hover,
-        },
-        ':active:not([disabled])': {
-            backgroundColor: tokens.colorNeutralBackground1Pressed,
-        },
-        ':disabled': {
-            color: tokens.colorNeutralForegroundDisabled,
-            cursor: 'not-allowed',
-        },
-    },
-});
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React, { useMemo, useEffect, useState } from 'react';
+import { createPortal } from 'react-dom';
+import { getColumnHeaderMenuItems } from '@alaarab/ogrid-core';
+import styles from './ColumnHeaderMenu.module.css';
+/**
+ * Column header dropdown menu for pin/sort/autosize actions.
+ * Uses positioned div with portal rendering.
+ */
 export function ColumnHeaderMenu(props) {
-    const { isOpen, anchorElement, onClose, onPinLeft, onPinRight, onUnpin, canPinLeft, canPinRight, canUnpin } = props;
-    const menuRef = useRef(null);
-    const styles = useStyles();
+    const { isOpen, anchorElement, onClose, onPinLeft, onPinRight, onUnpin, onSortAsc, onSortDesc, onClearSort, onAutosizeThis, onAutosizeAll, canPinLeft, canPinRight, canUnpin, currentSort, isSortable, isResizable, } = props;
+    const [position, setPosition] = useState(null);
     useEffect(() => {
-        if (!isOpen)
+        if (!isOpen || !anchorElement) {
+            setPosition(null);
             return;
+        }
+        const rect = anchorElement.getBoundingClientRect();
+        setPosition({
+            top: rect.bottom + 4,
+            left: rect.left,
+        });
         const handleClickOutside = (e) => {
-            if (menuRef.current && !menuRef.current.contains(e.target)) {
+            const target = e.target;
+            if (anchorElement && !anchorElement.contains(target)) {
                 onClose();
             }
         };
@@ -62,15 +37,35 @@ export function ColumnHeaderMenu(props) {
             document.removeEventListener('mousedown', handleClickOutside);
             document.removeEventListener('keydown', handleEscape);
         };
-    }, [isOpen, onClose]);
-    if (!isOpen || !anchorElement)
-        return null;
-    const rect = anchorElement.getBoundingClientRect();
-    const menuStyle = {
-        top: rect.bottom + 4,
-        left: rect.left,
+    }, [isOpen, anchorElement, onClose]);
+    const menuInput = useMemo(() => ({
+        canPinLeft,
+        canPinRight,
+        canUnpin,
+        currentSort,
+        isSortable,
+        isResizable,
+    }), [canPinLeft, canPinRight, canUnpin, currentSort, isSortable, isResizable]);
+    const items = useMemo(() => getColumnHeaderMenuItems(menuInput), [menuInput]);
+    const handlers = {
+        pinLeft: onPinLeft,
+        pinRight: onPinRight,
+        unpin: onUnpin,
+        sortAsc: onSortAsc,
+        sortDesc: onSortDesc,
+        clearSort: onClearSort,
+        autosizeThis: onAutosizeThis,
+        autosizeAll: onAutosizeAll,
     };
-    const handlers = [onPinLeft, onPinRight, onUnpin];
-    const disabled = [!canPinLeft, !canPinRight, !canUnpin];
-    return (_jsx("div", { ref: menuRef, className: styles.menu, style: menuStyle, children: COLUMN_HEADER_MENU_ITEMS.map((item, idx) => (_jsx("button", { className: styles.menuItem, onClick: handlers[idx], disabled: disabled[idx], children: item.label }, item.id))) }));
+    if (!isOpen || !position)
+        return null;
+    return createPortal(_jsx("div", { className: styles.content, style: {
+            position: 'fixed',
+            top: position.top,
+            left: position.left,
+            zIndex: 1000,
+        }, children: items.map((item, idx) => (_jsxs(React.Fragment, { children: [_jsx("button", { className: styles.item, disabled: item.disabled, onClick: () => {
+                        handlers[item.id]();
+                        onClose();
+                    }, children: item.label }), item.divider && idx < items.length - 1 && (_jsx("div", { className: styles.separator }))] }, item.id))) }), document.body);
 }

package/dist/esm/ColumnHeaderMenu/ColumnHeaderMenu.module.css

@@ -0,0 +1,46 @@
+.content {
+  min-width: 140px;
+  background: white;
+  border: 1px solid #e0e0e0;
+  border-radius: 6px;
+  padding: 4px;
+  box-shadow: 0px 10px 38px -10px rgba(22, 23, 24, 0.35), 0px 10px 20px -15px rgba(22, 23, 24, 0.2);
+  z-index: 1000;
+  animation-duration: 400ms;
+  animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
+  will-change: transform, opacity;
+}
+
+.item {
+  font-size: 13px;
+  line-height: 1;
+  color: #111;
+  border-radius: 4px;
+  border: none;
+  background: transparent;
+  display: flex;
+  align-items: center;
+  height: 28px;
+  padding: 0 8px;
+  position: relative;
+  user-select: none;
+  outline: none;
+  cursor: pointer;
+  width: 100%;
+  text-align: left;
+}
+.item:disabled {
+  color: #999;
+  pointer-events: none;
+  cursor: not-allowed;
+}
+.item:hover:not(:disabled) {
+  background-color: #f5f5f5;
+  color: #111;
+}
+
+.separator {
+  height: 1px;
+  background-color: #e0e0e0;
+  margin: 4px 0;
+}

package/dist/esm/DataGridTable/DataGridTable.js

@@ -309,11 +309,17 @@ function DataGridTableInner(props) {
                                                                     return (_jsx("th", { colSpan: cell.colSpan, className: styles.groupHeaderCell, scope: "colgroup", children: cell.label }, cellIdx));
                                                                 }
                                                                 return (_jsx("th", { rowSpan: headerRows.length - rowIdx, className: styles.leafHeaderCellSpan, scope: "col", children: cell.columnDef?.name }, cellIdx));
-                                                            })] }, `group-${rowIdx}`))), _jsx(DataGridRow, { children: ({ renderHeaderCell, columnId }) => (_jsx(DataGridHeaderCell, { className: headerClassMap[String(columnId)] || undefined, children: renderHeaderCell() })) })] }), _jsx(DataGridBody, { children: ({ item }) => {
+                                                            })] }, `group-${rowIdx}`))), _jsx(DataGridRow, { children: ({ renderHeaderCell, columnId }) => {
+                                                            const isSorted = props.sortBy === String(columnId);
+                                                            const ariaSort = isSorted
+                                                                ? (props.sortDirection === 'asc' ? 'ascending' : 'descending')
+                                                                : undefined;
+                                                            return (_jsx(DataGridHeaderCell, { className: headerClassMap[String(columnId)] || undefined, "aria-sort": ariaSort, children: renderHeaderCell() }));
+                                                        } })] }), _jsx(DataGridBody, { children: ({ item }) => {
                                                     const rowId = getRowId(item);
                                                     const rowIndex = rowIndexByRowId.get(rowId) ?? -1;
                                                     return (_jsx(GridRow, { item: item, rowId: rowId, rowIndex: rowIndex, isSelected: selectedRowIds.has(rowId), hasCheckboxCol: hasCheckboxCol, cellClassMap: cellClassMap, handleSingleRowClick: handleSingleRowClick, selectionRange: selectionRange, activeCell: activeCell, cutRange: cutRange, copyRange: copyRange, isDragging: isDragging, editingRowId: editingCell?.rowId ?? null }, rowId));
-                                                } })] }), virtualScrollEnabled && visibleRange.offsetBottom > 0 && (_jsx("div", { style: { height: visibleRange.offsetBottom }, "aria-hidden": true })), isReorderDragging && dropIndicatorX != null && (_jsx("div", { className: styles.dropIndicator, style: { left: dropIndicatorX - (wrapperRef.current?.getBoundingClientRect().left ?? 0) } })), _jsx(MarchingAntsOverlay, { containerRef: tableContainerRef, selectionRange: selectionRange, copyRange: copyRange, cutRange: cutRange, colOffset: colOffset }), showEmptyInGrid && emptyState && (_jsx("div", { className: styles.emptyStateInGrid, children: _jsx("div", { className: styles.emptyStateInGridMessageSticky, children: emptyState.render ? (emptyState.render()) : (_jsxs(_Fragment, { children: [_jsx("span", { className: styles.emptyStateInGridIcon, "aria-hidden": true, children: "\uD83D\uDCCB" }), _jsx("div", { className: styles.emptyStateInGridTitle, children: "No results found" }), _jsx("div", { className: styles.emptyStateInGridMessage, children: emptyState.message != null ? (emptyState.message) : emptyState.hasActiveFilters ? (_jsxs(_Fragment, { children: ["No items match your current filters. Try adjusting your search or", ' ', _jsx("button", { type: "button", className: styles.emptyStateInGridLink, onClick: emptyState.onClearAll, children: "clear all filters" }), ' ', "to see all items."] })) : ('There are no items available at this time.') })] })) }) }))] }) }) }), menuPosition &&
-                        createPortal(_jsx(GridContextMenu, { x: menuPosition.x, y: menuPosition.y, hasSelection: hasCellSelection, canUndo: canUndo, canRedo: canRedo, onUndo: onUndo ?? NOOP, onRedo: onRedo ?? NOOP, onCopy: handleCopy, onCut: handleCut, onPaste: handlePasteVoid, onSelectAll: handleSelectAllCells, onClose: closeContextMenu }), document.body), createPortal(_jsx(ColumnHeaderMenu, { isOpen: pinning.headerMenu.isOpen, anchorElement: pinning.headerMenu.anchorElement, onClose: pinning.headerMenu.close, onPinLeft: pinning.headerMenu.handlePinLeft, onPinRight: pinning.headerMenu.handlePinRight, onUnpin: pinning.headerMenu.handleUnpin, canPinLeft: pinning.headerMenu.canPinLeft, canPinRight: pinning.headerMenu.canPinRight, canUnpin: pinning.headerMenu.canUnpin }), document.body)] }), statusBarConfig && (_jsx(StatusBar, { totalCount: statusBarConfig.totalCount, filteredCount: statusBarConfig.filteredCount, selectedCount: statusBarConfig.selectedCount ?? selectedRowIds.size, selectedCellCount: selectionRange ? (Math.abs(selectionRange.endRow - selectionRange.startRow) + 1) * (Math.abs(selectionRange.endCol - selectionRange.startCol) + 1) : undefined, aggregation: statusBarConfig.aggregation, suppressRowCount: statusBarConfig.suppressRowCount })), isLoading && (_jsx("div", { className: styles.loadingOverlay, "aria-live": "polite", children: _jsxs("div", { className: styles.loadingOverlayContent, children: [_jsx(Spinner, { size: "small" }), _jsx("span", { className: styles.loadingOverlayText, children: loadingMessage })] }) }))] }));
+                                                } })] }), virtualScrollEnabled && visibleRange.offsetBottom > 0 && (_jsx("div", { style: { height: visibleRange.offsetBottom }, "aria-hidden": true })), isReorderDragging && dropIndicatorX != null && (_jsx("div", { className: styles.dropIndicator, style: { left: dropIndicatorX - (wrapperRef.current?.getBoundingClientRect().left ?? 0) } })), _jsx(MarchingAntsOverlay, { containerRef: tableContainerRef, selectionRange: selectionRange, copyRange: copyRange, cutRange: cutRange, colOffset: colOffset, items: items, visibleColumns: visibleColumns, columnSizingOverrides: columnSizingOverrides, columnOrder: columnOrder }), showEmptyInGrid && emptyState && (_jsx("div", { className: styles.emptyStateInGrid, children: _jsx("div", { className: styles.emptyStateInGridMessageSticky, children: emptyState.render ? (emptyState.render()) : (_jsxs(_Fragment, { children: [_jsx("span", { className: styles.emptyStateInGridIcon, "aria-hidden": true, children: "\uD83D\uDCCB" }), _jsx("div", { className: styles.emptyStateInGridTitle, children: "No results found" }), _jsx("div", { className: styles.emptyStateInGridMessage, children: emptyState.message != null ? (emptyState.message) : emptyState.hasActiveFilters ? (_jsxs(_Fragment, { children: ["No items match your current filters. Try adjusting your search or", ' ', _jsx("button", { type: "button", className: styles.emptyStateInGridLink, onClick: emptyState.onClearAll, children: "clear all filters" }), ' ', "to see all items."] })) : ('There are no items available at this time.') })] })) }) }))] }) }) }), menuPosition &&
+                        createPortal(_jsx(GridContextMenu, { x: menuPosition.x, y: menuPosition.y, hasSelection: hasCellSelection, canUndo: canUndo, canRedo: canRedo, onUndo: onUndo ?? NOOP, onRedo: onRedo ?? NOOP, onCopy: handleCopy, onCut: handleCut, onPaste: handlePasteVoid, onSelectAll: handleSelectAllCells, onClose: closeContextMenu }), document.body), createPortal(_jsx(ColumnHeaderMenu, { isOpen: pinning.headerMenu.isOpen, anchorElement: pinning.headerMenu.anchorElement, onClose: pinning.headerMenu.close, onPinLeft: pinning.headerMenu.handlePinLeft, onPinRight: pinning.headerMenu.handlePinRight, onUnpin: pinning.headerMenu.handleUnpin, onSortAsc: pinning.headerMenu.handleSortAsc, onSortDesc: pinning.headerMenu.handleSortDesc, onClearSort: pinning.headerMenu.handleClearSort, onAutosizeThis: pinning.headerMenu.handleAutosizeThis, onAutosizeAll: pinning.headerMenu.handleAutosizeAll, canPinLeft: pinning.headerMenu.canPinLeft, canPinRight: pinning.headerMenu.canPinRight, canUnpin: pinning.headerMenu.canUnpin, currentSort: pinning.headerMenu.currentSort, isSortable: pinning.headerMenu.isSortable, isResizable: pinning.headerMenu.isResizable }), document.body)] }), statusBarConfig && (_jsx(StatusBar, { totalCount: statusBarConfig.totalCount, filteredCount: statusBarConfig.filteredCount, selectedCount: statusBarConfig.selectedCount ?? selectedRowIds.size, selectedCellCount: selectionRange ? (Math.abs(selectionRange.endRow - selectionRange.startRow) + 1) * (Math.abs(selectionRange.endCol - selectionRange.startCol) + 1) : undefined, aggregation: statusBarConfig.aggregation, suppressRowCount: statusBarConfig.suppressRowCount })), isLoading && (_jsx("div", { className: styles.loadingOverlay, "aria-live": "polite", children: _jsxs("div", { className: styles.loadingOverlayContent, children: [_jsx(Spinner, { size: "small" }), _jsx("span", { className: styles.loadingOverlayText, children: loadingMessage })] }) }))] }));
 }
 export const DataGridTable = React.memo(DataGridTableInner);

package/dist/esm/DataGridTable/DataGridTable.module.css

@@ -103,8 +103,10 @@
 .tableWrapper[data-column-count] :global .fui-DataGridHeaderCell {
   min-width: var(--data-table-cell-min-width, 80px);
   white-space: nowrap !important;
-  position: relative;
+  position: sticky; /* Changed from relative - enables vertical sticky for all headers */
+  top: 0; /* Sticky vertically */
   background-color: var(--colorSubtleBackgroundSelected, #f3f2f1);
+  z-index: 8; /* Stack above body cells */
   font-size: 14px;
   border-right: 1px solid var(--colorNeutralStroke1, #c4c4c4);
 }
@@ -368,8 +370,8 @@
 
 /* Freeze panes: sticky header when freezeRows >= 1 */
 .stickyHeader {
-  position: sticky;
-  top: 0;
+  /* Removed position: sticky; top: 0; - breaks horizontal sticky on pinned columns.
+     Instead, apply sticky to individual header cells (.fui-DataGridHeaderCell). */
   z-index: 8;
   background-color: var(--colorSubtleBackgroundSelected, #f3f2f1);
 }
@@ -394,7 +396,7 @@
 .stickyHeader .pinnedLeft,
 .stickyHeader .pinnedRight {
   top: 0;
-  z-index: 9;
+  z-index: 10; /* Increased from 9 to stack above base header cells (z-index: 8) */
 }
 
 .activeRow :global .fui-DataGridCell:not(:has(.activeCellContent)) {
@@ -656,8 +658,8 @@
   font-size: 16px;
   line-height: 1;
   color: var(--colorNeutralForeground3, #666);
-  opacity: 0;
-  transition: opacity 0.15s, background-color 0.15s;
+  opacity: 1;
+  transition: background-color 0.15s;
   border-radius: 3px;
   display: flex;
   align-items: center;
@@ -667,16 +669,11 @@
 }
 .headerMenuTrigger:hover {
   background: var(--colorNeutralBackground1Hover, #f3f2f1);
-  opacity: 1;
 }
 .headerMenuTrigger:active {
   background: var(--colorNeutralBackground1Pressed, #e1dfdd);
 }
 
-.tableWrapper :global(.fui-DataGridHeaderCell:hover) .headerMenuTrigger {
-  opacity: 1;
-}
-
 .tableWrapper :global(.fui-DataGridHeaderCell.pinnedColLeft),
 .tableWrapper :global(.fui-DataGridCell.pinnedColLeft) {
   border-left: 2px solid var(--colorBrandForeground1, #0078d4) !important;
@@ -701,4 +698,27 @@
 }
 .density-comfortable .cellContent {
   padding: 12px 16px;
+}
+
+/* ─── Accessibility: Focus Visible Styles ─────────────────────── */
+.tableWrapper :global .fui-DataGridHeaderCell:focus-visible,
+.tableWrapper :global .fui-DataGridCell:focus-visible {
+  outline: 2px solid var(--colorBrandStroke1, #0078d4);
+  outline-offset: -2px;
+  z-index: 11;
+}
+.tableWrapper :global .fui-Button:focus-visible,
+.tableWrapper :global .fui-MenuButton:focus-visible {
+  outline: 2px solid var(--colorBrandStroke1, #0078d4);
+  outline-offset: 2px;
+}
+.tableWrapper :global .fui-Checkbox:focus-visible {
+  outline: 2px solid var(--colorBrandStroke1, #0078d4);
+  outline-offset: 2px;
+}
+
+.cellContent:focus-visible {
+  outline: 2px solid var(--colorBrandStroke1, #0078d4);
+  outline-offset: -2px;
+  z-index: 3;
 }

package/dist/esm/PaginationControls/PaginationControls.js

@@ -1,20 +1,26 @@
 import { jsxs as _jsxs, jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
 import * as React from 'react';
-import { useMemo, useCallback } from 'react';
 import { Button, Select } from '@fluentui/react-components';
 import { ChevronLeftRegular, ChevronRightRegular, ChevronDoubleLeftRegular, ChevronDoubleRightRegular, } from '@fluentui/react-icons';
-import { getPaginationViewModel } from '@alaarab/ogrid-react';
+import { usePaginationControls } from '@alaarab/ogrid-react';
 import styles from './PaginationControls.module.css';
 export const PaginationControls = React.memo((props) => {
     const { currentPage, pageSize, totalCount, onPageChange, onPageSizeChange, pageSizeOptions, entityLabelPlural, className } = props;
-    const labelPlural = entityLabelPlural ?? 'items';
-    const vm = useMemo(() => getPaginationViewModel(currentPage, pageSize, totalCount, pageSizeOptions ? { pageSizeOptions } : undefined), [currentPage, pageSize, totalCount, pageSizeOptions]);
-    const handlePageSizeChange = useCallback((_e, data) => {
-        onPageSizeChange(Number(data.value));
-    }, [onPageSizeChange]);
+    const { labelPlural, vm, handlePageSizeChange } = usePaginationControls({
+        currentPage,
+        pageSize,
+        totalCount,
+        onPageChange,
+        onPageSizeChange,
+        pageSizeOptions,
+        entityLabelPlural,
+    });
+    const handlePageSizeChangeEvent = (_e, data) => {
+        handlePageSizeChange(Number(data.value));
+    };
     if (!vm) {
         return null;
     }
     const { pageNumbers, showStartEllipsis, showEndEllipsis, totalPages, startItem, endItem } = vm;
-    return (_jsxs("div", { className: `${styles.pagination} ${className || ''}`, role: "navigation", "aria-label": "Pagination", children: [_jsxs("div", { className: styles.paginationInfo, children: ["Showing ", startItem, " to ", endItem, " of ", totalCount.toLocaleString(), " ", labelPlural] }), _jsxs("div", { className: styles.paginationControls, children: [_jsx(Button, { appearance: "outline", shape: "circular", size: "small", icon: _jsx(ChevronDoubleLeftRegular, {}), onClick: () => onPageChange(1), disabled: currentPage === 1, "aria-label": "First page", className: styles.navBtn }), _jsx(Button, { appearance: "outline", shape: "circular", size: "small", icon: _jsx(ChevronLeftRegular, {}), onClick: () => onPageChange(currentPage - 1), disabled: currentPage === 1, "aria-label": "Previous page", className: styles.navBtn }), _jsxs("div", { className: styles.pageNumbers, children: [showStartEllipsis && (_jsxs(_Fragment, { children: [_jsx(Button, { appearance: "outline", size: "small", shape: "rounded", onClick: () => onPageChange(1), "aria-label": "Page 1", className: styles.pageBtn, children: "1" }), _jsx("span", { className: styles.ellipsis, "aria-hidden": true, children: "\u2026" })] })), pageNumbers.map((pageNum) => (_jsx(Button, { appearance: currentPage === pageNum ? 'primary' : 'outline', size: "small", shape: "rounded", onClick: () => onPageChange(pageNum), "aria-label": `Page ${pageNum}`, "aria-current": currentPage === pageNum ? 'page' : undefined, className: styles.pageBtn, children: pageNum }, pageNum))), showEndEllipsis && (_jsxs(_Fragment, { children: [_jsx("span", { className: styles.ellipsis, "aria-hidden": true, children: "\u2026" }), _jsx(Button, { appearance: "outline", size: "small", shape: "rounded", onClick: () => onPageChange(totalPages), "aria-label": `Page ${totalPages}`, className: styles.pageBtn, children: totalPages })] }))] }), _jsx(Button, { appearance: "outline", shape: "circular", size: "small", icon: _jsx(ChevronRightRegular, {}), onClick: () => onPageChange(currentPage + 1), disabled: currentPage >= totalPages, "aria-label": "Next page", className: styles.navBtn }), _jsx(Button, { appearance: "outline", shape: "circular", size: "small", icon: _jsx(ChevronDoubleRightRegular, {}), onClick: () => onPageChange(totalPages), disabled: currentPage >= totalPages, "aria-label": "Last page", className: styles.navBtn })] }), _jsxs("div", { className: styles.pageSizeSelector, children: [_jsx("span", { className: styles.pageSizeLabel, children: "Rows" }), _jsx(Select, { value: String(pageSize), onChange: handlePageSizeChange, size: "small", appearance: "outline", "aria-label": "Rows per page", className: styles.pageSizeSelect, children: vm.pageSizeOptions.map((n) => (_jsx("option", { value: n, children: n }, n))) })] })] }));
+    return (_jsxs("div", { className: `${styles.pagination} ${className || ''}`, role: "navigation", "aria-label": "Pagination", children: [_jsxs("div", { className: styles.paginationInfo, children: ["Showing ", startItem, " to ", endItem, " of ", totalCount.toLocaleString(), " ", labelPlural] }), _jsxs("div", { className: styles.paginationControls, children: [_jsx(Button, { appearance: "outline", shape: "circular", size: "small", icon: _jsx(ChevronDoubleLeftRegular, {}), onClick: () => onPageChange(1), disabled: currentPage === 1, "aria-label": "First page", className: styles.navBtn }), _jsx(Button, { appearance: "outline", shape: "circular", size: "small", icon: _jsx(ChevronLeftRegular, {}), onClick: () => onPageChange(currentPage - 1), disabled: currentPage === 1, "aria-label": "Previous page", className: styles.navBtn }), _jsxs("div", { className: styles.pageNumbers, children: [showStartEllipsis && (_jsxs(_Fragment, { children: [_jsx(Button, { appearance: "outline", size: "small", shape: "rounded", onClick: () => onPageChange(1), "aria-label": "Page 1", className: styles.pageBtn, children: "1" }), _jsx("span", { className: styles.ellipsis, "aria-hidden": true, children: "\u2026" })] })), pageNumbers.map((pageNum) => (_jsx(Button, { appearance: currentPage === pageNum ? 'primary' : 'outline', size: "small", shape: "rounded", onClick: () => onPageChange(pageNum), "aria-label": `Page ${pageNum}`, "aria-current": currentPage === pageNum ? 'page' : undefined, className: styles.pageBtn, children: pageNum }, pageNum))), showEndEllipsis && (_jsxs(_Fragment, { children: [_jsx("span", { className: styles.ellipsis, "aria-hidden": true, children: "\u2026" }), _jsx(Button, { appearance: "outline", size: "small", shape: "rounded", onClick: () => onPageChange(totalPages), "aria-label": `Page ${totalPages}`, className: styles.pageBtn, children: totalPages })] }))] }), _jsx(Button, { appearance: "outline", shape: "circular", size: "small", icon: _jsx(ChevronRightRegular, {}), onClick: () => onPageChange(currentPage + 1), disabled: currentPage >= totalPages, "aria-label": "Next page", className: styles.navBtn }), _jsx(Button, { appearance: "outline", shape: "circular", size: "small", icon: _jsx(ChevronDoubleRightRegular, {}), onClick: () => onPageChange(totalPages), disabled: currentPage >= totalPages, "aria-label": "Last page", className: styles.navBtn })] }), _jsxs("div", { className: styles.pageSizeSelector, children: [_jsx("span", { className: styles.pageSizeLabel, children: "Rows" }), _jsx(Select, { value: String(pageSize), onChange: handlePageSizeChangeEvent, size: "small", appearance: "outline", "aria-label": "Rows per page", className: styles.pageSizeSelect, children: vm.pageSizeOptions.map((n) => (_jsx("option", { value: n, children: n }, n))) })] })] }));
 });

package/dist/types/ColumnHeaderMenu/ColumnHeaderMenu.d.ts

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import React from 'react';
 export interface ColumnHeaderMenuProps {
     isOpen: boolean;
     anchorElement: HTMLElement | null;
@@ -6,8 +6,20 @@ export interface ColumnHeaderMenuProps {
     onPinLeft: () => void;
     onPinRight: () => void;
     onUnpin: () => void;
+    onSortAsc: () => void;
+    onSortDesc: () => void;
+    onClearSort: () => void;
+    onAutosizeThis: () => void;
+    onAutosizeAll: () => void;
     canPinLeft: boolean;
     canPinRight: boolean;
     canUnpin: boolean;
+    currentSort: 'asc' | 'desc' | null;
+    isSortable: boolean;
+    isResizable: boolean;
 }
-export declare function ColumnHeaderMenu(props: ColumnHeaderMenuProps): React.ReactElement | null;
+/**
+ * Column header dropdown menu for pin/sort/autosize actions.
+ * Uses positioned div with portal rendering.
+ */
+export declare function ColumnHeaderMenu(props: ColumnHeaderMenuProps): React.ReactPortal | null;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@alaarab/ogrid-react-fluent",
-  "version": "2.0.8",
+  "version": "2.0.11",
   "description": "OGrid Fluent UI implementation – DataGrid-powered data table with sorting, filtering, pagination, column chooser, and CSV export.",
   "main": "dist/esm/index.js",
   "module": "dist/esm/index.js",
@@ -40,7 +40,7 @@
     "node": ">=18"
   },
   "dependencies": {
-    "@alaarab/ogrid-react": "2.0.7"
+    "@alaarab/ogrid-react": "2.0.11"
   },
   "peerDependencies": {
     "@fluentui/react-components": "^9.0.0",
@@ -55,8 +55,8 @@
     "@testing-library/jest-dom": "^6.9.1",
     "@testing-library/react": "^16.3.2",
     "@testing-library/user-event": "^14.6.1",
-    "@types/react": "^18.3.18",
-    "@types/react-dom": "^18.3.5",
+    "@types/react": "^19.0.0",
+    "@types/react-dom": "^19.0.0",
     "eslint-plugin-storybook": "10.2.8",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",