@mui/x-data-grid 6.6.0 → 6.8.0

package/legacy/components/cell/GridCell.js

@@ -1,30 +1,48 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-var _excluded = ["align", "children", "colIndex", "colDef", "cellMode", "field", "formattedValue", "hasFocus", "height", "isEditable", "isSelected", "rowId", "tabIndex", "value", "width", "className", "showRightBorder", "extendRowFullWidth", "row", "colSpan", "disableDragEvents", "onClick", "onDoubleClick", "onMouseDown", "onMouseUp", "onMouseOver", "onKeyDown", "onKeyUp", "onDragEnter", "onDragOver"];
+var _excluded = ["changeReason", "unstable_updateValueOnRender"],
+  _excluded2 = ["align", "children", "colIndex", "column", "cellMode", "field", "formattedValue", "hasFocus", "height", "isEditable", "isSelected", "rowId", "tabIndex", "value", "width", "className", "showRightBorder", "extendRowFullWidth", "row", "colSpan", "disableDragEvents", "onClick", "onDoubleClick", "onMouseDown", "onMouseUp", "onMouseOver", "onKeyDown", "onKeyUp", "onDragEnter", "onDragOver"],
+  _excluded3 = ["column", "rowId", "editCellState", "align", "children", "colIndex", "height", "width", "className", "showRightBorder", "extendRowFullWidth", "row", "colSpan", "disableDragEvents", "onClick", "onDoubleClick", "onMouseDown", "onMouseUp", "onMouseOver", "onKeyDown", "onKeyUp", "onDragEnter", "onDragOver"],
+  _excluded4 = ["changeReason", "unstable_updateValueOnRender"];
 /* eslint-disable jsx-a11y/no-noninteractive-element-interactions */
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import { unstable_useForkRef as useForkRef, unstable_composeClasses as composeClasses, unstable_ownerDocument as ownerDocument, unstable_capitalize as capitalize } from '@mui/utils';
-import { getDataGridUtilityClass } from '../../constants/gridClasses';
+import { fastMemo } from '../../utils/fastMemo';
+import { doesSupportPreventScroll } from '../../utils/doesSupportPreventScroll';
+import { getDataGridUtilityClass, gridClasses } from '../../constants/gridClasses';
 import { GridCellModes } from '../../models';
+import { useGridSelector, objectShallowCompare } from '../../hooks/utils/useGridSelector';
 import { useGridApiContext } from '../../hooks/utils/useGridApiContext';
 import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
 import { gridFocusCellSelector } from '../../hooks/features/focus/gridFocusStateSelector';
+import { MissingRowIdError } from '../../hooks/features/rows/useGridParamsApi';
 import { jsx as _jsx } from "react/jsx-runtime";
