@mui/x-data-grid-pro 5.5.1 → 5.6.0

package/legacy/hooks/features/treeData/useGridTreeDataPreProcessors.js

@@ -0,0 +1,72 @@
+import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+var _excluded = ["hideDescendantCount"];
+import * as React from 'react';
+import { useGridRegisterPreProcessor } from '@mui/x-data-grid/internals';
+import { GRID_TREE_DATA_GROUPING_COL_DEF, GRID_TREE_DATA_GROUPING_COL_DEF_FORCED_PROPERTIES } from './gridTreeDataGroupColDef';
+import { TREE_DATA_GROUPING_NAME } from './useGridTreeData';
+import { GridTreeDataGroupingCell } from '../../../components';
+import { jsx as _jsx } from "react/jsx-runtime";
+export var useGridTreeDataPreProcessors = function useGridTreeDataPreProcessors(apiRef, props) {
+  var getGroupingColDef = React.useCallback(function () {
+    var _colDefOverride;
+
+    var groupingColDefProp = props.groupingColDef;
+    var colDefOverride;
+
+    if (typeof groupingColDefProp === 'function') {
+      var params = {
+        groupingName: TREE_DATA_GROUPING_NAME,
+        fields: []
+      };
+      colDefOverride = groupingColDefProp(params);
+    } else {
+      colDefOverride = groupingColDefProp;
+    }
+
+    var _ref = (_colDefOverride = colDefOverride) != null ? _colDefOverride : {},
+        hideDescendantCount = _ref.hideDescendantCount,
+        colDefOverrideProperties = _objectWithoutProperties(_ref, _excluded);
+
+    var commonProperties = _extends({}, GRID_TREE_DATA_GROUPING_COL_DEF, {
+      renderCell: function renderCell(params) {
+        return /*#__PURE__*/_jsx(GridTreeDataGroupingCell, _extends({}, params, {
+          hideDescendantCount: hideDescendantCount
+        }));
+      },
+      headerName: apiRef.current.getLocaleText('treeDataGroupingHeaderName')
+    });
+
+    return _extends({}, commonProperties, colDefOverrideProperties, GRID_TREE_DATA_GROUPING_COL_DEF_FORCED_PROPERTIES);
+  }, [apiRef, props.groupingColDef]);
+  var updateGroupingColumn = React.useCallback(function (columnsState) {
+    var groupingColDefField = GRID_TREE_DATA_GROUPING_COL_DEF_FORCED_PROPERTIES.field;
+    var shouldHaveGroupingColumn = props.treeData;
+    var prevGroupingColumn = columnsState.lookup[groupingColDefField];
+
+    if (shouldHaveGroupingColumn) {
+      var newGroupingColumn = getGroupingColDef();
+
+      if (prevGroupingColumn) {
+        newGroupingColumn.width = prevGroupingColumn.width;
+        newGroupingColumn.flex = prevGroupingColumn.flex;
+      }
+
+      columnsState.lookup[groupingColDefField] = newGroupingColumn;
+
+      if (prevGroupingColumn == null) {
+        var index = columnsState.all[0] === '__check__' ? 1 : 0;
+        columnsState.all = [].concat(_toConsumableArray(columnsState.all.slice(0, index)), [groupingColDefField], _toConsumableArray(columnsState.all.slice(index)));
+      }
+    } else if (!shouldHaveGroupingColumn && prevGroupingColumn) {
+      delete columnsState.lookup[groupingColDefField];
+      columnsState.all = columnsState.all.filter(function (field) {
+        return field !== groupingColDefField;
+      });
+    }
+
+    return columnsState;
+  }, [props.treeData, getGroupingColDef]);
+  useGridRegisterPreProcessor(apiRef, 'hydrateColumns', updateGroupingColumn);
+};

package/legacy/hooks/index.js

@@ -0,0 +1 @@
+export * from './features';

package/legacy/hooks/utils/useGridApiContext.js

@@ -0,0 +1,2 @@
+import { useGridApiContext as useCommunityGridApiContext } from '@mui/x-data-grid';
+export var useGridApiContext = useCommunityGridApiContext;

