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

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

@@ -1,16 +1,21 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+exports.dimensionsStateInitializer = void 0;
 exports.useGridDimensions = useGridDimensions;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var React = _interopRequireWildcard(require("react"));
 var _utils = require("@mui/utils");
 var _useGridApiEventHandler = require("../../utils/useGridApiEventHandler");
 var _useGridApiMethod = require("../../utils/useGridApiMethod");
 var _useGridLogger = require("../../utils/useGridLogger");
 var _columns = require("../columns");
+var _gridDimensionsSelectors = require("./gridDimensionsSelectors");
 var _density = require("../density");
+var _virtualization = require("../virtualization");
 var _utils2 = require("../../utils");
 var _useGridVisibleRows = require("../../utils/useGridVisibleRows");
 var _gridRowsMetaSelector = require("../rows/gridRowsMetaSelector");
@@ -18,127 +23,83 @@ var _gridRowsUtils = require("../rows/gridRowsUtils");
 var _gridColumnsUtils = require("../columns/gridColumnsUtils");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
-const isTestEnvironment = process.env.NODE_ENV === 'test';
-const hasScroll = ({
-  content,
-  container,
-  scrollBarSize
-}) => {
-  const hasScrollXIfNoYScrollBar = content.width > container.width;
-  const hasScrollYIfNoXScrollBar = content.height > container.height;
-  let hasScrollX = false;
-  let 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,
-    hasScrollY
-  };
+const EMPTY_SIZE = {
+  width: 0,
+  height: 0
 };
+const 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
+};
+const dimensionsStateInitializer = state => {
+  const dimensions = EMPTY_DIMENSIONS;
+  return (0, _extends2.default)({}, state, {
+    dimensions
+  });
+};
+exports.dimensionsStateInitializer = dimensionsStateInitializer;
 function useGridDimensions(apiRef, props) {
   const logger = (0, _useGridLogger.useGridLogger)(apiRef, 'useResizeContainer');
   const errorShown = React.useRef(false);
-  const rootDimensionsRef = React.useRef(null);
-  const fullDimensionsRef = React.useRef(null);
+  const rootDimensionsRef = React.useRef(EMPTY_SIZE);
   const rowsMeta = (0, _utils2.useGridSelector)(apiRef, _gridRowsMetaSelector.gridRowsMetaSelector);
+  const pinnedColumns = (0, _utils2.useGridSelector)(apiRef, _columns.gridVisiblePinnedColumnDefinitionsSelector);
   const densityFactor = (0, _utils2.useGridSelector)(apiRef, _density.gridDensityFactorSelector);
   const rowHeight = Math.floor(props.rowHeight * densityFactor);
-  const totalHeaderHeight = (0, _gridColumnsUtils.getTotalHeaderHeight)(apiRef, props.columnHeaderHeight);
-  const updateGridDimensionsRef = React.useCallback(() => {
-    const rootElement = apiRef.current.rootElementRef?.current;
-    const columnsTotalWidth = (0, _columns.gridColumnsTotalWidthSelector)(apiRef);
-    const pinnedRowsHeight = (0, _gridRowsUtils.calculatePinnedRowsHeight)(apiRef);
-    if (!rootDimensionsRef.current) {
-      return;
-    }
-    let scrollBarSize;
-    if (props.scrollbarSize != null) {
-      scrollBarSize = props.scrollbarSize;
-    } else if (!columnsTotalWidth || !rootElement) {
-      scrollBarSize = 0;
-    } else {
-      const doc = (0, _utils.unstable_ownerDocument)(rootElement);
-      const 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);
-    }
-    let viewportOuterSize;
-    let hasScrollX;
-    let 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)
-      };
-      const scrollInformation = hasScroll({
-        content: {
-          width: Math.round(columnsTotalWidth),
-          height: rowsMeta.currentPageTotalHeight
-        },
-        container: {
-          width: Math.round(viewportOuterSize.width),
-          height: viewportOuterSize.height - pinnedRowsHeight.top - pinnedRowsHeight.bottom
-        },
-        scrollBarSize
-      });
-      hasScrollY = scrollInformation.hasScrollY;
-      hasScrollX = scrollInformation.hasScrollX;
-    }
-    const viewportInnerSize = {
-      width: viewportOuterSize.width - (hasScrollY ? scrollBarSize : 0),
-      height: viewportOuterSize.height - (hasScrollX ? scrollBarSize : 0)
-    };
-    const newFullDimensions = {
-      viewportOuterSize,
-      viewportInnerSize,
-      hasScrollX,
-      hasScrollY,
-      scrollBarSize
-    };
-    const prevDimensions = fullDimensionsRef.current;
-    fullDimensionsRef.current = newFullDimensions;
-    if (newFullDimensions.viewportInnerSize.width !== prevDimensions?.viewportInnerSize.width || newFullDimensions.viewportInnerSize.height !== prevDimensions?.viewportInnerSize.height) {
-      apiRef.current.publishEvent('viewportInnerSizeChange', newFullDimensions.viewportInnerSize);
-    }
-  }, [apiRef, props.scrollbarSize, props.autoHeight, rowsMeta.currentPageTotalHeight, totalHeaderHeight]);
+  const headerHeight = Math.floor(props.columnHeaderHeight * densityFactor);
+  const columnsTotalWidth = roundToDecimalPlaces((0, _columns.gridColumnsTotalWidthSelector)(apiRef), 6);
+  // XXX: The `props as any` below is not resilient to change.
+  const hasHeaderFilters = Boolean(props.headerFilters);
+  const headersTotalHeight = (0, _gridColumnsUtils.getTotalHeaderHeight)(apiRef, props.columnHeaderHeight) + Number(hasHeaderFilters) * headerHeight;
+  const leftPinnedWidth = pinnedColumns.left.reduce((w, col) => w + col.computedWidth, 0);
+  const rightPinnedWidth = pinnedColumns.right.reduce((w, col) => w + col.computedWidth, 0);
   const [savedSize, setSavedSize] = React.useState();
   const debouncedSetSavedSize = React.useMemo(() => (0, _utils.unstable_debounce)(setSavedSize, 60), []);
   const previousSize = React.useRef();
