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

package/components/base/GridOverlays.d.ts

@@ -1,12 +1,13 @@
 import * as React from 'react';
-import { GridOverlayType } from '../../hooks/features/overlays/useGridOverlays';
 import { GridLoadingOverlayVariant } from '../GridLoadingOverlay';
+import { GridSlotsComponent } from '../../models';
+export type GridOverlayType = keyof Pick<GridSlotsComponent, 'noRowsOverlay' | 'noResultsOverlay' | 'loadingOverlay'> | null;
 interface GridOverlaysProps {
     overlayType: GridOverlayType;
     loadingOverlayVariant: GridLoadingOverlayVariant | null;
 }
-export declare function GridOverlays(props: GridOverlaysProps): React.JSX.Element | null;
-export declare namespace GridOverlays {
+export declare function GridOverlayWrapper(props: React.PropsWithChildren<GridOverlaysProps>): React.JSX.Element;
+export declare namespace GridOverlayWrapper {
     var propTypes: any;
 }
 export {};

package/components/base/GridOverlays.js

@@ -52,7 +52,7 @@ const useUtilityClasses = ownerState => {
   };
   return composeClasses(slots, getDataGridUtilityClass, classes);
 };
-function GridOverlayWrapper(props) {
+export function GridOverlayWrapper(props) {
   const apiRef = useGridApiContext();
   const rootProps = useGridRootProps();
   const dimensions = useGridSelector(apiRef, gridDimensionsSelector);
@@ -83,26 +83,4 @@ process.env.NODE_ENV !== "production" ? GridOverlayWrapper.propTypes = {
   // ----------------------------------------------------------------------
   loadingOverlayVariant: PropTypes.oneOf(['circular-progress', 'linear-progress', 'skeleton']),
   overlayType: PropTypes.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.oneOf(['circular-progress', 'linear-progress', 'skeleton']),
-  overlayType: PropTypes.oneOf(['loadingOverlay', 'noResultsOverlay', 'noRowsOverlay'])
-} : void 0;
-export function GridOverlays(props) {
-  const {
-    overlayType
-  } = props;
-  const rootProps = useGridRootProps();
-  if (!overlayType) {
-    return null;
-  }
-  const Overlay = rootProps.slots?.[overlayType];
-  const overlayProps = rootProps.slotProps?.[overlayType];
-  return /*#__PURE__*/_jsx(GridOverlayWrapper, _extends({}, props, {
-    children: /*#__PURE__*/_jsx(Overlay, _extends({}, overlayProps))
-  }));
-}
+} : void 0;

package/components/base/index.d.ts

@@ -1,3 +1,2 @@
 export * from './GridBody';
 export * from './GridFooterPlaceholder';
-export * from './GridOverlays';

package/components/base/index.js

@@ -1,3 +1,2 @@
 export * from "./GridBody.js";
-export * from "./GridFooterPlaceholder.js";
-export * from "./GridOverlays.js";
+export * from "./GridFooterPlaceholder.js";

package/components/cell/GridActionsCell.js

@@ -89,6 +89,13 @@ function GridActionsCell(props) {
   const hideMenu = () => {
     setOpen(false);
   };
+  const toggleMenu = () => {
+    if (open) {
+      hideMenu();
+    } else {
+      showMenu();
+    }
+  };
   const handleTouchRippleRef = index => instance => {
     touchRippleRefs.current[index] = instance;
   };
@@ -159,7 +166,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/components/cell/GridActionsCellItem.d.ts

@@ -1,16 +1,15 @@
 import * as React from 'react';
-import { IconButtonProps } from '@mui/material/IconButton';
-import { MenuItemProps } from '@mui/material/MenuItem';
+import { GridSlotProps } from '../../models/gridSlotsComponentsProps';
 interface GridActionsCellItemCommonProps {
     label: string;
-    icon?: React.ReactElement;
+    icon?: React.ReactElement<any>;
     /** from https://mui.com/material-ui/api/button-base/#ButtonBase-prop-component */
     component?: React.ElementType;
 }
 export type GridActionsCellItemProps = GridActionsCellItemCommonProps & (({
     showInMenu?: false;
-    icon: React.ReactElement;
-} & Omit<IconButtonProps, 'component'>) | ({
+    icon: React.ReactElement<any>;
+} & Omit<GridSlotProps['baseIconButton'], 'component'>) | ({
     showInMenu: true;
     /**
      * If false, the menu will not close when this item is clicked.
@@ -18,11 +17,17 @@ export type GridActionsCellItemProps = GridActionsCellItemCommonProps & (({
      */
     closeMenuOnClick?: boolean;
     closeMenu?: () => void;
-} & Omit<MenuItemProps, 'component'>));
-declare const GridActionsCellItem: React.ForwardRefExoticComponent<(Omit<GridActionsCellItemCommonProps & {
+} & Omit<GridSlotProps['baseMenuItem'], 'component'>));
+declare const GridActionsCellItem: React.ForwardRefExoticComponent<GridActionsCellItemProps> | React.ForwardRefExoticComponent<(Omit<GridActionsCellItemCommonProps & {
     showInMenu?: false;
-    icon: React.ReactElement;
-} & Omit<IconButtonProps, "component">, "ref"> | Omit<GridActionsCellItemCommonProps & {
+    icon: React.ReactElement<any>;
+} & Omit<Omit<import("../../models/gridBaseSlots").ButtonProps, "startIcon"> & {
+    label?: string;
+    color?: "default" | "inherit" | "primary";
+    edge?: "start" | "end" | false;
+} & import("../..").BaseIconButtonPropsOverrides & import("@mui/material").IconButtonOwnProps & Omit<import("@mui/material").ButtonBaseOwnProps, "classes"> & import("@mui/material/OverridableComponent").CommonProps & Omit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "children" | "tabIndex" | "color" | "style" | "className" | "sx" | "classes" | "action" | "centerRipple" | "disabled" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "TouchRippleProps" | "touchRippleRef" | "disableFocusRipple" | "size" | "edge"> & {
+    component?: React.ElementType;
+}, "component">, "ref"> | Omit<GridActionsCellItemCommonProps & {
     showInMenu: true;
     /**
      * If false, the menu will not close when this item is clicked.
@@ -30,5 +35,7 @@ declare const GridActionsCellItem: React.ForwardRefExoticComponent<(Omit<GridAct
      */
     closeMenuOnClick?: boolean;
     closeMenu?: () => void;
-} & Omit<MenuItemProps, "component">, "ref">) & React.RefAttributes<HTMLElement>>;
+} & Omit<import("../../models/gridBaseSlots").MenuItemProps & import("../..").BaseMenuItemPropsOverrides & import("@mui/material").MenuItemOwnProps & Omit<import("@mui/material").ButtonBaseOwnProps, "classes"> & import("@mui/material/OverridableComponent").CommonProps & Omit<React.DetailedHTMLProps<React.LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, "children" | "tabIndex" | "style" | "autoFocus" | "className" | "sx" | "classes" | "action" | "centerRipple" | "disabled" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "TouchRippleProps" | "touchRippleRef" | "dense" | "disableGutters" | "divider" | "selected"> & {
+    component?: React.ElementType;
+}, "component">, "ref">) & React.RefAttributes<HTMLElement>>;
 export { GridActionsCellItem };