package/legacy/hooks/utils/useGridApiRef.js

@@ -0,0 +1,2 @@
+import { useGridApiRef as useCommunityGridApiRef } from '@mui/x-data-grid';
+export var useGridApiRef = useCommunityGridApiRef;

package/legacy/hooks/utils/useGridRootProps.js

@@ -0,0 +1,2 @@
+import { useGridRootProps as useCommunityGridRootProps } from '@mui/x-data-grid';
+export var useGridRootProps = useCommunityGridRootProps;

package/legacy/index.js

@@ -0,0 +1,19 @@
+/** @license MUI v5.6.0
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import './typeOverloads/modules';
+export { LicenseInfo } from '@mui/x-license-pro';
+export * from '@mui/x-data-grid/components';
+export * from '@mui/x-data-grid/constants';
+export * from '@mui/x-data-grid/hooks';
+export * from '@mui/x-data-grid/locales';
+export * from '@mui/x-data-grid/models';
+export * from '@mui/x-data-grid/context';
+export * from '@mui/x-data-grid/colDef';
+export * from '@mui/x-data-grid/utils';
+export * from './DataGridPro';
+export * from './hooks';
+export * from './models';
+export { useGridApiContext, useGridApiRef, useGridRootProps } from './typeOverloads/reexports';

package/legacy/models/dataGridProProps.js

@@ -0,0 +1 @@
+export {};

package/legacy/models/gridApiPro.js

@@ -0,0 +1 @@
+export {};

package/legacy/models/gridGroupingColDefOverride.js

@@ -0,0 +1 @@
+export {};

package/legacy/models/gridGroupingValueGetterParams.js

@@ -0,0 +1 @@
+export {};

package/legacy/models/gridRowScrollEndParams.js

@@ -0,0 +1 @@
+export {};

package/legacy/models/gridStatePro.js

@@ -0,0 +1 @@
+export {};

package/legacy/models/index.js

@@ -0,0 +1,4 @@
+export * from './gridGroupingColDefOverride';
+export * from './gridRowScrollEndParams';
+export * from './gridGroupingValueGetterParams';
+export {};

package/legacy/themeAugmentation/index.js

@@ -0,0 +1,3 @@
+export * from './overrides';
+export * from './props'; // TODO v5
+// export * from './components';

package/legacy/themeAugmentation/overrides.js

@@ -0,0 +1 @@
+export {};

package/legacy/themeAugmentation/props.js

@@ -0,0 +1 @@
+export {};

package/legacy/typeOverloads/modules.js

@@ -0,0 +1 @@
+export {};

package/legacy/typeOverloads/reexports.js

@@ -0,0 +1,6 @@
+export { useGridApiContext } from '../hooks/utils/useGridApiContext';
+export { useGridApiRef } from '../hooks/utils/useGridApiRef';
+export { useGridRootProps } from '../hooks/utils/useGridRootProps';
+/**
+ * The full grid API.
+ */

package/legacy/utils/domUtils.js

@@ -0,0 +1,19 @@
+import { gridClasses } from '@mui/x-data-grid';
+import { findParentElementFromClassName } from '@mui/x-data-grid/internals';
+export function getFieldFromHeaderElem(colCellEl) {
+  return colCellEl.getAttribute('data-field');
+}
+export function findHeaderElementFromField(elem, field) {
+  return elem.querySelector("[data-field=\"".concat(field, "\"]"));
+}
+export function findGridCellElementsFromCol(col) {
+  var field = col.getAttribute('data-field');
+  var root = findParentElementFromClassName(col, 'MuiDataGrid-root');
+
+  if (!root) {
+    throw new Error('MUI: The root element is not found.');
+  }
+
+  var cells = root.querySelectorAll(".".concat(gridClasses.cell, "[data-field=\"").concat(field, "\"]"));
+  return cells;
+}

package/legacy/utils/tree/buildRowTree.js

