@mui/x-data-grid 8.0.0-alpha.0 → 8.0.0-alpha.10

package/node/hooks/core/pipeProcessing/useGridRegisterPipeApplier.js

@@ -8,7 +8,7 @@ exports.useGridRegisterPipeApplier = void 0;
 var React = _interopRequireWildcard(require("react"));
 var _useFirstRender = require("../../utils/useFirstRender");
 const useGridRegisterPipeApplier = (apiRef, group, callback) => {
-  const cleanup = React.useRef();
+  const cleanup = React.useRef(null);
   const id = React.useRef(`mui-${Math.round(Math.random() * 1e9)}`);
   const registerPreProcessor = React.useCallback(() => {
     cleanup.current = apiRef.current.registerPipeApplier(group, id.current, callback);

package/node/hooks/core/pipeProcessing/useGridRegisterPipeProcessor.js

@@ -8,7 +8,7 @@ exports.useGridRegisterPipeProcessor = void 0;
 var React = _interopRequireWildcard(require("react"));
 var _useFirstRender = require("../../utils/useFirstRender");
 const useGridRegisterPipeProcessor = (apiRef, group, callback) => {
-  const cleanup = React.useRef();
+  const cleanup = React.useRef(null);
   const id = React.useRef(`mui-${Math.round(Math.random() * 1e9)}`);
   const registerPreProcessor = React.useCallback(() => {
     cleanup.current = apiRef.current.registerPipeProcessor(group, id.current, callback);

package/node/hooks/core/strategyProcessing/gridStrategyProcessingApi.js

@@ -2,4 +2,10 @@
 
 Object.defineProperty(exports, "__esModule", {
   value: true
-});
+});
+exports.GridStrategyGroup = void 0;
+let GridStrategyGroup = exports.GridStrategyGroup = /*#__PURE__*/function (GridStrategyGroup) {
+  GridStrategyGroup["DataSource"] = "dataSource";
+  GridStrategyGroup["RowTree"] = "rowTree";
+  return GridStrategyGroup;
+}({});

package/node/hooks/core/strategyProcessing/useGridStrategyProcessing.js

@@ -9,13 +9,15 @@ exports.useGridStrategyProcessing = exports.GRID_STRATEGIES_PROCESSORS = exports
 var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 var _toPropertyKey2 = _interopRequireDefault(require("@babel/runtime/helpers/toPropertyKey"));
 var React = _interopRequireWildcard(require("react"));
+var _gridStrategyProcessingApi = require("./gridStrategyProcessingApi");
 var _useGridApiMethod = require("../../utils/useGridApiMethod");
 const GRID_DEFAULT_STRATEGY = exports.GRID_DEFAULT_STRATEGY = 'none';
 const GRID_STRATEGIES_PROCESSORS = exports.GRID_STRATEGIES_PROCESSORS = {
-  rowTreeCreation: 'rowTree',
-  filtering: 'rowTree',
-  sorting: 'rowTree',
-  visibleRowsLookupCreation: 'rowTree'
+  dataSourceRowsUpdate: _gridStrategyProcessingApi.GridStrategyGroup.DataSource,
+  rowTreeCreation: _gridStrategyProcessingApi.GridStrategyGroup.RowTree,
+  filtering: _gridStrategyProcessingApi.GridStrategyGroup.RowTree,
+  sorting: _gridStrategyProcessingApi.GridStrategyGroup.RowTree,
+  visibleRowsLookupCreation: _gridStrategyProcessingApi.GridStrategyGroup.RowTree
 };
 /**
  * Implements a variant of the Strategy Pattern (see https://en.wikipedia.org/wiki/Strategy_pattern)
@@ -52,10 +54,7 @@ const GRID_STRATEGIES_PROCESSORS = exports.GRID_STRATEGIES_PROCESSORS = {
  * =====================================================================================================================
  *
  * Each processor name is part of a strategy group which can only have one active strategy at the time.
- * For now, there is only one strategy group named `rowTree` which customize
- * - row tree creation algorithm.
- * - sorting algorithm.
- * - filtering algorithm.
+ * There are two active groups named `rowTree` and `dataSource`.
  */
 const useGridStrategyProcessing = apiRef => {
   const availableStrategies = React.useRef(new Map());

package/node/hooks/core/useGridApiInitialization.js

@@ -76,8 +76,8 @@ function createPublicAPI(privateApiRef) {
   return publicApi;
 }
 function useGridApiInitialization(inputApiRef, props) {
-  const publicApiRef = React.useRef();
-  const privateApiRef = React.useRef();
+  const publicApiRef = React.useRef(null);
+  const privateApiRef = React.useRef(null);
   if (!privateApiRef.current) {
     privateApiRef.current = createPrivateAPI(publicApiRef);
   }

package/node/hooks/core/useGridStateInitialization.js

@@ -32,8 +32,8 @@ const useGridStateInitialization = apiRef => {
     const updatedControlStateIds = [];
     Object.keys(controlStateMapRef.current).forEach(stateId => {
       const controlState = controlStateMapRef.current[stateId];
-      const oldSubState = controlState.stateSelector(apiRef.current.state, apiRef.current.instanceId);
-      const newSubState = controlState.stateSelector(newState, apiRef.current.instanceId);
+      const oldSubState = controlState.stateSelector(apiRef.current.state, undefined, apiRef.current.instanceId);
+      const newSubState = controlState.stateSelector(newState, undefined, apiRef.current.instanceId);
       if (newSubState === oldSubState) {
         return;
       }
@@ -65,7 +65,7 @@ const useGridStateInitialization = apiRef => {
         hasPropChanged
       } = updatedControlStateIds[0];
       const controlState = controlStateMapRef.current[stateId];
-      const model = controlState.stateSelector(newState, apiRef.current.instanceId);
+      const model = controlState.stateSelector(newState, undefined, apiRef.current.instanceId);
       if (controlState.propOnChange && hasPropChanged) {
         controlState.propOnChange(model, {
           reason,

package/node/hooks/features/columnHeaders/useGridColumnHeaders.js

@@ -10,7 +10,6 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 var React = _interopRequireWildcard(require("react"));
 var _clsx = _interopRequireDefault(require("clsx"));
 var _styles = require("@mui/material/styles");
-var _RtlProvider = require("@mui/system/RtlProvider");
 var _utils = require("../../utils");
 var _useGridRootProps = require("../../utils/useGridRootProps");
 var _useGridPrivateApiContext = require("../../utils/useGridPrivateApiContext");
@@ -26,6 +25,8 @@ var _GridScrollbarFillerCell = require("../../../components/GridScrollbarFillerC
 var _getPinnedCellOffset = require("../../../internals/utils/getPinnedCellOffset");
 var _GridColumnHeaderSeparator = require("../../../components/columnHeaders/GridColumnHeaderSeparator");
 var _gridClasses = require("../../../constants/gridClasses");
+var _cellBorderUtils = require("../../../utils/cellBorderUtils");
+var _constants = require("../../../internals/constants");
 var _jsxRuntime = require("react/jsx-runtime");
 const GridColumnHeaderRow = exports.GridColumnHeaderRow = (0, _styles.styled)('div', {
   name: 'MuiDataGrid',
@@ -52,10 +53,8 @@ const useGridColumnHeaders = props => {
   const [dragCol, setDragCol] = React.useState('');
   const [resizeCol, setResizeCol] = React.useState('');
   const apiRef = (0, _useGridPrivateApiContext.useGridPrivateApiContext)();
-  const isRtl = (0, _RtlProvider.useRtl)();
   const rootProps = (0, _useGridRootProps.useGridRootProps)();
   const dimensions = (0, _utils.useGridSelector)(apiRef, _dimensions.gridDimensionsSelector);
-  const hasVirtualization = (0, _utils.useGridSelector)(apiRef, _virtualization.gridVirtualizationColumnEnabledSelector);
   const columnGroupsModel = (0, _utils.useGridSelector)(apiRef, _gridColumnGroupsSelector.gridColumnGroupsUnwrappedModelSelector);
   const columnPositions = (0, _utils.useGridSelector)(apiRef, _columns.gridColumnPositionsSelector);
   const renderContext = (0, _utils.useGridSelector)(apiRef, _virtualization.gridRenderContextColumnsSelector);
@@ -92,11 +91,10 @@ const useGridColumnHeaders = props => {
   // Helper for computation common between getColumnHeaders and getColumnGroupHeaders
   const getColumnsToRender = params => {
     const {
-      renderContext: currentContext = renderContext,
-      maxLastColumn = visibleColumns.length
+      renderContext: currentContext = renderContext
     } = params || {};
     const firstColumnToRender = currentContext.firstColumnIndex;
-    const lastColumnToRender = !hasVirtualization ? maxLastColumn : currentContext.lastColumnIndex;
+    const lastColumnToRender = currentContext.lastColumnIndex;
     const renderedColumns = visibleColumns.slice(firstColumnToRender, lastColumnToRender);
     return {
       renderedColumns,
@@ -105,7 +103,7 @@ const useGridColumnHeaders = props => {
     };
   };
   const getFillers = (params, children, leftOverflow, borderBottom = false) => {
-    const isPinnedRight = params?.position === _columns.GridPinnedColumnPosition.RIGHT;
+    const isPinnedRight = params?.position === _constants.PinnedColumnPosition.RIGHT;
     const isNotPinned = params?.position === undefined;
     const hasScrollbarFiller = pinnedColumns.right.length > 0 && isPinnedRight || pinnedColumns.right.length === 0 && isNotPinned;
     const leftOffsetWidth = offsetLeft - leftOverflow;
@@ -126,33 +124,6 @@ const useGridColumnHeaders = props => {
       })]
     });
   };
-  const getCellOffsetStyle = ({
-    pinnedPosition,
-    columnIndex,
-    computedWidth
-  }) => {
-    let style;
-    const isLeftPinned = pinnedPosition === _columns.GridPinnedColumnPosition.LEFT;
-    const isRightPinned = pinnedPosition === _columns.GridPinnedColumnPosition.RIGHT;
-    if (isLeftPinned || isRightPinned) {
-      const pinnedOffset = (0, _getPinnedCellOffset.getPinnedCellOffset)(pinnedPosition, computedWidth, columnIndex, columnPositions, dimensions);
-      let side = isLeftPinned ? 'left' : 'right';
-      if (isRtl) {
-        side = isLeftPinned ? 'right' : 'left';
-      }
-      if (pinnedPosition === 'left') {
-        style = {
-          [side]: pinnedOffset
-        };
-      }
-      if (pinnedPosition === 'right') {
-        style = {
-          [side]: pinnedOffset
-        };
-      }
-    }
-    return style;
-  };
   const getColumnHeaders = (params, other = {}) => {
     const {
       renderedColumns,
@@ -167,14 +138,15 @@ const useGridColumnHeaders = props => {
       const hasFocus = columnHeaderFocus !== null && columnHeaderFocus.field === colDef.field;
       const open = columnMenuState.open && columnMenuState.field === colDef.field;
       const pinnedPosition = params?.position;
-      const style = getCellOffsetStyle({
-        pinnedPosition,
-        columnIndex,
-        computedWidth: colDef.computedWidth
-      });
-      const siblingWithBorderingSeparator = pinnedPosition === _columns.GridPinnedColumnPosition.RIGHT ? renderedColumns[i - 1] : renderedColumns[i + 1];
+      const scrollbarWidth = dimensions.hasScrollY ? dimensions.scrollbarSize : 0;
+      const pinnedOffset = (0, _getPinnedCellOffset.getPinnedCellOffset)(pinnedPosition, colDef.computedWidth, columnIndex, columnPositions, dimensions.columnsTotalWidth, scrollbarWidth);
+      const siblingWithBorderingSeparator = pinnedPosition === _constants.PinnedColumnPosition.RIGHT ? renderedColumns[i - 1] : renderedColumns[i + 1];
       const isSiblingFocused = siblingWithBorderingSeparator ? columnHeaderFocus !== null && columnHeaderFocus.field === siblingWithBorderingSeparator.field : false;
       const isLastUnpinned = columnIndex + 1 === columnPositions.length - pinnedColumns.right.length;
+      const indexInSection = i;
+      const sectionLength = renderedColumns.length;
+      const showLeftBorder = (0, _cellBorderUtils.shouldCellShowLeftBorder)(pinnedPosition, indexInSection);
+      const showRightBorder = (0, _cellBorderUtils.shouldCellShowRightBorder)(pinnedPosition, indexInSection, sectionLength, rootProps.showCellVerticalBorder, gridHasFiller);
       columns.push(/*#__PURE__*/(0, _jsxRuntime.jsx)(_GridColumnHeaderItem.GridColumnHeaderItem, (0, _extends2.default)({}, sortColumnLookup[colDef.field], {
         columnMenuOpen: open,
         filterItemsCounter: filterColumnLookup[colDef.field] && filterColumnLookup[colDef.field].length,
@@ -187,12 +159,11 @@ const useGridColumnHeaders = props => {
         hasFocus: hasFocus,
         tabIndex: tabIndex,
         pinnedPosition: pinnedPosition,
-        style: style,
-        indexInSection: i,
-        sectionLength: renderedColumns.length,
-        gridHasFiller: gridHasFiller,
+        pinnedOffset: pinnedOffset,
         isLastUnpinned: isLastUnpinned,
-        isSiblingFocused: isSiblingFocused
+        isSiblingFocused: isSiblingFocused,
+        showLeftBorder: showLeftBorder,
+        showRightBorder: showRightBorder
       }, other), colDef.field));
     }
     return getFillers(params, columns, 0);
@@ -204,18 +175,15 @@ const useGridColumnHeaders = props => {
       ownerState: rootProps,
       className: _gridClasses.gridClasses['row--borderBottom'],
       children: [leftRenderContext && getColumnHeaders({
-        position: _columns.GridPinnedColumnPosition.LEFT,
-        renderContext: leftRenderContext,
-        maxLastColumn: leftRenderContext.lastColumnIndex
+        position: _constants.PinnedColumnPosition.LEFT,
+        renderContext: leftRenderContext
       }, {
         disableReorder: true
       }), getColumnHeaders({
-        renderContext,
-        maxLastColumn: visibleColumns.length - pinnedColumns.right.length
+        renderContext
       }), rightRenderContext && getColumnHeaders({
-        position: _columns.GridPinnedColumnPosition.RIGHT,
-        renderContext: rightRenderContext,
-        maxLastColumn: rightRenderContext.lastColumnIndex
+        position: _constants.PinnedColumnPosition.RIGHT,
+        renderContext: rightRenderContext
       }, {
         disableReorder: true,
         separatorSide: _GridColumnHeaderSeparator.GridColumnHeaderSeparatorSides.Left
@@ -274,14 +242,11 @@ const useGridColumnHeaders = props => {
         tabIndex
       };
       const pinnedPosition = params.position;
-      const style = getCellOffsetStyle({
-        pinnedPosition,
-        columnIndex,
-        computedWidth: headerInfo.width
-      });
+      const scrollbarWidth = dimensions.hasScrollY ? dimensions.scrollbarSize : 0;
+      const pinnedOffset = (0, _getPinnedCellOffset.getPinnedCellOffset)(pinnedPosition, headerInfo.width, columnIndex, columnPositions, dimensions.columnsTotalWidth, scrollbarWidth);
       columnIndex += columnFields.length;
       let indexInSection = index;
-      if (pinnedPosition === 'left') {
+      if (pinnedPosition === _constants.PinnedColumnPosition.LEFT) {
         // Group headers can expand to multiple columns, we need to adjust the index
         indexInSection = columnIndex - 1;
       }
@@ -291,16 +256,15 @@ const useGridColumnHeaders = props => {
         fields: headerInfo.fields,
         colIndex: headerInfo.colIndex,
         depth: depth,
-        isLastColumn: headerInfo.colIndex === visibleColumns.length - headerInfo.fields.length,
+        isLastColumn: index === visibleColumnGroupHeader.length - 1,
         maxDepth: headerGroupingMaxDepth,
         height: dimensions.groupHeaderHeight,
         hasFocus: hasFocus,
         tabIndex: tabIndex,
         pinnedPosition: pinnedPosition,
-        style: style,
-        indexInSection: indexInSection,
-        sectionLength: rowStructure.length,
-        gridHasFiller: gridHasFiller
+        pinnedOffset: pinnedOffset,
+        showLeftBorder: (0, _cellBorderUtils.shouldCellShowLeftBorder)(pinnedPosition, indexInSection),
+        showRightBorder: (0, _cellBorderUtils.shouldCellShowRightBorder)(pinnedPosition, indexInSection, visibleColumnGroupHeader.length, rootProps.showCellVerticalBorder, gridHasFiller)
       }, index);
     });
     return getFillers(params, children, leftOverflow);
@@ -318,7 +282,7 @@ const useGridColumnHeaders = props => {
         children: [leftRenderContext && getColumnGroupHeaders({
           depth,
           params: {
-            position: _columns.GridPinnedColumnPosition.LEFT,
+            position: _constants.PinnedColumnPosition.LEFT,
             renderContext: leftRenderContext,
             maxLastColumn: leftRenderContext.lastColumnIndex
           }
@@ -330,7 +294,7 @@ const useGridColumnHeaders = props => {
         }), rightRenderContext && getColumnGroupHeaders({
           depth,
           params: {
-            position: _columns.GridPinnedColumnPosition.RIGHT,
+            position: _constants.PinnedColumnPosition.RIGHT,
             renderContext: rightRenderContext,
             maxLastColumn: rightRenderContext.lastColumnIndex
           }
@@ -345,11 +309,12 @@ const useGridColumnHeaders = props => {
     rightRenderContext,
     pinnedColumns,
     visibleColumns,
-    getCellOffsetStyle,
+    columnPositions,
     getFillers,
     getColumnHeadersRow,
     getColumnsToRender,
     getColumnGroupHeadersRows,
+    getPinnedCellOffset: _getPinnedCellOffset.getPinnedCellOffset,
     isDragging: !!dragCol,
     getInnerProps: () => ({
       role: 'rowgroup'

package/node/hooks/features/columnMenu/useGridColumnMenu.js

@@ -49,7 +49,6 @@ const useGridColumnMenu = apiRef => {
         });
       });
       apiRef.current.hidePreferences();
-      apiRef.current.forceUpdate();
     }
   }, [apiRef, logger]);
   const hideColumnMenu = React.useCallback(() => {
@@ -91,7 +90,6 @@ const useGridColumnMenu = apiRef => {
           columnMenu: newState
         });
       });
-      apiRef.current.forceUpdate();
     }
   }, [apiRef, logger]);
   const toggleColumnMenu = React.useCallback(field => {

package/node/hooks/features/columnResize/gridColumnResizeApi.js

@@ -8,7 +8,8 @@ const DEFAULT_GRID_AUTOSIZE_OPTIONS = exports.DEFAULT_GRID_AUTOSIZE_OPTIONS = {
   includeHeaders: true,
   includeOutliers: false,
   outliersFactor: 1.5,
-  expand: false
+  expand: false,
+  disableColumnVirtualization: true
 };
 
 /**

package/node/hooks/features/columnResize/useGridColumnResize.js

@@ -78,7 +78,7 @@ function preventClick(event) {
  * is disabled.
  */
 function useColumnVirtualizationDisabled(apiRef) {
-  const promise = React.useRef();
+  const promise = React.useRef(undefined);
   const selector = () => (0, _virtualization.gridVirtualizationColumnEnabledSelector)(apiRef);
   const value = (0, _utils2.useGridSelector)(apiRef, selector);
   React.useEffect(() => {
@@ -193,10 +193,10 @@ const useGridColumnResize = (apiRef, props) => {
   // To improve accessibility, the separator has padding on both sides.
   // Clicking inside the padding area should be treated as a click in the separator.
   // This ref stores the offset between the click and the separator.
-  const initialOffsetToSeparator = React.useRef();
-  const resizeDirection = React.useRef();
+  const initialOffsetToSeparator = React.useRef(null);
+  const resizeDirection = React.useRef(null);
   const stopResizeEventTimeout = (0, _useTimeout.useTimeout)();
-  const touchId = React.useRef();
+  const touchId = React.useRef(undefined);
   const updateWidth = newWidth => {
     logger.debug(`Updating width to ${newWidth} for col ${refs.colDef.field}`);
     const prevWidth = refs.columnHeaderElement.offsetWidth;
@@ -469,6 +469,7 @@ const useGridColumnResize = (apiRef, props) => {
       return;
     }
     apiRef.current.autosizeColumns((0, _extends2.default)({}, props.autosizeOptions, {
+      disableColumnVirtualization: false,
       columns: [column.field]
     }));
   });
@@ -495,17 +496,21 @@ const useGridColumnResize = (apiRef, props) => {
     options.columns = options.columns.filter(c => state.columnVisibilityModel[c] !== false);
     const columns = options.columns.map(c => apiRef.current.state.columns.lookup[c]);
     try {
-      apiRef.current.unstable_setColumnVirtualization(false);
-      await columnVirtualizationDisabled();
+      if (!props.disableVirtualization && options.disableColumnVirtualization) {
+        apiRef.current.unstable_setColumnVirtualization(false);
+        await columnVirtualizationDisabled();
+      }
       const widthByField = extractColumnWidths(apiRef, options, columns);
       const newColumns = columns.map(column => (0, _extends2.default)({}, column, {
         width: widthByField[column.field],
-        computedWidth: widthByField[column.field]
+        computedWidth: widthByField[column.field],
+        flex: 0
       }));
       if (options.expand) {
         const visibleColumns = state.orderedFields.map(field => state.lookup[field]).filter(c => state.columnVisibilityModel[c.field] !== false);
         const totalWidth = visibleColumns.reduce((total, column) => total + (widthByField[column.field] ?? column.computedWidth ?? column.width), 0);
-        const availableWidth = apiRef.current.getRootDimensions().viewportInnerSize.width;
+        const dimensions = apiRef.current.getRootDimensions();
+        const availableWidth = dimensions.viewportInnerSize.width;
         const remainingWidth = availableWidth - totalWidth;
         if (remainingWidth > 0) {
           const widthPerColumn = remainingWidth / (newColumns.length || 1);
@@ -527,10 +532,12 @@ const useGridColumnResize = (apiRef, props) => {
         }
       });
     } finally {
-      apiRef.current.unstable_setColumnVirtualization(true);
+      if (!props.disableVirtualization) {
+        apiRef.current.unstable_setColumnVirtualization(true);
+      }
       isAutosizingRef.current = false;
     }
-  }, [apiRef, columnVirtualizationDisabled]);
+  }, [apiRef, columnVirtualizationDisabled, props.disableVirtualization]);
 
   /**
    * EFFECTS

package/node/hooks/features/columns/gridColumnsUtils.js

@@ -334,6 +334,7 @@ function getTotalHeaderHeight(apiRef, props) {
   const maxDepth = (0, _gridColumnGroupsSelector.gridColumnGroupsHeaderMaxDepthSelector)(apiRef);
   const isHeaderFilteringEnabled = (0, _gridHeaderFilteringSelectors.gridHeaderFilteringEnabledSelector)(apiRef);
   const columnHeadersHeight = Math.floor(props.columnHeaderHeight * densityFactor);
+  const columnGroupHeadersHeight = Math.floor((props.columnGroupHeaderHeight ?? props.columnHeaderHeight) * densityFactor);
   const filterHeadersHeight = isHeaderFilteringEnabled ? Math.floor((props.headerFilterHeight ?? props.columnHeaderHeight) * densityFactor) : 0;
-  return columnHeadersHeight * (1 + (maxDepth ?? 0)) + filterHeadersHeight;
+  return columnHeadersHeight + columnGroupHeadersHeight * maxDepth + filterHeadersHeight;
 }

package/node/hooks/features/columns/useGridColumns.js

@@ -252,9 +252,13 @@ function useGridColumns(apiRef, props) {
    */
 
   const prevInnerWidth = React.useRef(null);
-  const handleGridSizeChange = viewportInnerSize => {
-    if (prevInnerWidth.current !== viewportInnerSize.width) {
-      prevInnerWidth.current = viewportInnerSize.width;
+  const handleGridSizeChange = size => {
+    if (prevInnerWidth.current !== size.width) {
+      prevInnerWidth.current = size.width;
+      const hasFlexColumns = (0, _gridColumnsSelector.gridVisibleColumnDefinitionsSelector)(apiRef).some(col => col.flex && col.flex > 0);
+      if (!hasFlexColumns) {
+        return;
+      }
       setGridColumnsState((0, _gridColumnsUtils.hydrateColumnsWidth)((0, _gridColumnsSelector.gridColumnsStateSelector)(apiRef.current.state), apiRef.current.getRootDimensions()));
     }
   };

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

@@ -24,6 +24,8 @@ var _gridRowsMetaSelector = require("../rows/gridRowsMetaSelector");
 var _gridRowsUtils = require("../rows/gridRowsUtils");
 var _gridColumnsUtils = require("../columns/gridColumnsUtils");
 var _dataGridPropsDefaultValues = require("../../../constants/dataGridPropsDefaultValues");
+var _roundToDecimalPlaces = require("../../../utils/roundToDecimalPlaces");
+var _isJSDOM = require("../../../utils/isJSDOM");
 const EMPTY_SIZE = {
   width: 0,
   height: 0
@@ -70,34 +72,19 @@ function useGridDimensions(apiRef, props) {
   const headerHeight = Math.floor(props.columnHeaderHeight * densityFactor);
   const groupHeaderHeight = Math.floor((props.columnGroupHeaderHeight ?? props.columnHeaderHeight) * densityFactor);
   const headerFilterHeight = Math.floor((props.headerFilterHeight ?? props.columnHeaderHeight) * densityFactor);
-  const columnsTotalWidth = roundToDecimalPlaces((0, _columns.gridColumnsTotalWidthSelector)(apiRef), 6);
+  const columnsTotalWidth = (0, _roundToDecimalPlaces.roundToDecimalPlaces)((0, _columns.gridColumnsTotalWidthSelector)(apiRef), 1);
   const headersTotalHeight = (0, _gridColumnsUtils.getTotalHeaderHeight)(apiRef, props);
   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, _throttle.throttle)(setSavedSize, props.resizeThrottleMs), [props.resizeThrottleMs]);
-  const previousSize = React.useRef();
+  React.useEffect(() => debouncedSetSavedSize.clear, [debouncedSetSavedSize]);
   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(() => {
-    const element = apiRef.current.mainElementRef.current;
-    if (!element) {
-      return;
-    }
-    const computedStyle = (0, _utils.unstable_ownerWindow)(element).getComputedStyle(element);
-    const newSize = {
-      width: parseFloat(computedStyle.width) || 0,
-      height: parseFloat(computedStyle.height) || 0
-    };
-    if (!previousSize.current || !areElementSizesEqual(previousSize.current, newSize)) {
-      apiRef.current.publishEvent('resize', newSize);
-      previousSize.current = newSize;
-    }
-  }, [apiRef]);
   const getViewportPageSize = React.useCallback(() => {
     const dimensions = (0, _gridDimensionsSelectors.gridDimensionsSelector)(apiRef.current.state);
     if (!dimensions.isReady) {
@@ -119,15 +106,17 @@ function useGridDimensions(apiRef, props) {
     return Math.min(maximumPageSizeWithoutScrollBar, currentPage.rows.length);
   }, [apiRef, props.pagination, props.paginationMode, props.getRowHeight, rowHeight]);
   const updateDimensions = React.useCallback(() => {
+    // 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 pinnedRowsHeight = (0, _gridRowsUtils.calculatePinnedRowsHeight)(apiRef);
     const scrollbarSize = measureScrollbarSize(rootElement, columnsTotalWidth, props.scrollbarSize);
     const topContainerHeight = headersTotalHeight + pinnedRowsHeight.top;
     const bottomContainerHeight = pinnedRowsHeight.bottom;
-    const nonPinnedColumnsTotalWidth = columnsTotalWidth - leftPinnedWidth - rightPinnedWidth;
     const contentSize = {
-      width: nonPinnedColumnsTotalWidth,
-      height: rowsMeta.currentPageTotalHeight
+      width: columnsTotalWidth,
+      height: (0, _roundToDecimalPlaces.roundToDecimalPlaces)(rowsMeta.currentPageTotalHeight, 1)
     };
     let viewportOuterSize;
     let viewportInnerSize;
@@ -150,7 +139,7 @@ function useGridDimensions(apiRef, props) {
         height: rootDimensionsRef.current.height
       };
       viewportInnerSize = {
-        width: Math.max(0, viewportOuterSize.width - leftPinnedWidth - rightPinnedWidth),
+        width: Math.max(0, viewportOuterSize.width),
         height: Math.max(0, viewportOuterSize.height - topContainerHeight - bottomContainerHeight)
       };
       const content = contentSize;
@@ -208,7 +197,6 @@ function useGridDimensions(apiRef, props) {
     apiRef.current.updateRenderContext?.();
   }, [apiRef, setDimensions, props.scrollbarSize, props.autoHeight, rowsMeta.currentPageTotalHeight, rowHeight, headerHeight, groupHeaderHeight, headerFilterHeight, columnsTotalWidth, headersTotalHeight, leftPinnedWidth, rightPinnedWidth]);
   const apiPublic = {
-    resize,
     getRootDimensions
   };
   const apiPrivate = {
@@ -246,14 +234,11 @@ function useGridDimensions(apiRef, props) {
   const isFirstSizing = React.useRef(true);
   const handleResize = React.useCallback(size => {
     rootDimensionsRef.current = size;
-
-    // jsdom has no layout capabilities
-    const isJSDOM = /jsdom/.test(window.navigator.userAgent);
-    if (size.height === 0 && !errorShown.current && !props.autoHeight && !isJSDOM) {
+    if (size.height === 0 && !errorShown.current && !props.autoHeight && !_isJSDOM.isJSDOM) {
       logger.error(['The parent DOM element of the Data Grid has an empty height.', 'Please make sure that this element has an intrinsic height.', 'The grid displays with a height of 0px.', '', 'More details: https://mui.com/r/x-data-grid-no-dimensions.'].join('\n'));
       errorShown.current = true;
     }
-    if (size.width === 0 && !errorShown.current && !isJSDOM) {
+    if (size.width === 0 && !errorShown.current && !_isJSDOM.isJSDOM) {
       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;
     }
@@ -291,12 +276,6 @@ function measureScrollbarSize(rootElement, columnsTotalWidth, scrollbarSize) {
   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;
-}
 function areElementSizesEqual(a, b) {
   return a.width === b.width && a.height === b.height;
 }

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

@@ -3,9 +3,15 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.gridEditRowsStateSelector = void 0;
+exports.gridRowIsEditingSelector = exports.gridEditRowsStateSelector = exports.gridEditCellStateSelector = void 0;
+var _createSelector = require("../../../utils/createSelector");
 /**
  * Select the row editing state.
  */
 const gridEditRowsStateSelector = state => state.editRows;
-exports.gridEditRowsStateSelector = gridEditRowsStateSelector;
+exports.gridEditRowsStateSelector = gridEditRowsStateSelector;
+const gridRowIsEditingSelector = exports.gridRowIsEditingSelector = (0, _createSelector.createSelector)(gridEditRowsStateSelector, (editRows, rowId) => Boolean(editRows[rowId]));
+const gridEditCellStateSelector = exports.gridEditCellStateSelector = (0, _createSelector.createSelector)(gridEditRowsStateSelector, (editRows, {
+  rowId,
+  field
+}) => editRows[rowId]?.[field] ?? null);

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

@@ -346,7 +346,7 @@ const useGridCellEditing = (apiRef, props) => {
         if (onProcessRowUpdateError) {
           onProcessRowUpdateError(errorThrown);
         } else if (process.env.NODE_ENV !== 'production') {
-          (0, _warning.warnOnce)(['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, for example `<DataGrid onProcessRowUpdateError={(error) => ...} />`.', 'For more detail, see https://mui.com/x/react-data-grid/editing/#server-side-persistence.'], 'error');
+          (0, _warning.warnOnce)(['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, for example `<DataGrid onProcessRowUpdateError={(error) => ...} />`.', 'For more detail, see https://mui.com/x/react-data-grid/editing/persistence/.'], 'error');
         }
       };
       try {
@@ -450,7 +450,7 @@ const useGridCellEditing = (apiRef, props) => {
 
   // Run this effect synchronously so that the keyboard event can impact the yet-to-be-rendered input.
   (0, _utils.unstable_useEnhancedEffect)(() => {
-    const idToIdLookup = (0, _gridRowsSelector.gridRowsDataRowIdToIdLookupSelector)(apiRef);
+    const rowsLookup = (0, _gridRowsSelector.gridRowsLookupSelector)(apiRef);
 
     // Update the ref here because updateStateToStopCellEditMode may change it later
     const copyOfPrevCellModes = prevCellModesModel.current;
@@ -459,7 +459,7 @@ const useGridCellEditing = (apiRef, props) => {
     Object.entries(cellModesModel).forEach(([id, fields]) => {
       Object.entries(fields).forEach(([field, params]) => {
         const prevMode = copyOfPrevCellModes[id]?.[field]?.mode || _gridEditRowModel.GridCellModes.View;
-        const originalId = idToIdLookup[id] ?? id;
+        const originalId = rowsLookup[id] ? apiRef.current.getRowId(rowsLookup[id]) : id;
         if (params.mode === _gridEditRowModel.GridCellModes.Edit && prevMode === _gridEditRowModel.GridCellModes.View) {
           updateStateToStartCellEditMode((0, _extends2.default)({
             id: originalId,