@alaarab/ogrid-react-fluent 2.2.0 → 2.4.0

package/dist/esm/index.css

@@ -601,7 +601,7 @@
 .ogrid-fluent__DataGridTable-module__dataTable:not([data-virtual-scroll]) tbody tr {
   content-visibility: auto;
 }
-.ogrid-fluent__DataGridTable-module__activeCellContent {
+.ogrid-fluent__DataGridTable-module__tableWrapper .ogrid-fluent__DataGridTable-module__activeCellContent.ogrid-fluent__DataGridTable-module__activeCellContent {
   outline: 2px solid var(--ogrid-selection-color, #217346);
   outline-offset: -1px;
   z-index: var(--ogrid-z-active-cell, 2);
@@ -609,7 +609,7 @@
   overflow: visible;
   background: var(--ogrid-active-cell-bg, rgba(0, 0, 0, 0.02));
 }
-.ogrid-fluent__DataGridTable-module__editingCellContent {
+.ogrid-fluent__DataGridTable-module__tableWrapper .ogrid-fluent__DataGridTable-module__editingCellContent.ogrid-fluent__DataGridTable-module__editingCellContent {
   width: 100%;
   height: 100%;
   display: flex;
@@ -632,10 +632,14 @@
 .ogrid-fluent__DataGridTable-module__tableWrapper [data-drag-anchor] {
   background: var(--ogrid-bg, #fff);
 }
-.ogrid-fluent__DataGridTable-module__activeCellContent[data-drag-anchor],
-.ogrid-fluent__DataGridTable-module__activeCellContent[data-drag-range] {
+.ogrid-fluent__DataGridTable-module__tableWrapper .ogrid-fluent__DataGridTable-module__activeCellContent.ogrid-fluent__DataGridTable-module__activeCellContent[data-drag-anchor],
+.ogrid-fluent__DataGridTable-module__tableWrapper .ogrid-fluent__DataGridTable-module__activeCellContent.ogrid-fluent__DataGridTable-module__activeCellContent[data-drag-range] {
   outline: none;
 }
+.ogrid-fluent__DataGridTable-module__tableWrapper .ogrid-fluent__DataGridTable-module__activeCellContent.ogrid-fluent__DataGridTable-module__activeCellContent.ogrid-fluent__DataGridTable-module__inRange {
+  outline: none;
+  background: var(--ogrid-bg, #fff);
+}
 .ogrid-fluent__DataGridTable-module__tableWrapper .ogrid-fluent__DataGridTable-module__cellCut {
   background: var(--ogrid-hover-bg, rgba(0, 0, 0, 0.04));
   opacity: 0.7;
@@ -668,6 +672,20 @@
   width: 100%;
   font-variant-numeric: tabular-nums;
 }
+.ogrid-fluent__DataGridTable-module__columnLetterRow {
+  background: var(--ogrid-column-letter-bg, var(--ogrid-header-bg));
+}
+.ogrid-fluent__DataGridTable-module__columnLetterCell {
+  text-align: center;
+  font-size: 11px;
+  font-weight: 500;
+  color: var(--ogrid-fg-muted, rgba(0, 0, 0, 0.5));
+  padding: 2px 4px;
+  background: var(--ogrid-column-letter-bg, var(--ogrid-header-bg));
+  border-bottom: 1px solid var(--ogrid-border, rgba(0, 0, 0, 0.12));
+  user-select: none;
+  font-variant-numeric: tabular-nums;
+}
 .ogrid-fluent__DataGridTable-module__statusBar {
   display: flex;
   align-items: center;
@@ -873,6 +891,7 @@
   --ogrid-shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.08);
   --ogrid-pinned-shadow: rgba(0, 0, 0, 0.1);
   --ogrid-loading-overlay: rgba(255, 255, 255, 0.7);
+  --ogrid-formula-error-color: #d32f2f;
   --ogrid-selection: #217346;
   --ogrid-bg-range: rgba(33, 115, 70, 0.12);
   --ogrid-bg-selected: #e6f0fb;
@@ -907,6 +926,7 @@
     --ogrid-shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.25);
     --ogrid-pinned-shadow: rgba(0, 0, 0, 0.3);
     --ogrid-loading-overlay: rgba(0, 0, 0, 0.7);
+    --ogrid-formula-error-color: #ef5350;
     --ogrid-selection: #2ea043;
     --ogrid-bg-range: rgba(46, 160, 67, 0.15);
     --ogrid-bg-selected: #1a3a5c;
@@ -941,6 +961,7 @@
   --ogrid-shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.25);
   --ogrid-pinned-shadow: rgba(0, 0, 0, 0.3);
   --ogrid-loading-overlay: rgba(0, 0, 0, 0.7);
+  --ogrid-formula-error-color: #ef5350;
   --ogrid-selection: #2ea043;
   --ogrid-bg-range: rgba(46, 160, 67, 0.15);
   --ogrid-bg-selected: #1a3a5c;

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, 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, 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
@@ -456,12 +456,15 @@ var DataGridTable_module_default = {
   "activeCellContent": "ogrid-fluent__DataGridTable-module__activeCellContent",
   "editingCellContent": "ogrid-fluent__DataGridTable-module__editingCellContent",
   "cellInRange": "ogrid-fluent__DataGridTable-module__cellInRange",
+  "inRange": "ogrid-fluent__DataGridTable-module__inRange",
   "cellCut": "ogrid-fluent__DataGridTable-module__cellCut",
   "fillHandle": "ogrid-fluent__DataGridTable-module__fillHandle",
   "selectionHeaderCellInner": "ogrid-fluent__DataGridTable-module__selectionHeaderCellInner",
   "selectionCellInner": "ogrid-fluent__DataGridTable-module__selectionCellInner",
   "rowNumberHeaderCellInner": "ogrid-fluent__DataGridTable-module__rowNumberHeaderCellInner",
   "rowNumberCellInner": "ogrid-fluent__DataGridTable-module__rowNumberCellInner",
+  "columnLetterRow": "ogrid-fluent__DataGridTable-module__columnLetterRow",
+  "columnLetterCell": "ogrid-fluent__DataGridTable-module__columnLetterCell",
   "statusBar": "ogrid-fluent__DataGridTable-module__statusBar",
   "statusBarItem": "ogrid-fluent__DataGridTable-module__statusBarItem",
   "statusBarLabel": "ogrid-fluent__DataGridTable-module__statusBarLabel",
@@ -725,6 +728,7 @@ function DataGridTableInner(props) {
     headerRows,
     allowOverflowX,
     fitToContent,
+    showColumnLetters,
     editCallbacks,
     interactionHandlers,
     cellDescriptorInputRef,
@@ -819,9 +823,9 @@ function DataGridTableInner(props) {
         ] });
       } else {
         const displayContent = resolveCellDisplayContent(col, item, descriptor.displayValue);
-        const cellStyle = resolveCellStyle(col, item);
+        const cellStyle = resolveCellStyle(col, item, descriptor.displayValue);
         const styledContent = cellStyle ? /* @__PURE__ */ jsx("span", { style: cellStyle, children: displayContent }) : displayContent;
-        const cellClassNames = `${DataGridTable_module_default.cellContent}${descriptor.isActive ? ` ${DataGridTable_module_default.activeCellContent}` : ""}${descriptor.isInRange && !descriptor.isActive ? ` ${DataGridTable_module_default.cellInRange}` : ""}${descriptor.isInCutRange ? ` ${DataGridTable_module_default.cellCut}` : ""}${descriptor.isInCopyRange ? ` ${DataGridTable_module_default.cellCopied}` : ""}`;
+        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(
           "div",
@@ -880,81 +884,96 @@ function DataGridTableInner(props) {
         children: [
           /* @__PURE__ */ jsx("div", { className: DataGridTable_module_default.tableScrollContent, children: /* @__PURE__ */ jsx("div", { className: isLoading && items.length > 0 ? DataGridTable_module_default.loadingDimmed : void 0, children: /* @__PURE__ */ jsxs("div", { className: DataGridTable_module_default.tableWidthAnchor, ref: tableContainerRef, children: [
             /* @__PURE__ */ jsxs(Table, { role: "grid", className: DataGridTable_module_default.dataTable, "data-virtual-scroll": virtualScrollEnabled ? "" : void 0, children: [
-              /* @__PURE__ */ jsx(
+              /* @__PURE__ */ jsxs(
                 TableHeader,
                 {
                   className: o.stickyHeader ? DataGridTable_module_default.stickyHeader : void 0,
-                  children: headerRows.map((row, rowIdx) => /* @__PURE__ */ jsxs(TableRow, { children: [
-                    rowIdx === headerRows.length - 1 && hasCheckboxCol && /* @__PURE__ */ jsx(TableHeaderCell, { className: DataGridTable_module_default.selectionHeaderCellWrapper, children: /* @__PURE__ */ jsx("div", { className: DataGridTable_module_default.selectionHeaderCellInner, children: /* @__PURE__ */ jsx(
-                      Checkbox,
-                      {
-                        checked: allSelected ? true : someSelected ? "mixed" : false,
-                        onChange: (_, data) => handleSelectAll(!!data.checked),
-                        "aria-label": "Select all rows"
-                      }
-                    ) }) }, "__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 === 0 && rowIdx < headerRows.length - 1 && hasRowNumbersCol && /* @__PURE__ */ jsx("th", { rowSpan: headerRows.length - 1 }, "__row_number_placeholder__"),
-                    row.map((cell, cellIdx) => {
-                      if (cell.isGroup) {
-                        return /* @__PURE__ */ jsx("th", { colSpan: cell.colSpan, className: DataGridTable_module_default.groupHeaderCell, scope: "colgroup", children: cell.label }, cellIdx);
-                      }
-                      if (!cell.columnDef) return null;
-                      const col = cell.columnDef;
-                      const isSorted = props.sortBy === col.columnId;
-                      const ariaSort = isSorted ? props.sortDirection === "asc" ? "ascending" : "descending" : void 0;
-                      return /* @__PURE__ */ jsxs(
-                        TableHeaderCell,
+                  children: [
+                    showColumnLetters && /* @__PURE__ */ jsxs(TableRow, { children: [
+                      hasCheckboxCol && /* @__PURE__ */ jsx("th", { className: DataGridTable_module_default.columnLetterCell }),
+                      hasRowNumbersCol && /* @__PURE__ */ jsx("th", { className: DataGridTable_module_default.columnLetterCell }),
+                      visibleCols.map((col, colIdx) => /* @__PURE__ */ jsx(
+                        "th",
                         {
-                          scope: "col",
-                          "data-column-id": col.columnId,
-                          className: columnMeta.hdrClasses[col.columnId] || void 0,
-                          style: {
-                            ...columnMeta.hdrStyles[col.columnId],
-                            ...columnReorder ? { cursor: isReorderDragging ? "grabbing" : "grab" } : void 0
-                          },
-                          "aria-sort": ariaSort,
-                          onMouseDown: columnReorder ? (e) => handleHeaderMouseDown(col.columnId, e) : void 0,
-                          children: [
-                            /* @__PURE__ */ jsxs("div", { className: DataGridTable_module_default.headerCellContent, children: [
-                              /* @__PURE__ */ jsx(ColumnHeaderFilter, { ...getHeaderFilterConfig(col, headerFilterInput) }),
+                          className: `${DataGridTable_module_default.columnLetterCell}${columnMeta.hdrClasses[col.columnId] ? ` ${columnMeta.hdrClasses[col.columnId]}` : ""}`,
+                          style: columnMeta.hdrStyles[col.columnId],
+                          children: indexToColumnLetter(colIdx)
+                        },
+                        col.columnId
+                      ))
+                    ] }),
+                    headerRows.map((row, rowIdx) => /* @__PURE__ */ jsxs(TableRow, { children: [
+                      rowIdx === headerRows.length - 1 && hasCheckboxCol && /* @__PURE__ */ jsx(TableHeaderCell, { className: DataGridTable_module_default.selectionHeaderCellWrapper, children: /* @__PURE__ */ jsx("div", { className: DataGridTable_module_default.selectionHeaderCellInner, children: /* @__PURE__ */ jsx(
+                        Checkbox,
+                        {
+                          checked: allSelected ? true : someSelected ? "mixed" : false,
+                          onChange: (_, data) => handleSelectAll(!!data.checked),
+                          "aria-label": "Select all rows"
+                        }
+                      ) }) }, "__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 === 0 && rowIdx < headerRows.length - 1 && hasRowNumbersCol && /* @__PURE__ */ jsx("th", { rowSpan: headerRows.length - 1 }, "__row_number_placeholder__"),
+                      row.map((cell, cellIdx) => {
+                        if (cell.isGroup) {
+                          return /* @__PURE__ */ jsx("th", { colSpan: cell.colSpan, className: DataGridTable_module_default.groupHeaderCell, scope: "colgroup", children: cell.label }, cellIdx);
+                        }
+                        if (!cell.columnDef) return null;
+                        const col = cell.columnDef;
+                        const isSorted = props.sortBy === col.columnId;
+                        const ariaSort = isSorted ? props.sortDirection === "asc" ? "ascending" : "descending" : void 0;
+                        return /* @__PURE__ */ jsxs(
+                          TableHeaderCell,
+                          {
+                            scope: "col",
+                            "data-column-id": col.columnId,
+                            className: columnMeta.hdrClasses[col.columnId] || void 0,
+                            style: {
+                              ...columnMeta.hdrStyles[col.columnId],
+                              ...columnReorder ? { cursor: isReorderDragging ? "grabbing" : "grab" } : void 0
+                            },
+                            "aria-sort": ariaSort,
+                            onMouseDown: columnReorder ? (e) => handleHeaderMouseDown(col.columnId, e) : void 0,
+                            children: [
+                              /* @__PURE__ */ jsxs("div", { className: DataGridTable_module_default.headerCellContent, children: [
+                                /* @__PURE__ */ jsx(ColumnHeaderFilter, { ...getHeaderFilterConfig(col, headerFilterInput) }),
+                                /* @__PURE__ */ jsx(
+                                  "button",
+                                  {
+                                    className: DataGridTable_module_default.headerMenuTrigger,
+                                    onClick: (e) => {
+                                      e.stopPropagation();
+                                      headerMenu.open(col.columnId, e.currentTarget);
+                                    },
+                                    "aria-label": "Column options",
+                                    title: "Column options",
+                                    children: "\u22EE"
+                                  }
+                                )
+                              ] }),
                               /* @__PURE__ */ jsx(
-                                "button",
+                                "div",
                                 {
-                                  className: DataGridTable_module_default.headerMenuTrigger,
-                                  onClick: (e) => {
-                                    e.stopPropagation();
-                                    headerMenu.open(col.columnId, e.currentTarget);
+                                  className: DataGridTable_module_default.resizeHandle,
+                                  role: "separator",
+                                  "aria-orientation": "vertical",
+                                  onMouseDown: (e) => {
+                                    setActiveCell(null);
+                                    interaction.setSelectionRange(null);
+                                    wrapperRef.current?.focus({ preventScroll: true });
+                                    handleResizeStart(e, col);
                                   },
-                                  "aria-label": "Column options",
-                                  title: "Column options",
-                                  children: "\u22EE"
+                                  onDoubleClick: (e) => handleResizeDoubleClick(e, col),
+                                  "aria-label": `Resize ${col.name}`
                                 }
                               )
-                            ] }),
-                            /* @__PURE__ */ jsx(
-                              "div",
-                              {
-                                className: DataGridTable_module_default.resizeHandle,
-                                role: "separator",
-                                "aria-orientation": "vertical",
-                                onMouseDown: (e) => {
-                                  setActiveCell(null);
-                                  interaction.setSelectionRange(null);
-                                  wrapperRef.current?.focus({ preventScroll: true });
-                                  handleResizeStart(e, col);
-                                },
-                                onDoubleClick: (e) => handleResizeDoubleClick(e, col),
-                                "aria-label": `Resize ${col.name}`
-                              }
-                            )
-                          ]
-                        },
-                        col.columnId
-                      );
-                    })
-                  ] }, rowIdx))
+                            ]
+                          },
+                          col.columnId
+                        );
+                      })
+                    ] }, rowIdx))
+                  ]
                 }
               ),
               !showEmptyInGrid && /* @__PURE__ */ jsx(
@@ -1001,6 +1020,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(
@@ -1023,28 +1050,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) })
         ]
       }
     ),
@@ -1073,6 +1079,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);
@@ -1103,9 +1128,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,
@@ -1126,28 +1149,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
+      }
+    ) })
   ] });
 };
 
@@ -1164,71 +1180,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.2.0",
+  "version": "2.4.0",
   "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.2.0"
+    "@alaarab/ogrid-react": "2.4.0"
   },
   "peerDependencies": {
     "@fluentui/react-components": "^9.0.0",