-// Based on https://stackoverflow.com/a/59518678
-var cachedSupportsPreventScroll;
-function doesSupportPreventScroll() {
-  if (cachedSupportsPreventScroll === undefined) {
-    document.createElement('div').focus({
-      get preventScroll() {
-        cachedSupportsPreventScroll = true;
-        return false;
-      }
-    });
-  }
-  return cachedSupportsPreventScroll;
-}
+var EMPTY_CELL_PARAMS = {
+  id: -1,
+  field: '__unset__',
+  row: {},
+  rowNode: {
+    id: -1,
+    depth: 0,
+    type: 'leaf',
+    parent: -1,
+    groupingKey: null
+  },
+  colDef: {
+    type: 'string',
+    field: '__unset__',
+    computedWidth: 0
+  },
+  cellMode: GridCellModes.View,
+  hasFocus: false,
+  tabIndex: -1,
+  value: null,
+  formattedValue: '__unset__',
+  isEditable: false,
+  api: {}
+};
 var useUtilityClasses = function useUtilityClasses(ownerState) {
   var align = ownerState.align,
     showRightBorder = ownerState.showRightBorder,
@@ -38,12 +56,105 @@ var useUtilityClasses = function useUtilityClasses(ownerState) {
   return composeClasses(slots, getDataGridUtilityClass, classes);
 };
 var warnedOnce = false;
+
+// GridCellWrapper is a compatibility layer for the V6 cell slot. If we can use the more efficient
+// `GridCellV7`, we should. That component is a merge of `GridCellWrapper` and `GridCell`.
+// TODO(v7): Remove the wrapper & cellV6 and use the cellV7 exclusively.
+// TODO(v7): Removing the wrapper will break the docs performance visualization demo.
+var GridCellWrapper = /*#__PURE__*/React.forwardRef(function (props, ref) {
+  var column = props.column,
+    rowId = props.rowId,
+    editCellState = props.editCellState;
+  var apiRef = useGridApiContext();
+  var rootProps = useGridRootProps();
+  var field = column.field;
+  var cellParamsWithAPI = useGridSelector(apiRef, function () {
+    // This is required because `.getCellParams` tries to get the `state.rows.tree` entry
+    // associated with `rowId`/`fieldId`, but this selector runs after the state has been
+    // updated, while `rowId`/`fieldId` reference an entry in the old state.
+    try {
+      var cellParams = apiRef.current.getCellParams(rowId, field);
+      var result = cellParams;
+      result.api = apiRef.current;
+      return result;
+    } catch (e) {
+      if (e instanceof MissingRowIdError) {
+        return EMPTY_CELL_PARAMS;
+      }
+      throw e;
+    }
+  }, objectShallowCompare);
+  var isSelected = useGridSelector(apiRef, function () {
+    return apiRef.current.unstable_applyPipeProcessors('isCellSelected', false, {
+      id: rowId,
+      field: field
+    });
+  });
+  if (cellParamsWithAPI === EMPTY_CELL_PARAMS) {
+    return null;
+  }
+  var cellMode = cellParamsWithAPI.cellMode,
+    hasFocus = cellParamsWithAPI.hasFocus,
+    isEditable = cellParamsWithAPI.isEditable,
+    value = cellParamsWithAPI.value,
+    formattedValue = cellParamsWithAPI.formattedValue;
+  var managesOwnFocus = column.type === 'actions';
+  var tabIndex = (cellMode === 'view' || !isEditable) && !managesOwnFocus ? cellParamsWithAPI.tabIndex : -1;
+  var rootClasses = rootProps.classes,
+    getCellClassName = rootProps.getCellClassName;
+  var classNames = apiRef.current.unstable_applyPipeProcessors('cellClassName', [], {
+    id: rowId,
+    field: field
+  });
+  if (column.cellClassName) {
+    classNames.push(typeof column.cellClassName === 'function' ? column.cellClassName(cellParamsWithAPI) : column.cellClassName);
+  }
+  if (getCellClassName) {
+    classNames.push(getCellClassName(cellParamsWithAPI));
+  }
+  var children;
+  if (editCellState == null && column.renderCell) {
+    children = column.renderCell(cellParamsWithAPI);
+    classNames.push(gridClasses['cell--withRenderer']);
+    classNames.push(rootClasses == null ? void 0 : rootClasses['cell--withRenderer']);
+  }
+  if (editCellState != null && column.renderEditCell) {
+    var updatedRow = apiRef.current.getRowWithUpdatedValues(rowId, column.field);
+
+    // eslint-disable-next-line @typescript-eslint/naming-convention
+    var changeReason = editCellState.changeReason,
+      unstable_updateValueOnRender = editCellState.unstable_updateValueOnRender,
+      editCellStateRest = _objectWithoutProperties(editCellState, _excluded);
+    var params = _extends({}, cellParamsWithAPI, {
+      row: updatedRow
+    }, editCellStateRest);
+    children = column.renderEditCell(params);
+    classNames.push(gridClasses['cell--editing']);
+    classNames.push(rootClasses == null ? void 0 : rootClasses['cell--editing']);
+  }
+  var slots = rootProps.slots;
+  var CellComponent = slots.cell;
+  var cellProps = _extends({}, props, {
+    ref: ref,
+    field: field,
+    formattedValue: formattedValue,
+    hasFocus: hasFocus,
+    isEditable: isEditable,
+    isSelected: isSelected,
+    value: value,
+    cellMode: cellMode,
+    children: children,
+    tabIndex: tabIndex,
+    className: clsx(classNames)
+  });
+  return /*#__PURE__*/React.createElement(CellComponent, cellProps);
+});
 var GridCell = /*#__PURE__*/React.forwardRef(function (props, ref) {
   var _rootProps$experiment;
   var align = props.align,
-    children = props.children,
+    childrenProp = props.children,
     colIndex = props.colIndex,
-    colDef = props.colDef,
+    column = props.column,
     cellMode = props.cellMode,
     field = props.field,
     formattedValue = props.formattedValue,
@@ -70,7 +181,7 @@ var GridCell = /*#__PURE__*/React.forwardRef(function (props, ref) {
     onKeyUp = props.onKeyUp,
     onDragEnter = props.onDragEnter,
     onDragOver = props.onDragOver,
-    other = _objectWithoutProperties(props, _excluded);
+    other = _objectWithoutProperties(props, _excluded2);
   var valueToRender = formattedValue == null ? value : formattedValue;
   var cellRef = React.useRef(null);
   var handleRef = useForkRef(ref, cellRef);
@@ -158,24 +269,21 @@ var GridCell = /*#__PURE__*/React.forwardRef(function (props, ref) {
       }
     };
   }
-  var column = apiRef.current.getColumn(field);
   var managesOwnFocus = column.type === 'actions';
-  var renderChildren = function renderChildren() {
-    if (children === undefined) {
-      var valueString = valueToRender == null ? void 0 : valueToRender.toString();
-      return /*#__PURE__*/_jsx("div", {
-        className: classes.content,
-        title: valueString,
-        children: valueString
-      });
-    }
-    if ( /*#__PURE__*/React.isValidElement(children) && managesOwnFocus) {
-      return /*#__PURE__*/React.cloneElement(children, {
-        focusElementRef: focusElementRef
-      });
-    }
-    return children;
-  };
+  var children = childrenProp;
+  if (children === undefined) {
+    var valueString = valueToRender == null ? void 0 : valueToRender.toString();
+    children = /*#__PURE__*/_jsx("div", {
+      className: classes.content,
+      title: valueString,
+      children: valueString
+    });
+  }
+  if ( /*#__PURE__*/React.isValidElement(children) && managesOwnFocus) {
+    children = /*#__PURE__*/React.cloneElement(children, {
+      focusElementRef: focusElementRef
+    });
+  }
   var draggableEventHandlers = disableDragEvents ? null : {
     onDragEnter: publish('cellDragEnter', onDragEnter),
     onDragOver: publish('cellDragOver', onDragOver)
@@ -189,7 +297,7 @@ var GridCell = /*#__PURE__*/React.forwardRef(function (props, ref) {
     "aria-colindex": colIndex + 1,
     "aria-colspan": colSpan,
     style: style,
-    tabIndex: (cellMode === 'view' || !isEditable) && !managesOwnFocus ? tabIndex : -1,
+    tabIndex: tabIndex,
     onClick: publish('cellClick', onClick),
     onDoubleClick: publish('cellDoubleClick', onDoubleClick),
     onMouseOver: publish('cellMouseOver', onMouseOver),
@@ -199,10 +307,33 @@ var GridCell = /*#__PURE__*/React.forwardRef(function (props, ref) {
     onKeyUp: publish('cellKeyUp', onKeyUp)
   }, draggableEventHandlers, other, {
     onFocus: handleFocus,
-    children: renderChildren()
+    children: children
   }));
 });
-var MemoizedCell = /*#__PURE__*/React.memo(GridCell);
+var MemoizedCellWrapper = fastMemo(GridCellWrapper);
+process.env.NODE_ENV !== "production" ? GridCellWrapper.propTypes = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // | To update them edit the TypeScript types and run "yarn proptypes"  |
+  // ----------------------------------------------------------------------
+  align: PropTypes.oneOf(['center', 'left', 'right']),
+  className: PropTypes.string,
+  colIndex: PropTypes.number,
+  colSpan: PropTypes.number,
+  column: PropTypes.object,
+  disableDragEvents: PropTypes.bool,
+  height: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.number]),
+  onClick: PropTypes.func,
+  onDoubleClick: PropTypes.func,
+  onDragEnter: PropTypes.func,
+  onDragOver: PropTypes.func,
+  onKeyDown: PropTypes.func,
+  onMouseDown: PropTypes.func,
+  onMouseUp: PropTypes.func,
+  rowId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+  showRightBorder: PropTypes.bool,
+  width: PropTypes.number
+} : void 0;
 process.env.NODE_ENV !== "production" ? GridCell.propTypes = {
   // ----------------------------- Warning --------------------------------
   // | These PropTypes are generated from the TypeScript type definitions |
@@ -214,13 +345,262 @@ process.env.NODE_ENV !== "production" ? GridCell.propTypes = {
   className: PropTypes.string,
   colIndex: PropTypes.number,
   colSpan: PropTypes.number,
+  column: PropTypes.object,
+  disableDragEvents: PropTypes.bool,
+  editCellState: PropTypes.shape({
+    changeReason: PropTypes.oneOf(['debouncedSetEditCellValue', 'setEditCellValue']),
+    isProcessingProps: PropTypes.bool,
+    isValidating: PropTypes.bool,
+    value: PropTypes.any
+  }),
+  height: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.number]),
+  onClick: PropTypes.func,
+  onDoubleClick: PropTypes.func,
+  onDragEnter: PropTypes.func,
+  onDragOver: PropTypes.func,
+  onKeyDown: PropTypes.func,
+  onMouseDown: PropTypes.func,
+  onMouseUp: PropTypes.func,
+  rowId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+  showRightBorder: PropTypes.bool,
+  width: PropTypes.number
+} : void 0;
+export { MemoizedCellWrapper as GridCellWrapper, GridCell };
+var GridCellV7 = /*#__PURE__*/React.forwardRef(function (props, ref) {
+  var _rootProps$experiment2;
+  var column = props.column,
+    rowId = props.rowId,
+    editCellState = props.editCellState,
+    align = props.align,
+    childrenProp = props.children,
+    colIndex = props.colIndex,
+    height = props.height,
+    width = props.width,
+    className = props.className,
+    showRightBorder = props.showRightBorder,
+    extendRowFullWidth = props.extendRowFullWidth,
+    row = props.row,
+    colSpan = props.colSpan,
+    disableDragEvents = props.disableDragEvents,
+    onClick = props.onClick,
+    onDoubleClick = props.onDoubleClick,
+    onMouseDown = props.onMouseDown,
+    onMouseUp = props.onMouseUp,
+    onMouseOver = props.onMouseOver,
+    onKeyDown = props.onKeyDown,
+    onKeyUp = props.onKeyUp,
+    onDragEnter = props.onDragEnter,
+    onDragOver = props.onDragOver,
+    other = _objectWithoutProperties(props, _excluded3);
+  var apiRef = useGridApiContext();
+  var rootProps = useGridRootProps();
+  var field = column.field;
+  var cellParamsWithAPI = useGridSelector(apiRef, function () {
+    // This is required because `.getCellParams` tries to get the `state.rows.tree` entry
+    // associated with `rowId`/`fieldId`, but this selector runs after the state has been
+    // updated, while `rowId`/`fieldId` reference an entry in the old state.
+    try {
+      var cellParams = apiRef.current.getCellParams(rowId, field);
+      var result = cellParams;
+      result.api = apiRef.current;
+      return result;
+    } catch (e) {
+      if (e instanceof MissingRowIdError) {
+        return EMPTY_CELL_PARAMS;
+      }
+      throw e;
+    }
+  }, objectShallowCompare);
+  var isSelected = useGridSelector(apiRef, function () {
+    return apiRef.current.unstable_applyPipeProcessors('isCellSelected', false, {
+      id: rowId,
+      field: field
+    });
+  });
+  var cellMode = cellParamsWithAPI.cellMode,
+    hasFocus = cellParamsWithAPI.hasFocus,
+    isEditable = cellParamsWithAPI.isEditable,
+    value = cellParamsWithAPI.value,
+    formattedValue = cellParamsWithAPI.formattedValue;
+  var managesOwnFocus = column.type === 'actions';
+  var tabIndex = (cellMode === 'view' || !isEditable) && !managesOwnFocus ? cellParamsWithAPI.tabIndex : -1;
+  var rootClasses = rootProps.classes,
+    getCellClassName = rootProps.getCellClassName;
+  var classNames = apiRef.current.unstable_applyPipeProcessors('cellClassName', [], {
+    id: rowId,
+    field: field
+  });
+  if (column.cellClassName) {
+    classNames.push(typeof column.cellClassName === 'function' ? column.cellClassName(cellParamsWithAPI) : column.cellClassName);
+  }
+  if (getCellClassName) {
+    classNames.push(getCellClassName(cellParamsWithAPI));
+  }
+  var valueToRender = formattedValue == null ? value : formattedValue;
+  var cellRef = React.useRef(null);
+  var handleRef = useForkRef(ref, cellRef);
+  var focusElementRef = React.useRef(null);
+  var ownerState = {
+    align: align,
+    showRightBorder: showRightBorder,
+    isEditable: isEditable,
+    classes: rootProps.classes,
+    isSelected: isSelected
+  };
+  var classes = useUtilityClasses(ownerState);
+  var publishMouseUp = React.useCallback(function (eventName) {
+    return function (event) {
+      var params = apiRef.current.getCellParams(rowId, field || '');
+      apiRef.current.publishEvent(eventName, params, event);
+      if (onMouseUp) {
+        onMouseUp(event);
+      }
+    };
+  }, [apiRef, field, onMouseUp, rowId]);
+  var publishMouseDown = React.useCallback(function (eventName) {
+    return function (event) {
+      var params = apiRef.current.getCellParams(rowId, field || '');
+      apiRef.current.publishEvent(eventName, params, event);
+      if (onMouseDown) {
+        onMouseDown(event);
+      }
+    };
+  }, [apiRef, field, onMouseDown, rowId]);
+  var publish = React.useCallback(function (eventName, propHandler) {
+    return function (event) {
+      // The row might have been deleted during the click
+      if (!apiRef.current.getRow(rowId)) {
+        return;
+      }
+      var params = apiRef.current.getCellParams(rowId, field || '');
+      apiRef.current.publishEvent(eventName, params, event);
+      if (propHandler) {
+        propHandler(event);
+      }
+    };
+  }, [apiRef, field, rowId]);
+  var style = {
+    minWidth: width,
+    maxWidth: width,
+    minHeight: height,
+    maxHeight: height === 'auto' ? 'none' : height // max-height doesn't support "auto"
+  };
+
+  React.useEffect(function () {
+    if (!hasFocus || cellMode === GridCellModes.Edit) {
+      return;
+    }
+    var doc = ownerDocument(apiRef.current.rootElementRef.current);
+    if (cellRef.current && !cellRef.current.contains(doc.activeElement)) {
+      var focusableElement = cellRef.current.querySelector('[tabindex="0"]');
+      var elementToFocus = focusElementRef.current || focusableElement || cellRef.current;
+      if (doesSupportPreventScroll()) {
+        elementToFocus.focus({
+          preventScroll: true
+        });
+      } else {
+        var scrollPosition = apiRef.current.getScrollPosition();
+        elementToFocus.focus();
+        apiRef.current.scroll(scrollPosition);
+      }
+    }
+  }, [hasFocus, cellMode, apiRef]);
+  if (cellParamsWithAPI === EMPTY_CELL_PARAMS) {
+    return null;
+  }
+  var handleFocus = other.onFocus;
+  if (process.env.NODE_ENV === 'test' && (_rootProps$experiment2 = rootProps.experimentalFeatures) != null && _rootProps$experiment2.warnIfFocusStateIsNotSynced) {
+    handleFocus = function handleFocus(event) {
+      var focusedCell = gridFocusCellSelector(apiRef);
+      if ((focusedCell == null ? void 0 : focusedCell.id) === rowId && focusedCell.field === field) {
+        if (typeof other.onFocus === 'function') {
+          other.onFocus(event);
+        }
+        return;
+      }
+      if (!warnedOnce) {
+        console.warn(["MUI: The cell with id=".concat(rowId, " and field=").concat(field, " received focus."), "According to the state, the focus should be at id=".concat(focusedCell == null ? void 0 : focusedCell.id, ", field=").concat(focusedCell == null ? void 0 : focusedCell.field, "."), "Not syncing the state may cause unwanted behaviors since the `cellFocusIn` event won't be fired.", 'Call `fireEvent.mouseUp` before the `fireEvent.click` to sync the focus with the state.'].join('\n'));
+        warnedOnce = true;
+      }
+    };
+  }
+  var children;
+  if (editCellState == null && column.renderCell) {
+    children = column.renderCell(cellParamsWithAPI);
+    classNames.push(gridClasses['cell--withRenderer']);
+    classNames.push(rootClasses == null ? void 0 : rootClasses['cell--withRenderer']);
+  }
+  if (editCellState != null && column.renderEditCell) {
+    var updatedRow = apiRef.current.getRowWithUpdatedValues(rowId, column.field);
+
+    // eslint-disable-next-line @typescript-eslint/naming-convention
+    var changeReason = editCellState.changeReason,
+      unstable_updateValueOnRender = editCellState.unstable_updateValueOnRender,
+      editCellStateRest = _objectWithoutProperties(editCellState, _excluded4);
+    var params = _extends({}, cellParamsWithAPI, {
+      row: updatedRow
+    }, editCellStateRest);
+    children = column.renderEditCell(params);
+    classNames.push(gridClasses['cell--editing']);
+    classNames.push(rootClasses == null ? void 0 : rootClasses['cell--editing']);
+  }
+  if (children === undefined) {
+    var valueString = valueToRender == null ? void 0 : valueToRender.toString();
+    children = /*#__PURE__*/_jsx("div", {
+      className: classes.content,
+      title: valueString,
+      children: valueString
+    });
+  }
+  if ( /*#__PURE__*/React.isValidElement(children) && managesOwnFocus) {
+    children = /*#__PURE__*/React.cloneElement(children, {
+      focusElementRef: focusElementRef
+    });
+  }
+  var draggableEventHandlers = disableDragEvents ? null : {
+    onDragEnter: publish('cellDragEnter', onDragEnter),
+    onDragOver: publish('cellDragOver', onDragOver)
+  };
+  return /*#__PURE__*/_jsx("div", _extends({
+    ref: handleRef,
+    className: clsx(className, classNames, classes.root),
+    role: "cell",
+    "data-field": field,
+    "data-colindex": colIndex,
+    "aria-colindex": colIndex + 1,
+    "aria-colspan": colSpan,
+    style: style,
+    tabIndex: tabIndex,
+    onClick: publish('cellClick', onClick),
+    onDoubleClick: publish('cellDoubleClick', onDoubleClick),
+    onMouseOver: publish('cellMouseOver', onMouseOver),
+    onMouseDown: publishMouseDown('cellMouseDown'),
+    onMouseUp: publishMouseUp('cellMouseUp'),
+    onKeyDown: publish('cellKeyDown', onKeyDown),
+    onKeyUp: publish('cellKeyUp', onKeyUp)
+  }, draggableEventHandlers, other, {
+    onFocus: handleFocus,
+    children: children
+  }));
+});
+process.env.NODE_ENV !== "production" ? GridCellV7.propTypes = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // | To update them edit the TypeScript types and run "yarn proptypes"  |
+  // ----------------------------------------------------------------------
+  align: PropTypes.oneOf(['center', 'left', 'right']),
+  className: PropTypes.string,
+  colIndex: PropTypes.number,
+  colSpan: PropTypes.number,
+  column: PropTypes.object,
   disableDragEvents: PropTypes.bool,
