@mui/x-data-grid 7.0.0-alpha.7 → 7.0.0-alpha.9

package/legacy/hooks/features/dimensions/useGridDimensions.js

@@ -1,119 +1,68 @@
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
-import { unstable_debounce as debounce, unstable_ownerDocument as ownerDocument, unstable_useEnhancedEffect as useEnhancedEffect, unstable_ownerWindow as ownerWindow } from '@mui/utils';
+import { unstable_debounce as debounce, unstable_ownerDocument as ownerDocument, unstable_useEnhancedEffect as useEnhancedEffect, unstable_useEventCallback as useEventCallback, unstable_ownerWindow as ownerWindow } from '@mui/utils';
 import { useGridApiEventHandler, useGridApiOptionHandler } from '../../utils/useGridApiEventHandler';
 import { useGridApiMethod } from '../../utils/useGridApiMethod';
 import { useGridLogger } from '../../utils/useGridLogger';
-import { gridColumnsTotalWidthSelector } from '../columns';
+import { gridColumnsTotalWidthSelector, gridVisiblePinnedColumnDefinitionsSelector } from '../columns';
+import { gridDimensionsSelector } from './gridDimensionsSelectors';
 import { gridDensityFactorSelector } from '../density';
+import { gridRenderContextSelector } from '../virtualization';
 import { useGridSelector } from '../../utils';
 import { getVisibleRows } from '../../utils/useGridVisibleRows';
 import { gridRowsMetaSelector } from '../rows/gridRowsMetaSelector';
 import { calculatePinnedRowsHeight } from '../rows/gridRowsUtils';
 import { getTotalHeaderHeight } from '../columns/gridColumnsUtils';
