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

package/modern/components/panel/filterPanel/GridFilterForm.js

@@ -5,9 +5,6 @@ const _excluded = ["item", "hasMultipleFilters", "deleteFilter", "applyFilterCha
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { unstable_composeClasses as composeClasses, unstable_useId as useId, unstable_capitalize as capitalize } from '@mui/utils';
-import MenuItem from '@mui/material/MenuItem';
-import InputLabel from '@mui/material/InputLabel';
-import FormControl from '@mui/material/FormControl';
 import { styled } from '@mui/material/styles';
 import clsx from 'clsx';
 import { gridFilterableColumnDefinitionsSelector } from '../../../hooks/features/columns/gridColumnsSelector';
@@ -18,6 +15,7 @@ import { useGridApiContext } from '../../../hooks/utils/useGridApiContext';
 import { useGridRootProps } from '../../../hooks/utils/useGridRootProps';
 import { getDataGridUtilityClass } from '../../../constants/gridClasses';
 import { jsx as _jsx } from "react/jsx-runtime";
+import { createElement as _createElement } from "react";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const useUtilityClasses = ownerState => {
   const {
@@ -43,7 +41,7 @@ const GridFilterFormRoot = styled('div', {
   display: 'flex',
   padding: theme.spacing(1)
 }));
-const FilterFormDeleteIcon = styled(FormControl, {
+const FilterFormDeleteIcon = styled('div', {
   name: 'MuiDataGrid',
   slot: 'FilterFormDeleteIcon',
   overridesResolver: (_, styles) => styles.filterFormDeleteIcon
@@ -55,7 +53,7 @@ const FilterFormDeleteIcon = styled(FormControl, {
   marginRight: theme.spacing(0.5),
   marginBottom: theme.spacing(0.2)
 }));
-const FilterFormLogicOperatorInput = styled(FormControl, {
+const FilterFormLogicOperatorInput = styled('div', {
   name: 'MuiDataGrid',
   slot: 'FilterFormLogicOperatorInput',
   overridesResolver: (_, styles) => styles.filterFormLogicOperatorInput
@@ -64,21 +62,21 @@ const FilterFormLogicOperatorInput = styled(FormControl, {
   marginRight: 5,
   justifyContent: 'end'
 });
-const FilterFormColumnInput = styled(FormControl, {
+const FilterFormColumnInput = styled('div', {
   name: 'MuiDataGrid',
   slot: 'FilterFormColumnInput',
   overridesResolver: (_, styles) => styles.filterFormColumnInput
 })({
   width: 150
 });
-const FilterFormOperatorInput = styled(FormControl, {
+const FilterFormOperatorInput = styled('div', {
   name: 'MuiDataGrid',
   slot: 'FilterFormOperatorInput',
   overridesResolver: (_, styles) => styles.filterFormOperatorInput
 })({
   width: 120
 });
-const FilterFormValueInput = styled(FormControl, {
+const FilterFormValueInput = styled('div', {
   name: 'MuiDataGrid',
   slot: 'FilterFormValueInput',
   overridesResolver: (_, styles) => styles.filterFormValueInput
@@ -133,7 +131,8 @@ const GridFilterForm = /*#__PURE__*/React.forwardRef(function GridFilterForm(pro
   const baseFormControlProps = rootProps.slotProps?.baseFormControl || {};
   const baseSelectProps = rootProps.slotProps?.baseSelect || {};
   const isBaseSelectNative = baseSelectProps.native ?? true;
-  const OptionComponent = isBaseSelectNative ? 'option' : MenuItem;
+  const baseInputLabelProps = rootProps.slotProps?.baseInputLabel || {};
+  const baseSelectOptionProps = rootProps.slotProps?.baseSelectOption || {};
   const {
       InputComponentProps
     } = valueInputProps,
@@ -262,10 +261,11 @@ const GridFilterForm = /*#__PURE__*/React.forwardRef(function GridFilterForm(pro
         disabled: !!disableMultiFilterOperator || logicOperators.length === 1,
         native: isBaseSelectNative
       }, rootProps.slotProps?.baseSelect, {
-        children: logicOperators.map(logicOperator => /*#__PURE__*/_jsx(OptionComponent, {
-          value: logicOperator.toString(),
-          children: apiRef.current.getLocaleText(getLogicOperatorLocaleKey(logicOperator))
-        }, logicOperator.toString()))
+        children: logicOperators.map(logicOperator => /*#__PURE__*/_createElement(rootProps.slots.baseSelectOption, _extends({}, baseSelectOptionProps, {
+          native: isBaseSelectNative,
+          key: logicOperator.toString(),
+          value: logicOperator.toString()
+        }), apiRef.current.getLocaleText(getLogicOperatorLocaleKey(logicOperator))))
       }))
     })), /*#__PURE__*/_jsxs(FilterFormColumnInput, _extends({
       variant: "standard",
@@ -273,11 +273,11 @@ const GridFilterForm = /*#__PURE__*/React.forwardRef(function GridFilterForm(pro
     }, baseFormControlProps, columnInputProps, {
       className: clsx(classes.columnInput, baseFormControlProps.className, columnInputProps.className),
       ownerState: rootProps,
-      children: [/*#__PURE__*/_jsx(InputLabel, {
+      children: [/*#__PURE__*/_jsx(rootProps.slots.baseInputLabel, _extends({}, baseInputLabelProps, {
         htmlFor: columnSelectId,
         id: columnSelectLabelId,
         children: apiRef.current.getLocaleText('filterPanelColumns')
-      }), /*#__PURE__*/_jsx(rootProps.slots.baseSelect, _extends({
+      })), /*#__PURE__*/_jsx(rootProps.slots.baseSelect, _extends({
         labelId: columnSelectLabelId,
         id: columnSelectId,
         label: apiRef.current.getLocaleText('filterPanelColumns'),
@@ -285,10 +285,11 @@ const GridFilterForm = /*#__PURE__*/React.forwardRef(function GridFilterForm(pro
         onChange: changeColumn,
         native: isBaseSelectNative
       }, rootProps.slotProps?.baseSelect, {
-        children: sortedFilteredColumns.map(col => /*#__PURE__*/_jsx(OptionComponent, {
-          value: col.field,
-          children: getColumnLabel(col)
-        }, col.field))
+        children: sortedFilteredColumns.map(col => /*#__PURE__*/_createElement(rootProps.slots.baseSelectOption, _extends({}, baseSelectOptionProps, {
+          native: isBaseSelectNative,
+          key: col.field,
+          value: col.field
+        }), getColumnLabel(col)))
       }))]
     })), /*#__PURE__*/_jsxs(FilterFormOperatorInput, _extends({
       variant: "standard",
@@ -296,11 +297,11 @@ const GridFilterForm = /*#__PURE__*/React.forwardRef(function GridFilterForm(pro
     }, baseFormControlProps, operatorInputProps, {
       className: clsx(classes.operatorInput, baseFormControlProps.className, operatorInputProps.className),
       ownerState: rootProps,
-      children: [/*#__PURE__*/_jsx(InputLabel, {
+      children: [/*#__PURE__*/_jsx(rootProps.slots.baseInputLabel, _extends({}, baseInputLabelProps, {
         htmlFor: operatorSelectId,
         id: operatorSelectLabelId,
         children: apiRef.current.getLocaleText('filterPanelOperator')
-      }), /*#__PURE__*/_jsx(rootProps.slots.baseSelect, _extends({
+      })), /*#__PURE__*/_jsx(rootProps.slots.baseSelect, _extends({
         labelId: operatorSelectLabelId,
         label: apiRef.current.getLocaleText('filterPanelOperator'),
         id: operatorSelectId,
@@ -309,10 +310,11 @@ const GridFilterForm = /*#__PURE__*/React.forwardRef(function GridFilterForm(pro
         native: isBaseSelectNative,
         inputRef: filterSelectorRef
       }, rootProps.slotProps?.baseSelect, {
-        children: currentColumn?.filterOperators?.map(operator => /*#__PURE__*/_jsx(OptionComponent, {
-          value: operator.value,
-          children: operator.label || apiRef.current.getLocaleText(`filterOperator${capitalize(operator.value)}`)
-        }, operator.value))
+        children: currentColumn?.filterOperators?.map(operator => /*#__PURE__*/_createElement(rootProps.slots.baseSelectOption, _extends({}, baseSelectOptionProps, {
+          native: isBaseSelectNative,
+          key: operator.value,
+          value: operator.value
+        }), operator.label || apiRef.current.getLocaleText(`filterOperator${capitalize(operator.value)}`)))
       }))]
     })), /*#__PURE__*/_jsx(FilterFormValueInput, _extends({
       variant: "standard",

package/modern/components/panel/filterPanel/GridFilterInputBoolean.js

@@ -2,7 +2,6 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 const _excluded = ["item", "applyValue", "apiRef", "focusElementRef"];
 import * as React from 'react';
-import MenuItem from '@mui/material/MenuItem';
 import { useGridRootProps } from '../../../hooks/utils/useGridRootProps';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
@@ -18,7 +17,7 @@ export function GridFilterInputBoolean(props) {
   const rootProps = useGridRootProps();
   const baseSelectProps = rootProps.slotProps?.baseSelect || {};
   const isSelectNative = baseSelectProps.native ?? true;
-  const OptionComponent = isSelectNative ? 'option' : MenuItem;
+  const baseSelectOptionProps = rootProps.slotProps?.baseSelectOption || {};
   const onFilterChange = React.useCallback(event => {
     const value = event.target.value;
     setFilterValueState(value);
@@ -30,6 +29,7 @@ export function GridFilterInputBoolean(props) {
     setFilterValueState(item.value || '');
   }, [item.value]);
   return /*#__PURE__*/_jsxs(rootProps.slots.baseTextField, _extends({
+    // TODO: use baseSelect slot
     label: apiRef.current.getLocaleText('filterPanelInputLabel'),
     value: filterValueState,
     onChange: onFilterChange,
@@ -44,15 +44,18 @@ export function GridFilterInputBoolean(props) {
     },
     inputRef: focusElementRef
   }, others, rootProps.slotProps?.baseTextField, {
-    children: [/*#__PURE__*/_jsx(OptionComponent, {
+    children: [/*#__PURE__*/_jsx(rootProps.slots.baseSelectOption, _extends({}, baseSelectOptionProps, {
+      native: isSelectNative,
       value: "",
       children: apiRef.current.getLocaleText('filterValueAny')
-    }), /*#__PURE__*/_jsx(OptionComponent, {
+    })), /*#__PURE__*/_jsx(rootProps.slots.baseSelectOption, _extends({}, baseSelectOptionProps, {
+      native: isSelectNative,
       value: "true",
       children: apiRef.current.getLocaleText('filterValueTrue')
-    }), /*#__PURE__*/_jsx(OptionComponent, {
+    })), /*#__PURE__*/_jsx(rootProps.slots.baseSelectOption, _extends({}, baseSelectOptionProps, {
+      native: isSelectNative,
       value: "false",
       children: apiRef.current.getLocaleText('filterValueFalse')
-    })]
+    }))]
   }));
 }

package/modern/components/panel/filterPanel/GridFilterInputDate.js

@@ -4,7 +4,6 @@ const _excluded = ["item", "applyValue", "type", "apiRef", "focusElementRef", "I
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { unstable_useId as useId } from '@mui/utils';
-import { GridLoadIcon } from '../../icons';
 import { useGridRootProps } from '../../../hooks/utils/useGridRootProps';
 import { jsx as _jsx } from "react/jsx-runtime";
 export const SUBMIT_FILTER_DATE_STROKE_TIME = 500;
@@ -57,7 +56,7 @@ function GridFilterInputDate(props) {
     },
     inputRef: focusElementRef,
     InputProps: _extends({}, applying ? {
-      endAdornment: /*#__PURE__*/_jsx(GridLoadIcon, {})
+      endAdornment: /*#__PURE__*/_jsx(rootProps.slots.loadIcon, {})
     } : {}, InputProps, {
       inputProps: _extends({
         max: type === 'datetime-local' ? '9999-12-31T23:59' : '9999-12-31'

package/modern/components/panel/filterPanel/GridFilterInputMultipleSingleSelect.js

@@ -68,7 +68,7 @@ function GridFilterInputMultipleSingleSelect(props) {
     if (resolvedValueOptions !== undefined) {
       const itemValueIndexes = item.value.map(element => {
         // Gets the index matching between values and valueOptions
-        return resolvedFormattedValueOptions?.findIndex(formatedOption => formatedOption === element);
+        return resolvedFormattedValueOptions?.findIndex(formattedOption => formattedOption === element);
       });
       return itemValueIndexes.filter(index => index >= 0).map(index => resolvedValueOptions[index]);
     }

package/modern/components/panel/filterPanel/GridFilterInputSingleSelect.js

@@ -1,27 +1,35 @@
-import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+import _extends from "@babel/runtime/helpers/esm/extends";
 const _excluded = ["item", "applyValue", "type", "apiRef", "focusElementRef", "getOptionLabel", "getOptionValue"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { unstable_useId as useId } from '@mui/utils';
-import MenuItem from '@mui/material/MenuItem';
 import { useGridRootProps } from '../../../hooks/utils/useGridRootProps';
 import { getValueFromValueOptions, isSingleSelectColDef } from './filterPanelUtils';
+import { createElement as _createElement } from "react";
 import { jsx as _jsx } from "react/jsx-runtime";
 const renderSingleSelectOptions = ({
-  valueOptions,
-  field
-}, OptionComponent, getOptionLabel, getOptionValue) => {
+  column: {
+    valueOptions,
+    field
+  },
+  OptionComponent,
+  getOptionLabel,
+  getOptionValue,
+  isSelectNative,
+  baseSelectOptionProps
+}) => {
   const iterableColumnValues = typeof valueOptions === 'function' ? ['', ...valueOptions({
     field
   })] : ['', ...(valueOptions || [])];
   return iterableColumnValues.map(option => {
     const value = getOptionValue(option);
     const label = getOptionLabel(option);
-    return /*#__PURE__*/_jsx(OptionComponent, {
-      value: value,
-      children: label
-    }, value);
+    return /*#__PURE__*/_createElement(OptionComponent, _extends({}, baseSelectOptionProps, {
+      native: isSelectNative,
+      key: value,
+      value: value
+    }), label);
   });
 };
 function GridFilterInputSingleSelect(props) {
@@ -40,6 +48,7 @@ function GridFilterInputSingleSelect(props) {
   const rootProps = useGridRootProps();
   const baseSelectProps = rootProps.slotProps?.baseSelect || {};
   const isSelectNative = baseSelectProps.native ?? true;
+  const baseSelectOptionProps = rootProps.slotProps?.baseSelectOption || {};
   let resolvedColumn = null;
   if (item.field) {
     const column = apiRef.current.getColumn(item.field);
@@ -91,6 +100,7 @@ function GridFilterInputSingleSelect(props) {
     return null;
   }
   return /*#__PURE__*/_jsx(rootProps.slots.baseTextField, _extends({
+    // TODO: use baseSelect slot
     id: id,
     label: apiRef.current.getLocaleText('filterPanelInputLabel'),
     placeholder: apiRef.current.getLocaleText('filterPanelInputPlaceholder'),
@@ -107,7 +117,14 @@ function GridFilterInputSingleSelect(props) {
       native: isSelectNative
     }, rootProps.slotProps?.baseSelect)
   }, others, rootProps.slotProps?.baseTextField, {
-    children: renderSingleSelectOptions(resolvedColumn, isSelectNative ? 'option' : MenuItem, getOptionLabel, getOptionValue)
+    children: renderSingleSelectOptions({
+      column: resolvedColumn,
+      OptionComponent: rootProps.slots.baseSelectOption,
+      getOptionLabel,
+      getOptionValue,
+      isSelectNative,
+      baseSelectOptionProps
+    })
   }));
 }
 process.env.NODE_ENV !== "production" ? GridFilterInputSingleSelect.propTypes = {

package/modern/components/panel/filterPanel/GridFilterInputValue.js

@@ -4,7 +4,6 @@ const _excluded = ["item", "applyValue", "type", "apiRef", "focusElementRef"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { unstable_useId as useId } from '@mui/utils';
-import { GridLoadIcon } from '../../icons';
 import { useGridRootProps } from '../../../hooks/utils/useGridRootProps';
 import { jsx as _jsx } from "react/jsx-runtime";
 export const SUBMIT_FILTER_STROKE_TIME = 500;
@@ -46,7 +45,7 @@ function GridFilterInputValue(props) {
     setFilterValueState(String(itemValue));
   }, [item.value]);
   const InputProps = applying ? {
-    endAdornment: /*#__PURE__*/_jsx(GridLoadIcon, {})
+    endAdornment: /*#__PURE__*/_jsx(rootProps.slots.loadIcon, {})
   } : others.InputProps;
   return /*#__PURE__*/_jsx(rootProps.slots.baseTextField, _extends({
     id: id,

package/modern/components/panel/filterPanel/GridFilterPanel.js

@@ -49,6 +49,9 @@ const GridFilterPanel = /*#__PURE__*/React.forwardRef(function GridFilterPanel(p
         currentFilters: filterModel?.items || [],
         columns: filterableColumns
       });
+      if (nextFieldName === null) {
+        return null;
+      }
       nextColumnWithOperator = filterableColumns.find(({
         field
       }) => field === nextFieldName);
@@ -71,6 +74,9 @@ const GridFilterPanel = /*#__PURE__*/React.forwardRef(function GridFilterPanel(p
       currentFilters: currentFilters,
       columns: filterableColumns
     });
+    if (nextColumnFieldName === null) {
+      return null;
+    }
     const nextColumnWithOperator = filterableColumns.find(({
       field
     }) => field === nextColumnFieldName);
@@ -175,6 +181,7 @@ process.env.NODE_ENV !== "production" ? GridFilterPanel.propTypes = {
     columnInputProps: PropTypes.any,
     columnsSort: PropTypes.oneOf(['asc', 'desc']),
     deleteIconProps: PropTypes.any,
+    filterColumns: PropTypes.func,
     logicOperatorInputProps: PropTypes.any,
     operatorInputProps: PropTypes.any,
     valueInputProps: PropTypes.any
@@ -182,7 +189,7 @@ process.env.NODE_ENV !== "production" ? GridFilterPanel.propTypes = {
   /**
    * Function that returns the next filter item to be picked as default filter.
    * @param {GetColumnForNewFilterArgs} args Currently configured filters and columns.
-   * @returns {GridColDef['field']} The field to be used for the next filter.
+   * @returns {GridColDef['field']} The field to be used for the next filter or `null` to prevent adding a filter.
    */
   getColumnForNewFilter: PropTypes.func,
   /**

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';

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';

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';

package/modern/constants/defaultGridSlotsComponents.js

@@ -1,66 +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, GridDeleteIcon, GridDeleteForeverIcon } 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,
-  FilterPanelAddIcon: GridAddIcon,
-  FilterPanelDeleteIcon: GridDeleteIcon,
-  FilterPanelRemoveAllIcon: GridDeleteForeverIcon,
-  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/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/columnGrouping/gridColumnGroupsUtils.js

@@ -1,12 +1,12 @@
 import { isLeaf } from '../../../models/gridColumnGrouping';
 import { isDeepEqual } from '../../../utils/utils';
 // This is the recurrence function that help writing `unwrapGroupingColumnModel()`
-const recurrentUnwrapGroupingColumnModel = (columnGroupNode, parents, unwrappedGroupingModelToComplet) => {
+const recurrentUnwrapGroupingColumnModel = (columnGroupNode, parents, unwrappedGroupingModelToComplete) => {
   if (isLeaf(columnGroupNode)) {
-    if (unwrappedGroupingModelToComplet[columnGroupNode.field] !== undefined) {
-      throw new Error([`MUI: columnGroupingModel contains duplicated field`, `column field ${columnGroupNode.field} occurrs two times in the grouping model:`, `- ${unwrappedGroupingModelToComplet[columnGroupNode.field].join(' > ')}`, `- ${parents.join(' > ')}`].join('\n'));
+    if (unwrappedGroupingModelToComplete[columnGroupNode.field] !== undefined) {
+      throw new Error([`MUI: columnGroupingModel contains duplicated field`, `column field ${columnGroupNode.field} occurs two times in the grouping model:`, `- ${unwrappedGroupingModelToComplete[columnGroupNode.field].join(' > ')}`, `- ${parents.join(' > ')}`].join('\n'));
     }
-    unwrappedGroupingModelToComplet[columnGroupNode.field] = parents;
+    unwrappedGroupingModelToComplete[columnGroupNode.field] = parents;
     return;
   }
   const {
@@ -14,7 +14,7 @@ const recurrentUnwrapGroupingColumnModel = (columnGroupNode, parents, unwrappedG
     children
   } = columnGroupNode;
   children.forEach(child => {
-    recurrentUnwrapGroupingColumnModel(child, [...parents, groupId], unwrappedGroupingModelToComplet);
+    recurrentUnwrapGroupingColumnModel(child, [...parents, groupId], unwrappedGroupingModelToComplete);
   });
 };
 

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/editing/useGridCellEditing.js

@@ -68,7 +68,7 @@ export const useGridCellEditing = (apiRef, props) => {
   const handleCellKeyDown = React.useCallback((params, event) => {
     if (params.cellMode === GridCellModes.Edit) {
       // Wait until IME is settled for Asian languages like Japanese and Chinese
-      // TODO: `event.which` is depricated but this is a temporary workaround
+      // TODO: `event.which` is deprecated but this is a temporary workaround
       if (event.which === 229) {
         return;
       }

package/modern/hooks/features/editing/useGridEditing.js

@@ -47,7 +47,7 @@ export const useGridEditing = (apiRef, props) => {
       clearTimeout(timeout);
     }
 
-    // To run the callback immediatelly without waiting the timeout
+    // To run the callback immediately without waiting the timeout
     const runImmediately = () => {
       const [timeout] = debounceMap.current[id][field];
       clearTimeout(timeout);

package/modern/hooks/features/editing/useGridRowEditing.js

@@ -103,7 +103,7 @@ export const useGridRowEditing = (apiRef, props) => {
   const handleCellKeyDown = React.useCallback((params, event) => {
     if (params.cellMode === GridRowModes.Edit) {
       // Wait until IME is settled for Asian languages like Japanese and Chinese
-      // TODO: `event.which` is depricated but this is a temporary workaround
+      // TODO: `event.which` is deprecated but this is a temporary workaround
       if (event.which === 229) {
         return;
       }