@@ -0,0 +1,188 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
+
+/**
+ * Transform a list of rows into a tree structure where each row references its parent and children.
+ * If a row have a parent which does not exist in the input rows, creates an auto generated row
+ *
+ ```
+ params = {
+   ids: [0, 1, 2],
+   idRowsLookup: { 0: {...}, 1: {...}, 2: {...} },
+   rows: [
+     { id: 0, path: ['A'] },
+     { id: 1, path: ['B', 'A'] },
+     { id: 2, path: ['B', 'A', 'A'] }
+   ],
+   defaultGroupingExpansionDepth: 0,
+ }
+ Returns:
+ {
+   ids: [0, 1, 2, 'auto-generated-row-B'],
+   idRowsLookup: { 0: {...}, 1: {...}, 2: {...}, 'auto-generated-row-B': {} },
+   tree: {
+     '0': { id: 0, parent: null, childrenExpanded: false, depth: 0, groupingKey: 'A' },
+     'auto-generated-row-B': { id: 'auto-generated-row-B', parent: null, childrenExpanded: false, depth: 0, groupingKey: 'B' },
+     '1': { id: 1, parent: 'auto-generated-row-B', childrenExpanded: false, depth: 1, groupingKey: 'A' },
+     '2': { id: 2, parent: 1, childrenExpanded: false, depth: 2, groupingKey: 'A' },
+   },
+   treeDepth: 3,
+ }
+ ```
+ */
+export var buildRowTree = function buildRowTree(params) {
+  // During the build, we store the children as a Record to avoid linear complexity when checking if a children is already defined.
+  var tempTree = {};
+  var treeDepth = 1;
+
+  var ids = _toConsumableArray(params.ids);
+
+  var idRowsLookup = _extends({}, params.idRowsLookup);
+
+  var groupingCriteriaToIdTree = {};
+
+  var isGroupExpandedByDefault = function isGroupExpandedByDefault(node) {
+    var _params$previousTree, _params$previousTree$;
+
+    var previousExpansion = (_params$previousTree = params.previousTree) == null ? void 0 : (_params$previousTree$ = _params$previousTree[node.id]) == null ? void 0 : _params$previousTree$.childrenExpanded;
+
+    if (previousExpansion != null) {
+      return previousExpansion;
+    }
+
+    if (!node.children || !node.children.length) {
+      return undefined;
+    }
+
+    if (params.isGroupExpandedByDefault) {
+      return params.isGroupExpandedByDefault(node);
+    }
+
+    return params.defaultGroupingExpansionDepth === -1 || params.defaultGroupingExpansionDepth > node.depth;
+  };
+
+  for (var i = 0; i < params.rows.length; i += 1) {
+    var row = params.rows[i];
+    var keyToIdSubTree = groupingCriteriaToIdTree;
+    var parentNode = null;
+
+    for (var depth = 0; depth < row.path.length; depth += 1) {
+      var _row$path$depth = row.path[depth],
+          _key = _row$path$depth.key,
+          rawField = _row$path$depth.field;
+
+      var _field = rawField != null ? rawField : '__no_field__';
+
+      var nodeId = void 0;
+      var fieldSubTree = keyToIdSubTree[_field];
+
+      if (!fieldSubTree) {
+        fieldSubTree = {};
+        keyToIdSubTree[_field] = fieldSubTree;
+      }
+
+      var keyConfig = fieldSubTree[_key.toString()];
+
+      if (keyConfig) {
+        if (depth === row.path.length - 1) {
+          var _params$onDuplicatePa;
+
+          (_params$onDuplicatePa = params.onDuplicatePath) == null ? void 0 : _params$onDuplicatePa.call(params, keyConfig.id, row.id, row.path);
+        }
+
+        nodeId = keyConfig.id;
+      } else {
+        if (depth === row.path.length - 1) {
+          nodeId = row.id;
+        } else {
+          nodeId = "auto-generated-row-".concat(row.path.map(function (groupingCriteria) {
+            return "".concat(groupingCriteria.field, "/").concat(groupingCriteria.key);
+          }).slice(0, depth + 1).join('-'));
+        }
+
+        keyConfig = {
+          id: nodeId,
+          children: {}
+        };
+        fieldSubTree[_key.toString()] = keyConfig;
+      }
+
+      keyToIdSubTree = keyConfig.children;
+
+      if (!tempTree[nodeId]) {
+        var _parentNode$id, _parentNode;
+
+        var isAutoGenerated = depth < row.path.length - 1;
+        var _node = {
+          id: nodeId,
+          isAutoGenerated: isAutoGenerated,
+          parent: (_parentNode$id = (_parentNode = parentNode) == null ? void 0 : _parentNode.id) != null ? _parentNode$id : null,
+          groupingKey: _key,
+          groupingField: rawField,
+          depth: depth
+        };
+
+        if (isAutoGenerated) {
+          idRowsLookup[nodeId] = {};
+          ids.push(nodeId);
+        }
+
+        tempTree[nodeId] = _node;
+      }
+
+      if (parentNode != null) {
+        if (!parentNode.children) {
+          parentNode.children = {};
+        }
+
+        parentNode.children[nodeId] = nodeId;
+      }
+
+      parentNode = tempTree[nodeId];
+    }
+
+    treeDepth = Math.max(treeDepth, row.path.length);
+  }
+
+  var tree = {};
+
+  var _loop = function _loop(_i) {
+    var _params$previousTree2, _previousNode$childre, _node$children, _previousNode$childre2;
+
+    var rowId = ids[_i];
+    var tempNode = tempTree[rowId];
+
+    var nodeWithoutChildrenExpansion = _extends({}, tempNode, {
+      children: tempNode.children ? Object.values(tempNode.children) : undefined
+    });
+
+    var node = _extends({}, nodeWithoutChildrenExpansion, {
+      childrenExpanded: isGroupExpandedByDefault(nodeWithoutChildrenExpansion)
+    });
+
+    var previousNode = (_params$previousTree2 = params.previousTree) == null ? void 0 : _params$previousTree2[node.id];
+    var shouldReUsePreviousNode = previousNode && previousNode.isAutoGenerated === node.isAutoGenerated && previousNode.parent === node.parent && previousNode.groupingKey === node.groupingKey && previousNode.groupingField === node.groupingField && previousNode.depth === node.depth && previousNode.childrenExpanded === node.childrenExpanded && ((_previousNode$childre = previousNode.children) == null ? void 0 : _previousNode$childre.length) === ((_node$children = node.children) == null ? void 0 : _node$children.length) && ((_previousNode$childre2 = previousNode.children) == null ? void 0 : _previousNode$childre2.every(function (childId, index) {
+      var _node$children2;
+
+      return ((_node$children2 = node.children) == null ? void 0 : _node$children2[index]) === childId;
+    }));
+
+    if (shouldReUsePreviousNode) {
+      tree[rowId] = previousNode;
+    } else {
+      tree[rowId] = node;
+    }
+  };
+
+  for (var _i = 0; _i < ids.length; _i += 1) {
+    _loop(_i);
+  }
+
+  return {
+    tree: tree,
+    treeDepth: treeDepth,
+    ids: ids,
+    idRowsLookup: idRowsLookup,
+    groupingName: params.groupingName
+  };
+};

