@mui/x-data-grid 5.8.0 → 5.11.0

package/node/DataGrid/useDataGridComponent.js

@@ -57,6 +57,8 @@ var _useGridRowsMeta = require("../hooks/features/rows/useGridRowsMeta");
 
 var _useGridStatePersistence = require("../hooks/features/statePersistence/useGridStatePersistence");
 
+var _useGridColumnSpanning = require("../hooks/features/columns/useGridColumnSpanning");
+
 const useDataGridComponent = props => {
   var _props$experimentalFe, _props$experimentalFe2;
 
@@ -88,12 +90,13 @@ const useDataGridComponent = props => {
   (0, _useGridColumns.useGridColumns)(apiRef, props);
   (0, _useGridRows.useGridRows)(apiRef, props);
   (0, _useGridParamsApi.useGridParamsApi)(apiRef);
+  (0, _useGridColumnSpanning.useGridColumnSpanning)(apiRef);
   const useGridEditing = (_props$experimentalFe2 = props.experimentalFeatures) != null && _props$experimentalFe2.newEditingApi ? _useGridEditing2.useGridEditing : _useGridEditing.useGridEditing;
   useGridEditing(apiRef, props);
   (0, _useGridFocus.useGridFocus)(apiRef, props);
-  (0, _useGridSorting.useGridSorting)(apiRef, props);
   (0, _useGridPreferencesPanel.useGridPreferencesPanel)(apiRef);
   (0, _useGridFilter.useGridFilter)(apiRef, props);
+  (0, _useGridSorting.useGridSorting)(apiRef, props);
   (0, _useGridDensity.useGridDensity)(apiRef, props);
   (0, _useGridPagination.useGridPagination)(apiRef, props);
   (0, _useGridRowsMeta.useGridRowsMeta)(apiRef, props);

package/node/DataGrid/useDataGridProps.js

@@ -80,7 +80,8 @@ const DATA_GRID_PROPS_DEFAULT_VALUES = {
   sortingMode: _models.GridFeatureModeConstant.client,
   throttleRowsMs: 0,
   disableColumnReorder: false,
-  disableColumnResize: false
+  disableColumnResize: false,
+  keepNonExistentRowsSelected: false
 };
 exports.DATA_GRID_PROPS_DEFAULT_VALUES = DATA_GRID_PROPS_DEFAULT_VALUES;
 

package/node/colDef/gridActionsColDef.js

@@ -24,6 +24,7 @@ const GRID_ACTIONS_COL_DEF = (0, _extends2.default)({}, _gridStringColDef.GRID_S
   headerName: '',
   disableColumnMenu: true,
   disableExport: true,
-  renderCell: _GridActionsCell.renderActionsCell
+  renderCell: _GridActionsCell.renderActionsCell,
+  getApplyQuickFilterFn: undefined
 });
 exports.GRID_ACTIONS_COL_DEF = GRID_ACTIONS_COL_DEF;

package/node/colDef/gridBooleanColDef.js

@@ -34,6 +34,7 @@ const GRID_BOOLEAN_COL_DEF = (0, _extends2.default)({}, _gridStringColDef.GRID_S
   renderEditCell: _GridEditBooleanCell.renderEditBooleanCell,
   sortComparator: _gridSortingUtils.gridNumberComparator,
   valueFormatter: gridBooleanFormatter,
-  filterOperators: (0, _gridBooleanOperators.getGridBooleanOperators)()
+  filterOperators: (0, _gridBooleanOperators.getGridBooleanOperators)(),
+  getApplyQuickFilterFn: undefined
 });
 exports.GRID_BOOLEAN_COL_DEF = GRID_BOOLEAN_COL_DEF;

package/node/colDef/gridCheckboxSelectionColDef.js

