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

package/modern/components/virtualization/GridVirtualScroller.js

@@ -3,7 +3,7 @@ import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWith
 const _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';
@@ -36,13 +36,11 @@ const GridVirtualScroller = /*#__PURE__*/React.forwardRef(function GridVirtualSc
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
   const rootProps = useGridRootProps();
-  const ownerState = {
-    classes: rootProps.classes
-  };
-  const classes = useUtilityClasses(ownerState);
+  const classes = useUtilityClasses(rootProps);
   return /*#__PURE__*/_jsx(VirtualScrollerRoot, _extends({
     ref: ref,
-    className: clsx(classes.root, className)
+    className: clsx(classes.root, className),
+    ownerState: rootProps
   }, other));
 });
 export { GridVirtualScroller };

package/modern/components/virtualization/GridVirtualScrollerContent.js

@@ -3,7 +3,7 @@ import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWith
 const _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';
@@ -30,14 +30,14 @@ const GridVirtualScrollerContent = /*#__PURE__*/React.forwardRef(function GridVi
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
   const rootProps = useGridRootProps();
-  const ownerState = {
-    classes: rootProps.classes,
+  const ownerState = _extends({}, rootProps, {
     overflowedContent: !rootProps.autoHeight && style?.minHeight === 'auto'
-  };
+  });
   const classes = useUtilityClasses(ownerState);
   return /*#__PURE__*/_jsx(VirtualScrollerContentRoot, _extends({
     ref: ref,
     className: clsx(classes.root, className),
+    ownerState: ownerState,
     style: style
   }, other));
 });

package/modern/components/virtualization/GridVirtualScrollerRenderZone.js

@@ -3,7 +3,7 @@ import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWith
 const _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';
