@redsift/table 9.2.0-muiv5 → 9.2.0

package/index.d.ts

@@ -1,6 +1,7 @@
 import * as _mui_x_data_grid_pro from '@mui/x-data-grid-pro';
 import { GridFilterItem, GridCellParams, GridFilterOperator, GridFilterInputMultipleValue, DataGridProProps, GridToolbarExportProps, GridToolbarFilterButtonProps, GridFilterModel, GridToolbarColumnsButton, GridToolbarDensitySelector } from '@mui/x-data-grid-pro';
-export { GridAlignment, GridColDef, GridColumns, GridFilterItem, GridFilterModel, GridSelectionModel, getGridBooleanOperators, getGridDateOperators, getGridSingleSelectOperators } from '@mui/x-data-grid-pro';
+export * from '@mui/x-data-grid-pro';
+export { GridAlignment, GridColDef, GridFilterItem, GridFilterModel, getGridBooleanOperators, getGridDateOperators, getGridSingleSelectOperators } from '@mui/x-data-grid-pro';
 import { Comp, IconProps, NotificationsColorPalette, ProductColorPalette, ShieldVariant } from '@redsift/design-system';
 import React, { ReactNode, RefObject, ComponentProps } from 'react';
 
@@ -9,7 +10,7 @@ declare const DETAIL_PANEL_TOGGLE_COL_DEF: _mui_x_data_grid_pro.GridColDef<any,
 declare const IS_BETWEEN: {
     label: string;
     value: string;
-    getApplyFilterFn: (filterItem: GridFilterItem) => ((params: GridCellParams) => boolean) | null;
+    getApplyFilterFn: (filterItem: GridFilterItem) => ((params: GridCellParams<any, any>) => boolean) | null;
     InputComponent: (props: any) => JSX.Element;
 };
 

package/index.js

@@ -1,4 +1,5 @@
-import { GRID_DETAIL_PANEL_TOGGLE_COL_DEF, getGridNumericOperators as getGridNumericOperators$1, GridFilterInputMultipleValue, getGridStringOperators as getGridStringOperators$1, GridToolbarContainer, GridToolbarFilterButton, GridToolbarColumnsButton, GridToolbarDensitySelector, GridToolbarExport, gridVisibleSortedRowIdsSelector, useGridApiRef, DataGridPro, gridPaginatedVisibleSortedGridRowEntriesSelector, gridPaginatedVisibleSortedGridRowIdsSelector, gridFilteredSortedRowEntriesSelector, gridFilteredSortedRowIdsSelector } from '@mui/x-data-grid-pro';
+import { GRID_DETAIL_PANEL_TOGGLE_COL_DEF, getGridNumericOperators as getGridNumericOperators$1, GridFilterInputMultipleValue, getGridStringOperators as getGridStringOperators$1, GridToolbarContainer, GridToolbarFilterButton, GridToolbarColumnsButton, GridToolbarDensitySelector, GridToolbarExport, gridExpandedSortedRowIdsSelector, useGridApiRef, DataGridPro, gridPaginatedVisibleSortedGridRowEntriesSelector, gridPaginatedVisibleSortedGridRowIdsSelector, gridFilteredSortedRowEntriesSelector, gridFilteredSortedRowIdsSelector } from '@mui/x-data-grid-pro';
+export * from '@mui/x-data-grid-pro';
 export { getGridBooleanOperators, getGridDateOperators, getGridSingleSelectOperators } from '@mui/x-data-grid-pro';
 import * as React from 'react';
 import React__default, { Children, isValidElement, cloneElement, useLayoutEffect, useEffect, useRef, forwardRef, useState, useCallback, createElement } from 'react';
