@redsift/table 11.11.0-muiv7 → 11.11.0-muiv8-alpha.0

package/_internal/StatefulDataGrid2.js

@@ -1,17 +1,16 @@
 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 { 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, n as memoTheme, p as createSimplePaletteValueFilter, q as useDefaultProps, r as useFormControl, t as formControlState, v as capitalize, w as composeClasses, x as rootShouldForwardProp, y as isAdornedStart, z as isFilled, F as FormControlContext, A as useId, B as useSlot, D as Select, G as refType, I as Input, H as FilledInput, O as OutlinedInput, E as EMPTY_ROW_SELECTION_MODEL, o as onServerSideSelectionStatusChange, g as getSelectionCount, S as ServerSideControlledPagination, C as ControlledPagination } 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, c as BaseIconButton, a as BaseCheckbox, b as BaseIcon } from './BaseIconButton.js';
 
 const splitProps = props => {
   const result = {
@@ -93,7 +92,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 +191,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 +318,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 +561,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 +1072,7 @@ const useUtilityClasses = ownerState => {
 };
 const TextFieldRoot = styled$1(FormControl$1, {
   name: 'MuiTextField',
-  slot: 'Root',
-  overridesResolver: (props, styles) => styles.root
+  slot: 'Root'
 })({});
 
 /**
@@ -1343,7 +1340,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 +1360,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 +1373,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 +1442,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 +1478,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.
    */
@@ -3132,6 +3129,25 @@ const useTableStates = (id, version) => {
   };
 };
 
+/**
+ * Deep comparison for objects to maintain stable references.
+ * MUI DataGrid v8 resets pagination when it detects filter/sort model changes.
+ * We need to ensure stable references when values are the same.
+ */
+const isDeepEqual = (a, b) => {
+  if (a === b) return true;
+  if (a == null || b == null) return a === b;
+  if (typeof a !== 'object' || typeof b !== 'object') return a === b;
+  const aKeys = Object.keys(a);
+  const bKeys = Object.keys(b);
+  if (aKeys.length !== bKeys.length) return false;
+  for (const key of aKeys) {
+    if (!isDeepEqual(a[key], b[key])) {
+      return false;
+    }
+  }
+  return true;
+};
 const useStatefulTable = props => {
   const {
     // density = 'standard',
@@ -3182,13 +3198,7 @@ const useStatefulTable = props => {
       [field]: newWidth
     }));
   }, [dimensionModel, setDimensionModel]);
