@mui/x-data-grid-premium 6.0.0-alpha.0 → 6.0.0-alpha.1

package/CHANGELOG.md

@@ -3,6 +3,139 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 6.0.0-alpha.1
+
+_Sep 29, 2022_
+
+We'd like to offer a big thanks to the 8 contributors who made this release possible. Here are some highlights ✨:
+
+- 🚀 Better support for custom overlays (#5808) @cherniavskii
+- 🖨️ Improve print export (#6273) @oliviertassinari
+- 🎁 Reduce confusion when initializing pickers with a date value (#6170) @flaviendelangle
+- 📚 Documentation improvements
+- 🐞 Bugfixes
+
+### `@mui/x-data-grid@v6.0.0-alpha.1` / `@mui/x-data-grid-pro@v6.0.0-alpha.1` / `@mui/x-data-grid-premium@v6.0.0-alpha.1`
+
+#### Breaking changes
+
+- New internal rows structure for v6 (#4927) @flaviendelangle
+
+  Some selectors related to the rows have been renamed to better describe the type of rows they are returning:
+
+  ```diff
+  -const result = gridRowsIdToIdLookupSelector(apiRef);
+  +const result = gridRowsDataRowIdToIdLookupSelector(apiRef);
+  ```
+
+  ```diff
+  -const result = gridRowTreeDepthSelector(apiRef);
+  +const result = gridRowMaximumTreeDepthSelector(apiRef);
+  ```
+
+  The format of the tree nodes (the element accessible in `params.node` or with the `apiRef.current.getRowNode` method) have changed.
+  You have a new `type` property, which can be useful, for example, to apply custom behavior on groups.
+  Here is an example of the old and new approach showing how to apply a custom value formatter in groups for the grouping column:
+
+  ```diff
+   <DataGridPremium 
+     groupingColDef={() => ({
+       valueFormatter: (params) => {
+         if (params.id == null) {
+           return params.value;
+         }
+
+         const rowNode = apiRef.current.getRowNode(params.id!)!;
+  -      if (rowNode.children?.length) {
+  +      if (rowNode.type === 'group') {
+           return `by ${rowNode.groupingKey ?? ''}`;
+         }
+
+         return params.value;
+       }
+     })}
+   />
+  ```
+
+- The `GridFeatureModeConstant` constant no longer exists (#6077) @DanailH
+
+  ```diff
+  -import { GridFeatureModeConstant } from '@mui/x-data-grid';
+  ```
+
+#### Changes
+
+- [DataGrid] Fix `GridPagination` props typing (#6238) @cherniavskii
+- [DataGrid] Fix `GridRow` not forwarding `ref` to the root element (#6274) @cherniavskii
+- [DataGrid] Fix `undefined` value being showed in filter button tooltip text (#6259) @cherniavskii
+- [DataGrid] Fix blank space when changing page with dynamic row height (#6049) @m4theushw
+- [DataGrid] New internal rows structure for v6 (#4927) @flaviendelangle
+- [DataGrid] Revert cell/row mode if `processRowUpdate` fails (#6185) @m4theushw
+- [DataGrid] Rework overlays layout (#5808) @cherniavskii
+- [DataGrid] Improve print support (#6273) @oliviertassinari
+- [DataGridPremium] Add missing `themeAugmentation` module (#6270) @cherniavskii
+
+### `@mui/x-date-pickers@v6.0.0-alpha.1` / `@mui/x-date-pickers-pro@v6.0.0-alpha.1`
+
+#### Breaking changes
+
+- [pickers] Do not support unparsed date formats anymore (#6170) @flaviendelangle
+
+  The `value` prop of the pickers now expects a parsed value.
+  Until now, it was possible to provide any format that your date management library was able to parse.
+  For instance, you could pass `value={new Date()}` when using `AdapterDayjs`.
+
+  This brought a lot of confusion so we decided to remove this behavior.
+  The format expected by the `value` prop is now the same as for any other prop holding a date.
+  Here is the syntax to initialize a date picker at the current date for each adapter:
+
+  ```tsx
+  // Date-fns
+  <DatePicker value={new Date()} />
+
+  // Dayjs
+  import dayjs from 'dayjs'
+  <DatePicker value={dayjs()} />
+
+  // Moment
+  import moment from 'moment'
+  <DatePicker value={moment()} />
+
+  // Luxon
+  import { DateTime } from 'luxon'
+  <DatePicker value={DateTime.now()} />
+  ```
+
+#### Changes
+
+- [DatePicker] Respect `minDate` and `maxDate` when opening a `DatePicker` or `DateTimePicker` (#6309) @alexfauquette
+- [DateTimePicker] Fix validation with `shouldDisableMonth` and `shouldDisableYear` (#6266) @flaviendelangle
+- [TimePicker] Add support for `disablePast` and `disableFuture` validation props (#6226) @LukasTy
+- [CalendarPicker] Prevent getting focus when `autoFocus=false` (#6304) @alexfauquette
+- [DateField] Extend moment adapter to support `expandFormat` and `formatTokenMap` (#6215) @alexfauquette
+- [pickers] Allow to control the selected sections (#6209, #6307) @flaviendelangle
+- [pickers] Do not loose the value of date sections not present in the format in the new field components (#6141) @flaviendelangle
+- [pickers] Do not support unparsed date formats anymore (#6170) @flaviendelangle
+- [pickers] Support slots on the `DateField` component  (#6048) @flaviendelangle
+- [pickers] Support Luxon v3 in `AdapterLuxon` (#6069) @alexfauquette
+- [pickers] New components `TimeField` and `DateTimeField` (#6312) @flaviendelangle
+- [pickers] Support basic mobile edition on new field components (#5958) @flaviendelangle
+
+### Docs
+
+- [docs] Fix issue in DataGrid/DataGridPro row styling demo (#6264) @MBilalShafi
+- [docs] Improve pickers Getting Started examples (#6292) @flaviendelangle
+- [docs] Pass model change callbacks in controlled grid editing demos (#6296) @cherniavskii
+- [docs] Update the CodeSandbox to use the `next` branch (#6275) @oliviertassinari
+
+### Core
+
+- [core] Fix typing error (#6291) @flaviendelangle
+- [core] Fix typo in the state updater of `useField` (#6311) @flaviendelangle
+- [core] Remove `GridFeatureModeConstant` (#6077) @DanailH
+- [core] Simplify testing architecture (#6043) @flaviendelangle
+- [test] Skip test in Chrome non-headless and Edge (#6318) @m4theushw
+
 ## 6.0.0-alpha.0
 
 _Sep 22, 2022_

package/DataGridPremium/DataGridPremium.js

@@ -344,7 +344,7 @@ process.env.NODE_ENV !== "production" ? DataGridPremiumRaw.propTypes = {
 
   /**
    * Determines the position of an aggregated value.
-   * @param {GridRowTreeNodeConfig | null} groupNode The current group (`null` being the top level group).
+   * @param {GridGroupNode} groupNode The current group.
    * @returns {GridAggregationPosition | null} Position of the aggregated value (if `null`, the group will not be aggregated).
    * @default `(groupNode) => groupNode == null ? 'footer' : 'inline'`
    */
@@ -476,7 +476,7 @@ process.env.NODE_ENV !== "production" ? DataGridPremiumRaw.propTypes = {
   /**
    * Determines if a group should be expanded after its creation.
    * This prop takes priority over the `defaultGroupingExpansionDepth` prop.
-   * @param {GridRowTreeNodeConfig} node The node of the group to test.
+   * @param {GridGroupNode} node The node of the group to test.
    * @returns {boolean} A boolean indicating if the group is expanded.
    */
   isGroupExpandedByDefault: PropTypes.func,

package/DataGridPremium/useDataGridPremiumProps.js

@@ -13,7 +13,7 @@ export const DATA_GRID_PREMIUM_PROPS_DEFAULT_VALUES = _extends({}, DATA_GRID_PRO
   rowGroupingColumnMode: 'single',
   aggregationFunctions: GRID_AGGREGATION_FUNCTIONS,
   aggregationRowsScope: 'filtered',
-  getAggregationPosition: groupNode => groupNode == null ? 'footer' : 'inline'
+  getAggregationPosition: groupNode => groupNode.depth === -1 ? 'footer' : 'inline'
 });
 export const useDataGridPremiumProps = inProps => {
   const themedProps = useThemeProps({

package/components/GridGroupingCriteriaCell.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
-import { GridRenderCellParams } from '@mui/x-data-grid-pro';
-interface GridGroupingCriteriaCellProps extends GridRenderCellParams {
+import { GridRenderCellParams, GridGroupNode } from '@mui/x-data-grid-pro';
+interface GridGroupingCriteriaCellProps extends GridRenderCellParams<any, any, any, GridGroupNode> {
     hideDescendantCount?: boolean;
 }
 export declare const GridGroupingCriteriaCell: (props: GridGroupingCriteriaCellProps) => JSX.Element;

package/hooks/features/aggregation/createAggregationLookup.js

@@ -1,4 +1,4 @@
-import { gridColumnLookupSelector, gridFilteredRowsLookupSelector, gridRowIdsSelector, gridRowTreeSelector } from '@mui/x-data-grid-pro';
+import { gridColumnLookupSelector, gridFilteredRowsLookupSelector, gridRowTreeSelector, GRID_ROOT_GROUP_ID } from '@mui/x-data-grid-pro';
 import { getAggregationRules } from './gridAggregationUtils';
 import { gridAggregationModelSelector } from './gridAggregationSelectors';
 
@@ -9,22 +9,12 @@ const getAggregationCellValue = ({
   aggregationFunction,
   aggregationRowsScope
 }) => {
-  const rowTree = gridRowTreeSelector(apiRef);
   const filteredRowsLookup = gridFilteredRowsLookupSelector(apiRef);
-  let rowIds; // TODO: Add custom root id
-
-  if (groupId === '') {
-    rowIds = gridRowIdsSelector(apiRef).filter(rowId => !rowTree[rowId].isAutoGenerated);
-  } else {
-    rowIds = apiRef.current.getRowGroupChildren({
-      groupId
-    });
-  }
-
+  const rowIds = apiRef.current.getRowGroupChildren({
+    groupId
+  });
   const values = [];
   rowIds.forEach(rowId => {
-    var _rowNode$children;
-
     if (aggregationRowsScope === 'filtered' && filteredRowsLookup[rowId] === false) {
       return;
     } // If the row is a group, we want to aggregate based on its children
@@ -38,7 +28,7 @@ const getAggregationCellValue = ({
 
     const rowNode = apiRef.current.getRowNode(rowId);
 
-    if ((_rowNode$children = rowNode.children) != null && _rowNode$children.length) {
+    if (rowNode.type === 'group') {
       return;
     }
 
@@ -95,26 +85,26 @@ export const createAggregationLookup = ({
   }
 
   const aggregationLookup = {};
-  const rowIds = gridRowIdsSelector(apiRef);
   const rowTree = gridRowTreeSelector(apiRef);
 
-  for (let i = 0; i < rowIds.length; i += 1) {
-    var _node$children;
+  const createGroupAggregationLookup = groupNode => {
+    for (let i = 0; i < groupNode.children.length; i += 1) {
+      const childId = groupNode.children[i];
+      const childNode = rowTree[childId];
 
-    const rowId = rowIds[i];
-    const node = rowTree[rowId];
-    const hasChildren = (_node$children = node.children) == null ? void 0 : _node$children.some(childId => {
-      var _rowTree$childId$posi;
+      if (childNode.type === 'group') {
+        createGroupAggregationLookup(childNode);
+      }
+    }
 
-      return ((_rowTree$childId$posi = rowTree[childId].position) != null ? _rowTree$childId$posi : 'body') === 'body';
-    });
+    const hasAggregableChildren = groupNode.children.length;
 
-    if (hasChildren) {
-      const position = getAggregationPosition(node);
+    if (hasAggregableChildren) {
+      const position = getAggregationPosition(groupNode);
 
       if (position != null) {
-        aggregationLookup[rowId] = getGroupAggregatedValue({
-          groupId: rowId,
+        aggregationLookup[groupNode.id] = getGroupAggregatedValue({
+          groupId: groupNode.id,
           apiRef,
           aggregatedFields,
           aggregationRowsScope,
@@ -123,21 +113,8 @@ export const createAggregationLookup = ({
         });
       }
     }
-  } // TODO: Add custom root id
-
-
-  const position = getAggregationPosition(null);
-
-  if (position != null) {
-    aggregationLookup[''] = getGroupAggregatedValue({
-      groupId: '',
-      apiRef,
-      aggregatedFields,
-      aggregationRowsScope,
-      aggregationRules,
-      position
-    });
-  }
+  };
 
+  createGroupAggregationLookup(rowTree[GRID_ROOT_GROUP_ID]);
   return aggregationLookup;
 };

package/hooks/features/aggregation/gridAggregationUtils.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { GridColDef, GridRowId } from '@mui/x-data-grid-pro';
-import { GridColumnRawLookup, GridRowTreeCreationValue } from '@mui/x-data-grid-pro/internals';
+import { GridColumnRawLookup, GridHydrateRowsValue } from '@mui/x-data-grid-pro/internals';
 import { GridAggregationFunction, GridAggregationModel, GridAggregationRule, GridAggregationRules } from './gridAggregationInterfaces';
 import { GridStatePremium } from '../../../models/gridStatePremium';
 import { DataGridPremiumProcessedProps } from '../../../models/dataGridPremiumProps';
@@ -22,15 +22,19 @@ export declare const getAggregationRules: ({ columnsLookup, aggregationModel, ag
     aggregationModel: GridAggregationModel;
     aggregationFunctions: Record<string, GridAggregationFunction>;
 }) => GridAggregationRules;
+interface AddFooterRowsParams {
+    groupingParams: GridHydrateRowsValue;
+    getAggregationPosition: DataGridPremiumProcessedProps['getAggregationPosition'];
+    /**
+     * If `true`, there are some aggregation rules to apply
+     */
+    hasAggregationRule: boolean;
+    apiRef: React.MutableRefObject<GridApiPremium>;
+}
 /**
  * Add a footer for each group that has at least one column with an aggregated value.
  */
-export declare const addFooterRows: ({ groupingParams, aggregationRules, getAggregationPosition, apiRef, }: {
-    groupingParams: GridRowTreeCreationValue;
-    aggregationRules: GridAggregationRules;
-    getAggregationPosition: DataGridPremiumProcessedProps['getAggregationPosition'];
-    apiRef: React.MutableRefObject<GridApiPremium>;
-}) => GridRowTreeCreationValue;
+export declare const addFooterRows: ({ groupingParams, apiRef, getAggregationPosition, hasAggregationRule, }: AddFooterRowsParams) => GridHydrateRowsValue;
 /**
  * Compares two sets of aggregation rules to determine if they are equal or not.
  */
@@ -39,3 +43,4 @@ export declare const getAggregationFunctionLabel: ({ apiRef, aggregationRule, }:
     apiRef: React.MutableRefObject<GridApiPremium>;
     aggregationRule: GridAggregationRule;
 }) => string;
+export {};

package/hooks/features/aggregation/gridAggregationUtils.js

@@ -1,6 +1,7 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import { capitalize } from '@mui/material';
-import { addPinnedRow, isDeepEqual } from '@mui/x-data-grid-pro/internals';
+import { GRID_ROOT_GROUP_ID } from '@mui/x-data-grid-pro';
+import { addPinnedRow, isDeepEqual, insertNodeInTree, removeNodeFromTree } from '@mui/x-data-grid-pro/internals';
 export const GRID_AGGREGATION_ROOT_FOOTER_ROW_ID = 'auto-generated-group-footer-root';
 export const getAggregationFooterRowIdFromGroupId = groupId => {
   if (groupId == null) {
@@ -65,85 +66,93 @@ export const getAggregationRules = ({
   });
   return aggregationRules;
 };
+
 /**
  * Add a footer for each group that has at least one column with an aggregated value.
  */
-
 export const addFooterRows = ({
   groupingParams,
-  aggregationRules,
+  apiRef,
   getAggregationPosition,
-  apiRef
+  hasAggregationRule
 }) => {
-  if (Object.keys(aggregationRules).length === 0) {
-    return groupingParams;
-  }
-
-  const ids = [...groupingParams.ids];
-
-  const idRowsLookup = _extends({}, groupingParams.idRowsLookup);
-
-  const tree = _extends({}, groupingParams.tree);
-
-  const addGroupFooter = groupNode => {
-    var _groupNode$id;
-
-    const groupId = (_groupNode$id = groupNode == null ? void 0 : groupNode.id) != null ? _groupNode$id : null;
+  let newGroupingParams = _extends({}, groupingParams, {
+    tree: _extends({}, groupingParams.tree),
+    treeDepths: _extends({}, groupingParams.treeDepths)
+  });
 
-    if (getAggregationPosition(groupNode) !== 'footer') {
-      return;
+  const updateChildGroupFooter = groupNode => {
+    const shouldHaveFooter = hasAggregationRule && getAggregationPosition(groupNode) === 'footer';
+
+    if (shouldHaveFooter) {
+      const footerId = getAggregationFooterRowIdFromGroupId(groupNode.id);
+
+      if (groupNode.footerId !== footerId) {
+        if (groupNode.footerId != null) {
+          removeNodeFromTree({
+            node: newGroupingParams.tree[groupNode.footerId],
+            tree: newGroupingParams.tree,
+            treeDepths: newGroupingParams.treeDepths
+          });
+        }
+
+        const footerNode = {
+          id: footerId,
+          parent: groupNode.id,
+          depth: groupNode ? groupNode.depth + 1 : 0,
+          type: 'footer'
+        };
+        insertNodeInTree({
+          node: footerNode,
+          tree: newGroupingParams.tree,
+          treeDepths: newGroupingParams.treeDepths
+        });
+      }
+    } else if (groupNode.footerId != null) {
+      removeNodeFromTree({
+        node: newGroupingParams.tree[groupNode.footerId],
+        tree: newGroupingParams.tree,
+        treeDepths: newGroupingParams.treeDepths
+      });
+      newGroupingParams.tree[groupNode.id] = _extends({}, newGroupingParams.tree[groupNode.id], {
+        footerId: null
+      });
     }
-
-    const footerId = getAggregationFooterRowIdFromGroupId(groupId);
-    ids.push(footerId);
-    idRowsLookup[footerId] = {};
-    tree[footerId] = {
-      id: footerId,
-      isAutoGenerated: true,
-      parent: groupId,
-      depth: groupNode ? groupNode.depth + 1 : 0,
-      groupingKey: null,
-      groupingField: null,
-      position: 'footer'
-    };
-
-    if (groupId != null) {
-      tree[groupId] = _extends({}, tree[groupId], {
-        footerId
+  };
+
+  const updateRootGroupFooter = groupNode => {
+    const shouldHaveFooter = hasAggregationRule && getAggregationPosition(groupNode) === 'footer';
+
+    if (shouldHaveFooter) {
+      newGroupingParams = addPinnedRow({
+        groupingParams: newGroupingParams,
+        rowModel: undefined,
+        rowId: getAggregationFooterRowIdFromGroupId(null),
+        position: 'bottom',
+        apiRef,
+        isAutoGenerated: true
       });
     }
-  }; // If the tree is flat, we don't need to loop through the rows
+  };
 
+  const updateGroupFooter = groupNode => {
+    if (groupNode.id === GRID_ROOT_GROUP_ID) {
+      updateRootGroupFooter(groupNode);
+    } else {
+      updateChildGroupFooter(groupNode);
+    }
 
-  if (groupingParams.treeDepth > 1) {
-    groupingParams.ids.forEach(parentId => {
-      const parentNode = tree[parentId];
+    groupNode.children.forEach(childId => {
+      const childNode = newGroupingParams.tree[childId];
 
-      if (parentNode.depth === groupingParams.treeDepth - 1) {
-        return;
+      if (childNode.type === 'group') {
+        updateGroupFooter(childNode);
       }
-
-      addGroupFooter(parentNode);
-    });
-  }
-
-  let newGroupingParams = _extends({}, groupingParams, {
-    tree,
-    idRowsLookup,
-    ids
-  });
-
-  if (getAggregationPosition(null) === 'footer') {
-    newGroupingParams = addPinnedRow({
-      groupingParams: newGroupingParams,
-      rowModel: {},
-      rowId: getAggregationFooterRowIdFromGroupId(null),
-      position: 'bottom',
-      apiRef
     });
-  }
+  };
 
-  return _extends({}, groupingParams, newGroupingParams);
+  updateGroupFooter(newGroupingParams.tree[GRID_ROOT_GROUP_ID]);
+  return newGroupingParams;
 };
 /**
  * Compares two sets of aggregation rules to determine if they are equal or not.

package/hooks/features/aggregation/useGridAggregationPreProcessors.js

@@ -47,36 +47,26 @@ export const useGridAggregationPreProcessors = (apiRef, props) => {
     apiRef.current.unstable_caches.aggregation.rulesOnLastColumnHydration = aggregationRules;
     return columnsState;
   }, [apiRef, props.aggregationFunctions, props.disableAggregation]);
-  const addGroupFooterRows = React.useCallback(groupingParams => {
-    let newGroupingParams;
-    let rulesOnLastRowHydration;
+  const addGroupFooterRows = React.useCallback(value => {
+    const aggregationRules = props.disableAggregation ? {} : getAggregationRules({
+      columnsLookup: gridColumnLookupSelector(apiRef),
+      aggregationModel: gridAggregationModelSelector(apiRef),
+      aggregationFunctions: props.aggregationFunctions
+    });
+    const hasAggregationRule = Object.keys(aggregationRules).length > 0; // If we did not have any aggregation footer before, and we still don't have any,
+    // Then we can skip this step
 
-    if (props.disableAggregation) {
-      newGroupingParams = groupingParams;
-      rulesOnLastRowHydration = {};
-    } else {
-      const aggregationRules = getAggregationRules({
-        columnsLookup: gridColumnLookupSelector(apiRef),
-        aggregationModel: gridAggregationModelSelector(apiRef),
-        aggregationFunctions: props.aggregationFunctions
-      });
-      rulesOnLastRowHydration = aggregationRules; // If no column have an aggregation rule
-      // Then don't create the footer rows
-
-      if (Object.values(aggregationRules).length === 0) {
-        newGroupingParams = groupingParams;
-      } else {
-        newGroupingParams = addFooterRows({
-          groupingParams,
-          aggregationRules,
-          getAggregationPosition: props.getAggregationPosition,
-          apiRef
-        });
-      }
+    if (Object.keys(apiRef.current.unstable_caches.aggregation.rulesOnLastRowHydration).length === 0 && !hasAggregationRule) {
+      return value;
     }
 
-    apiRef.current.unstable_caches.aggregation.rulesOnLastRowHydration = rulesOnLastRowHydration;
-    return newGroupingParams;
+    apiRef.current.unstable_caches.aggregation.rulesOnLastRowHydration = aggregationRules;
+    return addFooterRows({
+      apiRef,
+      groupingParams: value,
+      getAggregationPosition: props.getAggregationPosition,
+      hasAggregationRule
+    });
   }, [apiRef, props.disableAggregation, props.getAggregationPosition, props.aggregationFunctions]);
   const addColumnMenuButtons = React.useCallback((initialValue, column) => {
     if (props.disableAggregation) {

package/hooks/features/aggregation/wrapColumnWithAggregation.js

@@ -161,12 +161,12 @@ export const wrapColumnWithAggregationValue = ({
   aggregationRule
 }) => {
   const getCellAggregationResult = (id, field) => {
-    var _rowNode$children, _rowNode$parent, _gridAggregationLooku;
+    var _rowNode$parent, _gridAggregationLooku;
 
     let cellAggregationPosition = null;
     const rowNode = apiRef.current.getRowNode(id);
 
-    if ((_rowNode$children = rowNode.children) != null && _rowNode$children.length) {
+    if (rowNode.type === 'group') {
       cellAggregationPosition = 'inline';
     } else if (id.toString().startsWith('auto-generated-group-footer-')) {
       cellAggregationPosition = 'footer';

package/hooks/features/rowGrouping/createGroupingColDef.js

@@ -27,9 +27,11 @@ const GROUPING_COL_DEF_FORCED_PROPERTIES = {
  */
 
 const groupingFieldIndexComparator = (v1, v2, cellParams1, cellParams2) => {
+  var _groupingField, _groupingField2;
+
   const model = gridRowGroupingSanitizedModelSelector(cellParams1.api.state, cellParams1.api.instanceId);
-  const groupingField1 = cellParams1.rowNode.groupingField;
-  const groupingField2 = cellParams2.rowNode.groupingField;
+  const groupingField1 = (_groupingField = cellParams1.rowNode.groupingField) != null ? _groupingField : null;
+  const groupingField2 = (_groupingField2 = cellParams2.rowNode.groupingField) != null ? _groupingField2 : null;
 
   if (groupingField1 === groupingField2) {
     return 0;
@@ -72,7 +74,7 @@ const getLeafProperties = leafColDef => {
     })),
     sortComparator: (v1, v2, cellParams1, cellParams2) => {
       // We only want to sort the leaves
-      if (cellParams1.rowNode.groupingField === null && cellParams2.rowNode.groupingField === null) {
+      if (cellParams1.rowNode.type === 'leaf' && cellParams2.rowNode.type === 'leaf') {
         return leafColDef.sortComparator(v1, v2, cellParams1, cellParams2);
       }
 
@@ -89,7 +91,7 @@ const getGroupingCriteriaProperties = (groupedByColDef, applyHeaderName) => {
     filterable: groupedByColDef.filterable,
     sortComparator: (v1, v2, cellParams1, cellParams2) => {
       // We only want to sort the groups of the current grouping criteria
-      if (cellParams1.rowNode.groupingField === groupedByColDef.field && cellParams2.rowNode.groupingField === groupedByColDef.field) {
+      if (cellParams1.rowNode.type === 'group' && cellParams1.rowNode.groupingField === groupedByColDef.field && cellParams2.rowNode.type === 'group' && cellParams2.rowNode.groupingField === groupedByColDef.field) {
         return groupedByColDef.sortComparator(v1, v2, cellParams1, cellParams2);
       }
 
@@ -144,12 +146,12 @@ export const createGroupingColDefForOneGroupingCriteria = ({
     width: Math.max(((_groupedByColDef$widt = groupedByColDef.width) != null ? _groupedByColDef$widt : GRID_STRING_COL_DEF.width) + 40, (_leafColDef$width = leafColDef == null ? void 0 : leafColDef.width) != null ? _leafColDef$width : 0),
     renderCell: params => {
       // Render footer
-      if (params.rowNode.position === 'footer') {
+      if (params.rowNode.type === 'footer' || params.rowNode.type === 'pinnedRow') {
         return /*#__PURE__*/_jsx(GridGroupingColumnFooterCell, _extends({}, params));
       } // Render leaves
 
 
-      if (params.rowNode.groupingField == null) {
+      if (params.rowNode.type === 'leaf') {
         if (leafColDef) {
           const leafParams = _extends({}, params.api.getCellParams(params.id, leafField), {
             api: params.api
@@ -175,11 +177,11 @@ export const createGroupingColDefForOneGroupingCriteria = ({
       return '';
     },
     valueGetter: params => {
-      if (!params.rowNode) {
+      if (!params.rowNode || params.rowNode.type === 'footer' || params.rowNode.type === 'pinnedRow') {
         return undefined;
       }
 
-      if (params.rowNode.groupingField == null) {
+      if (params.rowNode.type === 'leaf') {
         if (leafColDef) {
           return params.api.getCellValue(params.id, leafField);
         }
@@ -250,12 +252,12 @@ export const createGroupingColDefForAllGroupingCriteria = ({
     }), (_leafColDef$width2 = leafColDef == null ? void 0 : leafColDef.width) != null ? _leafColDef$width2 : 0),
     renderCell: params => {
       // Render footer
-      if (params.rowNode.position === 'footer') {
+      if (params.rowNode.type === 'footer' || params.rowNode.type === 'pinnedRow') {
         return /*#__PURE__*/_jsx(GridGroupingColumnFooterCell, _extends({}, params));
       } // Render the leaves
 
 
-      if (params.rowNode.groupingField == null) {
+      if (params.rowNode.type === 'leaf') {
         if (leafColDef) {
           const leafParams = _extends({}, params.api.getCellParams(params.id, leafField), {
             api: params.api
@@ -277,11 +279,11 @@ export const createGroupingColDefForAllGroupingCriteria = ({
       }));
     },
     valueGetter: params => {
-      if (!params.rowNode) {
+      if (!params.rowNode || params.rowNode.type === 'footer' || params.rowNode.type === 'pinnedRow') {
         return undefined;
       }
 
-      if (params.rowNode.groupingField == null) {
+      if (params.rowNode.type === 'leaf') {
         if (leafColDef) {
           return params.api.getCellValue(params.id, leafField);
         }