@@ -33,13 +33,11 @@ const GridVirtualScrollerRenderZone = /*#__PURE__*/React.forwardRef(function Gri
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
   const rootProps = useGridRootProps();
-  const ownerState = {
-    classes: rootProps.classes
-  };
-  const classes = useUtilityClasses(ownerState);
+  const 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/modern/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';
-const 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 const 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 const DATA_GRID_DEFAULT_SLOTS_COMPONENTS = _extends({}, materialSlots, {
   Cell: GridCell,
   SkeletonCell: GridSkeletonCell,
   ColumnHeaderFilterIconButton: GridColumnHeaderFilterIconButton,
   ColumnMenu: GridColumnMenu,
+  ColumnHeaders: GridColumnHeaders,
   Footer: GridFooter,
   Toolbar: null,
   PreferencesPanel: GridPreferencesPanel,

package/modern/constants/localeTextConstants.js

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

package/modern/hooks/core/useGridLocaleText.js

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

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

@@ -2,16 +2,9 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 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';
@@ -19,7 +12,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";
 const GridColumnHeaderRow = styled('div', {
   name: 'MuiDataGrid',
@@ -34,26 +26,26 @@ function isUIEvent(event) {
 export const useGridColumnHeaders = props => {
   const {
     innerRef: innerRefProp,
-    minColumnIndex = 0
+    minColumnIndex = 0,
+    visibleColumns,
+    sortColumnLookup,
+    filterColumnLookup,
+    columnPositions,
+    columnHeaderTabIndexState,
+    columnGroupHeaderTabIndexState,
+    columnHeaderFocus,
+    columnGroupHeaderFocus,
+    densityFactor,
+    headerGroupingMaxDepth,
+    columnMenuState,
+    columnVisibility,
+    columnGroupsHeaderStructure,
+    hasOtherElementInTabSequence
   } = props;
   const theme = useTheme();
   const [dragCol, setDragCol] = React.useState('');
   const [resizeCol, setResizeCol] = React.useState('');
   const apiRef = useGridPrivateApiContext();
-  const visibleColumns = useGridSelector(apiRef, gridVisibleColumnDefinitionsSelector);
-  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 filterColumnLookup = useGridSelector(apiRef, gridFilterActiveItemsLookupSelector);
-  const sortColumnLookup = useGridSelector(apiRef, gridSortColumnLookupSelector);
-  const columnMenuState = useGridSelector(apiRef, gridColumnMenuSelector);
-  const columnVisibility = useGridSelector(apiRef, gridColumnVisibilityModelSelector);
-  const columnGroupsHeaderStructure = useGridSelector(apiRef, gridColumnGroupsHeaderStructureSelector);
   const rootProps = useGridRootProps();
   const innerRef = React.useRef(null);
   const handleInnerRef = useForkRef(innerRefProp, innerRef);
@@ -198,8 +190,7 @@ export const useGridColumnHeaders = props => {
       const colDef = renderedColumns[i];
       const columnIndex = firstColumnToRender + i;
       const isFirstColumn = columnIndex === 0;
-      const hasTabbableElement = !(columnGroupHeaderTabIndexState === null && columnHeaderTabIndexState === null && cellTabIndexState === null);
-      const tabIndex = columnHeaderTabIndexState !== null && columnHeaderTabIndexState.field === colDef.field || isFirstColumn && !hasTabbableElement ? 0 : -1;
+      const tabIndex = columnHeaderTabIndexState !== null && columnHeaderTabIndexState.field === colDef.field || isFirstColumn && !hasOtherElementInTabSequence ? 0 : -1;
       const hasFocus = columnHeaderFocus !== null && columnHeaderFocus.field === colDef.field;
       const open = columnMenuState.open && columnMenuState.field === colDef.field;
       columns.push( /*#__PURE__*/_jsx(GridColumnHeaderItem, _extends({}, sortColumnLookup[colDef.field], {
@@ -217,6 +208,7 @@ export const useGridColumnHeaders = props => {
     return /*#__PURE__*/_jsx(GridColumnHeaderRow, {
       role: "row",
       "aria-rowindex": headerGroupingMaxDepth + 1,
+      ownerState: rootProps,
       children: columns
     });
   };
@@ -285,6 +277,7 @@ export const useGridColumnHeaders = props => {
         },
         role: "row",
         "aria-rowindex": depthIndex + 1,
+        ownerState: rootProps,
         children: depthInfo.elements.map(({
           groupId,
           width,

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

@@ -217,11 +217,11 @@ export function useGridColumns(apiRef, props) {
   }, [apiRef, columnTypes]);
   const preferencePanelPreProcessing = React.useCallback((initialValue, value) => {
     if (value === GridPreferencePanelsValue.columns) {
-      const ColumnsPanel = props.components.ColumnsPanel;
-      return /*#__PURE__*/_jsx(ColumnsPanel, _extends({}, props.componentsProps?.columnsPanel));
+      const ColumnsPanel = props.slots.columnsPanel;
+      return /*#__PURE__*/_jsx(ColumnsPanel, _extends({}, props.slotProps?.columnsPanel));
     }
     return initialValue;
-  }, [props.components.ColumnsPanel, props.componentsProps?.columnsPanel]);
+  }, [props.slots.columnsPanel, props.slotProps?.columnsPanel]);
   const addColumnMenuItems = React.useCallback(columnMenuItems => {
     if (props.disableColumnSelector) {
       return columnMenuItems;

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

@@ -225,11 +225,11 @@ export const useGridFilter = (apiRef, props) => {
   }, [apiRef, props.disableMultipleColumnsFiltering]);
   const preferencePanelPreProcessing = React.useCallback((initialValue, value) => {
     if (value === GridPreferencePanelsValue.filters) {
-      const FilterPanel = props.components.FilterPanel;
-      return /*#__PURE__*/_jsx(FilterPanel, _extends({}, props.componentsProps?.filterPanel));
+      const FilterPanel = props.slots.filterPanel;
+      return /*#__PURE__*/_jsx(FilterPanel, _extends({}, props.slotProps?.filterPanel));
     }
     return initialValue;
-  }, [props.components.FilterPanel, props.componentsProps?.filterPanel]);
+  }, [props.slots.filterPanel, props.slotProps?.filterPanel]);
   const flatFilteringMethod = React.useCallback(params => {
     if (props.filterMode === 'client' && params.isRowMatchingFilters) {
       const tree = gridRowTreeSelector(apiRef);

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

@@ -7,12 +7,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';
@@ -20,9 +20,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, sliceStart = 0, sliceEnd = positions.length) {
   if (positions.length <= 0) {
     return -1;
@@ -75,7 +74,6 @@ export const useGridVirtualScroller = props => {
   const cellFocus = useGridSelector(apiRef, gridFocusCellSelector);
   const cellTabIndex = useGridSelector(apiRef, gridTabIndexCellSelector);
   const rowsMeta = useGridSelector(apiRef, gridRowsMetaSelector);
-  const editRowsState = useGridSelector(apiRef, gridEditRowsStateSelector);
   const selectedRowsLookup = useGridSelector(apiRef, selectedIdsLookupSelector);
   const currentPage = useGridVisibleRows(apiRef, rootProps);
   const renderZoneRef = React.useRef(null);
@@ -92,6 +90,12 @@ export const useGridVirtualScroller = props => {
     height: null
   });
   const prevTotalWidth = React.useRef(columnsTotalWidth);
+  const rowStyleCache = React.useRef({});
+  const prevGetRowProps = React.useRef();
+  const prevRootRowStyle = React.useRef();
+  const getRenderedColumnsRef = React.useRef(defaultMemoize((columns, firstColumnToRender, lastColumnToRender) => {
+    return columns.slice(firstColumnToRender, lastColumnToRender);
+  }));
   const getNearestIndexToRender = React.useCallback(offset => {
     const lastMeasuredIndexRelativeToAllRows = apiRef.current.getLastMeasuredRowIndex();
     let allRowsMeasured = lastMeasuredIndexRelativeToAllRows === Infinity;
@@ -359,7 +363,16 @@ export const useGridVirtualScroller = props => {
       lastRowToRender,
       visibleRows: currentPage.rows
     });
-    const renderedColumns = visibleColumns.slice(firstColumnToRender, lastColumnToRender);
+    const renderedColumns = getRenderedColumnsRef.current(visibleColumns, firstColumnToRender, lastColumnToRender);
+    const _ref = rootProps.slotProps?.row || {},
+      {
+        style: rootRowStyle
+      } = _ref,
+      rootRowProps = _objectWithoutPropertiesLoose(_ref, _excluded);
+    const invalidatesCachedRowStyle = prevGetRowProps.current !== getRowProps || prevRootRowStyle.current !== rootRowStyle;
+    if (invalidatesCachedRowStyle) {
+      rowStyleCache.current = {};
+    }
     const rows = [];
     for (let i = 0; i < renderedRows.length; i += 1) {
       const {
@@ -374,26 +387,27 @@ export const useGridVirtualScroller = props => {
       } else {
         isSelected = apiRef.current.isRowSelectable(id);
       }
-      const _ref = rootProps.componentsProps?.row || {},
-        {
-          style: rootRowStyle
-        } = _ref,
-        rootRowProps = _objectWithoutPropertiesLoose(_ref, _excluded);
+      const focusedCell = cellFocus !== null && cellFocus.id === id ? cellFocus.field : null;
+      let tabbableCell = null;
+      if (cellTabIndex !== null && cellTabIndex.id === id) {
+        const cellParams = apiRef.current.getCellParams(id, cellTabIndex.field);
+        tabbableCell = cellParams.cellMode === 'view' ? cellTabIndex.field : null;
+      }
       const _ref2 = typeof getRowProps === 'function' && getRowProps(id, model) || {},
         {
           style: rowStyle
         } = _ref2,
         rowProps = _objectWithoutPropertiesLoose(_ref2, _excluded2);
-      rows.push( /*#__PURE__*/_jsx(rootProps.components.Row, _extends({
+      if (!rowStyleCache.current[id]) {
+        const 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,
@@ -404,9 +418,11 @@ export const 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;
   };
   const needsHorizontalScrollbar = containerDimensions.width && columnsTotalWidth > containerDimensions.width;

package/modern/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/modern/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/modern/internals/utils/computeSlots.js

@@ -0,0 +1,17 @@
+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({
+  defaultSlots,
+  slots,
+  components
+}) {
+  const overrides = slots ?? (components ? uncapitalizeObjectKeys(components) : null);
+  if (!overrides || Object.keys(overrides).length === 0) {
+    return defaultSlots;
+  }
+  return _extends({}, defaultSlots, overrides);
+}

package/modern/internals/utils/index.js

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

package/modern/internals/utils/slotsMigration.js

@@ -0,0 +1,13 @@
+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 const uncapitalizeObjectKeys = capitalizedObject => {
+  if (capitalizedObject === undefined) {
+    return undefined;
+  }
+  return Object.keys(capitalizedObject).reduce((acc, key) => _extends({}, acc, {
+    [`${key.charAt(0).toLowerCase()}${key.slice(1)}`]: capitalizedObject[key]
+  }), {});
+};

package/modern/locales/arSD.js

@@ -20,17 +20,15 @@ const arSDGrid = {
   toolbarFiltersTooltipShow: 'اظهر المرشِحات',
   toolbarFiltersTooltipActive: count => count !== 1 ? `${count} من المرشِحات النشطة` : `مرشِح نشط`,
   // 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: 'عنوان العمود',
@@ -39,6 +37,7 @@ const arSDGrid = {
   columnsPanelHideAllButton: 'إخفاء الكل',
   // Filter panel text
   filterPanelAddFilter: 'إضافة مرشِح',
+  // filterPanelRemoveAll: 'Remove all',
   filterPanelDeleteIconLabel: 'حذف',
   filterPanelLogicOperator: 'عامل منطقي',
   filterPanelOperator: 'عامل',
@@ -108,20 +107,17 @@ const arSDGrid = {
   groupColumn: name => `تجميع حسب ${name}`,
   unGroupColumn: name => `إيقاف التجميع حسب ${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 const arSD = getGridLocalization(arSDGrid, arSDCore);

package/modern/locales/beBY.js

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

package/modern/locales/bgBG.js

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