@mui/x-data-grid 5.8.0 → 5.9.0

package/node/components/GridRow.js

@@ -41,6 +41,8 @@ var _gridCheckboxSelectionColDef = require("../colDef/gridCheckboxSelectionColDe
 
 var _gridActionsColDef = require("../colDef/gridActionsColDef");
 
+var _gridDetailPanelToggleField = require("../constants/gridDetailPanelToggleField");
+
 var _jsxRuntime = require("react/jsx-runtime");
 
 const _excluded = ["selected", "rowId", "row", "index", "style", "rowHeight", "className", "visibleColumns", "renderedColumns", "containerWidth", "firstColumnToRender", "lastColumnToRender", "cellFocus", "cellTabIndex", "editRowsState", "isLastVisible", "onClick", "onDoubleClick", "onMouseEnter", "onMouseLeave"];
@@ -87,6 +89,7 @@ function GridRow(props) {
   const {
     selected,
     rowId,
+    row,
     index,
     style: styleProp,
     rowHeight,
@@ -157,7 +160,7 @@ function GridRow(props) {
       } // User opened a detail panel
 
 
-      if (field === '__detail_panel_toggle__') {
+      if (field === _gridDetailPanelToggleField.GRID_DETAIL_PANEL_TOGGLE_FIELD) {
         return;
       } // User is editing a cell
 
@@ -198,7 +201,8 @@ function GridRow(props) {
     const indexRelativeToCurrentPage = index - currentPage.range.firstRowIndex;
     const rowParams = (0, _extends2.default)({}, apiRef.current.getRowParams(rowId), {
       isFirstVisible: indexRelativeToCurrentPage === 0,
-      isLastVisible: indexRelativeToCurrentPage === currentPage.rows.length - 1
+      isLastVisible: indexRelativeToCurrentPage === currentPage.rows.length - 1,
+      indexRelativeToCurrentPage
     });
     rowClassName = rootProps.getRowClassName(rowParams);
   }
@@ -206,8 +210,6 @@ function GridRow(props) {
   const cells = [];
 
   for (let i = 0; i < renderedColumns.length; i += 1) {
-    var _rootProps$components;
-
     const column = renderedColumns[i];
     const indexRelativeToAllColumns = firstColumnToRender + i;
     const isLastColumn = indexRelativeToAllColumns === visibleColumns.length - 1;
@@ -236,7 +238,16 @@ function GridRow(props) {
     if (editCellState != null && column.renderEditCell) {
       var _rootProps$classes2;
 
-      const params = (0, _extends2.default)({}, cellParams, editCellState, {
+      let updatedRow = row;
+
+      if (apiRef.current.unstable_getRowWithUpdatedValues) {
+        // Only the new editing API has this method
+        updatedRow = apiRef.current.unstable_getRowWithUpdatedValues(rowId, column.field);
+      }
+
+      const params = (0, _extends2.default)({}, cellParams, {
+        row: updatedRow
+      }, editCellState, {
         api: apiRef.current
       });
       content = column.renderEditCell(params); // TODO move to GridCell
@@ -251,24 +262,35 @@ function GridRow(props) {
 
     const hasFocus = cellFocus !== null && cellFocus.id === rowId && cellFocus.field === column.field;
     const tabIndex = cellTabIndex !== null && cellTabIndex.id === rowId && cellTabIndex.field === column.field && cellParams.cellMode === 'view' ? 0 : -1;
-    cells.push( /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.components.Cell, (0, _extends2.default)({
-      value: cellParams.value,
-      field: column.field,
-      width: column.computedWidth,
-      rowId: rowId,
-      height: rowHeight,
-      showRightBorder: showRightBorder,
-      formattedValue: cellParams.formattedValue,
-      align: column.align || 'left',
-      cellMode: cellParams.cellMode,
-      colIndex: indexRelativeToAllColumns,
-      isEditable: cellParams.isEditable,
-      hasFocus: hasFocus,
-      tabIndex: tabIndex,
-      className: (0, _clsx.default)(classNames)
-    }, (_rootProps$components = rootProps.componentsProps) == null ? void 0 : _rootProps$components.cell, {
-      children: content
-    }), column.field));
+    const cellColSpanInfo = apiRef.current.unstable_getCellColSpanInfo(rowId, indexRelativeToAllColumns);
+
+    if (cellColSpanInfo && !cellColSpanInfo.spannedByColSpan) {
+      var _rootProps$components;
+
+      const {
+        colSpan,
+        width
+      } = cellColSpanInfo.cellProps;
+      cells.push( /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.components.Cell, (0, _extends2.default)({
+        value: cellParams.value,
+        field: column.field,
+        width: width,
+        rowId: rowId,
+        height: rowHeight,
+        showRightBorder: showRightBorder,
+        formattedValue: cellParams.formattedValue,
+        align: column.align || 'left',
+        cellMode: cellParams.cellMode,
+        colIndex: indexRelativeToAllColumns,
+        isEditable: cellParams.isEditable,
+        hasFocus: hasFocus,
+        tabIndex: tabIndex,
+        className: (0, _clsx.default)(classNames),
+        colSpan: colSpan
+      }, (_rootProps$components = rootProps.componentsProps) == null ? void 0 : _rootProps$components.cell, {
+        children: content
+      }), column.field));
+    }
   }
 
   const emptyCellWidth = containerWidth - columnsTotalWidth;
@@ -302,6 +324,11 @@ process.env.NODE_ENV !== "production" ? GridRow.propTypes = {
   containerWidth: _propTypes.default.number.isRequired,
   editRowsState: _propTypes.default.object.isRequired,
   firstColumnToRender: _propTypes.default.number.isRequired,
+
+  /**
+   * Index of the row in the whole sorted and filtered dataset.
+   * If some rows above have expanded children, this index also take those children into account.
+   */
   index: _propTypes.default.number.isRequired,
   isLastVisible: _propTypes.default.bool,
   lastColumnToRender: _propTypes.default.number.isRequired,

package/node/components/base/GridOverlays.js

@@ -78,8 +78,9 @@ function GridOverlays() {
   const rootProps = (0, _useGridRootProps.useGridRootProps)();
   const totalRowCount = (0, _useGridSelector.useGridSelector)(apiRef, _gridRowsSelector.gridRowCountSelector);
   const visibleRowCount = (0, _useGridSelector.useGridSelector)(apiRef, _gridFilterSelector.gridVisibleRowCountSelector);
-  const showNoRowsOverlay = !rootProps.loading && totalRowCount === 0;
-  const showNoResultsOverlay = !rootProps.loading && totalRowCount > 0 && visibleRowCount === 0;
+  const loading = (0, _useGridSelector.useGridSelector)(apiRef, _gridRowsSelector.gridRowsLoadingSelector);
+  const showNoRowsOverlay = !loading && totalRowCount === 0;
+  const showNoResultsOverlay = !loading && totalRowCount > 0 && visibleRowCount === 0;
   let overlay = null;
 
   if (showNoRowsOverlay) {

package/node/components/cell/GridActionsCell.js

@@ -9,6 +9,8 @@ exports.renderActionsCell = exports.GridActionsCell = void 0;
 
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
+var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
+
 var React = _interopRequireWildcard(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
@@ -25,8 +27,12 @@ var _GridMenu = require("../menu/GridMenu");
 
 var _useGridRootProps = require("../../hooks/utils/useGridRootProps");
 
+var _useGridApiContext = require("../../hooks/utils/useGridApiContext");
+
 var _jsxRuntime = require("react/jsx-runtime");
 
+const _excluded = ["colDef", "id", "api", "hasFocus", "isEditable", "field", "value", "formattedValue", "row", "rowNode", "cellMode", "getValue", "tabIndex", "position", "focusElementRef"];
+
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
@@ -34,20 +40,25 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 const hasActions = colDef => typeof colDef.getActions === 'function';
 
 const GridActionsCell = props => {
+  const {
+    colDef,
+    id,
+    hasFocus,
+    tabIndex,
+    position = 'bottom-end',
+    focusElementRef
+  } = props,
+        other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
+  const [focusedButtonIndex, setFocusedButtonIndex] = React.useState(-1);
   const [open, setOpen] = React.useState(false);
+  const apiRef = (0, _useGridApiContext.useGridApiContext)();
+  const rootRef = React.useRef(null);
   const buttonRef = React.useRef(null);
+  const ignoreCallToFocus = React.useRef(false);
   const touchRippleRefs = React.useRef({});
   const menuId = (0, _utils.unstable_useId)();
   const buttonId = (0, _utils.unstable_useId)();
   const rootProps = (0, _useGridRootProps.useGridRootProps)();
-  const {
-    colDef,
-    id,
-    api,
-    hasFocus,
-    position = 'bottom-end'
-  } = props; // TODO apply the rest to the root element
-
   React.useLayoutEffect(() => {
     if (!hasFocus) {
       Object.entries(touchRippleRefs.current).forEach(([index, ref]) => {
@@ -57,56 +68,144 @@ const GridActionsCell = props => {
       });
     }
   }, [hasFocus]);
+  React.useEffect(() => {
+    if (focusedButtonIndex >= 0) {
+      var _rootRef$current;
+
+      const child = (_rootRef$current = rootRef.current) == null ? void 0 : _rootRef$current.children[focusedButtonIndex];
+      child.focus();
+    }
+  }, [focusedButtonIndex]);
+  React.useEffect(() => {
+    if (!hasFocus) {
+      setFocusedButtonIndex(-1);
+      ignoreCallToFocus.current = false;
+    }
+  }, [hasFocus]);
+  React.useImperativeHandle(focusElementRef, () => ({
+    focus() {
+      // If ignoreCallToFocus is true, then one of the buttons was clicked and the focus is already set
+      if (!ignoreCallToFocus.current) {
+        setFocusedButtonIndex(0);
+      }
+    }
+
+  }), []);
 
   if (!hasActions(colDef)) {
     throw new Error('MUI: Missing the `getActions` property in the `GridColDef`.');
   }
 
-  const showMenu = () => setOpen(true);
-
-  const hideMenu = () => setOpen(false);
-
-  const options = colDef.getActions(api.getRowParams(id));
+  const options = colDef.getActions(apiRef.current.getRowParams(id));
   const iconButtons = options.filter(option => !option.props.showInMenu);
   const menuButtons = options.filter(option => option.props.showInMenu);
+  const numberOfButtons = iconButtons.length + (menuButtons.length ? 1 : 0);
+
+  const showMenu = () => {
+    setOpen(true);
+    setFocusedButtonIndex(numberOfButtons - 1);
+    ignoreCallToFocus.current = true;
+  };
+
+  const hideMenu = () => {
+    setOpen(false);
+  };
 
   const handleTouchRippleRef = index => instance => {
     touchRippleRefs.current[index] = instance;
   };
 
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+  const handleButtonClick = (index, onClick) => event => {
+    setFocusedButtonIndex(index);
+    ignoreCallToFocus.current = true;
+
+    if (onClick) {
+      onClick(event);
+    }
+  };
+
+  const handleRootKeyDown = event => {
+    if (numberOfButtons <= 1) {
+      return;
+    }
+
+    let newIndex = focusedButtonIndex;
+
+    if (event.key === 'ArrowRight') {
+      newIndex += 1;
+    } else if (event.key === 'ArrowLeft') {
+      newIndex -= 1;
+    }
+
+    if (newIndex < 0 || newIndex >= numberOfButtons) {
+      return; // We're already in the first or last item = do nothing and let the grid listen the event
+    }
+
+    if (newIndex !== focusedButtonIndex) {
+      event.preventDefault(); // Prevent scrolling
+
+      event.stopPropagation(); // Don't stop propagation for other keys, e.g. ArrowUp
+
+      setFocusedButtonIndex(newIndex);
+    }
+  };
+
+  const handleListKeyDown = event => {
+    if (event.key === 'Tab') {
+      event.preventDefault();
+    }
+
+    if (['Tab', 'Enter', 'Escape'].includes(event.key)) {
+      hideMenu();
+    }
+  };
+
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", (0, _extends2.default)({
+    role: "menu",
+    ref: rootRef,
+    tabIndex: -1,
     className: _gridClasses.gridClasses.actionsCell,
+    onKeyDown: handleRootKeyDown
+  }, other, {
     children: [iconButtons.map((button, index) => /*#__PURE__*/React.cloneElement(button, {
       key: index,
-      touchRippleRef: handleTouchRippleRef(index)
-    })), menuButtons.length > 0 && /*#__PURE__*/(0, _jsxRuntime.jsx)(_IconButton.default, {
+      touchRippleRef: handleTouchRippleRef(index),
+      onClick: handleButtonClick(index, button.props.onClick),
+      tabIndex: focusedButtonIndex === index ? tabIndex : -1
+    })), menuButtons.length > 0 && buttonId && /*#__PURE__*/(0, _jsxRuntime.jsx)(_IconButton.default, {
       ref: buttonRef,
       id: buttonId,
-      "aria-label": api.getLocaleText('actionsCellMore'),
+      "aria-label": apiRef.current.getLocaleText('actionsCellMore'),
       "aria-controls": menuId,
       "aria-expanded": open ? 'true' : undefined,
       "aria-haspopup": "true",
+      role: "menuitem",
       size: "small",
       onClick: showMenu,
+      touchRippleRef: handleTouchRippleRef(buttonId),
+      tabIndex: focusedButtonIndex === iconButtons.length ? tabIndex : -1,
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.components.MoreActionsIcon, {
         fontSize: "small"
       })
     }), menuButtons.length > 0 && /*#__PURE__*/(0, _jsxRuntime.jsx)(_GridMenu.GridMenu, {
-      id: menuId,
       onClickAway: hideMenu,
       onClick: hideMenu,
       open: open,
       target: buttonRef.current,
       position: position,
-      "aria-labelledby": buttonId,
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_MenuList.default, {
+        id: menuId,
         className: _gridClasses.gridClasses.menuList,
+        onKeyDown: handleListKeyDown,
+        "aria-labelledby": buttonId,
+        variant: "menu",
+        autoFocusItem: true,
         children: menuButtons.map((button, index) => /*#__PURE__*/React.cloneElement(button, {
           key: index
         }))
       })
     })]
-  });
+  }));
 };
 
 exports.GridActionsCell = GridActionsCell;
@@ -122,11 +221,42 @@ process.env.NODE_ENV !== "production" ? GridActionsCell.propTypes = {
    */
   api: _propTypes.default.any.isRequired,
 
+  /**
+   * The mode of the cell.
+   */
+  cellMode: _propTypes.default.oneOf(['edit', 'view']).isRequired,
+
   /**
    * The column of the row that the current cell belongs to.
    */
   colDef: _propTypes.default.object.isRequired,
 
+  /**
+   * The column field of the cell that triggered the event.
+   */
+  field: _propTypes.default.string.isRequired,
+
+  /**
+   * A ref allowing to set imperative focus.
+   * It can be passed to the element that should receive focus.
+   * @ignore - do not document.
+   */
+  focusElementRef: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.shape({
+    current: _propTypes.default.shape({
+      focus: _propTypes.default.func.isRequired
+    })
+  })]),
+  formattedValue: _propTypes.default.any,
+
+  /**
+   * Get the cell value of a row and field.
+   * @param {GridRowId} id The row id.
+   * @param {string} field The field.
+   * @returns {any} The cell value.
+   * @deprecated Use `params.row` to directly access the fields you want instead.
+   */
+  getValue: _propTypes.default.func.isRequired,
+
   /**
    * If true, the cell is the active element.
    */
@@ -136,7 +266,28 @@ process.env.NODE_ENV !== "production" ? GridActionsCell.propTypes = {
    * The grid row id.
    */
   id: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]).isRequired,
-  position: _propTypes.default.oneOf(['bottom-end', 'bottom-start', 'bottom', 'left-end', 'left-start', 'left', 'right-end', 'right-start', 'right', 'top-end', 'top-start', 'top'])
+
+  /**
+   * If true, the cell is editable.
+   */
+  isEditable: _propTypes.default.bool,
+  position: _propTypes.default.oneOf(['bottom-end', 'bottom-start', 'bottom', 'left-end', 'left-start', 'left', 'right-end', 'right-start', 'right', 'top-end', 'top-start', 'top']),
+
+  /**
+   * The row model of the row that the current cell belongs to.
+   */
+  row: _propTypes.default.object.isRequired,
+
+  /**
+   * The node of the row that the current cell belongs to.
+   */
+  rowNode: _propTypes.default.object.isRequired,
+
+  /**
+   * the tabIndex value.
+   */
+  tabIndex: _propTypes.default.oneOf([-1, 0]).isRequired,
+  value: _propTypes.default.any
 } : void 0;
 
 const renderActionsCell = params => /*#__PURE__*/(0, _jsxRuntime.jsx)(GridActionsCell, (0, _extends2.default)({}, params));

package/node/components/cell/GridActionsCellItem.js

@@ -29,7 +29,7 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
-const GridActionsCellItem = props => {
+const GridActionsCellItem = /*#__PURE__*/React.forwardRef((props, ref) => {
   const {
     label,
     icon,
@@ -46,7 +46,9 @@ const GridActionsCellItem = props => {
 
   if (!showInMenu) {
     return /*#__PURE__*/(0, _jsxRuntime.jsx)(_IconButton.default, (0, _extends2.default)({
+      ref: ref,
       size: "small",
+      role: "menuitem",
       "aria-label": label
     }, other, {
       onClick: handleClick,
@@ -56,14 +58,15 @@ const GridActionsCellItem = props => {
     }));
   }
 
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_MenuItem.default, (0, _extends2.default)({}, other, {
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_MenuItem.default, (0, _extends2.default)({
+    ref: ref
+  }, other, {
     onClick: onClick,
     children: [icon && /*#__PURE__*/(0, _jsxRuntime.jsx)(_ListItemIcon.default, {
       children: icon
     }), label]
   }));
-};
-
+});
 exports.GridActionsCellItem = GridActionsCellItem;
 process.env.NODE_ENV !== "production" ? GridActionsCellItem.propTypes = {
   // ----------------------------- Warning --------------------------------

package/node/components/cell/GridCell.js

@@ -33,7 +33,7 @@ var _gridFocusStateSelector = require("../../hooks/features/focus/gridFocusState
 
 var _jsxRuntime = require("react/jsx-runtime");
 
-const _excluded = ["align", "children", "colIndex", "cellMode", "field", "formattedValue", "hasFocus", "height", "isEditable", "rowId", "tabIndex", "value", "width", "className", "showRightBorder", "extendRowFullWidth", "row", "onClick", "onDoubleClick", "onMouseDown", "onMouseUp", "onKeyDown", "onDragEnter", "onDragOver"];
+const _excluded = ["align", "children", "colIndex", "colDef", "cellMode", "field", "formattedValue", "hasFocus", "height", "isEditable", "rowId", "tabIndex", "value", "width", "className", "showRightBorder", "extendRowFullWidth", "row", "colSpan", "onClick", "onDoubleClick", "onMouseDown", "onMouseUp", "onKeyDown", "onDragEnter", "onDragOver"];
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
@@ -91,6 +91,7 @@ function GridCell(props) {
     width,
     className,
     showRightBorder,
+    colSpan,
     onClick,
     onDoubleClick,
     onMouseDown,
@@ -102,6 +103,7 @@ function GridCell(props) {
         other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
   const valueToRender = formattedValue == null ? value : formattedValue;
   const cellRef = React.useRef(null);
+  const focusElementRef = React.useRef(null);
   const apiRef = (0, _useGridApiContext.useGridApiContext)();
   const rootProps = (0, _useGridRootProps.useGridRootProps)();
   const ownerState = {
@@ -152,7 +154,7 @@ function GridCell(props) {
 
     if (cellRef.current && !cellRef.current.contains(doc.activeElement)) {
       const focusableElement = cellRef.current.querySelector('[tabindex="0"]');
-      const elementToFocus = focusableElement || cellRef.current;
+      const elementToFocus = focusElementRef.current || focusableElement || cellRef.current;
 
       if (doesSupportPreventScroll()) {
         elementToFocus.focus({
@@ -186,6 +188,26 @@ function GridCell(props) {
     };
   }
 
+  const column = apiRef.current.getColumn(field);
+  const managesOwnFocus = column.type === 'actions';
+
+  const renderChildren = () => {
+    if (children == null) {
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: classes.content,
+        children: valueToRender == null ? void 0 : valueToRender.toString()
+      });
+    }
+
+    if ( /*#__PURE__*/React.isValidElement(children) && managesOwnFocus) {
+      return /*#__PURE__*/React.cloneElement(children, {
+        focusElementRef
+      });
+    }
+
+    return children;
+  };
+
   return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", (0, _extends2.default)({
     ref: cellRef,
     className: (0, _clsx.default)(className, classes.root),
@@ -193,8 +215,9 @@ function GridCell(props) {
     "data-field": field,
     "data-colindex": colIndex,
     "aria-colindex": colIndex + 1,
+    "aria-colspan": colSpan,
     style: style,
-    tabIndex: cellMode === 'view' || !isEditable ? tabIndex : -1,
+    tabIndex: (cellMode === 'view' || !isEditable) && !managesOwnFocus ? tabIndex : -1,
     onClick: publish(_models.GridEvents.cellClick, onClick),
     onDoubleClick: publish(_models.GridEvents.cellDoubleClick, onDoubleClick),
     onMouseDown: publish(_models.GridEvents.cellMouseDown, onMouseDown),
@@ -204,10 +227,7 @@ function GridCell(props) {
     onDragOver: publish(_models.GridEvents.cellDragOver, onDragOver)
   }, other, {
     onFocus: handleFocus,
-    children: children != null ? children : /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-      className: classes.content,
-      children: valueToRender == null ? void 0 : valueToRender.toString()
-    })
+    children: renderChildren()
   }));
 }
 
@@ -221,6 +241,7 @@ process.env.NODE_ENV !== "production" ? GridCell.propTypes = {
   children: _propTypes.default.node,
   className: _propTypes.default.string,
   colIndex: _propTypes.default.number.isRequired,
+  colSpan: _propTypes.default.number,
   field: _propTypes.default.string.isRequired,
   formattedValue: _propTypes.default.any,
   hasFocus: _propTypes.default.bool,

package/node/components/cell/GridEditInputCell.js

@@ -145,7 +145,7 @@ process.env.NODE_ENV !== "production" ? GridEditInputCell.propTypes = {
   /**
    * The cell value formatted with the column valueFormatter.
    */
-  formattedValue: _propTypes.default.any.isRequired,
+  formattedValue: _propTypes.default.any,
 
   /**
    * Get the cell value of a row and field.

package/node/components/cell/GridEditSingleSelectCell.js

@@ -28,6 +28,8 @@ var _gridEditRowModel = require("../../models/gridEditRowModel");
 
 var _gridEvents = require("../../models/events/gridEvents");
 
+var _filterPanelUtils = require("../panel/filterPanel/filterPanelUtils");
+
 var _jsxRuntime = require("react/jsx-runtime");
 
 const _excluded = ["id", "value", "formattedValue", "api", "field", "row", "rowNode", "colDef", "cellMode", "isEditable", "tabIndex", "className", "getValue", "hasFocus", "isValidating", "isProcessingProps", "error"];
@@ -36,16 +38,19 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
-const renderSingleSelectOptions = option => typeof option === 'object' ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_MenuItem.default, {
-  value: option.value,
-  children: option.label
-}, option.value) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_MenuItem.default, {
-  value: option,
-  children: option
-}, option);
+const renderSingleSelectOptions = (option, OptionComponent) => {
+  const isOptionTypeObject = typeof option === 'object';
+  const key = isOptionTypeObject ? option.value : option;
+  const value = isOptionTypeObject ? option.value : option;
+  const content = isOptionTypeObject ? option.label : option;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(OptionComponent, {
+    value: value,
+    children: content
+  }, key);
+};
 
 function GridEditSingleSelectCell(props) {
-  var _rootProps$components;
+  var _rootProps$components, _baseSelectProps$nati, _rootProps$components2;
 
   const {
     id,
@@ -62,6 +67,8 @@ function GridEditSingleSelectCell(props) {
   const inputRef = React.useRef();
   const rootProps = (0, _useGridRootProps.useGridRootProps)();
   const [open, setOpen] = React.useState(rootProps.editMode === 'cell');
+  const baseSelectProps = ((_rootProps$components = rootProps.componentsProps) == null ? void 0 : _rootProps$components.baseSelect) || {};
+  const isSelectNative = (_baseSelectProps$nati = baseSelectProps.native) != null ? _baseSelectProps$nati : false;
   let valueOptionsFormatted;
 
   if (typeof colDef.valueOptions === 'function') {
@@ -96,11 +103,13 @@ function GridEditSingleSelectCell(props) {
     var _rootProps$experiment;
 
     setOpen(false);
-    const target = event.target;
+    const target = event.target; // NativeSelect casts the value to a string.
+
+    const formattedTargetValue = (0, _filterPanelUtils.getValueFromValueOptions)(target.value, valueOptionsFormatted);
     const isValid = await api.setEditCellValue({
       id,
       field,
-      value: target.value
+      value: formattedTargetValue
     }, event);
 
     if ((_rootProps$experiment = rootProps.experimentalFeatures) != null && _rootProps$experiment.newEditingApi) {
@@ -169,9 +178,10 @@ function GridEditSingleSelectCell(props) {
       onClose: handleClose
     },
     error: error,
+    native: isSelectNative,
     fullWidth: true
-  }, other, (_rootProps$components = rootProps.componentsProps) == null ? void 0 : _rootProps$components.baseSelect, {
-    children: valueOptionsFormatted.map(renderSingleSelectOptions)
+  }, other, (_rootProps$components2 = rootProps.componentsProps) == null ? void 0 : _rootProps$components2.baseSelect, {
+    children: valueOptionsFormatted.map(valueOptions => renderSingleSelectOptions(valueOptions, isSelectNative ? 'option' : _MenuItem.default))
   }));
 }
 
@@ -205,7 +215,7 @@ process.env.NODE_ENV !== "production" ? GridEditSingleSelectCell.propTypes = {
   /**
    * The cell value formatted with the column valueFormatter.
    */
-  formattedValue: _propTypes.default.any.isRequired,
+  formattedValue: _propTypes.default.any,
 
   /**
    * Get the cell value of a row and field.

package/node/components/columnHeaders/GridColumnHeaderItem.js

@@ -179,14 +179,11 @@ function GridColumnHeaderItem(props) {
 
     if (hasFocus && !columnMenuState.open) {
       const focusableElement = headerCellRef.current.querySelector('[tabindex="0"]');
-
-      if (focusableElement) {
-        focusableElement.focus();
-      } else {
-        headerCellRef.current.focus();
-      }
+      const elementToFocus = focusableElement || headerCellRef.current;
+      elementToFocus == null ? void 0 : elementToFocus.focus();
+      apiRef.current.columnHeadersContainerElementRef.current.scrollLeft = 0;
     }
-  });
+  }, [apiRef, hasFocus]);
   const headerClassName = typeof column.headerClassName === 'function' ? column.headerClassName({
     field: column.field,
     colDef: column