-var isTestEnvironment = process.env.NODE_ENV === 'test';
-var hasScroll = function hasScroll(_ref) {
-  var content = _ref.content,
-    container = _ref.container,
-    scrollBarSize = _ref.scrollBarSize;
-  var hasScrollXIfNoYScrollBar = content.width > container.width;
-  var hasScrollYIfNoXScrollBar = content.height > container.height;
-  var hasScrollX = false;
-  var hasScrollY = false;
-  if (hasScrollXIfNoYScrollBar || hasScrollYIfNoXScrollBar) {
-    hasScrollX = hasScrollXIfNoYScrollBar;
-    hasScrollY = content.height + (hasScrollX ? scrollBarSize : 0) > container.height;
-
-    // We recalculate the scroll x to consider the size of the y scrollbar.
-    if (hasScrollY) {
-      hasScrollX = content.width + scrollBarSize > container.width;
-    }
-  }
-  return {
-    hasScrollX: hasScrollX,
-    hasScrollY: hasScrollY
-  };
+var EMPTY_SIZE = {
+  width: 0,
+  height: 0
+};
+var EMPTY_DIMENSIONS = {
+  isReady: false,
+  root: EMPTY_SIZE,
+  viewportOuterSize: EMPTY_SIZE,
+  viewportInnerSize: EMPTY_SIZE,
+  contentSize: EMPTY_SIZE,
+  minimumSize: EMPTY_SIZE,
+  hasScrollX: false,
+  hasScrollY: false,
+  scrollbarSize: 0,
+  headerHeight: 0,
+  rowWidth: 0,
+  rowHeight: 0,
+  columnsTotalWidth: 0,
+  leftPinnedWidth: 0,
+  rightPinnedWidth: 0,
+  headersTotalHeight: 0,
+  topContainerHeight: 0,
+  bottomContainerHeight: 0
+};
+export var dimensionsStateInitializer = function dimensionsStateInitializer(state) {
+  var dimensions = EMPTY_DIMENSIONS;
+  return _extends({}, state, {
+    dimensions: dimensions
+  });
 };
 export function useGridDimensions(apiRef, props) {
   var logger = useGridLogger(apiRef, 'useResizeContainer');
   var errorShown = React.useRef(false);
-  var rootDimensionsRef = React.useRef(null);
-  var fullDimensionsRef = React.useRef(null);
+  var rootDimensionsRef = React.useRef(EMPTY_SIZE);
   var rowsMeta = useGridSelector(apiRef, gridRowsMetaSelector);
+  var pinnedColumns = useGridSelector(apiRef, gridVisiblePinnedColumnDefinitionsSelector);
   var densityFactor = useGridSelector(apiRef, gridDensityFactorSelector);
   var rowHeight = Math.floor(props.rowHeight * densityFactor);
-  var totalHeaderHeight = getTotalHeaderHeight(apiRef, props.columnHeaderHeight);
-  var updateGridDimensionsRef = React.useCallback(function () {
-    var _apiRef$current$rootE;
-    var rootElement = (_apiRef$current$rootE = apiRef.current.rootElementRef) == null ? void 0 : _apiRef$current$rootE.current;
-    var columnsTotalWidth = gridColumnsTotalWidthSelector(apiRef);
-    var pinnedRowsHeight = calculatePinnedRowsHeight(apiRef);
-    if (!rootDimensionsRef.current) {
-      return;
-    }
-    var scrollBarSize;
-    if (props.scrollbarSize != null) {
-      scrollBarSize = props.scrollbarSize;
-    } else if (!columnsTotalWidth || !rootElement) {
-      scrollBarSize = 0;
-    } else {
-      var doc = ownerDocument(rootElement);
-      var scrollDiv = doc.createElement('div');
-      scrollDiv.style.width = '99px';
-      scrollDiv.style.height = '99px';
-      scrollDiv.style.position = 'absolute';
-      scrollDiv.style.overflow = 'scroll';
-      scrollDiv.className = 'scrollDiv';
-      rootElement.appendChild(scrollDiv);
-      scrollBarSize = scrollDiv.offsetWidth - scrollDiv.clientWidth;
-      rootElement.removeChild(scrollDiv);
-    }
-    var viewportOuterSize;
-    var hasScrollX;
-    var hasScrollY;
-    if (props.autoHeight) {
-      hasScrollY = false;
-      hasScrollX = Math.round(columnsTotalWidth) > Math.round(rootDimensionsRef.current.width);
-      viewportOuterSize = {
-        width: rootDimensionsRef.current.width,
-        height: rowsMeta.currentPageTotalHeight + (hasScrollX ? scrollBarSize : 0)
-      };
-    } else {
-      viewportOuterSize = {
-        width: rootDimensionsRef.current.width,
-        height: Math.max(rootDimensionsRef.current.height - totalHeaderHeight, 0)
-      };
-      var scrollInformation = hasScroll({
-        content: {
-          width: Math.round(columnsTotalWidth),
-          height: rowsMeta.currentPageTotalHeight
-        },
-        container: {
-          width: Math.round(viewportOuterSize.width),
-          height: viewportOuterSize.height - pinnedRowsHeight.top - pinnedRowsHeight.bottom
-        },
-        scrollBarSize: scrollBarSize
-      });
-      hasScrollY = scrollInformation.hasScrollY;
-      hasScrollX = scrollInformation.hasScrollX;
-    }
-    var viewportInnerSize = {
-      width: viewportOuterSize.width - (hasScrollY ? scrollBarSize : 0),
-      height: viewportOuterSize.height - (hasScrollX ? scrollBarSize : 0)
-    };
-    var newFullDimensions = {
-      viewportOuterSize: viewportOuterSize,
-      viewportInnerSize: viewportInnerSize,
-      hasScrollX: hasScrollX,
-      hasScrollY: hasScrollY,
-      scrollBarSize: scrollBarSize
-    };
-    var prevDimensions = fullDimensionsRef.current;
-    fullDimensionsRef.current = newFullDimensions;
-    if (newFullDimensions.viewportInnerSize.width !== (prevDimensions == null ? void 0 : prevDimensions.viewportInnerSize.width) || newFullDimensions.viewportInnerSize.height !== (prevDimensions == null ? void 0 : prevDimensions.viewportInnerSize.height)) {
-      apiRef.current.publishEvent('viewportInnerSizeChange', newFullDimensions.viewportInnerSize);
-    }
-  }, [apiRef, props.scrollbarSize, props.autoHeight, rowsMeta.currentPageTotalHeight, totalHeaderHeight]);
+  var headerHeight = Math.floor(props.columnHeaderHeight * densityFactor);
+  var columnsTotalWidth = roundToDecimalPlaces(gridColumnsTotalWidthSelector(apiRef), 6);
+  // XXX: The `props as any` below is not resilient to change.
+  var hasHeaderFilters = Boolean(props.headerFilters);
+  var headersTotalHeight = getTotalHeaderHeight(apiRef, props.columnHeaderHeight) + Number(hasHeaderFilters) * headerHeight;
+  var leftPinnedWidth = pinnedColumns.left.reduce(function (w, col) {
+    return w + col.computedWidth;
+  }, 0);
+  var rightPinnedWidth = pinnedColumns.right.reduce(function (w, col) {
+    return w + col.computedWidth;
+  }, 0);
   var _React$useState = React.useState(),
     _React$useState2 = _slicedToArray(_React$useState, 2),
     savedSize = _React$useState2[0],
@@ -122,23 +71,39 @@ export function useGridDimensions(apiRef, props) {
     return debounce(setSavedSize, 60);
   }, []);
   var previousSize = React.useRef();
-  useEnhancedEffect(function () {
-    if (savedSize) {
-      updateGridDimensionsRef();
-      apiRef.current.publishEvent('debouncedResize', rootDimensionsRef.current);
-    }
-  }, [apiRef, savedSize, updateGridDimensionsRef]);
-
-  // This is the function called by apiRef.current.resize()
+  var getRootDimensions = function getRootDimensions() {
+    return apiRef.current.state.dimensions;
+  };
+  var setDimensions = useEventCallback(function (dimensions) {
+    apiRef.current.setState(function (state) {
+      return _extends({}, state, {
+        dimensions: dimensions
+      });
+    });
+  });
   var resize = React.useCallback(function () {
-    apiRef.current.computeSizeAndPublishResizeEvent();
+    var _previousSize$current, _previousSize$current2;
+    var element = apiRef.current.mainElementRef.current;
+    if (!element) {
+      return;
+    }
+    var computedStyle = ownerWindow(element).getComputedStyle(element);
+    var height = parseFloat(computedStyle.height) || 0;
+    var width = parseFloat(computedStyle.width) || 0;
+    var hasHeightChanged = height !== ((_previousSize$current = previousSize.current) == null ? void 0 : _previousSize$current.height);
+    var hasWidthChanged = width !== ((_previousSize$current2 = previousSize.current) == null ? void 0 : _previousSize$current2.width);
+    if (!previousSize.current || hasHeightChanged || hasWidthChanged) {
+      var size = {
+        width: width,
+        height: height
+      };
+      apiRef.current.publishEvent('resize', size);
+      previousSize.current = size;
+    }
   }, [apiRef]);
-  var getRootDimensions = React.useCallback(function () {
-    return fullDimensionsRef.current;
-  }, []);
   var getViewportPageSize = React.useCallback(function () {
-    var dimensions = apiRef.current.getRootDimensions();
-    if (!dimensions) {
+    var dimensions = gridDimensionsSelector(apiRef.current.state);
+    if (!dimensions.isReady) {
       return 0;
     }
     var currentPage = getVisibleRows(apiRef, {
@@ -149,45 +114,138 @@ export function useGridDimensions(apiRef, props) {
     // TODO: Use a combination of scrollTop, dimensions.viewportInnerSize.height and rowsMeta.possitions
     // to find out the maximum number of rows that can fit in the visible part of the grid
     if (props.getRowHeight) {
-      var renderContext = apiRef.current.getRenderContext();
+      var renderContext = gridRenderContextSelector(apiRef);
       var viewportPageSize = renderContext.lastRowIndex - renderContext.firstRowIndex;
       return Math.min(viewportPageSize - 1, currentPage.rows.length);
     }
     var maximumPageSizeWithoutScrollBar = Math.floor(dimensions.viewportInnerSize.height / rowHeight);
     return Math.min(maximumPageSizeWithoutScrollBar, currentPage.rows.length);
   }, [apiRef, props.pagination, props.paginationMode, props.getRowHeight, rowHeight]);
-  var computeSizeAndPublishResizeEvent = React.useCallback(function () {
-    var _apiRef$current$mainE, _previousSize$current, _previousSize$current2;
-    var mainEl = (_apiRef$current$mainE = apiRef.current.mainElementRef) == null ? void 0 : _apiRef$current$mainE.current;
-    if (!mainEl) {
-      return;
-    }
-    var win = ownerWindow(mainEl);
-    var computedStyle = win.getComputedStyle(mainEl);
-    var height = parseFloat(computedStyle.height) || 0;
-    var width = parseFloat(computedStyle.width) || 0;
-    var hasHeightChanged = height !== ((_previousSize$current = previousSize.current) == null ? void 0 : _previousSize$current.height);
-    var hasWidthChanged = width !== ((_previousSize$current2 = previousSize.current) == null ? void 0 : _previousSize$current2.width);
-    if (!previousSize.current || hasHeightChanged || hasWidthChanged) {
-      var size = {
-        width: width,
-        height: height
+  var updateDimensions = React.useCallback(function () {
+    var _apiRef$current$updat, _apiRef$current;
+    var rootElement = apiRef.current.rootElementRef.current;
+    var pinnedRowsHeight = calculatePinnedRowsHeight(apiRef);
+    var scrollbarSize = measureScrollbarSize(rootElement, columnsTotalWidth, props.scrollbarSize);
+    var topContainerHeight = headersTotalHeight + pinnedRowsHeight.top;
+    var bottomContainerHeight = pinnedRowsHeight.bottom;
+    var contentSize = {
+      width: columnsTotalWidth,
+      height: rowsMeta.currentPageTotalHeight
+    };
+    var viewportOuterSize;
+    var viewportInnerSize;
+    var hasScrollX = false;
+    var hasScrollY = false;
+    if (props.autoHeight) {
+      hasScrollY = false;
+      hasScrollX = Math.round(columnsTotalWidth) > Math.round(rootDimensionsRef.current.width);
+      viewportOuterSize = {
+        width: rootDimensionsRef.current.width,
+        height: topContainerHeight + bottomContainerHeight + contentSize.height
       };
-      apiRef.current.publishEvent('resize', size);
-      previousSize.current = size;
+      viewportInnerSize = {
+        width: Math.max(0, viewportOuterSize.width - (hasScrollY ? scrollbarSize : 0)),
+        height: Math.max(0, viewportOuterSize.height - (hasScrollX ? scrollbarSize : 0))
+      };
+    } else {
+      viewportOuterSize = {
+        width: rootDimensionsRef.current.width,
+        height: rootDimensionsRef.current.height
+      };
+      viewportInnerSize = {
+        width: Math.max(0, viewportOuterSize.width - leftPinnedWidth - rightPinnedWidth),
+        height: Math.max(0, viewportOuterSize.height - topContainerHeight - bottomContainerHeight)
+      };
+      var content = contentSize;
+      var container = viewportInnerSize;
+      var hasScrollXIfNoYScrollBar = content.width > container.width;
+      var hasScrollYIfNoXScrollBar = content.height > container.height;
+      if (hasScrollXIfNoYScrollBar || hasScrollYIfNoXScrollBar) {
+        hasScrollY = hasScrollYIfNoXScrollBar;
+        hasScrollX = content.width + (hasScrollY ? scrollbarSize : 0) > container.width;
+
+        // We recalculate the scroll y to consider the size of the x scrollbar.
+        if (hasScrollX) {
+          hasScrollY = content.height + scrollbarSize > container.height;
+        }
+      }
+      if (hasScrollY) {
+        viewportInnerSize.width -= scrollbarSize;
+      }
+      if (hasScrollX) {
+        viewportInnerSize.height -= scrollbarSize;
+      }
     }
-  }, [apiRef]);
-  var dimensionsApi = {
+    var rowWidth = Math.max(viewportOuterSize.width, columnsTotalWidth + (hasScrollY ? scrollbarSize : 0));
+    var minimumSize = {
+      width: contentSize.width,
+      height: topContainerHeight + contentSize.height + bottomContainerHeight
+    };
+    var newDimensions = {
+      isReady: true,
+      root: rootDimensionsRef.current,
+      viewportOuterSize: viewportOuterSize,
+      viewportInnerSize: viewportInnerSize,
+      contentSize: contentSize,
+      minimumSize: minimumSize,
+      hasScrollX: hasScrollX,
+      hasScrollY: hasScrollY,
+      scrollbarSize: scrollbarSize,
+      headerHeight: headerHeight,
+      rowWidth: rowWidth,
+      rowHeight: rowHeight,
+      columnsTotalWidth: columnsTotalWidth,
+      leftPinnedWidth: leftPinnedWidth,
+      rightPinnedWidth: rightPinnedWidth,
+      headersTotalHeight: headersTotalHeight,
+      topContainerHeight: topContainerHeight,
+      bottomContainerHeight: bottomContainerHeight
+    };
+    var prevDimensions = apiRef.current.state.dimensions;
+    setDimensions(newDimensions);
+    if (newDimensions.viewportInnerSize.width !== prevDimensions.viewportInnerSize.width || newDimensions.viewportInnerSize.height !== prevDimensions.viewportInnerSize.height) {
+      apiRef.current.publishEvent('viewportInnerSizeChange', newDimensions.viewportInnerSize);
+    }
+    (_apiRef$current$updat = (_apiRef$current = apiRef.current).updateRenderContext) == null || _apiRef$current$updat.call(_apiRef$current);
+  }, [apiRef, setDimensions, props.scrollbarSize, props.autoHeight, rowsMeta.currentPageTotalHeight, rowHeight, headerHeight, columnsTotalWidth, headersTotalHeight, leftPinnedWidth, rightPinnedWidth]);
+  var apiPublic = {
     resize: resize,
     getRootDimensions: getRootDimensions
   };
-  var dimensionsPrivateApi = {
-    getViewportPageSize: getViewportPageSize,
-    updateGridDimensionsRef: updateGridDimensionsRef,
-    computeSizeAndPublishResizeEvent: computeSizeAndPublishResizeEvent
+  var apiPrivate = {
+    updateDimensions: updateDimensions,
+    getViewportPageSize: getViewportPageSize
   };
-  useGridApiMethod(apiRef, dimensionsApi, 'public');
-  useGridApiMethod(apiRef, dimensionsPrivateApi, 'private');
+  useGridApiMethod(apiRef, apiPublic, 'public');
+  useGridApiMethod(apiRef, apiPrivate, 'private');
+  useEnhancedEffect(function () {
+    if (savedSize) {
+      updateDimensions();
+      apiRef.current.publishEvent('debouncedResize', rootDimensionsRef.current);
+    }
+  }, [apiRef, savedSize, updateDimensions]);
+  var root = apiRef.current.rootElementRef.current;
+  var dimensions = apiRef.current.state.dimensions;
+  useEnhancedEffect(function () {
+    if (!root) {
+      return;
+    }
+    var set = function set(k, v) {
+      return root.style.setProperty(k, v);
+    };
+    set('--DataGrid-width', "".concat(dimensions.viewportOuterSize.width, "px"));
+    set('--DataGrid-hasScrollX', "".concat(Number(dimensions.hasScrollX)));
+    set('--DataGrid-hasScrollY', "".concat(Number(dimensions.hasScrollY)));
+    set('--DataGrid-scrollbarSize', "".concat(dimensions.scrollbarSize, "px"));
+    set('--DataGrid-rowWidth', "".concat(dimensions.rowWidth, "px"));
+    set('--DataGrid-columnsTotalWidth', "".concat(dimensions.columnsTotalWidth, "px"));
+    set('--DataGrid-leftPinnedWidth', "".concat(dimensions.leftPinnedWidth, "px"));
+    set('--DataGrid-rightPinnedWidth', "".concat(dimensions.rightPinnedWidth, "px"));
+    set('--DataGrid-headerHeight', "".concat(dimensions.headerHeight, "px"));
+    set('--DataGrid-headersTotalHeight', "".concat(dimensions.headersTotalHeight, "px"));
+    set('--DataGrid-topContainerHeight', "".concat(dimensions.topContainerHeight, "px"));
+    set('--DataGrid-bottomContainerHeight', "".concat(dimensions.bottomContainerHeight, "px"));
+  }, [root, dimensions]);
   var isFirstSizing = React.useRef(true);
   var handleResize = React.useCallback(function (size) {
     rootDimensionsRef.current = size;
@@ -202,12 +260,6 @@ export function useGridDimensions(apiRef, props) {
       logger.error(['The parent DOM element of the data grid has an empty width.', 'Please make sure that this element has an intrinsic width.', 'The grid displays with a width of 0px.', '', 'More details: https://mui.com/r/x-data-grid-no-dimensions.'].join('\n'));
       errorShown.current = true;
     }
-    if (isTestEnvironment) {
-      // We don't need to debounce the resize for tests.
-      setSavedSize(size);
-      isFirstSizing.current = false;
-      return;
-    }
     if (isFirstSizing.current) {
       // We want to initialize the grid dimensions as soon as possible to avoid flickering
       setSavedSize(size);
@@ -216,12 +268,35 @@ export function useGridDimensions(apiRef, props) {
     }
     debouncedSetSavedSize(size);
   }, [props.autoHeight, debouncedSetSavedSize, logger]);
-  useEnhancedEffect(function () {
-    return updateGridDimensionsRef();
-  }, [updateGridDimensionsRef]);
-  useGridApiOptionHandler(apiRef, 'sortedRowsSet', updateGridDimensionsRef);
-  useGridApiOptionHandler(apiRef, 'paginationModelChange', updateGridDimensionsRef);
-  useGridApiOptionHandler(apiRef, 'columnsChange', updateGridDimensionsRef);
+  useEnhancedEffect(updateDimensions, [updateDimensions]);
+  useGridApiOptionHandler(apiRef, 'sortedRowsSet', updateDimensions);
+  useGridApiOptionHandler(apiRef, 'paginationModelChange', updateDimensions);
+  useGridApiOptionHandler(apiRef, 'columnsChange', updateDimensions);
   useGridApiEventHandler(apiRef, 'resize', handleResize);
   useGridApiOptionHandler(apiRef, 'debouncedResize', props.onResize);
+}
+function measureScrollbarSize(rootElement, columnsTotalWidth, scrollbarSize) {
+  if (scrollbarSize !== undefined) {
+    return scrollbarSize;
+  }
+  if (rootElement === null || columnsTotalWidth === 0) {
+    return 0;
+  }
+  var doc = ownerDocument(rootElement);
+  var scrollDiv = doc.createElement('div');
+  scrollDiv.style.width = '99px';
+  scrollDiv.style.height = '99px';
+  scrollDiv.style.position = 'absolute';
+  scrollDiv.style.overflow = 'scroll';
+  scrollDiv.className = 'scrollDiv';
+  rootElement.appendChild(scrollDiv);
+  var size = scrollDiv.offsetWidth - scrollDiv.clientWidth;
+  rootElement.removeChild(scrollDiv);
+  return size;
+}
+
+// Get rid of floating point imprecision errors
+// https://github.com/mui/mui-x/issues/9550#issuecomment-1619020477
+function roundToDecimalPlaces(value, decimals) {
+  return Math.round(value * Math.pow(10, decimals)) / Math.pow(10, decimals);
 }

package/legacy/hooks/features/editing/useGridCellEditing.js

@@ -18,7 +18,7 @@ import { buildWarning } from '../../../utils/warning';
 import { gridRowsDataRowIdToIdLookupSelector } from '../rows/gridRowsSelector';
 import { deepClone } from '../../../utils/utils';
 import { GridCellEditStartReasons, GridCellEditStopReasons } from '../../../models/params/gridEditCellParams';
-var missingOnProcessRowUpdateErrorWarning = buildWarning(['MUI: A call to `processRowUpdate` threw an error which was not handled because `onProcessRowUpdateError` is missing.', 'To handle the error pass a callback to the `onProcessRowUpdateError` prop, e.g. `<DataGrid onProcessRowUpdateError={(error) => ...} />`.', 'For more detail, see http://mui.com/components/data-grid/editing/#server-side-persistence.'], 'error');
+var missingOnProcessRowUpdateErrorWarning = buildWarning(['MUI X: A call to `processRowUpdate` threw an error which was not handled because `onProcessRowUpdateError` is missing.', 'To handle the error pass a callback to the `onProcessRowUpdateError` prop, e.g. `<DataGrid onProcessRowUpdateError={(error) => ...} />`.', 'For more detail, see https://mui.com/x/react-data-grid/editing/#server-side-persistence.'], 'error');
 export var useGridCellEditing = function useGridCellEditing(apiRef, props) {
   var _React$useState = React.useState({}),
     _React$useState2 = _slicedToArray(_React$useState, 2),
@@ -40,12 +40,12 @@ export var useGridCellEditing = function useGridCellEditing(apiRef, props) {
   var throwIfNotEditable = React.useCallback(function (id, field) {
     var params = apiRef.current.getCellParams(id, field);
     if (!apiRef.current.isCellEditable(params)) {
-      throw new Error("MUI: The cell with id=".concat(id, " and field=").concat(field, " is not editable."));
+      throw new Error("MUI X: The cell with id=".concat(id, " and field=").concat(field, " is not editable."));
     }
   }, [apiRef]);
   var throwIfNotInMode = React.useCallback(function (id, field, mode) {
     if (apiRef.current.getCellMode(id, field) !== mode) {
-      throw new Error("MUI: The cell with id=".concat(id, " and field=").concat(field, " is not in ").concat(mode, " mode."));
+      throw new Error("MUI X: The cell with id=".concat(id, " and field=").concat(field, " is not in ").concat(mode, " mode."));
     }
   }, [apiRef]);
   var handleCellDoubleClick = React.useCallback(function (params, event) {
@@ -299,7 +299,7 @@ export var useGridCellEditing = function useGridCellEditing(apiRef, props) {
                 });
                 if (onProcessRowUpdateError) {
                   onProcessRowUpdateError(errorThrown);
-                } else {
+                } else if (process.env.NODE_ENV !== 'production') {
                   missingOnProcessRowUpdateErrorWarning();
                 }
               };

package/legacy/hooks/features/editing/useGridRowEditing.js

@@ -18,7 +18,7 @@ import { gridRowsDataRowIdToIdLookupSelector } from '../rows/gridRowsSelector';
 import { deepClone } from '../../../utils/utils';
 import { GridRowEditStopReasons, GridRowEditStartReasons } from '../../../models/params/gridRowParams';
 import { GRID_ACTIONS_COLUMN_TYPE } from '../../../colDef';
-var missingOnProcessRowUpdateErrorWarning = buildWarning(['MUI: A call to `processRowUpdate` threw an error which was not handled because `onProcessRowUpdateError` is missing.', 'To handle the error pass a callback to the `onProcessRowUpdateError` prop, e.g. `<DataGrid onProcessRowUpdateError={(error) => ...} />`.', 'For more detail, see http://mui.com/components/data-grid/editing/#server-side-persistence.'], 'error');
+var missingOnProcessRowUpdateErrorWarning = buildWarning(['MUI X: A call to `processRowUpdate` threw an error which was not handled because `onProcessRowUpdateError` is missing.', 'To handle the error pass a callback to the `onProcessRowUpdateError` prop, e.g. `<DataGrid onProcessRowUpdateError={(error) => ...} />`.', 'For more detail, see https://mui.com/x/react-data-grid/editing/#server-side-persistence.'], 'error');
 export var useGridRowEditing = function useGridRowEditing(apiRef, props) {
   var _React$useState = React.useState({}),
     _React$useState2 = _slicedToArray(_React$useState, 2),
@@ -42,12 +42,12 @@ export var useGridRowEditing = function useGridRowEditing(apiRef, props) {
   var throwIfNotEditable = React.useCallback(function (id, field) {
     var params = apiRef.current.getCellParams(id, field);
     if (!apiRef.current.isCellEditable(params)) {
-      throw new Error("MUI: The cell with id=".concat(id, " and field=").concat(field, " is not editable."));
+      throw new Error("MUI X: The cell with id=".concat(id, " and field=").concat(field, " is not editable."));
     }
   }, [apiRef]);
   var throwIfNotInMode = React.useCallback(function (id, mode) {
     if (apiRef.current.getRowMode(id) !== mode) {
-      throw new Error("MUI: The row with id=".concat(id, " is not in ").concat(mode, " mode."));
+      throw new Error("MUI X: The row with id=".concat(id, " is not in ").concat(mode, " mode."));
     }
   }, [apiRef]);
   var handleCellDoubleClick = React.useCallback(function (params, event) {
@@ -378,7 +378,7 @@ export var useGridRowEditing = function useGridRowEditing(apiRef, props) {
         });
         if (onProcessRowUpdateError) {
           onProcessRowUpdateError(errorThrown);
-        } else {
+        } else if (process.env.NODE_ENV !== 'production') {
           missingOnProcessRowUpdateErrorWarning();
         }
       };

package/legacy/hooks/features/export/serializers/csvSerializer.js

@@ -36,7 +36,7 @@ export var serializeCellValue = function serializeCellValue(cellParams, options)
   }
   return sanitizeCellValue(value, delimiterCharacter);
 };
-var objectFormattedValueWarning = buildWarning(['MUI: When the value of a field is an object or a `renderCell` is provided, the CSV export might not display the value correctly.', 'You can provide a `valueFormatter` with a string representation to be used.']);
+var objectFormattedValueWarning = buildWarning(['MUI X: When the value of a field is an object or a `renderCell` is provided, the CSV export might not display the value correctly.', 'You can provide a `valueFormatter` with a string representation to be used.']);
 var CSVRow = /*#__PURE__*/function () {
   function CSVRow(options) {
     _classCallCheck(this, CSVRow);
@@ -116,10 +116,10 @@ export function buildCSV(options) {
   });
   var headerRows = [];
   if (includeColumnGroupsHeaders) {
-    var columnGroupLookup = apiRef.current.unstable_getAllGroupDetails();
+    var columnGroupLookup = apiRef.current.getAllGroupDetails();
     var maxColumnGroupsDepth = 0;
     var columnGroupPathsLookup = filteredColumns.reduce(function (acc, column) {
-      var columnGroupPath = apiRef.current.unstable_getColumnGroupPath(column.field);
+      var columnGroupPath = apiRef.current.getColumnGroupPath(column.field);
       acc[column.field] = columnGroupPath;
       maxColumnGroupsDepth = Math.max(maxColumnGroupsDepth, columnGroupPath.length);
       return acc;

package/legacy/hooks/features/export/useGridPrintExport.js

@@ -234,7 +234,7 @@ export var useGridPrintExport = function useGridPrintExport(apiRef, props) {
               _context.next = 3;
               break;
             }
-            throw new Error('MUI: No grid root element available.');
+            throw new Error('MUI X: No grid root element available.');
           case 3:
             previousGridState.current = apiRef.current.exportState();
             // It appends that the visibility model is not exported, especially if columnVisibility is not controlled

package/legacy/hooks/features/filter/gridFilterUtils.js

@@ -36,9 +36,9 @@ export var cleanFilterItem = function cleanFilterItem(item, apiRef) {
   }
   return cleanItem;
 };
-var filterModelDisableMultiColumnsFilteringWarning = buildWarning(['MUI: The `filterModel` can only contain a single item when the `disableMultipleColumnsFiltering` prop is set to `true`.', 'If you are using the community version of the `DataGrid`, this prop is always `true`.'], 'error');
-var filterModelMissingItemIdWarning = buildWarning('MUI: The `id` field is required on `filterModel.items` when you use multiple filters.', 'error');
-var filterModelMissingItemOperatorWarning = buildWarning('MUI: The `operator` field is required on `filterModel.items`, one or more of your filtering item has no `operator` provided.', 'error');
+var filterModelDisableMultiColumnsFilteringWarning = buildWarning(['MUI X: The `filterModel` can only contain a single item when the `disableMultipleColumnsFiltering` prop is set to `true`.', 'If you are using the community version of the `DataGrid`, this prop is always `true`.'], 'error');
+var filterModelMissingItemIdWarning = buildWarning('MUI X: The `id` field is required on `filterModel.items` when you use multiple filters.', 'error');
+var filterModelMissingItemOperatorWarning = buildWarning('MUI X: The `operator` field is required on `filterModel.items`, one or more of your filtering item has no `operator` provided.', 'error');
 export var sanitizeFilterModel = function sanitizeFilterModel(model, disableMultipleColumnsFiltering, apiRef) {
   var hasSeveralItems = model.items.length > 1;
   var items;
@@ -114,13 +114,13 @@ var getFilterCallbackFromItem = function getFilterCallbackFromItem(filterItem, a
   });
   var filterOperators = column.filterOperators;
   if (!(filterOperators != null && filterOperators.length)) {
-    throw new Error("MUI: No filter operators found for column '".concat(column.field, "'."));
+    throw new Error("MUI X: No filter operators found for column '".concat(column.field, "'."));
   }
   var filterOperator = filterOperators.find(function (operator) {
     return operator.value === newFilterItem.operator;
   });
   if (!filterOperator) {
-    throw new Error("MUI: No filter operator found for column '".concat(column.field, "' and operator value '").concat(newFilterItem.operator, "'."));
+    throw new Error("MUI X: No filter operator found for column '".concat(column.field, "' and operator value '").concat(newFilterItem.operator, "'."));
   }
   var publicApiRef = getPublicApiRef(apiRef);
   var applyFilterOnRow = filterOperator.getApplyFilterFn(newFilterItem, column);

package/legacy/hooks/features/filter/useGridFilter.js

@@ -7,7 +7,7 @@ import { useLazyRef } from '../../utils/useLazyRef';
 import { useGridApiEventHandler } from '../../utils/useGridApiEventHandler';
 import { useGridApiMethod } from '../../utils/useGridApiMethod';
 import { useGridLogger } from '../../utils/useGridLogger';
-import { gridFilterableColumnLookupSelector } from '../columns/gridColumnsSelector';
+import { gridColumnLookupSelector } from '../columns/gridColumnsSelector';
 import { GridPreferencePanelsValue } from '../preferencesPanel/gridPreferencePanelsValue';
 import { getDefaultGridFilterModel } from './gridFilterState';
 import { gridFilterModelSelector } from './gridFilterSelector';
@@ -322,9 +322,9 @@ export var useGridFilter = function useGridFilter(apiRef, props) {
   var handleColumnsChange = React.useCallback(function () {
     logger.debug('onColUpdated - GridColumns changed, applying filters');
     var filterModel = gridFilterModelSelector(apiRef);
-    var filterableColumnsLookup = gridFilterableColumnLookupSelector(apiRef);
+    var columnsLookup = gridColumnLookupSelector(apiRef);
     var newFilterItems = filterModel.items.filter(function (item) {
-      return item.field && filterableColumnsLookup[item.field];
+      return item.field && columnsLookup[item.field];
     });
     if (newFilterItems.length < filterModel.items.length) {
       apiRef.current.setFilterModel(_extends({}, filterModel, {

package/legacy/hooks/features/focus/gridFocusStateSelector.js

@@ -11,9 +11,7 @@ export var gridFocusColumnHeaderSelector = createSelector(gridFocusStateSelector
 export var gridFocusColumnHeaderFilterSelector = createSelector(gridFocusStateSelector, function (focusState) {
   return focusState.columnHeaderFilter;
 });
-
-// eslint-disable-next-line @typescript-eslint/naming-convention
-export var unstable_gridFocusColumnGroupHeaderSelector = createSelector(gridFocusStateSelector, function (focusState) {
+export var gridFocusColumnGroupHeaderSelector = createSelector(gridFocusStateSelector, function (focusState) {
   return focusState.columnGroupHeader;
 });
 export var gridTabIndexStateSelector = function gridTabIndexStateSelector(state) {
@@ -28,8 +26,6 @@ export var gridTabIndexColumnHeaderSelector = createSelector(gridTabIndexStateSe
 export var gridTabIndexColumnHeaderFilterSelector = createSelector(gridTabIndexStateSelector, function (state) {
   return state.columnHeaderFilter;
 });
-
-// eslint-disable-next-line @typescript-eslint/naming-convention
-export var unstable_gridTabIndexColumnGroupHeaderSelector = createSelector(gridTabIndexStateSelector, function (state) {
+export var gridTabIndexColumnGroupHeaderSelector = createSelector(gridTabIndexStateSelector, function (state) {
   return state.columnGroupHeader;
 });

package/legacy/hooks/features/focus/useGridFocus.js

@@ -6,7 +6,7 @@ import { useGridApiMethod } from '../../utils/useGridApiMethod';
 import { useGridLogger } from '../../utils/useGridLogger';
 import { useGridApiEventHandler } from '../../utils/useGridApiEventHandler';
 import { isNavigationKey } from '../../../utils/keyboardUtils';
-import { gridFocusCellSelector, unstable_gridFocusColumnGroupHeaderSelector } from './gridFocusStateSelector';
+import { gridFocusCellSelector, gridFocusColumnGroupHeaderSelector } from './gridFocusStateSelector';
 import { gridVisibleColumnDefinitionsSelector } from '../columns/gridColumnsSelector';
 import { getVisibleRows } from '../../utils/useGridVisibleRows';
 import { clamp } from '../../../utils/utils';
@@ -170,7 +170,7 @@ export var useGridFocus = function useGridFocus(apiRef, props) {
     apiRef.current.forceUpdate();
   }, [apiRef]);
   var getColumnGroupHeaderFocus = React.useCallback(function () {
-    return unstable_gridFocusColumnGroupHeaderSelector(apiRef);
+    return gridFocusColumnGroupHeaderSelector(apiRef);
   }, [apiRef]);
   var moveFocusToRelativeCell = React.useCallback(function (id, field, direction) {
     var columnIndexToFocus = apiRef.current.getColumnIndex(field);
@@ -250,7 +250,7 @@ export var useGridFocus = function useGridFocus(apiRef, props) {
     if (event.target !== event.currentTarget) {
       return;
     }
-    var focusedColumnGroup = unstable_gridFocusColumnGroupHeaderSelector(apiRef);
+    var focusedColumnGroup = gridFocusColumnGroupHeaderSelector(apiRef);
     if (focusedColumnGroup !== null && focusedColumnGroup.depth === depth && fields.includes(focusedColumnGroup.field)) {
       // This group cell has already been focused
       return;