@alaarab/ogrid-react-material 2.3.0 → 2.4.0

package/dist/esm/index.js

@@ -1,10 +1,10 @@
 import * as React4 from 'react';
 import { useMemo, useCallback, useState, useRef, useEffect } from 'react';
-import { Box, Tooltip, Typography, IconButton, Popover, Button, Select, MenuItem, useTheme, Checkbox, Table, TableHead, TableRow, TableCell, FormControlLabel, Avatar, TextField, InputAdornment, CircularProgress, Menu, Divider } from '@mui/material';
-import { useColumnHeaderFilterState, getColumnHeaderFilterStateParams, renderFilterContent, areGridRowPropsEqual, usePaginationControls, createOGrid, DateFilterContent, CHECKBOX_COLUMN_WIDTH, STOP_PROPAGATION, ROW_NUMBER_COLUMN_WIDTH, useDataGridTableOrchestration, useColumnMeta, getCellRenderDescriptor, buildInlineEditorProps, buildPopoverEditorProps, resolveCellDisplayContent, resolveCellStyle, getCellInteractionProps, CellErrorBoundary, PREVENT_DEFAULT, indexToColumnLetter, getHeaderFilterConfig, MarchingAntsOverlay, NOOP, useColumnChooserState, useListVirtualizer, BaseInlineCellEditor, partitionColumnsForVirtualization, getContextMenuHandlers, GRID_CONTEXT_MENU_ITEMS, formatShortcut, getColumnHeaderMenuItems, getStatusBarParts } from '@alaarab/ogrid-react';
+import { Box, Tooltip, Typography, IconButton, Popover, useTheme, TextField, InputAdornment, Button, CircularProgress, FormControlLabel, Checkbox, Avatar, Table, TableHead, TableRow, TableCell, Select, MenuItem, Menu, Divider } from '@mui/material';
+import { createBaseFilterRenderers, useColumnHeaderFilterState, getColumnHeaderFilterStateParams, renderFilterContent, areGridRowPropsEqual, PaginationControlsBase, createOGrid, useListVirtualizer, CHECKBOX_COLUMN_WIDTH, STOP_PROPAGATION, ROW_NUMBER_COLUMN_WIDTH, useDataGridTableOrchestration, useColumnMeta, getCellRenderDescriptor, buildInlineEditorProps, buildPopoverEditorProps, resolveCellDisplayContent, resolveCellStyle, getCellInteractionProps, CellErrorBoundary, PREVENT_DEFAULT, indexToColumnLetter, getHeaderFilterConfig, MarchingAntsOverlay, FormulaRefOverlay, NOOP, getColumnHeaderMenuProps, useColumnChooserState, ColumnChooserContent, BaseInlineCellEditor, partitionColumnsForVirtualization, getContextMenuHandlers, GRID_CONTEXT_MENU_ITEMS, formatShortcut, getColumnHeaderMenuItems, getStatusBarParts } 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 { createPortal } from 'react-dom';
-import { FilterList, FirstPage, ChevronLeft, ChevronRight, LastPage, ExpandLess, ExpandMore, ViewColumn, Clear, Search } from '@mui/icons-material';
+import { FilterList, Search, Clear, ExpandLess, ExpandMore, ViewColumn, LastPage, ChevronRight, ChevronLeft, FirstPage } from '@mui/icons-material';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 
 // src/OGrid/OGrid.tsx
@@ -228,56 +228,9 @@ var PeopleFilterPopover = ({
   selectedUser && /* @__PURE__ */ jsx(Box, { sx: { p: 1.5, pt: 1, borderTop: 1, borderColor: "divider" }, children: /* @__PURE__ */ jsx(Button, { size: "small", fullWidth: true, onClick: onClearUser, children: "Clear Filter" }) })
 ] });
 PeopleFilterPopover.displayName = "PeopleFilterPopover";