-  (0, _utils.unstable_useEnhancedEffect)(() => {
-    if (savedSize) {
-      updateGridDimensionsRef();
-      apiRef.current.publishEvent('debouncedResize', rootDimensionsRef.current);
-    }
-  }, [apiRef, savedSize, updateGridDimensionsRef]);
-
-  // This is the function called by apiRef.current.resize()
+  const getRootDimensions = () => apiRef.current.state.dimensions;
+  const setDimensions = (0, _utils.unstable_useEventCallback)(dimensions => {
+    apiRef.current.setState(state => (0, _extends2.default)({}, state, {
+      dimensions
+    }));
+  });
   const resize = React.useCallback(() => {
-    apiRef.current.computeSizeAndPublishResizeEvent();
+    const element = apiRef.current.mainElementRef.current;
+    if (!element) {
+      return;
+    }
+    const computedStyle = (0, _utils.unstable_ownerWindow)(element).getComputedStyle(element);
+    const height = parseFloat(computedStyle.height) || 0;
+    const width = parseFloat(computedStyle.width) || 0;
+    const hasHeightChanged = height !== previousSize.current?.height;
+    const hasWidthChanged = width !== previousSize.current?.width;
+    if (!previousSize.current || hasHeightChanged || hasWidthChanged) {
+      const size = {
+        width,
+        height
+      };
+      apiRef.current.publishEvent('resize', size);
+      previousSize.current = size;
+    }
   }, [apiRef]);