@@ -17466,7 +17467,7 @@ const isBetweenOperator = {
   label: 'is between',
   value: 'isBetween',
   getApplyFilterFn: filterItem => {
-    if (!filterItem.columnField || !filterItem.value || !filterItem.operatorValue) {
+    if (!filterItem.field || !filterItem.value || !filterItem.operator) {
       return null;
     }
     if (!Array.isArray(filterItem.value) || filterItem.value.length !== 2) {
@@ -17479,7 +17480,7 @@ const isBetweenOperator = {
       return null;
     }
     return params => {
-      return params.value !== null && filterItem.value[0] <= params.value && params.value <= filterItem.value[1];
+      return params.value !== null && params.value !== undefined && filterItem.value[0] <= params.value && params.value <= filterItem.value[1];
     };
   },
   InputComponent: InputNumberInterval
@@ -17492,7 +17493,7 @@ const containsAnyOfOperator = {
   label: 'contains any of',
   value: 'containsAnyOf',
   getApplyFilterFn: filterItem => {
-    if (!filterItem.columnField || !filterItem.value || !filterItem.operatorValue) {
+    if (!filterItem.field || !filterItem.value || !filterItem.operator) {
       return null;
     }
     return params => {
@@ -17517,7 +17518,7 @@ const endsWithAnyOfOperator = {
   label: 'ends with any of',
   value: 'endsWithAnyOf',
   getApplyFilterFn: filterItem => {
-    if (!filterItem.columnField || !filterItem.value || !filterItem.operatorValue) {
+    if (!filterItem.field || !filterItem.value || !filterItem.operator) {
       return null;
     }
     return params => {
@@ -17544,7 +17545,7 @@ const isAnyOfOperator = {
   label: 'is any of',
   value: 'isAnyOf',
   getApplyFilterFn: filterItem => {
-    if (!filterItem.columnField || !filterItem.value || !filterItem.operatorValue) {
+    if (!filterItem.field || !filterItem.value || !filterItem.operator) {
       return null;
     }
     return params => {
@@ -17568,7 +17569,7 @@ const isNotAnyOfOperator = {
   label: 'is not any of',
   value: 'isNotAnyOf',
   getApplyFilterFn: filterItem => {
-    if (!filterItem.columnField || !filterItem.value || !filterItem.operatorValue) {
+    if (!filterItem.field || !filterItem.value || !filterItem.operator) {
       return null;
     }
     return params => {
@@ -17592,7 +17593,7 @@ const startsWithAnyOfOperator = {
   label: 'starts with any of',
   value: 'startsWithAnyOf',
   getApplyFilterFn: filterItem => {
-    if (!filterItem.columnField || !filterItem.value || !filterItem.operatorValue) {
+    if (!filterItem.field || !filterItem.value || !filterItem.operator) {
       return null;
     }
     return params => {
@@ -21709,7 +21710,7 @@ const Toolbar$2 = props => {
         let {
           apiRef
         } = _ref;
-        return gridVisibleSortedRowIdsSelector(apiRef);
+        return gridExpandedSortedRowIdsSelector(apiRef);
       }
     },
     printOptions: {
@@ -24165,7 +24166,7 @@ process.env.NODE_ENV !== "production" ? TablePagination.propTypes /* remove-prop
 } : void 0;
 var TablePagination$1 = TablePagination;
 
-const _excluded$1 = ["apiRef", "autoHeight", "className", "components", "componentsProps", "filterModel", "height", "hideToolbar", "initialState", "license", "onFilterModelChange", "onPageChange", "onPageSizeChange", "onSelectionModelChange", "page", "pageSize", "pagination", "paginationPlacement", "rows", "rowsPerPageOptions", "sx"];
+const _excluded$1 = ["apiRef", "autoHeight", "className", "slots", "slotProps", "filterModel", "height", "hideToolbar", "initialState", "license", "onFilterModelChange", "paginationModel", "onPaginationModelChange", "onRowSelectionModelChange", "pagination", "paginationPlacement", "rows", "pageSizeOptions", "sx"];
 const COMPONENT_NAME$1 = 'DataGrid';
 const CLASSNAME$1 = 'redsift-datagrid';
 const DEFAULT_PROPS = {
@@ -24179,13 +24180,11 @@ const Pagination = _ref => {
     displayPagination = false,
     selectionStatus,
     apiRef,
-    page,
-    onPageChange,
-    pageSize,
-    onPageSizeChange,
-    rowsPerPageOptions
+    paginationModel,
+    onPaginationModelChange,
+    pageSizeOptions
   } = _ref;
-  const rowsCount = apiRef.current.state.pagination.rowCount;
+  const rowsCount = apiRef.current.state.rows.totalRowCount;
   return /*#__PURE__*/React__default.createElement(Flexbox, {
     flexDirection: "row",
     alignItems: "center",
@@ -24195,7 +24194,7 @@ const Pagination = _ref => {
     fontSize: "14px"
   }, `All ${selectionStatus.numberOfSelectedRows}${rowsCount !== selectionStatus.numberOfSelectableRowsInTable ? ' selectable' : ''} rows on this page are selected. `, /*#__PURE__*/React__default.createElement(LinkButton, {
     onClick: () => {
-      apiRef.current.selectRows(apiRef.current.getAllRowIds());
+      apiRef.current.selectRows(selectionStatus.selectableRowsInTable ? selectionStatus.selectableRowsInTable : apiRef.current.getAllRowIds());
     }
   }, "Select all ", selectionStatus.numberOfSelectableRowsInTable, rowsCount !== selectionStatus.numberOfSelectableRowsInTable ? ' selectable' : '', " rows in the table.")) : selectionStatus.type === 'table' ? /*#__PURE__*/React__default.createElement(Text, {
     fontSize: "14px"
@@ -24207,51 +24206,56 @@ const Pagination = _ref => {
     fontSize: "14px"
   }, `${selectionStatus.numberOfSelectedRows} row${selectionStatus.numberOfSelectedRows > 1 ? 's' : ''} selected`) : /*#__PURE__*/React__default.createElement(Text, null)) : null, displayPagination ? /*#__PURE__*/React__default.createElement(TablePagination$1, {
     component: "div",
-    count: rowsCount,
-    page: page,
-    onPageChange: (event, newPage) => onPageChange(newPage),
-    rowsPerPage: pageSize,
-    onRowsPerPageChange: event => onPageSizeChange(parseInt(event.target.value, 10)),
-    rowsPerPageOptions: displayRowsPerPage ? rowsPerPageOptions : []
+    count: selectionStatus.selectableRowsInTable.length ? selectionStatus.selectableRowsInTable.length : apiRef.current.getAllRowIds().length,
+    page: paginationModel.page,
+    onPageChange: (event, page) => onPaginationModelChange({
+      page,
+      pageSize: paginationModel.pageSize
+    }),
+    rowsPerPage: paginationModel.pageSize,
+    onRowsPerPageChange: event => onPaginationModelChange({
+      page: paginationModel.page,
+      pageSize: parseInt(event.target.value, 10)
+    }),
+    rowsPerPageOptions: displayRowsPerPage ? pageSizeOptions || [] : []
   }) : null);
 };
 const DataGrid = /*#__PURE__*/forwardRef((props, ref) => {
-  var _initialState$paginat, _initialState$paginat2;
+  var _initialState$paginat, _initialState$paginat2, _ref4, _ref5, _initialState$paginat3, _initialState$paginat4, _initialState$paginat5, _pageSizeOptions$;
   const datagridRef = ref || useRef();
   const {
       apiRef: propsApiRef,
       autoHeight,
       className,
-      components,
-      componentsProps,
+      slots,
+      slotProps,
       filterModel: propsFilterModel,
       height: propsHeight,
       hideToolbar,
       initialState,
       license,
       onFilterModelChange: propsOnFilterModelChange,
-      onPageChange: propsOnPageChange,
-      onPageSizeChange: propsOnPageSizeChange,
-      onSelectionModelChange,
-      page: propsPage,
-      pageSize: propsPageSize,
+      paginationModel: propsPaginationModel,
+      onPaginationModelChange: propsOnPaginationModelChange,
+      onRowSelectionModelChange,
       pagination,
       paginationPlacement,
       rows,
-      rowsPerPageOptions,
+      pageSizeOptions,
       sx
     } = props,
     forwardedProps = _objectWithoutProperties(props, _excluded$1);
   const _apiRef = useGridApiRef();
   const apiRef = propsApiRef !== null && propsApiRef !== void 0 ? propsApiRef : _apiRef;
-  const RenderedToolbar = components !== null && components !== void 0 && components.Toolbar ? components.Toolbar : Toolbar$2;
+  const RenderedToolbar = slots !== null && slots !== void 0 && slots.toolbar ? slots.toolbar : Toolbar$2;
   LicenseInfo.setLicenseKey(license);
   const height = propsHeight !== null && propsHeight !== void 0 ? propsHeight : autoHeight ? undefined : '500px';
   const selectionStatus = useRef({
     type: 'none',
     numberOfSelectedRows: 0,
     numberOfSelectableRowsInPage: 0,
-    numberOfSelectableRowsInTable: 0
+    numberOfSelectableRowsInTable: 0,
+    selectableRowsInTable: []
   });
   const [filterModel, setFilterModel] = useState(propsFilterModel);
   useEffect(() => {
@@ -24263,24 +24267,40 @@ const DataGrid = /*#__PURE__*/forwardRef((props, ref) => {
     } else {
       setFilterModel(model);
     }
+    const selectableRowsInTable = props.isRowSelectable && typeof props.isRowSelectable === 'function' ? gridFilteredSortedRowEntriesSelector(apiRef).filter(_ref2 => {
+      var _props$isRowSelectabl;
+      let {
+        model
+      } = _ref2;
+      return (_props$isRowSelectabl = props.isRowSelectable) === null || _props$isRowSelectabl === void 0 ? void 0 : _props$isRowSelectabl.call(props, {
+        row: model
+      });
+    }).map(_ref3 => {
+      let {
+        id
+      } = _ref3;
+      return id;
+    }) : gridFilteredSortedRowIdsSelector(apiRef);
+    const numberOfSelectableRowsInTable = selectableRowsInTable.length;
+    selectionStatus.current.selectableRowsInTable = selectableRowsInTable;
+    selectionStatus.current.numberOfSelectableRowsInTable = numberOfSelectableRowsInTable;
   };
-  const [page, setPage] = React__default.useState((initialState === null || initialState === void 0 ? void 0 : (_initialState$paginat = initialState.pagination) === null || _initialState$paginat === void 0 ? void 0 : _initialState$paginat.page) || propsPage || 0);
-  const [pageSize, setPageSize] = React__default.useState((initialState === null || initialState === void 0 ? void 0 : (_initialState$paginat2 = initialState.pagination) === null || _initialState$paginat2 === void 0 ? void 0 : _initialState$paginat2.pageSize) || propsPageSize || (rowsPerPageOptions === null || rowsPerPageOptions === void 0 ? void 0 : rowsPerPageOptions[0]) || 100);
-  const onPageChange = page => {
-    if (propsOnPageChange) {
-      propsOnPageChange(page, undefined);
+  const [paginationModel, setPaginationModel] = useState({
+    pageSize: (initialState === null || initialState === void 0 ? void 0 : (_initialState$paginat = initialState.pagination) === null || _initialState$paginat === void 0 ? void 0 : (_initialState$paginat2 = _initialState$paginat.paginationModel) === null || _initialState$paginat2 === void 0 ? void 0 : _initialState$paginat2.pageSize) || (propsPaginationModel === null || propsPaginationModel === void 0 ? void 0 : propsPaginationModel.pageSize) || 100,
+    page: (_ref4 = (_ref5 = (_initialState$paginat3 = initialState === null || initialState === void 0 ? void 0 : (_initialState$paginat4 = initialState.pagination) === null || _initialState$paginat4 === void 0 ? void 0 : (_initialState$paginat5 = _initialState$paginat4.paginationModel) === null || _initialState$paginat5 === void 0 ? void 0 : _initialState$paginat5.page) !== null && _initialState$paginat3 !== void 0 ? _initialState$paginat3 : propsPaginationModel === null || propsPaginationModel === void 0 ? void 0 : propsPaginationModel.page) !== null && _ref5 !== void 0 ? _ref5 : typeof (pageSizeOptions === null || pageSizeOptions === void 0 ? void 0 : pageSizeOptions[0]) === 'number' ? pageSizeOptions === null || pageSizeOptions === void 0 ? void 0 : pageSizeOptions[0] : pageSizeOptions === null || pageSizeOptions === void 0 ? void 0 : (_pageSizeOptions$ = pageSizeOptions[0]) === null || _pageSizeOptions$ === void 0 ? void 0 : _pageSizeOptions$.value) !== null && _ref4 !== void 0 ? _ref4 : 0
+  });
+  const onPaginationModelChange = model => {
+    if (propsOnPaginationModelChange) {
+      propsOnPaginationModelChange(model, undefined);
     } else {
-      setPage(page);
+      setPaginationModel(model);
     }
   };
-  const onPageSizeChange = pageSize => {
-    if (propsOnPageSizeChange) {
-      propsOnPageSizeChange(pageSize, undefined);
-    } else {
-      setPageSize(pageSize);
-      setPage(0);
+  useEffect(() => {
+    if (propsPaginationModel) {
+      setPaginationModel(propsPaginationModel);
     }
-  };
+  }, [propsPaginationModel]);
   if (!Array.isArray(rows)) {
     return null;
   }
@@ -24292,47 +24312,47 @@ const DataGrid = /*#__PURE__*/forwardRef((props, ref) => {
     apiRef: apiRef,
     autoHeight: autoHeight,
     checkboxSelectionVisibleOnly: Boolean(pagination),
-    components: _objectSpread2(_objectSpread2({
-      BaseButton,
-      BaseCheckbox,
-      // BaseTextField,
-      BasePopper,
-      ColumnFilteredIcon: props => /*#__PURE__*/React__default.createElement(BaseIcon, _extends$2({}, props, {
+    slots: _objectSpread2(_objectSpread2({
+      baseButton: BaseButton,
+      baseCheckbox: BaseCheckbox,
+      // baseTextField,
+      basePopper: BasePopper,
+      columnFilteredIcon: props => /*#__PURE__*/React__default.createElement(BaseIcon, _extends$2({}, props, {
         displayName: "ColumnFilteredIcon"
       })),
-      ColumnSelectorIcon: props => /*#__PURE__*/React__default.createElement(BaseIcon, _extends$2({}, props, {
+      columnSelectorIcon: props => /*#__PURE__*/React__default.createElement(BaseIcon, _extends$2({}, props, {
         displayName: "ColumnSelectorIcon"
       })),
-      ColumnSortedAscendingIcon: props => /*#__PURE__*/React__default.createElement(BaseIcon, _extends$2({}, props, {
+      columnSortedAscendingIcon: props => /*#__PURE__*/React__default.createElement(BaseIcon, _extends$2({}, props, {
         displayName: "ColumnSortedAscendingIcon"
       })),
-      ColumnSortedDescendingIcon: props => /*#__PURE__*/React__default.createElement(BaseIcon, _extends$2({}, props, {
+      columnSortedDescendingIcon: props => /*#__PURE__*/React__default.createElement(BaseIcon, _extends$2({}, props, {
         displayName: "ColumnSortedDescendingIcon"
       })),
-      DensityCompactIcon: props => /*#__PURE__*/React__default.createElement(BaseIcon, _extends$2({}, props, {
+      densityCompactIcon: props => /*#__PURE__*/React__default.createElement(BaseIcon, _extends$2({}, props, {
         displayName: "DensityCompactIcon"
       })),
-      DensityStandardIcon: props => /*#__PURE__*/React__default.createElement(BaseIcon, _extends$2({}, props, {
+      densityStandardIcon: props => /*#__PURE__*/React__default.createElement(BaseIcon, _extends$2({}, props, {
         displayName: "DensityStandardIcon"
       })),
-      DensityComfortableIcon: props => /*#__PURE__*/React__default.createElement(BaseIcon, _extends$2({}, props, {
+      densityComfortableIcon: props => /*#__PURE__*/React__default.createElement(BaseIcon, _extends$2({}, props, {
         displayName: "DensityComfortableIcon"
       })),
-      DetailPanelCollapseIcon: props => /*#__PURE__*/React__default.createElement(BaseIcon, _extends$2({}, props, {
+      detailPanelCollapseIcon: props => /*#__PURE__*/React__default.createElement(BaseIcon, _extends$2({}, props, {
         displayName: "DetailPanelCollapseIcon"
       })),
-      DetailPanelExpandIcon: props => /*#__PURE__*/React__default.createElement(BaseIcon, _extends$2({}, props, {
+      detailPanelExpandIcon: props => /*#__PURE__*/React__default.createElement(BaseIcon, _extends$2({}, props, {
         displayName: "DetailPanelExpandIcon"
       })),
-      ExportIcon: props => /*#__PURE__*/React__default.createElement(BaseIcon, _extends$2({}, props, {
+      exportIcon: props => /*#__PURE__*/React__default.createElement(BaseIcon, _extends$2({}, props, {
         displayName: "ExportIcon"
       })),
-      OpenFilterButtonIcon: props => /*#__PURE__*/React__default.createElement(BaseIcon, _extends$2({
+      openFilterButtonIcon: props => /*#__PURE__*/React__default.createElement(BaseIcon, _extends$2({
         displayName: "OpenFilterButtonIcon",
         fontSize: "medium"
       }, props))
-    }, components), {}, {
-      Toolbar: props => {
+    }, slots), {}, {
+      toolbar: props => {
         return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, !hideToolbar ? /*#__PURE__*/React__default.createElement(RenderedToolbar, _extends$2({}, props, {
           filterModel: filterModel,
           onFilterModelChange: onFilterModelChange
@@ -24342,59 +24362,65 @@ const DataGrid = /*#__PURE__*/forwardRef((props, ref) => {
           displayPagination: ['top', 'both'].includes(paginationPlacement),
           selectionStatus: selectionStatus.current,
           apiRef: apiRef,
-          page: page,
-          onPageChange: onPageChange,
-          pageSize: pageSize,
-          onPageSizeChange: onPageSizeChange,
-          rowsPerPageOptions: rowsPerPageOptions
+          paginationModel: paginationModel,
+          onPaginationModelChange: onPaginationModelChange,
+          pageSizeOptions: pageSizeOptions
         }) : null);
       },
-      Pagination: props => pagination ? /*#__PURE__*/React__default.createElement(Pagination, _extends$2({}, props, {
+      pagination: props => pagination ? /*#__PURE__*/React__default.createElement(Pagination, _extends$2({}, props, {
         displaySelection: false,
         displayRowsPerPage: ['bottom', 'both'].includes(paginationPlacement),
         displayPagination: ['bottom', 'both'].includes(paginationPlacement),
         selectionStatus: selectionStatus.current,
         apiRef: apiRef,
-        page: page,
-        onPageChange: onPageChange,
-        pageSize: pageSize,
-        onPageSizeChange: onPageSizeChange,
-        rowsPerPageOptions: rowsPerPageOptions
+        paginationModel: paginationModel,
+        onPaginationModelChange: onPaginationModelChange,
+        pageSizeOptions: pageSizeOptions
       })) : null
     }),
-    componentsProps: _objectSpread2(_objectSpread2({}, componentsProps), {}, {
-      toolbar: _objectSpread2({}, componentsProps === null || componentsProps === void 0 ? void 0 : componentsProps.toolbar)
+    slotProps: _objectSpread2(_objectSpread2({}, slotProps), {}, {
+      toolbar: _objectSpread2({}, slotProps === null || slotProps === void 0 ? void 0 : slotProps.toolbar)
     }),
     filterModel: filterModel,
     initialState: initialState,
     onFilterModelChange: onFilterModelChange,
     pagination: pagination,
     rows: rows,
-    rowsPerPageOptions: rowsPerPageOptions,
-    page: page,
-    onPageChange: onPageChange,
-    pageSize: pageSize,
-    onPageSizeChange: onPageSizeChange,
-    onSelectionModelChange: (newSelectionModel, details) => {
+    pageSizeOptions: pageSizeOptions,
+    paginationModel: paginationModel,
+    onPaginationModelChange: onPaginationModelChange,
+    onRowSelectionModelChange: (newSelectionModel, details) => {
       if (pagination) {
-        const numberOfSelectableRowsInPage = props.isRowSelectable && typeof props.isRowSelectable === 'function' ? gridPaginatedVisibleSortedGridRowEntriesSelector(apiRef).filter(_ref2 => {
-          var _props$isRowSelectabl;
+        const selectableRowsInPage = props.isRowSelectable && typeof props.isRowSelectable === 'function' ? gridPaginatedVisibleSortedGridRowEntriesSelector(apiRef).filter(_ref6 => {
+          var _props$isRowSelectabl2;
           let {
             model
-          } = _ref2;
-          return (_props$isRowSelectabl = props.isRowSelectable) === null || _props$isRowSelectabl === void 0 ? void 0 : _props$isRowSelectabl.call(props, {
+          } = _ref6;
+          return (_props$isRowSelectabl2 = props.isRowSelectable) === null || _props$isRowSelectabl2 === void 0 ? void 0 : _props$isRowSelectabl2.call(props, {
             row: model
           });
-        }).length : gridPaginatedVisibleSortedGridRowIdsSelector(apiRef).length;
-        const numberOfSelectableRowsInTable = props.isRowSelectable && typeof props.isRowSelectable === 'function' ? gridFilteredSortedRowEntriesSelector(apiRef).filter(_ref3 => {
-          var _props$isRowSelectabl2;
+        }).map(_ref7 => {
+          let {
+            id
+          } = _ref7;
+          return id;
+        }) : gridPaginatedVisibleSortedGridRowIdsSelector(apiRef);
+        const numberOfSelectableRowsInPage = selectableRowsInPage.length;
+        const selectableRowsInTable = props.isRowSelectable && typeof props.isRowSelectable === 'function' ? gridFilteredSortedRowEntriesSelector(apiRef).filter(_ref8 => {
+          var _props$isRowSelectabl3;
           let {
             model
-          } = _ref3;
-          return (_props$isRowSelectabl2 = props.isRowSelectable) === null || _props$isRowSelectabl2 === void 0 ? void 0 : _props$isRowSelectabl2.call(props, {
+          } = _ref8;
+          return (_props$isRowSelectabl3 = props.isRowSelectable) === null || _props$isRowSelectabl3 === void 0 ? void 0 : _props$isRowSelectabl3.call(props, {
             row: model
           });
-        }).length : gridFilteredSortedRowIdsSelector(apiRef).length;
+        }).map(_ref9 => {
+          let {
+            id
+          } = _ref9;
+          return id;
+        }) : gridFilteredSortedRowIdsSelector(apiRef);
+        const numberOfSelectableRowsInTable = selectableRowsInTable.length;
         const numberOfSelectedRows = newSelectionModel.length;
         if (selectionStatus.current.type === 'table' && numberOfSelectedRows === numberOfSelectableRowsInTable - numberOfSelectableRowsInPage) {
           setTimeout(() => {
@@ -24406,32 +24432,36 @@ const DataGrid = /*#__PURE__*/forwardRef((props, ref) => {
             type: 'page',
             numberOfSelectedRows,
             numberOfSelectableRowsInPage,
-            numberOfSelectableRowsInTable
+            numberOfSelectableRowsInTable,
+            selectableRowsInTable
           };
         } else if (numberOfSelectedRows === numberOfSelectableRowsInTable && numberOfSelectableRowsInPage < numberOfSelectableRowsInTable) {
           selectionStatus.current = {
             type: 'table',
             numberOfSelectedRows,
             numberOfSelectableRowsInPage,
-            numberOfSelectableRowsInTable
+            numberOfSelectableRowsInTable,
+            selectableRowsInTable
           };
         } else if (numberOfSelectedRows > 0) {
           selectionStatus.current = {
             type: 'other',
             numberOfSelectedRows,
             numberOfSelectableRowsInPage,
-            numberOfSelectableRowsInTable
+            numberOfSelectableRowsInTable,
+            selectableRowsInTable
           };
         } else {
           selectionStatus.current = {
             type: 'none',
             numberOfSelectedRows,
             numberOfSelectableRowsInPage,
-            numberOfSelectableRowsInTable
+            numberOfSelectableRowsInTable,
+            selectableRowsInTable
           };
         }
       }
-      onSelectionModelChange === null || onSelectionModelChange === void 0 ? void 0 : onSelectionModelChange(newSelectionModel, details);
+      onRowSelectionModelChange === null || onRowSelectionModelChange === void 0 ? void 0 : onRowSelectionModelChange(newSelectionModel, details);
     },
     sx: _objectSpread2(_objectSpread2({}, sx), {}, {
       '.MuiDataGrid-columnHeaders': {