@mui/x-data-grid 9.0.0-alpha.1 → 9.0.0-alpha.2

package/components/cell/GridActionsCellItem.d.mts

@@ -0,0 +1,55 @@
+import * as React from 'react';
+import type { GridSlotProps, GridBaseIconProps } from "../../models/gridSlotsComponentsProps.mjs";
+interface GridActionsCellItemCommonProps {
+  icon?: React.JSXElementConstructor<GridBaseIconProps> | React.ReactNode;
+  /** from https://mui.com/material-ui/api/button-base/#ButtonBase-prop-component */
+  component?: React.ElementType;
+}
+export type GridActionsCellItemProps = GridActionsCellItemCommonProps & (({
+  showInMenu?: false;
+  icon: React.ReactElement<any>;
+  label: string;
+} & Omit<GridSlotProps['baseIconButton'], 'component'>) | ({
+  showInMenu: true;
+  /**
+   * If false, the menu will not close when this item is clicked.
+   * @default true
+   */
+  closeMenuOnClick?: boolean;
+  closeMenu?: () => void;
+  label: React.ReactNode;
+} & Omit<GridSlotProps['baseMenuItem'], 'component'>));
+declare const GridActionsCellItem: React.ForwardRefExoticComponent<GridActionsCellItemProps> | React.ForwardRefExoticComponent<((GridActionsCellItemCommonProps & {
+  showInMenu: true;
+  /**
+   * If false, the menu will not close when this item is clicked.
+   * @default true
+   */
+  closeMenuOnClick?: boolean;
+  closeMenu?: () => void;
+  label: React.ReactNode;
+} & Omit<React.DOMAttributes<HTMLElement> & {
+  [k: `aria-${string}`]: any;
+  [k: `data-${string}`]: any;
+  className?: string;
+  style?: React.CSSProperties;
+} & {
+  autoFocus?: boolean;
+  children?: React.ReactNode;
+  inert?: boolean;
+  disabled?: boolean;
+  iconStart?: React.ReactNode;
+  iconEnd?: React.ReactNode;
+  selected?: boolean;
+  value?: number | string | readonly string[];
+  style?: React.CSSProperties;
+} & import("@mui/x-data-grid").BaseMenuItemPropsOverrides, "component">) | Omit<GridActionsCellItemCommonProps & {
+  showInMenu?: false;
+  icon: React.ReactElement<any>;
+  label: string;
+} & Omit<Omit<import("../../models/gridBaseSlots.mjs").ButtonProps, "startIcon"> & {
+  label?: string;
+  color?: "default" | "inherit" | "primary";
+  edge?: "start" | "end" | false;
+} & import("@mui/x-data-grid").BaseIconButtonPropsOverrides, "component">, "ref">) & React.RefAttributes<HTMLElement>>;
+export { GridActionsCellItem };

package/components/cell/GridActionsCellItem.mjs

@@ -0,0 +1,59 @@
+'use client';
+
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+const _excluded = ["label", "icon", "showInMenu", "onClick"],
+  _excluded2 = ["label", "icon", "showInMenu", "onClick", "closeMenuOnClick", "closeMenu"];
+import * as React from 'react';
+import { forwardRef } from '@mui/x-internals/forwardRef';
+import { useGridRootProps } from "../../hooks/utils/useGridRootProps.mjs";
+import { jsx as _jsx } from "react/jsx-runtime";
+const GridActionsCellItem = forwardRef((props, ref) => {
+  const rootProps = useGridRootProps();
+  if (!props.showInMenu) {
+    const {
+        label,
+        icon,
+        onClick
+      } = props,
+      other = _objectWithoutPropertiesLoose(props, _excluded);
+    const handleClick = event => {
+      onClick?.(event);
+    };
+    return /*#__PURE__*/_jsx(rootProps.slots.baseIconButton, _extends({
+      size: "small",
+      role: "menuitem",
+      "aria-label": label
+    }, other, {
+      onClick: handleClick
+    }, rootProps.slotProps?.baseIconButton, {
+      ref: ref,
+      children: /*#__PURE__*/React.cloneElement(icon, {
+        fontSize: 'small'
+      })
+    }));
+  }
+  const {
+      label,
+      icon,
+      onClick,
+      closeMenuOnClick = true,
+      closeMenu
+    } = props,
+    other = _objectWithoutPropertiesLoose(props, _excluded2);
+  const handleClick = event => {
+    onClick?.(event);
+    if (closeMenuOnClick) {
+      closeMenu?.();
+    }
+  };
+  return /*#__PURE__*/_jsx(rootProps.slots.baseMenuItem, _extends({
+    ref: ref
+  }, other, {
+    onClick: handleClick,
+    iconStart: icon,
+    children: label
+  }));
+});
+if (process.env.NODE_ENV !== "production") GridActionsCellItem.displayName = "GridActionsCellItem";
+export { GridActionsCellItem };

