@redsift/table 12.3.0-muiv7 → 12.3.0

package/_internal/StatefulDataGrid2.js

@@ -1,17 +1,14 @@
 import { _ as _objectSpread2, a as _objectWithoutProperties, b as _extends } from './_rollupPluginBabelHelpers.js';
 import * as React from 'react';
-import React__default, { useCallback, useEffect, useMemo, forwardRef, useRef, useState } from 'react';
+import React__default, { useCallback, useEffect, useRef, useMemo, forwardRef, useState } from 'react';
 import classNames from 'classnames';
 import { Icon, useTheme as useTheme$1, RedsiftColorBlueN, RedsiftColorNeutralXDarkGrey, RedsiftColorNeutralWhite, ThemeProvider } from '@redsift/design-system';
-import { getGridNumericOperators as getGridNumericOperators$1, GridFilterInputValue, GridFilterInputSingleSelect, GridFilterInputMultipleValue, GridFilterInputMultipleSingleSelect, getGridStringOperators as getGridStringOperators$1, getGridBooleanOperators, getGridDateOperators, getGridSingleSelectOperators, GridLogicOperator, useGridApiRef, DataGridPro, gridPaginatedVisibleSortedGridRowEntriesSelector, gridPaginatedVisibleSortedGridRowIdsSelector, gridFilteredSortedRowEntriesSelector, gridFilteredSortedRowIdsSelector } from '@mui/x-data-grid-pro';
+import { getGridNumericOperators as getGridNumericOperators$1, GridFilterInputValue, GridFilterInputSingleSelect, GridFilterInputMultipleValue, GridFilterInputMultipleSingleSelect, getGridStringOperators as getGridStringOperators$1, getGridBooleanOperators, getGridDateOperators, getGridSingleSelectOperators, GridLogicOperator, useGridApiRef, DataGridPremium, gridPaginatedVisibleSortedGridRowEntriesSelector, gridPaginatedVisibleSortedGridRowIdsSelector, gridFilteredSortedRowEntriesSelector, gridFilteredSortedRowIdsSelector } from '@mui/x-data-grid-premium';
 import { L as LicenseInfo, u as useControlledDatagridState, T as ThemeProvider$1, S as StyledDataGrid } from './useControlledDatagridState.js';
 import { mdiSync } from '@redsift/icons';
-import { d as defaultSxConfig, i as isPlainObject, s as styled, a as styleFunctionSx, c as clsx, g as generateUtilityClasses, b as createTheme, T as THEME_ID, C as ClassNameGenerator, P as PropTypes, e as generateUtilityClass, f as styled$1, u as useDefaultProps, h as composeClasses, r as rootShouldForwardProp, j as refType } from './Portal.js';
+import { d as defaultSxConfig, b as isPlainObject, s as styled, e as styleFunctionSx, u as useTheme, f as clsx, h as generateUtilityClasses, j as createTheme, T as THEME_ID, k as ClassNameGenerator, P as PropTypes, l as generateUtilityClass, m as styled$1, p as memoTheme, q as createSimplePaletteValueFilter, r as useDefaultProps, t as useFormControl, v as formControlState, w as capitalize, x as composeClasses, y as rootShouldForwardProp, z as isAdornedStart, A as isFilled, F as FormControlContext, B as useId, D as useSlot, G as Select, H as refType, I as Input, J as FilledInput, O as OutlinedInput, n as normalizeRowSelectionModel, o as onServerSideSelectionStatusChange, S as ServerSideControlledPagination, C as ControlledPagination, g as getSelectionCount } from './ServerSideControlledPagination.js';
 import { j as jsxRuntimeExports } from './jsx-runtime.js';