package/legacy/utils/tree/sortRowTree.js

@@ -0,0 +1,63 @@
+import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
+export var sortRowTree = function sortRowTree(params) {
+  var rowIds = params.rowIds,
+      rowTree = params.rowTree,
+      disableChildrenSorting = params.disableChildrenSorting,
+      sortRowList = params.sortRowList;
+  var sortedRows = []; // Group the rows by parent
+
+  var groupedByParentRows = new Map([[null, []]]);
+
+  for (var i = 0; i < rowIds.length; i += 1) {
+    var rowId = rowIds[i];
+    var node = rowTree[rowId];
+    var group = groupedByParentRows.get(node.parent);
+
+    if (!group) {
+      group = [];
+      groupedByParentRows.set(node.parent, group);
+    }
+
+    group.push(node);
+  } // Apply the sorting to each list of children
+
+
+  var sortedGroupedByParentRows = new Map();
+  groupedByParentRows.forEach(function (rowList, parent) {
+    if (rowList.length === 0) {
+      sortedGroupedByParentRows.set(parent, []);
+    } else {
+      var depth = rowList[0].depth;
+
+      if (depth > 0 && disableChildrenSorting) {
+        sortedGroupedByParentRows.set(parent, rowList.map(function (row) {
+          return row.id;
+        }));
+      } else if (!sortRowList) {
+        sortedGroupedByParentRows.set(parent, rowList.map(function (row) {
+          return row.id;
+        }));
+      } else {
+        sortedGroupedByParentRows.set(parent, sortRowList(rowList));
+      }
+    }
+  }); // Flatten the sorted lists to have children just after their parent
+
+  var insertRowListIntoSortedRows = function insertRowListIntoSortedRows(startIndex, rowList) {
+    sortedRows = [].concat(_toConsumableArray(sortedRows.slice(0, startIndex)), _toConsumableArray(rowList), _toConsumableArray(sortedRows.slice(startIndex)));
+    var treeSize = 0;
+    rowList.forEach(function (rowId) {
+      treeSize += 1;
+      var children = sortedGroupedByParentRows.get(rowId);
+
+      if (children != null && children.length) {
+        var subTreeSize = insertRowListIntoSortedRows(startIndex + treeSize, children);
+        treeSize += subTreeSize;
+      }
+    });
+    return treeSize;
+  };
+
+  insertRowListIntoSortedRows(0, sortedGroupedByParentRows.get(null));
+  return sortedRows;
+};

