@redsift/table 12.5.7-muiv7 → 12.5.7-muiv8-alpha.2

package/_internal/BaseComponents.js

@@ -1,3 +1,3 @@
-export { B as BaseButton, a as BaseCheckbox, b as BaseIcon, c as BasePopper, m as muiIconToDSIcon } from './BasePopper.js';
+export { B as BaseButton, a as BaseCheckbox, b as BaseIcon, c as BaseIconButton, m as muiIconToDSIcon } from './BaseIconButton.js';
 export { B as BaseTextField } from './BaseTextField.js';
 //# sourceMappingURL=BaseComponents.js.map

package/_internal/BaseIconButton.js

@@ -0,0 +1,126 @@
+import { a as _objectWithoutProperties, b as _extends } from './_rollupPluginBabelHelpers.js';
+import React__default, { forwardRef } from 'react';
+import { ButtonsColorPalette, IconButton, Button, Checkbox, Icon } from '@redsift/design-system';
+import { mdiFilterVariant, mdiViewColumn, mdiArrowUp, mdiArrowDown, mdiViewHeadline, mdiViewSequential, mdiViewStream, mdiChevronDown, mdiChevronRight, mdiTrayArrowDown } from '@redsift/icons';
+
+const _excluded$3 = ["children", "color", "onClick", "startIcon"];
+const BaseButton = /*#__PURE__*/forwardRef((props, ref) => {
+  var _props$className;
+  const {
+      children,
+      color: propsColor,
+      onClick,
+      startIcon
+    } = props,
+    forwardedProps = _objectWithoutProperties(props, _excluded$3);
+  const color = Object.keys(ButtonsColorPalette).includes(propsColor) ? propsColor : 'primary';
+  if ((_props$className = props.className) !== null && _props$className !== void 0 && _props$className.includes('redsift-condensed')) {
+    return /*#__PURE__*/React__default.createElement(IconButton, _extends({}, forwardedProps, {
+      color: color,
+      onClick: onClick,
+      ref: ref,
+      variant: "unstyled",
+      isActive: props['aria-expanded'] === 'true',
+      icon: typeof startIcon !== 'string' ? /*#__PURE__*/React__default.cloneElement(startIcon, {
+        fontSize: 'medium'
+      }) : startIcon,
+      "aria-label": children,
+      size: "medium"
+    }));
+  }
+  return /*#__PURE__*/React__default.createElement(Button, _extends({}, forwardedProps, {
+    color: color,
+    onClick: onClick,
+    ref: ref,
+    variant: "unstyled",
+    isActive: props['aria-expanded'] === 'true',
+    leftIcon: startIcon
+  }), children);
+});
+
+const _excluded$2 = ["checked", "indeterminate", "disabled", "onChange", "label", "slotProps", "material", "field", "isSelected", "inputProps", "touchRippleRef"];
+const BaseCheckbox = /*#__PURE__*/forwardRef((props, ref) => {
+  const {
+      checked,
+      indeterminate,
+      disabled,
+      onChange,
+      label,
+      // MUI DataGrid v8 injects these props — strip them to avoid DOM warnings
+      slotProps,
+      material,
+      field,
+      isSelected,
+      inputProps,
+      touchRippleRef
+    } = props,
+    forwardedProps = _objectWithoutProperties(props, _excluded$2);
+  return /*#__PURE__*/React__default.createElement(Checkbox, _extends({}, forwardedProps, inputProps, {
+    isSelected: checked && !indeterminate,
+    isDisabled: disabled,
+    isIndeterminate: indeterminate,
+    ref: ref,
+    onChange: (isChecked, value, name, event) => onChange(event),
+    "aria-label": label || 'Select row'
+  }), label);
+});
+
+const _excluded$1 = ["displayName"];
+const muiIconToDSIcon = {
+  columnFilteredIcon: mdiFilterVariant,
+  columnSelectorIcon: mdiViewColumn,
+  columnSortedAscendingIcon: mdiArrowUp,
+  columnSortedDescendingIcon: mdiArrowDown,
+  densityCompactIcon: mdiViewHeadline,
+  densityStandardIcon: mdiViewSequential,
+  densityComfortableIcon: mdiViewStream,
+  detailPanelCollapseIcon: mdiChevronDown,
+  detailPanelExpandIcon: mdiChevronRight,
+  exportIcon: mdiTrayArrowDown,
+  openFilterButtonIcon: mdiFilterVariant
+};
+const BaseIcon = /*#__PURE__*/forwardRef((props, ref) => {
+  const {
+      displayName
+    } = props,
+    forwardedProps = _objectWithoutProperties(props, _excluded$1);
+  return /*#__PURE__*/React__default.createElement(Icon, _extends({}, forwardedProps, forwardedProps.inputProps, {
+    ref: ref,
+    size: forwardedProps.fontSize,
+    icon: muiIconToDSIcon[displayName]
+  }));
+});
+
+const _excluded = ["children", "color", "onClick", "field"];
+const BaseIconButton = /*#__PURE__*/forwardRef((props, ref) => {
+  const {
+      children,
+      color: propsColor,
+      onClick,
+      field
+    } = props,
+    forwardedProps = _objectWithoutProperties(props, _excluded);
+  const color = Object.keys(ButtonsColorPalette).includes(propsColor) ? propsColor : 'primary';
+
+  // MUI passes the icon as children (already rendered), but DS IconButton expects an icon prop
+  // We pass children directly as the icon - the Icon component can handle ReactElements
+  return /*#__PURE__*/React__default.createElement(IconButton, _extends({}, forwardedProps, {
+    color: color,
+    onClick: onClick,
+    ref: ref,
+    variant: "unstyled",
+    isActive: props['aria-expanded'] === 'true',
+    icon: children,
+    size: "medium",
+    iconProps: {
+      style: {
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center'
+      }
+    }
+  }));
+});
+
+export { BaseButton as B, BaseCheckbox as a, BaseIcon as b, BaseIconButton as c, muiIconToDSIcon as m };
+//# sourceMappingURL=BaseIconButton.js.map