package/components/cell/GridBooleanCell.d.mts

@@ -0,0 +1,13 @@
+import * as React from 'react';
+import type { GridColDef } from "../../models/colDef/gridColDef.mjs";
+import type { GridRenderCellParams } from "../../models/params/gridCellParams.mjs";
+interface GridBooleanCellProps extends GridRenderCellParams {
+  hideDescendantCount?: boolean;
+}
+declare function GridBooleanCellRaw(props: GridBooleanCellProps): import("react/jsx-runtime").JSX.Element | null;
+declare namespace GridBooleanCellRaw {
+  var propTypes: any;
+}
+declare const GridBooleanCell: React.MemoExoticComponent<typeof GridBooleanCellRaw>;
+export { GridBooleanCell };
+export declare const renderBooleanCell: GridColDef['renderCell'];

package/components/cell/GridBooleanCell.mjs

@@ -0,0 +1,124 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+const _excluded = ["id", "value", "formattedValue", "api", "field", "row", "rowNode", "colDef", "cellMode", "isEditable", "hasFocus", "tabIndex", "hideDescendantCount"];
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import composeClasses from '@mui/utils/composeClasses';
+import { useGridSelector } from "../../hooks/utils/useGridSelector.mjs";
+import { gridRowMaximumTreeDepthSelector } from "../../hooks/features/rows/gridRowsSelector.mjs";
+import { getDataGridUtilityClass } from "../../constants/gridClasses.mjs";
+import { useGridRootProps } from "../../hooks/utils/useGridRootProps.mjs";
+import { useGridApiContext } from "../../hooks/utils/useGridApiContext.mjs";
+import { isAutogeneratedRowNode } from "../../hooks/features/rows/gridRowsUtils.mjs";
+import { GRID_ROW_GROUPING_SINGLE_GROUPING_FIELD } from "../../internals/constants.mjs";
+import { GridFooterCell } from "./GridFooterCell.mjs";
+import { jsx as _jsx } from "react/jsx-runtime";
+const useUtilityClasses = ownerState => {
+  const {
+    classes
+  } = ownerState;
+  const slots = {
+    root: ['booleanCell']
+  };
+  return composeClasses(slots, getDataGridUtilityClass, classes);
+};
+function GridBooleanCellRaw(props) {
+  const {
+      value,
+      rowNode
+    } = props,
+    other = _objectWithoutPropertiesLoose(props, _excluded);
+  const apiRef = useGridApiContext();
+  const rootProps = useGridRootProps();
+  const ownerState = {
+    classes: rootProps.classes
+  };
+  const classes = useUtilityClasses(ownerState);
+  const maxDepth = useGridSelector(apiRef, gridRowMaximumTreeDepthSelector);
+  const isServerSideRowGroupingRow =
+  // @ts-expect-error - Access tree data prop
+  maxDepth > 0 && rowNode.type === 'group' && rootProps.treeData === false;
+  const Icon = React.useMemo(() => value ? rootProps.slots.booleanCellTrueIcon : rootProps.slots.booleanCellFalseIcon, [rootProps.slots.booleanCellFalseIcon, rootProps.slots.booleanCellTrueIcon, value]);
+  if (isServerSideRowGroupingRow && value === undefined) {
+    return null;
+  }
+  return /*#__PURE__*/_jsx(Icon, _extends({
+    fontSize: "small",
+    className: classes.root,
+    titleAccess: apiRef.current.getLocaleText(value ? 'booleanCellTrueLabel' : 'booleanCellFalseLabel'),
+    "data-value": Boolean(value)
+  }, other));
+}
+process.env.NODE_ENV !== "production" ? GridBooleanCellRaw.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,
+  /**
+   * The column of the row that the current cell belongs to.
+   */
+  colDef: PropTypes.object.isRequired,
+  /**
+   * 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,
+  hideDescendantCount: PropTypes.bool,
+  /**
+   * The grid row id.
+   */
+  id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
+  /**
+   * If true, the cell is editable.
+   */
+  isEditable: PropTypes.bool,
+  /**
+   * 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;
+const GridBooleanCell = /*#__PURE__*/React.memo(GridBooleanCellRaw);
+if (process.env.NODE_ENV !== "production") GridBooleanCell.displayName = "GridBooleanCell";
+export { GridBooleanCell };
+export const renderBooleanCell = params => {
+  if (params.field !== GRID_ROW_GROUPING_SINGLE_GROUPING_FIELD && isAutogeneratedRowNode(params.rowNode)) {
+    const aggregationMetaData = params.aggregation;
+    if (!aggregationMetaData) {
+      return '';
+    }
+    if (aggregationMetaData.position === 'footer') {
+      return /*#__PURE__*/_jsx(GridFooterCell, _extends({}, params));
+    }
+    return params.formattedValue;
+  }
+  return /*#__PURE__*/_jsx(GridBooleanCell, _extends({}, params));
+};
+if (process.env.NODE_ENV !== "production") renderBooleanCell.displayName = "renderBooleanCell";

