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

package/node/components/GridSkeletonLoadingOverlay.js

@@ -12,14 +12,19 @@ var _clsx = _interopRequireDefault(require("clsx"));
 var _system = require("@mui/system");
 var _useForkRef = _interopRequireDefault(require("@mui/utils/useForkRef"));
 var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
+var _RtlProvider = require("@mui/system/RtlProvider");
+var _forwardRef = require("@mui/x-internals/forwardRef");
 var _useGridApiContext = require("../hooks/utils/useGridApiContext");
 var _useGridRootProps = require("../hooks/utils/useGridRootProps");
 var _hooks = require("../hooks");
+var _constants = require("../internals/constants");
 var _gridClasses = require("../constants/gridClasses");
 var _getPinnedCellOffset = require("../internals/utils/getPinnedCellOffset");
 var _cellBorderUtils = require("../utils/cellBorderUtils");
 var _domUtils = require("../utils/domUtils");
 var _GridScrollbarFillerCell = require("./GridScrollbarFillerCell");
+var _rtlFlipSide = require("../utils/rtlFlipSide");
+var _utils = require("../internals/utils");
 var _jsxRuntime = require("react/jsx-runtime");
 const SkeletonOverlay = (0, _system.styled)('div', {
   name: 'MuiDataGrid',
@@ -42,11 +47,12 @@ const useUtilityClasses = ownerState => {
   return (0, _composeClasses.default)(slots, _gridClasses.getDataGridUtilityClass, classes);
 };
 const getColIndex = el => parseInt(el.getAttribute('data-colindex'), 10);
-const GridSkeletonLoadingOverlay = exports.GridSkeletonLoadingOverlay = /*#__PURE__*/React.forwardRef(function GridSkeletonLoadingOverlay(props, forwardedRef) {
+const GridSkeletonLoadingOverlay = exports.GridSkeletonLoadingOverlay = (0, _forwardRef.forwardRef)(function GridSkeletonLoadingOverlay(props, forwardedRef) {
   const rootProps = (0, _useGridRootProps.useGridRootProps)();
   const {
     slots
   } = rootProps;
+  const isRtl = (0, _RtlProvider.useRtl)();
   const classes = useUtilityClasses({
     classes: rootProps.classes
   });
@@ -62,18 +68,12 @@ const GridSkeletonLoadingOverlay = exports.GridSkeletonLoadingOverlay = /*#__PUR
   const allVisibleColumns = (0, _hooks.useGridSelector)(apiRef, _hooks.gridVisibleColumnDefinitionsSelector);
   const columns = React.useMemo(() => allVisibleColumns.slice(0, inViewportCount), [allVisibleColumns, inViewportCount]);
   const pinnedColumns = (0, _hooks.useGridSelector)(apiRef, _hooks.gridVisiblePinnedColumnDefinitionsSelector);
-  const getPinnedStyle = React.useCallback((computedWidth, index, position) => {
-    const pinnedOffset = (0, _getPinnedCellOffset.getPinnedCellOffset)(position, computedWidth, index, positions, dimensions);
-    return {
-      [position]: pinnedOffset
-    };
-  }, [dimensions, positions]);
   const getPinnedPosition = React.useCallback(field => {
     if (pinnedColumns.left.findIndex(col => col.field === field) !== -1) {
-      return _hooks.GridPinnedColumnPosition.LEFT;
+      return _constants.PinnedColumnPosition.LEFT;
     }
     if (pinnedColumns.right.findIndex(col => col.field === field) !== -1) {
-      return _hooks.GridPinnedColumnPosition.RIGHT;
+      return _constants.PinnedColumnPosition.RIGHT;
     }
     return undefined;
   }, [pinnedColumns.left, pinnedColumns.right]);
@@ -84,13 +84,15 @@ const GridSkeletonLoadingOverlay = exports.GridSkeletonLoadingOverlay = /*#__PUR
       for (let colIndex = 0; colIndex < columns.length; colIndex += 1) {
         const column = columns[colIndex];
         const pinnedPosition = getPinnedPosition(column.field);
-        const isPinnedLeft = pinnedPosition === _hooks.GridPinnedColumnPosition.LEFT;
-        const isPinnedRight = pinnedPosition === _hooks.GridPinnedColumnPosition.RIGHT;
-        const sectionLength = pinnedPosition ? pinnedColumns[pinnedPosition].length // pinned section
+        const isPinnedLeft = pinnedPosition === _constants.PinnedColumnPosition.LEFT;
+        const isPinnedRight = pinnedPosition === _constants.PinnedColumnPosition.RIGHT;
+        const pinnedSide = (0, _rtlFlipSide.rtlFlipSide)(pinnedPosition, isRtl);
+        const sectionLength = pinnedSide ? pinnedColumns[pinnedSide].length // pinned section
         : columns.length - pinnedColumns.left.length - pinnedColumns.right.length; // middle section
-        const sectionIndex = pinnedPosition ? pinnedColumns[pinnedPosition].findIndex(col => col.field === column.field) // pinned section
+        const sectionIndex = pinnedSide ? pinnedColumns[pinnedSide].findIndex(col => col.field === column.field) // pinned section
         : colIndex - pinnedColumns.left.length; // middle section
-        const pinnedStyle = pinnedPosition && getPinnedStyle(column.computedWidth, colIndex, pinnedPosition);
+        const scrollbarWidth = dimensions.hasScrollY ? dimensions.scrollbarSize : 0;
+        const pinnedStyle = (0, _utils.attachPinnedStyle)({}, isRtl, pinnedPosition, (0, _getPinnedCellOffset.getPinnedCellOffset)(pinnedPosition, column.computedWidth, colIndex, positions, dimensions.columnsTotalWidth, scrollbarWidth));
         const gridHasFiller = dimensions.columnsTotalWidth < dimensions.viewportOuterSize.width;
         const showRightBorder = (0, _cellBorderUtils.shouldCellShowRightBorder)(pinnedPosition, sectionIndex, sectionLength, rootProps.showCellVerticalBorder, gridHasFiller);
         const showLeftBorder = (0, _cellBorderUtils.shouldCellShowLeftBorder)(pinnedPosition, sectionIndex);
@@ -104,7 +106,6 @@ const GridSkeletonLoadingOverlay = exports.GridSkeletonLoadingOverlay = /*#__PUR
           width: emptyCellWidth,
           empty: true
         }, `skeleton-filler-column-${i}`);
-        const scrollbarWidth = dimensions.hasScrollY ? dimensions.scrollbarSize : 0;
         const hasScrollbarFiller = isLastColumn && scrollbarWidth !== 0;
         if (hasFillerBefore) {
           rowCells.push(emptyCell);
@@ -136,7 +137,7 @@ const GridSkeletonLoadingOverlay = exports.GridSkeletonLoadingOverlay = /*#__PUR
       }, `skeleton-row-${i}`));
     }
     return array;
-  }, [slots, columns, pinnedColumns, skeletonRowsCount, rootProps.showCellVerticalBorder, dimensions.columnsTotalWidth, dimensions.viewportOuterSize.width, dimensions.rowHeight, dimensions.hasScrollY, dimensions.scrollbarSize, getPinnedPosition, getPinnedStyle]);
+  }, [slots, columns, pinnedColumns, skeletonRowsCount, rootProps.showCellVerticalBorder, dimensions, positions, getPinnedPosition, isRtl]);
 
   // Sync the column resize of the overlay columns with the grid
   const handleColumnResize = params => {
@@ -150,8 +151,8 @@ const GridSkeletonLoadingOverlay = exports.GridSkeletonLoadingOverlay = /*#__PUR
     }
     const resizedColIndex = columns.findIndex(col => col.field === colDef.field);
     const pinnedPosition = getPinnedPosition(colDef.field);
-    const isPinnedLeft = pinnedPosition === _hooks.GridPinnedColumnPosition.LEFT;
-    const isPinnedRight = pinnedPosition === _hooks.GridPinnedColumnPosition.RIGHT;
+    const isPinnedLeft = pinnedPosition === _constants.PinnedColumnPosition.LEFT;
+    const isPinnedRight = pinnedPosition === _constants.PinnedColumnPosition.RIGHT;
     const currentWidth = getComputedStyle(cells[0]).getPropertyValue('--width');
     const delta = parseInt(currentWidth, 10) - width;
     if (cells) {
@@ -180,9 +181,9 @@ const GridSkeletonLoadingOverlay = exports.GridSkeletonLoadingOverlay = /*#__PUR
   };
   (0, _hooks.useGridApiEventHandler)(apiRef, 'columnResize', handleColumnResize);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(SkeletonOverlay, (0, _extends2.default)({
-    className: classes.root,
-    ref: handleRef
+    className: classes.root
   }, props, {
+    ref: handleRef,
     children: children
   }));
 });

package/node/components/base/GridOverlays.js

@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.GridOverlays = GridOverlays;
+exports.GridOverlayWrapper = GridOverlayWrapper;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
@@ -91,26 +91,4 @@ process.env.NODE_ENV !== "production" ? GridOverlayWrapper.propTypes = {
   // ----------------------------------------------------------------------
   loadingOverlayVariant: _propTypes.default.oneOf(['circular-progress', 'linear-progress', 'skeleton']),
   overlayType: _propTypes.default.oneOf(['loadingOverlay', 'noResultsOverlay', 'noRowsOverlay'])
-} : void 0;
-process.env.NODE_ENV !== "production" ? GridOverlays.propTypes = {
-  // ----------------------------- Warning --------------------------------
-  // | These PropTypes are generated from the TypeScript type definitions |
-  // | To update them edit the TypeScript types and run "pnpm proptypes"  |
-  // ----------------------------------------------------------------------
-  loadingOverlayVariant: _propTypes.default.oneOf(['circular-progress', 'linear-progress', 'skeleton']),
-  overlayType: _propTypes.default.oneOf(['loadingOverlay', 'noResultsOverlay', 'noRowsOverlay'])
-} : void 0;
-function GridOverlays(props) {
-  const {
-    overlayType
-  } = props;
-  const rootProps = (0, _useGridRootProps.useGridRootProps)();
-  if (!overlayType) {
-    return null;
-  }
-  const Overlay = rootProps.slots?.[overlayType];
-  const overlayProps = rootProps.slotProps?.[overlayType];
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(GridOverlayWrapper, (0, _extends2.default)({}, props, {
-    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(Overlay, (0, _extends2.default)({}, overlayProps))
-  }));
-}
+} : void 0;

package/node/components/base/index.js

@@ -24,15 +24,4 @@ Object.keys(_GridFooterPlaceholder).forEach(function (key) {
       return _GridFooterPlaceholder[key];
     }
   });
-});
-var _GridOverlays = require("./GridOverlays");
-Object.keys(_GridOverlays).forEach(function (key) {
-  if (key === "default" || key === "__esModule") return;
-  if (key in exports && exports[key] === _GridOverlays[key]) return;
-  Object.defineProperty(exports, key, {
-    enumerable: true,
-    get: function () {
-      return _GridOverlays[key];
-    }
-  });
 });

package/node/components/cell/GridActionsCell.js

@@ -98,6 +98,13 @@ function GridActionsCell(props) {
   const hideMenu = () => {
     setOpen(false);
   };
+  const toggleMenu = () => {
+    if (open) {
+      hideMenu();
+    } else {
+      showMenu();
+    }
+  };
   const handleTouchRippleRef = index => instance => {
     touchRippleRefs.current[index] = instance;
   };
@@ -168,7 +175,7 @@ function GridActionsCell(props) {
       "aria-controls": open ? menuId : undefined,
       role: "menuitem",
       size: "small",
-      onClick: showMenu,
+      onClick: toggleMenu,
       touchRippleRef: handleTouchRippleRef(buttonId),
       tabIndex: focusedButtonIndex === iconButtons.length ? tabIndex : -1
     }, rootProps.slotProps?.baseIconButton, {

package/node/components/cell/GridActionsCellItem.js

@@ -10,12 +10,12 @@ 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"));
-var _ListItemIcon = _interopRequireDefault(require("@mui/material/ListItemIcon"));
+var _forwardRef = require("@mui/x-internals/forwardRef");
 var _useGridRootProps = require("../../hooks/utils/useGridRootProps");
 var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["label", "icon", "showInMenu", "onClick"],
-  _excluded2 = ["label", "icon", "showInMenu", "onClick", "closeMenuOnClick", "closeMenu"];
-const GridActionsCellItem = exports.GridActionsCellItem = /*#__PURE__*/React.forwardRef((props, ref) => {
+  _excluded2 = ["label", "icon", "showInMenu", "onClick", "closeMenuOnClick", "closeMenu"]; // FIXME(v8:romgrk): Make parametric
+const GridActionsCellItem = exports.GridActionsCellItem = (0, _forwardRef.forwardRef)((props, ref) => {
   const rootProps = (0, _useGridRootProps.useGridRootProps)();
   if (!props.showInMenu) {
     const {
@@ -28,13 +28,13 @@ const GridActionsCellItem = exports.GridActionsCellItem = /*#__PURE__*/React.for
       onClick?.(event);
     };
     return /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.baseIconButton, (0, _extends2.default)({
-      ref: ref,
       size: "small",
       role: "menuitem",
       "aria-label": label
     }, other, {
       onClick: handleClick
     }, rootProps.slotProps?.baseIconButton, {
+      ref: ref,
       children: /*#__PURE__*/React.cloneElement(icon, {
         fontSize: 'small'
       })
@@ -54,13 +54,12 @@ const GridActionsCellItem = exports.GridActionsCellItem = /*#__PURE__*/React.for
       closeMenu?.();
     }
   };
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(rootProps.slots.baseMenuItem, (0, _extends2.default)({
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.baseMenuItem, (0, _extends2.default)({
     ref: ref
   }, other, {
     onClick: handleClick,
-    children: [icon && /*#__PURE__*/(0, _jsxRuntime.jsx)(_ListItemIcon.default, {
-      children: icon
-    }), label]
+    iconStart: icon,
+    children: label
   }));
 });
 process.env.NODE_ENV !== "production" ? GridActionsCellItem.propTypes = {

package/node/components/cell/GridCell.js

@@ -5,7 +5,7 @@ var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWild
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.gridPinnedColumnPositionLookup = exports.PinnedPosition = exports.GridCell = void 0;
+exports.gridPinnedColumnPositionLookup = 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"));
@@ -14,56 +14,27 @@ var _clsx = _interopRequireDefault(require("clsx"));
 var _utils = require("@mui/utils");
 var _fastMemo = require("@mui/x-internals/fastMemo");
 var _RtlProvider = require("@mui/system/RtlProvider");
+var _forwardRef = require("@mui/x-internals/forwardRef");
 var _doesSupportPreventScroll = require("../../utils/doesSupportPreventScroll");
 var _gridClasses = require("../../constants/gridClasses");
 var _models = require("../../models");
 var _useGridSelector = require("../../hooks/utils/useGridSelector");
-var _useGridApiContext = require("../../hooks/utils/useGridApiContext");
 var _useGridRootProps = require("../../hooks/utils/useGridRootProps");
 var _gridFocusStateSelector = require("../../hooks/features/focus/gridFocusStateSelector");
-var _useGridParamsApi = require("../../hooks/features/rows/useGridParamsApi");
-var _cellBorderUtils = require("../../utils/cellBorderUtils");
 var _gridColumnsInterfaces = require("../../hooks/features/columns/gridColumnsInterfaces");
+var _constants = require("../../internals/constants");
 var _gridRowSpanningSelectors = require("../../hooks/features/rows/gridRowSpanningSelectors");
+var _useGridPrivateApiContext = require("../../hooks/utils/useGridPrivateApiContext");
+var _gridEditingSelectors = require("../../hooks/features/editing/gridEditingSelectors");
+var _utils2 = require("../../internals/utils");
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["column", "rowId", "editCellState", "align", "children", "colIndex", "width", "className", "style", "colSpan", "disableDragEvents", "isNotVisible", "pinnedOffset", "pinnedPosition", "sectionIndex", "sectionLength", "gridHasFiller", "onClick", "onDoubleClick", "onMouseDown", "onMouseUp", "onMouseOver", "onKeyDown", "onKeyUp", "onDragEnter", "onDragOver"],
+const _excluded = ["column", "row", "rowId", "rowNode", "align", "children", "colIndex", "width", "className", "style", "colSpan", "disableDragEvents", "isNotVisible", "pinnedOffset", "pinnedPosition", "showRightBorder", "showLeftBorder", "onClick", "onDoubleClick", "onMouseDown", "onMouseUp", "onMouseOver", "onKeyDown", "onKeyUp", "onDragEnter", "onDragOver"],
   _excluded2 = ["changeReason", "unstable_updateValueOnRender"];
-let PinnedPosition = exports.PinnedPosition = /*#__PURE__*/function (PinnedPosition) {
-  PinnedPosition[PinnedPosition["NONE"] = 0] = "NONE";
-  PinnedPosition[PinnedPosition["LEFT"] = 1] = "LEFT";
-  PinnedPosition[PinnedPosition["RIGHT"] = 2] = "RIGHT";
-  PinnedPosition[PinnedPosition["VIRTUAL"] = 3] = "VIRTUAL";
-  return PinnedPosition;
-}({});
 const gridPinnedColumnPositionLookup = exports.gridPinnedColumnPositionLookup = {
-  [PinnedPosition.LEFT]: _gridColumnsInterfaces.GridPinnedColumnPosition.LEFT,
-  [PinnedPosition.RIGHT]: _gridColumnsInterfaces.GridPinnedColumnPosition.RIGHT,
-  [PinnedPosition.NONE]: undefined,
-  [PinnedPosition.VIRTUAL]: undefined
-};
-const 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: _models.GridCellModes.View,
-  hasFocus: false,
-  tabIndex: -1,
-  value: null,
-  formattedValue: '__unset__',
-  isEditable: false,
-  api: {}
+  [_constants.PinnedColumnPosition.LEFT]: _gridColumnsInterfaces.GridPinnedColumnPosition.LEFT,
+  [_constants.PinnedColumnPosition.RIGHT]: _gridColumnsInterfaces.GridPinnedColumnPosition.RIGHT,
+  [_constants.PinnedColumnPosition.NONE]: undefined,
+  [_constants.PinnedColumnPosition.VIRTUAL]: undefined
 };
 const useUtilityClasses = ownerState => {
   const {
@@ -77,7 +48,7 @@ const useUtilityClasses = ownerState => {
     classes
   } = ownerState;
   const slots = {
-    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']
+    root: ['cell', `cell--text${(0, _utils.unstable_capitalize)(align)}`, isSelected && 'selected', isEditable && 'cell--editable', showLeftBorder && 'cell--withLeftBorder', showRightBorder && 'cell--withRightBorder', pinnedPosition === _constants.PinnedColumnPosition.LEFT && 'cell--pinnedLeft', pinnedPosition === _constants.PinnedColumnPosition.RIGHT && 'cell--pinnedRight', isSelectionMode && !isEditable && 'cell--selectionMode']
   };
   return (0, _utils.unstable_composeClasses)(slots, _gridClasses.getDataGridUtilityClass, classes);
 };
@@ -85,11 +56,12 @@ let warnedOnce = false;
 
 // TODO(v7): Removing the wrapper will break the docs performance visualization demo.
 
-const GridCell = /*#__PURE__*/React.forwardRef(function GridCell(props, ref) {
+const GridCell = (0, _forwardRef.forwardRef)(function GridCell(props, ref) {
   const {
       column,
+      row,
       rowId,
-      editCellState,
+      rowNode,
       align,
       colIndex,
       width,
@@ -100,9 +72,8 @@ const GridCell = /*#__PURE__*/React.forwardRef(function GridCell(props, ref) {
       isNotVisible,
       pinnedOffset,
       pinnedPosition,
-      sectionIndex,
-      sectionLength,
-      gridHasFiller,
+      showRightBorder,
+      showLeftBorder,
       onClick,
       onDoubleClick,
       onMouseDown,
@@ -114,25 +85,29 @@ const GridCell = /*#__PURE__*/React.forwardRef(function GridCell(props, ref) {
       onDragOver
     } = props,
     other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
-  const apiRef = (0, _useGridApiContext.useGridApiContext)();
+  const apiRef = (0, _useGridPrivateApiContext.useGridPrivateApiContext)();
   const rootProps = (0, _useGridRootProps.useGridRootProps)();
   const isRtl = (0, _RtlProvider.useRtl)();
   const field = column.field;
-  const cellParams = (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 result = apiRef.current.getCellParams(rowId, field);
-      result.api = apiRef.current;
-      return result;
-    } catch (error) {
-      if (error instanceof _useGridParamsApi.MissingRowIdError) {
-        return EMPTY_CELL_PARAMS;
-      }
-      throw error;
-    }
-  }, _useGridSelector.objectShallowCompare);
+  const editCellState = (0, _useGridSelector.useGridSelector)(apiRef, _gridEditingSelectors.gridEditCellStateSelector, {
+    rowId,
+    field
+  });
+  const cellMode = editCellState ? _models.GridCellModes.Edit : _models.GridCellModes.View;
+  const cellParams = apiRef.current.getCellParamsForRow(rowId, field, row, {
+    colDef: column,
+    cellMode,
+    rowNode: rowNode,
+    tabIndex: (0, _useGridSelector.useGridSelector)(apiRef, () => {
+      const cellTabIndex = (0, _gridFocusStateSelector.gridTabIndexCellSelector)(apiRef);
+      return cellTabIndex && cellTabIndex.field === field && cellTabIndex.id === rowId ? 0 : -1;
+    }),
+    hasFocus: (0, _useGridSelector.useGridSelector)(apiRef, () => {
+      const focus = (0, _gridFocusStateSelector.gridFocusCellSelector)(apiRef);
+      return focus?.id === rowId && focus.field === field;
+    })
+  });
+  cellParams.api = apiRef.current;
   const isSelected = (0, _useGridSelector.useGridSelector)(apiRef, () => apiRef.current.unstable_applyPipeProcessors('isCellSelected', false, {
     id: rowId,
     field
@@ -140,7 +115,6 @@ const GridCell = /*#__PURE__*/React.forwardRef(function GridCell(props, ref) {
   const hiddenCells = (0, _useGridSelector.useGridSelector)(apiRef, _gridRowSpanningSelectors.gridRowSpanningHiddenCellsSelector);
   const spannedCells = (0, _useGridSelector.useGridSelector)(apiRef, _gridRowSpanningSelectors.gridRowSpanningSpannedCellsSelector);
   const {
-    cellMode,
     hasFocus,
     isEditable = false,
     value
@@ -172,9 +146,6 @@ const GridCell = /*#__PURE__*/React.forwardRef(function GridCell(props, ref) {
   const handleRef = (0, _utils.unstable_useForkRef)(ref, cellRef);
   const focusElementRef = React.useRef(null);
   const isSelectionMode = rootProps.cellSelection ?? false;
-  const position = gridPinnedColumnPositionLookup[pinnedPosition];
-  const showLeftBorder = (0, _cellBorderUtils.shouldCellShowLeftBorder)(position, sectionIndex);
-  const showRightBorder = (0, _cellBorderUtils.shouldCellShowRightBorder)(position, sectionIndex, sectionLength, rootProps.showCellVerticalBorder, gridHasFiller);
   const ownerState = {
     align,
     showLeftBorder,
@@ -219,21 +190,15 @@ const GridCell = /*#__PURE__*/React.forwardRef(function GridCell(props, ref) {
         padding: 0,
         opacity: 0,
         width: 0,
+        height: 0,
         border: 0
       };
     }
-    const cellStyle = (0, _extends2.default)({
+    const cellStyle = (0, _utils2.attachPinnedStyle)((0, _extends2.default)({
       '--width': `${width}px`
-    }, styleProp);
-    const isLeftPinned = pinnedPosition === PinnedPosition.LEFT;
-    const isRightPinned = pinnedPosition === PinnedPosition.RIGHT;
-    if (isLeftPinned || isRightPinned) {
-      let side = isLeftPinned ? 'left' : 'right';
-      if (isRtl) {
-        side = isLeftPinned ? 'right' : 'left';
-      }
-      cellStyle[side] = pinnedOffset;
-    }
+    }, styleProp), isRtl, pinnedPosition, pinnedOffset);
+    const isLeftPinned = pinnedPosition === _constants.PinnedColumnPosition.LEFT;
+    const isRightPinned = pinnedPosition === _constants.PinnedColumnPosition.RIGHT;
     if (rowSpan > 1) {
       cellStyle.height = `calc(var(--height) * ${rowSpan})`;
       cellStyle.zIndex = 5;
@@ -271,9 +236,6 @@ const GridCell = /*#__PURE__*/React.forwardRef(function GridCell(props, ref) {
       }, style)
     });
   }
-  if (cellParams === EMPTY_CELL_PARAMS) {
-    return null;
-  }
   let handleFocus = other.onFocus;
   if (process.env.NODE_ENV === 'test' && rootProps.experimentalFeatures?.warnIfFocusStateIsNotSynced) {
     handleFocus = event => {
@@ -324,7 +286,6 @@ const GridCell = /*#__PURE__*/React.forwardRef(function GridCell(props, ref) {
     onDragOver: publish('cellDragOver', onDragOver)
   };
   return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", (0, _extends2.default)({
-    ref: handleRef,
     className: (0, _clsx.default)(classes.root, classNames, className),
     role: "gridcell",
     "data-field": field,
@@ -344,6 +305,7 @@ const GridCell = /*#__PURE__*/React.forwardRef(function GridCell(props, ref) {
     onKeyUp: publish('cellKeyUp', onKeyUp)
   }, draggableEventHandlers, other, {
     onFocus: handleFocus,
+    ref: handleRef,
     children: children
   }));
 });
@@ -357,19 +319,14 @@ process.env.NODE_ENV !== "production" ? GridCell.propTypes = {
   colSpan: _propTypes.default.number,
   column: _propTypes.default.object.isRequired,
   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
-  }),
-  gridHasFiller: _propTypes.default.bool.isRequired,
   isNotVisible: _propTypes.default.bool.isRequired,
-  pinnedOffset: _propTypes.default.number.isRequired,
+  pinnedOffset: _propTypes.default.number,
   pinnedPosition: _propTypes.default.oneOf([0, 1, 2, 3]).isRequired,
+  row: _propTypes.default.object.isRequired,
   rowId: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]).isRequired,
-  sectionIndex: _propTypes.default.number.isRequired,
-  sectionLength: _propTypes.default.number.isRequired,
+  rowNode: _propTypes.default.object.isRequired,
+  showLeftBorder: _propTypes.default.bool.isRequired,
+  showRightBorder: _propTypes.default.bool.isRequired,
   width: _propTypes.default.number.isRequired
 } : void 0;
 const MemoizedGridCell = exports.GridCell = (0, _fastMemo.fastMemo)(GridCell);

package/node/components/cell/GridEditDateCell.js

@@ -44,7 +44,7 @@ function GridEditDateCell(props) {
     other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
   const isDateTime = colDef.type === 'dateTime';
   const apiRef = (0, _useGridApiContext.useGridApiContext)();
-  const inputRef = React.useRef();
+  const inputRef = React.useRef(null);
   const valueTransformed = React.useMemo(() => {
     let parsedDate;
     if (valueProp == null) {

package/node/components/cell/GridEditInputCell.js

@@ -9,9 +9,11 @@ exports.renderEditInputCell = exports.GridEditInputCell = void 0;
 var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 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 _styles = require("@mui/material/styles");
 var _InputBase = _interopRequireDefault(require("@mui/material/InputBase"));
+var _forwardRef = require("@mui/x-internals/forwardRef");
 var _gridClasses = require("../../constants/gridClasses");
 var _useGridRootProps = require("../../hooks/utils/useGridRootProps");
 var _useGridApiContext = require("../../hooks/utils/useGridApiContext");
@@ -39,7 +41,7 @@ const GridEditInputCellRoot = (0, _styles.styled)(_InputBase.default, {
     height: '100%'
   }
 }));
-const GridEditInputCell = exports.GridEditInputCell = /*#__PURE__*/React.forwardRef((props, ref) => {
+const GridEditInputCell = exports.GridEditInputCell = (0, _forwardRef.forwardRef)((props, ref) => {
   const rootProps = (0, _useGridRootProps.useGridRootProps)();
   const {
       id,
@@ -53,7 +55,7 @@ const GridEditInputCell = exports.GridEditInputCell = /*#__PURE__*/React.forward
     } = props,
     other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
   const apiRef = (0, _useGridApiContext.useGridApiContext)();
-  const inputRef = React.useRef();
+  const inputRef = React.useRef(null);
   const [valueState, setValueState] = React.useState(value);
   const classes = useUtilityClasses(rootProps);
   const handleChange = React.useCallback(async event => {
@@ -87,7 +89,6 @@ const GridEditInputCell = exports.GridEditInputCell = /*#__PURE__*/React.forward
     }
   }, [hasFocus]);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(GridEditInputCellRoot, (0, _extends2.default)({
-    ref: ref,
     inputRef: inputRef,
     className: classes.root,
     ownerState: rootProps,
@@ -99,7 +100,75 @@ const GridEditInputCell = exports.GridEditInputCell = /*#__PURE__*/React.forward
       fontSize: "small",
       color: "action"
     }) : undefined
-  }, other));
+  }, other, {
+    ref: ref
+  }));
 });
+process.env.NODE_ENV !== "production" ? GridEditInputCell.propTypes = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // | To update them edit the TypeScript types and run "pnpm proptypes"  |
+  // ----------------------------------------------------------------------
+  /**
+   * GridApi that let you manipulate the grid.
+   */
+  api: _propTypes.default.object.isRequired,
+  /**
+   * The mode of the cell.
+   */
+  cellMode: _propTypes.default.oneOf(['edit', 'view']).isRequired,
+  changeReason: _propTypes.default.oneOf(['debouncedSetEditCellValue', 'setEditCellValue']),
+  /**
+   * The column of the row that the current cell belongs to.
+   */
+  colDef: _propTypes.default.object.isRequired,
+  debounceMs: _propTypes.default.number,
+  /**
+   * The column field of the cell that triggered the event.
+   */
+  field: _propTypes.default.string.isRequired,
+  /**
+   * The cell value formatted with the column valueFormatter.
+   */
+  formattedValue: _propTypes.default.any,
+  /**
+   * If true, the cell is the active element.
+   */
+  hasFocus: _propTypes.default.bool.isRequired,
+  /**
+   * The grid row id.
+   */
+  id: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]).isRequired,
+  /**
+   * If true, the cell is editable.
+   */
+  isEditable: _propTypes.default.bool,
+  isProcessingProps: _propTypes.default.bool,
+  isValidating: _propTypes.default.bool,
+  /**
+   * Callback called when the value is changed by the user.
+   * @param {React.ChangeEvent<HTMLInputElement>} event The event source of the callback.
+   * @param {Date | null} newValue The value that is going to be passed to `apiRef.current.setEditCellValue`.
+   * @returns {Promise<void> | void} A promise to be awaited before calling `apiRef.current.setEditCellValue`
+   */
+  onValueChange: _propTypes.default.func,
+  /**
+   * The row model of the row that the current cell belongs to.
+   */
+  row: _propTypes.default.any.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,
+  /**
+   * The cell value.
+   * If the column has `valueGetter`, use `params.row` to directly access the fields.
+   */
+  value: _propTypes.default.any
+} : void 0;
 const renderEditInputCell = params => /*#__PURE__*/(0, _jsxRuntime.jsx)(GridEditInputCell, (0, _extends2.default)({}, params));
 exports.renderEditInputCell = renderEditInputCell;

package/node/components/cell/GridEditSingleSelectCell.js

@@ -39,8 +39,8 @@ function GridEditSingleSelectCell(props) {
     } = props,
     other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
   const apiRef = (0, _useGridApiContext.useGridApiContext)();
-  const ref = React.useRef();
-  const inputRef = React.useRef();
+  const ref = React.useRef(null);
+  const inputRef = React.useRef(null);
   const [open, setOpen] = React.useState(initialOpen);
   const baseSelectProps = rootProps.slotProps?.baseSelect || {};
   const isSelectNative = baseSelectProps.native ?? false;

package/node/components/cell/GridSkeletonCell.js

@@ -11,7 +11,6 @@ var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runt
 var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _clsx = _interopRequireDefault(require("clsx"));
-var _Skeleton = _interopRequireDefault(require("@mui/material/Skeleton"));
 var _utils = require("@mui/utils");
 var _fastMemo = require("@mui/x-internals/fastMemo");
 var _utils2 = require("../../utils/utils");
@@ -90,7 +89,7 @@ function GridSkeletonCell(props) {
       minWidth: width
     }, style)
   }, other, {
-    children: !empty && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Skeleton.default, (0, _extends2.default)({}, skeletonProps))
+    children: !empty && /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.baseSkeleton, (0, _extends2.default)({}, skeletonProps))
   }));
 }
 process.env.NODE_ENV !== "production" ? GridSkeletonCell.propTypes = {