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

package/legacy/components/virtualization/GridVirtualScrollerContent.js

@@ -3,7 +3,7 @@ import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutPr
 var _excluded = ["className", "style"];
 import * as React from 'react';
 import clsx from 'clsx';
-import { styled } from '@mui/material/styles';
+import { styled } from '@mui/system';
 import { unstable_composeClasses as composeClasses } from '@mui/utils';
 import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
 import { getDataGridUtilityClass } from '../../constants/gridClasses';
@@ -28,14 +28,14 @@ var GridVirtualScrollerContent = /*#__PURE__*/React.forwardRef(function GridVirt
     style = props.style,
     other = _objectWithoutProperties(props, _excluded);
   var rootProps = useGridRootProps();
-  var ownerState = {
-    classes: rootProps.classes,
+  var ownerState = _extends({}, rootProps, {
     overflowedContent: !rootProps.autoHeight && (style == null ? void 0 : style.minHeight) === 'auto'
-  };
+  });
   var classes = useUtilityClasses(ownerState);
   return /*#__PURE__*/_jsx(VirtualScrollerContentRoot, _extends({
     ref: ref,
     className: clsx(classes.root, className),
+    ownerState: ownerState,
     style: style
   }, other));
 });

package/legacy/components/virtualization/GridVirtualScrollerRenderZone.js

@@ -3,7 +3,7 @@ import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutPr
 var _excluded = ["className"];
 import * as React from 'react';
 import clsx from 'clsx';
-import { styled } from '@mui/material/styles';
+import { styled } from '@mui/system';
 import { unstable_composeClasses as composeClasses } from '@mui/utils';
 import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
 import { getDataGridUtilityClass } from '../../constants/gridClasses';
@@ -31,13 +31,11 @@ var GridVirtualScrollerRenderZone = /*#__PURE__*/React.forwardRef(function GridV
   var className = props.className,
     other = _objectWithoutProperties(props, _excluded);
   var rootProps = useGridRootProps();
-  var ownerState = {
-    classes: rootProps.classes
-  };
-  var classes = useUtilityClasses(ownerState);
+  var classes = useUtilityClasses(rootProps);
   return /*#__PURE__*/_jsx(VirtualScrollerRenderZoneRoot, _extends({
     ref: ref,
-    className: clsx(classes.root, className)
+    className: clsx(classes.root, className),
+    ownerState: rootProps
   }, other));
 });
 export { GridVirtualScrollerRenderZone };

package/legacy/constants/defaultGridSlotsComponents.js

@@ -1,64 +1,15 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
-import MUICheckbox from '@mui/material/Checkbox';
-import MUITextField from '@mui/material/TextField';
-import MUIFormControl from '@mui/material/FormControl';
-import MUISelect from '@mui/material/Select';
-import MUISwitch from '@mui/material/Switch';
-import MUIButton from '@mui/material/Button';
-import MUIIconButton from '@mui/material/IconButton';
-import MUITooltip from '@mui/material/Tooltip';
-import MUIPopper from '@mui/material/Popper';
-import { GridArrowDownwardIcon, GridArrowUpwardIcon, GridCell, GridSkeletonCell, GridCheckIcon, GridCloseIcon, GridColumnIcon, GridColumnsPanel, GridFilterAltIcon, GridFilterListIcon, GridFilterPanel, GridFooter, GridLoadingOverlay, GridNoRowsOverlay, GridPagination, GridPanel, GridPreferencesPanel, GridRow, GridSaveAltIcon, GridSeparatorIcon, GridTableRowsIcon, GridTripleDotsVerticalIcon, GridViewHeadlineIcon, GridViewStreamIcon, GridMoreVertIcon, GridExpandMoreIcon, GridKeyboardArrowRight, GridAddIcon, GridRemoveIcon, GridDragIcon, GridColumnHeaderFilterIconButton, GridSearchIcon, GridVisibilityOffIcon, GridViewColumnIcon, GridClearIcon } from '../components';
+import { GridCell, GridSkeletonCell, GridColumnsPanel, GridFilterPanel, GridFooter, GridLoadingOverlay, GridNoRowsOverlay, GridPagination, GridPanel, GridPreferencesPanel, GridRow, GridColumnHeaderFilterIconButton } from '../components';
+import { GridColumnHeaders } from '../components/GridColumnHeaders';
 import { GridColumnMenu } from '../components/menu/columnMenu/GridColumnMenu';
-import { GridColumnUnsortedIcon } from '../components/columnHeaders/GridColumnUnsortedIcon';
 import { GridNoResultsOverlay } from '../components/GridNoResultsOverlay';
