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

package/node/components/cell/GridCell.js

@@ -4,7 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.GridCellWrapper = exports.GridCellV7 = exports.GridCell = void 0;
+exports.PinnedPosition = exports.GridCell = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 var React = _interopRequireWildcard(require("react"));
@@ -21,12 +21,16 @@ var _useGridRootProps = require("../../hooks/utils/useGridRootProps");
 var _gridFocusStateSelector = require("../../hooks/features/focus/gridFocusStateSelector");
 var _useGridParamsApi = require("../../hooks/features/rows/useGridParamsApi");
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["changeReason", "unstable_updateValueOnRender"],
-  _excluded2 = ["align", "children", "editCellState", "colIndex", "column", "cellMode", "field", "formattedValue", "hasFocus", "height", "isEditable", "isSelected", "rowId", "tabIndex", "value", "width", "className", "showRightBorder", "extendRowFullWidth", "row", "colSpan", "disableDragEvents", "isNotVisible", "onClick", "onDoubleClick", "onMouseDown", "onMouseUp", "onMouseOver", "onKeyDown", "onKeyUp", "onDragEnter", "onDragOver"],
-  _excluded3 = ["column", "rowId", "editCellState", "align", "children", "colIndex", "height", "width", "className", "showRightBorder", "extendRowFullWidth", "row", "colSpan", "disableDragEvents", "isNotVisible", "onClick", "onDoubleClick", "onMouseDown", "onMouseUp", "onMouseOver", "onKeyDown", "onKeyUp", "onDragEnter", "onDragOver"],
-  _excluded4 = ["changeReason", "unstable_updateValueOnRender"];
+const _excluded = ["column", "rowId", "editCellState", "align", "children", "colIndex", "height", "width", "className", "style", "gridHasScrollX", "colSpan", "disableDragEvents", "isNotVisible", "pinnedOffset", "pinnedPosition", "sectionIndex", "sectionLength", "onClick", "onDoubleClick", "onMouseDown", "onMouseUp", "onMouseOver", "onKeyDown", "onKeyUp", "onDragEnter", "onDragOver"],
+  _excluded2 = ["changeReason", "unstable_updateValueOnRender"];
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+let PinnedPosition = exports.PinnedPosition = /*#__PURE__*/function (PinnedPosition) {
+  PinnedPosition[PinnedPosition["NONE"] = 0] = "NONE";
+  PinnedPosition[PinnedPosition["LEFT"] = 1] = "LEFT";
+  PinnedPosition[PinnedPosition["RIGHT"] = 2] = "RIGHT";
+  return PinnedPosition;
+}({});
 const EMPTY_CELL_PARAMS = {
   id: -1,
   field: '__unset__',
@@ -54,344 +58,25 @@ const EMPTY_CELL_PARAMS = {
 const useUtilityClasses = ownerState => {
   const {
     align,
+    showLeftBorder,
     showRightBorder,
+    pinnedPosition,
     isEditable,
     isSelected,
     isSelectionMode,
     classes
   } = ownerState;
   const slots = {
-    root: ['cell', `cell--text${(0, _utils.unstable_capitalize)(align)}`, isEditable && 'cell--editable', isSelected && 'selected', showRightBorder && 'cell--withRightBorder', isSelectionMode && !isEditable && 'cell--selectionMode', 'withBorderColor'],
+    root: ['cell', `cell--text${(0, _utils.unstable_capitalize)(align)}`, isSelected && 'selected', isEditable && 'cell--editable', showLeftBorder && 'cell--withLeftBorder', showRightBorder && 'cell--withRightBorder', pinnedPosition === PinnedPosition.LEFT && 'cell--pinnedLeft', pinnedPosition === PinnedPosition.RIGHT && 'cell--pinnedRight', isSelectionMode && !isEditable && 'cell--selectionMode'],
     content: ['cellContent']
   };
   return (0, _utils.unstable_composeClasses)(slots, _gridClasses.getDataGridUtilityClass, classes);
 };
 let 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.
-const GridCellWrapper = /*#__PURE__*/React.forwardRef((props, ref) => {
-  const {
-    column,
-    rowId,
-    editCellState
-  } = props;
-  const apiRef = (0, _useGridApiContext.useGridApiContext)();
-  const rootProps = (0, _useGridRootProps.useGridRootProps)();
-  const field = column.field;
-  const cellParamsWithAPI = (0, _useGridSelector.useGridSelector)(apiRef, () => {
-    // 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 {
-      const cellParams = apiRef.current.getCellParams(rowId, field);
-      const result = cellParams;
-      result.api = apiRef.current;
-      return result;
-    } catch (e) {
-      if (e instanceof _useGridParamsApi.MissingRowIdError) {
-        return EMPTY_CELL_PARAMS;
-      }
-      throw e;
-    }
-  }, _useGridSelector.objectShallowCompare);
-  const isSelected = (0, _useGridSelector.useGridSelector)(apiRef, () => apiRef.current.unstable_applyPipeProcessors('isCellSelected', false, {
-    id: rowId,
-    field
-  }));
-  if (cellParamsWithAPI === EMPTY_CELL_PARAMS) {
-    return null;
-  }
-  const {
-    cellMode,
-    hasFocus,
-    isEditable,
-    value,
-    formattedValue
-  } = cellParamsWithAPI;
-  const managesOwnFocus = column.type === 'actions';
-  const tabIndex = (cellMode === 'view' || !isEditable) && !managesOwnFocus ? cellParamsWithAPI.tabIndex : -1;
-  const {
-    classes: rootClasses,
-    getCellClassName
-  } = rootProps;
-  const classNames = apiRef.current.unstable_applyPipeProcessors('cellClassName', [], {
-    id: rowId,
-    field
-  });
-  if (column.cellClassName) {
-    classNames.push(typeof column.cellClassName === 'function' ? column.cellClassName(cellParamsWithAPI) : column.cellClassName);
-  }
-  if (getCellClassName) {
-    classNames.push(getCellClassName(cellParamsWithAPI));
-  }
-  let children;
-  if (editCellState == null && column.renderCell) {
-    children = column.renderCell(cellParamsWithAPI);
-    classNames.push(_gridClasses.gridClasses['cell--withRenderer']);
-    classNames.push(rootClasses?.['cell--withRenderer']);
-  }
-  if (editCellState != null && column.renderEditCell) {
-    const updatedRow = apiRef.current.getRowWithUpdatedValues(rowId, column.field);
 
-    // eslint-disable-next-line @typescript-eslint/naming-convention
-    const editCellStateRest = (0, _objectWithoutPropertiesLoose2.default)(editCellState, _excluded);
-    const params = (0, _extends2.default)({}, cellParamsWithAPI, {
-      row: updatedRow
-    }, editCellStateRest);
-    children = column.renderEditCell(params);
-    classNames.push(_gridClasses.gridClasses['cell--editing']);
-    classNames.push(rootClasses?.['cell--editing']);
-  }
-  const {
-    slots
-  } = rootProps;
-  const CellComponent = slots.cell;
-  const cellProps = (0, _extends2.default)({}, props, {
-    ref,
-    field,
-    formattedValue,
-    hasFocus,
-    isEditable,
-    isSelected,
-    value,
-    cellMode,
-    children,
-    tabIndex,
-    className: (0, _clsx.default)(classNames)
-  });
-  return /*#__PURE__*/React.createElement(CellComponent, cellProps);
-});
-const GridCell = exports.GridCell = /*#__PURE__*/React.forwardRef((props, ref) => {
-  const {
-      align,
-      children: childrenProp,
-      colIndex,
-      column,
-      cellMode,
-      field,
-      formattedValue,
-      hasFocus,
-      height,
-      isEditable,
-      isSelected,
-      rowId,
-      tabIndex,
-      value,
-      width,
-      className,
-      showRightBorder,
-      colSpan,
-      disableDragEvents,
-      isNotVisible,
-      onClick,
-      onDoubleClick,
-      onMouseDown,
-      onMouseUp,
-      onMouseOver,
-      onKeyDown,
-      onKeyUp,
-      onDragEnter,
-      onDragOver
-    } = props,
-    other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded2);
-  const valueToRender = formattedValue == null ? value : formattedValue;
-  const cellRef = React.useRef(null);
-  const handleRef = (0, _utils.unstable_useForkRef)(ref, cellRef);
-  const focusElementRef = React.useRef(null);
-  const apiRef = (0, _useGridApiContext.useGridApiContext)();
-  const rootProps = (0, _useGridRootProps.useGridRootProps)();
-  const ownerState = {
-    align,
-    showRightBorder,
-    isEditable,
-    classes: rootProps.classes,
-    isSelected
-  };
-  const classes = useUtilityClasses(ownerState);
-  const publishMouseUp = React.useCallback(eventName => event => {
-    const params = apiRef.current.getCellParams(rowId, field || '');
-    apiRef.current.publishEvent(eventName, params, event);
-    if (onMouseUp) {
-      onMouseUp(event);
-    }
-  }, [apiRef, field, onMouseUp, rowId]);
-  const publishMouseDown = React.useCallback(eventName => event => {
-    const params = apiRef.current.getCellParams(rowId, field || '');
-    apiRef.current.publishEvent(eventName, params, event);
-    if (onMouseDown) {
-      onMouseDown(event);
-    }
-  }, [apiRef, field, onMouseDown, rowId]);
-  const publish = React.useCallback((eventName, propHandler) => event => {
-    // The row might have been deleted during the click
-    if (!apiRef.current.getRow(rowId)) {
-      return;
-    }
-    const params = apiRef.current.getCellParams(rowId, field || '');
-    apiRef.current.publishEvent(eventName, params, event);
-    if (propHandler) {
-      propHandler(event);
-    }
-  }, [apiRef, field, rowId]);
-  const style = React.useMemo(() => {
-    if (isNotVisible) {
-      return {
-        padding: 0,
-        opacity: 0,
-        width: 0,
-        border: 0
-      };
-    }
-    const cellStyle = {
-      minWidth: width,
-      maxWidth: width,
-      minHeight: height,
-      maxHeight: height === 'auto' ? 'none' : height // max-height doesn't support "auto"
-    };
-    return cellStyle;
-  }, [width, height, isNotVisible]);
-  React.useEffect(() => {
-    if (!hasFocus || cellMode === _models.GridCellModes.Edit) {
-      return;
-    }
-    const doc = (0, _utils.unstable_ownerDocument)(apiRef.current.rootElementRef.current);
-    if (cellRef.current && !cellRef.current.contains(doc.activeElement)) {
-      const focusableElement = cellRef.current.querySelector('[tabindex="0"]');
-      const elementToFocus = focusElementRef.current || focusableElement || cellRef.current;
-      if ((0, _doesSupportPreventScroll.doesSupportPreventScroll)()) {
-        elementToFocus.focus({
-          preventScroll: true
-        });
-      } else {
-        const scrollPosition = apiRef.current.getScrollPosition();
-        elementToFocus.focus();
-        apiRef.current.scroll(scrollPosition);
-      }
-    }
-  }, [hasFocus, cellMode, apiRef]);
-  let handleFocus = other.onFocus;
-  if (process.env.NODE_ENV === 'test' && rootProps.experimentalFeatures?.warnIfFocusStateIsNotSynced) {
-    handleFocus = event => {
-      const focusedCell = (0, _gridFocusStateSelector.gridFocusCellSelector)(apiRef);
-      if (focusedCell?.id === rowId && focusedCell.field === field) {
-        if (typeof other.onFocus === 'function') {
-          other.onFocus(event);
-        }
-        return;
-      }
-      if (!warnedOnce) {
-        console.warn([`MUI: The cell with id=${rowId} and field=${field} received focus.`, `According to the state, the focus should be at id=${focusedCell?.id}, field=${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;
-      }
-    };
-  }
-  const managesOwnFocus = column.type === 'actions';
-  let children = childrenProp;
-  if (children === undefined) {
-    const valueString = valueToRender?.toString();
-    children = /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-      className: classes.content,
-      title: valueString,
-      role: "presentation",
-      children: valueString
-    });
-  }
-  if ( /*#__PURE__*/React.isValidElement(children) && managesOwnFocus) {
-    children = /*#__PURE__*/React.cloneElement(children, {
-      focusElementRef
-    });
-  }
-  const draggableEventHandlers = disableDragEvents ? null : {
-    onDragEnter: publish('cellDragEnter', onDragEnter),
-    onDragOver: publish('cellDragOver', onDragOver)
-  };
-  const ariaV7 = rootProps.experimentalFeatures?.ariaV7;
-  return (
-    /*#__PURE__*/
-    // eslint-disable-next-line jsx-a11y/no-static-element-interactions
-    (0, _jsxRuntime.jsx)("div", (0, _extends2.default)({
-      ref: handleRef,
-      className: (0, _clsx.default)(className, classes.root),
-      role: ariaV7 ? 'gridcell' : '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
-    }))
-  );
-});
-const MemoizedCellWrapper = exports.GridCellWrapper = (0, _fastMemo.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.default.oneOf(['center', 'left', 'right']),
-  className: _propTypes.default.string,
-  colIndex: _propTypes.default.number,
-  colSpan: _propTypes.default.number,
-  column: _propTypes.default.object,
-  disableDragEvents: _propTypes.default.bool,
-  height: _propTypes.default.oneOfType([_propTypes.default.oneOf(['auto']), _propTypes.default.number]),
-  onClick: _propTypes.default.func,
-  onDoubleClick: _propTypes.default.func,
-  onDragEnter: _propTypes.default.func,
-  onDragOver: _propTypes.default.func,
-  onKeyDown: _propTypes.default.func,
-  onMouseDown: _propTypes.default.func,
-  onMouseUp: _propTypes.default.func,
-  rowId: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),
-  showRightBorder: _propTypes.default.bool,
-  width: _propTypes.default.number
-} : void 0;
-process.env.NODE_ENV !== "production" ? GridCell.propTypes = {
-  // ----------------------------- Warning --------------------------------
-  // | These PropTypes are generated from the TypeScript type definitions |
-  // | To update them edit the TypeScript types and run "yarn proptypes"  |
-  // ----------------------------------------------------------------------
-  align: _propTypes.default.oneOf(['center', 'left', 'right']),
-  cellMode: _propTypes.default.oneOf(['edit', 'view']),
-  children: _propTypes.default.node,
-  className: _propTypes.default.string,
-  colIndex: _propTypes.default.number,
-  colSpan: _propTypes.default.number,
-  column: _propTypes.default.object,
-  disableDragEvents: _propTypes.default.bool,
-  editCellState: _propTypes.default.shape({
-    changeReason: _propTypes.default.oneOf(['debouncedSetEditCellValue', 'setEditCellValue']),
-    isProcessingProps: _propTypes.default.bool,
-    isValidating: _propTypes.default.bool,
-    value: _propTypes.default.any
-  }),
-  isNotVisible: _propTypes.default.bool,
-  height: _propTypes.default.oneOfType([_propTypes.default.oneOf(['auto']), _propTypes.default.number]),
-  onClick: _propTypes.default.func,
-  onDoubleClick: _propTypes.default.func,
-  onDragEnter: _propTypes.default.func,
-  onDragOver: _propTypes.default.func,
-  onKeyDown: _propTypes.default.func,
-  onMouseDown: _propTypes.default.func,
-  onMouseUp: _propTypes.default.func,
-  rowId: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),
-  showRightBorder: _propTypes.default.bool,
-  width: _propTypes.default.number
-} : void 0;
-const GridCellV7 = /*#__PURE__*/React.forwardRef((props, ref) => {
+const GridCell = /*#__PURE__*/React.forwardRef((props, ref) => {
   const {
       column,
       rowId,
@@ -401,10 +86,14 @@ const GridCellV7 = /*#__PURE__*/React.forwardRef((props, ref) => {
       height,
       width,
       className,
-      showRightBorder,
+      style: styleProp,
       colSpan,
       disableDragEvents,
       isNotVisible,
+      pinnedOffset,
+      pinnedPosition,
+      sectionIndex,
+      sectionLength,
       onClick,
       onDoubleClick,
       onMouseDown,
@@ -415,7 +104,7 @@ const GridCellV7 = /*#__PURE__*/React.forwardRef((props, ref) => {
       onDragEnter,
       onDragOver
     } = props,
-    other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded3);
+    other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
   const apiRef = (0, _useGridApiContext.useGridApiContext)();
   const rootProps = (0, _useGridRootProps.useGridRootProps)();
   const field = column.field;
@@ -442,7 +131,7 @@ const GridCellV7 = /*#__PURE__*/React.forwardRef((props, ref) => {
   const {
     cellMode,
     hasFocus,
-    isEditable,
+    isEditable = false,
     value,
     formattedValue
   } = cellParamsWithAPI;
@@ -468,11 +157,16 @@ const GridCellV7 = /*#__PURE__*/React.forwardRef((props, ref) => {
   const focusElementRef = React.useRef(null);
   // @ts-expect-error To access `cellSelection` flag as it's a `premium` feature
   const isSelectionMode = rootProps.cellSelection ?? false;
+  const isSectionLastCell = sectionIndex === sectionLength - 1;
+  const showLeftBorder = pinnedPosition === PinnedPosition.RIGHT && sectionIndex === 0;
+  const showRightBorder = rootProps.showCellVerticalBorder && (pinnedPosition !== PinnedPosition.LEFT ? !isSectionLastCell : true) || pinnedPosition === PinnedPosition.LEFT && isSectionLastCell;
   const ownerState = {
     align,
+    showLeftBorder,
     showRightBorder,
     isEditable,
     classes: rootProps.classes,
+    pinnedPosition,
     isSelected,
     isSelectionMode
   };
@@ -511,14 +205,18 @@ const GridCellV7 = /*#__PURE__*/React.forwardRef((props, ref) => {
         border: 0
       };
     }
-    const cellStyle = {
-      minWidth: width,
-      maxWidth: width,
-      minHeight: height,
-      maxHeight: height === 'auto' ? 'none' : height // max-height doesn't support "auto"
-    };
+    const cellStyle = (0, _extends2.default)({
+      '--width': `${width}px`,
+      '--height': typeof height === 'number' ? `${height}px` : height
+    }, styleProp);
+    if (pinnedPosition === PinnedPosition.LEFT) {
+      cellStyle.left = pinnedOffset;
+    }
+    if (pinnedPosition === PinnedPosition.RIGHT) {
+      cellStyle.right = pinnedOffset;
+    }
     return cellStyle;
-  }, [width, height, isNotVisible]);
+  }, [width, height, isNotVisible, styleProp, pinnedOffset, pinnedPosition]);
   React.useEffect(() => {
     if (!hasFocus || cellMode === _models.GridCellModes.Edit) {
       return;
@@ -552,7 +250,7 @@ const GridCellV7 = /*#__PURE__*/React.forwardRef((props, ref) => {
         return;
       }
       if (!warnedOnce) {
-        console.warn([`MUI: The cell with id=${rowId} and field=${field} received focus.`, `According to the state, the focus should be at id=${focusedCell?.id}, field=${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'));
+        console.warn([`MUI X: The cell with id=${rowId} and field=${field} received focus.`, `According to the state, the focus should be at id=${focusedCell?.id}, field=${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;
       }
     };
@@ -567,7 +265,7 @@ const GridCellV7 = /*#__PURE__*/React.forwardRef((props, ref) => {
     const updatedRow = apiRef.current.getRowWithUpdatedValues(rowId, column.field);
 
     // eslint-disable-next-line @typescript-eslint/naming-convention
-    const editCellStateRest = (0, _objectWithoutPropertiesLoose2.default)(editCellState, _excluded4);
+    const editCellStateRest = (0, _objectWithoutPropertiesLoose2.default)(editCellState, _excluded2);
     const params = (0, _extends2.default)({}, cellParamsWithAPI, {
       row: updatedRow
     }, editCellStateRest);
@@ -593,34 +291,29 @@ const GridCellV7 = /*#__PURE__*/React.forwardRef((props, ref) => {
     onDragEnter: publish('cellDragEnter', onDragEnter),
     onDragOver: publish('cellDragOver', onDragOver)
   };
-  const ariaV7 = rootProps.experimentalFeatures?.ariaV7;
-  return (
-    /*#__PURE__*/
-    // eslint-disable-next-line jsx-a11y/no-static-element-interactions
-    (0, _jsxRuntime.jsx)("div", (0, _extends2.default)({
-      ref: handleRef,
-      className: (0, _clsx.default)(className, classNames, classes.root),
-      role: ariaV7 ? 'gridcell' : '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
-    }))
-  );
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", (0, _extends2.default)({
+    ref: handleRef,
+    className: (0, _clsx.default)(className, classNames, classes.root),
+    role: "gridcell",
+    "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 = {
+process.env.NODE_ENV !== "production" ? GridCell.propTypes = {
   // ----------------------------- Warning --------------------------------
   // | These PropTypes are generated from the TypeScript type definitions |
   // | To update them edit the TypeScript types and run "yarn proptypes"  |
@@ -637,8 +330,9 @@ process.env.NODE_ENV !== "production" ? GridCellV7.propTypes = {
     isValidating: _propTypes.default.bool,
     value: _propTypes.default.any
   }),
+  gridHasScrollX: _propTypes.default.bool.isRequired,
   height: _propTypes.default.oneOfType([_propTypes.default.oneOf(['auto']), _propTypes.default.number]).isRequired,
-  isNotVisible: _propTypes.default.bool,
+  isNotVisible: _propTypes.default.bool.isRequired,
   onClick: _propTypes.default.func,
   onDoubleClick: _propTypes.default.func,
   onDragEnter: _propTypes.default.func,
@@ -646,8 +340,11 @@ process.env.NODE_ENV !== "production" ? GridCellV7.propTypes = {
   onKeyDown: _propTypes.default.func,
   onMouseDown: _propTypes.default.func,
   onMouseUp: _propTypes.default.func,
+  pinnedOffset: _propTypes.default.number.isRequired,
+  pinnedPosition: _propTypes.default.oneOf([0, 1, 2]).isRequired,
   rowId: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]).isRequired,
-  showRightBorder: _propTypes.default.bool,
+  sectionIndex: _propTypes.default.number.isRequired,
+  sectionLength: _propTypes.default.number.isRequired,
   width: _propTypes.default.number.isRequired
 } : void 0;
-const MemoizedGridCellV7 = exports.GridCellV7 = (0, _fastMemo.fastMemo)(GridCellV7);
+const MemoizedGridCell = exports.GridCell = (0, _fastMemo.fastMemo)(GridCell);

package/node/components/columnHeaders/GridBaseColumnHeaders.js

@@ -22,7 +22,7 @@ const useUtilityClasses = ownerState => {
     classes
   } = ownerState;
   const slots = {
-    root: ['columnHeaders', 'withBorderColor']
+    root: ['columnHeaders']
   };
   return (0, _utils.unstable_composeClasses)(slots, _gridClasses.getDataGridUtilityClass, classes);
 };
@@ -31,12 +31,7 @@ const GridColumnHeadersRoot = (0, _system.styled)('div', {
   slot: 'ColumnHeaders',
   overridesResolver: (props, styles) => styles.columnHeaders
 })({
-  position: 'relative',
-  overflow: 'hidden',
   display: 'flex',
-  alignItems: 'center',
-  boxSizing: 'border-box',
-  borderBottom: '1px solid',
   borderTopLeftRadius: 'var(--unstable_DataGrid-radius)',
   borderTopRightRadius: 'var(--unstable_DataGrid-radius)'
 });

package/node/components/columnHeaders/GridColumnHeaderItem.js

@@ -4,11 +4,12 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.GridColumnHeaderItem = GridColumnHeaderItem;
+exports.GridColumnHeaderItem = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _utils = require("@mui/utils");
+var _fastMemo = require("../../utils/fastMemo");
 var _useGridPrivateApiContext = require("../../hooks/utils/useGridPrivateApiContext");
 var _GridColumnHeaderSortIcon = require("./GridColumnHeaderSortIcon");
 var _ColumnHeaderMenuIcon = require("./ColumnHeaderMenuIcon");
@@ -132,14 +133,16 @@ function GridColumnHeaderItem(props) {
     onExited: handleExited
   });
   const sortingOrder = colDef.sortingOrder ?? rootProps.sortingOrder;
+  const showSortIcon = (colDef.sortable || sortDirection != null) && !colDef.hideSortIcons && !rootProps.disableColumnSorting;
   const columnTitleIconButtons = /*#__PURE__*/(0, _jsxRuntime.jsxs)(React.Fragment, {
     children: [!rootProps.disableColumnFilter && /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.columnHeaderFilterIconButton, (0, _extends2.default)({
       field: colDef.field,
       counter: filterItemsCounter
-    }, rootProps.slotProps?.columnHeaderFilterIconButton)), colDef.sortable && !colDef.hideSortIcons && /*#__PURE__*/(0, _jsxRuntime.jsx)(_GridColumnHeaderSortIcon.GridColumnHeaderSortIcon, {
+    }, rootProps.slotProps?.columnHeaderFilterIconButton)), showSortIcon && /*#__PURE__*/(0, _jsxRuntime.jsx)(_GridColumnHeaderSortIcon.GridColumnHeaderSortIcon, {
       direction: sortDirection,
       index: sortIndex,
-      sortingOrder: sortingOrder
+      sortingOrder: sortingOrder,
+      disabled: !colDef.sortable
     })]
   });
   React.useLayoutEffect(() => {
@@ -201,4 +204,5 @@ process.env.NODE_ENV !== "production" ? GridColumnHeaderItem.propTypes = {
   sortDirection: _propTypes.default.oneOf(['asc', 'desc']),
   sortIndex: _propTypes.default.number,
   tabIndex: _propTypes.default.oneOf([-1, 0]).isRequired
-} : void 0;
+} : void 0;
+const Memoized = exports.GridColumnHeaderItem = (0, _fastMemo.fastMemo)(GridColumnHeaderItem);

package/node/components/columnHeaders/GridColumnHeaderSortIcon.js

@@ -46,7 +46,8 @@ function GridColumnHeaderSortIconRaw(props) {
   const {
     direction,
     index,
-    sortingOrder
+    sortingOrder,
+    disabled
   } = props;
   const apiRef = (0, _useGridApiContext.useGridApiContext)();
   const rootProps = (0, _useGridRootProps.useGridRootProps)();
@@ -62,7 +63,8 @@ function GridColumnHeaderSortIconRaw(props) {
     tabIndex: -1,
     "aria-label": apiRef.current.getLocaleText('columnHeaderSortIconLabel'),
     title: apiRef.current.getLocaleText('columnHeaderSortIconLabel'),
-    size: "small"
+    size: "small",
+    disabled: disabled
   }, rootProps.slotProps?.baseIconButton, {
     children: iconElement
   }));
@@ -81,6 +83,7 @@ process.env.NODE_ENV !== "production" ? GridColumnHeaderSortIconRaw.propTypes =
   // | To update them edit the TypeScript types and run "yarn proptypes"  |
   // ----------------------------------------------------------------------
   direction: _propTypes.default.oneOf(['asc', 'desc']),
+  disabled: _propTypes.default.bool,
   index: _propTypes.default.number,
   sortingOrder: _propTypes.default.arrayOf(_propTypes.default.oneOf(['asc', 'desc'])).isRequired
 } : void 0;

package/node/components/columnHeaders/GridColumnHeadersInner.js

@@ -56,7 +56,7 @@ const GridColumnHeadersInner = exports.GridColumnHeadersInner = /*#__PURE__*/Rea
   const rootProps = (0, _useGridRootProps.useGridRootProps)();
   const ownerState = (0, _extends2.default)({}, rootProps, {
     isDragging,
-    hasScrollX: apiRef.current.getRootDimensions()?.hasScrollX ?? false
+    hasScrollX: apiRef.current.getRootDimensions().hasScrollX
   });
   const classes = useUtilityClasses(ownerState);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(GridColumnHeadersInnerRoot, (0, _extends2.default)({