@alaarab/ogrid-react-fluent 2.3.0 → 2.4.1

package/dist/esm/index.css

@@ -1075,20 +1075,15 @@
   text-align: center;
 }
 .ogrid-fluent__DataGridTable-module__dataTable .ogrid-fluent__DataGridTable-module__rowNumberHeaderCellWrapper {
-  width: 50px;
-  min-width: 50px;
-  max-width: 50px;
   padding: 4px 8px;
   text-align: center;
   background: var(--ogrid-header-bg, #f5f5f5);
   font-weight: 600;
   color: var(--colorNeutralForeground3, #666);
   border-right: 1px solid var(--ogrid-border, rgba(0, 0, 0, 0.12));
+  position: relative;
 }
 .ogrid-fluent__DataGridTable-module__dataTable .ogrid-fluent__DataGridTable-module__rowNumberCellWrapper {
-  width: 50px;
-  min-width: 50px;
-  max-width: 50px;
   padding: 4px 8px;
   text-align: center;
   background: var(--colorNeutralBackground3, #f5f5f5);

package/dist/esm/index.js

@@ -1,11 +1,11 @@
 import './index.css';
-import { useColumnHeaderFilterState, getColumnHeaderFilterStateParams, DateFilterContent, renderFilterContent, areGridRowPropsEqual, usePaginationControls, createOGrid, useListVirtualizer, STOP_PROPAGATION, useDataGridTableOrchestration, useColumnMeta, getCellRenderDescriptor, buildInlineEditorProps, buildPopoverEditorProps, POPOVER_ANCHOR_STYLE, resolveCellDisplayContent, resolveCellStyle, getCellInteractionProps, CURSOR_CELL_STYLE, CellErrorBoundary, GRID_ROOT_STYLE, PREVENT_DEFAULT, indexToColumnLetter, getHeaderFilterConfig, MarchingAntsOverlay, NOOP, useColumnChooserState, BaseInlineCellEditor, partitionColumnsForVirtualization, BaseDropIndicator, BaseEmptyState, GridContextMenu as GridContextMenu$1, BaseColumnHeaderMenu, StatusBar as StatusBar$1, BaseLoadingOverlay } from '@alaarab/ogrid-react';
+import { useColumnHeaderFilterState, getColumnHeaderFilterStateParams, DateFilterContent, renderFilterContent, areGridRowPropsEqual, PaginationControlsBase, createOGrid, useListVirtualizer, STOP_PROPAGATION, useDataGridTableOrchestration, useColumnMeta, getCellRenderDescriptor, buildInlineEditorProps, buildPopoverEditorProps, POPOVER_ANCHOR_STYLE, resolveCellDisplayContent, resolveCellStyle, getCellInteractionProps, CURSOR_CELL_STYLE, CellErrorBoundary, GRID_ROOT_STYLE, PREVENT_DEFAULT, indexToColumnLetter, ROW_NUMBER_COLUMN_ID, ROW_NUMBER_COLUMN_WIDTH, getHeaderFilterConfig, MarchingAntsOverlay, FormulaRefOverlay, NOOP, getColumnHeaderMenuProps, useColumnChooserState, ColumnChooserContent, BaseInlineCellEditor, partitionColumnsForVirtualization, BaseDropIndicator, BaseEmptyState, GridContextMenu as GridContextMenu$1, BaseColumnHeaderMenu, StatusBar as StatusBar$1, BaseLoadingOverlay } from '@alaarab/ogrid-react';
 export { BaseColumnHeaderMenu, BaseDropIndicator, BaseEmptyState, BaseInlineCellEditor, BaseLoadingOverlay, CELL_PADDING, CHECKBOX_COLUMN_WIDTH, COLUMN_HEADER_MENU_ITEMS, CURSOR_CELL_STYLE, CellErrorBoundary, DEFAULT_MIN_COLUMN_WIDTH, DateFilterContent, EmptyState, GRID_BORDER_RADIUS, GRID_CONTEXT_MENU_ITEMS, GRID_ROOT_STYLE, GridContextMenu, MAX_PAGE_BUTTONS, MarchingAntsOverlay, NOOP, OGridLayout, PAGE_SIZE_OPTIONS, POPOVER_ANCHOR_STYLE, PREVENT_DEFAULT, ROW_NUMBER_COLUMN_WIDTH, STOP_PROPAGATION, SideBar, StatusBar, UndoRedoStack, areGridRowPropsEqual, booleanParser, buildCsvHeader, buildCsvRows, buildHeaderRows, buildInlineEditorProps, buildPopoverEditorProps, clampSelectionToBounds, computeAggregations, computeAutoScrollSpeed, computeTabNavigation, createOGrid, currencyParser, dateParser, deriveFilterOptionsFromData, editorInputStyle, editorWrapperStyle, emailParser, escapeCsvValue, exportToCsv, findCtrlArrowTarget, flattenColumns, formatCellValueForTsv, formatSelectionAsTsv, formatShortcut, getCellInteractionProps, getCellRenderDescriptor, getCellValue, getColumnHeaderFilterStateParams, getColumnHeaderMenuItems, getContextMenuHandlers, getDataGridStatusBarConfig, getDateFilterContentProps, getFilterField, getHeaderFilterConfig, getMultiSelectFilterFields, getPaginationViewModel, getStatusBarParts, isInSelectionRange, isRowInRange, mergeFilter, normalizeSelectionRange, numberParser, parseTsvClipboard, parseValue, processClientSideData, rangesEqual, renderFilterContent, resolveCellDisplayContent, resolveCellStyle, richSelectDropdownStyle, richSelectNoMatchesStyle, richSelectOptionHighlightedStyle, richSelectOptionStyle, richSelectWrapperStyle, selectChevronStyle, selectDisplayStyle, selectEditorStyle, toUserLike, triggerCsvDownload, useActiveCell, useCellEditing, useCellSelection, useClipboard, useColumnChooserState, useColumnHeaderFilterState, useColumnMeta, useColumnReorder, useColumnResize, useContextMenu, useDataGridState, useDataGridTableOrchestration, useDateFilterState, useDebounce, useFillHandle, useFilterOptions, useInlineCellEditorState, useKeyboardNavigation, useLatestRef, useListVirtualizer, useMultiSelectFilterState, useOGrid, usePaginationControls, usePeopleFilterState, useRichSelectState, useRowSelection, useSelectState, useSideBarState, useTableLayout, useTextFilterState, useUndoRedo, useVirtualScroll } from '@alaarab/ogrid-react';
 import * as React2 from 'react';
 import { useCallback, useRef, useEffect } from 'react';
 import { createPortal } from 'react-dom';
-import { Popover, PopoverSurface, Button, Select, TableRow, TableCell, Checkbox, Table, TableHeader, TableHeaderCell, TableBody } from '@fluentui/react-components';
-import { FilterRegular, ChevronDoubleLeftRegular, ChevronLeftRegular, ChevronRightRegular, ChevronDoubleRightRegular, SearchRegular, ChevronUpRegular, ChevronDownRegular, TableSettingsRegular } from '@fluentui/react-icons';
+import { Popover, PopoverSurface, TableRow, TableCell, Checkbox, Table, TableHeader, TableHeaderCell, Select, Button, TableBody } from '@fluentui/react-components';
+import { FilterRegular, SearchRegular, ChevronUpRegular, ChevronDownRegular, TableSettingsRegular, ChevronDoubleRightRegular, ChevronRightRegular, ChevronLeftRegular, ChevronDoubleLeftRegular } from '@fluentui/react-icons';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 
 // src/ColumnHeaderFilter/ColumnHeaderFilter.module.scss
@@ -557,7 +557,8 @@ function GridRowInner(props) {
     rowNumberOffset,
     leftSpacerWidth,
     rightSpacerWidth,
-    globalColIndexMap
+    globalColIndexMap,
+    rowNumWidth
   } = props;
   return /* @__PURE__ */ jsxs(
     TableRow,
@@ -586,7 +587,7 @@ function GridRowInner(props) {
             )
           }
         ) }),
-        hasRowNumbersCol && /* @__PURE__ */ jsx(TableCell, { className: DataGridTable_module_default.rowNumberCellWrapper, children: /* @__PURE__ */ jsx("div", { className: DataGridTable_module_default.rowNumberCellInner, children: rowNumberOffset + rowIndex + 1 }) }),
+        hasRowNumbersCol && /* @__PURE__ */ jsx(TableCell, { className: DataGridTable_module_default.rowNumberCellWrapper, style: rowNumWidth ? { width: rowNumWidth, minWidth: rowNumWidth, maxWidth: rowNumWidth } : void 0, children: /* @__PURE__ */ jsx("div", { className: DataGridTable_module_default.rowNumberCellInner, children: rowNumberOffset + rowIndex + 1 }) }),
         leftSpacerWidth != null && leftSpacerWidth > 0 && /* @__PURE__ */ jsx("td", { style: { ...SPACER_TD_STYLE, width: leftSpacerWidth, minWidth: leftSpacerWidth }, "aria-hidden": true }),
         visibleCols.map((col, colIdx) => {
           const globalIdx = globalColIndexMap ? globalColIndexMap[colIdx] : colIdx;
@@ -630,7 +631,8 @@ function FluentTableBody(props) {
     copyRange,
     isDragging,
     editingCell,
-    pinnedColumns
+    pinnedColumns,
+    rowNumWidth
   } = props;
   const partition = React2.useMemo(() => {
     if (!columnRange) return null;
@@ -680,7 +682,8 @@ function FluentTableBody(props) {
         editingRowId: editingCell?.rowId ?? null,
         leftSpacerWidth,
         rightSpacerWidth,
-        globalColIndexMap
+        globalColIndexMap,
+        rowNumWidth
       },
       rowIdStr
     );
@@ -822,9 +825,14 @@ function DataGridTableInner(props) {
           )
         ] });
       } else {
-        const displayContent = resolveCellDisplayContent(col, item, descriptor.displayValue);
-        const cellStyle = resolveCellStyle(col, item, descriptor.displayValue);
-        const styledContent = cellStyle ? /* @__PURE__ */ jsx("span", { style: cellStyle, children: displayContent }) : displayContent;
+        let displayNode;
+        if (descriptor.columnType === "boolean") {
+          displayNode = /* @__PURE__ */ jsx("input", { type: "checkbox", checked: !!descriptor.displayValue, disabled: true, style: { margin: 0, pointerEvents: "none" }, "aria-label": descriptor.displayValue ? "True" : "False" });
+        } else {
+          const displayContent = resolveCellDisplayContent(col, item, descriptor.displayValue);
+          const cellStyle = resolveCellStyle(col, item, descriptor.displayValue);
+          displayNode = cellStyle ? /* @__PURE__ */ jsx("span", { style: cellStyle, children: displayContent }) : displayContent;
+        }
         const cellClassNames = `${DataGridTable_module_default.cellContent}${descriptor.isActive ? ` ${DataGridTable_module_default.activeCellContent}` : ""}${descriptor.isActive && descriptor.isInRange ? ` ${DataGridTable_module_default.inRange}` : ""}${descriptor.isInRange && !descriptor.isActive ? ` ${DataGridTable_module_default.cellInRange}` : ""}${descriptor.isInCutRange ? ` ${DataGridTable_module_default.cellCut}` : ""}${descriptor.isInCopyRange ? ` ${DataGridTable_module_default.cellCopied}` : ""}`;
         const interactionProps = getCellInteractionProps(descriptor, col.columnId, interactionHandlers);
         content = /* @__PURE__ */ jsxs(
@@ -834,7 +842,7 @@ function DataGridTableInner(props) {
             ...interactionProps,
             style: descriptor.canEditAny ? CURSOR_CELL_STYLE : void 0,
             children: [
-              styledContent,
+              displayNode,
               descriptor.canEditAny && descriptor.isSelectionEndCell && /* @__PURE__ */ jsx(
                 "div",
                 {
@@ -912,7 +920,27 @@ function DataGridTableInner(props) {
                         }
                       ) }) }, "__selection__"),
                       rowIdx === 0 && rowIdx < headerRows.length - 1 && hasCheckboxCol && /* @__PURE__ */ jsx("th", { rowSpan: headerRows.length - 1 }, "__selection_placeholder__"),
-                      rowIdx === headerRows.length - 1 && hasRowNumbersCol && /* @__PURE__ */ jsx(TableHeaderCell, { className: DataGridTable_module_default.rowNumberHeaderCellWrapper, children: /* @__PURE__ */ jsx("div", { className: DataGridTable_module_default.rowNumberHeaderCellInner, children: "#" }) }, "__row_number__"),
+                      rowIdx === headerRows.length - 1 && hasRowNumbersCol && (() => {
+                        const rowNumW = columnSizingOverrides?.[ROW_NUMBER_COLUMN_ID]?.widthPx ?? ROW_NUMBER_COLUMN_WIDTH;
+                        return /* @__PURE__ */ jsxs(TableHeaderCell, { className: DataGridTable_module_default.rowNumberHeaderCellWrapper, style: { width: rowNumW, minWidth: rowNumW, maxWidth: rowNumW }, children: [
+                          /* @__PURE__ */ jsx("div", { className: DataGridTable_module_default.rowNumberHeaderCellInner, children: "#" }),
+                          /* @__PURE__ */ jsx(
+                            "div",
+                            {
+                              className: DataGridTable_module_default.resizeHandle,
+                              role: "separator",
+                              "aria-orientation": "vertical",
+                              "aria-label": "Resize row number column",
+                              onMouseDown: (e) => {
+                                setActiveCell(null);
+                                interaction.setSelectionRange(null);
+                                wrapperRef.current?.focus({ preventScroll: true });
+                                handleResizeStart(e, { columnId: ROW_NUMBER_COLUMN_ID, name: "#" });
+                              }
+                            }
+                          )
+                        ] }, "__row_number__");
+                      })(),
                       rowIdx === 0 && rowIdx < headerRows.length - 1 && hasRowNumbersCol && /* @__PURE__ */ jsx("th", { rowSpan: headerRows.length - 1 }, "__row_number_placeholder__"),
                       row.map((cell, cellIdx) => {
                         if (cell.isGroup) {
@@ -943,7 +971,11 @@ function DataGridTableInner(props) {
                                     className: DataGridTable_module_default.headerMenuTrigger,
                                     onClick: (e) => {
                                       e.stopPropagation();
-                                      headerMenu.open(col.columnId, e.currentTarget);
+                                      if (headerMenu.isOpen && headerMenu.openForColumn === col.columnId) {
+                                        headerMenu.close();
+                                      } else {
+                                        headerMenu.open(col.columnId, e.currentTarget);
+                                      }
                                     },
                                     "aria-label": "Column options",
                                     title: "Column options",
@@ -1000,7 +1032,8 @@ function DataGridTableInner(props) {
                   copyRange,
                   isDragging,
                   editingCell,
-                  pinnedColumns: pinning.pinnedColumns
+                  pinnedColumns: pinning.pinnedColumns,
+                  rowNumWidth: hasRowNumbersCol ? columnSizingOverrides?.[ROW_NUMBER_COLUMN_ID]?.widthPx ?? ROW_NUMBER_COLUMN_WIDTH : void 0
                 }
               )
             ] }),
@@ -1020,6 +1053,14 @@ function DataGridTableInner(props) {
                 isDragging
               }
             ),
