@mui/x-data-grid 6.0.0-beta.5 → 6.0.0

package/modern/components/GridColumnHeaders.js

@@ -0,0 +1,108 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+const _excluded = ["innerRef", "className", "visibleColumns", "sortColumnLookup", "filterColumnLookup", "columnPositions", "columnHeaderTabIndexState", "columnGroupHeaderTabIndexState", "columnHeaderFocus", "columnGroupHeaderFocus", "densityFactor", "headerGroupingMaxDepth", "columnMenuState", "columnVisibility", "columnGroupsHeaderStructure", "hasOtherElementInTabSequence"];
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import { useGridColumnHeaders } from '../hooks/features/columnHeaders/useGridColumnHeaders';
+import { GridScrollArea } from './GridScrollArea';
+import { GridBaseColumnHeaders } from './columnHeaders/GridBaseColumnHeaders';
+import { GridColumnHeadersInner } from './columnHeaders/GridColumnHeadersInner';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+const GridColumnHeaders = /*#__PURE__*/React.forwardRef(function GridColumnsHeaders(props, ref) {
+  const {
+      innerRef,
+      visibleColumns,
+      sortColumnLookup,
+      filterColumnLookup,
+      columnPositions,
+      columnHeaderTabIndexState,
+      columnGroupHeaderTabIndexState,
+      columnHeaderFocus,
+      columnGroupHeaderFocus,
+      densityFactor,
+      headerGroupingMaxDepth,
+      columnMenuState,
+      columnVisibility,
+      columnGroupsHeaderStructure,
+      hasOtherElementInTabSequence
+    } = props,
+    other = _objectWithoutPropertiesLoose(props, _excluded);
+  const {
+    isDragging,
+    getRootProps,
+    getInnerProps,
+    getColumnHeaders,
+    getColumnGroupHeaders
+  } = useGridColumnHeaders({
+    innerRef,
+    visibleColumns,
+    sortColumnLookup,
+    filterColumnLookup,
+    columnPositions,
+    columnHeaderTabIndexState,
+    columnGroupHeaderTabIndexState,
+    columnHeaderFocus,
+    columnGroupHeaderFocus,
+    densityFactor,
+    headerGroupingMaxDepth,
+    columnMenuState,
+    columnVisibility,
+    columnGroupsHeaderStructure,
+    hasOtherElementInTabSequence
+  });
+  return /*#__PURE__*/_jsxs(GridBaseColumnHeaders, _extends({
+    ref: ref
+  }, getRootProps(other), {
+    children: [/*#__PURE__*/_jsx(GridScrollArea, {
+      scrollDirection: "left"
+    }), /*#__PURE__*/_jsxs(GridColumnHeadersInner, _extends({
+      isDragging: isDragging
+    }, getInnerProps(), {
+      children: [getColumnGroupHeaders(), getColumnHeaders()]
+    })), /*#__PURE__*/_jsx(GridScrollArea, {
+      scrollDirection: "right"
+    })]
+  }));
+});
+process.env.NODE_ENV !== "production" ? GridColumnHeaders.propTypes = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // | To update them edit the TypeScript types and run "yarn proptypes"  |
+  // ----------------------------------------------------------------------
+  columnGroupHeaderFocus: PropTypes.shape({
+    depth: PropTypes.number.isRequired,
+    field: PropTypes.string.isRequired
+  }),
+  columnGroupHeaderTabIndexState: PropTypes.shape({
+    depth: PropTypes.number.isRequired,
+    field: PropTypes.string.isRequired
+  }),
+  columnGroupsHeaderStructure: PropTypes.arrayOf(PropTypes.arrayOf(PropTypes.shape({
+    columnFields: PropTypes.arrayOf(PropTypes.string).isRequired,
+    groupId: PropTypes.string
+  }))).isRequired,
+  columnHeaderFocus: PropTypes.shape({
+    field: PropTypes.string.isRequired
+  }),
+  columnHeaderTabIndexState: PropTypes.shape({
+    field: PropTypes.string.isRequired
+  }),
+  columnMenuState: PropTypes.shape({
+    field: PropTypes.string,
+    open: PropTypes.bool.isRequired
+  }).isRequired,
+  columnPositions: PropTypes.arrayOf(PropTypes.number).isRequired,
+  columnVisibility: PropTypes.object.isRequired,
+  densityFactor: PropTypes.number.isRequired,
+  filterColumnLookup: PropTypes.object.isRequired,
+  hasOtherElementInTabSequence: PropTypes.bool.isRequired,
+  headerGroupingMaxDepth: PropTypes.number.isRequired,
+  innerRef: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({
+    current: PropTypes.object
+  })]),
+  minColumnIndex: PropTypes.number,
+  sortColumnLookup: PropTypes.object.isRequired,
+  visibleColumns: PropTypes.arrayOf(PropTypes.object).isRequired
+} : void 0;
+export { GridColumnHeaders };

