@mui/x-data-grid-pro 5.17.5 → 6.0.0-alpha.1

package/hooks/features/lazyLoader/useGridLazyLoaderPreProcessors.js

@@ -1,7 +1,7 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import { useGridRegisterPipeProcessor } from '@mui/x-data-grid/internals';
-import { GridFeatureModeConstant } from '@mui/x-data-grid';
+import { GRID_ROOT_GROUP_ID } from '@mui/x-data-grid';
 export const GRID_SKELETON_ROW_ROOT_ID = 'auto-generated-skeleton-row-root';
 
 const getSkeletonRowId = index => `${GRID_SKELETON_ROW_ROOT_ID}-${index}`;
@@ -13,19 +13,33 @@ export const useGridLazyLoaderPreProcessors = (apiRef, props) => {
     lazyLoading
   } = (_props$experimentalFe = props.experimentalFeatures) != null ? _props$experimentalFe : {};
   const addSkeletonRows = React.useCallback(groupingParams => {
-    if (!lazyLoading || props.rowsLoadingMode !== GridFeatureModeConstant.server || !props.rowCount || groupingParams.ids.length >= props.rowCount) {
+    const tree = _extends({}, groupingParams.tree);
+
+    const rootGroup = tree[GRID_ROOT_GROUP_ID];
+
+    if (!lazyLoading || props.rowsLoadingMode !== 'server' || !props.rowCount || rootGroup.children.length >= props.rowCount) {
       return groupingParams;
     }
 
-    const newRowsIds = [...groupingParams.ids];
+    const rootGroupChildren = [...rootGroup.children];
 
-    for (let i = 0; i < props.rowCount - groupingParams.ids.length; i += 1) {
+    for (let i = 0; i < props.rowCount - rootGroup.children.length; i += 1) {
       const skeletonId = getSkeletonRowId(i);
-      newRowsIds.push(skeletonId);
+      rootGroupChildren.push(skeletonId);
+      const skeletonRowNode = {
+        type: 'skeletonRow',
+        id: skeletonId,
+        parent: GRID_ROOT_GROUP_ID,
+        depth: 0
+      };
+      tree[skeletonId] = skeletonRowNode;
     }
 
+    tree[GRID_ROOT_GROUP_ID] = _extends({}, rootGroup, {
+      children: rootGroupChildren
+    });
     return _extends({}, groupingParams, {
-      ids: newRowsIds
+      tree
     });
   }, [props.rowCount, props.rowsLoadingMode, lazyLoading]);
   useGridRegisterPipeProcessor(apiRef, 'hydrateRows', addSkeletonRows);

package/hooks/features/rowPinning/gridRowPinningInterface.d.ts

@@ -1,4 +1,4 @@
-import { GridRowId, GridRowsLookup, GridRowsProp, GridValidRowModel } from '@mui/x-data-grid';
+import { GridRowId, GridRowIdToModelLookup, GridRowsProp, GridValidRowModel } from '@mui/x-data-grid';
 export interface GridPinnedRowsProp<R extends GridValidRowModel = GridValidRowModel> {
     top?: GridRowsProp<R>;
     bottom?: GridRowsProp<R>;
@@ -13,5 +13,5 @@ export interface GridRowPinningApi {
 export interface GridRowPinningInternalCache {
     topIds: GridRowId[];
     bottomIds: GridRowId[];
-    idLookup: GridRowsLookup;
+    idLookup: GridRowIdToModelLookup;
 }

package/hooks/features/rowPinning/useGridRowPinningPreProcessors.d.ts

@@ -1,34 +1,34 @@
 import * as React from 'react';
 import { GridHydrateRowsValue } from '@mui/x-data-grid/internals';
-import { GridRowEntry, GridRowId, GridRowModel } from '@mui/x-data-grid';
+import { GridRowId, GridRowModel } from '@mui/x-data-grid';
 import { GridApiPro } from '../../../models/gridApiPro';
 import { GridPinnedRowsProp } from './gridRowPinningInterface';
 declare type GridPinnedRowPosition = keyof GridPinnedRowsProp;
-export declare function addPinnedRow({ groupingParams, rowModel, rowId, position, apiRef, }: {
+export declare function addPinnedRow({ groupingParams, rowModel, rowId, position, apiRef, isAutoGenerated, }: {
     groupingParams: GridHydrateRowsValue;
-    rowModel: GridRowModel;
+    rowModel: GridRowModel | undefined;
     rowId: GridRowId;
     position: GridPinnedRowPosition;
     apiRef: React.MutableRefObject<GridApiPro>;
+    isAutoGenerated: boolean;
 }): {
-    idRowsLookup: {
+    dataRowIdToModelLookup: {
         [x: string]: import("@mui/x-data-grid").GridValidRowModel;
-        [x: number]: import("@mui/x-data-grid").GridValidRowModel;
+    };
+    dataRowIdToIdLookup: {
+        [x: string]: GridRowId;
     };
     tree: {
-        [x: string]: import("@mui/x-data-grid").GridRowTreeNodeConfig;
-        [x: number]: import("@mui/x-data-grid").GridRowTreeNodeConfig;
+        [x: string]: import("@mui/x-data-grid").GridTreeNode;
+        [x: number]: import("@mui/x-data-grid").GridTreeNode;
     };
-    additionalRowGroups: {
-        pinnedRows: {
-            top?: GridRowEntry<import("@mui/x-data-grid").GridValidRowModel>[] | undefined;
-            bottom?: GridRowEntry<import("@mui/x-data-grid").GridValidRowModel>[] | undefined;
-        };
+    treeDepths: {
+        [x: number]: number;
     };
-    groupingName: string;
-    treeDepth: number;
-    ids: GridRowId[];
-    idToIdLookup: Record<string, GridRowId>;
+    dataRowIds: GridRowId[];
+    additionalRowGroups?: {
+        pinnedRows?: import("@mui/x-data-grid/internals").GridPinnedRowsState | undefined;
+    } | undefined;
 };
 export declare const useGridRowPinningPreProcessors: (apiRef: React.MutableRefObject<GridApiPro>) => void;
 export {};

package/hooks/features/rowPinning/useGridRowPinningPreProcessors.js

@@ -1,42 +1,68 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import { useGridRegisterPipeProcessor } from '@mui/x-data-grid/internals';
+import { GRID_ROOT_GROUP_ID } from '@mui/x-data-grid';
+import { insertNodeInTree } from '../../../utils/tree/utils';
 export function addPinnedRow({
   groupingParams,
   rowModel,
   rowId,
   position,
-  apiRef
+  apiRef,
+  isAutoGenerated
 }) {
-  var _groupingParams$addit;
+  var _groupingParams$addit, _groupingParams$addit2, _groupingParams$addit3, _groupingParams$addit4;
 
-  const idRowsLookup = _extends({}, groupingParams.idRowsLookup);
+  const dataRowIdToModelLookup = _extends({}, groupingParams.dataRowIdToModelLookup);
 
-  const tree = _extends({}, groupingParams.tree); // TODO: warn if id is already present in `props.rows`
+  const dataRowIdToIdLookup = _extends({}, groupingParams.dataRowIdToIdLookup);
 
+  const tree = _extends({}, groupingParams.tree);
 
-  idRowsLookup[rowId] = rowModel; // Do not push it to ids list so that pagination is not affected by pinned rows
-  // ids.push(rowId);
+  const treeDepths = _extends({}, groupingParams.treeDepths); // TODO: warn if id is already present in `props.rows`
 
-  tree[rowId] = {
+
+  const node = {
+    type: 'pinnedRow',
     id: rowId,
-    isAutoGenerated: false,
-    parent: null,
     depth: 0,
-    groupingKey: null,
-    groupingField: null,
-    isPinned: true
+    parent: GRID_ROOT_GROUP_ID,
+    isAutoGenerated
   };
-  apiRef.current.unstable_caches.rows.idRowsLookup[rowId] = _extends({}, rowModel);
-  apiRef.current.unstable_caches.rows.idToIdLookup[rowId] = rowId;
+  insertNodeInTree({
+    node,
+    tree,
+    treeDepths
+  });
+
+  if (!isAutoGenerated) {
+    dataRowIdToModelLookup[rowId] = rowModel;
+    dataRowIdToIdLookup[rowId] = rowId;
+  } // Do not push it to ids list so that pagination is not affected by pinned rows
+
+
+  apiRef.current.unstable_caches.rows.dataRowIdToModelLookup[rowId] = _extends({}, rowModel);
+  apiRef.current.unstable_caches.rows.dataRowIdToIdLookup[rowId] = rowId;
   const previousPinnedRows = ((_groupingParams$addit = groupingParams.additionalRowGroups) == null ? void 0 : _groupingParams$addit.pinnedRows) || {};
   const newPinnedRow = {
     id: rowId,
     model: rowModel
   };
+
+  if ((_groupingParams$addit2 = groupingParams.additionalRowGroups) != null && (_groupingParams$addit3 = _groupingParams$addit2.pinnedRows) != null && (_groupingParams$addit4 = _groupingParams$addit3[position]) != null && _groupingParams$addit4.includes(newPinnedRow)) {
+    return _extends({}, groupingParams, {
+      dataRowIdToModelLookup,
+      dataRowIdToIdLookup,
+      tree,
+      treeDepths
+    });
+  }
+
   return _extends({}, groupingParams, {
-    idRowsLookup,
+    dataRowIdToModelLookup,
+    dataRowIdToIdLookup,
     tree,
+    treeDepths,
     additionalRowGroups: _extends({}, groupingParams.additionalRowGroups, {
       pinnedRows: _extends({}, previousPinnedRows, {
         [position]: [...(previousPinnedRows[position] || []), newPinnedRow]
@@ -46,7 +72,7 @@ export function addPinnedRow({
 }
 export const useGridRowPinningPreProcessors = apiRef => {
   const addPinnedRows = React.useCallback(groupingParams => {
-    var _pinnedRowsCache$topI, _pinnedRowsCache$bott;
+    var _pinnedRowsCache$topI, _pinnedRowsCache$bott, _pinnedRowsCache$bott2, _pinnedRowsCache$topI2;
 
     const pinnedRowsCache = apiRef.current.unstable_caches.pinnedRows || {};
 
@@ -63,7 +89,8 @@ export const useGridRowPinningPreProcessors = apiRef => {
         rowModel: pinnedRowsCache.idLookup[rowId],
         rowId,
         position: 'top',
-        apiRef
+        apiRef,
+        isAutoGenerated: false
       });
     });
     (_pinnedRowsCache$bott = pinnedRowsCache.bottomIds) == null ? void 0 : _pinnedRowsCache$bott.forEach(rowId => {
@@ -72,17 +99,27 @@ export const useGridRowPinningPreProcessors = apiRef => {
         rowModel: pinnedRowsCache.idLookup[rowId],
         rowId,
         position: 'bottom',
-        apiRef
+        apiRef,
+        isAutoGenerated: false
       });
-    }); // If row with the same `id` is present both in `rows` and `pinnedRows` - remove it from `ids`
+    }); // If row with the same `id` is present both in `rows` and `pinnedRows` - remove it from the root group children
 
-    newGroupingParams.ids = newGroupingParams.ids.filter(rowId => {
-      if (newGroupingParams.tree[rowId] && newGroupingParams.tree[rowId].isPinned) {
-        return false;
-      }
+    if ((_pinnedRowsCache$bott2 = pinnedRowsCache.bottomIds) != null && _pinnedRowsCache$bott2.length || (_pinnedRowsCache$topI2 = pinnedRowsCache.topIds) != null && _pinnedRowsCache$topI2.length) {
+      const shouldKeepRow = rowId => {
+        if (newGroupingParams.tree[rowId] && newGroupingParams.tree[rowId].type === 'pinnedRow') {
+          return false;
+        }
+
+        return true;
+      };
+
+      const rootGroupNode = newGroupingParams.tree[GRID_ROOT_GROUP_ID];
+      newGroupingParams.tree[GRID_ROOT_GROUP_ID] = _extends({}, rootGroupNode, {
+        children: rootGroupNode.children.filter(shouldKeepRow)
+      });
+      newGroupingParams.dataRowIds = newGroupingParams.dataRowIds.filter(shouldKeepRow);
+    }
 
-      return true;
-    });
     return newGroupingParams;
   }, [apiRef]);
   useGridRegisterPipeProcessor(apiRef, 'hydrateRows', addPinnedRows);

package/hooks/features/rowReorder/useGridRowReorder.js

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { unstable_composeClasses as composeClasses } from '@mui/material';
-import { useGridLogger, useGridApiEventHandler, getDataGridUtilityClass, useGridSelector, gridSortModelSelector, gridRowTreeDepthSelector, useGridApiOptionHandler, gridEditRowsStateSelector } from '@mui/x-data-grid';
+import { useGridLogger, useGridApiEventHandler, getDataGridUtilityClass, useGridSelector, gridSortModelSelector, gridRowMaximumTreeDepthSelector, useGridApiOptionHandler, gridEditRowsStateSelector } from '@mui/x-data-grid';
 
 const useUtilityClasses = ownerState => {
   const {
@@ -20,7 +20,7 @@ const useUtilityClasses = ownerState => {
 export const useGridRowReorder = (apiRef, props) => {
   const logger = useGridLogger(apiRef, 'useGridRowReorder');
   const sortModel = useGridSelector(apiRef, gridSortModelSelector);
-  const treeDepth = useGridSelector(apiRef, gridRowTreeDepthSelector);
+  const treeDepth = useGridSelector(apiRef, gridRowMaximumTreeDepthSelector);
   const dragRowNode = React.useRef(null);
   const originRowIndex = React.useRef(null);
   const removeDnDStylesTimeout = React.useRef();
@@ -60,13 +60,13 @@ export const useGridRowReorder = (apiRef, props) => {
     originRowIndex.current = apiRef.current.getRowIndex(params.id);
   }, [isRowReorderDisabled, classes.rowDragging, logger, apiRef]);
   const handleDragOver = React.useCallback((params, event) => {
-    var _apiRef$current$getRo;
-
     if (dragRowId === '') {
       return;
     }
 
-    if ((_apiRef$current$getRo = apiRef.current.getRowNode(params.id)) != null && _apiRef$current$getRo.isPinned) {
+    const rowNode = apiRef.current.getRowNode(params.id);
+
+    if (!rowNode || rowNode.type === 'footer' || rowNode.type === 'pinnedRow') {
       return;
     }
 

package/hooks/features/treeData/gridTreeDataGroupColDef.js

@@ -12,7 +12,7 @@ export const GRID_TREE_DATA_GROUPING_COL_DEF = _extends({}, GRID_STRING_COL_DEF,
   disableReorder: true,
   align: 'left',
   width: 200,
-  valueGetter: params => params.rowNode.groupingKey
+  valueGetter: params => params.rowNode.type === 'group' ? params.rowNode.groupingKey : undefined
 });
 export const GRID_TREE_DATA_GROUPING_FIELD = '__tree_data_group__';
 export const GRID_TREE_DATA_GROUPING_COL_DEF_FORCED_PROPERTIES = {

package/hooks/features/treeData/gridTreeDataUtils.js

@@ -17,14 +17,12 @@ export const filterRowTreeFromTreeData = params => {
   const filteredDescendantCountLookup = {};
 
   const filterTreeNode = (node, isParentMatchingFilters, areAncestorsExpanded) => {
-    var _node$children;
-
     const shouldSkipFilters = disableChildrenFiltering && node.depth > 0;
     let isMatchingFilters;
 
     if (shouldSkipFilters) {
       isMatchingFilters = null;
-    } else if (!isRowMatchingFilters || node.position === 'footer') {
+    } else if (!isRowMatchingFilters || node.type === 'footer') {
       isMatchingFilters = true;
     } else {
       const {
@@ -35,13 +33,17 @@ export const filterRowTreeFromTreeData = params => {
     }
 
     let filteredDescendantCount = 0;
-    (_node$children = node.children) == null ? void 0 : _node$children.forEach(childId => {
-      var _isMatchingFilters;
 
-      const childNode = rowTree[childId];
-      const childSubTreeSize = filterTreeNode(childNode, (_isMatchingFilters = isMatchingFilters) != null ? _isMatchingFilters : isParentMatchingFilters, areAncestorsExpanded && !!node.childrenExpanded);
-      filteredDescendantCount += childSubTreeSize;
-    });
+    if (node.type === 'group') {
+      node.children.forEach(childId => {
+        var _isMatchingFilters;
+
+        const childNode = rowTree[childId];
+        const childSubTreeSize = filterTreeNode(childNode, (_isMatchingFilters = isMatchingFilters) != null ? _isMatchingFilters : isParentMatchingFilters, areAncestorsExpanded && !!node.childrenExpanded);
+        filteredDescendantCount += childSubTreeSize;
+      });
+    }
+
     let shouldPassFilters;
 
     switch (isMatchingFilters) {
@@ -65,9 +67,9 @@ export const filterRowTreeFromTreeData = params => {
     }
 
     visibleRowsLookup[node.id] = shouldPassFilters && areAncestorsExpanded;
-    filteredRowsLookup[node.id] = shouldPassFilters;
+    filteredRowsLookup[node.id] = shouldPassFilters; // TODO: Should we keep storing the visibility status of footer independently or rely on the group visibility in the selector ?
 
-    if (node.footerId != null) {
+    if (node.type === 'group' && node.footerId != null) {
       visibleRowsLookup[node.footerId] = shouldPassFilters && areAncestorsExpanded && !!node.childrenExpanded;
     }
 
@@ -77,7 +79,7 @@ export const filterRowTreeFromTreeData = params => {
 
     filteredDescendantCountLookup[node.id] = filteredDescendantCount;
 
-    if (node.position === 'footer') {
+    if (node.type === 'footer') {
       return filteredDescendantCount;
     }
 

package/hooks/features/treeData/useGridTreeData.js

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { useGridApiEventHandler, gridFilteredDescendantCountLookupSelector } from '@mui/x-data-grid';
+import { useGridApiEventHandler } from '@mui/x-data-grid';
 export const useGridTreeData = apiRef => {
   /**
    * EVENTS
@@ -8,11 +8,7 @@ export const useGridTreeData = apiRef => {
     const cellParams = apiRef.current.getCellParams(params.id, params.field);
 
     if (cellParams.colDef.type === 'treeDataGroup' && event.key === ' ' && !event.shiftKey) {
-      var _gridFilteredDescenda;
-
-      const filteredDescendantCount = (_gridFilteredDescenda = gridFilteredDescendantCountLookupSelector(apiRef)[params.id]) != null ? _gridFilteredDescenda : 0;
-
-      if (filteredDescendantCount === 0) {
+      if (params.rowNode.type !== 'group') {
         return;
       }
 

package/hooks/features/treeData/useGridTreeDataPreProcessors.js

@@ -2,13 +2,14 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 const _excluded = ["hideDescendantCount"];
 import * as React from 'react';
-import { gridRowIdsSelector, gridRowTreeSelector, useFirstRender, GRID_CHECKBOX_SELECTION_FIELD } from '@mui/x-data-grid';
+import { gridRowTreeSelector, useFirstRender, GRID_CHECKBOX_SELECTION_FIELD } from '@mui/x-data-grid';
 import { useGridRegisterPipeProcessor, useGridRegisterStrategyProcessor } from '@mui/x-data-grid/internals';
 import { GRID_TREE_DATA_GROUPING_COL_DEF, GRID_TREE_DATA_GROUPING_COL_DEF_FORCED_PROPERTIES } from './gridTreeDataGroupColDef';
 import { filterRowTreeFromTreeData, TREE_DATA_STRATEGY } from './gridTreeDataUtils';
 import { GridTreeDataGroupingCell } from '../../../components';
-import { buildRowTree } from '../../../utils/tree/buildRowTree';
+import { createRowTree } from '../../../utils/tree/createRowTree';
 import { sortRowTree } from '../../../utils/tree/sortRowTree';
+import { updateRowTree } from '../../../utils/tree/updateRowTree';
 import { jsx as _jsx } from "react/jsx-runtime";
 export const useGridTreeDataPreProcessors = (apiRef, props) => {
   const setStrategyAvailability = React.useCallback(() => {
@@ -71,28 +72,45 @@ export const useGridTreeDataPreProcessors = (apiRef, props) => {
 
     return columnsState;
   }, [props.treeData, getGroupingColDef]);
-  const createRowTree = React.useCallback(params => {
+  const createRowTreeForTreeData = React.useCallback(params => {
     if (!props.getTreeDataPath) {
       throw new Error('MUI: No getTreeDataPath given.');
     }
 
-    const rows = params.ids.map(rowId => ({
+    const getRowTreeBuilderNode = rowId => ({
       id: rowId,
-      path: props.getTreeDataPath(params.idRowsLookup[rowId]).map(key => ({
+      path: props.getTreeDataPath(params.dataRowIdToModelLookup[rowId]).map(key => ({
         key,
         field: null
       }))
-    })).sort((a, b) => a.path.length - b.path.length);
-    return buildRowTree(_extends({
-      rows
-    }, params, {
+    });
+
+    const onDuplicatePath = (firstId, secondId, path) => {
+      throw new Error(['MUI: The path returned by `getTreeDataPath` should be unique.', `The rows with id #${firstId} and #${secondId} have the same.`, `Path: ${JSON.stringify(path.map(step => step.key))}.`].join('\n'));
+    };
+
+    if (params.updates.type === 'full') {
+      return createRowTree({
+        nodes: params.updates.rows.map(getRowTreeBuilderNode),
+        defaultGroupingExpansionDepth: props.defaultGroupingExpansionDepth,
+        isGroupExpandedByDefault: props.isGroupExpandedByDefault,
+        groupingName: TREE_DATA_STRATEGY,
+        onDuplicatePath
+      });
+    }
+
+    return updateRowTree({
+      nodes: {
+        inserted: params.updates.actions.insert.map(getRowTreeBuilderNode),
+        modified: params.updates.actions.modify.map(getRowTreeBuilderNode),
+        removed: params.updates.actions.remove
+      },
+      previousTree: params.previousTree,
+      previousTreeDepth: params.previousTreeDepths,
       defaultGroupingExpansionDepth: props.defaultGroupingExpansionDepth,
       isGroupExpandedByDefault: props.isGroupExpandedByDefault,
-      groupingName: TREE_DATA_STRATEGY,
-      onDuplicatePath: (firstId, secondId, path) => {
-        throw new Error(['MUI: The path returned by `getTreeDataPath` should be unique.', `The rows with id #${firstId} and #${secondId} have the same.`, `Path: ${JSON.stringify(path.map(step => step.key))}.`].join('\n'));
-      }
-    }));
+      groupingName: TREE_DATA_STRATEGY
+    });
   }, [props.getTreeDataPath, props.defaultGroupingExpansionDepth, props.isGroupExpandedByDefault]);
   const filterRows = React.useCallback(params => {
     const rowTree = gridRowTreeSelector(apiRef);
@@ -106,16 +124,15 @@ export const useGridTreeDataPreProcessors = (apiRef, props) => {
   }, [apiRef, props.disableChildrenFiltering]);
   const sortRows = React.useCallback(params => {
     const rowTree = gridRowTreeSelector(apiRef);
-    const rowIds = gridRowIdsSelector(apiRef);
     return sortRowTree({
       rowTree,
-      rowIds,
       sortRowList: params.sortRowList,
-      disableChildrenSorting: props.disableChildrenSorting
+      disableChildrenSorting: props.disableChildrenSorting,
+      shouldRenderGroupBelowLeaves: false
     });
   }, [apiRef, props.disableChildrenSorting]);
   useGridRegisterPipeProcessor(apiRef, 'hydrateColumns', updateGroupingColumn);
-  useGridRegisterStrategyProcessor(apiRef, TREE_DATA_STRATEGY, 'rowTreeCreation', createRowTree);
+  useGridRegisterStrategyProcessor(apiRef, TREE_DATA_STRATEGY, 'rowTreeCreation', createRowTreeForTreeData);
   useGridRegisterStrategyProcessor(apiRef, TREE_DATA_STRATEGY, 'filtering', filterRows);
   useGridRegisterStrategyProcessor(apiRef, TREE_DATA_STRATEGY, 'sorting', sortRows);
   /**

package/index.js

@@ -1,4 +1,4 @@
-/** @license MUI v5.17.5
+/** @license MUI v6.0.0-alpha.1
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.

package/internals/index.d.ts

@@ -16,6 +16,8 @@ export { TREE_DATA_STRATEGY } from '../hooks/features/treeData/gridTreeDataUtils
 export { useGridRowPinning, rowPinningStateInitializer, } from '../hooks/features/rowPinning/useGridRowPinning';
 export { useGridRowPinningPreProcessors, addPinnedRow, } from '../hooks/features/rowPinning/useGridRowPinningPreProcessors';
 export type { GridExperimentalProFeatures, DataGridProPropsWithoutDefaultValue, DataGridProPropsWithDefaultValue, } from '../models/dataGridProProps';
-export { buildRowTree } from '../utils/tree/buildRowTree';
-export type { BuildRowTreeGroupingCriteria } from '../utils/tree/buildRowTree';
+export { createRowTree } from '../utils/tree/createRowTree';
+export { updateRowTree } from '../utils/tree/updateRowTree';
 export { sortRowTree } from '../utils/tree/sortRowTree';
+export { insertNodeInTree, removeNodeFromTree } from '../utils/tree/utils';
+export type { RowTreeBuilderGroupingCriterion } from '../utils/tree/models';

package/internals/index.js

@@ -15,5 +15,7 @@ export { useGridTreeDataPreProcessors } from '../hooks/features/treeData/useGrid
 export { TREE_DATA_STRATEGY } from '../hooks/features/treeData/gridTreeDataUtils';
 export { useGridRowPinning, rowPinningStateInitializer } from '../hooks/features/rowPinning/useGridRowPinning';
 export { useGridRowPinningPreProcessors, addPinnedRow } from '../hooks/features/rowPinning/useGridRowPinningPreProcessors';
-export { buildRowTree } from '../utils/tree/buildRowTree';
-export { sortRowTree } from '../utils/tree/sortRowTree';
+export { createRowTree } from '../utils/tree/createRowTree';
+export { updateRowTree } from '../utils/tree/updateRowTree';
+export { sortRowTree } from '../utils/tree/sortRowTree';
+export { insertNodeInTree, removeNodeFromTree } from '../utils/tree/utils';

package/legacy/DataGridPro/DataGridPro.js

@@ -437,7 +437,7 @@ DataGridProRaw.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,
@@ -615,16 +615,6 @@ DataGridProRaw.propTypes = {
    */
   onColumnResize: PropTypes.func,
 
-  /**
-   * Callback fired when a column visibility changes.
-   * Only works when no `columnVisibilityModel` is provided and if we change the visibility of a single column at a time.
-   * @param {GridColumnVisibilityChangeParams} params With all properties from [[GridColumnVisibilityChangeParams]].
-   * @param {MuiEvent<{}>} event The event object.
-   * @param {GridCallbackDetails} details Additional details for this callback.
-   * @deprecated Use `onColumnVisibilityModelChange` instead.
-   */
-  onColumnVisibilityChange: PropTypes.func,
-
   /**
    * Callback fired when the column visibility model changes.
    * @param {GridColumnVisibilityModel} model The new model.
@@ -876,8 +866,8 @@ DataGridProRaw.propTypes = {
    * Rows data to pin on top or bottom.
    */
   pinnedRows: PropTypes.shape({
-    bottom: PropTypes.array,
-    top: PropTypes.array
+    bottom: PropTypes.arrayOf(PropTypes.object),
+    top: PropTypes.arrayOf(PropTypes.object)
   }),
 
   /**
@@ -922,7 +912,7 @@ DataGridProRaw.propTypes = {
   /**
    * Set of rows of type [[GridRowsProp]].
    */
-  rows: PropTypes.array.isRequired,
+  rows: PropTypes.arrayOf(PropTypes.object).isRequired,
 
   /**
    * Loading rows can be processed on the server or client-side.

package/legacy/DataGridPro/useDataGridProProps.js

@@ -2,7 +2,7 @@ import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import { useThemeProps } from '@mui/material/styles';
-import { DATA_GRID_DEFAULT_SLOTS_COMPONENTS, GRID_DEFAULT_LOCALE_TEXT, DATA_GRID_PROPS_DEFAULT_VALUES, GridFeatureModeConstant } from '@mui/x-data-grid';
+import { DATA_GRID_DEFAULT_SLOTS_COMPONENTS, GRID_DEFAULT_LOCALE_TEXT, DATA_GRID_PROPS_DEFAULT_VALUES } from '@mui/x-data-grid';
 
 /**
  * The default values of `DataGridProPropsWithDefaultValue` to inject in the props of DataGridPro.
@@ -15,7 +15,7 @@ export var DATA_GRID_PRO_PROPS_DEFAULT_VALUES = _extends({}, DATA_GRID_PROPS_DEF
   disableChildrenFiltering: false,
   disableChildrenSorting: false,
   rowReordering: false,
-  rowsLoadingMode: GridFeatureModeConstant.client,
+  rowsLoadingMode: 'client',
   getDetailPanelHeight: function getDetailPanelHeight() {
     return 500;
   }

package/legacy/components/DataGridProVirtualScroller.js

@@ -7,7 +7,7 @@ var _excluded = ["className", "disableVirtualization"];
 import * as React from 'react';
 import { styled, alpha } from '@mui/material/styles';
 import { unstable_composeClasses as composeClasses } from '@mui/material';
-import { useGridSelector, getDataGridUtilityClass, gridClasses, gridVisibleColumnFieldsSelector, gridRowsMetaSelector, useGridApiEventHandler } from '@mui/x-data-grid';
+import { useGridSelector, getDataGridUtilityClass, gridClasses, gridVisibleColumnFieldsSelector, gridRowsMetaSelector, useGridApiEventHandler, GridOverlays } from '@mui/x-data-grid';
 import { GridVirtualScroller, GridVirtualScrollerContent, GridVirtualScrollerRenderZone, useGridVirtualScroller, calculatePinnedRowsHeight } from '@mui/x-data-grid/internals';
 import { useGridApiContext } from '../hooks/utils/useGridApiContext';
 import { useGridRootProps } from '../hooks/utils/useGridRootProps';
@@ -312,7 +312,7 @@ var DataGridProVirtualScroller = /*#__PURE__*/React.forwardRef(function DataGrid
   }
 
   return /*#__PURE__*/_jsxs(GridVirtualScroller, _extends({}, getRootProps(other), {
-    children: [topPinnedRowsData.length > 0 ? /*#__PURE__*/_jsxs(VirtualScrollerPinnedRows, {
+    children: [/*#__PURE__*/_jsx(GridOverlays, {}), topPinnedRowsData.length > 0 ? /*#__PURE__*/_jsxs(VirtualScrollerPinnedRows, {
       className: classes.topPinnedRows,
       ownerState: {
         position: 'top'

package/legacy/components/GridDetailPanelToggleCell.js

@@ -112,7 +112,7 @@ process.env.NODE_ENV !== "production" ? GridDetailPanelToggleCell.propTypes = {
   /**
    * The row model of the row that the current cell belongs to.
    */
-  row: PropTypes.object.isRequired,
+  row: PropTypes.any.isRequired,
 
   /**
    * The node of the row that the current cell belongs to.

package/legacy/components/GridRowReorderCell.js

@@ -1,7 +1,7 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import { unstable_composeClasses as composeClasses } from '@mui/material';
-import { gridRowTreeDepthSelector, gridSortModelSelector, useGridApiContext, useGridSelector, getDataGridUtilityClass, gridEditRowsStateSelector } from '@mui/x-data-grid';
+import { gridRowMaximumTreeDepthSelector, gridSortModelSelector, useGridApiContext, useGridSelector, getDataGridUtilityClass, gridEditRowsStateSelector } from '@mui/x-data-grid';
 import { useGridRootProps } from '../hooks/utils/useGridRootProps';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
@@ -17,12 +17,10 @@ var useUtilityClasses = function useUtilityClasses(ownerState) {
 };
 
 var GridRowReorderCell = function GridRowReorderCell(params) {
-  var _params$rowNode$posit;
-
   var apiRef = useGridApiContext();
   var rootProps = useGridRootProps();
   var sortModel = useGridSelector(apiRef, gridSortModelSelector);
-  var treeDepth = useGridSelector(apiRef, gridRowTreeDepthSelector);
+  var treeDepth = useGridSelector(apiRef, gridRowMaximumTreeDepthSelector);
   var editRowsState = useGridSelector(apiRef, gridEditRowsStateSelector); // eslint-disable-next-line no-underscore-dangle
 
   var cellValue = params.row.__reorder__ || params.id; // TODO: remove sortModel and treeDepth checks once row reorder is compatible
@@ -62,7 +60,7 @@ var GridRowReorderCell = function GridRowReorderCell(params) {
     onDragEnd: publish('rowDragEnd')
   } : null;
 
-  if (((_params$rowNode$posit = params.rowNode.position) != null ? _params$rowNode$posit : 'body') !== 'body') {
+  if (params.rowNode.type === 'footer') {
     return null;
   }
 
@@ -79,7 +77,7 @@ var GridRowReorderCell = function GridRowReorderCell(params) {
 
 export { GridRowReorderCell };
 export var renderRowReorderCell = function renderRowReorderCell(params) {
-  if (params.rowNode.isPinned) {
+  if (params.rowNode.type === 'footer' || params.rowNode.type === 'pinnedRow') {
     return null;
   }
 

package/legacy/components/GridTreeDataGroupingCell.js

@@ -147,7 +147,7 @@ process.env.NODE_ENV !== "production" ? GridTreeDataGroupingCell.propTypes = {
   /**
    * The row model of the row that the current cell belongs to.
    */
-  row: PropTypes.object.isRequired,
+  row: PropTypes.any.isRequired,
 
   /**
    * The node of the row that the current cell belongs to.