@@ -35,6 +35,7 @@ const GRID_CHECKBOX_SELECTION_COL_DEF = (0, _extends2.default)({}, _gridBooleanC
   disableColumnMenu: true,
   disableReorder: true,
   disableExport: true,
+  getApplyQuickFilterFn: undefined,
   valueGetter: params => {
     const selectionLookup = (0, _gridSelectionSelector.selectedIdsLookupSelector)(params.api.state, params.api.instanceId);
     return selectionLookup[params.id] !== undefined;

package/node/colDef/gridDateColDef.js

@@ -44,7 +44,8 @@ const GRID_DATE_COL_DEF = (0, _extends2.default)({}, _gridStringColDef.GRID_STRI
   sortComparator: _gridSortingUtils.gridDateComparator,
   valueFormatter: gridDateFormatter,
   filterOperators: (0, _gridDateOperators.getGridDateOperators)(),
-  renderEditCell: _GridEditDateCell.renderEditDateCell
+  renderEditCell: _GridEditDateCell.renderEditDateCell,
+  getApplyQuickFilterFn: undefined
 });
 exports.GRID_DATE_COL_DEF = GRID_DATE_COL_DEF;
 const GRID_DATETIME_COL_DEF = (0, _extends2.default)({}, _gridStringColDef.GRID_STRING_COL_DEF, {
@@ -52,6 +53,7 @@ const GRID_DATETIME_COL_DEF = (0, _extends2.default)({}, _gridStringColDef.GRID_
   sortComparator: _gridSortingUtils.gridDateComparator,
   valueFormatter: gridDateTimeFormatter,
   filterOperators: (0, _gridDateOperators.getGridDateOperators)(true),
-  renderEditCell: _GridEditDateCell.renderEditDateCell
+  renderEditCell: _GridEditDateCell.renderEditDateCell,
+  getApplyQuickFilterFn: undefined
 });
 exports.GRID_DATETIME_COL_DEF = GRID_DATETIME_COL_DEF;

package/node/colDef/gridNumericColDef.js

@@ -26,6 +26,7 @@ const GRID_NUMERIC_COL_DEF = (0, _extends2.default)({}, _gridStringColDef.GRID_S
   valueFormatter: ({
     value
   }) => value && (0, _utils.isNumber)(value) && value.toLocaleString() || value,
-  filterOperators: (0, _gridNumericOperators.getGridNumericOperators)()
+  filterOperators: (0, _gridNumericOperators.getGridNumericOperators)(),
+  getApplyQuickFilterFn: _gridNumericOperators.getGridNumericQuickFilterFn
 });
 exports.GRID_NUMERIC_COL_DEF = GRID_NUMERIC_COL_DEF;

package/node/colDef/gridNumericOperators.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.getGridNumericOperators = exports.getGridNumericColumnOperators = void 0;
+exports.getGridNumericQuickFilterFn = exports.getGridNumericOperators = exports.getGridNumericColumnOperators = void 0;
 
 var _GridFilterInputValue = require("../components/panel/filterPanel/GridFilterInputValue");
 
@@ -19,6 +19,20 @@ const parseNumericValue = value => {
   return Number(value);
 };
 
+const getGridNumericQuickFilterFn = value => {
+  if (value == null || Number.isNaN(value) || value === '') {
+    return null;
+  }
+
+  return ({
+    value: columnValue
+  }) => {
+    return parseNumericValue(columnValue) === parseNumericValue(value);
+  };
+};
+
+exports.getGridNumericQuickFilterFn = getGridNumericQuickFilterFn;
+
 const getGridNumericOperators = () => [{
   label: '=',
   value: '=',

package/node/colDef/gridSingleSelectColDef.js

@@ -18,6 +18,7 @@ var _gridSingleSelectOperators = require("./gridSingleSelectOperators");
 const GRID_SINGLE_SELECT_COL_DEF = (0, _extends2.default)({}, _gridStringColDef.GRID_STRING_COL_DEF, {
   type: 'singleSelect',
   renderEditCell: _GridEditSingleSelectCell.renderEditSingleSelectCell,
-  filterOperators: (0, _gridSingleSelectOperators.getGridSingleSelectOperators)()
+  filterOperators: (0, _gridSingleSelectOperators.getGridSingleSelectOperators)(),
+  getApplyQuickFilterFn: _gridSingleSelectOperators.getGridSingleSelectQuickFilterFn
 });
 exports.GRID_SINGLE_SELECT_COL_DEF = GRID_SINGLE_SELECT_COL_DEF;

package/node/colDef/gridSingleSelectOperators.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.getGridSingleSelectOperators = void 0;
+exports.getGridSingleSelectQuickFilterFn = exports.getGridSingleSelectOperators = void 0;
 
 var _GridFilterInputSingleSelect = require("../components/panel/filterPanel/GridFilterInputSingleSelect");
 
@@ -17,6 +17,61 @@ const parseObjectValue = value => {
   return value.value;
 };
 
+const getGridSingleSelectQuickFilterFn = (value, column, apiRef) => {
+  if (!value) {
+    return null;
+  }
+
+  const {
+    valueOptions,
+    valueFormatter,
+    field
+  } = column;
+  const potentialValues = [parseObjectValue(value).toString()];
+  const iterableColumnValues = typeof valueOptions === 'function' ? valueOptions({
+    field
+  }) : valueOptions || [];
+
+  if (iterableColumnValues) {
+    iterableColumnValues.forEach(option => {
+      // for each valueOption, check if the formatted value
+      let optionValue;
+      let optionLabel;
+
+      if (typeof option === 'object') {
+        optionValue = option.value;
+        optionLabel = option.label;
+      } else {
+        optionValue = option;
+
+        if (valueFormatter) {
+          optionLabel = valueFormatter({
+            value: option,
+            field,
+            api: apiRef.current
+          });
+        } else {
+          optionLabel = option;
+        }
+      }
+
+      if (optionLabel.slice(0, value.length).toLowerCase() === value.toLowerCase()) {
+        if (!potentialValues.includes(optionValue)) {
+          potentialValues.push(optionValue.toString());
+        }
+      }
+    });
+  }
+
+  return ({
+    value: columnValue
+  }) => {
+    return columnValue != null ? potentialValues.includes(parseObjectValue(columnValue).toString()) : false;
+  };
+};
+
+exports.getGridSingleSelectQuickFilterFn = getGridSingleSelectQuickFilterFn;
+
 const getGridSingleSelectOperators = () => [{
   value: 'is',
   getApplyFilterFn: filterItem => {

package/node/colDef/gridStringColDef.js

@@ -27,6 +27,7 @@ const GRID_STRING_COL_DEF = {
   type: 'string',
   align: 'left',
   filterOperators: (0, _gridStringOperators.getGridStringOperators)(),
-  renderEditCell: _GridEditInputCell.renderEditInputCell
+  renderEditCell: _GridEditInputCell.renderEditInputCell,
+  getApplyQuickFilterFn: _gridStringOperators.getGridStringQuickFilterFn
 };
 exports.GRID_STRING_COL_DEF = GRID_STRING_COL_DEF;

package/node/colDef/gridStringOperators.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.getGridStringOperators = void 0;
+exports.getGridStringQuickFilterFn = exports.getGridStringOperators = void 0;
 
 var _GridFilterInputValue = require("../components/panel/filterPanel/GridFilterInputValue");
 
@@ -11,6 +11,21 @@ var _utils = require("../utils/utils");
 
 var _GridFilterInputMultipleValue = require("../components/panel/filterPanel/GridFilterInputMultipleValue");
 
+const getGridStringQuickFilterFn = value => {
+  if (!value) {
+    return null;
+  }
+
+  const filterRegex = new RegExp((0, _utils.escapeRegExp)(value), 'i');
+  return ({
+    value: columnValue
+  }) => {
+    return columnValue != null ? filterRegex.test(columnValue.toString()) : false;
+  };
+};
+
+exports.getGridStringQuickFilterFn = getGridStringQuickFilterFn;
+
 const getGridStringOperators = () => [{
   value: 'contains',
   getApplyFilterFn: filterItem => {

package/node/components/GridFooter.js

@@ -11,6 +11,8 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 
 var React = _interopRequireWildcard(require("react"));
 
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
 var _useGridSelector = require("../hooks/utils/useGridSelector");
 
 var _gridRowsSelector = require("../hooks/features/rows/gridRowsSelector");
@@ -57,4 +59,11 @@ const GridFooter = /*#__PURE__*/React.forwardRef(function GridFooter(props, ref)
     children: [selectedRowCountElement, rowCountElement, paginationElement]
   }));
 });
-exports.GridFooter = GridFooter;
+exports.GridFooter = GridFooter;
+process.env.NODE_ENV !== "production" ? GridFooter.propTypes = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // | To update them edit the TypeScript types and run "yarn proptypes"  |
+  // ----------------------------------------------------------------------
+  sx: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object, _propTypes.default.bool])), _propTypes.default.func, _propTypes.default.object])
+} : void 0;