+            props.formulaReferences && props.formulaReferences.length > 0 && /* @__PURE__ */ jsx(
+              FormulaRefOverlay,
+              {
+                containerRef: tableContainerRef,
+                references: props.formulaReferences,
+                colOffset
+              }
+            ),
             showEmptyInGrid && emptyState && /* @__PURE__ */ jsx(EmptyState, { emptyState })
           ] }) }) }),
           menuPosition && createPortal(
@@ -1042,28 +1083,7 @@ function DataGridTableInner(props) {
             ),
             wrapperRef.current?.closest(".fui-FluentProvider") ?? document.body
           ),
-          /* @__PURE__ */ jsx(
-            ColumnHeaderMenu,
-            {
-              isOpen: headerMenu.isOpen,
-              anchorElement: headerMenu.anchorElement,
-              onClose: headerMenu.close,
-              onPinLeft: headerMenu.handlePinLeft,
-              onPinRight: headerMenu.handlePinRight,
-              onUnpin: headerMenu.handleUnpin,
-              onSortAsc: headerMenu.handleSortAsc,
-              onSortDesc: headerMenu.handleSortDesc,
-              onClearSort: headerMenu.handleClearSort,
-              onAutosizeThis: headerMenu.handleAutosizeThis,
-              onAutosizeAll: headerMenu.handleAutosizeAll,
-              canPinLeft: headerMenu.canPinLeft,
-              canPinRight: headerMenu.canPinRight,
-              canUnpin: headerMenu.canUnpin,
-              currentSort: headerMenu.currentSort,
-              isSortable: headerMenu.isSortable,
-              isResizable: headerMenu.isResizable
-            }
-          )
+          /* @__PURE__ */ jsx(ColumnHeaderMenu, { ...getColumnHeaderMenuProps(headerMenu) })
         ]
       }
     ),
