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

package/node/components/GridRow.js

@@ -26,8 +26,9 @@ var _gridSortingSelector = require("../hooks/features/sorting/gridSortingSelecto
 var _gridRowsSelector = require("../hooks/features/rows/gridRowsSelector");
 var _gridColumnGroupsSelector = require("../hooks/features/columnGrouping/gridColumnGroupsSelector");
 var _utils2 = require("../utils/utils");
+var _gridEditingSelectors = require("../hooks/features/editing/gridEditingSelectors");
 var _jsxRuntime = require("react/jsx-runtime");
-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"];
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
@@ -73,10 +74,9 @@ const GridRow = /*#__PURE__*/React.forwardRef(function GridRow(props, refProp) {
       renderedColumns,
       containerWidth,
       firstColumnToRender,
-      cellFocus,
-      cellTabIndex,
-      editRowsState,
       isLastVisible = false,
+      focusedCell,
+      tabbableCell,
       onClick,
       onDoubleClick,
       onMouseEnter,
@@ -91,6 +91,7 @@ const GridRow = /*#__PURE__*/React.forwardRef(function GridRow(props, refProp) {
   const sortModel = (0, _useGridSelector.useGridSelector)(apiRef, _gridSortingSelector.gridSortModelSelector);
   const treeDepth = (0, _useGridSelector.useGridSelector)(apiRef, _gridRowsSelector.gridRowMaximumTreeDepthSelector);
   const headerGroupingMaxDepth = (0, _useGridSelector.useGridSelector)(apiRef, _gridColumnGroupsSelector.gridColumnGroupsHeaderMaxDepthSelector);
+  const editRowsState = (0, _useGridSelector.useGridSelector)(apiRef, _gridEditingSelectors.gridEditRowsStateSelector);
   const handleRef = (0, _utils.unstable_useForkRef)(ref, refProp);
   const ariaRowIndex = index + headerGroupingMaxDepth + 2; // 1 for the header row and 1 as it's 1-based
 
@@ -187,13 +188,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((0, _clsx.default)(typeof column.cellClassName === 'function' ? column.cellClassName(cellParams) : column.cellClassName));
     }
@@ -204,7 +214,7 @@ const GridRow = /*#__PURE__*/React.forwardRef(function GridRow(props, refProp) {
         api: apiRef.current
       }));
       // TODO move to GridCell
-      classNames.push((0, _clsx.default)(_gridClasses.gridClasses['cell--withRenderer'], rootProps.classes?.['cell--withRenderer']));
+      classNames.push((0, _clsx.default)(_gridClasses.gridClasses['cell--withRenderer'], rootClasses?.['cell--withRenderer']));
     }
     if (editCellState != null && column.renderEditCell) {
       const updatedRow = apiRef.current.getRowWithUpdatedValues(rowId, column.field);
@@ -216,19 +226,19 @@ const GridRow = /*#__PURE__*/React.forwardRef(function GridRow(props, refProp) {
       });
       content = column.renderEditCell(params);
       // TODO move to GridCell
-      classNames.push((0, _clsx.default)(_gridClasses.gridClasses['cell--editing'], rootProps.classes?.['cell--editing']));
+      classNames.push((0, _clsx.default)(_gridClasses.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__*/(0, _jsxRuntime.jsx)(rootProps.slots.cell, (0, _extends2.default)({
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(CellComponent, (0, _extends2.default)({
       value: cellParams.value,
       field: column.field,
       width: cellProps.width,
@@ -246,10 +256,10 @@ const GridRow = /*#__PURE__*/React.forwardRef(function GridRow(props, refProp) {
       className: (0, _clsx.default)(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) {
@@ -360,23 +370,34 @@ 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.default.object,
-  cellTabIndex: _propTypes.default.object,
-  containerWidth: _propTypes.default.number.isRequired,
-  editRowsState: _propTypes.default.object.isRequired,
-  firstColumnToRender: _propTypes.default.number.isRequired,
+  containerWidth: _propTypes.default.number,
+  firstColumnToRender: _propTypes.default.number,
+  /**
+   * Determines which cell has focus.
+   * If `null`, no cell in this row has focus.
+   */
+  focusedCell: _propTypes.default.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.default.number.isRequired,
+  index: _propTypes.default.number,
   isLastVisible: _propTypes.default.bool,
-  lastColumnToRender: _propTypes.default.number.isRequired,
-  position: _propTypes.default.oneOf(['center', 'left', 'right']).isRequired,
-  renderedColumns: _propTypes.default.arrayOf(_propTypes.default.object).isRequired,
+  lastColumnToRender: _propTypes.default.number,
+  onClick: _propTypes.default.func,
+  onDoubleClick: _propTypes.default.func,
+  onMouseEnter: _propTypes.default.func,
+  onMouseLeave: _propTypes.default.func,
+  position: _propTypes.default.oneOf(['center', 'left', 'right']),
+  renderedColumns: _propTypes.default.arrayOf(_propTypes.default.object),
   row: _propTypes.default.object,
-  rowHeight: _propTypes.default.oneOfType([_propTypes.default.oneOf(['auto']), _propTypes.default.number]).isRequired,
-  rowId: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]).isRequired,
-  selected: _propTypes.default.bool.isRequired,
-  visibleColumns: _propTypes.default.arrayOf(_propTypes.default.object).isRequired
+  rowHeight: _propTypes.default.oneOfType([_propTypes.default.oneOf(['auto']), _propTypes.default.number]),
+  rowId: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),
+  selected: _propTypes.default.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.default.string,
+  visibleColumns: _propTypes.default.arrayOf(_propTypes.default.object)
 } : void 0;

package/node/components/GridRowCount.js

@@ -11,7 +11,7 @@ var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _clsx = _interopRequireDefault(require("clsx"));
 var _utils = require("@mui/utils");
-var _styles = require("@mui/material/styles");
+var _system = require("@mui/system");
 var _useGridApiContext = require("../hooks/utils/useGridApiContext");
 var _gridClasses = require("../constants/gridClasses");
 var _useGridRootProps = require("../hooks/utils/useGridRootProps");
@@ -28,7 +28,7 @@ const useUtilityClasses = ownerState => {
   };
   return (0, _utils.unstable_composeClasses)(slots, _gridClasses.getDataGridUtilityClass, classes);
 };
-const GridRowCountRoot = (0, _styles.styled)('div', {
+const GridRowCountRoot = (0, _system.styled)('div', {
   name: 'MuiDataGrid',
   slot: 'RowCount',
   overridesResolver: (props, styles) => styles.rowCount

package/node/components/GridScrollArea.js

@@ -10,7 +10,7 @@ var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _clsx = _interopRequireDefault(require("clsx"));
 var _utils = require("@mui/utils");
-var _styles = require("@mui/material/styles");
+var _system = require("@mui/system");
 var _useGridApiEventHandler = require("../hooks/utils/useGridApiEventHandler");
 var _useGridApiContext = require("../hooks/utils/useGridApiContext");
 var _gridClasses = require("../constants/gridClasses");
@@ -32,7 +32,7 @@ const useUtilityClasses = ownerState => {
   };
   return (0, _utils.unstable_composeClasses)(slots, _gridClasses.getDataGridUtilityClass, classes);
 };
-const GridScrollAreaRawRoot = (0, _styles.styled)('div', {
+const GridScrollAreaRawRoot = (0, _system.styled)('div', {
   name: 'MuiDataGrid',
   slot: 'ScrollArea',
   overridesResolver: (props, styles) => [{

package/node/components/GridSelectedRowCount.js

@@ -11,7 +11,7 @@ var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _clsx = _interopRequireDefault(require("clsx"));
 var _utils = require("@mui/utils");
-var _styles = require("@mui/material/styles");
+var _system = require("@mui/system");
 var _useGridApiContext = require("../hooks/utils/useGridApiContext");
 var _gridClasses = require("../constants/gridClasses");
 var _useGridRootProps = require("../hooks/utils/useGridRootProps");
@@ -28,7 +28,7 @@ const useUtilityClasses = ownerState => {
   };
   return (0, _utils.unstable_composeClasses)(slots, _gridClasses.getDataGridUtilityClass, classes);
 };
-const GridSelectedRowCountRoot = (0, _styles.styled)('div', {
+const GridSelectedRowCountRoot = (0, _system.styled)('div', {
   name: 'MuiDataGrid',
   slot: 'SelectedRowCount',
   overridesResolver: (props, styles) => styles.selectedRowCount

package/node/components/base/GridBody.js

@@ -5,12 +5,21 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.GridBody = GridBody;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _useGridPrivateApiContext = require("../../hooks/utils/useGridPrivateApiContext");
+var _useGridSelector = require("../../hooks/utils/useGridSelector");
 var _GridMainContainer = require("../containers/GridMainContainer");
 var _GridAutoSizer = require("../GridAutoSizer");
 var _useGridRootProps = require("../../hooks/utils/useGridRootProps");
+var _gridColumnsSelector = require("../../hooks/features/columns/gridColumnsSelector");
+var _gridFilterSelector = require("../../hooks/features/filter/gridFilterSelector");
+var _gridSortingSelector = require("../../hooks/features/sorting/gridSortingSelector");
+var _gridFocusStateSelector = require("../../hooks/features/focus/gridFocusStateSelector");
+var _densitySelector = require("../../hooks/features/density/densitySelector");
+var _gridColumnGroupsSelector = require("../../hooks/features/columnGrouping/gridColumnGroupsSelector");
+var _columnMenuSelector = require("../../hooks/features/columnMenu/columnMenuSelector");
 var _jsxRuntime = require("react/jsx-runtime");
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
@@ -18,10 +27,25 @@ function GridBody(props) {
   const {
     children,
     VirtualScrollerComponent,
-    ColumnHeadersComponent
+    ColumnHeadersProps
   } = props;
   const apiRef = (0, _useGridPrivateApiContext.useGridPrivateApiContext)();
   const rootProps = (0, _useGridRootProps.useGridRootProps)();
+  const visibleColumns = (0, _useGridSelector.useGridSelector)(apiRef, _gridColumnsSelector.gridVisibleColumnDefinitionsSelector);
+  const filterColumnLookup = (0, _useGridSelector.useGridSelector)(apiRef, _gridFilterSelector.gridFilterActiveItemsLookupSelector);
+  const sortColumnLookup = (0, _useGridSelector.useGridSelector)(apiRef, _gridSortingSelector.gridSortColumnLookupSelector);
+  const columnPositions = (0, _useGridSelector.useGridSelector)(apiRef, _gridColumnsSelector.gridColumnPositionsSelector);
+  const columnHeaderTabIndexState = (0, _useGridSelector.useGridSelector)(apiRef, _gridFocusStateSelector.gridTabIndexColumnHeaderSelector);
+  const cellTabIndexState = (0, _useGridSelector.useGridSelector)(apiRef, _gridFocusStateSelector.gridTabIndexCellSelector);
+  const columnGroupHeaderTabIndexState = (0, _useGridSelector.useGridSelector)(apiRef, _gridFocusStateSelector.unstable_gridTabIndexColumnGroupHeaderSelector);
+  const columnHeaderFocus = (0, _useGridSelector.useGridSelector)(apiRef, _gridFocusStateSelector.gridFocusColumnHeaderSelector);
+  const columnGroupHeaderFocus = (0, _useGridSelector.useGridSelector)(apiRef, _gridFocusStateSelector.unstable_gridFocusColumnGroupHeaderSelector);
+  const densityFactor = (0, _useGridSelector.useGridSelector)(apiRef, _densitySelector.gridDensityFactorSelector);
+  const headerGroupingMaxDepth = (0, _useGridSelector.useGridSelector)(apiRef, _gridColumnGroupsSelector.gridColumnGroupsHeaderMaxDepthSelector);
+  const columnMenuState = (0, _useGridSelector.useGridSelector)(apiRef, _columnMenuSelector.gridColumnMenuSelector);
+  const columnVisibility = (0, _useGridSelector.useGridSelector)(apiRef, _gridColumnsSelector.gridColumnVisibilityModelSelector);
+  const columnGroupsHeaderStructure = (0, _useGridSelector.useGridSelector)(apiRef, _gridColumnGroupsSelector.gridColumnGroupsHeaderStructureSelector);
+  const hasOtherElementInTabSequence = !(columnGroupHeaderTabIndexState === null && columnHeaderTabIndexState === null && cellTabIndexState === null);
   const [isVirtualizationDisabled, setIsVirtualizationDisabled] = React.useState(rootProps.disableVirtualization);
   const disableVirtualization = React.useCallback(() => {
     setIsVirtualizationDisabled(true);
@@ -53,10 +77,24 @@ function GridBody(props) {
     apiRef.current.publishEvent('resize', size);
   }, [apiRef]);
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_GridMainContainer.GridMainContainer, {
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(ColumnHeadersComponent, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.columnHeaders, (0, _extends2.default)({
       ref: columnsContainerRef,
-      innerRef: columnHeadersRef
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_GridAutoSizer.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__*/(0, _jsxRuntime.jsx)(_GridAutoSizer.GridAutoSizer, {
       nonce: rootProps.nonce,
       disableHeight: rootProps.autoHeight,
       onResize: handleResize,
@@ -73,6 +111,6 @@ process.env.NODE_ENV !== "production" ? GridBody.propTypes = {
   // | To update them edit the TypeScript types and run "yarn proptypes"  |
   // ----------------------------------------------------------------------
   children: _propTypes.default.node,
-  ColumnHeadersComponent: _propTypes.default.elementType.isRequired,
+  ColumnHeadersProps: _propTypes.default.object,
   VirtualScrollerComponent: _propTypes.default.elementType.isRequired
 } : void 0;

package/node/components/base/GridOverlays.js

@@ -7,7 +7,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.GridOverlays = GridOverlays;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var React = _interopRequireWildcard(require("react"));
-var _styles = require("@mui/material/styles");
+var _system = require("@mui/system");
 var _utils = require("@mui/utils");
 var _clsx = _interopRequireDefault(require("clsx"));
 var _useGridSelector = require("../../hooks/utils/useGridSelector");
@@ -20,7 +20,7 @@ var _gridClasses = require("../../constants/gridClasses");
 var _jsxRuntime = require("react/jsx-runtime");
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-const GridOverlayWrapperRoot = (0, _styles.styled)('div', {
+const GridOverlayWrapperRoot = (0, _system.styled)('div', {
   name: 'MuiDataGrid',
   slot: 'OverlayWrapper',
   overridesResolver: (props, styles) => styles.overlayWrapper
@@ -36,7 +36,7 @@ const GridOverlayWrapperRoot = (0, _styles.styled)('div', {
   zIndex: 4 // Should be above pinned columns, pinned rows and detail panel
 });
 
-const GridOverlayWrapperInner = (0, _styles.styled)('div', {
+const GridOverlayWrapperInner = (0, _system.styled)('div', {
   name: 'MuiDataGrid',
   slot: 'OverlayWrapperInner',
   overridesResolver: (props, styles) => styles.overlayWrapperInner

package/node/components/cell/GridCell.js

@@ -4,7 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.GridCell = GridCell;
+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"));
@@ -48,7 +48,7 @@ const useUtilityClasses = ownerState => {
   return (0, _utils.unstable_composeClasses)(slots, _gridClasses.getDataGridUtilityClass, classes);
 };
 let warnedOnce = false;
-function GridCell(props) {
+const GridCell = /*#__PURE__*/React.forwardRef((props, ref) => {
   const {
       align,
       children,
@@ -81,6 +81,7 @@ function GridCell(props) {
     other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
   const valueToRender = formattedValue == null ? value : formattedValue;
   const cellRef = React.useRef(null);
+  const handleRef = (0, _utils.unstable_useForkRef)(ref, cellRef);
   const focusElementRef = React.useRef(null);
   const apiRef = (0, _useGridApiContext.useGridApiContext)();
   const rootProps = (0, _useGridRootProps.useGridRootProps)();
@@ -182,7 +183,7 @@ function GridCell(props) {
     onDragOver: publish('cellDragOver', onDragOver)
   };
   return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", (0, _extends2.default)({
-    ref: cellRef,
+    ref: handleRef,
     className: (0, _clsx.default)(className, classes.root),
     role: "cell",
     "data-field": field,
@@ -202,23 +203,25 @@ function GridCell(props) {
     onFocus: handleFocus,
     children: renderChildren()
   }));
-}
+});
+const MemoizedCell = /*#__PURE__*/React.memo(GridCell);
+exports.GridCell = MemoizedCell;
 process.env.NODE_ENV !== "production" ? GridCell.propTypes = {
   // ----------------------------- Warning --------------------------------
   // | These PropTypes are generated from the TypeScript type definitions |
   // | To update them edit the TypeScript types and run "yarn proptypes"  |
   // ----------------------------------------------------------------------
-  align: _propTypes.default.oneOf(['center', 'left', 'right']).isRequired,
+  align: _propTypes.default.oneOf(['center', 'left', 'right']),
   cellMode: _propTypes.default.oneOf(['edit', 'view']),
   children: _propTypes.default.node,
   className: _propTypes.default.string,
-  colIndex: _propTypes.default.number.isRequired,
+  colIndex: _propTypes.default.number,
   colSpan: _propTypes.default.number,
   disableDragEvents: _propTypes.default.bool,
-  field: _propTypes.default.string.isRequired,
+  field: _propTypes.default.string,
   formattedValue: _propTypes.default.any,
   hasFocus: _propTypes.default.bool,
-  height: _propTypes.default.oneOfType([_propTypes.default.oneOf(['auto']), _propTypes.default.number]).isRequired,
+  height: _propTypes.default.oneOfType([_propTypes.default.oneOf(['auto']), _propTypes.default.number]),
   isEditable: _propTypes.default.bool,
   isSelected: _propTypes.default.bool,
   onClick: _propTypes.default.func,
@@ -228,9 +231,9 @@ process.env.NODE_ENV !== "production" ? GridCell.propTypes = {
   onKeyDown: _propTypes.default.func,
   onMouseDown: _propTypes.default.func,
   onMouseUp: _propTypes.default.func,
-  rowId: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]).isRequired,
+  rowId: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),
   showRightBorder: _propTypes.default.bool,
-  tabIndex: _propTypes.default.oneOf([-1, 0]).isRequired,
+  tabIndex: _propTypes.default.oneOf([-1, 0]),
   value: _propTypes.default.any,
-  width: _propTypes.default.number.isRequired
+  width: _propTypes.default.number
 } : void 0;

package/node/components/cell/GridEditInputCell.js

@@ -14,7 +14,6 @@ var _styles = require("@mui/material/styles");
 var _InputBase = _interopRequireDefault(require("@mui/material/InputBase"));
 var _gridClasses = require("../../constants/gridClasses");
 var _useGridRootProps = require("../../hooks/utils/useGridRootProps");
-var _index = require("../icons/index");
 var _useGridApiContext = require("../../hooks/utils/useGridApiContext");
 var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["id", "value", "formattedValue", "api", "field", "row", "rowNode", "colDef", "cellMode", "isEditable", "tabIndex", "hasFocus", "isValidating", "debounceMs", "isProcessingProps", "onValueChange"];
@@ -98,7 +97,7 @@ const GridEditInputCell = /*#__PURE__*/React.forwardRef((props, ref) => {
     type: colDef.type === 'number' ? colDef.type : 'text',
     value: valueState ?? '',
     onChange: handleChange,
-    endAdornment: isProcessingProps ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.GridLoadIcon, {}) : undefined
+    endAdornment: isProcessingProps ? /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.loadIcon, {}) : undefined
   }, other));
 });
 exports.GridEditInputCell = GridEditInputCell;

package/node/components/cell/GridEditSingleSelectCell.js

@@ -11,7 +11,6 @@ var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runt
 var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _utils = require("@mui/utils");
-var _MenuItem = _interopRequireDefault(require("@mui/material/MenuItem"));
 var _keyboardUtils = require("../../utils/keyboardUtils");
 var _useGridRootProps = require("../../hooks/utils/useGridRootProps");
 var _gridEditRowModel = require("../../models/gridEditRowModel");
@@ -105,7 +104,6 @@ function GridEditSingleSelectCell(props) {
     }
     setOpen(true);
   };
-  const OptionComponent = isSelectNative ? 'option' : _MenuItem.default;
   if (!valueOptions || !colDef) {
     return null;
   }
@@ -125,10 +123,11 @@ function GridEditSingleSelectCell(props) {
   }, other, rootProps.slotProps?.baseSelect, {
     children: valueOptions.map(valueOption => {
       const value = getOptionValue(valueOption);
-      return /*#__PURE__*/(0, _jsxRuntime.jsx)(OptionComponent, {
-        value: value,
-        children: getOptionLabel(valueOption)
-      }, value);
+      return /*#__PURE__*/(0, React.createElement)(rootProps.slots.baseSelectOption, (0, _extends2.default)({}, rootProps.slotProps?.baseSelectOption || {}, {
+        native: isSelectNative,
+        key: value,
+        value: value
+      }), getOptionLabel(valueOption));
     })
   }));
 }

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

@@ -4,13 +4,13 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.GridColumnHeaders = void 0;
+exports.GridBaseColumnHeaders = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 var React = _interopRequireWildcard(require("react"));
 var _clsx = _interopRequireDefault(require("clsx"));
 var _utils = require("@mui/utils");
-var _styles = require("@mui/material/styles");
+var _system = require("@mui/system");
 var _gridClasses = require("../../constants/gridClasses");
 var _useGridRootProps = require("../../hooks/utils/useGridRootProps");
 var _jsxRuntime = require("react/jsx-runtime");
@@ -26,25 +26,21 @@ const useUtilityClasses = ownerState => {
   };
   return (0, _utils.unstable_composeClasses)(slots, _gridClasses.getDataGridUtilityClass, classes);
 };
-const GridColumnHeadersRoot = (0, _styles.styled)('div', {
+const GridColumnHeadersRoot = (0, _system.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)'
 });
-const GridColumnHeaders = /*#__PURE__*/React.forwardRef(function GridColumnHeaders(props, ref) {
+const GridBaseColumnHeaders = /*#__PURE__*/React.forwardRef(function GridColumnHeaders(props, ref) {
   const {
       className
     } = props,
@@ -57,4 +53,4 @@ const GridColumnHeaders = /*#__PURE__*/React.forwardRef(function GridColumnHeade
     ownerState: rootProps
   }, other));
 });
-exports.GridColumnHeaders = GridColumnHeaders;
+exports.GridBaseColumnHeaders = GridBaseColumnHeaders;

package/node/components/columnHeaders/GridColumnHeaderTitle.js

@@ -11,7 +11,7 @@ var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _clsx = _interopRequireDefault(require("clsx"));
 var _utils = require("@mui/utils");
-var _styles = require("@mui/material/styles");
+var _system = require("@mui/system");
 var _domUtils = require("../../utils/domUtils");
 var _gridClasses = require("../../constants/gridClasses");
 var _useGridRootProps = require("../../hooks/utils/useGridRootProps");
@@ -28,18 +28,16 @@ const useUtilityClasses = ownerState => {
   };
   return (0, _utils.unstable_composeClasses)(slots, _gridClasses.getDataGridUtilityClass, classes);
 };
-const GridColumnHeaderTitleRoot = (0, _styles.styled)('div', {
+const GridColumnHeaderTitleRoot = (0, _system.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/node/components/columnHeaders/GridColumnHeadersInner.js

@@ -10,7 +10,7 @@ var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runt
 var React = _interopRequireWildcard(require("react"));
 var _clsx = _interopRequireDefault(require("clsx"));
 var _utils = require("@mui/utils");
-var _styles = require("@mui/material/styles");
+var _system = require("@mui/system");
 var _gridClasses = require("../../constants/gridClasses");
 var _useGridRootProps = require("../../hooks/utils/useGridRootProps");
 var _useGridApiContext = require("../../hooks/utils/useGridApiContext");
@@ -29,7 +29,7 @@ const useUtilityClasses = ownerState => {
   };
   return (0, _utils.unstable_composeClasses)(slots, _gridClasses.getDataGridUtilityClass, classes);
 };
-const GridColumnHeadersInnerRoot = (0, _styles.styled)('div', {
+const GridColumnHeadersInnerRoot = (0, _system.styled)('div', {
   name: 'MuiDataGrid',
   slot: 'columnHeadersInner',
   overridesResolver: (props, styles) => [{

package/node/components/columnHeaders/GridIconButtonContainer.js

@@ -10,7 +10,7 @@ var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runt
 var React = _interopRequireWildcard(require("react"));
 var _clsx = _interopRequireDefault(require("clsx"));
 var _utils = require("@mui/utils");
-var _styles = require("@mui/material/styles");
+var _system = require("@mui/system");
 var _gridClasses = require("../../constants/gridClasses");
 var _useGridRootProps = require("../../hooks/utils/useGridRootProps");
 var _jsxRuntime = require("react/jsx-runtime");
@@ -26,7 +26,7 @@ const useUtilityClasses = ownerState => {
   };
   return (0, _utils.unstable_composeClasses)(slots, _gridClasses.getDataGridUtilityClass, classes);
 };
-const GridIconButtonContainerRoot = (0, _styles.styled)('div', {
+const GridIconButtonContainerRoot = (0, _system.styled)('div', {
   name: 'MuiDataGrid',
   slot: 'IconButtonContainer',
   overridesResolver: (props, styles) => styles.iconButtonContainer

package/node/components/containers/GridFooterContainer.js

@@ -11,7 +11,7 @@ var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _clsx = _interopRequireDefault(require("clsx"));
 var _utils = require("@mui/utils");
-var _styles = require("@mui/material/styles");
+var _system = require("@mui/system");
 var _gridClasses = require("../../constants/gridClasses");
 var _useGridRootProps = require("../../hooks/utils/useGridRootProps");
 var _jsxRuntime = require("react/jsx-runtime");
@@ -27,19 +27,16 @@ const useUtilityClasses = ownerState => {
   };
   return (0, _utils.unstable_composeClasses)(slots, _gridClasses.getDataGridUtilityClass, classes);
 };
-const GridFooterContainerRoot = (0, _styles.styled)('div', {
+const GridFooterContainerRoot = (0, _system.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 {