-var DEFAULT_GRID_ICON_SLOTS_COMPONENTS = {
-  BooleanCellTrueIcon: GridCheckIcon,
-  BooleanCellFalseIcon: GridCloseIcon,
-  ColumnMenuIcon: GridTripleDotsVerticalIcon,
-  OpenFilterButtonIcon: GridFilterListIcon,
-  FilterPanelDeleteIcon: GridCloseIcon,
-  ColumnFilteredIcon: GridFilterAltIcon,
-  ColumnSelectorIcon: GridColumnIcon,
-  ColumnUnsortedIcon: GridColumnUnsortedIcon,
-  ColumnSortedAscendingIcon: GridArrowUpwardIcon,
-  ColumnSortedDescendingIcon: GridArrowDownwardIcon,
-  ColumnResizeIcon: GridSeparatorIcon,
-  DensityCompactIcon: GridViewHeadlineIcon,
-  DensityStandardIcon: GridTableRowsIcon,
-  DensityComfortableIcon: GridViewStreamIcon,
-  ExportIcon: GridSaveAltIcon,
-  MoreActionsIcon: GridMoreVertIcon,
-  TreeDataCollapseIcon: GridExpandMoreIcon,
-  TreeDataExpandIcon: GridKeyboardArrowRight,
-  GroupingCriteriaCollapseIcon: GridExpandMoreIcon,
-  GroupingCriteriaExpandIcon: GridKeyboardArrowRight,
-  DetailPanelExpandIcon: GridAddIcon,
-  DetailPanelCollapseIcon: GridRemoveIcon,
-  RowReorderIcon: GridDragIcon,
-  QuickFilterIcon: GridSearchIcon,
-  QuickFilterClearIcon: GridCloseIcon,
-  ColumnMenuHideIcon: GridVisibilityOffIcon,
-  ColumnMenuSortAscendingIcon: GridArrowUpwardIcon,
-  ColumnMenuSortDescendingIcon: GridArrowDownwardIcon,
-  ColumnMenuFilterIcon: GridFilterAltIcon,
-  ColumnMenuManageColumnsIcon: GridViewColumnIcon,
-  ColumnMenuClearIcon: GridClearIcon
-};
-export var DATA_GRID_DEFAULT_SLOTS_COMPONENTS = _extends({}, DEFAULT_GRID_ICON_SLOTS_COMPONENTS, {
-  BaseCheckbox: MUICheckbox,
-  BaseTextField: MUITextField,
-  BaseFormControl: MUIFormControl,
-  BaseSelect: MUISelect,
-  BaseSwitch: MUISwitch,
-  BaseButton: MUIButton,
-  BaseIconButton: MUIIconButton,
-  BaseTooltip: MUITooltip,
-  BasePopper: MUIPopper,
+import materialSlots from '../material';
+export var DATA_GRID_DEFAULT_SLOTS_COMPONENTS = _extends({}, materialSlots, {
   Cell: GridCell,
   SkeletonCell: GridSkeletonCell,
   ColumnHeaderFilterIconButton: GridColumnHeaderFilterIconButton,
   ColumnMenu: GridColumnMenu,
+  ColumnHeaders: GridColumnHeaders,
   Footer: GridFooter,
   Toolbar: null,
   PreferencesPanel: GridPreferencesPanel,

package/legacy/constants/localeTextConstants.js

@@ -37,6 +37,7 @@ export var GRID_DEFAULT_LOCALE_TEXT = {
   columnsPanelHideAllButton: 'Hide all',
   // Filter panel text
   filterPanelAddFilter: 'Add filter',
+  filterPanelRemoveAll: 'Remove all',
   filterPanelDeleteIconLabel: 'Delete',
   filterPanelLogicOperator: 'Logic operator',
   filterPanelOperator: 'Operator',

package/legacy/hooks/core/useGridLocaleText.js

@@ -1,5 +1,4 @@
 import * as React from 'react';
-import { useGridApiMethod } from '../utils/useGridApiMethod';
 export var useGridLocaleText = function useGridLocaleText(apiRef, props) {
   var getLocaleText = React.useCallback(function (key) {
     if (props.localeText[key] == null) {
@@ -7,8 +6,7 @@ export var useGridLocaleText = function useGridLocaleText(apiRef, props) {
     }
     return props.localeText[key];
   }, [props.localeText]);
-  var localeTextApi = {
+  apiRef.current.register('public', {
     getLocaleText: getLocaleText
-  };
-  useGridApiMethod(apiRef, localeTextApi, 'public');
+  });
 };

package/legacy/hooks/features/columnHeaders/useGridColumnHeaders.js

@@ -3,16 +3,9 @@ import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import * as React from 'react';
 import * as ReactDOM from 'react-dom';
 import { unstable_useForkRef as useForkRef } from '@mui/utils';
-import { styled, useTheme } from '@mui/material/styles';
+import { styled, useTheme } from '@mui/system';
 import { defaultMemoize } from 'reselect';
 import { useGridPrivateApiContext } from '../../utils/useGridPrivateApiContext';
-import { useGridSelector } from '../../utils/useGridSelector';
-import { gridVisibleColumnDefinitionsSelector, gridColumnPositionsSelector, gridColumnVisibilityModelSelector } from '../columns/gridColumnsSelector';
-import { gridTabIndexColumnHeaderSelector, gridTabIndexCellSelector, gridFocusColumnHeaderSelector, unstable_gridFocusColumnGroupHeaderSelector, unstable_gridTabIndexColumnGroupHeaderSelector } from '../focus/gridFocusStateSelector';
-import { gridDensityFactorSelector } from '../density/densitySelector';
-import { gridFilterActiveItemsLookupSelector } from '../filter/gridFilterSelector';
-import { gridSortColumnLookupSelector } from '../sorting/gridSortingSelector';
-import { gridColumnMenuSelector } from '../columnMenu/columnMenuSelector';
 import { useGridRootProps } from '../../utils/useGridRootProps';
 import { useGridApiEventHandler } from '../../utils/useGridApiEventHandler';
 import { GridColumnHeaderItem } from '../../../components/columnHeaders/GridColumnHeaderItem';
@@ -20,7 +13,6 @@ import { getFirstColumnIndexToRender, getTotalHeaderHeight } from '../columns/gr
 import { useGridVisibleRows } from '../../utils/useGridVisibleRows';
 import { getRenderableIndexes } from '../virtualization/useGridVirtualScroller';
 import { GridColumnGroupHeader } from '../../../components/columnHeaders/GridColumnGroupHeader';
-import { gridColumnGroupsHeaderMaxDepthSelector, gridColumnGroupsHeaderStructureSelector } from '../columnGrouping/gridColumnGroupsSelector';
 import { jsx as _jsx } from "react/jsx-runtime";
 var GridColumnHeaderRow = styled('div', {
   name: 'MuiDataGrid',
@@ -39,7 +31,21 @@ function isUIEvent(event) {
 export var useGridColumnHeaders = function useGridColumnHeaders(props) {
   var innerRefProp = props.innerRef,
     _props$minColumnIndex = props.minColumnIndex,
-    minColumnIndex = _props$minColumnIndex === void 0 ? 0 : _props$minColumnIndex;
+    minColumnIndex = _props$minColumnIndex === void 0 ? 0 : _props$minColumnIndex,
+    visibleColumns = props.visibleColumns,
+    sortColumnLookup = props.sortColumnLookup,
+    filterColumnLookup = props.filterColumnLookup,
+    columnPositions = props.columnPositions,
+    columnHeaderTabIndexState = props.columnHeaderTabIndexState,
+    columnGroupHeaderTabIndexState = props.columnGroupHeaderTabIndexState,
+    columnHeaderFocus = props.columnHeaderFocus,
+    columnGroupHeaderFocus = props.columnGroupHeaderFocus,
+    densityFactor = props.densityFactor,
+    headerGroupingMaxDepth = props.headerGroupingMaxDepth,
+    columnMenuState = props.columnMenuState,
+    columnVisibility = props.columnVisibility,
+    columnGroupsHeaderStructure = props.columnGroupsHeaderStructure,
+    hasOtherElementInTabSequence = props.hasOtherElementInTabSequence;
   var theme = useTheme();
   var _React$useState = React.useState(''),
     _React$useState2 = _slicedToArray(_React$useState, 2),
@@ -50,20 +56,6 @@ export var useGridColumnHeaders = function useGridColumnHeaders(props) {
     resizeCol = _React$useState4[0],
     setResizeCol = _React$useState4[1];
   var apiRef = useGridPrivateApiContext();
-  var visibleColumns = useGridSelector(apiRef, gridVisibleColumnDefinitionsSelector);
-  var columnPositions = useGridSelector(apiRef, gridColumnPositionsSelector);
-  var columnHeaderTabIndexState = useGridSelector(apiRef, gridTabIndexColumnHeaderSelector);
-  var cellTabIndexState = useGridSelector(apiRef, gridTabIndexCellSelector);
-  var columnGroupHeaderTabIndexState = useGridSelector(apiRef, unstable_gridTabIndexColumnGroupHeaderSelector);
-  var columnHeaderFocus = useGridSelector(apiRef, gridFocusColumnHeaderSelector);
-  var columnGroupHeaderFocus = useGridSelector(apiRef, unstable_gridFocusColumnGroupHeaderSelector);
-  var densityFactor = useGridSelector(apiRef, gridDensityFactorSelector);
-  var headerGroupingMaxDepth = useGridSelector(apiRef, gridColumnGroupsHeaderMaxDepthSelector);
-  var filterColumnLookup = useGridSelector(apiRef, gridFilterActiveItemsLookupSelector);
-  var sortColumnLookup = useGridSelector(apiRef, gridSortColumnLookupSelector);
-  var columnMenuState = useGridSelector(apiRef, gridColumnMenuSelector);
-  var columnVisibility = useGridSelector(apiRef, gridColumnVisibilityModelSelector);
-  var columnGroupsHeaderStructure = useGridSelector(apiRef, gridColumnGroupsHeaderStructureSelector);
   var rootProps = useGridRootProps();
   var innerRef = React.useRef(null);
   var handleInnerRef = useForkRef(innerRefProp, innerRef);
@@ -231,8 +223,7 @@ export var useGridColumnHeaders = function useGridColumnHeaders(props) {
       var colDef = renderedColumns[i];
       var columnIndex = firstColumnToRender + i;
       var isFirstColumn = columnIndex === 0;
-      var hasTabbableElement = !(columnGroupHeaderTabIndexState === null && columnHeaderTabIndexState === null && cellTabIndexState === null);
-      var tabIndex = columnHeaderTabIndexState !== null && columnHeaderTabIndexState.field === colDef.field || isFirstColumn && !hasTabbableElement ? 0 : -1;
+      var tabIndex = columnHeaderTabIndexState !== null && columnHeaderTabIndexState.field === colDef.field || isFirstColumn && !hasOtherElementInTabSequence ? 0 : -1;
       var hasFocus = columnHeaderFocus !== null && columnHeaderFocus.field === colDef.field;
       var open = columnMenuState.open && columnMenuState.field === colDef.field;
       columns.push( /*#__PURE__*/_jsx(GridColumnHeaderItem, _extends({}, sortColumnLookup[colDef.field], {
@@ -250,6 +241,7 @@ export var useGridColumnHeaders = function useGridColumnHeaders(props) {
     return /*#__PURE__*/_jsx(GridColumnHeaderRow, {
       role: "row",
       "aria-rowindex": headerGroupingMaxDepth + 1,
+      ownerState: rootProps,
       children: columns
     });
   };
@@ -329,6 +321,7 @@ export var useGridColumnHeaders = function useGridColumnHeaders(props) {
         },
         role: "row",
         "aria-rowindex": depthIndex + 1,
+        ownerState: rootProps,
         children: depthInfo.elements.map(function (_ref3, groupIndex) {
           var groupId = _ref3.groupId,
             width = _ref3.width,

package/legacy/hooks/features/columns/useGridColumns.js

@@ -33,7 +33,7 @@ export var columnsStateInitializer = function columnsStateInitializer(state, pro
  * TODO: Impossible priority - useGridParamsApi also needs to be after useGridColumns
  */
 export function useGridColumns(apiRef, props) {
-  var _props$initialState4, _props$componentsProp2;
+  var _props$initialState4, _props$slotProps2;
   var logger = useGridLogger(apiRef, 'useGridColumns');
   var columnTypes = defaultColumnTypes;
   var previousColumnsProp = React.useRef(props.columns);
@@ -235,12 +235,12 @@ export function useGridColumns(apiRef, props) {
   }, [apiRef, columnTypes]);
   var preferencePanelPreProcessing = React.useCallback(function (initialValue, value) {
     if (value === GridPreferencePanelsValue.columns) {
-      var _props$componentsProp;
-      var ColumnsPanel = props.components.ColumnsPanel;
-      return /*#__PURE__*/_jsx(ColumnsPanel, _extends({}, (_props$componentsProp = props.componentsProps) == null ? void 0 : _props$componentsProp.columnsPanel));
+      var _props$slotProps;
+      var ColumnsPanel = props.slots.columnsPanel;
+      return /*#__PURE__*/_jsx(ColumnsPanel, _extends({}, (_props$slotProps = props.slotProps) == null ? void 0 : _props$slotProps.columnsPanel));
     }
     return initialValue;
-  }, [props.components.ColumnsPanel, (_props$componentsProp2 = props.componentsProps) == null ? void 0 : _props$componentsProp2.columnsPanel]);
+  }, [props.slots.columnsPanel, (_props$slotProps2 = props.slotProps) == null ? void 0 : _props$slotProps2.columnsPanel]);
   var addColumnMenuItems = React.useCallback(function (columnMenuItems) {
     if (props.disableColumnSelector) {
       return columnMenuItems;

package/legacy/hooks/features/filter/useGridFilter.js

@@ -33,7 +33,7 @@ export var filterStateInitializer = function filterStateInitializer(state, props
  * @requires useGridRows (event)
  */
 export var useGridFilter = function useGridFilter(apiRef, props) {
-  var _props$initialState3, _props$initialState3$, _props$componentsProp2;
+  var _props$initialState3, _props$initialState3$, _props$slotProps2;
   var logger = useGridLogger(apiRef, 'useGridFilter');
   apiRef.current.registerControlState({
     stateId: 'filter',
@@ -241,12 +241,12 @@ export var useGridFilter = function useGridFilter(apiRef, props) {
   }, [apiRef, props.disableMultipleColumnsFiltering]);
   var preferencePanelPreProcessing = React.useCallback(function (initialValue, value) {
     if (value === GridPreferencePanelsValue.filters) {
-      var _props$componentsProp;
-      var FilterPanel = props.components.FilterPanel;
-      return /*#__PURE__*/_jsx(FilterPanel, _extends({}, (_props$componentsProp = props.componentsProps) == null ? void 0 : _props$componentsProp.filterPanel));
+      var _props$slotProps;
+      var FilterPanel = props.slots.filterPanel;
+      return /*#__PURE__*/_jsx(FilterPanel, _extends({}, (_props$slotProps = props.slotProps) == null ? void 0 : _props$slotProps.filterPanel));
     }
     return initialValue;
-  }, [props.components.FilterPanel, (_props$componentsProp2 = props.componentsProps) == null ? void 0 : _props$componentsProp2.filterPanel]);
+  }, [props.slots.filterPanel, (_props$slotProps2 = props.slotProps) == null ? void 0 : _props$slotProps2.filterPanel]);
   var flatFilteringMethod = React.useCallback(function (params) {
     if (props.filterMode === 'client' && params.isRowMatchingFilters) {
       var tree = gridRowTreeSelector(apiRef);

package/legacy/hooks/features/virtualization/useGridVirtualScroller.js

@@ -8,12 +8,12 @@ import * as React from 'react';
 import * as ReactDOM from 'react-dom';
 import { unstable_useForkRef as useForkRef, unstable_useEnhancedEffect as useEnhancedEffect } from '@mui/utils';
 import { useTheme } from '@mui/material/styles';
+import { defaultMemoize } from 'reselect';
 import { useGridPrivateApiContext } from '../../utils/useGridPrivateApiContext';
 import { useGridRootProps } from '../../utils/useGridRootProps';
 import { useGridSelector } from '../../utils/useGridSelector';
 import { gridVisibleColumnDefinitionsSelector, gridColumnsTotalWidthSelector, gridColumnPositionsSelector } from '../columns/gridColumnsSelector';
 import { gridFocusCellSelector, gridTabIndexCellSelector } from '../focus/gridFocusStateSelector';
-import { gridEditRowsStateSelector } from '../editing/gridEditingSelectors';
 import { useGridVisibleRows } from '../../utils/useGridVisibleRows';
 import { useGridApiEventHandler } from '../../utils/useGridApiEventHandler';
 import { clamp } from '../../../utils/utils';
@@ -21,9 +21,8 @@ import { selectedIdsLookupSelector } from '../rowSelection/gridRowSelectionSelec
 import { gridRowsMetaSelector } from '../rows/gridRowsMetaSelector';
 import { getFirstNonSpannedColumnToRender } from '../columns/gridColumnsUtils';
 import { getMinimalContentHeight } from '../rows/gridRowsUtils';
-
-// Uses binary search to avoid looping through all possible positions
 import { jsx as _jsx } from "react/jsx-runtime";
+// Uses binary search to avoid looping through all possible positions
 export function binarySearch(offset, positions) {
   var sliceStart = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 0;
   var sliceEnd = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : positions.length;
@@ -78,7 +77,6 @@ export var useGridVirtualScroller = function useGridVirtualScroller(props) {
   var cellFocus = useGridSelector(apiRef, gridFocusCellSelector);
   var cellTabIndex = useGridSelector(apiRef, gridTabIndexCellSelector);
   var rowsMeta = useGridSelector(apiRef, gridRowsMetaSelector);
-  var editRowsState = useGridSelector(apiRef, gridEditRowsStateSelector);
   var selectedRowsLookup = useGridSelector(apiRef, selectedIdsLookupSelector);
   var currentPage = useGridVisibleRows(apiRef, rootProps);
   var renderZoneRef = React.useRef(null);
@@ -101,6 +99,12 @@ export var useGridVirtualScroller = function useGridVirtualScroller(props) {
     containerDimensions = _React$useState4[0],
     setContainerDimensions = _React$useState4[1];
   var prevTotalWidth = React.useRef(columnsTotalWidth);
+  var rowStyleCache = React.useRef({});
+  var prevGetRowProps = React.useRef();
+  var prevRootRowStyle = React.useRef();
+  var getRenderedColumnsRef = React.useRef(defaultMemoize(function (columns, firstColumnToRender, lastColumnToRender) {
+    return columns.slice(firstColumnToRender, lastColumnToRender);
+  }));
   var getNearestIndexToRender = React.useCallback(function (offset) {
     var _currentPage$range, _currentPage$range2;
     var lastMeasuredIndexRelativeToAllRows = apiRef.current.getLastMeasuredRowIndex();
@@ -315,6 +319,7 @@ export var useGridVirtualScroller = function useGridVirtualScroller(props) {
     apiRef.current.publishEvent('virtualScrollerTouchMove', {}, event);
   };
   var getRows = function getRows() {
+    var _rootProps$slotProps;
     var params = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {
       renderContext: renderContext
     };
@@ -387,10 +392,17 @@ export var useGridVirtualScroller = function useGridVirtualScroller(props) {
       lastRowToRender: lastRowToRender,
       visibleRows: currentPage.rows
     });
-    var renderedColumns = visibleColumns.slice(firstColumnToRender, lastColumnToRender);
+    var renderedColumns = getRenderedColumnsRef.current(visibleColumns, firstColumnToRender, lastColumnToRender);
+    var _ref4 = ((_rootProps$slotProps = rootProps.slotProps) == null ? void 0 : _rootProps$slotProps.row) || {},
+      rootRowStyle = _ref4.style,
+      rootRowProps = _objectWithoutProperties(_ref4, _excluded);
+    var invalidatesCachedRowStyle = prevGetRowProps.current !== getRowProps || prevRootRowStyle.current !== rootRowStyle;
+    if (invalidatesCachedRowStyle) {
+      rowStyleCache.current = {};
+    }
     var rows = [];
     for (var i = 0; i < renderedRows.length; i += 1) {
-      var _rootProps$components, _currentPage$range5;
+      var _currentPage$range5;
       var _renderedRows$i = renderedRows[i],
         _id = _renderedRows$i.id,
         _model = _renderedRows$i.model;
@@ -402,22 +414,25 @@ export var useGridVirtualScroller = function useGridVirtualScroller(props) {
       } else {
         isSelected = apiRef.current.isRowSelectable(_id);
       }
-      var _ref4 = ((_rootProps$components = rootProps.componentsProps) == null ? void 0 : _rootProps$components.row) || {},
-        rootRowStyle = _ref4.style,
-        rootRowProps = _objectWithoutProperties(_ref4, _excluded);
+      var focusedCell = cellFocus !== null && cellFocus.id === _id ? cellFocus.field : null;
+      var tabbableCell = null;
+      if (cellTabIndex !== null && cellTabIndex.id === _id) {
+        var cellParams = apiRef.current.getCellParams(_id, cellTabIndex.field);
+        tabbableCell = cellParams.cellMode === 'view' ? cellTabIndex.field : null;
+      }
       var _ref5 = typeof getRowProps === 'function' && getRowProps(_id, _model) || {},
         rowStyle = _ref5.style,
         rowProps = _objectWithoutProperties(_ref5, _excluded2);
-      rows.push( /*#__PURE__*/_jsx(rootProps.components.Row, _extends({
+      if (!rowStyleCache.current[_id]) {
+        var style = _extends({}, rowStyle, rootRowStyle);
+        rowStyleCache.current[_id] = style;
+      }
+      rows.push( /*#__PURE__*/_jsx(rootProps.slots.row, _extends({
         row: _model,
         rowId: _id,
         rowHeight: baseRowHeight,
-        cellFocus: cellFocus // TODO move to inside the row
-        ,
-        cellTabIndex: cellTabIndex // TODO move to inside the row
-        ,
-        editRowsState: editRowsState // TODO move to inside the row
-        ,
+        focusedCell: focusedCell,
+        tabbableCell: tabbableCell,
         renderedColumns: renderedColumns,
         visibleColumns: visibleColumns,
         firstColumnToRender: firstColumnToRender,
@@ -428,9 +443,11 @@ export var useGridVirtualScroller = function useGridVirtualScroller(props) {
         isLastVisible: lastVisibleRowIndex,
         position: position
       }, rowProps, rootRowProps, {
-        style: _extends({}, rowStyle, rootRowStyle)
+        style: rowStyleCache.current[_id]
       }), _id));
     }
+    prevGetRowProps.current = getRowProps;
+    prevRootRowStyle.current = rootRowStyle;
     return rows;
   };
   var needsHorizontalScrollbar = containerDimensions.width && columnsTotalWidth > containerDimensions.width;

package/legacy/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-data-grid v6.0.0-beta.4
+ * @mui/x-data-grid v6.0.0
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the
@@ -17,6 +17,8 @@ export * from './models';
 export * from './context';
 export * from './colDef';
 export * from './utils';
+export { GridColumnHeaders } from './components/GridColumnHeaders';
+
 /**
  * Reexportable components.
  */
@@ -24,4 +26,6 @@ export { GridColumnMenu, GRID_COLUMN_MENU_COMPONENTS, GRID_COLUMN_MENU_COMPONENT
 
 /**
  * The full grid API.
+ * @demos
+ *   - [API object](/x/react-data-grid/api-object/)
  */

package/legacy/internals/index.js

@@ -1,7 +1,7 @@
 export { GridVirtualScroller } from '../components/virtualization/GridVirtualScroller';
 export { GridVirtualScrollerContent } from '../components/virtualization/GridVirtualScrollerContent';
 export { GridVirtualScrollerRenderZone } from '../components/virtualization/GridVirtualScrollerRenderZone';
-export { GridColumnHeaders } from '../components/columnHeaders/GridColumnHeaders';
+export { GridBaseColumnHeaders } from '../components/columnHeaders/GridBaseColumnHeaders';
 export { GridColumnHeadersInner } from '../components/columnHeaders/GridColumnHeadersInner';
 export { DATA_GRID_DEFAULT_SLOTS_COMPONENTS } from '../constants/defaultGridSlotsComponents';
 export { useGridRegisterPipeProcessor } from '../hooks/core/pipeProcessing';
@@ -50,4 +50,5 @@ export { isNavigationKey } from '../utils/keyboardUtils';
 export { clamp, isDeepEqual, isNumber, isFunction, isObject } from '../utils/utils';
 export { buildWarning } from '../utils/warning';
 export { exportAs } from '../utils/exportAs';
-export { useGridPrivateApiContext } from '../hooks/utils/useGridPrivateApiContext';
+export { useGridPrivateApiContext } from '../hooks/utils/useGridPrivateApiContext';
+export * from './utils';

package/legacy/internals/utils/computeSlots.js

@@ -0,0 +1,16 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import { uncapitalizeObjectKeys } from './slotsMigration';
+
+// TODO v7: Remove `components` and usages of `UncapitalizeObjectKeys` type
+// after converting keys in Grid(Pro|Premium)SlotsComponent to camelCase.
+// https://github.com/mui/mui-x/issues/7940
+export function computeSlots(_ref) {
+  var defaultSlots = _ref.defaultSlots,
+    slots = _ref.slots,
+    components = _ref.components;
+  var overrides = slots != null ? slots : components ? uncapitalizeObjectKeys(components) : null;
+  if (!overrides || Object.keys(overrides).length === 0) {
+    return defaultSlots;
+  }
+  return _extends({}, defaultSlots, overrides);
+}

package/legacy/internals/utils/index.js

@@ -0,0 +1,2 @@
+export * from './computeSlots';
+export * from './slotsMigration';

package/legacy/internals/utils/slotsMigration.js

@@ -0,0 +1,14 @@
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import _extends from "@babel/runtime/helpers/esm/extends";
+// TODO v7: This file exist only to simplify typing between
+// components/componentsProps and slots/slotProps
+// Should be deleted when components/componentsProps are removed
+
+export var uncapitalizeObjectKeys = function uncapitalizeObjectKeys(capitalizedObject) {
+  if (capitalizedObject === undefined) {
+    return undefined;
+  }
+  return Object.keys(capitalizedObject).reduce(function (acc, key) {
+    return _extends({}, acc, _defineProperty({}, "".concat(key.charAt(0).toLowerCase()).concat(key.slice(1)), capitalizedObject[key]));
+  }, {});
+};

package/legacy/locales/arSD.js

@@ -22,17 +22,15 @@ var arSDGrid = {
     return count !== 1 ? "".concat(count, " \u0645\u0646 \u0627\u0644\u0645\u0631\u0634\u0650\u062D\u0627\u062A \u0627\u0644\u0646\u0634\u0637\u0629") : "\u0645\u0631\u0634\u0650\u062D \u0646\u0634\u0637";
   },
   // Quick filter toolbar field
-  // toolbarQuickFilterPlaceholder: 'Search…',
-  // toolbarQuickFilterLabel: 'Search',
-  // toolbarQuickFilterDeleteIconLabel: 'Clear',
-
+  toolbarQuickFilterPlaceholder: 'بحث...',
+  toolbarQuickFilterLabel: 'بحث',
+  toolbarQuickFilterDeleteIconLabel: 'أزال',
   // Export selector toolbar button text
   toolbarExport: 'تصدير',
   toolbarExportLabel: 'تصدير',
   toolbarExportCSV: 'تنزيل كملف CSV',
-  // toolbarExportPrint: 'Print',
-  // toolbarExportExcel: 'Download as Excel',
-
+  toolbarExportPrint: 'طباعة',
+  toolbarExportExcel: 'تحميل كملف الإكسل',
   // Columns panel text
   columnsPanelTextFieldLabel: 'البحث عن العمود',
   columnsPanelTextFieldPlaceholder: 'عنوان العمود',
@@ -41,6 +39,7 @@ var arSDGrid = {
   columnsPanelHideAllButton: 'إخفاء الكل',
   // Filter panel text
   filterPanelAddFilter: 'إضافة مرشِح',
+  // filterPanelRemoveAll: 'Remove all',
   filterPanelDeleteIconLabel: 'حذف',
   filterPanelLogicOperator: 'عامل منطقي',
   filterPanelOperator: 'عامل',
@@ -120,20 +119,17 @@ var arSDGrid = {
     return "\u0625\u064A\u0642\u0627\u0641 \u0627\u0644\u062A\u062C\u0645\u064A\u0639 \u062D\u0633\u0628 ".concat(name);
   },
   // Master/detail
-  // detailPanelToggle: 'Detail panel toggle',
+  detailPanelToggle: 'اظهار/اخفاء لوحة التفاصيل',
   expandDetailPanel: 'توسيع',
-  collapseDetailPanel: 'طوي'
-
+  collapseDetailPanel: 'طوي',
   // Row reordering text
-  // rowReorderingHeaderName: 'Row reordering',
-
+  rowReorderingHeaderName: 'أعادة ترتيب الصفوف',
   // Aggregation
-  // aggregationMenuItemHeader: 'Aggregation',
-  // aggregationFunctionLabelSum: 'sum',
-  // aggregationFunctionLabelAvg: 'avg',
-  // aggregationFunctionLabelMin: 'min',
-  // aggregationFunctionLabelMax: 'max',
-  // aggregationFunctionLabelSize: 'size',
+  aggregationMenuItemHeader: 'الدلالات الحسابية',
+  aggregationFunctionLabelSum: 'مجموع',
+  aggregationFunctionLabelAvg: 'معدل',
+  aggregationFunctionLabelMin: 'الحد الادنى',
+  aggregationFunctionLabelMax: 'الحد الاقصى',
+  aggregationFunctionLabelSize: 'الحجم'
 };
-
 export var arSD = getGridLocalization(arSDGrid, arSDCore);

package/legacy/locales/beBY.js

@@ -53,6 +53,7 @@ var beBYGrid = {
   columnsPanelHideAllButton: 'Схаваць усе',
   // Filter panel text
   filterPanelAddFilter: 'Дадаць фільтр',
+  // filterPanelRemoveAll: 'Remove all',
   filterPanelDeleteIconLabel: 'Выдаліць',
   filterPanelLogicOperator: 'Лагічныя аператары',
   filterPanelOperator: 'Аператары',

package/legacy/locales/bgBG.js

@@ -41,6 +41,7 @@ var bgBGGrid = {
   columnsPanelHideAllButton: 'Скрий Всички',
   // Filter panel text
   filterPanelAddFilter: 'Добави Филтър',
+  // filterPanelRemoveAll: 'Remove all',
   filterPanelDeleteIconLabel: 'Изтрий',
   // filterPanelLogicOperator: 'Logic operator',
   filterPanelOperator: 'Оператори',