-  field: PropTypes.string,
-  formattedValue: PropTypes.any,
-  hasFocus: PropTypes.bool,
+  editCellState: PropTypes.shape({
+    changeReason: PropTypes.oneOf(['debouncedSetEditCellValue', 'setEditCellValue']),
+    isProcessingProps: PropTypes.bool,
+    isValidating: PropTypes.bool,
+    value: PropTypes.any
+  }),
   height: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.number]),
-  isEditable: PropTypes.bool,
-  isSelected: PropTypes.bool,
   onClick: PropTypes.func,
   onDoubleClick: PropTypes.func,
   onDragEnter: PropTypes.func,
@@ -230,8 +610,7 @@ process.env.NODE_ENV !== "production" ? GridCell.propTypes = {
   onMouseUp: PropTypes.func,
   rowId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
   showRightBorder: PropTypes.bool,
-  tabIndex: PropTypes.oneOf([-1, 0]),
-  value: PropTypes.any,
   width: PropTypes.number
 } : void 0;
-export { MemoizedCell as GridCell };
+var MemoizedGridCellV7 = fastMemo(GridCellV7);
+export { MemoizedGridCellV7 as GridCellV7 };

package/legacy/components/cell/index.js

@@ -1,4 +1,4 @@
-export * from './GridCell';
+export { GridCell } from './GridCell';
 export * from './GridBooleanCell';
 export * from './GridEditBooleanCell';
 export * from './GridEditDateCell';