package/components/cell/GridCell.d.mts

@@ -0,0 +1,77 @@
+import * as React from 'react';
+import { type GridRowId } from "../../models/index.mjs";
+import type { GridAlignment, GridStateColDef } from "../../models/colDef/gridColDef.mjs";
+import type { GridRowModel, GridTreeNode } from "../../models/gridRows.mjs";
+import { GridPinnedColumnPosition } from "../../hooks/features/columns/gridColumnsInterfaces.mjs";
+import { PinnedColumnPosition } from "../../internals/constants.mjs";
+export declare const gridPinnedColumnPositionLookup: {
+  1: GridPinnedColumnPosition;
+  2: GridPinnedColumnPosition;
+  0: undefined;
+  3: undefined;
+};
+export type GridCellProps = React.HTMLAttributes<HTMLDivElement> & {
+  align: GridAlignment;
+  className?: string;
+  colIndex: number;
+  column: GridStateColDef;
+  row: GridRowModel;
+  rowId: GridRowId;
+  rowNode: GridTreeNode;
+  width: number;
+  colSpan?: number;
+  disableDragEvents?: boolean;
+  isNotVisible: boolean;
+  pinnedOffset?: number;
+  pinnedPosition: PinnedColumnPosition;
+  showRightBorder: boolean;
+  showLeftBorder: boolean;
+  onClick?: React.MouseEventHandler<HTMLDivElement>;
+  onDoubleClick?: React.MouseEventHandler<HTMLDivElement>;
+  onMouseEnter?: React.MouseEventHandler<HTMLDivElement>;
+  onMouseDown?: React.MouseEventHandler<HTMLDivElement>;
+  onMouseLeave?: React.MouseEventHandler<HTMLDivElement>;
+  onMouseUp?: React.MouseEventHandler<HTMLDivElement>;
+  onMouseOver?: React.MouseEventHandler<HTMLDivElement>;
+  onKeyUp?: React.KeyboardEventHandler<HTMLDivElement>;
+  onKeyDown?: React.KeyboardEventHandler<HTMLDivElement>;
+  onDragEnter?: React.DragEventHandler<HTMLDivElement>;
+  onDragOver?: React.DragEventHandler<HTMLDivElement>;
+  onFocus?: React.FocusEventHandler<Element>;
+  children?: React.ReactNode;
+  style?: React.CSSProperties;
+  [x: `data-${string}`]: string;
+};
+declare const MemoizedGridCell: React.ForwardRefExoticComponent<GridCellProps> | React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & {
+  [x: `data-${string}`]: string;
+  align: GridAlignment;
+  className?: string;
+  colIndex: number;
+  column: GridStateColDef;
+  row: GridRowModel;
+  rowId: GridRowId;
+  rowNode: GridTreeNode;
+  width: number;
+  colSpan?: number;
+  disableDragEvents?: boolean;
+  isNotVisible: boolean;
+  pinnedOffset?: number;
+  pinnedPosition: PinnedColumnPosition;
+  showRightBorder: boolean;
+  showLeftBorder: boolean;
+  onClick?: React.MouseEventHandler<HTMLDivElement>;
+  onDoubleClick?: React.MouseEventHandler<HTMLDivElement>;
+  onMouseEnter?: React.MouseEventHandler<HTMLDivElement>;
+  onMouseDown?: React.MouseEventHandler<HTMLDivElement>;
+  onMouseLeave?: React.MouseEventHandler<HTMLDivElement>;
+  onMouseUp?: React.MouseEventHandler<HTMLDivElement>;
+  onMouseOver?: React.MouseEventHandler<HTMLDivElement>;
+  onKeyUp?: React.KeyboardEventHandler<HTMLDivElement>;
+  onKeyDown?: React.KeyboardEventHandler<HTMLDivElement>;
+  onDragEnter?: React.DragEventHandler<HTMLDivElement>;
+  onDragOver?: React.DragEventHandler<HTMLDivElement>;
+  onFocus?: React.FocusEventHandler<Element>;
+  children?: React.ReactNode;
+  style?: React.CSSProperties;
+} & React.RefAttributes<HTMLDivElement>>;
+export { MemoizedGridCell as GridCell };