-  const getRootDimensions = React.useCallback(() => fullDimensionsRef.current, []);
   const getViewportPageSize = React.useCallback(() => {
-    const dimensions = apiRef.current.getRootDimensions();
-    if (!dimensions) {
+    const dimensions = (0, _gridDimensionsSelectors.gridDimensionsSelector)(apiRef.current.state);
+    if (!dimensions.isReady) {
       return 0;
     }
     const currentPage = (0, _useGridVisibleRows.getVisibleRows)(apiRef, {
@@ -149,44 +110,135 @@ 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) {
-      const renderContext = apiRef.current.getRenderContext();
+      const renderContext = (0, _virtualization.gridRenderContextSelector)(apiRef);
       const viewportPageSize = renderContext.lastRowIndex - renderContext.firstRowIndex;
       return Math.min(viewportPageSize - 1, currentPage.rows.length);
     }
     const maximumPageSizeWithoutScrollBar = Math.floor(dimensions.viewportInnerSize.height / rowHeight);
     return Math.min(maximumPageSizeWithoutScrollBar, currentPage.rows.length);
   }, [apiRef, props.pagination, props.paginationMode, props.getRowHeight, rowHeight]);
-  const computeSizeAndPublishResizeEvent = React.useCallback(() => {
-    const mainEl = apiRef.current.mainElementRef?.current;
-    if (!mainEl) {
-      return;
-    }
-    const win = (0, _utils.unstable_ownerWindow)(mainEl);
-    const computedStyle = win.getComputedStyle(mainEl);
-    const height = parseFloat(computedStyle.height) || 0;
-    const width = parseFloat(computedStyle.width) || 0;
-    const hasHeightChanged = height !== previousSize.current?.height;
-    const hasWidthChanged = width !== previousSize.current?.width;
-    if (!previousSize.current || hasHeightChanged || hasWidthChanged) {
-      const size = {
-        width,
-        height
+  const updateDimensions = React.useCallback(() => {
+    const rootElement = apiRef.current.rootElementRef.current;
+    const pinnedRowsHeight = (0, _gridRowsUtils.calculatePinnedRowsHeight)(apiRef);
+    const scrollbarSize = measureScrollbarSize(rootElement, columnsTotalWidth, props.scrollbarSize);
+    const topContainerHeight = headersTotalHeight + pinnedRowsHeight.top;
+    const bottomContainerHeight = pinnedRowsHeight.bottom;
+    const contentSize = {
+      width: columnsTotalWidth,
+      height: rowsMeta.currentPageTotalHeight
+    };
+    let viewportOuterSize;
+    let viewportInnerSize;
+    let hasScrollX = false;
+    let 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)
+      };
+      const content = contentSize;
+      const container = viewportInnerSize;
+      const hasScrollXIfNoYScrollBar = content.width > container.width;
+      const 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]);
-  const dimensionsApi = {
+    const rowWidth = Math.max(viewportOuterSize.width, columnsTotalWidth + (hasScrollY ? scrollbarSize : 0));
+    const minimumSize = {
+      width: contentSize.width,
+      height: topContainerHeight + contentSize.height + bottomContainerHeight
+    };
+    const newDimensions = {
+      isReady: true,
+      root: rootDimensionsRef.current,
+      viewportOuterSize,
+      viewportInnerSize,
+      contentSize,
+      minimumSize,
+      hasScrollX,
+      hasScrollY,
+      scrollbarSize,
+      headerHeight,
+      rowWidth,
+      rowHeight,
+      columnsTotalWidth,
+      leftPinnedWidth,
+      rightPinnedWidth,
+      headersTotalHeight,
+      topContainerHeight,
+      bottomContainerHeight
+    };
+    const 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.updateRenderContext?.();
+  }, [apiRef, setDimensions, props.scrollbarSize, props.autoHeight, rowsMeta.currentPageTotalHeight, rowHeight, headerHeight, columnsTotalWidth, headersTotalHeight, leftPinnedWidth, rightPinnedWidth]);
+  const apiPublic = {
     resize,
     getRootDimensions
   };
-  const dimensionsPrivateApi = {
-    getViewportPageSize,
-    updateGridDimensionsRef,
-    computeSizeAndPublishResizeEvent
+  const apiPrivate = {
+    updateDimensions,
+    getViewportPageSize
   };
-  (0, _useGridApiMethod.useGridApiMethod)(apiRef, dimensionsApi, 'public');
-  (0, _useGridApiMethod.useGridApiMethod)(apiRef, dimensionsPrivateApi, 'private');
+  (0, _useGridApiMethod.useGridApiMethod)(apiRef, apiPublic, 'public');
+  (0, _useGridApiMethod.useGridApiMethod)(apiRef, apiPrivate, 'private');
+  (0, _utils.unstable_useEnhancedEffect)(() => {
+    if (savedSize) {
+      updateDimensions();
+      apiRef.current.publishEvent('debouncedResize', rootDimensionsRef.current);
+    }
+  }, [apiRef, savedSize, updateDimensions]);
+  const root = apiRef.current.rootElementRef.current;
+  const dimensions = apiRef.current.state.dimensions;
+  (0, _utils.unstable_useEnhancedEffect)(() => {
+    if (!root) {
+      return;
+    }
+    const set = (k, v) => root.style.setProperty(k, v);
+    set('--DataGrid-width', `${dimensions.viewportOuterSize.width}px`);
+    set('--DataGrid-hasScrollX', `${Number(dimensions.hasScrollX)}`);
+    set('--DataGrid-hasScrollY', `${Number(dimensions.hasScrollY)}`);
+    set('--DataGrid-scrollbarSize', `${dimensions.scrollbarSize}px`);
+    set('--DataGrid-rowWidth', `${dimensions.rowWidth}px`);
+    set('--DataGrid-columnsTotalWidth', `${dimensions.columnsTotalWidth}px`);
+    set('--DataGrid-leftPinnedWidth', `${dimensions.leftPinnedWidth}px`);
+    set('--DataGrid-rightPinnedWidth', `${dimensions.rightPinnedWidth}px`);
+    set('--DataGrid-headerHeight', `${dimensions.headerHeight}px`);
+    set('--DataGrid-headersTotalHeight', `${dimensions.headersTotalHeight}px`);
+    set('--DataGrid-topContainerHeight', `${dimensions.topContainerHeight}px`);
+    set('--DataGrid-bottomContainerHeight', `${dimensions.bottomContainerHeight}px`);
+  }, [root, dimensions]);
   const isFirstSizing = React.useRef(true);
   const handleResize = React.useCallback(size => {
     rootDimensionsRef.current = size;
@@ -201,12 +253,6 @@ 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);
@@ -215,10 +261,35 @@ function useGridDimensions(apiRef, props) {
     }
     debouncedSetSavedSize(size);
   }, [props.autoHeight, debouncedSetSavedSize, logger]);
-  (0, _utils.unstable_useEnhancedEffect)(() => updateGridDimensionsRef(), [updateGridDimensionsRef]);
-  (0, _useGridApiEventHandler.useGridApiOptionHandler)(apiRef, 'sortedRowsSet', updateGridDimensionsRef);
-  (0, _useGridApiEventHandler.useGridApiOptionHandler)(apiRef, 'paginationModelChange', updateGridDimensionsRef);
-  (0, _useGridApiEventHandler.useGridApiOptionHandler)(apiRef, 'columnsChange', updateGridDimensionsRef);
+  (0, _utils.unstable_useEnhancedEffect)(updateDimensions, [updateDimensions]);
+  (0, _useGridApiEventHandler.useGridApiOptionHandler)(apiRef, 'sortedRowsSet', updateDimensions);
+  (0, _useGridApiEventHandler.useGridApiOptionHandler)(apiRef, 'paginationModelChange', updateDimensions);
+  (0, _useGridApiEventHandler.useGridApiOptionHandler)(apiRef, 'columnsChange', updateDimensions);
   (0, _useGridApiEventHandler.useGridApiEventHandler)(apiRef, 'resize', handleResize);
   (0, _useGridApiEventHandler.useGridApiOptionHandler)(apiRef, 'debouncedResize', props.onResize);
+}
+function measureScrollbarSize(rootElement, columnsTotalWidth, scrollbarSize) {
+  if (scrollbarSize !== undefined) {
+    return scrollbarSize;
+  }
+  if (rootElement === null || columnsTotalWidth === 0) {
+    return 0;
+  }
+  const doc = (0, _utils.unstable_ownerDocument)(rootElement);
+  const 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);
+  const 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 * 10 ** decimals) / 10 ** decimals;
 }

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

