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

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], {

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.slotProps?.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);
+      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.5
+ * @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';

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: 'عنوان العمود',
@@ -109,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/csCZ.js

@@ -28,17 +28,15 @@ const csCZGrid = {
     return `${count} ${pluralForm}`;
   },
   // Quick filter toolbar field
-  // toolbarQuickFilterPlaceholder: 'Search…',
-  // toolbarQuickFilterLabel: 'Search',
-  // toolbarQuickFilterDeleteIconLabel: 'Clear',
-
+  toolbarQuickFilterPlaceholder: 'Vyhledávat…',
+  toolbarQuickFilterLabel: 'Vyhledat',
+  toolbarQuickFilterDeleteIconLabel: 'Vymazat',
   // Export selector toolbar button text
   toolbarExport: 'Export',
   toolbarExportLabel: 'Export',
   toolbarExportCSV: 'Stáhnout jako CSV',
   toolbarExportPrint: 'Vytisknout',
-  // toolbarExportExcel: 'Download as Excel',
-
+  toolbarExportExcel: 'Stáhnout jako Excel',
   // Columns panel text
   columnsPanelTextFieldLabel: 'Najít sloupec',
   columnsPanelTextFieldPlaceholder: 'Název sloupce',
@@ -47,9 +45,9 @@ const csCZGrid = {
   columnsPanelHideAllButton: 'Skrýt vše',
   // Filter panel text
   filterPanelAddFilter: 'Přidat filtr',
-  // filterPanelRemoveAll: 'Remove all',
+  filterPanelRemoveAll: 'Odstranit vše',
   filterPanelDeleteIconLabel: 'Odstranit',
-  // filterPanelLogicOperator: 'Logic operator',
+  filterPanelLogicOperator: 'Logický operátor',
   filterPanelOperator: 'Operátory',
   filterPanelOperatorAnd: 'A',
   filterPanelOperatorOr: 'Nebo',
@@ -69,8 +67,7 @@ const csCZGrid = {
   filterOperatorOnOrBefore: 'je na nebo dříve',
   filterOperatorIsEmpty: 'je prázdný',
   filterOperatorIsNotEmpty: 'není prázdný',
-  // filterOperatorIsAnyOf: 'is any of',
-
+  filterOperatorIsAnyOf: 'je jeden z',
   // Filter values text
   filterValueAny: 'jakýkoliv',
   filterValueTrue: 'ano',
@@ -78,7 +75,7 @@ const csCZGrid = {
   // Column menu text
   columnMenuLabel: 'Menu',
   columnMenuShowColumns: 'Zobrazit sloupce',
-  // columnMenuManageColumns: 'Manage columns',
+  columnMenuManageColumns: 'Spravovat sloupce',
   columnMenuFilter: 'Filtr',
   columnMenuHideColumn: 'Skrýt',
   columnMenuUnsort: 'Zrušit filtry',
@@ -117,11 +114,10 @@ const csCZGrid = {
   },
   // Checkbox selection text
   checkboxSelectionHeaderName: 'Výběr řádku',
-  // checkboxSelectionSelectAllRows: 'Select all rows',
-  // checkboxSelectionUnselectAllRows: 'Unselect all rows',
-  // checkboxSelectionSelectRow: 'Select row',
-  // checkboxSelectionUnselectRow: 'Unselect row',
-
+  checkboxSelectionSelectAllRows: 'Označit všechny řádky',
+  checkboxSelectionUnselectAllRows: 'Odznačit všechny řádky',
+  checkboxSelectionSelectRow: 'Označit řádek',
+  checkboxSelectionUnselectRow: 'Odznačit řádek',
   // Boolean cell text
   booleanCellTrueLabel: 'ano',
   booleanCellFalseLabel: 'ne',
@@ -137,24 +133,20 @@ const csCZGrid = {
   treeDataCollapse: 'skrýt potomky',
   // Grouping columns
   groupingColumnHeaderName: 'Skupina',
-  groupColumn: name => `Zoskupit podle ${name}`,
-  unGroupColumn: name => `Přestat zoskupovat podle ${name}`
-
+  groupColumn: name => `Zeskupit podle ${name}`,
+  unGroupColumn: name => `Přestat zeskupovat podle ${name}`,
   // Master/detail
-  // detailPanelToggle: 'Detail panel toggle',
-  // expandDetailPanel: 'Expand',
-  // collapseDetailPanel: 'Collapse',
-
+  detailPanelToggle: 'Přepnout detail panelu',
+  expandDetailPanel: 'Rozbalit',
+  collapseDetailPanel: 'Sbalit',
   // Row reordering text
-  // rowReorderingHeaderName: 'Row reordering',
-
+  rowReorderingHeaderName: 'Přeuspořádávání řádků',
   // Aggregation
-  // aggregationMenuItemHeader: 'Aggregation',
-  // aggregationFunctionLabelSum: 'sum',
-  // aggregationFunctionLabelAvg: 'avg',
-  // aggregationFunctionLabelMin: 'min',
-  // aggregationFunctionLabelMax: 'max',
-  // aggregationFunctionLabelSize: 'size',
+  aggregationMenuItemHeader: 'Seskupování',
+  aggregationFunctionLabelSum: 'součet',
+  aggregationFunctionLabelAvg: 'průměr',
+  aggregationFunctionLabelMin: 'min',
+  aggregationFunctionLabelMax: 'max',
+  aggregationFunctionLabelSize: 'počet'
 };
-
 export const csCZ = getGridLocalization(csCZGrid, csCZCore);

package/modern/locales/esES.js

@@ -32,7 +32,7 @@ const esESGrid = {
   // Columns panel text
   columnsPanelTextFieldLabel: 'Columna de búsqueda',
   columnsPanelTextFieldPlaceholder: 'Título de columna',
-  columnsPanelDragIconLabel: 'Reorder columna',
+  columnsPanelDragIconLabel: 'Reordenar columna',
   columnsPanelShowAllButton: 'Mostrar todo',
   columnsPanelHideAllButton: 'Ocultar todo',
   // Filter panel text

package/modern/material/components/MUISelectOption.js

@@ -0,0 +1,16 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+const _excluded = ["native"];
+import * as React from 'react';
+import MUIMenuItem from '@mui/material/MenuItem';
+import { jsx as _jsx } from "react/jsx-runtime";
+export default function MUISelectOption(_ref) {
+  let {
+      native
+    } = _ref,
+    props = _objectWithoutPropertiesLoose(_ref, _excluded);
+  if (native) {
+    return /*#__PURE__*/_jsx("option", _extends({}, props));
+  }
+  return /*#__PURE__*/_jsx(MUIMenuItem, _extends({}, props));
+}

package/modern/material/index.js

@@ -0,0 +1,65 @@
+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 MUIInputLabel from '@mui/material/InputLabel';
+import { GridColumnUnsortedIcon } from './icons/GridColumnUnsortedIcon';
+import { GridAddIcon, GridArrowDownwardIcon, GridArrowUpwardIcon, GridCheckIcon, GridCloseIcon, GridColumnIcon, GridDragIcon, GridExpandMoreIcon, GridFilterAltIcon, GridFilterListIcon, GridKeyboardArrowRight, GridMoreVertIcon, GridRemoveIcon, GridSaveAltIcon, GridSearchIcon, GridSeparatorIcon, GridTableRowsIcon, GridTripleDotsVerticalIcon, GridViewHeadlineIcon, GridViewStreamIcon, GridVisibilityOffIcon, GridViewColumnIcon, GridClearIcon, GridLoadIcon, GridDeleteForeverIcon } from './icons';
+import MUISelectOption from './components/MUISelectOption';
+const iconSlots = {
+  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,
+  LoadIcon: GridLoadIcon,
+  FilterPanelAddIcon: GridAddIcon,
+  FilterPanelRemoveAllIcon: GridDeleteForeverIcon,
+  ColumnReorderIcon: GridDragIcon
+};
+const materialSlots = _extends({}, iconSlots, {
+  BaseCheckbox: MUICheckbox,
+  BaseTextField: MUITextField,
+  BaseFormControl: MUIFormControl,
+  BaseSelect: MUISelect,
+  BaseSwitch: MUISwitch,
+  BaseButton: MUIButton,
+  BaseIconButton: MUIIconButton,
+  BaseTooltip: MUITooltip,
+  BasePopper: MUIPopper,
+  BaseInputLabel: MUIInputLabel,
+  BaseSelectOption: MUISelectOption
+});
+export default materialSlots;

package/modern/models/gridFilterItem.js

@@ -1,5 +1,7 @@
 /**
  * Filter item definition interface.
+ * @demos
+ *   - [Custom filter operator](/x/react-data-grid/filtering/#create-a-custom-operator)
  */
 var GridLogicOperator;
 (function (GridLogicOperator) {

package/modern/models/params/gridRowParams.js

@@ -1,8 +1,12 @@
 /**
  * Object passed as parameter in the row callbacks.
+ * @demos
+ *   - [Master detail](/x/react-data-grid/master-detail/)
  */
 /**
  * Object passed as parameter in the row `getRowClassName` callback prop.
+ * @demos
+ *   - [Styling rows](/x/react-data-grid/style/#styling-rows)
  */
 /**
  * Object passed as parameter in the row `getRowHeight` callback prop.

package/node/DataGrid/DataGrid.js

@@ -13,7 +13,6 @@ var _GridContextProvider = require("../context/GridContextProvider");
 var _useDataGridComponent = require("./useDataGridComponent");
 var _useDataGridProps = require("./useDataGridProps");
 var _DataGridVirtualScroller = require("../components/DataGridVirtualScroller");
-var _DataGridColumnHeaders = require("../components/DataGridColumnHeaders");
 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; }
@@ -29,7 +28,6 @@ const DataGridRaw = /*#__PURE__*/React.forwardRef(function DataGrid(inProps, ref
       sx: props.sx,
       ref: ref,
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_components.GridHeader, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.GridBody, {
-        ColumnHeadersComponent: _DataGridColumnHeaders.DataGridColumnHeaders,
         VirtualScrollerComponent: _DataGridVirtualScroller.DataGridVirtualScroller
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.GridFooterPlaceholder, {})]
     })

package/node/components/GridColumnHeaders.js

@@ -0,0 +1,116 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.GridColumnHeaders = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
+var React = _interopRequireWildcard(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _useGridColumnHeaders = require("../hooks/features/columnHeaders/useGridColumnHeaders");
+var _GridScrollArea = require("./GridScrollArea");
+var _GridBaseColumnHeaders = require("./columnHeaders/GridBaseColumnHeaders");
+var _GridColumnHeadersInner = require("./columnHeaders/GridColumnHeadersInner");
+var _jsxRuntime = require("react/jsx-runtime");
+const _excluded = ["innerRef", "className", "visibleColumns", "sortColumnLookup", "filterColumnLookup", "columnPositions", "columnHeaderTabIndexState", "columnGroupHeaderTabIndexState", "columnHeaderFocus", "columnGroupHeaderFocus", "densityFactor", "headerGroupingMaxDepth", "columnMenuState", "columnVisibility", "columnGroupsHeaderStructure", "hasOtherElementInTabSequence"];
+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 GridColumnHeaders = /*#__PURE__*/React.forwardRef(function GridColumnsHeaders(props, ref) {
+  const {
+      innerRef,
+      visibleColumns,
+      sortColumnLookup,
+      filterColumnLookup,
+      columnPositions,
+      columnHeaderTabIndexState,
+      columnGroupHeaderTabIndexState,
+      columnHeaderFocus,
+      columnGroupHeaderFocus,
+      densityFactor,
+      headerGroupingMaxDepth,
+      columnMenuState,
+      columnVisibility,
+      columnGroupsHeaderStructure,
+      hasOtherElementInTabSequence
+    } = props,
+    other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
+  const {
+    isDragging,
+    getRootProps,
+    getInnerProps,
+    getColumnHeaders,
+    getColumnGroupHeaders
+  } = (0, _useGridColumnHeaders.useGridColumnHeaders)({
+    innerRef,
+    visibleColumns,
+    sortColumnLookup,
+    filterColumnLookup,
+    columnPositions,
+    columnHeaderTabIndexState,
+    columnGroupHeaderTabIndexState,
+    columnHeaderFocus,
+    columnGroupHeaderFocus,
+    densityFactor,
+    headerGroupingMaxDepth,
+    columnMenuState,
+    columnVisibility,
+    columnGroupsHeaderStructure,
+    hasOtherElementInTabSequence
+  });
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_GridBaseColumnHeaders.GridBaseColumnHeaders, (0, _extends2.default)({
+    ref: ref
+  }, getRootProps(other), {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_GridScrollArea.GridScrollArea, {
+      scrollDirection: "left"
+    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_GridColumnHeadersInner.GridColumnHeadersInner, (0, _extends2.default)({
+      isDragging: isDragging
+    }, getInnerProps(), {
+      children: [getColumnGroupHeaders(), getColumnHeaders()]
+    })), /*#__PURE__*/(0, _jsxRuntime.jsx)(_GridScrollArea.GridScrollArea, {
+      scrollDirection: "right"
+    })]
+  }));
+});
+exports.GridColumnHeaders = GridColumnHeaders;
+process.env.NODE_ENV !== "production" ? GridColumnHeaders.propTypes = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // | To update them edit the TypeScript types and run "yarn proptypes"  |
+  // ----------------------------------------------------------------------
+  columnGroupHeaderFocus: _propTypes.default.shape({
+    depth: _propTypes.default.number.isRequired,
+    field: _propTypes.default.string.isRequired
+  }),
+  columnGroupHeaderTabIndexState: _propTypes.default.shape({
+    depth: _propTypes.default.number.isRequired,
+    field: _propTypes.default.string.isRequired
+  }),
+  columnGroupsHeaderStructure: _propTypes.default.arrayOf(_propTypes.default.arrayOf(_propTypes.default.shape({
+    columnFields: _propTypes.default.arrayOf(_propTypes.default.string).isRequired,
+    groupId: _propTypes.default.string
+  }))).isRequired,
+  columnHeaderFocus: _propTypes.default.shape({
+    field: _propTypes.default.string.isRequired
+  }),
+  columnHeaderTabIndexState: _propTypes.default.shape({
+    field: _propTypes.default.string.isRequired
+  }),
+  columnMenuState: _propTypes.default.shape({
+    field: _propTypes.default.string,
+    open: _propTypes.default.bool.isRequired
+  }).isRequired,
+  columnPositions: _propTypes.default.arrayOf(_propTypes.default.number).isRequired,
+  columnVisibility: _propTypes.default.object.isRequired,
+  densityFactor: _propTypes.default.number.isRequired,
+  filterColumnLookup: _propTypes.default.object.isRequired,
+  hasOtherElementInTabSequence: _propTypes.default.bool.isRequired,
+  headerGroupingMaxDepth: _propTypes.default.number.isRequired,
+  innerRef: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.shape({
+    current: _propTypes.default.object
+  })]),
+  minColumnIndex: _propTypes.default.number,
+  sortColumnLookup: _propTypes.default.object.isRequired,
+  visibleColumns: _propTypes.default.arrayOf(_propTypes.default.object).isRequired
+} : void 0;