package/components/cell/GridCell.mjs

@@ -0,0 +1,344 @@
+'use client';
+
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+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';
+import clsx from 'clsx';
+import useForkRef from '@mui/utils/useForkRef';
+import composeClasses from '@mui/utils/composeClasses';
+import ownerDocument from '@mui/utils/ownerDocument';
+import capitalize from '@mui/utils/capitalize';
+import { fastMemo } from '@mui/x-internals/fastMemo';
+import { useRtl } from '@mui/system/RtlProvider';
+import { forwardRef } from '@mui/x-internals/forwardRef';
+import { useStore } from '@mui/x-internals/store';
+import { Rowspan } from '@mui/x-virtualizer';
+import useEnhancedEffect from '@mui/utils/useEnhancedEffect';
+import { doesSupportPreventScroll } from "../../utils/doesSupportPreventScroll.mjs";
+import { getDataGridUtilityClass, gridClasses } from "../../constants/gridClasses.mjs";
+import { GridCellModes } from "../../models/index.mjs";
+import { useGridSelector } from "../../hooks/utils/useGridSelector.mjs";
+import { useGridRootProps } from "../../hooks/utils/useGridRootProps.mjs";
+import { gridFocusCellSelector, gridTabIndexCellSelector } from "../../hooks/features/focus/gridFocusStateSelector.mjs";
+import { GridPinnedColumnPosition } from "../../hooks/features/columns/gridColumnsInterfaces.mjs";
+import { PinnedColumnPosition } from "../../internals/constants.mjs";
+import { useGridPrivateApiContext } from "../../hooks/utils/useGridPrivateApiContext.mjs";
+import { gridEditCellStateSelector } from "../../hooks/features/editing/gridEditingSelectors.mjs";
+import { attachPinnedStyle } from "../../internals/utils/index.mjs";
+import { useGridConfiguration } from "../../hooks/utils/useGridConfiguration.mjs";
+import { jsx as _jsx } from "react/jsx-runtime";
+export const gridPinnedColumnPositionLookup = {
+  [PinnedColumnPosition.LEFT]: GridPinnedColumnPosition.LEFT,
+  [PinnedColumnPosition.RIGHT]: GridPinnedColumnPosition.RIGHT,
+  [PinnedColumnPosition.NONE]: undefined,
+  [PinnedColumnPosition.VIRTUAL]: undefined
+};
+const useUtilityClasses = ownerState => {
+  const {
+    align,
+    showLeftBorder,
+    showRightBorder,
+    pinnedPosition,
+    isEditable,
+    isSelected,
+    isSelectionMode,
+    classes
+  } = ownerState;
+  const slots = {
+    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);
+};
+let warnedOnce = false;
+
+// TODO(v7): Removing the wrapper will break the docs performance visualization demo.
+
+const GridCell = forwardRef(function GridCell(props, ref) {
+  const {
+      column,
+      row,
+      rowId,
+      rowNode,
+      align,
+      colIndex,
+      width,
+      className,
+      style: styleProp,
+      colSpan,
+      disableDragEvents,
+      isNotVisible,
+      pinnedOffset,
+      pinnedPosition,
+      showRightBorder,
+      showLeftBorder,
+      onClick,
+      onDoubleClick,
+      onMouseDown,
+      onMouseUp,
+      onMouseOver,
+      onKeyDown,
+      onKeyUp,
+      onDragEnter,
+      onDragOver
+    } = props,
+    other = _objectWithoutPropertiesLoose(props, _excluded);
+  const apiRef = useGridPrivateApiContext();
+  const rootProps = useGridRootProps();
+  const isRtl = useRtl();
+  const field = column.field;
+  const editCellState = useGridSelector(apiRef, gridEditCellStateSelector, {
+    rowId,
+    field
+  });
+  const config = useGridConfiguration();
+  const cellAggregationResult = config.hooks.useCellAggregationResult(rowId, field);
+  const cellMode = editCellState ? GridCellModes.Edit : GridCellModes.View;
+  const {
+    value: forcedValue,
+    formattedValue: forcedFormattedValue
+  } = cellAggregationResult || {};
+  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;
+    }),
+    value: forcedValue,
+    formattedValue: forcedFormattedValue
+  });
+  cellParams.api = apiRef.current;
+
+  // Subscribe to changes of the `isCellEditable` API result to ensure cells re-render.
+  // We don't use the result.
+  // Subscription will trigger a new call of `getCellParamsForRow` above which will recompute the correct value of `isEditable`.
+  // This is to ensure both of the following cases work:
+  // - https://github.com/mui/mui-x/issues/19732
+  // - https://github.com/mui/mui-x/issues/20143
+  useGridSelector(apiRef, () => apiRef.current.isCellEditable(cellParams));
+  const isSelected = useGridSelector(apiRef, () => apiRef.current.unstable_applyPipeProcessors('isCellSelected', false, {
+    id: rowId,
+    field
+  }));
+  const store = apiRef.current.virtualizer.store;
+  const hiddenCells = useStore(store, Rowspan.selectors.hiddenCells);
+  const spannedCells = useStore(store, Rowspan.selectors.spannedCells);
+  const {
+    hasFocus,
+    isEditable = false,
+    value
+  } = cellParams;
+  const tabIndex = (cellMode === 'view' || !isEditable) && column.type !== 'actions' ? cellParams.tabIndex : -1;
+  const {
+    classes: rootClasses,
+    getCellClassName
+  } = rootProps;
+
+  // There is a hidden grid state access in `applyPipeProcessor('cellClassName', ...)`
+  const pipesClassName = useGridSelector(apiRef, () => apiRef.current.unstable_applyPipeProcessors('cellClassName', [], {
+    id: rowId,
+    field
+  }).filter(Boolean).join(' '));
+  const classNames = [pipesClassName];
+  if (column.cellClassName) {
+    classNames.push(typeof column.cellClassName === 'function' ? column.cellClassName(cellParams) : column.cellClassName);
+  }
+  if (column.display === 'flex') {
+    classNames.push(gridClasses['cell--flex']);
+  }
+  if (getCellClassName) {
+    classNames.push(getCellClassName(cellParams));
+  }
+  const valueToRender = cellParams.formattedValue ?? value;
+  const cellRef = React.useRef(null);
+  const handleRef = useForkRef(ref, cellRef);
+  const isSelectionMode = rootProps.cellSelection ?? false;
+  const ownerState = {
+    align,
+    showLeftBorder,
+    showRightBorder,
+    isEditable,
+    classes: rootProps.classes,
+    pinnedPosition,
+    isSelected,
+    isSelectionMode
+  };
+  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 isCellRowSpanned = hiddenCells[rowId]?.[colIndex] ?? false;
+  const rowSpan = spannedCells[rowId]?.[colIndex] ?? 1;
+  const style = React.useMemo(() => {
+    if (isNotVisible) {
+      return {
+        padding: 0,
+        opacity: 0,
+        width: 0,
+        height: 0,
+        border: 0
+      };
+    }
+    const cellStyle = attachPinnedStyle(_extends({
+      '--width': `${width}px`
+    }, 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 = 10;
+      if (isLeftPinned || isRightPinned) {
+        cellStyle.zIndex = 40;
+      }
+    }
+    return cellStyle;
+  }, [width, isNotVisible, styleProp, pinnedOffset, pinnedPosition, isRtl, rowSpan]);
+  useEnhancedEffect(() => {
+    if (!hasFocus || cellMode === GridCellModes.Edit) {
+      return;
+    }
+    const doc = ownerDocument(apiRef.current.rootElementRef.current);
+    if (cellRef.current && !cellRef.current.contains(doc.activeElement)) {
+      const focusableElement = cellRef.current.querySelector('[tabindex="0"]');
+      const elementToFocus = focusableElement || cellRef.current;
+      if (doesSupportPreventScroll()) {
+        elementToFocus.focus({
+          preventScroll: true
+        });
+      } else {
+        const scrollPosition = apiRef.current.getScrollPosition();
+        elementToFocus.focus();
+        apiRef.current.scroll(scrollPosition);
+      }
+    }
+  }, [hasFocus, cellMode, apiRef]);
+  if (isCellRowSpanned) {
+    return /*#__PURE__*/_jsx("div", {
+      "data-colindex": colIndex,
+      role: "presentation",
+      style: _extends({
+        width: 'var(--width)'
+      }, style)
+    });
+  }
+  let handleFocus = other.onFocus;
+  if (process.env.NODE_ENV === 'test' && rootProps.experimentalFeatures?.warnIfFocusStateIsNotSynced) {
+    handleFocus = event => {
+      const focusedCell = gridFocusCellSelector(apiRef);
+      if (focusedCell?.id === rowId && focusedCell.field === field) {
+        if (typeof other.onFocus === 'function') {
+          other.onFocus(event);
+        }
+        return;
+      }
+      if (!warnedOnce) {
+        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;
+      }
+    };
+  }
+  let children;
+  let title;
+  if (editCellState === null && column.renderCell) {
+    children = column.renderCell(cellParams);
+  }
+  if (editCellState !== null && column.renderEditCell) {
+    const updatedRow = apiRef.current.getRowWithUpdatedValues(rowId, column.field);
+
+    // eslint-disable-next-line @typescript-eslint/naming-convention
+    const editCellStateRest = _objectWithoutPropertiesLoose(editCellState, _excluded2);
+    const formattedValue = column.valueFormatter ? column.valueFormatter(editCellState.value, updatedRow, column, apiRef) : cellParams.formattedValue;
+    const params = _extends({}, cellParams, {
+      row: updatedRow,
+      formattedValue
+    }, editCellStateRest);
+    children = column.renderEditCell(params);
+    classNames.push(gridClasses['cell--editing']);
+    classNames.push(rootClasses?.['cell--editing']);
+  }
+  if (children === undefined) {
+    const valueString = valueToRender?.toString();
+    children = valueString;
+    title = valueString;
+  }
+  const draggableEventHandlers = disableDragEvents ? null : {
+    onDragEnter: publish('cellDragEnter', onDragEnter),
+    onDragOver: publish('cellDragOver', onDragOver)
+  };
+  return /*#__PURE__*/_jsx("div", _extends({
+    className: clsx(classes.root, classNames, className),
+    role: "gridcell",
+    "data-field": field,
+    "data-colindex": colIndex,
+    "aria-colindex": colIndex + 1,
+    "aria-colspan": colSpan,
+    "aria-rowspan": rowSpan,
+    style: style,
+    title: title,
+    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,
+    ref: handleRef,
+    children: children
+  }));
+});
+if (process.env.NODE_ENV !== "production") GridCell.displayName = "GridCell";
+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 "pnpm proptypes"  |
+  // ----------------------------------------------------------------------
+  align: PropTypes.oneOf(['center', 'left', 'right']).isRequired,
+  colIndex: PropTypes.number.isRequired,
+  colSpan: PropTypes.number,
+  column: PropTypes.object.isRequired,
+  disableDragEvents: PropTypes.bool,
+  isNotVisible: PropTypes.bool.isRequired,
+  pinnedOffset: PropTypes.number,
+  pinnedPosition: PropTypes.oneOf([0, 1, 2, 3]).isRequired,
+  row: PropTypes.object.isRequired,
+  rowId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
+  rowNode: PropTypes.object.isRequired,
+  showLeftBorder: PropTypes.bool.isRequired,
+  showRightBorder: PropTypes.bool.isRequired,
+  width: PropTypes.number.isRequired
+} : void 0;
+const MemoizedGridCell = fastMemo(GridCell);
+export { MemoizedGridCell as GridCell };