package/node/components/GridRow.js

@@ -19,8 +19,6 @@ var _clsx = _interopRequireDefault(require("clsx"));
 
 var _material = require("@mui/material");
 
-var _events = require("../models/events");
-
 var _gridEditRowModel = require("../models/gridEditRowModel");
 
 var _useGridApiContext = require("../hooks/utils/useGridApiContext");
@@ -41,6 +39,8 @@ var _gridCheckboxSelectionColDef = require("../colDef/gridCheckboxSelectionColDe
 
 var _gridActionsColDef = require("../colDef/gridActionsColDef");
 
+var _gridDetailPanelToggleField = require("../constants/gridDetailPanelToggleField");
+
 var _jsxRuntime = require("react/jsx-runtime");
 
 const _excluded = ["selected", "rowId", "row", "index", "style", "rowHeight", "className", "visibleColumns", "renderedColumns", "containerWidth", "firstColumnToRender", "lastColumnToRender", "cellFocus", "cellTabIndex", "editRowsState", "isLastVisible", "onClick", "onDoubleClick", "onMouseEnter", "onMouseLeave"];
@@ -87,6 +87,7 @@ function GridRow(props) {
   const {
     selected,
     rowId,
+    row,
     index,
     style: styleProp,
     rowHeight,
@@ -157,7 +158,12 @@ function GridRow(props) {
       } // User opened a detail panel
 
 
-      if (field === '__detail_panel_toggle__') {
+      if (field === _gridDetailPanelToggleField.GRID_DETAIL_PANEL_TOGGLE_FIELD) {
+        return;
+      } // User reorders a row
+
+
+      if (field === '__reorder__') {
         return;
       } // User is editing a cell
 
@@ -174,7 +180,7 @@ function GridRow(props) {
       }
     }
 
-    publish(_events.GridEvents.rowClick, onClick)(event);
+    publish('rowClick', onClick)(event);
   }, [apiRef, onClick, publish, rowId]);
   const style = (0, _extends2.default)({}, styleProp, {
     maxHeight: rowHeight,
@@ -198,7 +204,8 @@ function GridRow(props) {
     const indexRelativeToCurrentPage = index - currentPage.range.firstRowIndex;
     const rowParams = (0, _extends2.default)({}, apiRef.current.getRowParams(rowId), {
       isFirstVisible: indexRelativeToCurrentPage === 0,
-      isLastVisible: indexRelativeToCurrentPage === currentPage.rows.length - 1
+      isLastVisible: indexRelativeToCurrentPage === currentPage.rows.length - 1,
+      indexRelativeToCurrentPage
     });
     rowClassName = rootProps.getRowClassName(rowParams);
   }
@@ -206,8 +213,6 @@ function GridRow(props) {
   const cells = [];
 
   for (let i = 0; i < renderedColumns.length; i += 1) {
-    var _rootProps$components;
-
     const column = renderedColumns[i];
     const indexRelativeToAllColumns = firstColumnToRender + i;
     const isLastColumn = indexRelativeToAllColumns === visibleColumns.length - 1;
@@ -236,7 +241,16 @@ function GridRow(props) {
     if (editCellState != null && column.renderEditCell) {
       var _rootProps$classes2;
 
-      const params = (0, _extends2.default)({}, cellParams, editCellState, {
+      let updatedRow = row;
+
+      if (apiRef.current.unstable_getRowWithUpdatedValues) {
+        // Only the new editing API has this method
+        updatedRow = apiRef.current.unstable_getRowWithUpdatedValues(rowId, column.field);
+      }
+
+      const params = (0, _extends2.default)({}, cellParams, {
+        row: updatedRow
+      }, editCellState, {
         api: apiRef.current
       });
       content = column.renderEditCell(params); // TODO move to GridCell
@@ -251,24 +265,35 @@ function GridRow(props) {
 
     const hasFocus = cellFocus !== null && cellFocus.id === rowId && cellFocus.field === column.field;
     const tabIndex = cellTabIndex !== null && cellTabIndex.id === rowId && cellTabIndex.field === column.field && cellParams.cellMode === 'view' ? 0 : -1;
-    cells.push( /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.components.Cell, (0, _extends2.default)({
-      value: cellParams.value,
-      field: column.field,
-      width: column.computedWidth,
-      rowId: rowId,
-      height: rowHeight,
-      showRightBorder: showRightBorder,
-      formattedValue: cellParams.formattedValue,
-      align: column.align || 'left',
-      cellMode: cellParams.cellMode,
-      colIndex: indexRelativeToAllColumns,
-      isEditable: cellParams.isEditable,
-      hasFocus: hasFocus,
-      tabIndex: tabIndex,
-      className: (0, _clsx.default)(classNames)
-    }, (_rootProps$components = rootProps.componentsProps) == null ? void 0 : _rootProps$components.cell, {
-      children: content
-    }), column.field));
+    const cellColSpanInfo = apiRef.current.unstable_getCellColSpanInfo(rowId, indexRelativeToAllColumns);
+
+    if (cellColSpanInfo && !cellColSpanInfo.spannedByColSpan) {
+      var _rootProps$components;
+
+      const {
+        colSpan,
+        width
+      } = cellColSpanInfo.cellProps;
+      cells.push( /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.components.Cell, (0, _extends2.default)({
+        value: cellParams.value,
+        field: column.field,
+        width: width,
+        rowId: rowId,
+        height: rowHeight,
+        showRightBorder: showRightBorder,
+        formattedValue: cellParams.formattedValue,
+        align: column.align || 'left',
+        cellMode: cellParams.cellMode,
+        colIndex: indexRelativeToAllColumns,
+        isEditable: cellParams.isEditable,
+        hasFocus: hasFocus,
+        tabIndex: tabIndex,
+        className: (0, _clsx.default)(classNames),
+        colSpan: colSpan
+      }, (_rootProps$components = rootProps.componentsProps) == null ? void 0 : _rootProps$components.cell, {
+        children: content
+      }), column.field));
+    }
   }
 
   const emptyCellWidth = containerWidth - columnsTotalWidth;
@@ -281,9 +306,9 @@ function GridRow(props) {
     "aria-selected": selected,
     style: style,
     onClick: publishClick,
-    onDoubleClick: publish(_events.GridEvents.rowDoubleClick, onDoubleClick),
-    onMouseEnter: publish(_events.GridEvents.rowMouseEnter, onMouseEnter),
-    onMouseLeave: publish(_events.GridEvents.rowMouseLeave, onMouseLeave)
+    onDoubleClick: publish('rowDoubleClick', onDoubleClick),
+    onMouseEnter: publish('rowMouseEnter', onMouseEnter),
+    onMouseLeave: publish('rowMouseLeave', onMouseLeave)
   }, other, {
     children: [cells, emptyCellWidth > 0 && /*#__PURE__*/(0, _jsxRuntime.jsx)(EmptyCell, {
       width: emptyCellWidth,
@@ -302,6 +327,11 @@ process.env.NODE_ENV !== "production" ? GridRow.propTypes = {
   containerWidth: _propTypes.default.number.isRequired,
   editRowsState: _propTypes.default.object.isRequired,
   firstColumnToRender: _propTypes.default.number.isRequired,
+
+  /**
+   * Index of the row in the whole sorted and filtered dataset.
+   * If some rows above have expanded children, this index also take those children into account.
+   */
   index: _propTypes.default.number.isRequired,
   isLastVisible: _propTypes.default.bool,
   lastColumnToRender: _propTypes.default.number.isRequired,

package/node/components/GridRowCount.js

@@ -89,5 +89,6 @@ process.env.NODE_ENV !== "production" ? GridRowCount.propTypes = {
   // | To update them edit the TypeScript types and run "yarn proptypes"  |
   // ----------------------------------------------------------------------
   rowCount: _propTypes.default.number.isRequired,
+  sx: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object, _propTypes.default.bool])), _propTypes.default.func, _propTypes.default.object]),
   visibleRowCount: _propTypes.default.number.isRequired
 } : void 0;

package/node/components/GridScrollArea.js

@@ -19,8 +19,6 @@ var _material = require("@mui/material");
 
 var _styles = require("@mui/material/styles");
 
-var _events = require("../models/events");
-
 var _useGridApiEventHandler = require("../hooks/utils/useGridApiEventHandler");
 
 var _useGridApiContext = require("../hooks/utils/useGridApiContext");
@@ -125,9 +123,9 @@ function GridScrollAreaRaw(props) {
   const toggleDragging = React.useCallback(() => {
     setDragging(prevDragging => !prevDragging);
   }, []);
-  (0, _useGridApiEventHandler.useGridApiEventHandler)(apiRef, _events.GridEvents.rowsScroll, handleScrolling);
-  (0, _useGridApiEventHandler.useGridApiEventHandler)(apiRef, _events.GridEvents.columnHeaderDragStart, toggleDragging);
-  (0, _useGridApiEventHandler.useGridApiEventHandler)(apiRef, _events.GridEvents.columnHeaderDragEnd, toggleDragging);
+  (0, _useGridApiEventHandler.useGridApiEventHandler)(apiRef, 'rowsScroll', handleScrolling);
+  (0, _useGridApiEventHandler.useGridApiEventHandler)(apiRef, 'columnHeaderDragStart', toggleDragging);
+  (0, _useGridApiEventHandler.useGridApiEventHandler)(apiRef, 'columnHeaderDragEnd', toggleDragging);
   return dragging ? /*#__PURE__*/(0, _jsxRuntime.jsx)(GridScrollAreaRawRoot, {
     ref: rootRef,
     className: (0, _clsx.default)(classes.root),

package/node/components/GridSelectedRowCount.js

@@ -90,5 +90,6 @@ process.env.NODE_ENV !== "production" ? GridSelectedRowCount.propTypes = {
   // | These PropTypes are generated from the TypeScript type definitions |
   // | To update them edit the TypeScript types and run "yarn proptypes"  |
   // ----------------------------------------------------------------------
-  selectedRowCount: _propTypes.default.number.isRequired
+  selectedRowCount: _propTypes.default.number.isRequired,
+  sx: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object, _propTypes.default.bool])), _propTypes.default.func, _propTypes.default.object])
 } : void 0;

package/node/components/base/GridBody.js

@@ -11,8 +11,6 @@ var React = _interopRequireWildcard(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _events = require("../../models/events");
-
 var _useGridApiContext = require("../../hooks/utils/useGridApiContext");
 
 var _GridMainContainer = require("../containers/GridMainContainer");
@@ -68,7 +66,7 @@ function GridBody(props) {
   apiRef.current.renderingZoneRef = renderingZoneRef; // TODO remove, nobody should have access to internal parts of the virtualization
 
   const handleResize = React.useCallback(size => {
-    apiRef.current.publishEvent(_events.GridEvents.resize, size);
+    apiRef.current.publishEvent('resize', size);
   }, [apiRef]);
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_GridMainContainer.GridMainContainer, {
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_GridOverlays.GridOverlays, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(ColumnHeadersComponent, {

package/node/components/base/GridOverlays.js

@@ -25,8 +25,6 @@ var _useGridRootProps = require("../../hooks/utils/useGridRootProps");
 
 var _densitySelector = require("../../hooks/features/density/densitySelector");
 
-var _events = require("../../models/events");
-
 var _jsxRuntime = require("react/jsx-runtime");
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
@@ -50,7 +48,7 @@ function GridOverlayWrapper(props) {
     setViewportInnerSize((_apiRef$current$getRo3 = (_apiRef$current$getRo4 = apiRef.current.getRootDimensions()) == null ? void 0 : _apiRef$current$getRo4.viewportInnerSize) != null ? _apiRef$current$getRo3 : null);
   }, [apiRef]);
   (0, _utils.unstable_useEnhancedEffect)(() => {
-    return apiRef.current.subscribeEvent(_events.GridEvents.viewportInnerSizeChange, handleViewportSizeChange);
+    return apiRef.current.subscribeEvent('viewportInnerSizeChange', handleViewportSizeChange);
   }, [apiRef, handleViewportSizeChange]);
   let height = (_viewportInnerSize$he = viewportInnerSize == null ? void 0 : viewportInnerSize.height) != null ? _viewportInnerSize$he : 0;
 
@@ -78,8 +76,9 @@ function GridOverlays() {
   const rootProps = (0, _useGridRootProps.useGridRootProps)();
   const totalRowCount = (0, _useGridSelector.useGridSelector)(apiRef, _gridRowsSelector.gridRowCountSelector);
   const visibleRowCount = (0, _useGridSelector.useGridSelector)(apiRef, _gridFilterSelector.gridVisibleRowCountSelector);
-  const showNoRowsOverlay = !rootProps.loading && totalRowCount === 0;
-  const showNoResultsOverlay = !rootProps.loading && totalRowCount > 0 && visibleRowCount === 0;
+  const loading = (0, _useGridSelector.useGridSelector)(apiRef, _gridRowsSelector.gridRowsLoadingSelector);
+  const showNoRowsOverlay = !loading && totalRowCount === 0;
+  const showNoResultsOverlay = !loading && totalRowCount > 0 && visibleRowCount === 0;
   let overlay = null;
 
   if (showNoRowsOverlay) {