@@ -1092,6 +1112,25 @@ var ColumnChooser_module_default = {
   "optionItem": "ogrid-fluent__ColumnChooser-module__optionItem",
   "actions": "ogrid-fluent__ColumnChooser-module__actions"
 };
+var CheckboxItem = ({ columnId, columnName, checked, disabled, onChange }) => /* @__PURE__ */ jsx(
+  Checkbox,
+  {
+    id: `col-${columnId}`,
+    label: columnName,
+    checked,
+    onChange: (_ev, data) => onChange(data.checked === true),
+    disabled
+  }
+);
+var Actions = ({ onClearAll, onSelectAll }) => /* @__PURE__ */ jsxs("div", { className: ColumnChooser_module_default.actions, children: [
+  /* @__PURE__ */ jsx(Button, { appearance: "subtle", size: "small", onClick: onClearAll, children: "Clear All" }),
+  /* @__PURE__ */ jsx(Button, { appearance: "primary", size: "small", onClick: onSelectAll, children: "Select All" })
+] });
+var CLASS_NAMES = {
+  header: ColumnChooser_module_default.header,
+  optionsList: ColumnChooser_module_default.optionsList,
+  optionItem: ColumnChooser_module_default.optionItem
+};
 var ColumnChooser = (props) => {
   const { columns, visibleColumns, onVisibilityChange, onSetVisibleColumns, className } = props;
   const buttonRef = useRef(null);
@@ -1122,9 +1161,7 @@ var ColumnChooser = (props) => {
       document.removeEventListener("mousedown", handleClickOutside);
     };
   }, [open, handleClose]);