-var materialRenderers = {
-  renderMultiSelect: (p) => /* @__PURE__ */ jsx(
-    MultiSelectFilterPopover,
-    {
-      searchText: p.searchText,
-      onSearchChange: p.onSearchChange,
-      options: p.options,
-      filteredOptions: p.filteredOptions,
-      selected: p.selected,
-      onOptionToggle: p.onOptionToggle,
-      onSelectAll: p.onSelectAll,
-      onClearSelection: p.onClearSelection,
-      onApply: p.onApply,
-      isLoading: p.isLoading
-    }
-  ),
-  renderText: (p) => /* @__PURE__ */ jsx(
-    TextFilterPopover,
-    {
-      value: p.value,
-      onValueChange: p.onValueChange,
-      onApply: p.onApply,
-      onClear: p.onClear
-    }
-  ),
-  renderPeople: (p) => /* @__PURE__ */ jsx(
-    PeopleFilterPopover,
-    {
-      selectedUser: p.selectedUser,
-      searchText: p.searchText,
-      onSearchChange: p.onSearchChange,
-      suggestions: p.suggestions,
-      isLoading: p.isLoading,
-      onUserSelect: p.onUserSelect,
-      onClearUser: p.onClearUser,
-      inputRef: p.inputRef
-    }
-  ),
-  renderDate: (p) => /* @__PURE__ */ jsx(
-    DateFilterContent,
-    {
-      tempDateFrom: p.tempDateFrom,
-      setTempDateFrom: p.setTempDateFrom,
-      tempDateTo: p.tempDateTo,
-      setTempDateTo: p.setTempDateTo,
-      onApply: p.onApply,
-      onClear: p.onClear
-    }
-  )
-};
+var materialRenderers = createBaseFilterRenderers(
+  { MultiSelectFilterPopover, TextFilterPopover, PeopleFilterPopover }
+);
 var ColumnHeaderFilter = React4.memo((props) => {
   const {
     columnName,
@@ -1351,6 +1304,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(
@@ -1373,28 +1334,7 @@ function DataGridTableInner(props) {
             ),
             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) })
         ]
       }
     ),
@@ -1413,6 +1353,53 @@ function DataGridTableInner(props) {
   ] });
 }
 var DataGridTable = React4.memo(DataGridTableInner);
