@mui/x-data-grid 8.0.0-alpha.12 → 8.0.0-alpha.13

package/hooks/features/columns/gridColumnsUtils.js

@@ -232,7 +232,8 @@ const createColumnsState = ({
   columnsToUpsert,
   initialState,
   columnVisibilityModel = (0, _gridColumnsSelector.gridColumnVisibilityModelSelector)(apiRef),
-  keepOnlyColumnsToUpsert = false
+  keepOnlyColumnsToUpsert = false,
+  updateInitialVisibilityModel = false
 }) => {
   const isInsideStateInitializer = !apiRef.current.state.columns;
   let columnsState;
@@ -240,7 +241,8 @@ const createColumnsState = ({
     columnsState = {
       orderedFields: [],
       lookup: {},
-      columnVisibilityModel
+      columnVisibilityModel,
+      initialColumnVisibilityModel: columnVisibilityModel
     };
   } else {
     const currentState = (0, _gridColumnsSelector.gridColumnsStateSelector)(apiRef);
@@ -248,7 +250,8 @@ const createColumnsState = ({
       orderedFields: keepOnlyColumnsToUpsert ? [] : [...currentState.orderedFields],
       lookup: (0, _extends2.default)({}, currentState.lookup),
       // Will be cleaned later if keepOnlyColumnsToUpsert=true
-      columnVisibilityModel
+      columnVisibilityModel,
+      initialColumnVisibilityModel: updateInitialVisibilityModel ? columnVisibilityModel : currentState.initialColumnVisibilityModel
     };
   }
   let columnsToKeep = {};

package/hooks/features/columns/index.d.ts

@@ -1,2 +1,2 @@
-export * from "./gridColumnsSelector.js";
+export { gridColumnsStateSelector, gridColumnFieldsSelector, gridColumnLookupSelector, gridColumnVisibilityModelSelector, gridColumnDefinitionsSelector, gridVisibleColumnDefinitionsSelector, gridVisibleColumnFieldsSelector, gridPinnedColumnsSelector, gridVisiblePinnedColumnDefinitionsSelector, gridColumnPositionsSelector, gridFilterableColumnDefinitionsSelector, gridFilterableColumnLookupSelector, gridHasColSpanSelector } from "./gridColumnsSelector.js";
 export * from "./gridColumnsInterfaces.js";

package/hooks/features/columns/index.js

@@ -3,20 +3,104 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-var _gridColumnsSelector = require("./gridColumnsSelector");
-Object.keys(_gridColumnsSelector).forEach(function (key) {
-  if (key === "default" || key === "__esModule") return;
-  if (key in exports && exports[key] === _gridColumnsSelector[key]) return;
-  Object.defineProperty(exports, key, {
-    enumerable: true,
-    get: function () {
-      return _gridColumnsSelector[key];
-    }
-  });
+var _exportNames = {
+  gridColumnsStateSelector: true,
+  gridColumnFieldsSelector: true,
+  gridColumnLookupSelector: true,
+  gridColumnVisibilityModelSelector: true,
+  gridColumnDefinitionsSelector: true,
+  gridVisibleColumnDefinitionsSelector: true,
+  gridVisibleColumnFieldsSelector: true,
+  gridPinnedColumnsSelector: true,
+  gridVisiblePinnedColumnDefinitionsSelector: true,
+  gridColumnPositionsSelector: true,
+  gridFilterableColumnDefinitionsSelector: true,
+  gridFilterableColumnLookupSelector: true,
+  gridHasColSpanSelector: true
+};
+Object.defineProperty(exports, "gridColumnDefinitionsSelector", {
+  enumerable: true,
+  get: function () {
+    return _gridColumnsSelector.gridColumnDefinitionsSelector;
+  }
+});
+Object.defineProperty(exports, "gridColumnFieldsSelector", {
+  enumerable: true,
+  get: function () {
+    return _gridColumnsSelector.gridColumnFieldsSelector;
+  }
+});
+Object.defineProperty(exports, "gridColumnLookupSelector", {
+  enumerable: true,
+  get: function () {
+    return _gridColumnsSelector.gridColumnLookupSelector;
+  }
+});
+Object.defineProperty(exports, "gridColumnPositionsSelector", {
+  enumerable: true,
+  get: function () {
+    return _gridColumnsSelector.gridColumnPositionsSelector;
+  }
 });
+Object.defineProperty(exports, "gridColumnVisibilityModelSelector", {
+  enumerable: true,
+  get: function () {
+    return _gridColumnsSelector.gridColumnVisibilityModelSelector;
+  }
+});
+Object.defineProperty(exports, "gridColumnsStateSelector", {
+  enumerable: true,
+  get: function () {
+    return _gridColumnsSelector.gridColumnsStateSelector;
+  }
+});
+Object.defineProperty(exports, "gridFilterableColumnDefinitionsSelector", {
+  enumerable: true,
+  get: function () {
+    return _gridColumnsSelector.gridFilterableColumnDefinitionsSelector;
+  }
+});
+Object.defineProperty(exports, "gridFilterableColumnLookupSelector", {
+  enumerable: true,
+  get: function () {
+    return _gridColumnsSelector.gridFilterableColumnLookupSelector;
+  }
+});
+Object.defineProperty(exports, "gridHasColSpanSelector", {
+  enumerable: true,
+  get: function () {
+    return _gridColumnsSelector.gridHasColSpanSelector;
+  }
+});
+Object.defineProperty(exports, "gridPinnedColumnsSelector", {
+  enumerable: true,
+  get: function () {
+    return _gridColumnsSelector.gridPinnedColumnsSelector;
+  }
+});
+Object.defineProperty(exports, "gridVisibleColumnDefinitionsSelector", {
+  enumerable: true,
+  get: function () {
+    return _gridColumnsSelector.gridVisibleColumnDefinitionsSelector;
+  }
+});
+Object.defineProperty(exports, "gridVisibleColumnFieldsSelector", {
+  enumerable: true,
+  get: function () {
+    return _gridColumnsSelector.gridVisibleColumnFieldsSelector;
+  }
+});
+Object.defineProperty(exports, "gridVisiblePinnedColumnDefinitionsSelector", {
+  enumerable: true,
+  get: function () {
+    return _gridColumnsSelector.gridVisiblePinnedColumnDefinitionsSelector;
+  }
+});
+var _gridColumnsSelector = require("./gridColumnsSelector");
 var _gridColumnsInterfaces = require("./gridColumnsInterfaces");
 Object.keys(_gridColumnsInterfaces).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
   if (key in exports && exports[key] === _gridColumnsInterfaces[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,

package/hooks/features/columns/useGridColumns.js

@@ -92,7 +92,8 @@ function useGridColumns(apiRef, props) {
       apiRef,
       columnsToUpsert: columns,
       initialState: undefined,
-      keepOnlyColumnsToUpsert: false
+      keepOnlyColumnsToUpsert: false,
+      updateInitialVisibilityModel: true
     });
     setGridColumnsState(columnsState);
   }, [apiRef, setGridColumnsState]);
@@ -298,7 +299,8 @@ function useGridColumns(apiRef, props) {
       initialState: undefined,
       // If the user provides a model, we don't want to set it in the state here because it has it's dedicated `useEffect` which calls `setColumnVisibilityModel`
       columnsToUpsert: props.columns,
-      keepOnlyColumnsToUpsert: true
+      keepOnlyColumnsToUpsert: true,
+      updateInitialVisibilityModel: true
     });
     previousColumnsProp.current = props.columns;
     setGridColumnsState(columnsState);

package/hooks/features/dataSource/gridDataSourceError.d.ts

@@ -0,0 +1,31 @@
+import type { GridGetRowsParams, GridUpdateRowParams } from '../../../models/gridDataSource';
+export declare class GridGetRowsError<T extends GridGetRowsParams = GridGetRowsParams> extends Error {
+  /**
+   * The parameters used in the failed request
+   */
+  readonly params: T;
+  /**
+   * The original error that caused this error
+   */
+  readonly cause?: Error;
+  constructor(options: {
+    message: string;
+    params: T;
+    cause?: Error;
+  });
+}
+export declare class GridUpdateRowError extends Error {
+  /**
+   * The parameters used in the failed request
+   */
+  readonly params: GridUpdateRowParams;
+  /**
+   * The original error that caused this error
+   */
+  readonly cause?: Error;
+  constructor(options: {
+    message: string;
+    params: GridUpdateRowParams;
+    cause?: Error;
+  });
+}

package/hooks/features/dataSource/gridDataSourceError.js

@@ -0,0 +1,40 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.GridUpdateRowError = exports.GridGetRowsError = void 0;
+class GridGetRowsError extends Error {
+  constructor(options) {
+    super(options.message);
+    /**
+     * The parameters used in the failed request
+     */
+    this.params = void 0;
+    /**
+     * The original error that caused this error
+     */
+    this.cause = void 0;
+    this.name = 'GridGetRowsError';
+    this.params = options.params;
+    this.cause = options.cause;
+  }
+}
+exports.GridGetRowsError = GridGetRowsError;
+class GridUpdateRowError extends Error {
+  constructor(options) {
+    super(options.message);
+    /**
+     * The parameters used in the failed request
+     */
+    this.params = void 0;
+    /**
+     * The original error that caused this error
+     */
+    this.cause = void 0;
+    this.name = 'GridUpdateRowError';
+    this.params = options.params;
+    this.cause = options.cause;
+  }
+}
+exports.GridUpdateRowError = GridUpdateRowError;

package/hooks/features/dataSource/index.d.ts

@@ -0,0 +1,2 @@
+export { GridDataSourceCacheDefault, type GridDataSourceCacheDefaultConfig } from "./cache.js";
+export { GridGetRowsError, GridUpdateRowError } from "./gridDataSourceError.js";

package/hooks/features/dataSource/index.js

@@ -0,0 +1,25 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "GridDataSourceCacheDefault", {
+  enumerable: true,
+  get: function () {
+    return _cache.GridDataSourceCacheDefault;
+  }
+});
+Object.defineProperty(exports, "GridGetRowsError", {
+  enumerable: true,
+  get: function () {
+    return _gridDataSourceError.GridGetRowsError;
+  }
+});
+Object.defineProperty(exports, "GridUpdateRowError", {
+  enumerable: true,
+  get: function () {
+    return _gridDataSourceError.GridUpdateRowError;
+  }
+});
+var _cache = require("./cache");
+var _gridDataSourceError = require("./gridDataSourceError");

package/hooks/features/dataSource/models.d.ts

@@ -18,5 +18,5 @@ export interface GridDataSourceApi {
   /**
    * The data source API.
    */
-  unstable_dataSource: GridDataSourceApiBase;
+  dataSource: GridDataSourceApiBase;
 }

package/hooks/features/dataSource/useGridDataSourceBase.d.ts

@@ -8,7 +8,7 @@ import type { DataGridProcessedProps } from '../../../models/props/DataGridProps
 import type { GridStrategyProcessor } from '../../core/strategyProcessing';
 import type { GridEventListener } from '../../../models/events';
 import type { GridRowId } from '../../../models';
-export declare const useGridDataSourceBase: <Api extends GridPrivateApiCommunity>(apiRef: RefObject<Api>, props: Pick<DataGridProcessedProps, "unstable_dataSource" | "unstable_dataSourceCache" | "unstable_onDataSourceError" | "pageSizeOptions" | "signature">, options?: {
+export declare const useGridDataSourceBase: <Api extends GridPrivateApiCommunity>(apiRef: RefObject<Api>, props: Pick<DataGridProcessedProps, "dataSource" | "dataSourceCache" | "onDataSourceError" | "pageSizeOptions" | "signature">, options?: {
   cacheOptions?: GridDataSourceCacheDefaultConfig;
   fetchRowChildren?: (parents: GridRowId[]) => void;
   clearDataSourceState?: () => void;

package/hooks/features/dataSource/useGridDataSourceBase.js

@@ -10,6 +10,7 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 var React = _interopRequireWildcard(require("react"));
 var _useLazyRef = _interopRequireDefault(require("@mui/utils/useLazyRef"));
 var _utils = require("@mui/utils");
+var _warning = require("@mui/x-internals/warning");
 var _gridRowsUtils = require("../rows/gridRowsUtils");
 var _utils2 = require("../../../utils/utils");
 var _strategyProcessing = require("../../core/strategyProcessing");
@@ -18,6 +19,7 @@ var _gridPaginationSelector = require("../pagination/gridPaginationSelector");
 var _gridDataSourceSelector = require("./gridDataSourceSelector");
 var _utils3 = require("./utils");
 var _cache = require("./cache");
+var _gridDataSourceError = require("./gridDataSourceError");
 const noopCache = {
   clear: () => {},
   get: () => undefined,
@@ -31,20 +33,20 @@ function getCache(cacheProp, options = {}) {
 }
 const useGridDataSourceBase = (apiRef, props, options = {}) => {
   const setStrategyAvailability = React.useCallback(() => {
-    apiRef.current.setStrategyAvailability(_strategyProcessing.GridStrategyGroup.DataSource, _utils3.DataSourceRowsUpdateStrategy.Default, props.unstable_dataSource ? () => true : () => false);
-  }, [apiRef, props.unstable_dataSource]);
+    apiRef.current.setStrategyAvailability(_strategyProcessing.GridStrategyGroup.DataSource, _utils3.DataSourceRowsUpdateStrategy.Default, props.dataSource ? () => true : () => false);
+  }, [apiRef, props.dataSource]);
   const [defaultRowsUpdateStrategyActive, setDefaultRowsUpdateStrategyActive] = React.useState(false);
   const paginationModel = (0, _useGridSelector.useGridSelector)(apiRef, _gridPaginationSelector.gridPaginationModelSelector);
   const lastRequestId = React.useRef(0);
-  const onError = props.unstable_onDataSourceError;
+  const onDataSourceErrorProp = props.onDataSourceError;
   const cacheChunkManager = (0, _useLazyRef.default)(() => {
     const sortedPageSizeOptions = props.pageSizeOptions.map(option => typeof option === 'number' ? option : option.value).sort((a, b) => a - b);
     const cacheChunkSize = Math.min(paginationModel.pageSize, sortedPageSizeOptions[0]);
     return new _utils3.CacheChunkManager(cacheChunkSize);
   }).current;
-  const [cache, setCache] = React.useState(() => getCache(props.unstable_dataSourceCache, options.cacheOptions));
+  const [cache, setCache] = React.useState(() => getCache(props.dataSourceCache, options.cacheOptions));
   const fetchRows = React.useCallback(async (parentId, params) => {
-    const getRows = props.unstable_dataSource?.getRows;
+    const getRows = props.dataSource?.getRows;
     if (!getRows) {
       return;
     }
@@ -82,20 +84,28 @@ const useGridDataSourceBase = (apiRef, props, options = {}) => {
           fetchParams
         });
       }
-    } catch (error) {
+    } catch (originalError) {
       if (lastRequestId.current === requestId) {
         apiRef.current.applyStrategyProcessor('dataSourceRowsUpdate', {
-          error: error,
+          error: originalError,
           fetchParams
         });
-        onError?.(error, fetchParams);
+        if (typeof onDataSourceErrorProp === 'function') {
+          onDataSourceErrorProp(new _gridDataSourceError.GridGetRowsError({
+            message: originalError?.message,
+            params: fetchParams,
+            cause: originalError
+          }));
+        } else if (process.env.NODE_ENV !== 'production') {
+          (0, _warning.warnOnce)(['MUI X: A call to `dataSource.getRows()` threw an error which was not handled because `unstable_onDataSourceError()` is missing.', 'To handle the error pass a callback to the `onDataSourceError` prop, for example `<DataGrid unstable_onDataSourceError={(error) => ...} />`.', 'For more detail, see https://mui.com/x/react-data-grid/server-side-data/#error-handling.'], 'error');
+        }
       }
     } finally {
       if (defaultRowsUpdateStrategyActive && lastRequestId.current === requestId) {
         apiRef.current.setLoading(false);
       }
     }
-  }, [cacheChunkManager, cache, apiRef, defaultRowsUpdateStrategyActive, props.unstable_dataSource?.getRows, onError, options, props.signature]);
+  }, [cacheChunkManager, cache, apiRef, defaultRowsUpdateStrategyActive, props.dataSource?.getRows, onDataSourceErrorProp, options, props.signature]);
   const handleStrategyActivityChange = React.useCallback(() => {
     setDefaultRowsUpdateStrategyActive(apiRef.current.getActiveStrategy(_strategyProcessing.GridStrategyGroup.DataSource) === _utils3.DataSourceRowsUpdateStrategy.Default);
   }, [apiRef]);
@@ -117,7 +127,7 @@ const useGridDataSourceBase = (apiRef, props, options = {}) => {
     }, true);
   }, [apiRef]);
   const dataSourceApi = {
-    unstable_dataSource: {
+    dataSource: {
       fetchRows,
       cache
     }
@@ -129,18 +139,18 @@ const useGridDataSourceBase = (apiRef, props, options = {}) => {
       isFirstRender.current = false;
       return;
     }
-    if (props.unstable_dataSourceCache === undefined) {
+    if (props.dataSourceCache === undefined) {
       return;
     }
-    const newCache = getCache(props.unstable_dataSourceCache, options.cacheOptions);
+    const newCache = getCache(props.dataSourceCache, options.cacheOptions);
     setCache(prevCache => prevCache !== newCache ? newCache : prevCache);
-  }, [props.unstable_dataSourceCache, options.cacheOptions]);
+  }, [props.dataSourceCache, options.cacheOptions]);
   React.useEffect(() => {
-    if (props.unstable_dataSource) {
-      apiRef.current.unstable_dataSource.cache.clear();
-      apiRef.current.unstable_dataSource.fetchRows();
+    if (props.dataSource) {
+      apiRef.current.dataSource.cache.clear();
+      apiRef.current.dataSource.fetchRows();
     }
-  }, [apiRef, props.unstable_dataSource]);
+  }, [apiRef, props.dataSource]);
   return {
     api: {
       public: dataSourceApi

package/hooks/features/dimensions/useGridDimensions.js

@@ -9,7 +9,9 @@ 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 _useEventCallback = _interopRequireDefault(require("@mui/utils/useEventCallback"));
+var _useEnhancedEffect = _interopRequireDefault(require("@mui/utils/useEnhancedEffect"));
+var _ownerDocument = _interopRequireDefault(require("@mui/utils/ownerDocument"));
 var _throttle = require("@mui/x-internals/throttle");
 var _useGridApiEventHandler = require("../../utils/useGridApiEventHandler");
 var _useGridApiMethod = require("../../utils/useGridApiMethod");
@@ -19,7 +21,7 @@ var _columns = require("../columns");
 var _gridDimensionsSelectors = require("./gridDimensionsSelectors");
 var _density = require("../density");
 var _virtualization = require("../virtualization");
-var _utils2 = require("../../utils");
+var _utils = require("../../utils");
 var _useGridVisibleRows = require("../../utils/useGridVisibleRows");
 var _gridRowsMetaSelector = require("../rows/gridRowsMetaSelector");
 var _gridRowsUtils = require("../rows/gridRowsUtils");
@@ -27,7 +29,7 @@ var _gridColumnsUtils = require("../columns/gridColumnsUtils");
 var _dataGridPropsDefaultValues = require("../../../constants/dataGridPropsDefaultValues");
 var _roundToDecimalPlaces = require("../../../utils/roundToDecimalPlaces");
 var _isJSDOM = require("../../../utils/isJSDOM");
-var _utils3 = require("../../../utils/utils");
+var _utils2 = require("../../../utils/utils");
 const EMPTY_SIZE = {
   width: 0,
   height: 0
@@ -73,9 +75,9 @@ function useGridDimensions(apiRef, props) {
   const logger = (0, _useGridLogger.useGridLogger)(apiRef, 'useResizeContainer');
   const errorShown = React.useRef(false);
   const rootDimensionsRef = React.useRef(EMPTY_SIZE);
-  const pinnedColumns = (0, _utils2.useGridSelector)(apiRef, _columns.gridVisiblePinnedColumnDefinitionsSelector);
-  const densityFactor = (0, _utils2.useGridSelector)(apiRef, _density.gridDensityFactorSelector);
-  const columnsTotalWidth = (0, _utils2.useGridSelector)(apiRef, columnsTotalWidthSelector);
+  const pinnedColumns = (0, _utils.useGridSelector)(apiRef, _columns.gridVisiblePinnedColumnDefinitionsSelector);
+  const densityFactor = (0, _utils.useGridSelector)(apiRef, _density.gridDensityFactorSelector);
+  const columnsTotalWidth = (0, _utils.useGridSelector)(apiRef, columnsTotalWidthSelector);
   const isFirstSizing = React.useRef(true);
   const {
     rowHeight,
@@ -119,8 +121,7 @@ function useGridDimensions(apiRef, props) {
     // All the floating point dimensions should be rounded to .1 decimal places to avoid subpixel rendering issues
     // https://github.com/mui/mui-x/issues/9550#issuecomment-1619020477
     // https://github.com/mui/mui-x/issues/15721
-    const rootElement = apiRef.current.rootElementRef.current;
-    const scrollbarSize = measureScrollbarSize(rootElement, props.scrollbarSize);
+    const scrollbarSize = measureScrollbarSize(apiRef.current.mainElementRef.current, props.scrollbarSize);
     const rowsMeta = (0, _gridRowsMetaSelector.gridRowsMetaSelector)(apiRef);
     const topContainerHeight = headersTotalHeight + rowsMeta.pinnedTopRowsTotalHeight;
     const bottomContainerHeight = rowsMeta.pinnedBottomRowsTotalHeight;
@@ -200,7 +201,7 @@ function useGridDimensions(apiRef, props) {
       bottomContainerHeight
     };
     const prevDimensions = apiRef.current.state.dimensions;
-    if ((0, _utils3.isDeepEqual)(prevDimensions, newDimensions)) {
+    if ((0, _utils2.isDeepEqual)(prevDimensions, newDimensions)) {
       return;
     }
     setDimensions(newDimensions);
@@ -209,7 +210,7 @@ function useGridDimensions(apiRef, props) {
     }
     apiRef.current.updateRenderContext?.();
   }, [apiRef, setDimensions, props.scrollbarSize, props.autoHeight, rowHeight, headerHeight, groupHeaderHeight, headerFilterHeight, columnsTotalWidth, headersTotalHeight, leftPinnedWidth, rightPinnedWidth]);
-  const updateDimensionCallback = (0, _utils.unstable_useEventCallback)(updateDimensions);
+  const updateDimensionCallback = (0, _useEventCallback.default)(updateDimensions);
   const debouncedUpdateDimensions = React.useMemo(() => props.resizeThrottleMs > 0 ? (0, _throttle.throttle)(() => {
     updateDimensionCallback();
     apiRef.current.publishEvent('debouncedResize', rootDimensionsRef.current);
@@ -222,7 +223,7 @@ function useGridDimensions(apiRef, props) {
     updateDimensions,
     getViewportPageSize
   };
-  (0, _utils.unstable_useEnhancedEffect)(updateDimensions, [updateDimensions]);
+  (0, _useEnhancedEffect.default)(updateDimensions, [updateDimensions]);
   (0, _useGridApiMethod.useGridApiMethod)(apiRef, apiPublic, 'public');
   (0, _useGridApiMethod.useGridApiMethod)(apiRef, apiPrivate, 'private');
   const handleRootMount = React.useCallback(root => {
@@ -279,28 +280,28 @@ function getStaticDimensions(props, apiRef, density, pinnedColumnns) {
   };
 }
 const scrollbarSizeCache = new WeakMap();
-function measureScrollbarSize(rootElement, scrollbarSize) {
+function measureScrollbarSize(element, scrollbarSize) {
   if (scrollbarSize !== undefined) {
     return scrollbarSize;
   }
-  if (rootElement === null) {
+  if (element === null) {
     return 0;
   }
-  const cachedSize = scrollbarSizeCache.get(rootElement);
+  const cachedSize = scrollbarSizeCache.get(element);
   if (cachedSize !== undefined) {
     return cachedSize;
   }
-  const doc = (0, _utils.unstable_ownerDocument)(rootElement);
+  const doc = (0, _ownerDocument.default)(element);
   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);
+  element.appendChild(scrollDiv);
   const size = scrollDiv.offsetWidth - scrollDiv.clientWidth;
-  rootElement.removeChild(scrollDiv);
-  scrollbarSizeCache.set(rootElement, size);
+  element.removeChild(scrollDiv);
+  scrollbarSizeCache.set(element, size);
   return size;
 }
 function areElementSizesEqual(a, b) {

package/hooks/features/editing/useGridCellEditing.js

@@ -10,7 +10,8 @@ var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runt
 var _toPropertyKey2 = _interopRequireDefault(require("@babel/runtime/helpers/toPropertyKey"));
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var React = _interopRequireWildcard(require("react"));
-var _utils = require("@mui/utils");
+var _useEventCallback = _interopRequireDefault(require("@mui/utils/useEventCallback"));
+var _useEnhancedEffect = _interopRequireDefault(require("@mui/utils/useEnhancedEffect"));
 var _warning = require("@mui/x-internals/warning");
 var _useGridApiEventHandler = require("../../utils/useGridApiEventHandler");
 var _gridEditRowModel = require("../../../models/gridEditRowModel");
@@ -18,9 +19,9 @@ var _useGridApiMethod = require("../../utils/useGridApiMethod");
 var _gridEditingSelectors = require("./gridEditingSelectors");
 var _keyboardUtils = require("../../../utils/keyboardUtils");
 var _gridRowsSelector = require("../rows/gridRowsSelector");
-var _utils2 = require("../../../utils/utils");
+var _utils = require("../../../utils/utils");
 var _gridEditCellParams = require("../../../models/params/gridEditCellParams");
-var _utils3 = require("./utils");
+var _utils2 = require("./utils");
 const _excluded = ["id", "field"],
   _excluded2 = ["id", "field"];
 const useGridCellEditing = (apiRef, props) => {
@@ -186,7 +187,7 @@ const useGridCellEditing = (apiRef, props) => {
     const isEditing = editingState[id] && editingState[id][field];
     return isEditing ? _gridEditRowModel.GridCellModes.Edit : _gridEditRowModel.GridCellModes.View;
   }, [apiRef]);
-  const updateCellModesModel = (0, _utils.unstable_useEventCallback)(newModel => {
+  const updateCellModesModel = (0, _useEventCallback.default)(newModel => {
     const isNewModelDifferentFromProp = newModel !== props.cellModesModel;
     if (onCellModesModelChange && isNewModelDifferentFromProp) {
       onCellModesModelChange(newModel, {
@@ -248,7 +249,7 @@ const useGridCellEditing = (apiRef, props) => {
       mode: _gridEditRowModel.GridCellModes.Edit
     }, other));
   }, [throwIfNotEditable, throwIfNotInMode, updateFieldInCellModesModel]);
-  const updateStateToStartCellEditMode = (0, _utils.unstable_useEventCallback)(async params => {
+  const updateStateToStartCellEditMode = (0, _useEventCallback.default)(async params => {
     const {
       id,
       field,
@@ -258,7 +259,7 @@ const useGridCellEditing = (apiRef, props) => {
     const value = apiRef.current.getCellValue(id, field);
     let newValue = value;
     if (deleteValue) {
-      newValue = (0, _utils3.getDefaultCellValue)(apiRef.current.getColumn(field));
+      newValue = (0, _utils2.getDefaultCellValue)(apiRef.current.getColumn(field));
     } else if (initialValue) {
       newValue = initialValue;
     }
@@ -299,7 +300,7 @@ const useGridCellEditing = (apiRef, props) => {
       mode: _gridEditRowModel.GridCellModes.View
     }, other));
   }, [throwIfNotInMode, updateFieldInCellModesModel]);
-  const updateStateToStopCellEditMode = (0, _utils.unstable_useEventCallback)(async params => {
+  const updateStateToStopCellEditMode = (0, _useEventCallback.default)(async params => {
     const {
       id,
       field,
@@ -448,12 +449,12 @@ const useGridCellEditing = (apiRef, props) => {
   }, [cellModesModelProp, updateCellModesModel]);
 
   // Run this effect synchronously so that the keyboard event can impact the yet-to-be-rendered input.
-  (0, _utils.unstable_useEnhancedEffect)(() => {
+  (0, _useEnhancedEffect.default)(() => {
     const rowsLookup = (0, _gridRowsSelector.gridRowsLookupSelector)(apiRef);
 
     // Update the ref here because updateStateToStopCellEditMode may change it later
     const copyOfPrevCellModes = prevCellModesModel.current;
-    prevCellModesModel.current = (0, _utils2.deepClone)(cellModesModel); // Do a deep-clone because the attributes might be changed later
+    prevCellModesModel.current = (0, _utils.deepClone)(cellModesModel); // Do a deep-clone because the attributes might be changed later
 
     Object.entries(cellModesModel).forEach(([id, fields]) => {
       Object.entries(fields).forEach(([field, params]) => {