-  const handleCheckboxChange = (columnKey) => (_ev, data) => {
-    setColumnVisible(columnKey)(data.checked === true);
-  };
+  const handleCheckboxChange = (columnKey) => (checked) => setColumnVisible(columnKey)(checked);
   return /* @__PURE__ */ jsxs("div", { className: `${ColumnChooser_module_default.container} ${className || ""}`, children: [
     /* @__PURE__ */ jsxs(
       Button,
@@ -1145,28 +1182,21 @@ var ColumnChooser = (props) => {
         ]
       }
     ),
-    open && /* @__PURE__ */ jsxs("div", { ref: dropdownRef, className: ColumnChooser_module_default.dropdown, children: [
-      /* @__PURE__ */ jsxs("div", { className: ColumnChooser_module_default.header, children: [
-        "Select Columns (",
+    open && /* @__PURE__ */ jsx("div", { ref: dropdownRef, className: ColumnChooser_module_default.dropdown, children: /* @__PURE__ */ jsx(
+      ColumnChooserContent,
+      {
+        columns,
+        visibleColumns,
         visibleCount,
-        " of ",
         totalCount,
-        ")"
-      ] }),
-      /* @__PURE__ */ jsx("div", { className: ColumnChooser_module_default.optionsList, children: columns.map((column) => /* @__PURE__ */ jsx("div", { className: ColumnChooser_module_default.optionItem, children: /* @__PURE__ */ jsx(
-        Checkbox,
-        {
-          label: column.name,
-          checked: visibleColumns.has(column.columnId),
-          onChange: handleCheckboxChange(column.columnId),
-          disabled: column.required === true
-        }
-      ) }, column.columnId)) }),
-      /* @__PURE__ */ jsxs("div", { className: ColumnChooser_module_default.actions, children: [
-        /* @__PURE__ */ jsx(Button, { appearance: "subtle", size: "small", onClick: handleClearAll, children: "Clear All" }),
-        /* @__PURE__ */ jsx(Button, { appearance: "primary", size: "small", onClick: handleSelectAll, children: "Select All" })
-      ] })
-    ] })
+        handleSelectAll,
+        handleClearAll,
+        handleCheckboxChange,
+        CheckboxItem,
+        classNames: CLASS_NAMES,
+        Actions
+      }
+    ) })
   ] });
 };
 