@@ -23,7 +23,7 @@ const _excluded = ["id", "field"],
   _excluded2 = ["id", "field"];
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
-const missingOnProcessRowUpdateErrorWarning = (0, _warning.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');
+const missingOnProcessRowUpdateErrorWarning = (0, _warning.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');
 const useGridCellEditing = (apiRef, props) => {
   const [cellModesModel, setCellModesModel] = React.useState({});
   const cellModesModelRef = React.useRef(cellModesModel);
@@ -42,12 +42,12 @@ const useGridCellEditing = (apiRef, props) => {
   const throwIfNotEditable = React.useCallback((id, field) => {
     const params = apiRef.current.getCellParams(id, field);
     if (!apiRef.current.isCellEditable(params)) {
-      throw new Error(`MUI: The cell with id=${id} and field=${field} is not editable.`);
+      throw new Error(`MUI X: The cell with id=${id} and field=${field} is not editable.`);
     }
   }, [apiRef]);
   const throwIfNotInMode = React.useCallback((id, field, mode) => {
     if (apiRef.current.getCellMode(id, field) !== mode) {
-      throw new Error(`MUI: The cell with id=${id} and field=${field} is not in ${mode} mode.`);
+      throw new Error(`MUI X: The cell with id=${id} and field=${field} is not in ${mode} mode.`);
     }
   }, [apiRef]);
   const handleCellDoubleClick = React.useCallback((params, event) => {
@@ -311,7 +311,7 @@ const useGridCellEditing = (apiRef, props) => {
         });
         if (onProcessRowUpdateError) {
           onProcessRowUpdateError(errorThrown);
-        } else {
+        } else if (process.env.NODE_ENV !== 'production') {
           missingOnProcessRowUpdateErrorWarning();
         }
       };

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

@@ -25,7 +25,7 @@ const _excluded = ["id"],
   _excluded2 = ["id"];
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
-const missingOnProcessRowUpdateErrorWarning = (0, _warning.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');
+const missingOnProcessRowUpdateErrorWarning = (0, _warning.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');
 const useGridRowEditing = (apiRef, props) => {
   const [rowModesModel, setRowModesModel] = React.useState({});
   const rowModesModelRef = React.useRef(rowModesModel);
@@ -46,12 +46,12 @@ const useGridRowEditing = (apiRef, props) => {
   const throwIfNotEditable = React.useCallback((id, field) => {
     const params = apiRef.current.getCellParams(id, field);
     if (!apiRef.current.isCellEditable(params)) {
-      throw new Error(`MUI: The cell with id=${id} and field=${field} is not editable.`);
+      throw new Error(`MUI X: The cell with id=${id} and field=${field} is not editable.`);
     }
   }, [apiRef]);
   const throwIfNotInMode = React.useCallback((id, mode) => {
     if (apiRef.current.getRowMode(id) !== mode) {
-      throw new Error(`MUI: The row with id=${id} is not in ${mode} mode.`);
+      throw new Error(`MUI X: The row with id=${id} is not in ${mode} mode.`);
     }
   }, [apiRef]);
   const handleCellDoubleClick = React.useCallback((params, event) => {
@@ -388,7 +388,7 @@ const useGridRowEditing = (apiRef, props) => {
         });
         if (onProcessRowUpdateError) {
           onProcessRowUpdateError(errorThrown);
-        } else {
+        } else if (process.env.NODE_ENV !== 'production') {
           missingOnProcessRowUpdateErrorWarning();
         }
       };

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

@@ -40,7 +40,7 @@ const serializeCellValue = (cellParams, options) => {
   return sanitizeCellValue(value, delimiterCharacter);
 };
 exports.serializeCellValue = serializeCellValue;
-const objectFormattedValueWarning = (0, _warning.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.']);
+const objectFormattedValueWarning = (0, _warning.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.']);
 class CSVRow {
   constructor(options) {
     this.options = void 0;
@@ -112,10 +112,10 @@ function buildCSV(options) {
   const filteredColumns = columns.filter(column => column.field !== _colDef.GRID_CHECKBOX_SELECTION_COL_DEF.field);
   const headerRows = [];
   if (includeColumnGroupsHeaders) {
-    const columnGroupLookup = apiRef.current.unstable_getAllGroupDetails();
+    const columnGroupLookup = apiRef.current.getAllGroupDetails();
     let maxColumnGroupsDepth = 0;
     const columnGroupPathsLookup = filteredColumns.reduce((acc, column) => {
-      const columnGroupPath = apiRef.current.unstable_getColumnGroupPath(column.field);
+      const columnGroupPath = apiRef.current.getColumnGroupPath(column.field);
       acc[column.field] = columnGroupPath;
       maxColumnGroupsDepth = Math.max(maxColumnGroupsDepth, columnGroupPath.length);
       return acc;

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

@@ -215,7 +215,7 @@ const useGridPrintExport = (apiRef, props) => {
   const exportDataAsPrint = React.useCallback(async options => {
     logger.debug(`Export data as Print`);
     if (!apiRef.current.rootElementRef.current) {
-      throw new Error('MUI: No grid root element available.');
+      throw new Error('MUI X: No grid root element available.');
     }
     previousGridState.current = apiRef.current.exportState();
     // It appends that the visibility model is not exported, especially if columnVisibility is not controlled

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

@@ -44,9 +44,9 @@ const cleanFilterItem = (item, apiRef) => {
   return cleanItem;
 };
 exports.cleanFilterItem = cleanFilterItem;
-const filterModelDisableMultiColumnsFilteringWarning = (0, _warning.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');
-const filterModelMissingItemIdWarning = (0, _warning.buildWarning)('MUI: The `id` field is required on `filterModel.items` when you use multiple filters.', 'error');
-const filterModelMissingItemOperatorWarning = (0, _warning.buildWarning)('MUI: The `operator` field is required on `filterModel.items`, one or more of your filtering item has no `operator` provided.', 'error');
+const filterModelDisableMultiColumnsFilteringWarning = (0, _warning.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');
+const filterModelMissingItemIdWarning = (0, _warning.buildWarning)('MUI X: The `id` field is required on `filterModel.items` when you use multiple filters.', 'error');
+const filterModelMissingItemOperatorWarning = (0, _warning.buildWarning)('MUI X: The `operator` field is required on `filterModel.items`, one or more of your filtering item has no `operator` provided.', 'error');
 const sanitizeFilterModel = (model, disableMultipleColumnsFiltering, apiRef) => {
   const hasSeveralItems = model.items.length > 1;
   let items;
@@ -114,11 +114,11 @@ const getFilterCallbackFromItem = (filterItem, apiRef) => {
   });
   const filterOperators = column.filterOperators;
   if (!filterOperators?.length) {
-    throw new Error(`MUI: No filter operators found for column '${column.field}'.`);
+    throw new Error(`MUI X: No filter operators found for column '${column.field}'.`);
   }
   const filterOperator = filterOperators.find(operator => operator.value === newFilterItem.operator);
   if (!filterOperator) {
-    throw new Error(`MUI: No filter operator found for column '${column.field}' and operator value '${newFilterItem.operator}'.`);
+    throw new Error(`MUI X: No filter operator found for column '${column.field}' and operator value '${newFilterItem.operator}'.`);
   }
   const publicApiRef = (0, _getPublicApiRef.getPublicApiRef)(apiRef);
   const applyFilterOnRow = filterOperator.getApplyFilterFn(newFilterItem, column);

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

@@ -319,8 +319,8 @@ const useGridFilter = (apiRef, props) => {
   const handleColumnsChange = React.useCallback(() => {
     logger.debug('onColUpdated - GridColumns changed, applying filters');
     const filterModel = (0, _gridFilterSelector.gridFilterModelSelector)(apiRef);
-    const filterableColumnsLookup = (0, _gridColumnsSelector.gridFilterableColumnLookupSelector)(apiRef);
-    const newFilterItems = filterModel.items.filter(item => item.field && filterableColumnsLookup[item.field]);
+    const columnsLookup = (0, _gridColumnsSelector.gridColumnLookupSelector)(apiRef);
+    const newFilterItems = filterModel.items.filter(item => item.field && columnsLookup[item.field]);
     if (newFilterItems.length < filterModel.items.length) {
       apiRef.current.setFilterModel((0, _extends2.default)({}, filterModel, {
         items: newFilterItems

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

@@ -3,21 +3,17 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.unstable_gridTabIndexColumnGroupHeaderSelector = exports.unstable_gridFocusColumnGroupHeaderSelector = exports.gridTabIndexStateSelector = exports.gridTabIndexColumnHeaderSelector = exports.gridTabIndexColumnHeaderFilterSelector = exports.gridTabIndexCellSelector = exports.gridFocusStateSelector = exports.gridFocusColumnHeaderSelector = exports.gridFocusColumnHeaderFilterSelector = exports.gridFocusCellSelector = void 0;
+exports.gridTabIndexStateSelector = exports.gridTabIndexColumnHeaderSelector = exports.gridTabIndexColumnHeaderFilterSelector = exports.gridTabIndexColumnGroupHeaderSelector = exports.gridTabIndexCellSelector = exports.gridFocusStateSelector = exports.gridFocusColumnHeaderSelector = exports.gridFocusColumnHeaderFilterSelector = exports.gridFocusColumnGroupHeaderSelector = exports.gridFocusCellSelector = void 0;
 var _createSelector = require("../../../utils/createSelector");
 const gridFocusStateSelector = state => state.focus;
 exports.gridFocusStateSelector = gridFocusStateSelector;
 const gridFocusCellSelector = exports.gridFocusCellSelector = (0, _createSelector.createSelector)(gridFocusStateSelector, focusState => focusState.cell);
 const gridFocusColumnHeaderSelector = exports.gridFocusColumnHeaderSelector = (0, _createSelector.createSelector)(gridFocusStateSelector, focusState => focusState.columnHeader);
 const gridFocusColumnHeaderFilterSelector = exports.gridFocusColumnHeaderFilterSelector = (0, _createSelector.createSelector)(gridFocusStateSelector, focusState => focusState.columnHeaderFilter);
-
-// eslint-disable-next-line @typescript-eslint/naming-convention
-const unstable_gridFocusColumnGroupHeaderSelector = exports.unstable_gridFocusColumnGroupHeaderSelector = (0, _createSelector.createSelector)(gridFocusStateSelector, focusState => focusState.columnGroupHeader);
+const gridFocusColumnGroupHeaderSelector = exports.gridFocusColumnGroupHeaderSelector = (0, _createSelector.createSelector)(gridFocusStateSelector, focusState => focusState.columnGroupHeader);
 const gridTabIndexStateSelector = state => state.tabIndex;
 exports.gridTabIndexStateSelector = gridTabIndexStateSelector;
 const gridTabIndexCellSelector = exports.gridTabIndexCellSelector = (0, _createSelector.createSelector)(gridTabIndexStateSelector, state => state.cell);
 const gridTabIndexColumnHeaderSelector = exports.gridTabIndexColumnHeaderSelector = (0, _createSelector.createSelector)(gridTabIndexStateSelector, state => state.columnHeader);
 const gridTabIndexColumnHeaderFilterSelector = exports.gridTabIndexColumnHeaderFilterSelector = (0, _createSelector.createSelector)(gridTabIndexStateSelector, state => state.columnHeaderFilter);
-
-// eslint-disable-next-line @typescript-eslint/naming-convention
-const unstable_gridTabIndexColumnGroupHeaderSelector = exports.unstable_gridTabIndexColumnGroupHeaderSelector = (0, _createSelector.createSelector)(gridTabIndexStateSelector, state => state.columnGroupHeader);
+const gridTabIndexColumnGroupHeaderSelector = exports.gridTabIndexColumnGroupHeaderSelector = (0, _createSelector.createSelector)(gridTabIndexStateSelector, state => state.columnGroupHeader);

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

@@ -174,7 +174,7 @@ const useGridFocus = (apiRef, props) => {
     });
     apiRef.current.forceUpdate();
   }, [apiRef]);
-  const getColumnGroupHeaderFocus = React.useCallback(() => (0, _gridFocusStateSelector.unstable_gridFocusColumnGroupHeaderSelector)(apiRef), [apiRef]);
+  const getColumnGroupHeaderFocus = React.useCallback(() => (0, _gridFocusStateSelector.gridFocusColumnGroupHeaderSelector)(apiRef), [apiRef]);
   const moveFocusToRelativeCell = React.useCallback((id, field, direction) => {
     let columnIndexToFocus = apiRef.current.getColumnIndex(field);
     const visibleColumns = (0, _gridColumnsSelector.gridVisibleColumnDefinitionsSelector)(apiRef);
@@ -254,7 +254,7 @@ const useGridFocus = (apiRef, props) => {
     if (event.target !== event.currentTarget) {
       return;
     }
-    const focusedColumnGroup = (0, _gridFocusStateSelector.unstable_gridFocusColumnGroupHeaderSelector)(apiRef);
+    const focusedColumnGroup = (0, _gridFocusStateSelector.gridFocusColumnGroupHeaderSelector)(apiRef);
     if (focusedColumnGroup !== null && focusedColumnGroup.depth === depth && fields.includes(focusedColumnGroup.field)) {
       // This group cell has already been focused
       return;