@mui/x-data-grid 5.12.0 → 5.12.3

package/locales/skSK.js

@@ -141,6 +141,7 @@ const skSKGrid = {
   groupingColumnHeaderName: 'Skupina',
   groupColumn: name => `Zoskupiť podľa ${name}`,
   unGroupColumn: name => `Prestať zoskupovať podľa ${name}` // Master/detail
+  // detailPanelToggle: 'Detail panel toggle',
   // expandDetailPanel: 'Expand',
   // collapseDetailPanel: 'Collapse',
   // Row reordering text

package/locales/svSE.d.ts

@@ -0,0 +1,2 @@
+import { Localization } from '../utils/getGridLocalization';
+export declare const svSE: Localization;

package/locales/svSE.js

@@ -0,0 +1,116 @@
+import { svSE as svSECore } from '@mui/material/locale';
+import { getGridLocalization } from '../utils/getGridLocalization';
+const svSEGrid = {
+  // Root
+  noRowsLabel: 'Inga rader',
+  noResultsOverlayLabel: 'Inga resultat funna.',
+  errorOverlayDefaultLabel: 'Ett fel uppstod.',
+  // Density selector toolbar button text
+  toolbarDensity: 'Densitet',
+  toolbarDensityLabel: 'Densitet',
+  toolbarDensityCompact: 'Kompakt',
+  toolbarDensityStandard: 'Standard',
+  toolbarDensityComfortable: 'Bekväm',
+  // Columns selector toolbar button text
+  toolbarColumns: 'Kolumner',
+  toolbarColumnsLabel: 'Välj kolumner',
+  // Filters toolbar button text
+  toolbarFilters: 'Filter',
+  toolbarFiltersLabel: 'Visa filter',
+  toolbarFiltersTooltipHide: 'Dölj filter',
+  toolbarFiltersTooltipShow: 'Visa filter',
+  toolbarFiltersTooltipActive: count => count !== 1 ? `${count} aktiva filter` : `${count} aktivt filter`,
+  // Quick filter toolbar field
+  toolbarQuickFilterPlaceholder: 'Sök...',
+  toolbarQuickFilterLabel: 'Sök',
+  toolbarQuickFilterDeleteIconLabel: 'Rensa',
+  // Export selector toolbar button text
+  toolbarExport: 'Exportera',
+  toolbarExportLabel: 'Exportera',
+  toolbarExportCSV: 'Ladda ner som CSV',
+  toolbarExportPrint: 'Skriv ut',
+  toolbarExportExcel: 'Ladda ner som Excel',
+  // Columns panel text
+  columnsPanelTextFieldLabel: 'Hitta kolumn',
+  columnsPanelTextFieldPlaceholder: 'Kolumntitel',
+  columnsPanelDragIconLabel: 'Ordna om kolumnen',
+  columnsPanelShowAllButton: 'Visa alla',
+  columnsPanelHideAllButton: 'Dölj alla',
+  // Filter panel text
+  filterPanelAddFilter: 'Lägg till filter',
+  filterPanelDeleteIconLabel: 'Ta bort',
+  filterPanelLinkOperator: 'Logisk operatör',
+  filterPanelOperators: 'Operatör',
+  // TODO v6: rename to filterPanelOperator
+  filterPanelOperatorAnd: 'Och',
+  filterPanelOperatorOr: 'Eller',
+  filterPanelColumns: 'Kolumner',
+  filterPanelInputLabel: 'Värde',
+  filterPanelInputPlaceholder: 'Filtervärde',
+  // Filter operators text
+  filterOperatorContains: 'innehåller',
+  filterOperatorEquals: 'är lika med',
+  filterOperatorStartsWith: 'börjar med',
+  filterOperatorEndsWith: 'slutar med',
+  filterOperatorIs: 'är',
+  filterOperatorNot: 'är inte',
+  filterOperatorAfter: 'är efter',
+  filterOperatorOnOrAfter: 'är på eller efter',
+  filterOperatorBefore: 'är innan',
+  filterOperatorOnOrBefore: 'är på eller innan',
+  filterOperatorIsEmpty: 'är tom',
+  filterOperatorIsNotEmpty: 'är inte tom',
+  filterOperatorIsAnyOf: 'är någon av',
+  // Filter values text
+  filterValueAny: 'något',
+  filterValueTrue: 'sant',
+  filterValueFalse: 'falskt',
+  // Column menu text
+  columnMenuLabel: 'Meny',
+  columnMenuShowColumns: 'Visa kolumner',
+  columnMenuFilter: 'Filtrera',
+  columnMenuHideColumn: 'Dölj',
+  columnMenuUnsort: 'Osortera',
+  columnMenuSortAsc: 'Sortera stigande',
+  columnMenuSortDesc: 'Sortera fallande',
+  // Column header text
+  columnHeaderFiltersTooltipActive: count => count !== 1 ? `${count} aktiva filter` : `${count} aktivt filter`,
+  columnHeaderFiltersLabel: 'Visa filter',
+  columnHeaderSortIconLabel: 'Sortera',
+  // Rows selected footer text
+  footerRowSelected: count => count !== 1 ? `${count.toLocaleString()} rader markerade` : `${count.toLocaleString()} rad markerad`,
+  // Total row amount footer text
+  footerTotalRows: 'Totalt antal rader:',
+  // Total visible row amount footer text
+  footerTotalVisibleRows: (visibleCount, totalCount) => `${visibleCount.toLocaleString()} av ${totalCount.toLocaleString()}`,
+  // Checkbox selection text
+  checkboxSelectionHeaderName: 'Markering med kryssruta',
+  checkboxSelectionSelectAllRows: 'Markera alla rader',
+  checkboxSelectionUnselectAllRows: 'Avmarkera alla rader',
+  checkboxSelectionSelectRow: 'Markera rad',
+  checkboxSelectionUnselectRow: 'Avmarkera rad',
+  // Boolean cell text
+  booleanCellTrueLabel: 'ja',
+  booleanCellFalseLabel: 'nej',
+  // Actions cell more text
+  actionsCellMore: 'mer',
+  // Column pinning text
+  pinToLeft: 'Fäst till vänster',
+  pinToRight: 'Fäst till höger',
+  unpin: 'Ta bort fäste',
+  // Tree Data
+  treeDataGroupingHeaderName: 'Grupp',
+  treeDataExpand: 'visa underordnade',
+  treeDataCollapse: 'dölj underordnade',
+  // Grouping columns
+  groupingColumnHeaderName: 'Grupp',
+  groupColumn: name => `Gruppera efter ${name}`,
+  unGroupColumn: name => `Sluta gruppera efter ${name}`,
+  // Master/detail
+  // detailPanelToggle: 'Detail panel toggle',
+  expandDetailPanel: 'Expandera',
+  collapseDetailPanel: 'Kollapsa',
+  // Row reordering text
+  rowReorderingHeaderName: 'Ordna om rader'
+};
+export const svSE = getGridLocalization(svSEGrid, svSECore);

package/locales/trTR.js

@@ -107,6 +107,7 @@ const trTRGrid = {
   groupColumn: name => `${name} için grupla`,
   unGroupColumn: name => `${name} için gruplamayı kaldır`,
   // Master/detail
+  // detailPanelToggle: 'Detail panel toggle',
   expandDetailPanel: 'Genişlet',
   collapseDetailPanel: 'Gizle' // Row reordering text
   // rowReorderingHeaderName: 'Row reordering',

package/locales/ukUA.js

@@ -132,6 +132,7 @@ const ukUAGrid = {
   // groupColumn: name => `Group by ${name}`,
   // unGroupColumn: name => `Stop grouping by ${name}`,
   // Master/detail
+  // detailPanelToggle: 'Detail panel toggle',
   // expandDetailPanel: 'Expand',
   // collapseDetailPanel: 'Collapse',
   // Row reordering text

package/locales/viVN.js

@@ -106,6 +106,7 @@ const viVNGrid = {
   // groupColumn: name => `Group by ${name}`,
   // unGroupColumn: name => `Stop grouping by ${name}`,
   // Master/detail
+  // detailPanelToggle: 'Detail panel toggle',
   // expandDetailPanel: 'Expand',
   // collapseDetailPanel: 'Collapse',
   // Row reordering text

package/locales/zhCN.js

@@ -106,6 +106,7 @@ const zhCNGrid = {
   // groupColumn: name => `Group by ${name}`,
   // unGroupColumn: name => `Stop grouping by ${name}`,
   // Master/detail
+  // detailPanelToggle: 'Detail panel toggle',
   // expandDetailPanel: 'Expand',
   // collapseDetailPanel: 'Collapse',
   // Row reordering text

package/models/api/gridCallbackDetails.d.ts

@@ -1,10 +1,15 @@
+import { GridControlledStateReasonLookup } from '../events/gridEventLookup';
 /**
  * Additional details passed to the callbacks
  */
-export interface GridCallbackDetails {
+export interface GridCallbackDetails<K extends keyof GridControlledStateReasonLookup = any> {
     /**
      * Provided only if `DataGridPro` is being used.
      * @deprecated Use the `apiRef` returned by `useGridApiContext` or `useGridApiRef` (only available in `@mui/x-data-grid-pro`)
      */
     api?: any;
+    /**
+     * The reason for this callback to have been called.
+     */
+    reason?: GridControlledStateReasonLookup[K];
 }

package/models/api/gridFilterApi.d.ts

@@ -1,6 +1,7 @@
 import { GridRowId, GridRowModel } from '../gridRows';
 import { GridFilterModel } from '../gridFilterModel';
 import { GridFilterItem, GridLinkOperator } from '../gridFilterItem';
+import { GridControlledStateReasonLookup } from '../events';
 /**
  * The filter API interface that is available in the grid [[apiRef]].
  */
@@ -19,6 +20,11 @@ export interface GridFilterApi {
      * @param {GridFilterItem} item The filter to update.
      */
     upsertFilterItem: (item: GridFilterItem) => void;
+    /**
+     * Updates or inserts many [[GridFilterItem]].
+     * @param {GridFilterItem[]} items The filters to update.
+     */
+    upsertFilterItems: (items: GridFilterItem[]) => void;
     /**
      * Applies all filters on all rows.
      * @ignore - do not document.
@@ -37,8 +43,9 @@ export interface GridFilterApi {
     /**
      * Sets the filter model to the one given by `model`.
      * @param {GridFilterModel} model The new filter model.
+     * @param {string} reason The reason for the model to have changed.
      */
-    setFilterModel: (model: GridFilterModel) => void;
+    setFilterModel: (model: GridFilterModel, reason?: GridControlledStateReasonLookup['filter']) => void;
     /**
      * Returns a sorted `Map` containing only the visible rows.
      * @returns {Map<GridRowId, GridRowModel>} The sorted `Map`.

package/models/api/gridLocaleTextApi.d.ts

@@ -87,6 +87,7 @@ export interface GridLocaleText {
     groupingColumnHeaderName: string;
     groupColumn: (name: string) => string;
     unGroupColumn: (name: string) => string;
+    detailPanelToggle: string;
     expandDetailPanel: string;
     collapseDetailPanel: string;
     MuiTablePagination: Omit<ComponentsPropsList['MuiTablePagination'], 'page' | 'count' | 'onChangePage' | 'rowsPerPage' | 'onPageChange'>;

package/models/api/gridStateApi.d.ts

@@ -1,5 +1,5 @@
 import { GridStateCommunity } from '../gridStateCommunity';
-import { GridControlledStateEventLookup } from '../events';
+import { GridControlledStateEventLookup, GridControlledStateReasonLookup } from '../events';
 import { GridControlStateItem } from '../controlStateItem';
 export interface GridStateApi<State extends GridStateCommunity> {
     /**
@@ -13,14 +13,25 @@ export interface GridStateApi<State extends GridStateCommunity> {
     /**
      * Sets the whole state of the grid.
      * @param {GridState | (oldState: GridState) => GridState} state The new state or the callback creating the new state.
+     * @param {string} reason The reason for this change to happen.
      * @returns {boolean} Has the state been updated.
      * @ignore - do not document.
      */
-    setState: <S extends State>(state: S | ((previousState: S) => S)) => boolean;
+    setState: <S extends State, K extends keyof GridControlledStateReasonLookup>(state: S | ((previousState: S) => S), reason?: GridControlledStateReasonLookup[K]) => boolean;
+    /**
+     * Updates a single sub-state.
+     * Publishes the `xxxChange` event and calls the `onXXXChange` prop.
+     * @param {K} key Which key of the state to update.
+     * @param {(oldState: GridState) => GridState} state The new state of the sub-state to update.
+     * @param {GridControlledStateReasonLookup[K]} reason The reason to pass to the callback prop and event.
+     * @returns {boolean} `true` if the state has been successfully updated.
+     * @ignore - do not document.
+     */
+    unstable_updateControlState: <K extends keyof GridControlledStateReasonLookup>(key: K, state: (oldState: State[K]) => State[K], reason?: GridControlledStateReasonLookup[K]) => boolean;
     /**
      * Updates a control state that binds the model, the onChange prop, and the grid state together.
      * @param {GridControlStateItem>} controlState The [[GridControlStateItem]] to be registered.
      * @ignore - do not document.
      */
-    unstable_updateControlState: <E extends keyof GridControlledStateEventLookup>(controlState: GridControlStateItem<State, E>) => void;
+    unstable_registerControlState: <E extends keyof GridControlledStateEventLookup>(controlState: GridControlStateItem<State, E>) => void;
 }

package/models/colDef/gridColDef.d.ts

@@ -248,7 +248,7 @@ export interface GridActionsColDef<R extends GridValidRowModel = any, V = any, F
 }
 export declare type GridEnrichedColDef<R extends GridValidRowModel = any, V = any, F = V> = GridColDef<R, V, F> | GridActionsColDef<R, V, F>;
 export declare type GridColumns<R extends GridValidRowModel = any> = GridEnrichedColDef<R>[];
-export declare type GridColTypeDef<V = any, F = V> = Omit<GridColDef<V, any, F>, 'field'> & {
+export declare type GridColTypeDef<V = any, F = V> = Omit<GridColDef<any, V, F>, 'field'> & {
     extendType?: GridNativeColTypes;
 };
 export declare type GridStateColDef<R extends GridValidRowModel = any, V = any, F = V> = GridEnrichedColDef<R, V, F> & {

package/models/events/gridEventLookup.d.ts

@@ -280,6 +280,9 @@ export interface GridControlledStateEventLookup {
         params: GridColumnVisibilityModel;
     };
 }
+export interface GridControlledStateReasonLookup {
+    filter: 'upsertFilterItem' | 'upsertFilterItems' | 'deleteFilterItem' | 'changeLogicOperator' | 'restoreState';
+}
 export interface GridEventLookup extends GridRowEventLookup, GridColumnHeaderEventLookup, GridCellEventLookup, GridControlledStateEventLookup {
     /**
      * Fired when the grid is unmounted.

package/models/gridIconSlotsComponent.d.ts

@@ -124,4 +124,9 @@ export interface GridIconSlotsComponent {
      * @default GridSearchIcon
      */
     QuickFilterIcon: React.JSXElementConstructor<any>;
+    /**
+     * Icon displayed on the quick filter reset input.
+     * @default GridCloseIcon
+     */
+    QuickFilterClearIcon: React.JSXElementConstructor<any>;
 }

package/models/props/DataGridProps.d.ts

@@ -639,7 +639,7 @@ export interface DataGridPropsWithoutDefaultValue<R extends GridValidRowModel =
      * @param {GridFilterModel} model With all properties from [[GridFilterModel]].
      * @param {GridCallbackDetails} details Additional details for this callback.
      */
-    onFilterModelChange?: (model: GridFilterModel, details: GridCallbackDetails) => void;
+    onFilterModelChange?: (model: GridFilterModel, details: GridCallbackDetails<'filter'>) => void;
     /**
      * Set the selection model of the grid.
      */

package/modern/colDef/gridCheckboxSelectionColDef.js

@@ -5,8 +5,9 @@ import { GridHeaderCheckbox } from '../components/columnSelection/GridHeaderChec
 import { selectedIdsLookupSelector } from '../hooks/features/selection/gridSelectionSelector';
 import { GRID_BOOLEAN_COL_DEF } from './gridBooleanColDef';
 import { jsx as _jsx } from "react/jsx-runtime";
+export const GRID_CHECKBOX_SELECTION_FIELD = '__check__';
 export const GRID_CHECKBOX_SELECTION_COL_DEF = _extends({}, GRID_BOOLEAN_COL_DEF, {
-  field: '__check__',
+  field: GRID_CHECKBOX_SELECTION_FIELD,
   type: 'checkboxSelection',
   width: 50,
   resizable: false,

package/modern/colDef/gridNumericColDef.js

@@ -11,7 +11,7 @@ export const GRID_NUMERIC_COL_DEF = _extends({}, GRID_STRING_COL_DEF, {
   valueParser: value => value === '' ? null : Number(value),
   valueFormatter: ({
     value
-  }) => value && isNumber(value) && value.toLocaleString() || value,
+  }) => isNumber(value) ? value.toLocaleString() : value || '',
   filterOperators: getGridNumericOperators(),
   getApplyQuickFilterFn: getGridNumericQuickFilterFn
 });

package/modern/components/cell/GridBooleanCell.js

@@ -5,6 +5,7 @@ import * as React from 'react';
 import { unstable_composeClasses as composeClasses } from '@mui/material';
 import { getDataGridUtilityClass } from '../../constants/gridClasses';
 import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
+import { useGridApiContext } from '../../hooks/utils/useGridApiContext';
 import { jsx as _jsx } from "react/jsx-runtime";
 
 const useUtilityClasses = ownerState => {
@@ -19,11 +20,11 @@ const useUtilityClasses = ownerState => {
 
 export const GridBooleanCell = /*#__PURE__*/React.memo(props => {
   const {
-    value,
-    api
+    value
   } = props,
         other = _objectWithoutPropertiesLoose(props, _excluded);
 
+  const apiRef = useGridApiContext();
   const rootProps = useGridRootProps();
   const ownerState = {
     classes: rootProps.classes
@@ -33,7 +34,7 @@ export const GridBooleanCell = /*#__PURE__*/React.memo(props => {
   return /*#__PURE__*/_jsx(Icon, _extends({
     fontSize: "small",
     className: classes.root,
-    titleAccess: api.getLocaleText(value ? 'booleanCellTrueLabel' : 'booleanCellFalseLabel'),
+    titleAccess: apiRef.current.getLocaleText(value ? 'booleanCellTrueLabel' : 'booleanCellFalseLabel'),
     "data-value": Boolean(value)
   }, other));
 });

package/modern/components/cell/GridEditBooleanCell.js

@@ -8,6 +8,7 @@ import { unstable_composeClasses as composeClasses } from '@mui/material';
 import { unstable_useId as useId, unstable_useEnhancedEffect as useEnhancedEffect } from '@mui/material/utils';
 import { getDataGridUtilityClass } from '../../constants/gridClasses';
 import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
+import { useGridApiContext } from '../../hooks/utils/useGridApiContext';
 import { jsx as _jsx } from "react/jsx-runtime";
 
 const useUtilityClasses = ownerState => {
@@ -24,7 +25,6 @@ function GridEditBooleanCell(props) {
   const {
     id: idProp,
     value,
-    api,
     field,
     className,
     hasFocus,
@@ -32,6 +32,7 @@ function GridEditBooleanCell(props) {
   } = props,
         other = _objectWithoutPropertiesLoose(props, _excluded);
 
+  const apiRef = useGridApiContext();
   const inputRef = React.useRef(null);
   const id = useId();
   const [valueState, setValueState] = React.useState(value);
@@ -48,12 +49,12 @@ function GridEditBooleanCell(props) {
     }
 
     setValueState(newValue);
-    await api.setEditCellValue({
+    await apiRef.current.setEditCellValue({
       id: idProp,
       field,
       value: newValue
     }, event);
-  }, [api, field, idProp, onValueChange]);
+  }, [apiRef, field, idProp, onValueChange]);
   React.useEffect(() => {
     setValueState(value);
   }, [value]);

package/modern/components/cell/GridEditDateCell.js

@@ -8,6 +8,7 @@ import { unstable_useEnhancedEffect as useEnhancedEffect } from '@mui/material/u
 import InputBase from '@mui/material/InputBase';
 import { getDataGridUtilityClass } from '../../constants/gridClasses';
 import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
+import { useGridApiContext } from '../../hooks/utils/useGridApiContext';
 import { jsx as _jsx } from "react/jsx-runtime";
 
 const useUtilityClasses = ownerState => {
@@ -24,7 +25,6 @@ function GridEditDateCell(props) {
   const {
     id,
     value: valueProp,
-    api,
     field,
     colDef,
     hasFocus,
@@ -34,6 +34,7 @@ function GridEditDateCell(props) {
         other = _objectWithoutPropertiesLoose(props, _excluded);
 
   const isDateTime = colDef.type === 'dateTime';
+  const apiRef = useGridApiContext();
   const inputRef = React.useRef();
   const valueTransformed = React.useMemo(() => {
     let parsedDate;
@@ -93,12 +94,12 @@ function GridEditDateCell(props) {
       parsed: newParsedDate,
       formatted: newFormattedDate
     });
-    api.setEditCellValue({
+    apiRef.current.setEditCellValue({
       id,
       field,
       value: newParsedDate
     }, event);
-  }, [api, field, id, onValueChange]);
+  }, [apiRef, field, id, onValueChange]);
   React.useEffect(() => {
     setValueState(state => {
       if (valueTransformed.parsed !== state.parsed && valueTransformed.parsed?.getTime() !== state.parsed?.getTime()) {

package/modern/components/cell/GridEditInputCell.js

@@ -11,6 +11,7 @@ import { getDataGridUtilityClass } from '../../constants/gridClasses';
 import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
 import { GridLoadIcon } from '../icons/index';
 import { SUBMIT_FILTER_STROKE_TIME } from '../panel/filterPanel/GridFilterInputValue';
+import { useGridApiContext } from '../../hooks/utils/useGridApiContext';
 import { jsx as _jsx } from "react/jsx-runtime";
 
 const useUtilityClasses = ownerState => {
@@ -43,7 +44,6 @@ function GridEditInputCell(props) {
   const {
     id,
     value,
-    api,
     field,
     colDef,
     hasFocus,
@@ -53,6 +53,7 @@ function GridEditInputCell(props) {
   } = props,
         other = _objectWithoutPropertiesLoose(props, _excluded);
 
+  const apiRef = useGridApiContext();
   const inputRef = React.useRef();
   const [valueState, setValueState] = React.useState(value);
   const ownerState = {
@@ -67,13 +68,13 @@ function GridEditInputCell(props) {
     }
 
     setValueState(newValue);
-    api.setEditCellValue({
+    apiRef.current.setEditCellValue({
       id,
       field,
       value: newValue,
       debounceMs
     }, event);
-  }, [api, debounceMs, field, id, onValueChange]);
+  }, [apiRef, debounceMs, field, id, onValueChange]);
   React.useEffect(() => {
     setValueState(value);
   }, [value]);

package/modern/components/cell/GridEditSingleSelectCell.js

@@ -9,6 +9,7 @@ import { isEscapeKey } from '../../utils/keyboardUtils';
 import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
 import { GridEditModes } from '../../models/gridEditRowModel';
 import { getValueFromValueOptions } from '../panel/filterPanel/filterPanelUtils';
+import { useGridApiContext } from '../../hooks/utils/useGridApiContext';
 import { jsx as _jsx } from "react/jsx-runtime";
 
 const renderSingleSelectOptions = (option, OptionComponent) => {
@@ -36,6 +37,7 @@ function GridEditSingleSelectCell(props) {
   } = props,
         other = _objectWithoutPropertiesLoose(props, _excluded);
 
+  const apiRef = useGridApiContext();
   const ref = React.useRef();
   const inputRef = React.useRef();
   const rootProps = useGridRootProps();
@@ -82,7 +84,7 @@ function GridEditSingleSelectCell(props) {
       await onValueChange(event, formattedTargetValue);
     }
 
-    const isValid = await api.setEditCellValue({
+    const isValid = await apiRef.current.setEditCellValue({
       id,
       field,
       value: formattedTargetValue
@@ -97,18 +99,18 @@ function GridEditSingleSelectCell(props) {
       return;
     }
 
-    const canCommit = await Promise.resolve(api.commitCellChange({
+    const canCommit = await Promise.resolve(apiRef.current.commitCellChange({
       id,
       field
     }, event));
 
     if (canCommit) {
-      api.setCellMode(id, field, 'view');
+      apiRef.current.setCellMode(id, field, 'view');
 
       if (event.key) {
         // TODO v6: remove once we stop ignoring events fired from portals
-        const params = api.getCellParams(id, field);
-        api.publishEvent('cellNavigationKeyDown', params, event);
+        const params = apiRef.current.getCellParams(id, field);
+        apiRef.current.publishEvent('cellNavigationKeyDown', params, event);
       }
     }
   };
@@ -121,13 +123,13 @@ function GridEditSingleSelectCell(props) {
 
     if (reason === 'backdropClick' || isEscapeKey(event.key)) {
       if (rootProps.experimentalFeatures?.newEditingApi) {
-        api.stopCellEditMode({
+        apiRef.current.stopCellEditMode({
           id,
           field,
           ignoreModifications: true
         });
       } else {
-        api.setCellMode(id, field, 'view');
+        apiRef.current.setCellMode(id, field, 'view');
       }
     }
   };

package/modern/components/columnHeaders/GridColumnHeaderItem.js

@@ -165,6 +165,7 @@ function GridColumnHeaderItem(props) {
     field: column.field,
     colDef: column
   }) : column.headerClassName;
+  const label = column.headerName ?? column.field;
   return /*#__PURE__*/_jsxs("div", _extends({
     ref: headerCellRef,
     className: clsx(classes.root, headerClassName),
@@ -177,7 +178,8 @@ function GridColumnHeaderItem(props) {
     role: "columnheader",
     tabIndex: tabIndex,
     "aria-colindex": colIndex + 1,
-    "aria-sort": ariaSort
+    "aria-sort": ariaSort,
+    "aria-label": column.renderHeader && headerComponent == null ? label : undefined
   }, mouseEventsHandlers, {
     children: [/*#__PURE__*/_jsxs("div", _extends({
       className: classes.draggableContainer,
@@ -187,8 +189,8 @@ function GridColumnHeaderItem(props) {
         className: classes.titleContainer,
         children: [/*#__PURE__*/_jsx("div", {
           className: classes.titleContainerContent,
-          children: headerComponent || /*#__PURE__*/_jsx(GridColumnHeaderTitle, {
-            label: column.headerName ?? column.field,
+          children: column.renderHeader ? headerComponent : /*#__PURE__*/_jsx(GridColumnHeaderTitle, {
+            label: label,
             description: column.description,
             columnWidth: width
           })

package/modern/components/columnSelection/GridCellCheckboxRenderer.js

@@ -81,7 +81,6 @@ const GridCellCheckboxForwardRef = /*#__PURE__*/React.forwardRef(function GridCe
     checked: isChecked,
     onChange: handleChange,
     className: classes.root,
-    color: "primary",
     inputProps: {
       'aria-label': label
     },

package/modern/components/columnSelection/GridHeaderCheckbox.js

@@ -109,7 +109,6 @@ const GridHeaderCheckbox = /*#__PURE__*/React.forwardRef(function GridHeaderChec
     checked: isChecked,
     onChange: handleChange,
     className: classes.root,
-    color: "primary",
     inputProps: {
       'aria-label': label
     },

package/modern/components/containers/GridRootStyles.js

@@ -165,7 +165,7 @@ export const GridRootStyles = styled('div', {
       minWidth: 0,
       flex: 1,
       whiteSpace: 'nowrap',
-      overflow: 'hidden'
+      overflowX: 'hidden'
     },
     [`& .${gridClasses.columnHeaderTitleContainerContent}`]: {
       overflow: 'hidden',
@@ -221,6 +221,9 @@ export const GridRootStyles = styled('div', {
       },
       [`&.${gridClasses['columnSeparator--resizing']}`]: {
         color: theme.palette.text.primary
+      },
+      '& svg': {
+        pointerEvents: 'none'
       }
     },
     [`& .${gridClasses.iconSeparator}`]: {

package/modern/components/panel/GridColumnsPanel.js

@@ -79,7 +79,7 @@ export function GridColumnsPanel(props) {
         return apiRef.current.setColumnVisibilityModel({});
       }
 
-      return apiRef.current.setColumnVisibilityModel(Object.fromEntries(columns.map(col => [col.field, false])));
+      return apiRef.current.setColumnVisibilityModel(Object.fromEntries(columns.filter(col => col.hideable !== false).map(col => [col.field, false])));
     } // TODO v6: Remove
 
 
@@ -130,7 +130,6 @@ export function GridColumnsPanel(props) {
               checked: columnVisibilityModel[column.field] !== false,
               onClick: toggleColumn,
               name: column.field,
-              color: "primary",
               size: "small"
             }, rootProps.componentsProps?.baseSwitch)),
             label: column.headerName || column.field
@@ -146,13 +145,11 @@ export function GridColumnsPanel(props) {
       })
     }), /*#__PURE__*/_jsxs(GridPanelFooter, {
       children: [/*#__PURE__*/_jsx(rootProps.components.BaseButton, _extends({
-        onClick: () => toggleAllColumns(false),
-        color: "primary"
+        onClick: () => toggleAllColumns(false)
       }, rootProps.componentsProps?.baseButton, {
         children: apiRef.current.getLocaleText('columnsPanelHideAllButton')
       })), /*#__PURE__*/_jsx(rootProps.components.BaseButton, _extends({
-        onClick: () => toggleAllColumns(true),
-        color: "primary"
+        onClick: () => toggleAllColumns(true)
       }, rootProps.componentsProps?.baseButton, {
         children: apiRef.current.getLocaleText('columnsPanelShowAllButton')
       }))]