+var CheckboxItem = ({ columnId: _columnId, columnName, checked, disabled, onChange }) => /* @__PURE__ */ jsx(
+  FormControlLabel,
+  {
+    control: /* @__PURE__ */ jsx(
+      Checkbox,
+      {
+        size: "small",
+        checked,
+        onChange: (ev) => {
+          ev.stopPropagation();
+          onChange(ev.target.checked);
+        },
+        disabled
+      }
+    ),
+    label: /* @__PURE__ */ jsx(Typography, { variant: "body2", children: columnName }),
+    sx: { m: 0 }
+  }
+);
+var Header = ({ visibleCount, totalCount }) => /* @__PURE__ */ jsx(Box, { sx: { px: 1.5, py: 1, borderBottom: 1, borderColor: "divider", bgcolor: "action.hover" }, children: /* @__PURE__ */ jsxs(Typography, { variant: "subtitle2", fontWeight: 600, children: [
+  "Select Columns (",
+  visibleCount,
+  " of ",
+  totalCount,
+  ")"
+] }) });
+var OptionsListContainer = ({ children }) => /* @__PURE__ */ jsx(Box, { sx: { maxHeight: 320, overflowY: "auto", py: 0.5 }, children });
+var OptionItemContainer = ({ children }) => /* @__PURE__ */ jsx(Box, { sx: { px: 1.5, minHeight: 32, display: "flex", alignItems: "center" }, children });
+var Actions = ({ onClearAll, onSelectAll }) => /* @__PURE__ */ jsxs(
+  Box,
+  {
+    sx: {
+      display: "flex",
+      justifyContent: "flex-end",
+      gap: 1,
+      px: 1.5,
+      py: 1,
+      borderTop: 1,
+      borderColor: "divider",
+      bgcolor: "action.hover"
+    },
+    children: [
+      /* @__PURE__ */ jsx(Button, { size: "small", onClick: onClearAll, sx: { textTransform: "none" }, children: "Clear All" }),
+      /* @__PURE__ */ jsx(Button, { size: "small", variant: "contained", onClick: onSelectAll, sx: { textTransform: "none" }, children: "Select All" })
+    ]
+  }
+);
 var ColumnChooser = (props) => {
   const { columns, visibleColumns, onVisibilityChange, onSetVisibleColumns, className } = props;
   const [anchorEl, setAnchorEl] = useState(null);
@@ -1440,10 +1427,7 @@ var ColumnChooser = (props) => {
     handleClose();
     setAnchorEl(null);
   };
-  const handleCheckboxChange = (columnKey) => (ev) => {
-    ev.stopPropagation();
-    setColumnVisible(columnKey)(ev.target.checked);
-  };
+  const handleCheckboxChange = (columnKey) => (checked) => setColumnVisible(columnKey)(checked);
   return /* @__PURE__ */ jsxs(Box, { className, sx: { display: "inline-flex" }, children: [
     /* @__PURE__ */ jsxs(
       Button,
@@ -1471,7 +1455,7 @@ var ColumnChooser = (props) => {
         ]
       }
     ),
-    /* @__PURE__ */ jsxs(
+    /* @__PURE__ */ jsx(
       Popover,
       {
         open: isOpen,
@@ -1479,236 +1463,89 @@ var ColumnChooser = (props) => {
         onClose: handlePopoverClose,
         anchorOrigin: { vertical: "bottom", horizontal: "right" },
         transformOrigin: { vertical: "top", horizontal: "right" },
-        slotProps: {
-          paper: {
-            sx: { mt: 0.5, minWidth: 220 }
+        slotProps: { paper: { sx: { mt: 0.5, minWidth: 220 } } },
+        children: /* @__PURE__ */ jsx(
+          ColumnChooserContent,
+          {
+            columns,
+            visibleColumns,
+            visibleCount,
+            totalCount,
+            handleSelectAll,
+            handleClearAll,
+            handleCheckboxChange,
+            CheckboxItem,
+            Header,
+            OptionsListContainer,
+            OptionItemContainer,
+            Actions
           }
-        },
-        children: [
-          /* @__PURE__ */ jsx(
-            Box,
-            {
-              sx: {
-                px: 1.5,
-                py: 1,
-                borderBottom: 1,
-                borderColor: "divider",
-                bgcolor: "action.hover"
-              },
-              children: /* @__PURE__ */ jsxs(Typography, { variant: "subtitle2", fontWeight: 600, children: [
-                "Select Columns (",
-                visibleCount,
-                " of ",
-                totalCount,
-                ")"
-              ] })
-            }
-          ),
-          /* @__PURE__ */ jsx(Box, { sx: { maxHeight: 320, overflowY: "auto", py: 0.5 }, children: columns.map((column) => /* @__PURE__ */ jsx(Box, { sx: { px: 1.5, minHeight: 32, display: "flex", alignItems: "center" }, children: /* @__PURE__ */ jsx(
-            FormControlLabel,
-            {
-              control: /* @__PURE__ */ jsx(
-                Checkbox,
-                {
-                  size: "small",
-                  checked: visibleColumns.has(column.columnId),
-                  onChange: handleCheckboxChange(column.columnId),
-                  disabled: column.required === true
-                }
-              ),
-              label: /* @__PURE__ */ jsx(Typography, { variant: "body2", children: column.name }),
-              sx: { m: 0 }
-            }
-          ) }, column.columnId)) }),
-          /* @__PURE__ */ jsxs(
-            Box,
-            {
-              sx: {
-                display: "flex",
-                justifyContent: "flex-end",
-                gap: 1,
-                px: 1.5,
-                py: 1,
-                borderTop: 1,
-                borderColor: "divider",
-                bgcolor: "action.hover"
-              },
-              children: [
-                /* @__PURE__ */ jsx(Button, { size: "small", onClick: handleClearAll, sx: { textTransform: "none" }, children: "Clear All" }),
-                /* @__PURE__ */ jsx(
-                  Button,
-                  {
-                    size: "small",
-                    variant: "contained",
-                    onClick: handleSelectAll,
-                    sx: { textTransform: "none" },
-                    children: "Select All"
-                  }
-                )
-              ]
-            }
-          )
-        ]
+        )
       }
     )
   ] });
 };
-var PaginationControls = React4.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 = (event) => {
-    handlePageSizeChange(Number(event.target.value));
-  };
-  if (!vm) {
-    return null;
+var MUI_NAV_ICONS = {
+  first: /* @__PURE__ */ jsx(FirstPage, { fontSize: "small" }),
+  prev: /* @__PURE__ */ jsx(ChevronLeft, { fontSize: "small" }),
+  next: /* @__PURE__ */ jsx(ChevronRight, { fontSize: "small" }),
+  last: /* @__PURE__ */ jsx(LastPage, { fontSize: "small" })
+};
+var NavButton = ({ variant, onClick, disabled, "aria-label": ariaLabel }) => /* @__PURE__ */ jsx(IconButton, { size: "small", onClick, disabled, "aria-label": ariaLabel, children: MUI_NAV_ICONS[variant] });
+var PageButton = ({ onClick, active, "aria-label": ariaLabel, "aria-current": ariaCurrent, children }) => /* @__PURE__ */ jsx(
+  Button,
+  {
+    variant: active ? "contained" : "outlined",
+    size: "small",
+    onClick,
+    "aria-label": ariaLabel,
+    "aria-current": ariaCurrent,
+    sx: { minWidth: 32, px: 0.5 },
+    children
   }
-  const { pageNumbers, showStartEllipsis, showEndEllipsis, totalPages, startItem, endItem } = vm;
-  return /* @__PURE__ */ jsxs(
-    Box,
-    {
-      className,
-      role: "navigation",
-      "aria-label": "Pagination",
-      sx: {
-        display: "flex",
-        alignItems: "center",
-        justifyContent: "space-between",
-        flexWrap: "wrap",
-        gap: 2,
-        px: 1.5,
-        width: "100%",
-        minWidth: 0,
-        boxSizing: "border-box"
-      },
-      children: [
-        /* @__PURE__ */ jsxs(Typography, { variant: "body2", color: "text.secondary", children: [
-          "Showing ",
-          startItem,
-          " to ",
-          endItem,
-          " of ",
-          totalCount.toLocaleString(),
-          " ",
-          labelPlural
-        ] }),
-        /* @__PURE__ */ jsxs(Box, { sx: { display: "flex", alignItems: "center", gap: 0.5 }, children: [
-          /* @__PURE__ */ jsx(
-            IconButton,
-            {
-              size: "small",
-              onClick: () => onPageChange(1),
-              disabled: currentPage === 1,
-              "aria-label": "First page",
-              children: /* @__PURE__ */ jsx(FirstPage, { fontSize: "small" })
-            }
-          ),
-          /* @__PURE__ */ jsx(
-            IconButton,
-            {
-              size: "small",
-              onClick: () => onPageChange(currentPage - 1),
-              disabled: currentPage === 1,
-              "aria-label": "Previous page",
-              children: /* @__PURE__ */ jsx(ChevronLeft, { fontSize: "small" })
-            }
-          ),
-          showStartEllipsis && /* @__PURE__ */ jsxs(Fragment, { children: [
-            /* @__PURE__ */ jsx(
-              Button,
-              {
-                variant: "outlined",
-                size: "small",
-                onClick: () => onPageChange(1),
-                "aria-label": "Page 1",
-                sx: { minWidth: 32, px: 0.5 },
-                children: "1"
-              }
-            ),
-            /* @__PURE__ */ jsx(Typography, { variant: "body2", color: "text.secondary", sx: { mx: 0.5 }, "aria-hidden": true, children: "\u2026" })
-          ] }),
-          pageNumbers.map((pageNum) => /* @__PURE__ */ jsx(
-            Button,
-            {
-              variant: currentPage === pageNum ? "contained" : "outlined",
-              size: "small",
-              onClick: () => onPageChange(pageNum),
-              "aria-label": `Page ${pageNum}`,
-              "aria-current": currentPage === pageNum ? "page" : void 0,
-              sx: { minWidth: 32, px: 0.5 },
-              children: pageNum
-            },
-            pageNum
-          )),
-          showEndEllipsis && /* @__PURE__ */ jsxs(Fragment, { children: [
-            /* @__PURE__ */ jsx(Typography, { variant: "body2", color: "text.secondary", sx: { mx: 0.5 }, "aria-hidden": true, children: "\u2026" }),
-            /* @__PURE__ */ jsx(
-              Button,
-              {
-                variant: "outlined",
-                size: "small",
-                onClick: () => onPageChange(totalPages),
-                "aria-label": `Page ${totalPages}`,
-                sx: { minWidth: 32, px: 0.5 },
-                children: totalPages
-              }
-            )
-          ] }),
-          /* @__PURE__ */ jsx(
-            IconButton,
-            {
-              size: "small",
-              onClick: () => onPageChange(currentPage + 1),
-              disabled: currentPage >= totalPages,
-              "aria-label": "Next page",
-              children: /* @__PURE__ */ jsx(ChevronRight, { fontSize: "small" })
-            }
-          ),
-          /* @__PURE__ */ jsx(
-            IconButton,
-            {
-              size: "small",
-              onClick: () => onPageChange(totalPages),
-              disabled: currentPage >= totalPages,
-              "aria-label": "Last page",
-              children: /* @__PURE__ */ jsx(LastPage, { fontSize: "small" })
-            }
-          )
-        ] }),
-        /* @__PURE__ */ jsxs(Box, { sx: { display: "flex", alignItems: "center", gap: 1 }, children: [
-          /* @__PURE__ */ jsx(Typography, { variant: "body2", color: "text.secondary", children: "Rows" }),
-          /* @__PURE__ */ jsx(
-            Select,
-            {
-              value: pageSize,
-              onChange: handlePageSizeChangeEvent,
-              size: "small",
-              "aria-label": "Rows per page",
-              sx: { minWidth: 70 },
-              children: vm.pageSizeOptions.map((n) => /* @__PURE__ */ jsx(MenuItem, { value: n, children: n }, n))
-            }
-          )
-        ] })
-      ]
-    }
-  );
-});
+);
+var PageSizeSelect = ({ value, options, onChange, "aria-label": ariaLabel }) => {
+  const handleChange = (event) => onChange(Number(event.target.value));
+  return /* @__PURE__ */ jsx(Select, { value, onChange: handleChange, size: "small", "aria-label": ariaLabel, sx: { minWidth: 70 }, children: options.map((n) => /* @__PURE__ */ jsx(MenuItem, { value: n, children: n }, n)) });
+};
+var OuterContainer = ({ children, className, role, "aria-label": ariaLabel }) => /* @__PURE__ */ jsx(
+  Box,
+  {
+    className,
+    role,
+    "aria-label": ariaLabel,
+    sx: {
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "space-between",
+      flexWrap: "wrap",
+      gap: 2,
+      px: 1.5,
+      width: "100%",
+      minWidth: 0,
+      boxSizing: "border-box"
+    },
+    children
+  }
+);
+var InfoText = ({ children }) => /* @__PURE__ */ jsx(Typography, { variant: "body2", color: "text.secondary", children });
+var NavButtonsContainer = ({ children }) => /* @__PURE__ */ jsx(Box, { sx: { display: "flex", alignItems: "center", gap: 0.5 }, children });
+var PageSizeContainer = ({ children }) => /* @__PURE__ */ jsx(Box, { sx: { display: "flex", alignItems: "center", gap: 1 }, children });
+var PageSizeLabel = () => /* @__PURE__ */ jsx(Typography, { variant: "body2", color: "text.secondary", children: "Rows" });
+var Ellipsis = () => /* @__PURE__ */ jsx(Typography, { variant: "body2", color: "text.secondary", sx: { mx: 0.5 }, "aria-hidden": true, children: "\u2026" });
+var SLOTS = {
+  NavButton,
+  PageButton,
+  PageSizeSelect,
+  OuterContainer,
+  InfoText,
+  NavButtonsContainer,
+  PageSizeContainer,
+  PageSizeLabel,
+  Ellipsis
+};
+var PaginationControls = React4.memo((props) => /* @__PURE__ */ jsx(PaginationControlsBase, { ...props, slots: SLOTS }));
+PaginationControls.displayName = "PaginationControls";
 var MuiThemeContainer = React4.forwardRef(
   function MuiThemeContainer2(props, ref) {
     const theme = useTheme();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@alaarab/ogrid-react-material",
-  "version": "2.3.0",
+  "version": "2.4.0",
   "description": "OGrid React Material implementation – MUI Table–based data grid with sorting, filtering, pagination, column chooser, spreadsheet selection, and CSV export.",
   "main": "dist/esm/index.js",
   "module": "dist/esm/index.js",
@@ -39,7 +39,7 @@
     "node": ">=18"
   },
   "dependencies": {
-    "@alaarab/ogrid-react": "2.3.0"
+    "@alaarab/ogrid-react": "2.4.0"
   },
   "peerDependencies": {
     "@emotion/react": "^11.0.0",