package/components/cell/GridActionsCellItem.js

@@ -4,10 +4,12 @@ const _excluded = ["label", "icon", "showInMenu", "onClick"],
   _excluded2 = ["label", "icon", "showInMenu", "onClick", "closeMenuOnClick", "closeMenu"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import ListItemIcon from '@mui/material/ListItemIcon';
+import { forwardRef } from '@mui/x-internals/forwardRef';
 import { useGridRootProps } from "../../hooks/utils/useGridRootProps.js";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const GridActionsCellItem = /*#__PURE__*/React.forwardRef((props, ref) => {
+
+// FIXME(v8:romgrk): Make parametric
+import { jsx as _jsx } from "react/jsx-runtime";
+const GridActionsCellItem = forwardRef((props, ref) => {
   const rootProps = useGridRootProps();
   if (!props.showInMenu) {
     const {
@@ -20,13 +22,13 @@ const GridActionsCellItem = /*#__PURE__*/React.forwardRef((props, ref) => {
       onClick?.(event);
     };
     return /*#__PURE__*/_jsx(rootProps.slots.baseIconButton, _extends({
-      ref: ref,
       size: "small",
       role: "menuitem",
       "aria-label": label
     }, other, {
       onClick: handleClick
     }, rootProps.slotProps?.baseIconButton, {
+      ref: ref,
       children: /*#__PURE__*/React.cloneElement(icon, {
         fontSize: 'small'
       })
@@ -46,13 +48,12 @@ const GridActionsCellItem = /*#__PURE__*/React.forwardRef((props, ref) => {
       closeMenu?.();
     }
   };
-  return /*#__PURE__*/_jsxs(rootProps.slots.baseMenuItem, _extends({
+  return /*#__PURE__*/_jsx(rootProps.slots.baseMenuItem, _extends({
     ref: ref
   }, other, {
     onClick: handleClick,
-    children: [icon && /*#__PURE__*/_jsx(ListItemIcon, {
-      children: icon
-    }), label]
+    iconStart: icon,
+    children: label
   }));
 });
 process.env.NODE_ENV !== "production" ? GridActionsCellItem.propTypes = {

package/components/cell/GridCell.d.ts

@@ -1,13 +1,9 @@
 import * as React from 'react';
-import { GridRowId, GridEditCellProps } from '../../models';
-import { GridColDef, GridAlignment } from '../../models/colDef/gridColDef';
+import { GridRowId } from '../../models';
+import { GridAlignment, GridStateColDef } from '../../models/colDef/gridColDef';
+import { GridRowModel, GridTreeNode } from '../../models/gridRows';
 import { GridPinnedColumnPosition } from '../../hooks/features/columns/gridColumnsInterfaces';
-export declare enum PinnedPosition {
-    NONE = 0,
-    LEFT = 1,
-    RIGHT = 2,
-    VIRTUAL = 3
-}
+import { PinnedColumnPosition } from '../../internals/constants';
 export declare const gridPinnedColumnPositionLookup: {
     1: GridPinnedColumnPosition;
     2: GridPinnedColumnPosition;
@@ -18,18 +14,18 @@ export type GridCellProps = React.HTMLAttributes<HTMLDivElement> & {
     align: GridAlignment;
     className?: string;
     colIndex: number;
-    column: GridColDef;
+    column: GridStateColDef;
+    row: GridRowModel;
     rowId: GridRowId;
+    rowNode: GridTreeNode;
     width: number;
     colSpan?: number;
     disableDragEvents?: boolean;
     isNotVisible: boolean;
-    editCellState: GridEditCellProps<any> | null;
-    pinnedOffset: number;
-    pinnedPosition: PinnedPosition;
-    sectionIndex: number;
-    sectionLength: number;
-    gridHasFiller: boolean;
+    pinnedOffset?: number;
+    pinnedPosition: PinnedColumnPosition;
+    showRightBorder: boolean;
+    showLeftBorder: boolean;
     onClick?: React.MouseEventHandler<HTMLDivElement>;
     onDoubleClick?: React.MouseEventHandler<HTMLDivElement>;
     onMouseEnter?: React.MouseEventHandler<HTMLDivElement>;
@@ -46,23 +42,23 @@ export type GridCellProps = React.HTMLAttributes<HTMLDivElement> & {
     style?: React.CSSProperties;
     [x: `data-${string}`]: string;
 };
-declare const MemoizedGridCell: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & {
+declare const MemoizedGridCell: React.ForwardRefExoticComponent<GridCellProps> | React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & {
     [x: `data-${string}`]: string;
     align: GridAlignment;
     className?: string;
     colIndex: number;
-    column: GridColDef;
+    column: GridStateColDef;
+    row: GridRowModel;
     rowId: GridRowId;
+    rowNode: GridTreeNode;
     width: number;
     colSpan?: number;
     disableDragEvents?: boolean;
     isNotVisible: boolean;
-    editCellState: GridEditCellProps<any> | null;
-    pinnedOffset: number;
-    pinnedPosition: PinnedPosition;
-    sectionIndex: number;
-    sectionLength: number;
-    gridHasFiller: boolean;
+    pinnedOffset?: number;
+    pinnedPosition: PinnedColumnPosition;
+    showRightBorder: boolean;
+    showLeftBorder: boolean;
     onClick?: React.MouseEventHandler<HTMLDivElement>;
     onDoubleClick?: React.MouseEventHandler<HTMLDivElement>;
     onMouseEnter?: React.MouseEventHandler<HTMLDivElement>;

package/components/cell/GridCell.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-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"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
@@ -8,54 +8,25 @@ import clsx from 'clsx';
 import { unstable_useForkRef as useForkRef, unstable_composeClasses as composeClasses, unstable_ownerDocument as ownerDocument, unstable_capitalize as capitalize } from '@mui/utils';
 import { fastMemo } from '@mui/x-internals/fastMemo';
 import { useRtl } from '@mui/system/RtlProvider';
+import { forwardRef } from '@mui/x-internals/forwardRef';
 import { doesSupportPreventScroll } from "../../utils/doesSupportPreventScroll.js";
 import { getDataGridUtilityClass, gridClasses } from "../../constants/gridClasses.js";
 import { GridCellModes } from "../../models/index.js";
-import { useGridSelector, objectShallowCompare } from "../../hooks/utils/useGridSelector.js";
-import { useGridApiContext } from "../../hooks/utils/useGridApiContext.js";
+import { useGridSelector } from "../../hooks/utils/useGridSelector.js";
 import { useGridRootProps } from "../../hooks/utils/useGridRootProps.js";
-import { gridFocusCellSelector } from "../../hooks/features/focus/gridFocusStateSelector.js";
-import { MissingRowIdError } from "../../hooks/features/rows/useGridParamsApi.js";
-import { shouldCellShowLeftBorder, shouldCellShowRightBorder } from "../../utils/cellBorderUtils.js";
+import { gridFocusCellSelector, gridTabIndexCellSelector } from "../../hooks/features/focus/gridFocusStateSelector.js";
 import { GridPinnedColumnPosition } from "../../hooks/features/columns/gridColumnsInterfaces.js";
+import { PinnedColumnPosition } from "../../internals/constants.js";
 import { gridRowSpanningHiddenCellsSelector, gridRowSpanningSpannedCellsSelector } from "../../hooks/features/rows/gridRowSpanningSelectors.js";
+import { useGridPrivateApiContext } from "../../hooks/utils/useGridPrivateApiContext.js";
+import { gridEditCellStateSelector } from "../../hooks/features/editing/gridEditingSelectors.js";
+import { attachPinnedStyle } from "../../internals/utils/index.js";
 import { jsx as _jsx } from "react/jsx-runtime";
-export let 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;
-}({});
 export const gridPinnedColumnPositionLookup = {
-  [PinnedPosition.LEFT]: GridPinnedColumnPosition.LEFT,
-  [PinnedPosition.RIGHT]: 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: GridCellModes.View,
-  hasFocus: false,
-  tabIndex: -1,
-  value: null,
-  formattedValue: '__unset__',
-  isEditable: false,
-  api: {}
+  [PinnedColumnPosition.LEFT]: GridPinnedColumnPosition.LEFT,
+  [PinnedColumnPosition.RIGHT]: GridPinnedColumnPosition.RIGHT,
+  [PinnedColumnPosition.NONE]: undefined,
+  [PinnedColumnPosition.VIRTUAL]: undefined
 };
 const useUtilityClasses = ownerState => {
   const {
@@ -69,7 +40,7 @@ const useUtilityClasses = ownerState => {
     classes
   } = ownerState;
   const slots = {
-    root: ['cell', `cell--text${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${capitalize(align)}`, isSelected && 'selected', isEditable && 'cell--editable', showLeftBorder && 'cell--withLeftBorder', showRightBorder && 'cell--withRightBorder', pinnedPosition === PinnedColumnPosition.LEFT && 'cell--pinnedLeft', pinnedPosition === PinnedColumnPosition.RIGHT && 'cell--pinnedRight', isSelectionMode && !isEditable && 'cell--selectionMode']
   };
   return composeClasses(slots, getDataGridUtilityClass, classes);
 };
@@ -77,11 +48,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 = forwardRef(function GridCell(props, ref) {
   const {
       column,
+      row,
       rowId,
-      editCellState,
+      rowNode,
       align,
       colIndex,
       width,
@@ -92,9 +64,8 @@ const GridCell = /*#__PURE__*/React.forwardRef(function GridCell(props, ref) {
       isNotVisible,
       pinnedOffset,
       pinnedPosition,
-      sectionIndex,
-      sectionLength,
-      gridHasFiller,
+      showRightBorder,
+      showLeftBorder,
       onClick,
       onDoubleClick,
       onMouseDown,
@@ -106,25 +77,29 @@ const GridCell = /*#__PURE__*/React.forwardRef(function GridCell(props, ref) {
       onDragOver
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
-  const apiRef = useGridApiContext();
+  const apiRef = useGridPrivateApiContext();
   const rootProps = useGridRootProps();
   const isRtl = useRtl();
   const field = column.field;
-  const cellParams = 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 MissingRowIdError) {
-        return EMPTY_CELL_PARAMS;
-      }
-      throw error;
-    }
-  }, objectShallowCompare);
+  const editCellState = useGridSelector(apiRef, gridEditCellStateSelector, {
+    rowId,
+    field
+  });
+  const cellMode = editCellState ? GridCellModes.Edit : GridCellModes.View;
+  const cellParams = apiRef.current.getCellParamsForRow(rowId, field, row, {
+    colDef: column,
+    cellMode,
+    rowNode: rowNode,
+    tabIndex: useGridSelector(apiRef, () => {
+      const cellTabIndex = gridTabIndexCellSelector(apiRef);
+      return cellTabIndex && cellTabIndex.field === field && cellTabIndex.id === rowId ? 0 : -1;
+    }),
+    hasFocus: useGridSelector(apiRef, () => {
+      const focus = gridFocusCellSelector(apiRef);
+      return focus?.id === rowId && focus.field === field;
+    })
+  });
+  cellParams.api = apiRef.current;
   const isSelected = useGridSelector(apiRef, () => apiRef.current.unstable_applyPipeProcessors('isCellSelected', false, {
     id: rowId,
     field
@@ -132,7 +107,6 @@ const GridCell = /*#__PURE__*/React.forwardRef(function GridCell(props, ref) {
   const hiddenCells = useGridSelector(apiRef, gridRowSpanningHiddenCellsSelector);
   const spannedCells = useGridSelector(apiRef, gridRowSpanningSpannedCellsSelector);
   const {
-    cellMode,
     hasFocus,
     isEditable = false,
     value
@@ -164,9 +138,6 @@ const GridCell = /*#__PURE__*/React.forwardRef(function GridCell(props, ref) {
   const handleRef = useForkRef(ref, cellRef);
   const focusElementRef = React.useRef(null);
   const isSelectionMode = rootProps.cellSelection ?? false;
-  const position = gridPinnedColumnPositionLookup[pinnedPosition];
-  const showLeftBorder = shouldCellShowLeftBorder(position, sectionIndex);
-  const showRightBorder = shouldCellShowRightBorder(position, sectionIndex, sectionLength, rootProps.showCellVerticalBorder, gridHasFiller);
   const ownerState = {
     align,
     showLeftBorder,
@@ -211,21 +182,15 @@ const GridCell = /*#__PURE__*/React.forwardRef(function GridCell(props, ref) {
         padding: 0,
         opacity: 0,
         width: 0,
+        height: 0,
         border: 0
       };
     }
-    const cellStyle = _extends({
+    const cellStyle = attachPinnedStyle(_extends({
       '--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 === PinnedColumnPosition.LEFT;
+    const isRightPinned = pinnedPosition === PinnedColumnPosition.RIGHT;
     if (rowSpan > 1) {
       cellStyle.height = `calc(var(--height) * ${rowSpan})`;
       cellStyle.zIndex = 5;
@@ -263,9 +228,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 => {
@@ -316,7 +278,6 @@ const GridCell = /*#__PURE__*/React.forwardRef(function GridCell(props, ref) {
     onDragOver: publish('cellDragOver', onDragOver)
   };
   return /*#__PURE__*/_jsx("div", _extends({
-    ref: handleRef,
     className: clsx(classes.root, classNames, className),
     role: "gridcell",
     "data-field": field,
@@ -336,6 +297,7 @@ const GridCell = /*#__PURE__*/React.forwardRef(function GridCell(props, ref) {
     onKeyUp: publish('cellKeyUp', onKeyUp)
   }, draggableEventHandlers, other, {
     onFocus: handleFocus,
+    ref: handleRef,
     children: children
   }));
 });
@@ -349,19 +311,14 @@ process.env.NODE_ENV !== "production" ? GridCell.propTypes = {
   colSpan: PropTypes.number,
   column: PropTypes.object.isRequired,
   disableDragEvents: PropTypes.bool,
-  editCellState: PropTypes.shape({
-    changeReason: PropTypes.oneOf(['debouncedSetEditCellValue', 'setEditCellValue']),
-    isProcessingProps: PropTypes.bool,
-    isValidating: PropTypes.bool,
-    value: PropTypes.any
-  }),
-  gridHasFiller: PropTypes.bool.isRequired,
   isNotVisible: PropTypes.bool.isRequired,
-  pinnedOffset: PropTypes.number.isRequired,
+  pinnedOffset: PropTypes.number,
   pinnedPosition: PropTypes.oneOf([0, 1, 2, 3]).isRequired,
+  row: PropTypes.object.isRequired,
   rowId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
-  sectionIndex: PropTypes.number.isRequired,
-  sectionLength: PropTypes.number.isRequired,
+  rowNode: PropTypes.object.isRequired,
+  showLeftBorder: PropTypes.bool.isRequired,
+  showRightBorder: PropTypes.bool.isRequired,
   width: PropTypes.number.isRequired
 } : void 0;
 const MemoizedGridCell = fastMemo(GridCell);

package/components/cell/GridEditDateCell.js

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

package/components/cell/GridEditInputCell.d.ts

@@ -11,6 +11,6 @@ export interface GridEditInputCellProps extends GridRenderEditCellParams, Omit<I
      */
     onValueChange?: (event: React.ChangeEvent<HTMLInputElement>, newValue: string) => Promise<void> | void;
 }
-declare const GridEditInputCell: React.ForwardRefExoticComponent<Omit<GridEditInputCellProps, "ref"> & React.RefAttributes<HTMLInputElement>>;
+declare const GridEditInputCell: React.ForwardRefExoticComponent<GridEditInputCellProps> | React.ForwardRefExoticComponent<Omit<GridEditInputCellProps, "ref"> & React.RefAttributes<HTMLInputElement>>;
 export { GridEditInputCell };
 export declare const renderEditInputCell: (params: GridEditInputCellProps) => React.JSX.Element;

package/components/cell/GridEditInputCell.js

@@ -2,9 +2,11 @@ import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWith
 import _extends from "@babel/runtime/helpers/esm/extends";
 const _excluded = ["id", "value", "formattedValue", "api", "field", "row", "rowNode", "colDef", "cellMode", "isEditable", "tabIndex", "hasFocus", "isValidating", "debounceMs", "isProcessingProps", "onValueChange"];
 import * as React from 'react';
+import PropTypes from 'prop-types';
 import { unstable_composeClasses as composeClasses, unstable_useEnhancedEffect as useEnhancedEffect } from '@mui/utils';
 import { styled } from '@mui/material/styles';
 import InputBase from '@mui/material/InputBase';
+import { forwardRef } from '@mui/x-internals/forwardRef';
 import { getDataGridUtilityClass } from "../../constants/gridClasses.js";
 import { useGridRootProps } from "../../hooks/utils/useGridRootProps.js";
 import { useGridApiContext } from "../../hooks/utils/useGridApiContext.js";
@@ -31,7 +33,7 @@ const GridEditInputCellRoot = styled(InputBase, {
     height: '100%'
   }
 }));
-const GridEditInputCell = /*#__PURE__*/React.forwardRef((props, ref) => {
+const GridEditInputCell = forwardRef((props, ref) => {
   const rootProps = useGridRootProps();
   const {
       id,
@@ -45,7 +47,7 @@ const GridEditInputCell = /*#__PURE__*/React.forwardRef((props, ref) => {
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
   const apiRef = 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 => {
@@ -79,7 +81,6 @@ const GridEditInputCell = /*#__PURE__*/React.forwardRef((props, ref) => {
     }
   }, [hasFocus]);
   return /*#__PURE__*/_jsx(GridEditInputCellRoot, _extends({
-    ref: ref,
     inputRef: inputRef,
     className: classes.root,
     ownerState: rootProps,
@@ -91,7 +92,75 @@ const GridEditInputCell = /*#__PURE__*/React.forwardRef((props, ref) => {
       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.object.isRequired,
+  /**
+   * The mode of the cell.
+   */
+  cellMode: PropTypes.oneOf(['edit', 'view']).isRequired,
+  changeReason: PropTypes.oneOf(['debouncedSetEditCellValue', 'setEditCellValue']),
+  /**
+   * The column of the row that the current cell belongs to.
+   */
+  colDef: PropTypes.object.isRequired,
+  debounceMs: PropTypes.number,
+  /**
+   * The column field of the cell that triggered the event.
+   */
+  field: PropTypes.string.isRequired,
+  /**
+   * The cell value formatted with the column valueFormatter.
+   */
+  formattedValue: PropTypes.any,
+  /**
+   * If true, the cell is the active element.
+   */
+  hasFocus: PropTypes.bool.isRequired,
+  /**
+   * The grid row id.
+   */
+  id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
+  /**
+   * If true, the cell is editable.
+   */
+  isEditable: PropTypes.bool,
+  isProcessingProps: PropTypes.bool,
+  isValidating: PropTypes.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.func,
+  /**
+   * The row model of the row that the current cell belongs to.
+   */
+  row: PropTypes.any.isRequired,
+  /**
+   * The node of the row that the current cell belongs to.
+   */
+  rowNode: PropTypes.object.isRequired,
+  /**
+   * the tabIndex value.
+   */
+  tabIndex: PropTypes.oneOf([-1, 0]).isRequired,
+  /**
+   * The cell value.
+   * If the column has `valueGetter`, use `params.row` to directly access the fields.
+   */
+  value: PropTypes.any
+} : void 0;
 export { GridEditInputCell };
 export const renderEditInputCell = params => /*#__PURE__*/_jsx(GridEditInputCell, _extends({}, params));