@mui/x-data-grid 5.13.1 → 5.14.0

package/CHANGELOG.md

@@ -3,6 +3,49 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 5.14.0
+
+_Jul 21, 2022_
+
+We'd like to offer a big thanks to the 10 contributors who made this release possible. Here are some highlights ✨:
+
+- 🧪 Export `GridBooleanCell` component from data grid (#5537) @cliedeman
+- ⚙️ Improve accessibility of the Export menu (#5486) @nogalpaulina
+- 🌍 Improvements to different locales
+- 📚 Documentation improvements
+- 🐞 Bugfixes
+
+### `@mui/x-data-grid@5.14.0` / `@mui/x-data-grid-pro@5.14.0` / `@mui/x-data-grid-premium@5.14.0`
+
+#### Changes
+
+- [DataGrid] Add generics to `GridPreProcessEditCellProps` (#5510) @YunosukeY
+- [DataGrid] Avoid inconsistent state export (#5390) @flaviendelangle
+- [DataGrid] Export `GridBooleanCell` component (#5537) @cliedeman
+- [DataGrid] Fix `date`/`dateTime` edit input font size to match view mode (#5304) @cherniavskii
+- [DataGrid] Fix loading overlay position (#5558) @DanailH
+- [DataGrid] Improve accessibility of the Export menu in the toolbar (#5486) @nogalpaulina
+- [DataGridPremium] Implement Aggregation - not publicly released (#4208) @flaviendelangle
+- [DataGridPremium] Fix crash when exporting all columns to Excel (#5425) @cherniavskii
+- [l10n] Add Traditional Chinese (zh-TW) locale (#5498) @happyincent
+
+### `@mui/x-date-pickers@v5.0.0-beta.2` / `@mui/x-date-picker-pro@5.0.0-beta.2`
+
+#### Changes
+
+- [l10n] Add Norwegian (nb-NO) locale (#5475) @elkebab
+
+### Docs
+
+- [docs] New page presenting the `apiRef` (#5273) @flaviendelangle
+- [docs] Remove blank line @oliviertassinari
+
+### Core
+
+- [core] Add missing comments on zh-TW translation (#5559) @flaviendelangle
+- [core] Polish on the bug issue template (#5525) @oliviertassinari
+- [test] Add more tests related to `isPrintableKey` (#5458) @mnajdova
+
 ## 5.13.1
 
 _Jul 15, 2022_
@@ -1466,7 +1509,7 @@ A big thanks to the 5 contributors who made this release possible. Here are some
 - [core] Fix `yarn prettier` script (#3292) @oliviertassinari
 - [core] Improve tests for Tree Data (#3366) @flaviendelangle
 - [core] Never import directly from the `__modules__` folder in the `x-data-grid-generator` package (#3379) @flaviendelangle
-- [core] Transition to a new StackOverflow tag (#3308) @oliviertassinari
+- [core] Transition to a new Stack Overflow tag (#3308) @oliviertassinari
 - [core] Update monorepo (#3370) @flaviendelangle
 - [core] Use pre-processors for sorting and filtering (#3318) @flaviendelangle
 - [test] Replace `useFakeTimers` (#3323) @m4theushw

package/DataGrid/useDataGridComponent.js

@@ -60,7 +60,7 @@ export const useDataGridComponent = props => {
   const useGridEditing = (_props$experimentalFe2 = props.experimentalFeatures) != null && _props$experimentalFe2.newEditingApi ? useGridEditing_new : useGridEditing_old;
   useGridEditing(apiRef, props);
   useGridFocus(apiRef, props);
-  useGridPreferencesPanel(apiRef);
+  useGridPreferencesPanel(apiRef, props);
   useGridFilter(apiRef, props);
   useGridSorting(apiRef, props);
   useGridDensity(apiRef, props);

package/colDef/gridActionsColDef.js

@@ -5,6 +5,8 @@ export const GRID_ACTIONS_COLUMN_TYPE = 'actions';
 export const GRID_ACTIONS_COL_DEF = _extends({}, GRID_STRING_COL_DEF, {
   sortable: false,
   filterable: false,
+  // @ts-ignore
+  aggregable: false,
   width: 100,
   align: 'center',
   headerAlign: 'center',

package/colDef/gridBooleanColDef.js

@@ -21,5 +21,7 @@ export const GRID_BOOLEAN_COL_DEF = _extends({}, GRID_STRING_COL_DEF, {
   sortComparator: gridNumberComparator,
   valueFormatter: gridBooleanFormatter,
   filterOperators: getGridBooleanOperators(),
-  getApplyQuickFilterFn: undefined
+  getApplyQuickFilterFn: undefined,
+  // @ts-ignore
+  aggregable: false
 });

package/colDef/gridCheckboxSelectionColDef.js

@@ -13,6 +13,8 @@ export const GRID_CHECKBOX_SELECTION_COL_DEF = _extends({}, GRID_BOOLEAN_COL_DEF
   resizable: false,
   sortable: false,
   filterable: false,
+  // @ts-ignore
+  aggregable: false,
   disableColumnMenu: true,
   disableReorder: true,
   disableExport: true,

package/colDef/gridDateOperators.d.ts

@@ -1,2 +1,2 @@
 import { GridFilterOperator } from '../models/gridFilterOperator';
-export declare const getGridDateOperators: (showTime?: boolean | undefined) => GridFilterOperator<any, string | Date, any>[];
+export declare const getGridDateOperators: (showTime?: boolean) => GridFilterOperator<any, string | Date, any>[];

package/colDef/gridStringColDef.d.ts

@@ -1,2 +1,5 @@
 import { GridColTypeDef } from '../models/colDef/gridColDef';
+/**
+ * TODO: Move pro and premium properties outside of this Community file
+ */
 export declare const GRID_STRING_COL_DEF: GridColTypeDef<any, any>;

package/colDef/gridStringColDef.js

@@ -1,6 +1,10 @@
 import { renderEditInputCell } from '../components/cell/GridEditInputCell';
 import { gridStringOrNumberComparator } from '../hooks/features/sorting/gridSortingUtils';
 import { getGridStringOperators, getGridStringQuickFilterFn } from './gridStringOperators';
+/**
+ * TODO: Move pro and premium properties outside of this Community file
+ */
+
 export const GRID_STRING_COL_DEF = {
   width: 100,
   minWidth: 50,
@@ -12,6 +16,8 @@ export const GRID_STRING_COL_DEF = {
   filterable: true,
   groupable: true,
   pinnable: true,
+  // @ts-ignore
+  private_aggregable: true,
   editable: false,
   sortComparator: gridStringOrNumberComparator,
   type: 'string',

package/components/base/GridOverlays.js

@@ -44,7 +44,10 @@ function GridOverlayWrapper(props) {
       width: (_viewportInnerSize$wi = viewportInnerSize == null ? void 0 : viewportInnerSize.width) != null ? _viewportInnerSize$wi : 0,
       position: 'absolute',
       top: headerHeight,
-      bottom: height === 'auto' ? 0 : undefined
+      bottom: height === 'auto' ? 0 : undefined,
+      zIndex: 3,
+      // should be above pinned columns and detail panel
+      pointerEvents: 'none'
     }
   }, props));
 }

package/components/cell/GridBooleanCell.d.ts

@@ -4,6 +4,9 @@ import { GridRenderCellParams } from '../../models/params/gridCellParams';
 import { GridColDef } from '../../models/colDef/gridColDef';
 interface GridBooleanCellProps extends GridRenderCellParams, Omit<SvgIconProps, 'tabIndex' | 'id'> {
 }
-export declare const GridBooleanCell: React.MemoExoticComponent<(props: GridBooleanCellProps) => JSX.Element>;
+declare const GridBooleanCell: React.MemoExoticComponent<{
+    (props: GridBooleanCellProps): JSX.Element;
+    propTypes: any;
+}>;
+export { GridBooleanCell };
 export declare const renderBooleanCell: GridColDef['renderCell'];
-export {};

package/components/cell/GridBooleanCell.js

@@ -2,6 +2,7 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 const _excluded = ["id", "value", "formattedValue", "api", "field", "row", "rowNode", "colDef", "cellMode", "isEditable", "hasFocus", "tabIndex", "getValue"];
 import * as React from 'react';
+import PropTypes from 'prop-types';
 import { unstable_composeClasses as composeClasses } from '@mui/material';
 import { getDataGridUtilityClass } from '../../constants/gridClasses';
 import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
@@ -18,7 +19,7 @@ const useUtilityClasses = ownerState => {
   return composeClasses(slots, getDataGridUtilityClass, classes);
 };
 
-export const GridBooleanCell = /*#__PURE__*/React.memo(props => {
+const GridBooleanCellRaw = props => {
   const {
     value
   } = props,
@@ -37,7 +38,97 @@ export const GridBooleanCell = /*#__PURE__*/React.memo(props => {
     titleAccess: apiRef.current.getLocaleText(value ? 'booleanCellTrueLabel' : 'booleanCellFalseLabel'),
     "data-value": Boolean(value)
   }, other));
-});
+};
+
+process.env.NODE_ENV !== "production" ? GridBooleanCellRaw.propTypes = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // | To update them edit the TypeScript types and run "yarn proptypes"  |
+  // ----------------------------------------------------------------------
+
+  /**
+   * GridApi that let you manipulate the grid.
+   * @deprecated Use the `apiRef` returned by `useGridApiContext` or `useGridApiRef` (only available in `@mui/x-data-grid-pro`)
+   */
+  api: PropTypes.any.isRequired,
+
+  /**
+   * The mode of the cell.
+   */
+  cellMode: PropTypes.oneOf(['edit', 'view']).isRequired,
+
+  /**
+   * The column of the row that the current cell belongs to.
+   */
+  colDef: PropTypes.object.isRequired,
+
+  /**
+   * The column field of the cell that triggered the event.
+   */
+  field: PropTypes.string.isRequired,
+
+  /**
+   * A ref allowing to set imperative focus.
+   * It can be passed to the element that should receive focus.
+   * @ignore - do not document.
+   */
+  focusElementRef: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({
+    current: PropTypes.shape({
+      focus: PropTypes.func.isRequired
+    })
+  })]),
+
+  /**
+   * The cell value formatted with the column valueFormatter.
+   */
+  formattedValue: PropTypes.any,
+
+  /**
+   * Get the cell value of a row and field.
+   * @param {GridRowId} id The row id.
+   * @param {string} field The field.
+   * @returns {any} The cell value.
+   * @deprecated Use `params.row` to directly access the fields you want instead.
+   */
+  getValue: PropTypes.func.isRequired,
+
+  /**
+   * If true, the cell is the active element.
+   */
+  hasFocus: PropTypes.bool.isRequired,
+
+  /**
+   * The grid row id.
+   */
+  id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
+
+  /**
+   * If true, the cell is editable.
+   */
+  isEditable: PropTypes.bool,
+
+  /**
+   * The row model of the row that the current cell belongs to.
+   */
+  row: PropTypes.object.isRequired,
+
+  /**
+   * The node of the row that the current cell belongs to.
+   */
+  rowNode: PropTypes.object.isRequired,
+
+  /**
+   * the tabIndex value.
+   */
+  tabIndex: PropTypes.oneOf([-1, 0]).isRequired,
+
+  /**
+   * The cell value, but if the column has valueGetter, use getValue.
+   */
+  value: PropTypes.any
+} : void 0;
+const GridBooleanCell = /*#__PURE__*/React.memo(GridBooleanCellRaw);
+export { GridBooleanCell };
 export const renderBooleanCell = params => {
   if (params.rowNode.isAutoGenerated) {
     return '';

package/components/cell/GridEditDateCell.js

@@ -6,10 +6,14 @@ import PropTypes from 'prop-types';
 import { unstable_composeClasses as composeClasses } from '@mui/material';
 import { unstable_useEnhancedEffect as useEnhancedEffect } from '@mui/material/utils';
 import InputBase from '@mui/material/InputBase';
+import { styled } from '@mui/material/styles';
 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 StyledInputBase = styled(InputBase)({
+  fontSize: 'inherit'
+});
 
 const useUtilityClasses = ownerState => {
   const {
@@ -116,7 +120,7 @@ function GridEditDateCell(props) {
       inputRef.current.focus();
     }
   }, [hasFocus]);
-  return /*#__PURE__*/_jsx(InputBase, _extends({
+  return /*#__PURE__*/_jsx(StyledInputBase, _extends({
     inputRef: inputRef,
     fullWidth: true,
     className: classes.root,

package/components/cell/index.d.ts

@@ -1,4 +1,5 @@
 export * from './GridCell';
+export * from './GridBooleanCell';
 export * from './GridEditBooleanCell';
 export * from './GridEditDateCell';
 export * from './GridEditInputCell';

package/components/cell/index.js

@@ -1,4 +1,5 @@
 export * from './GridCell';
+export * from './GridBooleanCell';
 export * from './GridEditBooleanCell';
 export * from './GridEditDateCell';
 export * from './GridEditInputCell';

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,7 +78,12 @@ 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');
   return /*#__PURE__*/_jsx(rootProps.components.BaseCheckbox, _extends({
     ref: handleRef,

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/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/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.
      */

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

package/constants/localeTextConstants.js

@@ -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/export/utils.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import * as React from 'react';
 import { GridApiCommunity } from '../../../models/api/gridApiCommunity';
 import { GridExportOptions, GridCsvGetRowsToExportParams } from '../../../models/gridExport';
 import { GridStateColDef } from '../../../models/colDef/gridColDef';

package/hooks/features/export/utils.js

@@ -1,5 +1,6 @@
 import { gridColumnDefinitionsSelector, gridVisibleColumnDefinitionsSelector } from '../columns';
 import { gridFilteredSortedRowIdsSelector } from '../filter';
+import { gridRowTreeSelector } from '../rows/gridRowsSelector';
 export const getColumnsToExport = ({
   apiRef,
   options
@@ -17,11 +18,17 @@ export const defaultGetRowsToExport = ({
   apiRef
 }) => {
   const filteredSortedRowIds = gridFilteredSortedRowIdsSelector(apiRef);
+  const rowTree = gridRowTreeSelector(apiRef);
   const selectedRows = apiRef.current.getSelectedRows();
+  const bodyRows = filteredSortedRowIds.filter(id => {
+    var _rowTree$id$position;
+
+    return ((_rowTree$id$position = rowTree[id].position) != null ? _rowTree$id$position : 'body') === 'body';
+  });
 
   if (selectedRows.size > 0) {
-    return filteredSortedRowIds.filter(id => selectedRows.has(id));
+    return bodyRows.filter(id => selectedRows.has(id));
   }
 
-  return filteredSortedRowIds;
+  return bodyRows;
 };