package/models/dataGridProProps.d.ts

@@ -0,0 +1,174 @@
+import * as React from 'react';
+import { GridRowModel, GridRowTreeNodeConfig, GridEventListener, GridEvents, GridCallbackDetails, GridRowParams, GridRowId } from '@mui/x-data-grid';
+import { GridExperimentalFeatures, DataGridPropsWithoutDefaultValue, DataGridPropsWithDefaultValues, DataGridPropsWithComplexDefaultValueAfterProcessing, DataGridPropsWithComplexDefaultValueBeforeProcessing } from '@mui/x-data-grid/internals';
+import type { GridPinnedColumns } from '../hooks/features/columnPinning';
+import { GridApiPro } from './gridApiPro';
+import { GridGroupingColDefOverride, GridGroupingColDefOverrideParams } from './gridGroupingColDefOverride';
+import type { GridRowGroupingModel } from '../hooks/features/rowGrouping';
+import { GridInitialStatePro } from './gridStatePro';
+export interface GridExperimentalProFeatures extends GridExperimentalFeatures {
+    /**
+     * Will be part of the premium-plan when fully ready.
+     */
+    rowGrouping: boolean;
+}
+/**
+ * The props users can give to the `DataGridProProps` component.
+ */
+export interface DataGridProProps extends Omit<Partial<DataGridProPropsWithDefaultValue> & DataGridPropsWithComplexDefaultValueBeforeProcessing & DataGridProPropsWithoutDefaultValue, DataGridProForcedPropsKey> {
+    /**
+     * Features under development.
+     * For each feature, if the flag is not explicitly set to `true`, the feature will be fully disabled and any property / method call will not have any effect.
+     */
+    experimentalFeatures?: Partial<GridExperimentalProFeatures>;
+}
+/**
+ * The props of the `DataGridPro` component after the pre-processing phase.
+ */
+export interface DataGridProProcessedProps extends DataGridProPropsWithDefaultValue, DataGridPropsWithComplexDefaultValueAfterProcessing, DataGridProPropsWithoutDefaultValue {
+}
+export declare type DataGridProForcedPropsKey = 'signature';
+/**
+ * The `DataGridPro` options with a default value overridable through props
+ * None of the entry of this interface should be optional, they all have default values and `DataGridProps` already applies a `Partial<DataGridSimpleOptions>` for the public interface
+ * The controlled model do not have a default value at the prop processing level, so they must be defined in `DataGridOtherProps`
+ */
+export interface DataGridProPropsWithDefaultValue extends DataGridPropsWithDefaultValues {
+    /**
+     * Set the area in `px` at the bottom of the grid viewport where onRowsScrollEnd is called.
+     * @default 80
+     */
+    scrollEndThreshold: number;
+    /**
+     * If `true`, the rows will be gathered in a tree structure according to the `getTreeDataPath` prop.
+     * @default false
+     */
+    treeData: boolean;
+    /**
+     * If above 0, the row children will be expanded up to this depth.
+     * If equal to -1, all the row children will be expanded.
+     * @default 0
+     */
+    defaultGroupingExpansionDepth: number;
+    /**
+     * 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.
+     * @returns {boolean} A boolean indicating if the group is expanded.
+     */
+    isGroupExpandedByDefault?: (node: GridRowTreeNodeConfig) => boolean;
+    /**
+     * If `true`, the column pinning is disabled.
+     * @default false
+     */
+    disableColumnPinning: boolean;
+    /**
+     * If `true`, the filtering will only be applied to the top level rows when grouping rows with the `treeData` prop.
+     * @default false
+     */
+    disableChildrenFiltering: boolean;
+    /**
+     * If `true`, the sorting will only be applied to the top level rows when grouping rows with the `treeData` prop.
+     * @default false
+     */
+    disableChildrenSorting: boolean;
+    /**
+     * If `true`, the row grouping is disabled.
+     * @default false
+     */
+    disableRowGrouping: boolean;
+    /**
+     * If `single`, all column we are grouping by will be represented in the same grouping the same column.
+     * If `multiple`, each column we are grouping by will be represented in its own column.
+     * @default 'single'
+     */
+    rowGroupingColumnMode: 'single' | 'multiple';
+    /**
+     * Function that returns the height of the row detail panel.
+     * @param {GridRowParams} params With all properties from [[GridRowParams]].
+     * @returns {number} The height in pixels.
+     * @default "() => 500"
+     */
+    getDetailPanelHeight: (params: GridRowParams) => number;
+}
+export interface DataGridProPropsWithoutDefaultValue extends Omit<DataGridPropsWithoutDefaultValue, 'initialState'> {
+    /**
+     * The ref object that allows grid manipulation. Can be instantiated with [[useGridApiRef()]].
+     */
+    apiRef?: React.MutableRefObject<GridApiPro>;
+    /**
+     * The initial state of the DataGridPro.
+     * The data in it will be set in the state on initialization but will not be controlled.
+     * If one of the data in `initialState` is also being controlled, then the control state wins.
+     */
+    initialState?: GridInitialStatePro;
+    /**
+     * Determines the path of a row in the tree data.
+     * For instance, a row with the path ["A", "B"] is the child of the row with the path ["A"].
+     * Note that all paths must contain at least one element.
+     * @param {GridRowModel} row The row from which we want the path.
+     * @returns {string[]} The path to the row.
+     */
+    getTreeDataPath?: (row: GridRowModel) => string[];
+    /**
+     * Callback fired while a column is being resized.
+     * @param {GridColumnResizeParams} params With all properties from [[GridColumnResizeParams]].
+     * @param {MuiEvent<React.MouseEvent>} event The event object.
+     * @param {GridCallbackDetails} details Additional details for this callback.
+     */
+    onColumnResize?: GridEventListener<GridEvents.columnResize>;
+    /**
+     * Callback fired when the width of a column is changed.
+     * @param {GridColumnResizeParams} params With all properties from [[GridColumnResizeParams]].
+     * @param {MuiEvent<React.MouseEvent>} event The event object.
+     * @param {GridCallbackDetails} details Additional details for this callback.
+     */
+    onColumnWidthChange?: GridEventListener<GridEvents.columnWidthChange>;
+    /**
+     * Callback fired when scrolling to the bottom of the grid viewport.
+     * @param {GridRowScrollEndParams} params With all properties from [[GridRowScrollEndParams]].
+     * @param {MuiEvent<{}>} event The event object.
+     * @param {GridCallbackDetails} details Additional details for this callback.
+     */
+    onRowsScrollEnd?: GridEventListener<GridEvents.rowsScrollEnd>;
+    /**
+     * The column fields to display pinned to left or right.
+     */
+    pinnedColumns?: GridPinnedColumns;
+    /**
+     * Callback fired when the pinned columns have changed.
+     * @param {GridPinnedColumns} pinnedColumns The changed pinned columns.
+     * @param {GridCallbackDetails} details Additional details for this callback.
+     */
+    onPinnedColumnsChange?: (pinnedColumns: GridPinnedColumns, details: GridCallbackDetails) => void;
+    /**
+     * Set the row grouping model of the grid.
+     */
+    rowGroupingModel?: GridRowGroupingModel;
+    /**
+     * Callback fired when the row grouping model changes.
+     * @param {GridRowGroupingModel} model Columns used as grouping criteria.
+     * @param {GridCallbackDetails} details Additional details for this callback.
+     */
+    onRowGroupingModelChange?: (model: GridRowGroupingModel, details: GridCallbackDetails) => void;
+    /**
+     * The grouping column used by the tree data.
+     */
+    groupingColDef?: GridGroupingColDefOverride | ((params: GridGroupingColDefOverrideParams) => GridGroupingColDefOverride | undefined | null);
+    /**
+     * The row ids to show the detail panel.
+     */
+    detailPanelExpandedRowIds?: GridRowId[];
+    /**
+     * Callback fired when the detail panel of a row is opened or closed.
+     * @param {GridRowId[]} ids The ids of the rows which have the detail panel open.
+     * @param {GridCallbackDetails} details Additional details for this callback.
+     */
+    onDetailPanelExpandedRowIdsChange?: (ids: GridRowId[], details: GridCallbackDetails) => void;
+    /**
+     * Function that returns the element to render in row detail.
+     * @param {GridRowParams} params With all properties from [[GridRowParams]].
+     * @returns {JSX.Element} The row detail element.
+     */
+    getDetailPanelContent?: (params: GridRowParams) => React.ReactNode;
+}