package/legacy/components/containers/GridRootStyles.js

@@ -1,5 +1,6 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+var _columnHeaderStyles;
 import { alpha, styled, darken, lighten } from '@mui/material/styles';
 import { gridClasses } from '../../constants/gridClasses';
 function getBorderColor(theme) {
@@ -11,16 +12,27 @@ function getBorderColor(theme) {
   }
   return darken(alpha(theme.palette.divider, 1), 0.68);
 }
+var columnHeadersStyles = _defineProperty({}, ".".concat(gridClasses.columnSeparator, ", .").concat(gridClasses['columnSeparator--resizing']), {
+  visibility: 'visible',
+  width: 'auto'
+});
+var columnHeaderStyles = (_columnHeaderStyles = {}, _defineProperty(_columnHeaderStyles, "& .".concat(gridClasses.iconButtonContainer), {
+  visibility: 'visible',
+  width: 'auto'
+}), _defineProperty(_columnHeaderStyles, "& .".concat(gridClasses.menuIcon), {
+  width: 'auto',
+  visibility: 'visible'
+}), _columnHeaderStyles);
 export var GridRootStyles = styled('div', {
   name: 'MuiDataGrid',
   slot: 'Root',
   overridesResolver: function overridesResolver(props, styles) {
     return [_defineProperty({}, "&.".concat(gridClasses.autoHeight), styles.autoHeight), _defineProperty({}, "&.".concat(gridClasses.aggregationColumnHeader), styles.aggregationColumnHeader), _defineProperty({}, "&.".concat(gridClasses['aggregationColumnHeader--alignLeft']), styles['aggregationColumnHeader--alignLeft']), _defineProperty({}, "&.".concat(gridClasses['aggregationColumnHeader--alignCenter']), styles['aggregationColumnHeader--alignCenter']), _defineProperty({}, "&.".concat(gridClasses['aggregationColumnHeader--alignRight']), styles['aggregationColumnHeader--alignRight']), _defineProperty({}, "&.".concat(gridClasses.aggregationColumnHeaderLabel), styles.aggregationColumnHeaderLabel), _defineProperty({}, "&.".concat(gridClasses['root--disableUserSelection'], " .").concat(gridClasses.cell), styles['root--disableUserSelection']), _defineProperty({}, "& .".concat(gridClasses.editBooleanCell), styles.editBooleanCell), _defineProperty({}, "& .".concat(gridClasses['cell--editing']), styles['cell--editing']), _defineProperty({}, "& .".concat(gridClasses['cell--textCenter']), styles['cell--textCenter']), _defineProperty({}, "& .".concat(gridClasses['cell--textLeft']), styles['cell--textLeft']), _defineProperty({}, "& .".concat(gridClasses['cell--textRight']), styles['cell--textRight']), // TODO v6: Remove
-    _defineProperty({}, "& .".concat(gridClasses['cell--withRenderer']), styles['cell--withRenderer']), _defineProperty({}, "& .".concat(gridClasses.cell), styles.cell), _defineProperty({}, "& .".concat(gridClasses['cell--rangeTop']), styles['cell--rangeTop']), _defineProperty({}, "& .".concat(gridClasses['cell--rangeBottom']), styles['cell--rangeBottom']), _defineProperty({}, "& .".concat(gridClasses['cell--rangeLeft']), styles['cell--rangeLeft']), _defineProperty({}, "& .".concat(gridClasses['cell--rangeRight']), styles['cell--rangeRight']), _defineProperty({}, "& .".concat(gridClasses.cellContent), styles.cellContent), _defineProperty({}, "& .".concat(gridClasses.cellCheckbox), styles.cellCheckbox), _defineProperty({}, "& .".concat(gridClasses.cellSkeleton), styles.cellSkeleton), _defineProperty({}, "& .".concat(gridClasses.checkboxInput), styles.checkboxInput), _defineProperty({}, "& .".concat(gridClasses['columnHeader--alignCenter']), styles['columnHeader--alignCenter']), _defineProperty({}, "& .".concat(gridClasses['columnHeader--alignLeft']), styles['columnHeader--alignLeft']), _defineProperty({}, "& .".concat(gridClasses['columnHeader--alignRight']), styles['columnHeader--alignRight']), _defineProperty({}, "& .".concat(gridClasses['columnHeader--dragging']), styles['columnHeader--dragging']), _defineProperty({}, "& .".concat(gridClasses['columnHeader--moving']), styles['columnHeader--moving']), _defineProperty({}, "& .".concat(gridClasses['columnHeader--numeric']), styles['columnHeader--numeric']), _defineProperty({}, "& .".concat(gridClasses['columnHeader--sortable']), styles['columnHeader--sortable']), _defineProperty({}, "& .".concat(gridClasses['columnHeader--sorted']), styles['columnHeader--sorted']), _defineProperty({}, "& .".concat(gridClasses.columnHeader), styles.columnHeader), _defineProperty({}, "& .".concat(gridClasses.columnHeaderCheckbox), styles.columnHeaderCheckbox), _defineProperty({}, "& .".concat(gridClasses.columnHeaderDraggableContainer), styles.columnHeaderDraggableContainer), _defineProperty({}, "& .".concat(gridClasses.columnHeaderTitleContainer), styles.columnHeaderTitleContainer), _defineProperty({}, "& .".concat(gridClasses['columnSeparator--resizable']), styles['columnSeparator--resizable']), _defineProperty({}, "& .".concat(gridClasses['columnSeparator--resizing']), styles['columnSeparator--resizing']), _defineProperty({}, "& .".concat(gridClasses.columnSeparator), styles.columnSeparator), _defineProperty({}, "& .".concat(gridClasses.filterIcon), styles.filterIcon), _defineProperty({}, "& .".concat(gridClasses.iconSeparator), styles.iconSeparator), _defineProperty({}, "& .".concat(gridClasses.menuIcon), styles.menuIcon), _defineProperty({}, "& .".concat(gridClasses.menuIconButton), styles.menuIconButton), _defineProperty({}, "& .".concat(gridClasses.menuOpen), styles.menuOpen), _defineProperty({}, "& .".concat(gridClasses.menuList), styles.menuList), _defineProperty({}, "& .".concat(gridClasses['row--editable']), styles['row--editable']), _defineProperty({}, "& .".concat(gridClasses['row--editing']), styles['row--editing']), _defineProperty({}, "& .".concat(gridClasses['row--dragging']), styles['row--dragging']), _defineProperty({}, "& .".concat(gridClasses.row), styles.row), _defineProperty({}, "& .".concat(gridClasses.rowReorderCellPlaceholder), styles.rowReorderCellPlaceholder), _defineProperty({}, "& .".concat(gridClasses.rowReorderCell), styles.rowReorderCell), _defineProperty({}, "& .".concat(gridClasses['rowReorderCell--draggable']), styles['rowReorderCell--draggable']), _defineProperty({}, "& .".concat(gridClasses.sortIcon), styles.sortIcon), _defineProperty({}, "& .".concat(gridClasses.withBorderColor), styles.withBorderColor), _defineProperty({}, "& .".concat(gridClasses.treeDataGroupingCell), styles.treeDataGroupingCell), _defineProperty({}, "& .".concat(gridClasses.treeDataGroupingCellToggle), styles.treeDataGroupingCellToggle), _defineProperty({}, "& .".concat(gridClasses.detailPanelToggleCell), styles.detailPanelToggleCell), _defineProperty({}, "& .".concat(gridClasses['detailPanelToggleCell--expanded']), styles['detailPanelToggleCell--expanded']), styles.root];
+    _defineProperty({}, "& .".concat(gridClasses['cell--withRenderer']), styles['cell--withRenderer']), _defineProperty({}, "& .".concat(gridClasses.cell), styles.cell), _defineProperty({}, "& .".concat(gridClasses['cell--rangeTop']), styles['cell--rangeTop']), _defineProperty({}, "& .".concat(gridClasses['cell--rangeBottom']), styles['cell--rangeBottom']), _defineProperty({}, "& .".concat(gridClasses['cell--rangeLeft']), styles['cell--rangeLeft']), _defineProperty({}, "& .".concat(gridClasses['cell--rangeRight']), styles['cell--rangeRight']), _defineProperty({}, "& .".concat(gridClasses['cell--withRightBorder']), styles['cell--withRightBorder']), _defineProperty({}, "& .".concat(gridClasses.cellContent), styles.cellContent), _defineProperty({}, "& .".concat(gridClasses.cellCheckbox), styles.cellCheckbox), _defineProperty({}, "& .".concat(gridClasses.cellSkeleton), styles.cellSkeleton), _defineProperty({}, "& .".concat(gridClasses.checkboxInput), styles.checkboxInput), _defineProperty({}, "& .".concat(gridClasses['columnHeader--alignCenter']), styles['columnHeader--alignCenter']), _defineProperty({}, "& .".concat(gridClasses['columnHeader--alignLeft']), styles['columnHeader--alignLeft']), _defineProperty({}, "& .".concat(gridClasses['columnHeader--alignRight']), styles['columnHeader--alignRight']), _defineProperty({}, "& .".concat(gridClasses['columnHeader--dragging']), styles['columnHeader--dragging']), _defineProperty({}, "& .".concat(gridClasses['columnHeader--moving']), styles['columnHeader--moving']), _defineProperty({}, "& .".concat(gridClasses['columnHeader--numeric']), styles['columnHeader--numeric']), _defineProperty({}, "& .".concat(gridClasses['columnHeader--sortable']), styles['columnHeader--sortable']), _defineProperty({}, "& .".concat(gridClasses['columnHeader--sorted']), styles['columnHeader--sorted']), _defineProperty({}, "& .".concat(gridClasses['columnHeader--withRightBorder']), styles['columnHeader--withRightBorder']), _defineProperty({}, "& .".concat(gridClasses.columnHeader), styles.columnHeader), _defineProperty({}, "& .".concat(gridClasses.headerFilterRow), styles.headerFilterRow), _defineProperty({}, "& .".concat(gridClasses.columnHeaderCheckbox), styles.columnHeaderCheckbox), _defineProperty({}, "& .".concat(gridClasses.columnHeaderDraggableContainer), styles.columnHeaderDraggableContainer), _defineProperty({}, "& .".concat(gridClasses.columnHeaderTitleContainer), styles.columnHeaderTitleContainer), _defineProperty({}, "& .".concat(gridClasses['columnSeparator--resizable']), styles['columnSeparator--resizable']), _defineProperty({}, "& .".concat(gridClasses['columnSeparator--resizing']), styles['columnSeparator--resizing']), _defineProperty({}, "& .".concat(gridClasses.columnSeparator), styles.columnSeparator), _defineProperty({}, "& .".concat(gridClasses.filterIcon), styles.filterIcon), _defineProperty({}, "& .".concat(gridClasses.iconSeparator), styles.iconSeparator), _defineProperty({}, "& .".concat(gridClasses.menuIcon), styles.menuIcon), _defineProperty({}, "& .".concat(gridClasses.menuIconButton), styles.menuIconButton), _defineProperty({}, "& .".concat(gridClasses.menuOpen), styles.menuOpen), _defineProperty({}, "& .".concat(gridClasses.menuList), styles.menuList), _defineProperty({}, "& .".concat(gridClasses['row--editable']), styles['row--editable']), _defineProperty({}, "& .".concat(gridClasses['row--editing']), styles['row--editing']), _defineProperty({}, "& .".concat(gridClasses['row--dragging']), styles['row--dragging']), _defineProperty({}, "& .".concat(gridClasses.row), styles.row), _defineProperty({}, "& .".concat(gridClasses.rowReorderCellPlaceholder), styles.rowReorderCellPlaceholder), _defineProperty({}, "& .".concat(gridClasses.rowReorderCell), styles.rowReorderCell), _defineProperty({}, "& .".concat(gridClasses['rowReorderCell--draggable']), styles['rowReorderCell--draggable']), _defineProperty({}, "& .".concat(gridClasses.sortIcon), styles.sortIcon), _defineProperty({}, "& .".concat(gridClasses.withBorderColor), styles.withBorderColor), _defineProperty({}, "& .".concat(gridClasses.treeDataGroupingCell), styles.treeDataGroupingCell), _defineProperty({}, "& .".concat(gridClasses.treeDataGroupingCellToggle), styles.treeDataGroupingCellToggle), _defineProperty({}, "& .".concat(gridClasses.detailPanelToggleCell), styles.detailPanelToggleCell), _defineProperty({}, "& .".concat(gridClasses['detailPanelToggleCell--expanded']), styles['detailPanelToggleCell--expanded']), styles.root];
   }
-})(function (_ref57) {
-  var _$concat2, _$concat3, _extends2;
-  var theme = _ref57.theme;
+})(function (_ref60) {
+  var _mediaHoverHover, _mediaHoverNone, _$concat2, _extends2;
+  var theme = _ref60.theme;
   var borderColor = getBorderColor(theme);
   var radius = theme.shape.borderRadius;
   var gridStyle = _extends({
@@ -39,7 +51,9 @@ export var GridRootStyles = styled('div', {
     outline: 'none',
     height: '100%',
     display: 'flex',
-    overflow: 'hidden',
+    minWidth: 0,
+    // See https://github.com/mui/mui-x/issues/8547
+    minHeight: 0,
     flexDirection: 'column',
     overflowAnchor: 'none'
   }, _defineProperty(_extends2, "&.".concat(gridClasses.autoHeight), _defineProperty({
@@ -75,8 +89,6 @@ export var GridRootStyles = styled('div', {
     transition: theme.transitions.create(['opacity'], {
       duration: theme.transitions.duration.shorter
     })
-  }), _defineProperty(_extends2, "& .".concat(gridClasses.columnHeader, ":not(.").concat(gridClasses['columnHeader--sorted'], "):hover .").concat(gridClasses.sortIcon), {
-    opacity: 0.5
   }), _defineProperty(_extends2, "& .".concat(gridClasses.columnHeaderTitleContainer), {
     display: 'flex',
     alignItems: 'center',
@@ -100,6 +112,8 @@ export var GridRootStyles = styled('div', {
     borderBottomWidth: '1px',
     borderBottomStyle: 'solid',
     boxSizing: 'border-box'
+  }), _defineProperty(_extends2, "& .".concat(gridClasses.headerFilterRow), {
+    borderTop: "1px solid ".concat(borderColor)
   }), _defineProperty(_extends2, "& .".concat(gridClasses.sortIcon, ", & .").concat(gridClasses.filterIcon), {
     fontSize: 'inherit'
   }), _defineProperty(_extends2, "& .".concat(gridClasses['columnHeader--sortable']), {
@@ -124,10 +138,9 @@ export var GridRootStyles = styled('div', {
     flexDirection: 'column',
     justifyContent: 'center',
     color: borderColor
-  }), _defineProperty(_extends2, "& .".concat(gridClasses.columnHeaders, ":hover .").concat(gridClasses.columnSeparator, ", .").concat(gridClasses['columnSeparator--resizing']), {
-    visibility: 'visible',
-    width: 'auto'
-  }), _defineProperty(_extends2, "& .".concat(gridClasses['columnSeparator--sideLeft']), {
+  }), _defineProperty(_extends2, '@media (hover: hover)', (_mediaHoverHover = {}, _defineProperty(_mediaHoverHover, "& .".concat(gridClasses.columnHeaders, ":hover"), columnHeadersStyles), _defineProperty(_mediaHoverHover, "& .".concat(gridClasses.columnHeader, ":hover"), columnHeaderStyles), _defineProperty(_mediaHoverHover, "& .".concat(gridClasses.columnHeader, ":not(.").concat(gridClasses['columnHeader--sorted'], "):hover .").concat(gridClasses.sortIcon), {
+    opacity: 0.5
+  }), _mediaHoverHover)), _defineProperty(_extends2, '@media (hover: none)', (_mediaHoverNone = {}, _defineProperty(_mediaHoverNone, "& .".concat(gridClasses.columnHeaders), columnHeadersStyles), _defineProperty(_mediaHoverNone, "& .".concat(gridClasses.columnHeader), columnHeaderStyles), _mediaHoverNone)), _defineProperty(_extends2, "& .".concat(gridClasses['columnSeparator--sideLeft']), {
     left: -12
   }), _defineProperty(_extends2, "& .".concat(gridClasses['columnSeparator--sideRight']), {
     right: -12
@@ -154,13 +167,7 @@ export var GridRootStyles = styled('div', {
     marginRight: -10,
     display: 'flex',
     alignItems: 'center'
-  }), _defineProperty(_extends2, "& .".concat(gridClasses.columnHeader, ":hover"), (_$concat3 = {}, _defineProperty(_$concat3, "& .".concat(gridClasses.iconButtonContainer), {
-    visibility: 'visible',
-    width: 'auto'
-  }), _defineProperty(_$concat3, "& .".concat(gridClasses.menuIcon), {
-    width: 'auto',
-    visibility: 'visible'
-  }), _$concat3)), _defineProperty(_extends2, ".".concat(gridClasses.menuOpen), {
+  }), _defineProperty(_extends2, ".".concat(gridClasses.menuOpen), {
     visibility: 'visible',
     width: 'auto'
   }), _defineProperty(_extends2, "& .".concat(gridClasses.row), {