package/modern/components/GridRow.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["selected", "rowId", "row", "index", "style", "position", "rowHeight", "className", "visibleColumns", "renderedColumns", "containerWidth", "firstColumnToRender", "lastColumnToRender", "cellFocus", "cellTabIndex", "editRowsState", "isLastVisible", "onClick", "onDoubleClick", "onMouseEnter", "onMouseLeave"],
+const _excluded = ["selected", "rowId", "row", "index", "style", "position", "rowHeight", "className", "visibleColumns", "renderedColumns", "containerWidth", "firstColumnToRender", "lastColumnToRender", "isLastVisible", "focusedCell", "tabbableCell", "onClick", "onDoubleClick", "onMouseEnter", "onMouseLeave"],
   _excluded2 = ["changeReason"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
@@ -21,6 +21,7 @@ import { gridSortModelSelector } from '../hooks/features/sorting/gridSortingSele
 import { gridRowMaximumTreeDepthSelector } from '../hooks/features/rows/gridRowsSelector';
 import { gridColumnGroupsHeaderMaxDepthSelector } from '../hooks/features/columnGrouping/gridColumnGroupsSelector';
 import { randomNumberBetween } from '../utils/utils';
+import { gridEditRowsStateSelector } from '../hooks/features/editing/gridEditingSelectors';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const useUtilityClasses = ownerState => {
@@ -65,10 +66,9 @@ const GridRow = /*#__PURE__*/React.forwardRef(function GridRow(props, refProp) {
       renderedColumns,
       containerWidth,
       firstColumnToRender,
-      cellFocus,
-      cellTabIndex,
-      editRowsState,
       isLastVisible = false,
+      focusedCell,
+      tabbableCell,
       onClick,
       onDoubleClick,
       onMouseEnter,
@@ -83,6 +83,7 @@ const GridRow = /*#__PURE__*/React.forwardRef(function GridRow(props, refProp) {
   const sortModel = useGridSelector(apiRef, gridSortModelSelector);
   const treeDepth = useGridSelector(apiRef, gridRowMaximumTreeDepthSelector);
   const headerGroupingMaxDepth = useGridSelector(apiRef, gridColumnGroupsHeaderMaxDepthSelector);
+  const editRowsState = useGridSelector(apiRef, gridEditRowsStateSelector);
   const handleRef = useForkRef(ref, refProp);
   const ariaRowIndex = index + headerGroupingMaxDepth + 2; // 1 for the header row and 1 as it's 1-based
 
@@ -179,13 +180,22 @@ const GridRow = /*#__PURE__*/React.forwardRef(function GridRow(props, refProp) {
     }
     publish('rowClick', onClick)(event);
   }, [apiRef, onClick, publish, rowId]);
+  const {
+    slots,
+    slotProps,
+    classes: rootClasses,
+    disableColumnReorder,
+    getCellClassName
+  } = rootProps;
+  const rowReordering = rootProps.rowReordering;
+  const CellComponent = slots.cell;
   const getCell = React.useCallback((column, cellProps) => {
     const cellParams = apiRef.current.getCellParams(rowId, column.field);
     const classNames = apiRef.current.unstable_applyPipeProcessors('cellClassName', [], {
       id: rowId,
       field: column.field
     });
-    const disableDragEvents = rootProps.disableColumnReorder && column.disableReorder || !rootProps.rowReordering && !!sortModel.length && treeDepth > 1 && Object.keys(editRowsState).length > 0;
+    const disableDragEvents = disableColumnReorder && column.disableReorder || !rowReordering && !!sortModel.length && treeDepth > 1 && Object.keys(editRowsState).length > 0;
     if (column.cellClassName) {
       classNames.push(clsx(typeof column.cellClassName === 'function' ? column.cellClassName(cellParams) : column.cellClassName));
     }
@@ -196,7 +206,7 @@ const GridRow = /*#__PURE__*/React.forwardRef(function GridRow(props, refProp) {
         api: apiRef.current
       }));
       // TODO move to GridCell
-      classNames.push(clsx(gridClasses['cell--withRenderer'], rootProps.classes?.['cell--withRenderer']));
+      classNames.push(clsx(gridClasses['cell--withRenderer'], rootClasses?.['cell--withRenderer']));
     }
     if (editCellState != null && column.renderEditCell) {
       const updatedRow = apiRef.current.getRowWithUpdatedValues(rowId, column.field);
@@ -208,19 +218,19 @@ const GridRow = /*#__PURE__*/React.forwardRef(function GridRow(props, refProp) {
       });
       content = column.renderEditCell(params);
       // TODO move to GridCell
-      classNames.push(clsx(gridClasses['cell--editing'], rootProps.classes?.['cell--editing']));
+      classNames.push(clsx(gridClasses['cell--editing'], rootClasses?.['cell--editing']));
     }
-    if (rootProps.getCellClassName) {
+    if (getCellClassName) {
       // TODO move to GridCell
-      classNames.push(rootProps.getCellClassName(cellParams));
+      classNames.push(getCellClassName(cellParams));
     }
-    const hasFocus = cellFocus !== null && cellFocus.id === rowId && cellFocus.field === column.field;
-    const tabIndex = cellTabIndex !== null && cellTabIndex.id === rowId && cellTabIndex.field === column.field && cellParams.cellMode === 'view' ? 0 : -1;
+    const hasFocus = focusedCell === column.field;
+    const tabIndex = tabbableCell === column.field ? 0 : -1;
     const isSelected = apiRef.current.unstable_applyPipeProcessors('isCellSelected', false, {
       id: rowId,
       field: column.field
     });
-    return /*#__PURE__*/_jsx(rootProps.slots.cell, _extends({
+    return /*#__PURE__*/_jsx(CellComponent, _extends({
       value: cellParams.value,
       field: column.field,
       width: cellProps.width,
@@ -238,10 +248,10 @@ const GridRow = /*#__PURE__*/React.forwardRef(function GridRow(props, refProp) {
       className: clsx(classNames),
       colSpan: cellProps.colSpan,
       disableDragEvents: disableDragEvents
-    }, rootProps.slotProps?.cell, {
+    }, slotProps?.cell, {
       children: content
     }), column.field);
-  }, [apiRef, cellTabIndex, editRowsState, cellFocus, rootProps, rowHeight, rowId, treeDepth, sortModel.length]);
+  }, [apiRef, rowId, disableColumnReorder, rowReordering, sortModel.length, treeDepth, editRowsState, getCellClassName, focusedCell, tabbableCell, CellComponent, rowHeight, slotProps?.cell, rootClasses]);
   const sizes = apiRef.current.unstable_getRowInternalSizes(rowId);
   let minHeight = rowHeight;
   if (minHeight === 'auto' && sizes) {
@@ -351,24 +361,35 @@ process.env.NODE_ENV !== "production" ? GridRow.propTypes = {
   // | These PropTypes are generated from the TypeScript type definitions |
   // | To update them edit the TypeScript types and run "yarn proptypes"  |
   // ----------------------------------------------------------------------
-  cellFocus: PropTypes.object,
-  cellTabIndex: PropTypes.object,
-  containerWidth: PropTypes.number.isRequired,
-  editRowsState: PropTypes.object.isRequired,
-  firstColumnToRender: PropTypes.number.isRequired,
+  containerWidth: PropTypes.number,
+  firstColumnToRender: PropTypes.number,
+  /**
+   * Determines which cell has focus.
+   * If `null`, no cell in this row has focus.
+   */
+  focusedCell: PropTypes.string,
   /**
    * Index of the row in the whole sorted and filtered dataset.
    * If some rows above have expanded children, this index also take those children into account.
    */
-  index: PropTypes.number.isRequired,
+  index: PropTypes.number,
   isLastVisible: PropTypes.bool,
-  lastColumnToRender: PropTypes.number.isRequired,
-  position: PropTypes.oneOf(['center', 'left', 'right']).isRequired,
-  renderedColumns: PropTypes.arrayOf(PropTypes.object).isRequired,
+  lastColumnToRender: PropTypes.number,
+  onClick: PropTypes.func,
+  onDoubleClick: PropTypes.func,
+  onMouseEnter: PropTypes.func,
+  onMouseLeave: PropTypes.func,
+  position: PropTypes.oneOf(['center', 'left', 'right']),
+  renderedColumns: PropTypes.arrayOf(PropTypes.object),
   row: PropTypes.object,
-  rowHeight: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.number]).isRequired,
-  rowId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
-  selected: PropTypes.bool.isRequired,
-  visibleColumns: PropTypes.arrayOf(PropTypes.object).isRequired
+  rowHeight: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.number]),
+  rowId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+  selected: PropTypes.bool,
+  /**
+   * Determines which cell should be tabbable by having tabIndex=0.
+   * If `null`, no cell in this row is in the tab sequence.
+   */
+  tabbableCell: PropTypes.string,
+  visibleColumns: PropTypes.arrayOf(PropTypes.object)
 } : void 0;
 export { GridRow };

package/modern/components/GridRowCount.js

@@ -5,7 +5,7 @@ import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import { unstable_composeClasses as composeClasses } from '@mui/utils';
-import { styled } from '@mui/material/styles';
+import { styled } from '@mui/system';
 import { useGridApiContext } from '../hooks/utils/useGridApiContext';
 import { getDataGridUtilityClass } from '../constants/gridClasses';
 import { useGridRootProps } from '../hooks/utils/useGridRootProps';

package/modern/components/GridScrollArea.js

@@ -3,7 +3,7 @@ import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import { unstable_composeClasses as composeClasses } from '@mui/utils';
-import { styled } from '@mui/material/styles';
+import { styled } from '@mui/system';
 import { useGridApiEventHandler } from '../hooks/utils/useGridApiEventHandler';
 import { useGridApiContext } from '../hooks/utils/useGridApiContext';
 import { getDataGridUtilityClass, gridClasses } from '../constants/gridClasses';

package/modern/components/GridSelectedRowCount.js

@@ -5,7 +5,7 @@ import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import { unstable_composeClasses as composeClasses } from '@mui/utils';
-import { styled } from '@mui/material/styles';
+import { styled } from '@mui/system';
 import { useGridApiContext } from '../hooks/utils/useGridApiContext';
 import { getDataGridUtilityClass } from '../constants/gridClasses';
 import { useGridRootProps } from '../hooks/utils/useGridRootProps';

package/modern/components/base/GridBody.js

@@ -1,19 +1,43 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { useGridPrivateApiContext } from '../../hooks/utils/useGridPrivateApiContext';
+import { useGridSelector } from '../../hooks/utils/useGridSelector';
 import { GridMainContainer } from '../containers/GridMainContainer';
 import { GridAutoSizer } from '../GridAutoSizer';
 import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
+import { gridColumnPositionsSelector, gridColumnVisibilityModelSelector, gridVisibleColumnDefinitionsSelector } from '../../hooks/features/columns/gridColumnsSelector';
+import { gridFilterActiveItemsLookupSelector } from '../../hooks/features/filter/gridFilterSelector';
+import { gridSortColumnLookupSelector } from '../../hooks/features/sorting/gridSortingSelector';
+import { gridTabIndexColumnHeaderSelector, gridTabIndexCellSelector, gridFocusColumnHeaderSelector, unstable_gridTabIndexColumnGroupHeaderSelector, unstable_gridFocusColumnGroupHeaderSelector } from '../../hooks/features/focus/gridFocusStateSelector';
+import { gridDensityFactorSelector } from '../../hooks/features/density/densitySelector';
+import { gridColumnGroupsHeaderMaxDepthSelector, gridColumnGroupsHeaderStructureSelector } from '../../hooks/features/columnGrouping/gridColumnGroupsSelector';
+import { gridColumnMenuSelector } from '../../hooks/features/columnMenu/columnMenuSelector';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 function GridBody(props) {
   const {
     children,
     VirtualScrollerComponent,
-    ColumnHeadersComponent
+    ColumnHeadersProps
   } = props;
   const apiRef = useGridPrivateApiContext();
   const rootProps = useGridRootProps();
+  const visibleColumns = useGridSelector(apiRef, gridVisibleColumnDefinitionsSelector);
+  const filterColumnLookup = useGridSelector(apiRef, gridFilterActiveItemsLookupSelector);
+  const sortColumnLookup = useGridSelector(apiRef, gridSortColumnLookupSelector);
+  const columnPositions = useGridSelector(apiRef, gridColumnPositionsSelector);
+  const columnHeaderTabIndexState = useGridSelector(apiRef, gridTabIndexColumnHeaderSelector);
+  const cellTabIndexState = useGridSelector(apiRef, gridTabIndexCellSelector);
+  const columnGroupHeaderTabIndexState = useGridSelector(apiRef, unstable_gridTabIndexColumnGroupHeaderSelector);
+  const columnHeaderFocus = useGridSelector(apiRef, gridFocusColumnHeaderSelector);
+  const columnGroupHeaderFocus = useGridSelector(apiRef, unstable_gridFocusColumnGroupHeaderSelector);
+  const densityFactor = useGridSelector(apiRef, gridDensityFactorSelector);
+  const headerGroupingMaxDepth = useGridSelector(apiRef, gridColumnGroupsHeaderMaxDepthSelector);
+  const columnMenuState = useGridSelector(apiRef, gridColumnMenuSelector);
+  const columnVisibility = useGridSelector(apiRef, gridColumnVisibilityModelSelector);
+  const columnGroupsHeaderStructure = useGridSelector(apiRef, gridColumnGroupsHeaderStructureSelector);
+  const hasOtherElementInTabSequence = !(columnGroupHeaderTabIndexState === null && columnHeaderTabIndexState === null && cellTabIndexState === null);
   const [isVirtualizationDisabled, setIsVirtualizationDisabled] = React.useState(rootProps.disableVirtualization);
   const disableVirtualization = React.useCallback(() => {
     setIsVirtualizationDisabled(true);
@@ -45,10 +69,24 @@ function GridBody(props) {
     apiRef.current.publishEvent('resize', size);
   }, [apiRef]);
   return /*#__PURE__*/_jsxs(GridMainContainer, {
-    children: [/*#__PURE__*/_jsx(ColumnHeadersComponent, {
+    children: [/*#__PURE__*/_jsx(rootProps.slots.columnHeaders, _extends({
       ref: columnsContainerRef,
-      innerRef: columnHeadersRef
-    }), /*#__PURE__*/_jsx(GridAutoSizer, {
+      innerRef: columnHeadersRef,
+      visibleColumns: visibleColumns,
+      filterColumnLookup: filterColumnLookup,
+      sortColumnLookup: sortColumnLookup,
+      columnPositions: columnPositions,
+      columnHeaderTabIndexState: columnHeaderTabIndexState,
+      columnGroupHeaderTabIndexState: columnGroupHeaderTabIndexState,
+      columnHeaderFocus: columnHeaderFocus,
+      columnGroupHeaderFocus: columnGroupHeaderFocus,
+      densityFactor: densityFactor,
+      headerGroupingMaxDepth: headerGroupingMaxDepth,
+      columnMenuState: columnMenuState,
+      columnVisibility: columnVisibility,
+      columnGroupsHeaderStructure: columnGroupsHeaderStructure,
+      hasOtherElementInTabSequence: hasOtherElementInTabSequence
+    }, ColumnHeadersProps)), /*#__PURE__*/_jsx(GridAutoSizer, {
       nonce: rootProps.nonce,
       disableHeight: rootProps.autoHeight,
       onResize: handleResize,
@@ -65,7 +103,7 @@ process.env.NODE_ENV !== "production" ? GridBody.propTypes = {
   // | To update them edit the TypeScript types and run "yarn proptypes"  |
   // ----------------------------------------------------------------------
   children: PropTypes.node,
-  ColumnHeadersComponent: PropTypes.elementType.isRequired,
+  ColumnHeadersProps: PropTypes.object,
   VirtualScrollerComponent: PropTypes.elementType.isRequired
 } : void 0;
 export { GridBody };

package/modern/components/base/GridOverlays.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
-import { styled } from '@mui/material/styles';
+import { styled } from '@mui/system';
 import { unstable_composeClasses as composeClasses, unstable_useEnhancedEffect as useEnhancedEffect } from '@mui/utils';
 import clsx from 'clsx';
 import { useGridSelector } from '../../hooks/utils/useGridSelector';

package/modern/components/cell/GridCell.js

@@ -5,7 +5,7 @@ const _excluded = ["align", "children", "colIndex", "colDef", "cellMode", "field
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
-import { unstable_composeClasses as composeClasses, unstable_ownerDocument as ownerDocument, unstable_capitalize as capitalize } from '@mui/utils';
+import { unstable_useForkRef as useForkRef, unstable_composeClasses as composeClasses, unstable_ownerDocument as ownerDocument, unstable_capitalize as capitalize } from '@mui/utils';
 import { getDataGridUtilityClass } from '../../constants/gridClasses';
 import { GridCellModes } from '../../models';
 import { useGridApiContext } from '../../hooks/utils/useGridApiContext';
@@ -40,7 +40,7 @@ const useUtilityClasses = ownerState => {
   return composeClasses(slots, getDataGridUtilityClass, classes);
 };
 let warnedOnce = false;
-function GridCell(props) {
+const GridCell = /*#__PURE__*/React.forwardRef((props, ref) => {
   const {
       align,
       children,
@@ -73,6 +73,7 @@ function GridCell(props) {
     other = _objectWithoutPropertiesLoose(props, _excluded);
   const valueToRender = formattedValue == null ? value : formattedValue;
   const cellRef = React.useRef(null);
+  const handleRef = useForkRef(ref, cellRef);
   const focusElementRef = React.useRef(null);
   const apiRef = useGridApiContext();
   const rootProps = useGridRootProps();
@@ -174,7 +175,7 @@ function GridCell(props) {
     onDragOver: publish('cellDragOver', onDragOver)
   };
   return /*#__PURE__*/_jsx("div", _extends({
-    ref: cellRef,
+    ref: handleRef,
     className: clsx(className, classes.root),
     role: "cell",
     "data-field": field,
@@ -194,23 +195,24 @@ function GridCell(props) {
     onFocus: handleFocus,
     children: renderChildren()
   }));
-}
+});
+const MemoizedCell = /*#__PURE__*/React.memo(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 "yarn proptypes"  |
   // ----------------------------------------------------------------------
-  align: PropTypes.oneOf(['center', 'left', 'right']).isRequired,
+  align: PropTypes.oneOf(['center', 'left', 'right']),
   cellMode: PropTypes.oneOf(['edit', 'view']),
   children: PropTypes.node,
   className: PropTypes.string,
-  colIndex: PropTypes.number.isRequired,
+  colIndex: PropTypes.number,
   colSpan: PropTypes.number,
   disableDragEvents: PropTypes.bool,
-  field: PropTypes.string.isRequired,
+  field: PropTypes.string,
   formattedValue: PropTypes.any,
   hasFocus: PropTypes.bool,
-  height: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.number]).isRequired,
+  height: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.number]),
   isEditable: PropTypes.bool,
   isSelected: PropTypes.bool,
   onClick: PropTypes.func,
@@ -220,10 +222,10 @@ process.env.NODE_ENV !== "production" ? GridCell.propTypes = {
   onKeyDown: PropTypes.func,
   onMouseDown: PropTypes.func,
   onMouseUp: PropTypes.func,
-  rowId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
+  rowId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
   showRightBorder: PropTypes.bool,
-  tabIndex: PropTypes.oneOf([-1, 0]).isRequired,
+  tabIndex: PropTypes.oneOf([-1, 0]),
   value: PropTypes.any,
-  width: PropTypes.number.isRequired
+  width: PropTypes.number
 } : void 0;
-export { GridCell };
+export { MemoizedCell as GridCell };

package/modern/components/cell/GridEditInputCell.js

@@ -8,7 +8,6 @@ import { styled } from '@mui/material/styles';
 import InputBase from '@mui/material/InputBase';
 import { getDataGridUtilityClass } from '../../constants/gridClasses';
 import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
-import { GridLoadIcon } from '../icons/index';
 import { useGridApiContext } from '../../hooks/utils/useGridApiContext';
 import { jsx as _jsx } from "react/jsx-runtime";
 const useUtilityClasses = ownerState => {
@@ -89,7 +88,7 @@ const GridEditInputCell = /*#__PURE__*/React.forwardRef((props, ref) => {
     type: colDef.type === 'number' ? colDef.type : 'text',
     value: valueState ?? '',
     onChange: handleChange,
-    endAdornment: isProcessingProps ? /*#__PURE__*/_jsx(GridLoadIcon, {}) : undefined
+    endAdornment: isProcessingProps ? /*#__PURE__*/_jsx(rootProps.slots.loadIcon, {}) : undefined
   }, other));
 });
 process.env.NODE_ENV !== "production" ? GridEditInputCell.propTypes = {

package/modern/components/cell/GridEditSingleSelectCell.js

@@ -4,12 +4,12 @@ const _excluded = ["id", "value", "formattedValue", "api", "field", "row", "rowN
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { unstable_useEnhancedEffect as useEnhancedEffect } from '@mui/utils';
-import MenuItem from '@mui/material/MenuItem';
 import { isEscapeKey } from '../../utils/keyboardUtils';
 import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
 import { GridEditModes } from '../../models/gridEditRowModel';
 import { getValueFromValueOptions, isSingleSelectColDef } from '../panel/filterPanel/filterPanelUtils';
 import { useGridApiContext } from '../../hooks/utils/useGridApiContext';
+import { createElement as _createElement } from "react";
 import { jsx as _jsx } from "react/jsx-runtime";
 function isKeyboardEvent(event) {
   return !!event.key;
@@ -95,7 +95,6 @@ function GridEditSingleSelectCell(props) {
     }
     setOpen(true);
   };
-  const OptionComponent = isSelectNative ? 'option' : MenuItem;
   if (!valueOptions || !colDef) {
     return null;
   }
@@ -115,10 +114,11 @@ function GridEditSingleSelectCell(props) {
   }, other, rootProps.slotProps?.baseSelect, {
     children: valueOptions.map(valueOption => {
       const value = getOptionValue(valueOption);
-      return /*#__PURE__*/_jsx(OptionComponent, {
-        value: value,
-        children: getOptionLabel(valueOption)
-      }, value);
+      return /*#__PURE__*/_createElement(rootProps.slots.baseSelectOption, _extends({}, rootProps.slotProps?.baseSelectOption || {}, {
+        native: isSelectNative,
+        key: value,
+        value: value
+      }), getOptionLabel(valueOption));
     })
   }));
 }

package/{components/columnHeaders/GridColumnHeaders.js → modern/components/columnHeaders/GridBaseColumnHeaders.js}

@@ -4,7 +4,7 @@ const _excluded = ["className"];
 import * as React from 'react';
 import clsx from 'clsx';
 import { unstable_composeClasses as composeClasses } from '@mui/utils';
-import { styled } from '@mui/material/styles';
+import { styled } from '@mui/system';
 import { getDataGridUtilityClass } from '../../constants/gridClasses';
 import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -21,21 +21,17 @@ const GridColumnHeadersRoot = styled('div', {
   name: 'MuiDataGrid',
   slot: 'ColumnHeaders',
   overridesResolver: (props, styles) => styles.columnHeaders
-})(({
-  theme
-}) => {
-  return {
-    position: 'relative',
-    overflow: 'hidden',
-    display: 'flex',
-    alignItems: 'center',
-    boxSizing: 'border-box',
-    borderBottom: '1px solid',
-    borderTopLeftRadius: theme.shape.borderRadius,
-    borderTopRightRadius: theme.shape.borderRadius
-  };
+})({
+  position: 'relative',
+  overflow: 'hidden',
+  display: 'flex',
+  alignItems: 'center',
+  boxSizing: 'border-box',
+  borderBottom: '1px solid',
+  borderTopLeftRadius: 'var(--unstable_DataGrid-radius)',
+  borderTopRightRadius: 'var(--unstable_DataGrid-radius)'
 });
-export const GridColumnHeaders = /*#__PURE__*/React.forwardRef(function GridColumnHeaders(props, ref) {
+export const GridBaseColumnHeaders = /*#__PURE__*/React.forwardRef(function GridColumnHeaders(props, ref) {
   const {
       className
     } = props,

package/modern/components/columnHeaders/GridColumnHeaderTitle.js

@@ -5,7 +5,7 @@ import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import { unstable_composeClasses as composeClasses } from '@mui/utils';
-import { styled } from '@mui/material/styles';
+import { styled } from '@mui/system';
 import { isOverflown } from '../../utils/domUtils';
 import { getDataGridUtilityClass } from '../../constants/gridClasses';
 import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
@@ -23,14 +23,12 @@ const GridColumnHeaderTitleRoot = styled('div', {
   name: 'MuiDataGrid',
   slot: 'ColumnHeaderTitle',
   overridesResolver: (props, styles) => styles.columnHeaderTitle
-})(({
-  theme
-}) => ({
+})({
   textOverflow: 'ellipsis',
   overflow: 'hidden',
   whiteSpace: 'nowrap',
-  fontWeight: theme.typography.fontWeightMedium
-}));
+  fontWeight: 'var(--unstable_DataGrid-headWeight)'
+});
 const ColumnHeaderInnerTitle = /*#__PURE__*/React.forwardRef(function ColumnHeaderInnerTitle(props, ref) {
   const {
       className

package/modern/components/columnHeaders/GridColumnHeadersInner.js

@@ -4,7 +4,7 @@ const _excluded = ["isDragging", "className"];
 import * as React from 'react';
 import clsx from 'clsx';
 import { unstable_composeClasses as composeClasses } from '@mui/utils';
-import { styled } from '@mui/material/styles';
+import { styled } from '@mui/system';
 import { gridClasses, getDataGridUtilityClass } from '../../constants/gridClasses';
 import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
 import { useGridApiContext } from '../../hooks/utils/useGridApiContext';

package/modern/components/columnHeaders/GridIconButtonContainer.js

@@ -4,7 +4,7 @@ const _excluded = ["className"];
 import * as React from 'react';
 import clsx from 'clsx';
 import { unstable_composeClasses as composeClasses } from '@mui/utils';
-import { styled } from '@mui/material/styles';
+import { styled } from '@mui/system';
 import { getDataGridUtilityClass } from '../../constants/gridClasses';
 import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
 import { jsx as _jsx } from "react/jsx-runtime";

package/modern/components/containers/GridFooterContainer.js

@@ -5,7 +5,7 @@ import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import { unstable_composeClasses as composeClasses } from '@mui/utils';
-import { styled } from '@mui/material/styles';
+import { styled } from '@mui/system';
 import { getDataGridUtilityClass } from '../../constants/gridClasses';
 import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -22,15 +22,12 @@ const GridFooterContainerRoot = styled('div', {
   name: 'MuiDataGrid',
   slot: 'FooterContainer',
   overridesResolver: (props, styles) => styles.footerContainer
-})(() => {
-  return {
-    display: 'flex',
-    justifyContent: 'space-between',
-    alignItems: 'center',
-    minHeight: 52,
-    // Match TablePagination min height
-    borderTop: '1px solid'
-  };
+})({
+  display: 'flex',
+  justifyContent: 'space-between',
+  alignItems: 'center',
+  minHeight: 52,
+  borderTop: '1px solid'
 });
 const GridFooterContainer = /*#__PURE__*/React.forwardRef(function GridFooterContainer(props, ref) {
   const {