-  const {
-    filterModel: filterParsed,
-    sortModel: sortModelParsed,
-    paginationModel: paginationModelParsed,
-    columnVisibilityModel: visibilityModel,
-    pinnedColumnsModel
-  } = getModelsParsedOrUpdateLocalStorage(search || '', localStorageVersion, propsColumns, historyReplace, initialState, {
+  const parsedModels = getModelsParsedOrUpdateLocalStorage(search || '', localStorageVersion, propsColumns, historyReplace, initialState, {
     localStorageFilters,
     setLocalStorageFilters,
     localStorageSorting: sortModel,
@@ -3200,6 +3210,39 @@ const useStatefulTable = props => {
     localStoragePinnedColumns: pinnedColumns,
     setLocalStoragePinnedColumns: setPinnedColumns
   });
+
+  // MUI DataGrid v8 auto-resets pagination when filter/sort models change.
+  // We use refs with deep comparison to maintain stable references when values are equal.
+  // This prevents false "change" detections that would reset pagination.
+  const filterModelRef = useRef(parsedModels.filterModel);
+  const sortModelRef = useRef(parsedModels.sortModel);
+  const paginationModelRef = useRef(parsedModels.paginationModel);
+  const columnVisibilityModelRef = useRef(parsedModels.columnVisibilityModel);
+  const pinnedColumnsModelRef = useRef(parsedModels.pinnedColumnsModel);
+
+  // Only update refs if values actually changed (deep comparison)
+  if (!isDeepEqual(filterModelRef.current, parsedModels.filterModel)) {
+    filterModelRef.current = parsedModels.filterModel;
+  }
+  if (!isDeepEqual(sortModelRef.current, parsedModels.sortModel)) {
+    sortModelRef.current = parsedModels.sortModel;
+  }
+  if (!isDeepEqual(paginationModelRef.current, parsedModels.paginationModel)) {
+    paginationModelRef.current = parsedModels.paginationModel;
+  }
+  if (!isDeepEqual(columnVisibilityModelRef.current, parsedModels.columnVisibilityModel)) {
+    columnVisibilityModelRef.current = parsedModels.columnVisibilityModel;
+  }
+  if (!isDeepEqual(pinnedColumnsModelRef.current, parsedModels.pinnedColumnsModel)) {
+    pinnedColumnsModelRef.current = parsedModels.pinnedColumnsModel;
+  }
+
+  // Use the stable references
+  const filterParsed = filterModelRef.current;
+  const sortModelParsed = sortModelRef.current;
+  const paginationModelParsed = paginationModelRef.current;
+  const visibilityModel = columnVisibilityModelRef.current;
+  const pinnedColumnsModel = pinnedColumnsModelRef.current;
   const columns = useMemo(() => propsColumns.map(column => {
     column.width = dimensionModel[column.field] || column.width || 100;
     return column;
@@ -3207,70 +3250,81 @@ 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);
+      // Update URL first to ensure the search string is updated before any re-render
       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,
     onSortModelChange: (model, details) => {
-      propsOnSortModelChange === null || propsOnSortModelChange === void 0 ? void 0 : propsOnSortModelChange(model, details);
+      var _apiRef$current$state2, _apiRef$current4;
+      // Update URL first to ensure the search string is updated before any re-render
       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,
     onPinnedColumnsChange: (pinnedColumns, details) => {
-      propsOnPinnedColumnsChange === null || propsOnPinnedColumnsChange === void 0 ? void 0 : propsOnPinnedColumnsChange(pinnedColumns, details);
+      var _apiRef$current$state3, _apiRef$current5;
+      // Update URL first to ensure the search string is updated before any re-render
       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,
     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);
+      // Update URL first to ensure the search string is updated before any re-render
+      // This prevents MUI DataGrid v8 from resetting pagination on re-render
       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,
     onColumnVisibilityModelChange: (columnsVisibilityModel, details) => {
-      propsOnColumnVisibilityModelChange === null || propsOnColumnVisibilityModelChange === void 0 ? void 0 : propsOnColumnVisibilityModelChange(columnsVisibilityModel, details);
+      // Update URL first to ensure the search string is updated before any re-render
       updateUrl({
         filterModel: filterParsed,
         sortModel: sortModelParsed,
@@ -3278,6 +3332,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);
@@ -3325,7 +3380,7 @@ const StatefulDataGrid = /*#__PURE__*/forwardRef((props, ref) => {
       paginationPlacement = 'both',
       paginationProps,
       rows,
-      pageSizeOptions,
+      pageSizeOptions = [5, 10, 25, 50],
       sx,
       theme: propsTheme,
       useRouter,
@@ -3385,9 +3440,9 @@ const StatefulDataGrid = /*#__PURE__*/forwardRef((props, ref) => {
     localStorageVersion,
     previousLocalStorageVersions
   });
-  const [rowSelectionModel, setRowSelectionModel] = useState(propsRowSelectionModel !== null && propsRowSelectionModel !== void 0 ? propsRowSelectionModel : []);
+  const [rowSelectionModel, setRowSelectionModel] = useState(propsRowSelectionModel !== null && propsRowSelectionModel !== void 0 ? propsRowSelectionModel : EMPTY_ROW_SELECTION_MODEL);
   useEffect(() => {
-    setRowSelectionModel(propsRowSelectionModel !== null && propsRowSelectionModel !== void 0 ? propsRowSelectionModel : []);
+    setRowSelectionModel(propsRowSelectionModel !== null && propsRowSelectionModel !== void 0 ? propsRowSelectionModel : EMPTY_ROW_SELECTION_MODEL);
   }, [propsRowSelectionModel]);
   const onRowSelectionModelChange = (selectionModel, details) => {
     if (propsOnRowSelectionModelChange) {
@@ -3415,7 +3470,7 @@ const StatefulDataGrid = /*#__PURE__*/forwardRef((props, ref) => {
   // 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)) {
@@ -3467,11 +3522,11 @@ const StatefulDataGrid = /*#__PURE__*/forwardRef((props, ref) => {
     rowCount: rowCount,
     autoHeight: autoHeight,
     checkboxSelectionVisibleOnly: checkboxSelectionVisibleOnly,
+    showToolbar: !hideToolbar,
     slots: _objectSpread2(_objectSpread2({
       baseButton: BaseButton,
+      baseIconButton: BaseIconButton,
       baseCheckbox: BaseCheckbox,
-      // baseTextField,
-      basePopper: BasePopper,
       columnFilteredIcon: props => /*#__PURE__*/React__default.createElement(BaseIcon, _extends({}, props, {
         displayName: "columnFilteredIcon"
       })),
@@ -3580,10 +3635,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) {