@@ -1183,71 +1213,57 @@ var PaginationControls_module_default = {
   "pageSizeLabel": "ogrid-fluent__PaginationControls-module__pageSizeLabel",
   "pageSizeSelect": "ogrid-fluent__PaginationControls-module__pageSizeSelect"
 };
-var PaginationControls = React2.memo((props) => {
-  const { currentPage, pageSize, totalCount, onPageChange, onPageSizeChange, pageSizeOptions, entityLabelPlural, className } = props;
-  const { labelPlural, vm, handlePageSizeChange } = usePaginationControls({
-    currentPage,
-    pageSize,
-    totalCount,
-    onPageChange,
-    onPageSizeChange,
-    pageSizeOptions,
-    entityLabelPlural
-  });
-  const handlePageSizeChangeEvent = (_e, data) => {
-    handlePageSizeChange(Number(data.value));
-  };
-  if (!vm) {
-    return null;
+var FLUENT_NAV_ICONS = {
+  first: /* @__PURE__ */ jsx(ChevronDoubleLeftRegular, {}),
+  prev: /* @__PURE__ */ jsx(ChevronLeftRegular, {}),
+  next: /* @__PURE__ */ jsx(ChevronRightRegular, {}),
+  last: /* @__PURE__ */ jsx(ChevronDoubleRightRegular, {})
+};
+var NavButton = ({ variant, onClick, disabled, "aria-label": ariaLabel, className }) => /* @__PURE__ */ jsx(
+  Button,
+  {
+    appearance: "outline",
+    shape: "circular",
+    size: "small",
+    icon: FLUENT_NAV_ICONS[variant],
+    onClick,
+    disabled,
+    "aria-label": ariaLabel,
+    className
   }
-  const { pageNumbers, showStartEllipsis, showEndEllipsis, totalPages, startItem, endItem } = vm;
-  return /* @__PURE__ */ jsxs("div", { className: `${PaginationControls_module_default.pagination} ${className || ""}`, role: "navigation", "aria-label": "Pagination", children: [
-    /* @__PURE__ */ jsxs("div", { className: PaginationControls_module_default.paginationInfo, children: [
-      "Showing ",
-      startItem,
-      " to ",
-      endItem,
-      " of ",
-      totalCount.toLocaleString(),
-      " ",
-      labelPlural
-    ] }),
-    /* @__PURE__ */ jsxs("div", { className: PaginationControls_module_default.paginationControls, children: [
-      /* @__PURE__ */ jsx(Button, { appearance: "outline", shape: "circular", size: "small", icon: /* @__PURE__ */ jsx(ChevronDoubleLeftRegular, {}), onClick: () => onPageChange(1), disabled: currentPage === 1, "aria-label": "First page", className: PaginationControls_module_default.navBtn }),
-      /* @__PURE__ */ jsx(Button, { appearance: "outline", shape: "circular", size: "small", icon: /* @__PURE__ */ jsx(ChevronLeftRegular, {}), onClick: () => onPageChange(currentPage - 1), disabled: currentPage === 1, "aria-label": "Previous page", className: PaginationControls_module_default.navBtn }),
-      /* @__PURE__ */ jsxs("div", { className: PaginationControls_module_default.pageNumbers, children: [
-        showStartEllipsis && /* @__PURE__ */ jsxs(Fragment, { children: [
-          /* @__PURE__ */ jsx(Button, { appearance: "outline", size: "small", shape: "rounded", onClick: () => onPageChange(1), "aria-label": "Page 1", className: PaginationControls_module_default.pageBtn, children: "1" }),
-          /* @__PURE__ */ jsx("span", { className: PaginationControls_module_default.ellipsis, "aria-hidden": true, children: "\u2026" })
-        ] }),
-        pageNumbers.map((pageNum) => /* @__PURE__ */ jsx(
-          Button,
-          {
-            appearance: currentPage === pageNum ? "primary" : "outline",
-            size: "small",
-            shape: "rounded",
-            onClick: () => onPageChange(pageNum),
-            "aria-label": `Page ${pageNum}`,
-            "aria-current": currentPage === pageNum ? "page" : void 0,
-            className: PaginationControls_module_default.pageBtn,
-            children: pageNum
-          },
-          pageNum
-        )),
-        showEndEllipsis && /* @__PURE__ */ jsxs(Fragment, { children: [
-          /* @__PURE__ */ jsx("span", { className: PaginationControls_module_default.ellipsis, "aria-hidden": true, children: "\u2026" }),
-          /* @__PURE__ */ jsx(Button, { appearance: "outline", size: "small", shape: "rounded", onClick: () => onPageChange(totalPages), "aria-label": `Page ${totalPages}`, className: PaginationControls_module_default.pageBtn, children: totalPages })
-        ] })
-      ] }),
-      /* @__PURE__ */ jsx(Button, { appearance: "outline", shape: "circular", size: "small", icon: /* @__PURE__ */ jsx(ChevronRightRegular, {}), onClick: () => onPageChange(currentPage + 1), disabled: currentPage >= totalPages, "aria-label": "Next page", className: PaginationControls_module_default.navBtn }),
-      /* @__PURE__ */ jsx(Button, { appearance: "outline", shape: "circular", size: "small", icon: /* @__PURE__ */ jsx(ChevronDoubleRightRegular, {}), onClick: () => onPageChange(totalPages), disabled: currentPage >= totalPages, "aria-label": "Last page", className: PaginationControls_module_default.navBtn })
-    ] }),
-    /* @__PURE__ */ jsxs("div", { className: PaginationControls_module_default.pageSizeSelector, children: [
-      /* @__PURE__ */ jsx("span", { className: PaginationControls_module_default.pageSizeLabel, children: "Rows" }),
-      /* @__PURE__ */ jsx(Select, { value: String(pageSize), onChange: handlePageSizeChangeEvent, size: "small", appearance: "outline", "aria-label": "Rows per page", className: PaginationControls_module_default.pageSizeSelect, children: vm.pageSizeOptions.map((n) => /* @__PURE__ */ jsx("option", { value: n, children: n }, n)) })
-    ] })
-  ] });
-});
+);
+var PageButton = ({ onClick, active, "aria-label": ariaLabel, "aria-current": ariaCurrent, children, className }) => /* @__PURE__ */ jsx(
+  Button,
+  {
+    appearance: active ? "primary" : "outline",
+    size: "small",
+    shape: "rounded",
+    onClick,
+    "aria-label": ariaLabel,
+    "aria-current": ariaCurrent,
+    className,
+    children
+  }
+);
+var PageSizeSelect = ({ value, options, onChange, "aria-label": ariaLabel, className }) => {
+  const handleChange = (_e, data) => onChange(Number(data.value));
+  return /* @__PURE__ */ jsx(Select, { value: String(value), onChange: handleChange, size: "small", appearance: "outline", "aria-label": ariaLabel, className, children: options.map((n) => /* @__PURE__ */ jsx("option", { value: n, children: n }, n)) });
+};
+var SLOTS = { NavButton, PageButton, PageSizeSelect };
+var CLASS_NAMES2 = {
+  pagination: PaginationControls_module_default.pagination,
+  paginationInfo: PaginationControls_module_default.paginationInfo,
+  paginationControls: PaginationControls_module_default.paginationControls,
+  pageNumbers: PaginationControls_module_default.pageNumbers,
+  ellipsis: PaginationControls_module_default.ellipsis,
+  navBtn: PaginationControls_module_default.navBtn,
+  pageBtn: PaginationControls_module_default.pageBtn,
+  pageSizeSelector: PaginationControls_module_default.pageSizeSelector,
+  pageSizeLabel: PaginationControls_module_default.pageSizeLabel,
+  pageSizeSelect: PaginationControls_module_default.pageSizeSelect
+};
+var PaginationControls = React2.memo((props) => /* @__PURE__ */ jsx(PaginationControlsBase, { ...props, slots: SLOTS, classNames: CLASS_NAMES2 }));
+PaginationControls.displayName = "PaginationControls";
 
 // src/OGrid/OGrid.tsx
 var OGrid = createOGrid({

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@alaarab/ogrid-react-fluent",
-  "version": "2.3.0",
+  "version": "2.4.1",
   "description": "OGrid React Fluent implementation – DataGrid-powered data table with sorting, filtering, pagination, column chooser, and CSV export.",
   "main": "dist/esm/index.js",
   "module": "dist/esm/index.js",
@@ -41,7 +41,7 @@
     "node": ">=18"
   },
   "dependencies": {
-    "@alaarab/ogrid-react": "2.3.0"
+    "@alaarab/ogrid-react": "2.4.1"
   },
   "peerDependencies": {
     "@fluentui/react-components": "^9.0.0",