package/_internal/BaseIconButton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BaseIconButton.js","sources":["../../src/components/BaseComponents/BaseButton.tsx","../../src/components/BaseComponents/BaseCheckbox.tsx","../../src/components/BaseComponents/BaseIcon.tsx","../../src/components/BaseComponents/BaseIconButton.tsx"],"sourcesContent":["import React, { forwardRef } from 'react';\nimport { Button, ButtonsColorPalette, IconButton } from '@redsift/design-system';\n\nexport const BaseButton: React.JSXElementConstructor<any> = forwardRef((props, ref) => {\n  const { children, color: propsColor, onClick, startIcon, ...forwardedProps } = props;\n\n  const color = Object.keys(ButtonsColorPalette).includes(propsColor) ? propsColor : 'primary';\n\n  if (props.className?.includes('redsift-condensed')) {\n    return (\n      <IconButton\n        {...forwardedProps}\n        color={color}\n        onClick={onClick}\n        ref={ref}\n        variant=\"unstyled\"\n        isActive={props['aria-expanded'] === 'true'}\n        icon={typeof startIcon !== 'string' ? React.cloneElement(startIcon, { fontSize: 'medium' }) : startIcon}\n        aria-label={children}\n        size=\"medium\"\n      />\n    );\n  }\n\n  return (\n    <Button\n      {...forwardedProps}\n      color={color}\n      onClick={onClick}\n      ref={ref}\n      variant=\"unstyled\"\n      isActive={props['aria-expanded'] === 'true'}\n      leftIcon={startIcon}\n    >\n      {children}\n    </Button>\n  );\n});\n","/* eslint-disable @typescript-eslint/no-unused-vars */\nimport React, { forwardRef, MutableRefObject } from 'react';\nimport { Checkbox } from '@redsift/design-system';\n\nexport const BaseCheckbox: React.JSXElementConstructor<any> = forwardRef((props, ref) => {\n  const {\n    checked,\n    indeterminate,\n    disabled,\n    onChange,\n    label,\n    // MUI DataGrid v8 injects these props — strip them to avoid DOM warnings\n    slotProps,\n    material,\n    field,\n    isSelected,\n    inputProps,\n    touchRippleRef,\n    ...forwardedProps\n  } = props;\n\n  return (\n    <Checkbox\n      {...forwardedProps}\n      {...inputProps}\n      isSelected={checked && !indeterminate}\n      isDisabled={disabled}\n      isIndeterminate={indeterminate}\n      ref={ref as MutableRefObject<HTMLLabelElement>}\n      onChange={(isChecked, value, name, event) => onChange(event)}\n      aria-label={label || 'Select row'}\n    >\n      {label}\n    </Checkbox>\n  );\n});\n","import React, { forwardRef } from 'react';\nimport { Icon } from '@redsift/design-system';\nimport {\n  mdiArrowDown,\n  mdiArrowUp,\n  mdiChevronDown,\n  mdiChevronRight,\n  mdiFilterVariant,\n  mdiTrayArrowDown,\n  mdiViewColumn,\n  mdiViewHeadline,\n  mdiViewSequential,\n  mdiViewStream,\n} from '@redsift/icons';\nimport { GridSlotsComponent } from '@mui/x-data-grid-premium';\n\nexport const muiIconToDSIcon: Partial<Record<keyof GridSlotsComponent, string>> = {\n  columnFilteredIcon: mdiFilterVariant,\n  columnSelectorIcon: mdiViewColumn,\n  columnSortedAscendingIcon: mdiArrowUp,\n  columnSortedDescendingIcon: mdiArrowDown,\n  densityCompactIcon: mdiViewHeadline,\n  densityStandardIcon: mdiViewSequential,\n  densityComfortableIcon: mdiViewStream,\n  detailPanelCollapseIcon: mdiChevronDown,\n  detailPanelExpandIcon: mdiChevronRight,\n  exportIcon: mdiTrayArrowDown,\n  openFilterButtonIcon: mdiFilterVariant,\n};\n\nexport const BaseIcon: React.JSXElementConstructor<any> = forwardRef((props, ref) => {\n  const { displayName, ...forwardedProps } = props;\n\n  return (\n    <Icon\n      {...forwardedProps}\n      {...forwardedProps.inputProps}\n      ref={ref}\n      size={forwardedProps.fontSize}\n      icon={muiIconToDSIcon[displayName as keyof GridSlotsComponent]}\n    />\n  );\n});\n","/* eslint-disable @typescript-eslint/no-unused-vars */\nimport React, { forwardRef } from 'react';\nimport { IconButton, ButtonsColorPalette } from '@redsift/design-system';\n\nexport const BaseIconButton: React.JSXElementConstructor<any> = forwardRef((props, ref) => {\n  const { children, color: propsColor, onClick, field, ...forwardedProps } = props;\n\n  const color = Object.keys(ButtonsColorPalette).includes(propsColor) ? propsColor : 'primary';\n\n  // MUI passes the icon as children (already rendered), but DS IconButton expects an icon prop\n  // We pass children directly as the icon - the Icon component can handle ReactElements\n  return (\n    <IconButton\n      {...forwardedProps}\n      color={color}\n      onClick={onClick}\n      ref={ref}\n      variant=\"unstyled\"\n      isActive={props['aria-expanded'] === 'true'}\n      icon={children}\n      size=\"medium\"\n      iconProps={{ style: { display: 'flex', alignItems: 'center', justifyContent: 'center' } }}\n    />\n  );\n});\n"],"names":["BaseButton","forwardRef","props","ref","_props$className","children","color","propsColor","onClick","startIcon","forwardedProps","_objectWithoutProperties","_excluded","Object","keys","ButtonsColorPalette","includes","className","React","createElement","IconButton","_extends","variant","isActive","icon","cloneElement","fontSize","size","Button","leftIcon","BaseCheckbox","checked","indeterminate","disabled","onChange","label","slotProps","material","field","isSelected","inputProps","touchRippleRef","Checkbox","isDisabled","isIndeterminate","isChecked","value","name","event","muiIconToDSIcon","columnFilteredIcon","mdiFilterVariant","columnSelectorIcon","mdiViewColumn","columnSortedAscendingIcon","mdiArrowUp","columnSortedDescendingIcon","mdiArrowDown","densityCompactIcon","mdiViewHeadline","densityStandardIcon","mdiViewSequential","densityComfortableIcon","mdiViewStream","detailPanelCollapseIcon","mdiChevronDown","detailPanelExpandIcon","mdiChevronRight","exportIcon","mdiTrayArrowDown","openFilterButtonIcon","BaseIcon","displayName","Icon","BaseIconButton","iconProps","style","display","alignItems","justifyContent"],"mappings":"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"}

package/_internal/DataGrid2.js

@@ -1,14 +1,15 @@
 import { a as _objectWithoutProperties, b as _extends, _ as _objectSpread2 } from './_rollupPluginBabelHelpers.js';
 import React__default, { forwardRef, useRef, useState, useEffect, useMemo } from 'react';
+import { createTheme, ThemeProvider as ThemeProvider$1 } from '@mui/material/styles';
 import classNames from 'classnames';
+import { LicenseInfo } from '@mui/x-license';
 import { useTheme, RedsiftColorBlueN, RedsiftColorNeutralXDarkGrey, RedsiftColorNeutralWhite, ThemeProvider } from '@redsift/design-system';
-import { useGridApiRef, gridFilteredSortedRowEntriesSelector, gridFilteredSortedRowIdsSelector, DataGridPro } from '@mui/x-data-grid-pro';
-import { L as LicenseInfo, u as useControlledDatagridState, T as ThemeProvider$1, S as StyledDataGrid, B as BelowToolbar, a as BottomPagination, b as baseGridSlots } from './useControlledDatagridState.js';
+import { useGridApiRef, gridFilteredSortedRowEntriesSelector, gridFilteredSortedRowIdsSelector, DataGridPremium } from '@mui/x-data-grid-premium';
+import { u as useControlledDatagridState, S as StyledDataGrid, B as BottomPagination, b as baseGridSlots, a as BelowToolbar } from './useControlledDatagridState.js';
+import { n as normalizeRowSelectionModel, o as onServerSideSelectionStatusChange, g as getSelectionCount, i as isRowSelected, S as ServerSideControlledPagination, C as ControlledPagination, f as fixServerSideHeaderCheckboxSelection } from './ServerSideControlledPagination.js';
 import { T as Toolbar } from './Toolbar2.js';
-import { o as onServerSideSelectionStatusChange, f as fixServerSideHeaderCheckboxSelection } from './ServerSideControlledPagination.js';
-import { b as createTheme } from './Portal.js';
 
-const _excluded = ["apiRef", "autoHeight", "className", "slots", "slotProps", "filterModel", "columnVisibilityModel", "pinnedColumns", "sortModel", "paginationModel", "height", "hideToolbar", "initialState", "isRowSelectable", "license", "onFilterModelChange", "rowSelectionModel", "onPaginationModelChange", "onRowSelectionModelChange", "onColumnVisibilityModelChange", "onPinnedColumnsChange", "onSortModelChange", "pagination", "paginationPlacement", "selectionBannerPlacement", "paginationProps", "rows", "pageSizeOptions", "sx", "theme", "paginationMode", "rowCount"];
+const _excluded = ["apiRef", "autoHeight", "className", "slots", "slotProps", "filterModel", "columnVisibilityModel", "pinnedColumns", "sortModel", "paginationModel", "height", "hideToolbar", "initialState", "isRowSelectable", "license", "onFilterModelChange", "rowSelectionModel", "onPaginationModelChange", "onRowSelectionModelChange", "onColumnVisibilityModelChange", "onPinnedColumnsChange", "onSortModelChange", "pagination", "paginationPlacement", "selectionBannerPlacement", "paginationProps", "rows", "pageSizeOptions", "sx", "theme", "paginationMode", "rowCount", "density"];
 const COMPONENT_NAME = 'DataGrid';
 const CLASSNAME = 'redsift-datagrid';
 
@@ -85,6 +86,7 @@ const CLASSNAME = 'redsift-datagrid';
  */
 
 const DataGrid = /*#__PURE__*/forwardRef((props, ref) => {
+  var _ref6, _ref7;
   const datagridRef = ref || useRef();
   const {
       apiRef: propsApiRef,
@@ -114,17 +116,17 @@ const DataGrid = /*#__PURE__*/forwardRef((props, ref) => {
       selectionBannerPlacement = 'top',
       paginationProps,
       rows,
-      pageSizeOptions,
+      pageSizeOptions = [5, 10, 25, 50],
       sx,
       theme: propsTheme,
       paginationMode = 'client',
-      rowCount
+      rowCount,
+      density
     } = props,
     forwardedProps = _objectWithoutProperties(props, _excluded);
   const theme = useTheme(propsTheme);
   const _apiRef = useGridApiRef();
   const apiRef = propsApiRef !== null && propsApiRef !== void 0 ? propsApiRef : _apiRef;
-  const RenderedToolbar = slots !== null && slots !== void 0 && slots.toolbar ? slots.toolbar : Toolbar;
   LicenseInfo.setLicenseKey(license);
   const height = propsHeight !== null && propsHeight !== void 0 ? propsHeight : autoHeight ? undefined : '500px';
   const {
@@ -152,9 +154,9 @@ const DataGrid = /*#__PURE__*/forwardRef((props, ref) => {
     propsSortModel,
     propsOnPaginationModelChange
   });
-  const [rowSelectionModel, setRowSelectionModel] = useState(propsRowSelectionModel !== null && propsRowSelectionModel !== void 0 ? propsRowSelectionModel : []);
+  const [rowSelectionModel, setRowSelectionModel] = useState(() => normalizeRowSelectionModel(propsRowSelectionModel));
   useEffect(() => {
-    setRowSelectionModel(propsRowSelectionModel !== null && propsRowSelectionModel !== void 0 ? propsRowSelectionModel : []);
+    setRowSelectionModel(normalizeRowSelectionModel(propsRowSelectionModel));
   }, [propsRowSelectionModel]);
   const onRowSelectionModelChange = (selectionModel, details) => {
     setRowSelectionModel(selectionModel);
@@ -173,22 +175,33 @@ const DataGrid = /*#__PURE__*/forwardRef((props, ref) => {
   // Version counter to force re-renders when selectionStatus ref changes
   const [, forceSelectionUpdate] = useState(0);
 
+  // Track when the grid API is ready to ensure top pagination renders correctly
+  const [gridReady, setGridReady] = useState(false);
+
   // The checkboxSelectionVisibleOnly should only be applied to client-side pagination,
   // for server-side pagination it produces inconsistent behavior when selecting all rows in pages 2 and beyond
   const checkboxSelectionVisibleOnly = Boolean(pagination) && Boolean(paginationMode != 'server');
 
   // Banner and pager placements are independent. `belowToolbar` (for either) renders
-  // in the toolbar-slot row, and only applies when pagination is on.
+  // in a row inside the toolbar slot, and only applies when pagination is on.
   const bannerAtTop = selectionBannerPlacement === 'top';
   const bannerAtBottom = selectionBannerPlacement === 'bottom';
   const bannerBelowToolbar = selectionBannerPlacement === 'belowToolbar' && Boolean(pagination);
   const pagerBelowToolbar = paginationPlacement === 'belowToolbar' && Boolean(pagination);
+  const belowToolbarActive = bannerBelowToolbar || pagerBelowToolbar;
+
+  // Force re-render when the grid API becomes ready (for top pagination)
+  useEffect(() => {
+    if (apiRef.current && !gridReady) {
+      setGridReady(true);
+    }
+  });
 
   // in server-side pagination we want to update the selection status
   // every time we navigate between pages, resize our page or select something
   useEffect(() => {
     if (paginationMode == 'server') {
-      onServerSideSelectionStatusChange(Array.isArray(rowSelectionModel) ? rowSelectionModel : [rowSelectionModel], apiRef, selectionStatusRef, forceSelectionUpdate, isRowSelectable, paginationModel.page, paginationModel.pageSize);
+      onServerSideSelectionStatusChange(rowSelectionModel, apiRef, selectionStatusRef, forceSelectionUpdate, isRowSelectable, paginationModel.page, paginationModel.pageSize);
     }
   }, [rowSelectionModel, paginationModel.page, paginationModel.pageSize, rows]);
   if (!Array.isArray(rows)) {
@@ -200,15 +213,15 @@ const DataGrid = /*#__PURE__*/forwardRef((props, ref) => {
   // receive the fresh value in the same render cycle — no extra re-render needed.
   // The ref is kept in sync for the onRowSelectionModelChange callback's deselect logic.
   let selectionStatus = selectionStatusRef.current;
-  if (pagination && paginationMode !== 'server' && Array.isArray(rowSelectionModel) && rowSelectionModel.length > 0) {
+  if (pagination && paginationMode !== 'server' && getSelectionCount(rowSelectionModel) > 0) {
     try {
-      // Use manual page slicing with our React state's paginationModel instead of
-      // gridPaginatedVisibleSortedGridRow*Selector(apiRef). In MUI v7, the apiRef's
-      // internal pagination state can lag behind the React state after a page change,
-      // causing the selection status to be one page behind.
+      // Use manual page slicing instead of gridPaginatedVisibleSorted* selectors.
+      // MUI's paginated selectors use apiRef internal state which may be stale when
+      // paginationModel prop changes — our React state is always up to date.
+      const allFilteredEntries = gridFilteredSortedRowEntriesSelector(apiRef);
       const pageStart = paginationModel.page * paginationModel.pageSize;
-      const pageEnd = pageStart + paginationModel.pageSize;
-      const selectableRowsInPage = isRowSelectable ? gridFilteredSortedRowEntriesSelector(apiRef).slice(pageStart, pageEnd).filter(_ref => {
+      const pageEntries = allFilteredEntries.slice(pageStart, pageStart + paginationModel.pageSize);
+      const selectableRowsInPage = isRowSelectable ? pageEntries.filter(_ref => {
         let {
           model
         } = _ref;
@@ -220,24 +233,29 @@ const DataGrid = /*#__PURE__*/forwardRef((props, ref) => {
           id
         } = _ref2;
         return id;
-      }) : gridFilteredSortedRowIdsSelector(apiRef).slice(pageStart, pageEnd);
+      }) : pageEntries.map(_ref3 => {
+        let {
+          id
+        } = _ref3;
+        return id;
+      });
       const numberOfSelectableRowsInPage = selectableRowsInPage.length;
-      const selectableRowsInTable = isRowSelectable ? gridFilteredSortedRowEntriesSelector(apiRef).filter(_ref3 => {
+      const selectableRowsInTable = isRowSelectable ? allFilteredEntries.filter(_ref4 => {
         let {
           model
-        } = _ref3;
+        } = _ref4;
         return isRowSelectable({
           row: model
         });
-      }).map(_ref4 => {
+      }).map(_ref5 => {
         let {
           id
-        } = _ref4;
+        } = _ref5;
         return id;
       }) : gridFilteredSortedRowIdsSelector(apiRef);
       const numberOfSelectableRowsInTable = selectableRowsInTable.length;
-      const numberOfSelectedRows = rowSelectionModel.length;
-      const selectedOnCurrentPage = selectableRowsInPage.filter(id => rowSelectionModel.includes(id));
+      const numberOfSelectedRows = getSelectionCount(rowSelectionModel);
+      const selectedOnCurrentPage = selectableRowsInPage.filter(id => isRowSelected(rowSelectionModel, id));
       if (numberOfSelectedRows === numberOfSelectableRowsInTable && numberOfSelectableRowsInPage < numberOfSelectableRowsInTable) {
         selectionStatus = {
           type: 'table',
@@ -282,33 +300,32 @@ const DataGrid = /*#__PURE__*/forwardRef((props, ref) => {
     }
   }), [theme]);
 
-  // Per-render data for the stable `BelowToolbar` slot (which wraps the resolved toolbar and,
-  // depending on placement, the banner/pager), injected via `slotProps.toolbar` so the slot
-  // identity stays constant and the toolbar is re-rendered, not remounted. Typed as
-  // ToolbarWrapper props so mistakes are caught here; cast to MUI's slot type only at the
-  // injection site below.
-  const toolbarSlotProps = {
+  // Per-render data for the belowToolbar layout, handed to the stable `BelowToolbar` slot
+  // via `slotProps.toolbar` (see BelowToolbar) so the slot identity stays constant and the
+  // toolbar is re-rendered, not remounted. Typed as ToolbarWrapper props so mistakes are
+  // caught here; cast to MUI's slot type only at the injection site below.
+  const belowToolbarSlotProps = {
+    RenderedToolbar: (_ref6 = slots === null || slots === void 0 ? void 0 : slots.toolbar) !== null && _ref6 !== void 0 ? _ref6 : Toolbar,
     hideToolbar,
-    RenderedToolbar,
     filterModel,
     onFilterModelChange,
     pagination,
-    displaySelection: bannerAtTop || bannerBelowToolbar,
-    displayPagination: ['top', 'both'].includes(paginationPlacement) || pagerBelowToolbar,
+    paginationMode,
+    displaySelection: bannerBelowToolbar,
+    displayPagination: pagerBelowToolbar,
     displayRowsPerPage: pagerBelowToolbar,
     selectionStatus,
     apiRef,
     isRowSelectable,
     paginationModel,
     onPaginationModelChange,
-    pageSizeOptions,
+    pageSizeOptions: pageSizeOptions,
     paginationProps,
-    paginationMode,
     rowCount
   };
 
-  // Per-render data for the stable bottom `BottomPagination` slot, handed over via
-  // `slotProps.pagination` for the same reason as the toolbar above.
+  // Per-render data for the bottom pagination slot, handed to the stable `BottomPagination`
+  // slot via `slotProps.pagination` for the same reason as the toolbar above.
   const bottomPaginationSlotProps = {
     pagination,
     paginationMode,
@@ -320,7 +337,7 @@ const DataGrid = /*#__PURE__*/forwardRef((props, ref) => {
     onPaginationModelChange,
     apiRef,
     isRowSelectable,
-    pageSizeOptions,
+    pageSizeOptions: pageSizeOptions,
     paginationProps,
     rowCount
   };
@@ -334,34 +351,51 @@ const DataGrid = /*#__PURE__*/forwardRef((props, ref) => {
     ref: datagridRef,
     className: classNames(DataGrid.className, className),
     $height: height
-  }, /*#__PURE__*/React__default.createElement(DataGridPro, _extends({}, forwardedProps, {
+  }, pagination && gridReady && (bannerAtTop || ['top', 'both'].includes(paginationPlacement)) ? paginationMode == 'server' ? /*#__PURE__*/React__default.createElement(ServerSideControlledPagination, {
+    displaySelection: bannerAtTop,
+    displayRowsPerPage: ['top', 'both'].includes(paginationPlacement),
+    displayPagination: ['top', 'both'].includes(paginationPlacement),
+    selectionStatus: selectionStatus,
+    paginationModel: paginationModel,
+    onPaginationModelChange: onPaginationModelChange,
+    pageSizeOptions: pageSizeOptions,
+    paginationProps: paginationProps,
+    rowCount: rowCount
+  }) : /*#__PURE__*/React__default.createElement(ControlledPagination, {
+    displaySelection: bannerAtTop,
+    displayRowsPerPage: ['top', 'both'].includes(paginationPlacement),
+    displayPagination: ['top', 'both'].includes(paginationPlacement),
+    selectionStatus: selectionStatus,
+    apiRef: apiRef,
+    isRowSelectable: isRowSelectable,
+    paginationModel: paginationModel,
+    onPaginationModelChange: onPaginationModelChange,
+    pageSizeOptions: pageSizeOptions,
+    paginationProps: paginationProps
+  }) : null, /*#__PURE__*/React__default.createElement(DataGridPremium, _extends({}, forwardedProps, {
     rowCount: rowCount,
     apiRef: apiRef,
     autoHeight: autoHeight,
     checkboxSelectionVisibleOnly: checkboxSelectionVisibleOnly,
-    slots: _objectSpread2(_objectSpread2(_objectSpread2({}, baseGridSlots), slots), {}, {
-      // `BelowToolbar` and `BottomPagination` are stable module-level components; their
-      // per-render data is injected via `slotProps` below. A fresh inline function here
-      // would remount the slot's subtree every render — for the toolbar that dropped
-      // quick-search focus on every keystroke. The consumer's `slots.toolbar` (or the
-      // default DS Toolbar) is preserved via `RenderedToolbar` inside ToolbarWrapper.
-      toolbar: BelowToolbar,
+    disableRowSelectionExcludeModel: true,
+    showToolbar: !hideToolbar || belowToolbarActive,
+    slots: _objectSpread2(_objectSpread2(_objectSpread2(_objectSpread2({}, baseGridSlots), slots), belowToolbarActive ? {
+      toolbar: BelowToolbar
+    } : {}), {}, {
       pagination: BottomPagination
     }),
-    slotProps: _objectSpread2(_objectSpread2({}, slotProps), {}, {
-      // Inject the per-render slot data (built above) here rather than closing over it
-      // in inline slots, so the `toolbar`/`pagination` slot identities stay stable.
-      // Consumer slot props are spread first; the DS layout data wins (and, for the
-      // toolbar, is forwarded on to `RenderedToolbar` by ToolbarWrapper). Cast at the
-      // MUI boundary because these are ToolbarWrapper props, not the MUI slot prop types.
-      toolbar: _objectSpread2(_objectSpread2({}, slotProps === null || slotProps === void 0 ? void 0 : slotProps.toolbar), toolbarSlotProps),
+    slotProps: _objectSpread2(_objectSpread2(_objectSpread2({}, slotProps), belowToolbarActive ? {
+      toolbar: _objectSpread2(_objectSpread2({}, slotProps === null || slotProps === void 0 ? void 0 : slotProps.toolbar), belowToolbarSlotProps)
+    } : {}), {}, {
       pagination: _objectSpread2(_objectSpread2({}, slotProps === null || slotProps === void 0 ? void 0 : slotProps.pagination), bottomPaginationSlotProps)
     }),
     filterModel: filterModel,
     columnVisibilityModel: columnVisibilityModel,
     pinnedColumns: pinnedColumns,
     sortModel: sortModel,
-    initialState: initialState,
+    initialState: _objectSpread2(_objectSpread2({}, initialState), {}, {
+      density: (_ref7 = density !== null && density !== void 0 ? density : initialState === null || initialState === void 0 ? void 0 : initialState.density) !== null && _ref7 !== void 0 ? _ref7 : 'standard'
+    }),
     isRowSelectable: isRowSelectable,
     onFilterModelChange: onFilterModelChange,
     onColumnVisibilityModelChange: onColumnVisibilityModelChange,
@@ -381,43 +415,52 @@ const DataGrid = /*#__PURE__*/forwardRef((props, ref) => {
       // Fix server-side header checkbox: when MUI deselects all due to indeterminate
       // state (cross-page selections exist, 0 on current page), convert to "select page".
       if (pagination && paginationMode === 'server') {
-        effectiveSelectionModel = fixServerSideHeaderCheckboxSelection(newSelectionModel, Array.isArray(rowSelectionModel) ? rowSelectionModel : [rowSelectionModel], selectionStatusRef, apiRef, isRowSelectable);
+        effectiveSelectionModel = fixServerSideHeaderCheckboxSelection(newSelectionModel, rowSelectionModel, selectionStatusRef, apiRef, isRowSelectable);
       }
       if (pagination && paginationMode != 'server') {
-        const cbPageStart = paginationModel.page * paginationModel.pageSize;
-        const cbPageEnd = cbPageStart + paginationModel.pageSize;
-        const selectableRowsInPage = isRowSelectable ? gridFilteredSortedRowEntriesSelector(apiRef).slice(cbPageStart, cbPageEnd).filter(_ref5 => {
+        // Use manual page slicing instead of gridPaginatedVisibleSorted* selectors
+        // to avoid stale apiRef pagination state.
+        const allFilteredEntries = gridFilteredSortedRowEntriesSelector(apiRef);
+        const pageStart = paginationModel.page * paginationModel.pageSize;
+        const pageEntries = allFilteredEntries.slice(pageStart, pageStart + paginationModel.pageSize);
+        const selectableRowsInPage = isRowSelectable ? pageEntries.filter(_ref8 => {
           let {
             model
-          } = _ref5;
+          } = _ref8;
           return isRowSelectable({
             row: model
           });
-        }).map(_ref6 => {
+        }).map(_ref9 => {
+          let {
+            id
+          } = _ref9;
+          return id;
+        }) : pageEntries.map(_ref10 => {
           let {
             id
-          } = _ref6;
+          } = _ref10;
           return id;
-        }) : gridFilteredSortedRowIdsSelector(apiRef).slice(cbPageStart, cbPageEnd);
+        });
         const numberOfSelectableRowsInPage = selectableRowsInPage.length;
-        const selectableRowsInTable = isRowSelectable ? gridFilteredSortedRowEntriesSelector(apiRef).filter(_ref7 => {
+        const selectableRowsInTable = isRowSelectable ? allFilteredEntries.filter(_ref11 => {
           let {
             model
-          } = _ref7;
+          } = _ref11;
           return isRowSelectable({
             row: model
           });
-        }).map(_ref8 => {
+        }).map(_ref12 => {
           let {
             id
-          } = _ref8;
+          } = _ref12;
           return id;
         }) : gridFilteredSortedRowIdsSelector(apiRef);
         const numberOfSelectableRowsInTable = selectableRowsInTable.length;
-        const numberOfSelectedRows = newSelectionModel.length;
+        const numberOfSelectedRows = getSelectionCount(newSelectionModel);
         if (selectionStatusRef.current.type === 'table' && numberOfSelectedRows === numberOfSelectableRowsInTable - numberOfSelectableRowsInPage || selectionStatusRef.current.type === 'table' && numberOfSelectedRows === numberOfSelectableRowsInTable || selectionStatusRef.current.type === 'page' && numberOfSelectedRows === numberOfSelectableRowsInPage) {
           setTimeout(() => {
-            apiRef.current.selectRows([], true, true);
+            var _apiRef$current;
+            (_apiRef$current = apiRef.current) === null || _apiRef$current === void 0 ? void 0 : _apiRef$current.selectRows([], true, true);
           }, 0);
         }
         if (numberOfSelectedRows === numberOfSelectableRowsInPage && numberOfSelectableRowsInPage < numberOfSelectableRowsInTable) {