-import { u as useTheme, m as memoTheme, c as createSimplePaletteValueFilter, a as useFormControl, f as formControlState, b as capitalize, i as isAdornedStart, d as isFilled, F as FormControlContext, e as useId, g as useSlot, h as Select, I as Input, j as FilledInput, O as OutlinedInput, o as onServerSideSelectionStatusChange, S as ServerSideControlledPagination, C as ControlledPagination } from './ControlledPagination.js';
-import { T as Toolbar } from './Toolbar2.js';
-import { B as BaseButton, a as BaseCheckbox, c as BasePopper, b as BaseIcon } from './BasePopper.js';
-import { T as ToolbarWrapper } from './ToolbarWrapper2.js';
+import { B as BaseButton, a as BaseCheckbox, c as BaseIconButton, b as BaseIcon } from './BaseIconButton.js';
 
 const splitProps = props => {
   const result = {
@@ -93,7 +90,7 @@ function createBox(options = {}) {
 
 function isMuiElement(element, muiNames) {
   return /*#__PURE__*/React.isValidElement(element) && muiNames.indexOf(
-  // For server components `muiName` is avaialble in element.type._payload.value.muiName
+  // For server components `muiName` is available in element.type._payload.value.muiName
   // relevant info - https://github.com/facebook/react/blob/2807d781a08db8e9873687fccc25c0f12b4fb3d4/packages/react/src/ReactLazy.js#L45
   // eslint-disable-next-line no-underscore-dangle
   element.type.muiName ?? element.type?._payload?.value?.muiName) !== -1;
@@ -192,8 +189,7 @@ const FormLabelRoot = styled$1('label', {
 })));
 const AsteriskComponent = styled$1('span', {
   name: 'MuiFormLabel',
-  slot: 'Asterisk',
-  overridesResolver: (props, styles) => styles.asterisk
+  slot: 'Asterisk'
 })(memoTheme(({
   theme
 }) => ({
@@ -320,7 +316,7 @@ const useUtilityClasses$3 = ownerState => {
     required
   } = ownerState;
   const slots = {
-    root: ['root', formControl && 'formControl', !disableAnimation && 'animated', shrink && 'shrink', size && size !== 'normal' && `size${capitalize(size)}`, variant],
+    root: ['root', formControl && 'formControl', !disableAnimation && 'animated', shrink && 'shrink', size && size !== 'medium' && `size${capitalize(size)}`, variant],
     asterisk: [required && 'asterisk']
   };
   const composedClasses = composeClasses(slots, getInputLabelUtilityClasses, classes);
@@ -563,9 +559,9 @@ process.env.NODE_ENV !== "production" ? InputLabel.propTypes /* remove-proptypes
   shrink: PropTypes.bool,
   /**
    * The size of the component.
-   * @default 'normal'
+   * @default 'medium'
    */
-  size: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([PropTypes.oneOf(['normal', 'small']), PropTypes.string]),
+  size: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([PropTypes.oneOf(['medium', 'small']), PropTypes.string]),
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */
@@ -1074,8 +1070,7 @@ const useUtilityClasses = ownerState => {
 };
 const TextFieldRoot = styled$1(FormControl$1, {
   name: 'MuiTextField',
-  slot: 'Root',
-  overridesResolver: (props, styles) => styles.root
+  slot: 'Root'
 })({});
 
 /**
@@ -1343,7 +1338,7 @@ process.env.NODE_ENV !== "production" ? TextField.propTypes /* remove-proptypes
   error: PropTypes.bool,
   /**
    * Props applied to the [`FormHelperText`](https://mui.com/material-ui/api/form-helper-text/) element.
-   * @deprecated Use `slotProps.formHelperText` instead. This prop will be removed in v7. See [Migrating from deprecated APIs](https://mui.com/material-ui/migration/migrating-from-deprecated-apis/) for more details.
+   * @deprecated Use `slotProps.formHelperText` instead. This prop will be removed in a future major release. See [Migrating from deprecated APIs](https://mui.com/material-ui/migration/migrating-from-deprecated-apis/) for more details.
    */
   FormHelperTextProps: PropTypes.object,
   /**
@@ -1363,12 +1358,12 @@ process.env.NODE_ENV !== "production" ? TextField.propTypes /* remove-proptypes
   /**
    * Props applied to the [`InputLabel`](https://mui.com/material-ui/api/input-label/) element.
    * Pointer events like `onClick` are enabled if and only if `shrink` is `true`.
-   * @deprecated Use `slotProps.inputLabel` instead. This prop will be removed in v7. See [Migrating from deprecated APIs](https://mui.com/material-ui/migration/migrating-from-deprecated-apis/) for more details.
+   * @deprecated Use `slotProps.inputLabel` instead. This prop will be removed in a future major release. See [Migrating from deprecated APIs](https://mui.com/material-ui/migration/migrating-from-deprecated-apis/) for more details.
    */
   InputLabelProps: PropTypes.object,
   /**
-   * [Attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#Attributes) applied to the `input` element.
-   * @deprecated Use `slotProps.htmlInput` instead. This prop will be removed in v7. See [Migrating from deprecated APIs](https://mui.com/material-ui/migration/migrating-from-deprecated-apis/) for more details.
+   * [Attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input#attributes) applied to the `input` element.
+   * @deprecated Use `slotProps.htmlInput` instead. This prop will be removed in a future major release. See [Migrating from deprecated APIs](https://mui.com/material-ui/migration/migrating-from-deprecated-apis/) for more details.
    */
   inputProps: PropTypes.object,
   /**
@@ -1376,7 +1371,7 @@ process.env.NODE_ENV !== "production" ? TextField.propTypes /* remove-proptypes
    * It will be a [`FilledInput`](https://mui.com/material-ui/api/filled-input/),
    * [`OutlinedInput`](https://mui.com/material-ui/api/outlined-input/) or [`Input`](https://mui.com/material-ui/api/input/)
    * component depending on the `variant` prop value.
-   * @deprecated Use `slotProps.input` instead. This prop will be removed in v7. See [Migrating from deprecated APIs](https://mui.com/material-ui/migration/migrating-from-deprecated-apis/) for more details.
+   * @deprecated Use `slotProps.input` instead. This prop will be removed in a future major release. See [Migrating from deprecated APIs](https://mui.com/material-ui/migration/migrating-from-deprecated-apis/) for more details.
    */
   InputProps: PropTypes.object,
   /**
@@ -1445,7 +1440,7 @@ process.env.NODE_ENV !== "production" ? TextField.propTypes /* remove-proptypes
   select: PropTypes.bool,
   /**
    * Props applied to the [`Select`](https://mui.com/material-ui/api/select/) element.
-   * @deprecated Use `slotProps.select` instead. This prop will be removed in v7. See [Migrating from deprecated APIs](https://mui.com/material-ui/migration/migrating-from-deprecated-apis/) for more details.
+   * @deprecated Use `slotProps.select` instead. This prop will be removed in a future major release. See [Migrating from deprecated APIs](https://mui.com/material-ui/migration/migrating-from-deprecated-apis/) for more details.
    */
   SelectProps: PropTypes.object,
   /**
@@ -1481,9 +1476,9 @@ process.env.NODE_ENV !== "production" ? TextField.propTypes /* remove-proptypes
    */
   sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object]),
   /**
-   * Type of the `input` element. It should be [a valid HTML5 input type](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#Form_%3Cinput%3E_types).
+   * Type of the `input` element. It should be [a valid HTML5 input type](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input#input_types).
    */
-  type: PropTypes /* @typescript-to-proptypes-ignore */.string,
+  type: PropTypes.string,
   /**
    * The value of the `input` element, required for a controlled component.
    */
@@ -2831,6 +2826,23 @@ const useTableStates = (id, version) => {
   };
 };
 
+/**
+ * Deep-equal comparison for plain objects / arrays.
+ * Used to stabilise parsed model references so that MUI v8 does not
+ * reset pagination on every render.
+ */
+function isDeepEqual(a, b) {
+  if (a === b) return true;
+  if (a == null || b == null) return false;
+  if (typeof a !== typeof b) return false;
+  if (typeof a !== 'object') return false;
+  const aObj = a;
+  const bObj = b;
+  const aKeys = Object.keys(aObj);
+  const bKeys = Object.keys(bObj);
+  if (aKeys.length !== bKeys.length) return false;
+  return aKeys.every(key => isDeepEqual(aObj[key], bObj[key]));
+}
 const useStatefulTable = props => {
   const {
     // density = 'standard',
@@ -2899,6 +2911,29 @@ const useStatefulTable = props => {
     localStoragePinnedColumns: pinnedColumns,
     setLocalStoragePinnedColumns: setPinnedColumns
   });
+
+  // Stabilise parsed model references to prevent MUI v8 from resetting
+  // pagination on every render due to new object identity.
+  const filterParsedRef = useRef(filterParsed);
+  if (!isDeepEqual(filterParsedRef.current, filterParsed)) {
+    filterParsedRef.current = filterParsed;
+  }
+  const sortModelParsedRef = useRef(sortModelParsed);
+  if (!isDeepEqual(sortModelParsedRef.current, sortModelParsed)) {
+    sortModelParsedRef.current = sortModelParsed;
+  }
+  const paginationModelParsedRef = useRef(paginationModelParsed);
+  if (!isDeepEqual(paginationModelParsedRef.current, paginationModelParsed)) {
+    paginationModelParsedRef.current = paginationModelParsed;
+  }
+  const visibilityModelRef = useRef(visibilityModel);
+  if (!isDeepEqual(visibilityModelRef.current, visibilityModel)) {
+    visibilityModelRef.current = visibilityModel;
+  }
+  const pinnedColumnsModelRef = useRef(pinnedColumnsModel);
+  if (!isDeepEqual(pinnedColumnsModelRef.current, pinnedColumnsModel)) {
+    pinnedColumnsModelRef.current = pinnedColumnsModel;
+  }
   const columns = useMemo(() => propsColumns.map(column => {
     column.width = dimensionModel[column.field] || column.width || 100;
     return column;
@@ -2906,70 +2941,75 @@ const useStatefulTable = props => {
   if (apiRef.current) {
     /** Add resetPage method to apiRef. */
     apiRef.current.resetPage = () => {
-      apiRef.current.setPage(0);
+      var _apiRef$current;
+      (_apiRef$current = apiRef.current) === null || _apiRef$current === void 0 ? void 0 : _apiRef$current.setPage(0);
     };
   }
   return {
     apiRef,
     columns,
     onFilterModelChange: (model, details) => {
+      var _apiRef$current$state, _apiRef$current3;
       const filterModel = _objectSpread2(_objectSpread2({}, model), {}, {
         items: model.items.map(item => {
-          const column = apiRef.current.getColumn(item.field);
-          item.type = column.type || 'string';
+          var _apiRef$current2;
+          const column = (_apiRef$current2 = apiRef.current) === null || _apiRef$current2 === void 0 ? void 0 : _apiRef$current2.getColumn(item.field);
+          item.type = (column === null || column === void 0 ? void 0 : column.type) || 'string';
           return item;
         }),
         quickFilterValues: model.quickFilterValues || []
       });
-      propsOnFilterModelChange === null || propsOnFilterModelChange === void 0 ? void 0 : propsOnFilterModelChange(filterModel, details);
       updateUrl({
         filterModel: filterModel,
         sortModel: sortModelParsed,
         paginationModel: paginationModelParsed,
-        columnsModel: apiRef.current.state.columns.columnVisibilityModel,
+        columnsModel: (_apiRef$current$state = (_apiRef$current3 = apiRef.current) === null || _apiRef$current3 === void 0 ? void 0 : _apiRef$current3.state.columns.columnVisibilityModel) !== null && _apiRef$current$state !== void 0 ? _apiRef$current$state : {},
         pinnedColumnsModel: pinnedColumnsModel
       }, search, localStorageVersion, historyReplace, columns);
+      propsOnFilterModelChange === null || propsOnFilterModelChange === void 0 ? void 0 : propsOnFilterModelChange(filterModel, details);
     },
-    filterModel: filterParsed,
+    filterModel: filterParsedRef.current,
     onSortModelChange: (model, details) => {
-      propsOnSortModelChange === null || propsOnSortModelChange === void 0 ? void 0 : propsOnSortModelChange(model, details);
+      var _apiRef$current$state2, _apiRef$current4;
       updateUrl({
         filterModel: filterParsed,
         sortModel: model,
         paginationModel: paginationModelParsed,
-        columnsModel: apiRef.current.state.columns.columnVisibilityModel,
+        columnsModel: (_apiRef$current$state2 = (_apiRef$current4 = apiRef.current) === null || _apiRef$current4 === void 0 ? void 0 : _apiRef$current4.state.columns.columnVisibilityModel) !== null && _apiRef$current$state2 !== void 0 ? _apiRef$current$state2 : {},
         pinnedColumnsModel: pinnedColumnsModel
       }, search, localStorageVersion, historyReplace, columns);
+      propsOnSortModelChange === null || propsOnSortModelChange === void 0 ? void 0 : propsOnSortModelChange(model, details);
     },
-    sortModel: sortModelParsed,
+    sortModel: sortModelParsedRef.current,
     onPinnedColumnsChange: (pinnedColumns, details) => {
-      propsOnPinnedColumnsChange === null || propsOnPinnedColumnsChange === void 0 ? void 0 : propsOnPinnedColumnsChange(pinnedColumns, details);
+      var _apiRef$current$state3, _apiRef$current5;
       updateUrl({
         filterModel: filterParsed,
         sortModel: sortModelParsed,
         paginationModel: paginationModelParsed,
-        columnsModel: apiRef.current.state.columns.columnVisibilityModel,
+        columnsModel: (_apiRef$current$state3 = (_apiRef$current5 = apiRef.current) === null || _apiRef$current5 === void 0 ? void 0 : _apiRef$current5.state.columns.columnVisibilityModel) !== null && _apiRef$current$state3 !== void 0 ? _apiRef$current$state3 : {},
         pinnedColumnsModel: pinnedColumns
       }, search, localStorageVersion, historyReplace, columns);
+      propsOnPinnedColumnsChange === null || propsOnPinnedColumnsChange === void 0 ? void 0 : propsOnPinnedColumnsChange(pinnedColumns, details);
     },
-    pinnedColumns: pinnedColumnsModel,
-    paginationModel: paginationModelParsed,
+    pinnedColumns: pinnedColumnsModelRef.current,
+    paginationModel: paginationModelParsedRef.current,
     onPaginationModelChange: (model, details) => {
+      var _apiRef$current$state4, _apiRef$current6;
       const paginationModel = _objectSpread2(_objectSpread2({}, model), {}, {
         direction: paginationModelParsed.page < model.page ? 'next' : 'back'
       });
-      propsOnPaginationModelChange === null || propsOnPaginationModelChange === void 0 ? void 0 : propsOnPaginationModelChange(paginationModel, details);
       updateUrl({
         filterModel: filterParsed,
         sortModel: sortModelParsed,
         paginationModel: paginationModel,
-        columnsModel: apiRef.current.state.columns.columnVisibilityModel,
+        columnsModel: (_apiRef$current$state4 = (_apiRef$current6 = apiRef.current) === null || _apiRef$current6 === void 0 ? void 0 : _apiRef$current6.state.columns.columnVisibilityModel) !== null && _apiRef$current$state4 !== void 0 ? _apiRef$current$state4 : {},
         pinnedColumnsModel: pinnedColumnsModel
       }, search, localStorageVersion, historyReplace, columns);
+      propsOnPaginationModelChange === null || propsOnPaginationModelChange === void 0 ? void 0 : propsOnPaginationModelChange(paginationModel, details);
     },
-    columnVisibilityModel: visibilityModel,
+    columnVisibilityModel: visibilityModelRef.current,
     onColumnVisibilityModelChange: (columnsVisibilityModel, details) => {
-      propsOnColumnVisibilityModelChange === null || propsOnColumnVisibilityModelChange === void 0 ? void 0 : propsOnColumnVisibilityModelChange(columnsVisibilityModel, details);
       updateUrl({
         filterModel: filterParsed,
         sortModel: sortModelParsed,
@@ -2977,6 +3017,7 @@ const useStatefulTable = props => {
         columnsModel: columnsVisibilityModel,
         pinnedColumnsModel: pinnedColumnsModel
       }, search, localStorageVersion, historyReplace, columns);
+      propsOnColumnVisibilityModelChange === null || propsOnColumnVisibilityModelChange === void 0 ? void 0 : propsOnColumnVisibilityModelChange(columnsVisibilityModel, details);
     },
     onColumnWidthChange: (params, event, details) => {
       propsOnColumnWidthChange === null || propsOnColumnWidthChange === void 0 ? void 0 : propsOnColumnWidthChange(params, event, details);
@@ -3044,6 +3085,7 @@ const CLASSNAME = 'redsift-datagrid';
  */
 
 const StatefulDataGrid = /*#__PURE__*/forwardRef((props, ref) => {
+  var _initialState$density, _forwardedProps$densi;
   const datagridRef = ref || useRef();
   const {
       apiRef: propsApiRef,
@@ -3087,7 +3129,6 @@ const StatefulDataGrid = /*#__PURE__*/forwardRef((props, ref) => {
   const theme = useTheme$1(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 {
@@ -3136,9 +3177,9 @@ const StatefulDataGrid = /*#__PURE__*/forwardRef((props, ref) => {
     localStorageVersion,
     previousLocalStorageVersions
   });
-  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) => {
     if (propsOnRowSelectionModelChange) {
@@ -3162,11 +3203,21 @@ const StatefulDataGrid = /*#__PURE__*/forwardRef((props, ref) => {
   // for server-side pagination it produces inconsistent behavior when selecting all rows in pages 2 and beyond
   const checkboxSelectionVisibleOnly = Boolean(pagination) && Boolean(paginationMode != 'server');
 
+  // Track when the grid API is ready to ensure top pagination renders correctly
+  const [gridReady, setGridReady] = useState(false);
+
+  // 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, selectionStatus, forceSelectionUpdate, isRowSelectable, paginationModel.page, paginationModel.pageSize);
+      onServerSideSelectionStatusChange(rowSelectionModel, apiRef, selectionStatus, forceSelectionUpdate, isRowSelectable, paginationModel.page, paginationModel.pageSize);
     }
   }, [rowSelectionModel, paginationModel.page, paginationModel.pageSize]);
   if (!Array.isArray(rows)) {
@@ -3194,7 +3245,28 @@ const StatefulDataGrid = /*#__PURE__*/forwardRef((props, ref) => {
     ref: datagridRef,
     className: classNames(StatefulDataGrid.className, className),
     $height: height
-  }, /*#__PURE__*/React__default.createElement(DataGridPro, _extends({}, forwardedProps, {
+  }, pagination && ['top', 'both'].includes(paginationPlacement) && gridReady ? paginationMode == 'server' ? /*#__PURE__*/React__default.createElement(ServerSideControlledPagination, {
+    displaySelection: true,
+    displayRowsPerPage: ['top', 'both'].includes(paginationPlacement),
+    displayPagination: ['top', 'both'].includes(paginationPlacement),
+    selectionStatus: selectionStatus.current,
+    paginationModel: paginationModel,
+    onPaginationModelChange: onPaginationModelChange,
+    pageSizeOptions: pageSizeOptions,
+    paginationProps: paginationProps,
+    rowCount: rowCount
+  }) : /*#__PURE__*/React__default.createElement(ControlledPagination, {
+    displaySelection: true,
+    displayRowsPerPage: ['top', 'both'].includes(paginationPlacement),
+    displayPagination: ['top', 'both'].includes(paginationPlacement),
+    selectionStatus: selectionStatus.current,
+    apiRef: apiRef,
+    isRowSelectable: isRowSelectable,
+    paginationModel: paginationModel,
+    onPaginationModelChange: onPaginationModelChange,
+    pageSizeOptions: pageSizeOptions,
+    paginationProps: paginationProps
+  }) : null, /*#__PURE__*/React__default.createElement(DataGridPremium, _extends({}, forwardedProps, {
     apiRef: apiRef,
     columns: columns,
     columnVisibilityModel: columnVisibilityModel,
@@ -3209,7 +3281,9 @@ const StatefulDataGrid = /*#__PURE__*/forwardRef((props, ref) => {
     sortModel: sortModel,
     pageSizeOptions: pageSizeOptions,
     onColumnWidthChange: onColumnWidthChange,
-    initialState: initialState,
+    initialState: _objectSpread2(_objectSpread2({}, initialState), {}, {
+      density: (_initialState$density = initialState === null || initialState === void 0 ? void 0 : initialState.density) !== null && _initialState$density !== void 0 ? _initialState$density : 'standard'
+    }),
     isRowSelectable: isRowSelectable,
     pagination: pagination,
     paginationMode: paginationMode,
@@ -3218,11 +3292,12 @@ const StatefulDataGrid = /*#__PURE__*/forwardRef((props, ref) => {
     rowCount: rowCount,
     autoHeight: autoHeight,
     checkboxSelectionVisibleOnly: checkboxSelectionVisibleOnly,
+    showToolbar: !hideToolbar,
+    density: (_forwardedProps$densi = forwardedProps.density) !== null && _forwardedProps$densi !== void 0 ? _forwardedProps$densi : 'standard',
     slots: _objectSpread2(_objectSpread2({
       baseButton: BaseButton,
       baseCheckbox: BaseCheckbox,
-      // baseTextField,
-      basePopper: BasePopper,
+      baseIconButton: BaseIconButton,
       columnFilteredIcon: props => /*#__PURE__*/React__default.createElement(BaseIcon, _extends({}, props, {
         displayName: "columnFilteredIcon"
       })),
@@ -3257,23 +3332,6 @@ const StatefulDataGrid = /*#__PURE__*/forwardRef((props, ref) => {
         displayName: "openFilterButtonIcon"
       }))
     }, slots), {}, {
-      toolbar: props => /*#__PURE__*/React__default.createElement(ToolbarWrapper, _extends({}, props, {
-        hideToolbar: hideToolbar,
-        RenderedToolbar: RenderedToolbar,
-        filterModel: filterModel,
-        onFilterModelChange: onFilterModelChange,
-        pagination: pagination,
-        paginationPlacement: paginationPlacement,
-        selectionStatus: selectionStatus,
-        apiRef: apiRef,
-        isRowSelectable: isRowSelectable,
-        paginationModel: paginationModel,
-        onPaginationModelChange: onPaginationModelChange,
-        pageSizeOptions: pageSizeOptions,
-        paginationProps: paginationProps,
-        paginationMode: paginationMode,
-        rowCount: rowCount
-      })),
       pagination: props => {
         return pagination ? paginationMode == 'server' ? /*#__PURE__*/React__default.createElement(ServerSideControlledPagination, _extends({}, props, {
           displaySelection: false,
@@ -3331,10 +3389,11 @@ const StatefulDataGrid = /*#__PURE__*/forwardRef((props, ref) => {
           return id;
         }) : gridFilteredSortedRowIdsSelector(apiRef);
         const numberOfSelectableRowsInTable = selectableRowsInTable.length;
-        const numberOfSelectedRows = newSelectionModel.length;
+        const numberOfSelectedRows = getSelectionCount(newSelectionModel);
         if (selectionStatus.current.type === 'table' && numberOfSelectedRows === numberOfSelectableRowsInTable - numberOfSelectableRowsInPage || selectionStatus.current.type === 'table' && numberOfSelectedRows === numberOfSelectableRowsInTable || selectionStatus.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) {