package/models/dataGridProProps.js

@@ -0,0 +1 @@
+export {};

package/models/gridApiPro.d.ts

@@ -0,0 +1,12 @@
+import { GridApiCommon, GridStateApi, GridStatePersistenceApi } from '@mui/x-data-grid';
+import { GridInitialStatePro, GridStatePro } from './gridStatePro';
+import type { GridColumnPinningApi, GridRowGroupingApi, GridDetailPanelApi } from '../hooks';
+declare type GridStateApiUntyped = {
+    [key in keyof (GridStateApi<any> & GridStatePersistenceApi<any>)]: any;
+};
+/**
+ * The api of `DataGridPro`.
+ */
+export interface GridApiPro extends Omit<GridApiCommon, keyof GridStateApiUntyped>, GridStateApi<GridStatePro>, GridStatePersistenceApi<GridInitialStatePro>, GridRowGroupingApi, GridColumnPinningApi, GridDetailPanelApi {
+}
+export {};

package/models/gridApiPro.js

@@ -0,0 +1 @@
+export {};

package/models/gridGroupingColDefOverride.d.ts

@@ -0,0 +1,30 @@
+import { GridColDef } from '@mui/x-data-grid';
+export interface GridGroupingColDefOverride extends Omit<GridColDef, 'editable' | 'valueSetter' | 'field' | 'type' | 'preProcessEditCellProps' | 'renderEditCell' | 'groupable'> {
+    /**
+     * The field from which we want to apply the sorting and the filtering for the grouping column.
+     * It is only useful when `props.rowGroupingColumnMode === "multiple"` to decide which grouping criteria should be used for sorting and filtering.
+     * Do not have any effect when building the tree with the `props.treeData` feature.
+     * @default: The sorting and filtering is applied based on the leaf field in any, otherwise based on top level grouping criteria.
+     */
+    mainGroupingCriteria?: string;
+    /**
+     * The field from which we want to render the leaves of the tree.
+     * Do not have any effect when building the tree with the `props.treeData` feature.
+     */
+    leafField?: string;
+    /**
+     * If `true`, the grouping cells will not render the amount of descendants.
+     * @default: false
+     */
+    hideDescendantCount?: boolean;
+}
+export interface GridGroupingColDefOverrideParams {
+    /**
+     * The name of the grouping algorithm currently building the grouping column.
+     */
+    groupingName: string;
+    /**
+     * The fields of the columns from which we want to group the values on this new grouping column.
+     */
+    fields: string[];
+}

package/models/gridGroupingColDefOverride.js

@@ -0,0 +1 @@
+export {};