@mui/x-data-grid 5.13.1 → 5.15.1

package/components/columnSelection/GridCellCheckboxRenderer.js

@@ -28,6 +28,7 @@ const GridCellCheckboxForwardRef = /*#__PURE__*/React.forwardRef(function GridCe
     field,
     id,
     value: isChecked,
+    rowNode,
     hasFocus,
     tabIndex
   } = props,
@@ -77,8 +78,18 @@ const GridCellCheckboxForwardRef = /*#__PURE__*/React.forwardRef(function GridCe
       apiRef.current.publishEvent('cellNavigationKeyDown', props, event);
     }
   }, [apiRef, props]);
-  const isSelectable = !rootProps.isRowSelectable || rootProps.isRowSelectable(apiRef.current.getRowParams(id));
+
+  if (rowNode.position === 'footer') {
+    return null;
+  }
+
+  const isSelectable = apiRef.current.isRowSelectable(id);
   const label = apiRef.current.getLocaleText(isChecked ? 'checkboxSelectionUnselectRow' : 'checkboxSelectionSelectRow');
+
+  if (rowNode.isPinned) {
+    return null;
+  }
+
   return /*#__PURE__*/_jsx(rootProps.components.BaseCheckbox, _extends({
     ref: handleRef,
     tabIndex: tabIndex,

package/components/containers/GridRoot.js

@@ -12,7 +12,7 @@ import { useGridSelector } from '../../hooks/utils/useGridSelector';
 import { useGridApiContext } from '../../hooks/utils/useGridApiContext';
 import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
 import { getDataGridUtilityClass } from '../../constants/gridClasses';
-import { gridRowCountSelector } from '../../hooks/features/rows/gridRowsSelector';
+import { gridPinnedRowsCountSelector, gridRowCountSelector } from '../../hooks/features/rows/gridRowsSelector';
 import { gridDensityValueSelector } from '../../hooks/features/density/densitySelector';
 import { jsx as _jsx } from "react/jsx-runtime";
 
@@ -43,6 +43,7 @@ const GridRoot = /*#__PURE__*/React.forwardRef(function GridRoot(props, ref) {
   const densityValue = useGridSelector(apiRef, gridDensityValueSelector);
   const rootContainerRef = React.useRef(null);
   const handleRef = useForkRef(rootContainerRef, ref);
+  const pinnedRowsCount = useGridSelector(apiRef, gridPinnedRowsCountSelector);
   const ownerState = {
     density: densityValue,
     classes: rootProps.classes,
@@ -70,7 +71,8 @@ const GridRoot = /*#__PURE__*/React.forwardRef(function GridRoot(props, ref) {
     className: clsx(className, classes.root),
     role: "grid",
     "aria-colcount": visibleColumns.length,
-    "aria-rowcount": totalRowCount,
+    "aria-rowcount": totalRowCount + pinnedRowsCount + 1 // +1 for the header row
+    ,
     "aria-multiselectable": !rootProps.disableMultipleSelection,
     "aria-label": rootProps['aria-label'],
     "aria-labelledby": rootProps['aria-labelledby']

package/components/containers/GridRootStyles.js

@@ -6,6 +6,16 @@ export const GridRootStyles = styled('div', {
   slot: 'Root',
   overridesResolver: (props, styles) => [{
     [`&.${gridClasses.autoHeight}`]: styles.autoHeight
+  }, {
+    [`&.${gridClasses.aggregationColumnHeader}`]: styles.aggregationColumnHeader
+  }, {
+    [`&.${gridClasses['aggregationColumnHeader--alignLeft']}`]: styles['aggregationColumnHeader--alignLeft']
+  }, {
+    [`&.${gridClasses['aggregationColumnHeader--alignCenter']}`]: styles['aggregationColumnHeader--alignCenter']
+  }, {
+    [`&.${gridClasses['aggregationColumnHeader--alignRight']}`]: styles['aggregationColumnHeader--alignRight']
+  }, {
+    [`&.${gridClasses.aggregationColumnHeaderLabel}`]: styles.aggregationColumnHeaderLabel
   }, {
     [`& .${gridClasses.editBooleanCell}`]: styles.editBooleanCell
   }, {

package/components/toolbar/GridToolbarDensitySelector.js

@@ -59,11 +59,20 @@ export const GridToolbarDensitySelector = /*#__PURE__*/React.forwardRef(function
   }, [densityValue, rootProps]);
 
   const handleDensitySelectorOpen = event => {
-    setOpen(true);
+    setOpen(prevOpen => !prevOpen);
     onClick == null ? void 0 : onClick(event);
   };
 
-  const handleDensitySelectorClose = () => setOpen(false);
+  const handleDensitySelectorClickAway = event => {
+    var _buttonRef$current;
+
+    if (buttonRef.current === event.target || // if user clicked on the icon
+    (_buttonRef$current = buttonRef.current) != null && _buttonRef$current.contains(event.target)) {
+      return;
+    }
+
+    setOpen(false);
+  };
 
   const handleDensityUpdate = newDensity => {
     apiRef.current.setDensity(newDensity);
@@ -76,7 +85,7 @@ export const GridToolbarDensitySelector = /*#__PURE__*/React.forwardRef(function
     }
 
     if (isHideMenuKey(event.key)) {
-      handleDensitySelectorClose();
+      setOpen(false);
     }
   }; // Disable the button if the corresponding is disabled
 
@@ -109,7 +118,7 @@ export const GridToolbarDensitySelector = /*#__PURE__*/React.forwardRef(function
     })), /*#__PURE__*/_jsx(GridMenu, {
       open: open,
       target: buttonRef.current,
-      onClickAway: handleDensitySelectorClose,
+      onClickAway: handleDensitySelectorClickAway,
       position: "bottom-start",
       children: /*#__PURE__*/_jsx(MenuList, {
         id: densityMenuId,

package/components/toolbar/GridToolbarExport.js

@@ -1,6 +1,8 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["csvOptions", "printOptions", "excelOptions"];
+const _excluded = ["hideMenu", "options"],
+      _excluded2 = ["hideMenu", "options"],
+      _excluded3 = ["csvOptions", "printOptions", "excelOptions"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import MenuItem from '@mui/material/MenuItem';
@@ -9,31 +11,39 @@ import { GridToolbarExportContainer } from './GridToolbarExportContainer';
 import { jsx as _jsx } from "react/jsx-runtime";
 export const GridCsvExportMenuItem = props => {
   const apiRef = useGridApiContext();
+
   const {
     hideMenu,
     options
-  } = props;
-  return /*#__PURE__*/_jsx(MenuItem, {
+  } = props,
+        other = _objectWithoutPropertiesLoose(props, _excluded);
+
+  return /*#__PURE__*/_jsx(MenuItem, _extends({
     onClick: () => {
       apiRef.current.exportDataAsCsv(options);
       hideMenu == null ? void 0 : hideMenu();
-    },
+    }
+  }, other, {
     children: apiRef.current.getLocaleText('toolbarExportCSV')
-  });
+  }));
 };
 export const GridPrintExportMenuItem = props => {
   const apiRef = useGridApiContext();
+
   const {
     hideMenu,
     options
-  } = props;
-  return /*#__PURE__*/_jsx(MenuItem, {
+  } = props,
+        other = _objectWithoutPropertiesLoose(props, _excluded2);
+
+  return /*#__PURE__*/_jsx(MenuItem, _extends({
     onClick: () => {
       apiRef.current.exportDataAsPrint(options);
       hideMenu == null ? void 0 : hideMenu();
-    },
+    }
+  }, other, {
     children: apiRef.current.getLocaleText('toolbarExportPrint')
-  });
+  }));
 };
 const GridToolbarExport = /*#__PURE__*/React.forwardRef(function GridToolbarExport(props, ref) {
   const {
@@ -41,7 +51,7 @@ const GridToolbarExport = /*#__PURE__*/React.forwardRef(function GridToolbarExpo
     printOptions = {},
     excelOptions
   } = props,
-        other = _objectWithoutPropertiesLoose(props, _excluded);
+        other = _objectWithoutPropertiesLoose(props, _excluded3);
 
   const apiRef = useGridApiContext();
   const preProcessedButtons = apiRef.current.unstable_applyPipeProcessors('exportMenu', [], {

package/components/toolbar/GridToolbarExportContainer.js

@@ -29,7 +29,7 @@ export const GridToolbarExportContainer = /*#__PURE__*/React.forwardRef(function
   const handleRef = useForkRef(ref, buttonRef);
 
   const handleMenuOpen = event => {
-    setOpen(true);
+    setOpen(prevOpen => !prevOpen);
     onClick == null ? void 0 : onClick(event);
   };
 
@@ -45,6 +45,17 @@ export const GridToolbarExportContainer = /*#__PURE__*/React.forwardRef(function
     }
   };
 
+  const handleMenuClickAway = event => {
+    var _buttonRef$current;
+
+    if (buttonRef.current === event.target || // if user clicked on the icon
+    (_buttonRef$current = buttonRef.current) != null && _buttonRef$current.contains(event.target)) {
+      return;
+    }
+
+    setOpen(false);
+  };
+
   if (children == null) {
     return null;
   }
@@ -66,7 +77,7 @@ export const GridToolbarExportContainer = /*#__PURE__*/React.forwardRef(function
     })), /*#__PURE__*/_jsx(GridMenu, {
       open: open,
       target: buttonRef.current,
-      onClickAway: handleMenuClose,
+      onClickAway: handleMenuClickAway,
       position: "bottom-start",
       children: /*#__PURE__*/_jsx(MenuList, {
         id: menuId,

package/constants/envConstants.d.ts

@@ -1 +1 @@
-export declare const GRID_EXPERIMENTAL_ENABLED: boolean;
+export declare const GRID_EXPERIMENTAL_ENABLED = false;

package/constants/envConstants.js

@@ -1,4 +1,4 @@
-import { localStorageAvailable } from '../utils/utils'; // A guide to feature toggling.
+// A guide to feature toggling (deprecated)
 //
 // The feature toggle is:
 // - independent from the NODE_ENV
@@ -15,13 +15,4 @@ import { localStorageAvailable } from '../utils/utils'; // A guide to feature to
 //
 // Developers (users) are discouraged to enable the experimental feature by setting the GRID_EXPERIMENTAL_ENABLED env.
 // Instead, prefer exposing experimental APIs, for instance, a prop or a new `unstable_` module.
-
-let experimentalEnabled = false;
-
-if (typeof process !== 'undefined' && process.env.GRID_EXPERIMENTAL_ENABLED !== undefined && localStorageAvailable() && window.localStorage.getItem('GRID_EXPERIMENTAL_ENABLED')) {
-  experimentalEnabled = window.localStorage.getItem('GRID_EXPERIMENTAL_ENABLED') === 'true';
-} else if (typeof process !== 'undefined') {
-  experimentalEnabled = process.env.GRID_EXPERIMENTAL_ENABLED === 'true';
-}
-
-export const GRID_EXPERIMENTAL_ENABLED = experimentalEnabled;
+export const GRID_EXPERIMENTAL_ENABLED = false;

package/constants/gridClasses.d.ts

@@ -1,8 +1,28 @@
 export interface GridClasses {
     /**
-     * Styles applied to the root element of the cell with type="actions"
+     * Styles applied to the root element of the cell with type="actions".
      */
     actionsCell: string;
+    /**
+     * Styles applied to the root element of the column header when aggregated.
+     */
+    aggregationColumnHeader: string;
+    /**
+     * Styles applied to the root element of the header when aggregation if `headerAlign="left"`.
+     */
+    'aggregationColumnHeader--alignLeft': string;
+    /**
+     * Styles applied to the root element of the header when aggregation if `headerAlign="center"`.
+     */
+    'aggregationColumnHeader--alignCenter': string;
+    /**
+     * Styles applied to the root element of the header when aggregation if `headerAlign="right"`.
+     */
+    'aggregationColumnHeader--alignRight': string;
+    /**
+     * Styles applied to the aggregation label in the column header when aggregated.
+     */
+    aggregationColumnHeaderLabel: string;
     /**
      * Styles applied to the root element if `autoHeight={true}`.
      */
@@ -175,6 +195,10 @@ export interface GridClasses {
      * Styles applied to the detail panel toggle cell element if expanded.
      */
     'detailPanelToggleCell--expanded': string;
+    /**
+     * Styles applied to the root element of the cell inside a footer row.
+     */
+    footerCell: string;
     /**
      * Styles applied to the panel element.
      */
@@ -420,6 +444,22 @@ export interface GridClasses {
      * Styles applied to the toggle of the grouping criteria cell
      */
     groupingCriteriaCellToggle: string;
+    /**
+     * Styles applied to the pinned rows container.
+     */
+    pinnedRows: string;
+    /**
+     * Styles applied to the top pinned rows container.
+     */
+    'pinnedRows--top': string;
+    /**
+     * Styles applied to the bottom pinned rows container.
+     */
+    'pinnedRows--bottom': string;
+    /**
+     * Styles applied to pinned rows render zones.
+     */
+    pinnedRowsRenderZone: string;
 }
 export declare type GridClassKey = keyof GridClasses;
 export declare function getDataGridUtilityClass(slot: string): string;

package/constants/gridClasses.js

@@ -2,4 +2,4 @@ import { generateUtilityClasses, generateUtilityClass } from '@mui/material';
 export function getDataGridUtilityClass(slot) {
   return generateUtilityClass('MuiDataGrid', slot);
 }
-export const gridClasses = generateUtilityClasses('MuiDataGrid', ['actionsCell', 'autoHeight', 'booleanCell', 'cell--editable', 'cell--editing', 'cell--textCenter', 'cell--textLeft', 'cell--textRight', 'cell--withRenderer', 'cell', 'cellContent', 'cellCheckbox', 'checkboxInput', 'columnHeader--alignCenter', 'columnHeader--alignLeft', 'columnHeader--alignRight', 'columnHeader--dragging', 'columnHeader--moving', 'columnHeader--numeric', 'columnHeader--sortable', 'columnHeader--sorted', 'columnHeader--filtered', 'columnHeader', 'columnHeaderCheckbox', 'columnHeaderDraggableContainer', 'columnHeaderDropZone', 'columnHeaderTitle', 'columnHeaderTitleContainer', 'columnHeaderTitleContainerContent', 'columnHeaders', 'columnHeadersInner', 'columnHeadersInner--scrollable', 'columnSeparator--resizable', 'columnSeparator--resizing', 'columnSeparator--sideLeft', 'columnSeparator--sideRight', 'columnSeparator', 'columnsPanel', 'columnsPanelRow', 'detailPanel', 'detailPanels', 'detailPanelToggleCell', 'detailPanelToggleCell--expanded', 'panel', 'panelHeader', 'panelWrapper', 'panelContent', 'panelFooter', 'paper', 'editBooleanCell', 'editInputCell', 'filterForm', 'filterFormDeleteIcon', 'filterFormLinkOperatorInput', 'filterFormColumnInput', 'filterFormOperatorInput', 'filterFormValueInput', 'filterIcon', 'footerContainer', 'iconButtonContainer', 'iconSeparator', 'main', 'menu', 'menuIcon', 'menuIconButton', 'menuOpen', 'menuList', 'overlay', 'root', 'root--densityStandard', 'root--densityComfortable', 'root--densityCompact', 'row', 'row--editable', 'row--editing', 'row--lastVisible', 'row--dragging', 'row--dynamicHeight', 'rowReorderCellPlaceholder', 'rowCount', 'rowReorderCellContainer', 'rowReorderCell', 'rowReorderCell--draggable', 'scrollArea--left', 'scrollArea--right', 'scrollArea', 'selectedRowCount', 'sortIcon', 'toolbarContainer', 'toolbarFilterList', 'virtualScroller', 'virtualScrollerContent', 'virtualScrollerContent--overflowed', 'virtualScrollerRenderZone', 'pinnedColumns', 'pinnedColumns--left', 'pinnedColumns--right', 'pinnedColumnHeaders', 'pinnedColumnHeaders--left', 'pinnedColumnHeaders--right', 'withBorder', 'treeDataGroupingCell', 'treeDataGroupingCellToggle', 'groupingCriteriaCell', 'groupingCriteriaCellToggle']);
+export const gridClasses = generateUtilityClasses('MuiDataGrid', ['actionsCell', 'aggregationColumnHeader', 'aggregationColumnHeader--alignLeft', 'aggregationColumnHeader--alignCenter', 'aggregationColumnHeader--alignRight', 'autoHeight', 'booleanCell', 'cell--editable', 'cell--editing', 'cell--textCenter', 'cell--textLeft', 'cell--textRight', 'cell--withRenderer', 'cell', 'cellContent', 'cellCheckbox', 'checkboxInput', 'columnHeader--alignCenter', 'columnHeader--alignLeft', 'columnHeader--alignRight', 'columnHeader--dragging', 'columnHeader--moving', 'columnHeader--numeric', 'columnHeader--sortable', 'columnHeader--sorted', 'columnHeader--filtered', 'columnHeader', 'columnHeaderCheckbox', 'columnHeaderDraggableContainer', 'columnHeaderDropZone', 'columnHeaderTitle', 'columnHeaderTitleContainer', 'columnHeaderTitleContainerContent', 'columnHeaders', 'columnHeadersInner', 'columnHeadersInner--scrollable', 'columnSeparator--resizable', 'columnSeparator--resizing', 'columnSeparator--sideLeft', 'columnSeparator--sideRight', 'columnSeparator', 'columnsPanel', 'columnsPanelRow', 'detailPanel', 'detailPanels', 'detailPanelToggleCell', 'detailPanelToggleCell--expanded', 'footerCell', 'panel', 'panelHeader', 'panelWrapper', 'panelContent', 'panelFooter', 'paper', 'editBooleanCell', 'editInputCell', 'filterForm', 'filterFormDeleteIcon', 'filterFormLinkOperatorInput', 'filterFormColumnInput', 'filterFormOperatorInput', 'filterFormValueInput', 'filterIcon', 'footerContainer', 'iconButtonContainer', 'iconSeparator', 'main', 'menu', 'menuIcon', 'menuIconButton', 'menuOpen', 'menuList', 'overlay', 'root', 'root--densityStandard', 'root--densityComfortable', 'root--densityCompact', 'row', 'row--editable', 'row--editing', 'row--lastVisible', 'row--dragging', 'row--dynamicHeight', 'rowReorderCellPlaceholder', 'rowCount', 'rowReorderCellContainer', 'rowReorderCell', 'rowReorderCell--draggable', 'scrollArea--left', 'scrollArea--right', 'scrollArea', 'selectedRowCount', 'sortIcon', 'toolbarContainer', 'toolbarFilterList', 'virtualScroller', 'virtualScrollerContent', 'virtualScrollerContent--overflowed', 'virtualScrollerRenderZone', 'pinnedColumns', 'pinnedColumns--left', 'pinnedColumns--right', 'pinnedColumnHeaders', 'pinnedColumnHeaders--left', 'pinnedColumnHeaders--right', 'withBorder', 'treeDataGroupingCell', 'treeDataGroupingCellToggle', 'groupingCriteriaCell', 'groupingCriteriaCellToggle', 'pinnedRows', 'pinnedRows--top', 'pinnedRows--bottom', 'pinnedRowsRenderZone']);

package/constants/localeTextConstants.js

@@ -19,7 +19,7 @@ export const GRID_DEFAULT_LOCALE_TEXT = {
   toolbarFiltersTooltipShow: 'Show filters',
   toolbarFiltersTooltipActive: count => count !== 1 ? `${count} active filters` : `${count} active filter`,
   // Quick filter toolbar field
-  toolbarQuickFilterPlaceholder: 'Search...',
+  toolbarQuickFilterPlaceholder: 'Search…',
   toolbarQuickFilterLabel: 'Search',
   toolbarQuickFilterDeleteIconLabel: 'Clear',
   // Export selector toolbar button text
@@ -111,5 +111,12 @@ export const GRID_DEFAULT_LOCALE_TEXT = {
   // Used core components translation keys
   MuiTablePagination: {},
   // Row reordering text
-  rowReorderingHeaderName: 'Row reordering'
+  rowReorderingHeaderName: 'Row reordering',
+  // Aggregation
+  aggregationMenuItemHeader: 'Aggregation',
+  aggregationFunctionLabelSum: 'sum',
+  aggregationFunctionLabelAvg: 'avg',
+  aggregationFunctionLabelMin: 'min',
+  aggregationFunctionLabelMax: 'max',
+  aggregationFunctionLabelSize: 'size'
 };

package/hooks/core/pipeProcessing/gridPipeProcessingApi.d.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { GridCellIndexCoordinates, GridScrollParams, GridColDef } from '../../../models';
 import { GridInitialStateCommunity } from '../../../models/gridStateCommunity';
-import { GridRestoreStatePreProcessingContext, GridRestoreStatePreProcessingValue } from '../../features/statePersistence/gridStatePersistenceInterface';
+import { GridExportStateParams, GridRestoreStatePreProcessingContext, GridRestoreStatePreProcessingValue } from '../../features/statePersistence/gridStatePersistenceInterface';
 import { GridHydrateColumnsValue } from '../../features/columns/gridColumnsInterfaces';
 import { GridRowEntry } from '../../../models/gridRows';
 import { GridHydrateRowsValue } from '../../features/rows/gridRowsState';
@@ -14,6 +14,7 @@ export interface GridPipeProcessingLookup {
     };
     exportState: {
         value: GridInitialStateCommunity;
+        context: GridExportStateParams;
     };
     hydrateColumns: {
         value: GridHydrateColumnsValue;

package/hooks/features/columns/useGridColumnSpanning.js

@@ -28,11 +28,11 @@ export const useGridColumnSpanning = apiRef => {
       columnIndex,
       rowId,
       minFirstColumnIndex,
-      maxLastColumnIndex
+      maxLastColumnIndex,
+      columns
     } = params;
-    const visibleColumns = apiRef.current.getVisibleColumns();
-    const columnsLength = visibleColumns.length;
-    const column = visibleColumns[columnIndex];
+    const columnsLength = columns.length;
+    const column = columns[columnIndex];
     const colSpan = typeof column.colSpan === 'function' ? column.colSpan(apiRef.current.getCellParams(rowId, column.field)) : column.colSpan;
 
     if (!colSpan || colSpan === 1) {
@@ -54,7 +54,7 @@ export const useGridColumnSpanning = apiRef => {
       const nextColumnIndex = columnIndex + j; // Cells should be spanned only within their column section (left-pinned, right-pinned and unpinned).
 
       if (nextColumnIndex >= minFirstColumnIndex && nextColumnIndex < maxLastColumnIndex) {
-        const nextColumn = visibleColumns[nextColumnIndex];
+        const nextColumn = columns[nextColumnIndex];
         width += nextColumn.computedWidth;
         setCellColSpanInfo(rowId, columnIndex + j, {
           spannedByColSpan: true,
@@ -80,14 +80,16 @@ export const useGridColumnSpanning = apiRef => {
   const calculateColSpan = React.useCallback(({
     rowId,
     minFirstColumn,
-    maxLastColumn
+    maxLastColumn,
+    columns
   }) => {
     for (let i = minFirstColumn; i < maxLastColumn; i += 1) {
       const cellProps = calculateCellColSpan({
         columnIndex: i,
         rowId,
         minFirstColumnIndex: minFirstColumn,
-        maxLastColumnIndex: maxLastColumn
+        maxLastColumnIndex: maxLastColumn,
+        columns
       });
 
       if (cellProps.colSpan > 1) {

package/hooks/features/columns/useGridColumns.d.ts

@@ -8,4 +8,4 @@ export declare const columnsStateInitializer: GridStateInitializer<Pick<DataGrid
  * @requires useGridDimensions (method, event) - can be after
  * TODO: Impossible priority - useGridParamsApi also needs to be after useGridColumns
  */
-export declare function useGridColumns(apiRef: React.MutableRefObject<GridApiCommunity>, props: Pick<DataGridProcessedProps, 'columns' | 'onColumnVisibilityChange' | 'columnVisibilityModel' | 'onColumnVisibilityModelChange' | 'columnTypes' | 'components' | 'componentsProps'>): void;
+export declare function useGridColumns(apiRef: React.MutableRefObject<GridApiCommunity>, props: Pick<DataGridProcessedProps, 'initialState' | 'columns' | 'onColumnVisibilityChange' | 'columnVisibilityModel' | 'onColumnVisibilityModelChange' | 'columnTypes' | 'components' | 'componentsProps'>): void;

package/hooks/features/columns/useGridColumns.js

@@ -36,7 +36,7 @@ export const columnsStateInitializer = (state, props, apiRef) => {
  */
 
 export function useGridColumns(apiRef, props) {
-  var _props$componentsProp2;
+  var _props$initialState5, _props$componentsProp2;
 
   const logger = useGridLogger(apiRef, 'useGridColumns');
   const columnTypes = React.useMemo(() => computeColumnTypes(props.columnTypes), [props.columnTypes]);
@@ -192,14 +192,21 @@ export function useGridColumns(apiRef, props) {
    * PRE-PROCESSING
    */
 
-  const stateExportPreProcessing = React.useCallback(prevState => {
+  const stateExportPreProcessing = React.useCallback((prevState, context) => {
     const columnsStateToExport = {};
 
     if (apiRef.current.unstable_caches.columns.isUsingColumnVisibilityModel) {
-      const columnVisibilityModelToExport = gridColumnVisibilityModelSelector(apiRef);
-      const hasHiddenColumns = Object.values(columnVisibilityModelToExport).some(value => value === false);
+      var _props$initialState$c2, _props$initialState4, _props$initialState4$;
 
-      if (hasHiddenColumns) {
+      const columnVisibilityModelToExport = gridColumnVisibilityModelSelector(apiRef);
+      const shouldExportColumnVisibilityModel = // Always export if the `exportOnlyDirtyModels` property is activated
+      !context.exportOnlyDirtyModels || // Always export if the model is controlled
+      props.columnVisibilityModel != null || // Always export if the model has been initialized
+      // TODO v6 Do a nullish check instead to export even if the initial model equals "{}"
+      Object.keys((_props$initialState$c2 = (_props$initialState4 = props.initialState) == null ? void 0 : (_props$initialState4$ = _props$initialState4.columns) == null ? void 0 : _props$initialState4$.columnVisibilityModel) != null ? _props$initialState$c2 : {}).length > 0 || // Always export if the model is not empty
+      Object.keys(columnVisibilityModelToExport).length > 0;
+
+      if (shouldExportColumnVisibilityModel) {
         columnsStateToExport.columnVisibilityModel = columnVisibilityModelToExport;
       }
     }
@@ -230,7 +237,7 @@ export function useGridColumns(apiRef, props) {
     return _extends({}, prevState, {
       columns: columnsStateToExport
     });
-  }, [apiRef]);
+  }, [apiRef, props.columnVisibilityModel, (_props$initialState5 = props.initialState) == null ? void 0 : _props$initialState5.columns]);
   const stateRestorePreProcessing = React.useCallback((params, context) => {
     var _context$stateToResto;
 

package/hooks/features/dimensions/useGridDimensions.js

@@ -8,6 +8,7 @@ import { gridDensityHeaderHeightSelector, gridDensityRowHeightSelector } from '.
 import { useGridSelector } from '../../utils';
 import { getVisibleRows } from '../../utils/useGridVisibleRows';
 import { gridRowsMetaSelector } from '../rows/gridRowsMetaSelector';
+import { calculatePinnedRowsHeight } from '../rows/gridRowsUtils';
 const isTestEnvironment = process.env.NODE_ENV === 'test';
 
 const hasScroll = ({
@@ -47,6 +48,7 @@ export function useGridDimensions(apiRef, props) {
 
     const rootElement = (_apiRef$current$rootE = apiRef.current.rootElementRef) == null ? void 0 : _apiRef$current$rootE.current;
     const columnsTotalWidth = gridColumnsTotalWidthSelector(apiRef);
+    const pinnedRowsHeight = calculatePinnedRowsHeight(apiRef);
 
     if (!rootDimensionsRef.current) {
       return;
@@ -92,7 +94,10 @@ export function useGridDimensions(apiRef, props) {
           width: Math.round(columnsTotalWidth),
           height: rowsMeta.currentPageTotalHeight
         },
-        container: viewportOuterSize,
+        container: {
+          width: viewportOuterSize.width,
+          height: viewportOuterSize.height - pinnedRowsHeight.top - pinnedRowsHeight.bottom
+        },
         scrollBarSize
       });
       hasScrollY = scrollInformation.hasScrollY;

package/hooks/features/editRows/useGridCellEditing.new.d.ts

@@ -1,4 +1,4 @@
 import * as React from 'react';
 import { GridApiCommunity } from '../../../models/api/gridApiCommunity';
 import { DataGridProcessedProps } from '../../../models/props/DataGridProps';
-export declare const useGridCellEditing: (apiRef: React.MutableRefObject<GridApiCommunity>, props: Pick<DataGridProcessedProps, 'editMode' | 'processRowUpdate' | 'onCellEditStart' | 'onCellEditStop' | 'cellModesModel' | 'onCellModesModelChange' | 'onProcessRowUpdateError' | 'signature'>) => void;
+export declare const useGridCellEditing: (apiRef: React.MutableRefObject<GridApiCommunity>, props: Pick<DataGridProcessedProps, 'editMode' | 'processRowUpdate' | 'onCellEditStart' | 'onCellEditStop' | 'cellModesModel' | 'onCellModesModelChange' | 'onProcessRowUpdateError' | 'signature' | 'disableIgnoreModificationsIfProcessingProps'>) => void;

package/hooks/features/editRows/useGridCellEditing.new.js

@@ -97,15 +97,14 @@ export const useGridCellEditing = (apiRef, props) => {
     } else if (params.isEditable) {
       let reason;
 
-      if (isPrintableKey(event.key)) {
-        if (event.ctrlKey && event.key !== 'v' || event.metaKey && event.key !== 'v' || event.altKey) {
-          return;
-        }
-
+      if (isPrintableKey(event)) {
+        reason = GridCellEditStartReasons.printableKeyDown;
+      } else if ((event.ctrlKey || event.metaKey) && event.key === 'v') {
         reason = GridCellEditStartReasons.printableKeyDown;
       } else if (event.key === 'Enter') {
         reason = GridCellEditStartReasons.enterKeyDown;
-      } else if (event.key === 'Delete') {
+      } else if (event.key === 'Delete' || event.key === 'Backspace') {
+        // Delete on Windows, Backspace on macOS
         reason = GridCellEditStartReasons.deleteKeyDown;
       }
 
@@ -141,6 +140,7 @@ export const useGridCellEditing = (apiRef, props) => {
       field,
       reason
     } = params;
+    apiRef.current.unstable_runPendingEditCellValueMutation(id, field);
     let cellToFocusAfter;
 
     if (reason === GridCellEditStopReasons.enterKeyDown) {
@@ -154,7 +154,7 @@ export const useGridCellEditing = (apiRef, props) => {
     let ignoreModifications = reason === 'escapeKeyDown';
     const editingState = gridEditRowsStateSelector(apiRef.current.state);
 
-    if (editingState[id][field].isProcessingProps) {
+    if (editingState[id][field].isProcessingProps && !props.disableIgnoreModificationsIfProcessingProps) {
       // The user wants to stop editing the cell but we can't wait for the props to be processed.
       // In this case, discard the modifications.
       ignoreModifications = true;
@@ -166,7 +166,7 @@ export const useGridCellEditing = (apiRef, props) => {
       ignoreModifications,
       cellToFocusAfter
     });
-  }, [apiRef]);
+  }, [apiRef, props.disableIgnoreModificationsIfProcessingProps]);
   useGridApiEventHandler(apiRef, 'cellDoubleClick', runIfEditModeIsCell(handleCellDoubleClick));
   useGridApiEventHandler(apiRef, 'cellFocusOut', runIfEditModeIsCell(handleCellFocusOut));
   useGridApiEventHandler(apiRef, 'cellKeyDown', runIfEditModeIsCell(handleCellKeyDown));
@@ -343,6 +343,8 @@ export const useGridCellEditing = (apiRef, props) => {
     }
   }, [apiRef, onProcessRowUpdateError, processRowUpdate, throwIfNotInMode, updateFieldInCellModesModel, updateOrDeleteFieldState]);
   const setCellEditingEditCellValue = React.useCallback(async params => {
+    var _editingState$id, _editingState$id$fiel;
+
     const {
       id,
       field,
@@ -394,7 +396,7 @@ export const useGridCellEditing = (apiRef, props) => {
     newProps.value = column.preProcessEditCellProps ? editingState[id][field].value : parsedValue;
     updateOrDeleteFieldState(id, field, newProps);
     editingState = gridEditRowsStateSelector(apiRef.current.state);
-    return !editingState[id][field].error;
+    return !((_editingState$id = editingState[id]) != null && (_editingState$id$fiel = _editingState$id[field]) != null && _editingState$id$fiel.error);
   }, [apiRef, throwIfNotEditable, throwIfNotInMode, updateOrDeleteFieldState]);
   const getRowWithUpdatedValuesFromCellEditing = React.useCallback((id, field) => {
     const column = apiRef.current.getColumn(field);

package/hooks/features/editRows/useGridCellEditing.old.js

@@ -199,7 +199,7 @@ export const useCellEditing = (apiRef, props) => {
     const isEditMode = cellMode === GridCellModes.Edit;
     const isModifierKeyPressed = event.ctrlKey || event.metaKey || event.altKey;
 
-    if (!isEditMode && isCellEnterEditModeKeys(event.key) && !isModifierKeyPressed && !(event.key === ' ' && event.shiftKey)) {
+    if (!isEditMode && isCellEnterEditModeKeys(event) && !isModifierKeyPressed && !(event.key === ' ' && event.shiftKey)) {
       apiRef.current.publishEvent('cellEditStart', params, event);
     }
 
@@ -269,7 +269,7 @@ export const useCellEditing = (apiRef, props) => {
 
     apiRef.current.setCellMode(params.id, params.field, GridCellModes.Edit);
 
-    if (isKeyboardEvent(event) && isPrintableKey(event.key)) {
+    if (isKeyboardEvent(event) && isPrintableKey(event)) {
       apiRef.current.unstable_setEditCellProps({
         id: params.id,
         field: params.field,

package/hooks/features/editRows/useGridEditing.new.d.ts

@@ -3,4 +3,4 @@ import { GridApiCommunity } from '../../../models/api/gridApiCommunity';
 import { DataGridProcessedProps } from '../../../models/props/DataGridProps';
 import { GridStateInitializer } from '../../utils/useGridInitializeState';
 export declare const editingStateInitializer: GridStateInitializer;
-export declare const useGridEditing: (apiRef: React.MutableRefObject<GridApiCommunity>, props: Pick<DataGridProcessedProps, 'isCellEditable' | 'editMode' | 'processRowUpdate'>) => void;
+export declare const useGridEditing: (apiRef: React.MutableRefObject<GridApiCommunity>, props: Pick<DataGridProcessedProps, 'isCellEditable' | 'editMode' | 'processRowUpdate' | 'disableIgnoreModificationsIfProcessingProps'>) => void;

package/hooks/features/editRows/useGridEditing.new.js

@@ -31,6 +31,10 @@ export const useGridEditing = (apiRef, props) => {
       return isCellEditableProp(params);
     }
 
+    if (params.rowNode.isPinned) {
+      return false;
+    }
+
     return true;
   }, [isCellEditableProp]);
 

package/hooks/features/editRows/useGridEditing.old.js

@@ -30,7 +30,7 @@ export function useGridEditing(apiRef, props) {
     stateSelector: gridEditRowsStateSelector,
     changeEvent: 'editRowsModelChange'
   });
-  const isCellEditable = React.useCallback(params => !params.rowNode.isAutoGenerated && !!params.colDef.editable && !!params.colDef.renderEditCell && (!props.isCellEditable || props.isCellEditable(params)), // eslint-disable-next-line react-hooks/exhaustive-deps
+  const isCellEditable = React.useCallback(params => !params.rowNode.isAutoGenerated && !params.rowNode.isPinned && !!params.colDef.editable && !!params.colDef.renderEditCell && (!props.isCellEditable || props.isCellEditable(params)), // eslint-disable-next-line react-hooks/exhaustive-deps
   [props.isCellEditable]);
 
   const maybeDebounce = (id, field, debounceMs, callback) => {

package/hooks/features/editRows/useGridRowEditing.new.d.ts

@@ -1,4 +1,4 @@
 import * as React from 'react';
 import { GridApiCommunity } from '../../../models/api/gridApiCommunity';
 import { DataGridProcessedProps } from '../../../models/props/DataGridProps';
-export declare const useGridRowEditing: (apiRef: React.MutableRefObject<GridApiCommunity>, props: Pick<DataGridProcessedProps, 'editMode' | 'processRowUpdate' | 'onRowEditStart' | 'onRowEditStop' | 'onProcessRowUpdateError' | 'rowModesModel' | 'onRowModesModelChange' | 'signature'>) => void;
+export declare const useGridRowEditing: (apiRef: React.MutableRefObject<GridApiCommunity>, props: Pick<DataGridProcessedProps, 'editMode' | 'processRowUpdate' | 'onRowEditStart' | 'onRowEditStop' | 'onProcessRowUpdateError' | 'rowModesModel' | 'onRowModesModelChange' | 'signature' | 'disableIgnoreModificationsIfProcessingProps'>) => void;