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

package/modern/utils/tree/insertDataRowInTree.js

@@ -0,0 +1,127 @@
+import { GRID_ROOT_GROUP_ID } from '@mui/x-data-grid';
+import { addGroupDefaultExpansion, getGroupRowIdFromPath, insertNodeInTree, updateGroupNodeIdAndAutoGenerated } from './utils';
+
+/**
+ * Inserts a data row in a tree.
+ * For each steps of its path:
+ * - if a node exists with the same partial path, it will register this node as the ancestor of the data row.
+ * - if not, it will create an auto-generated node and register it as ancestor of the data row.
+ */
+export const insertDataRowInTree = ({
+  id,
+  path,
+  updatedGroupsManager,
+  tree,
+  treeDepths,
+  onDuplicatePath,
+  isGroupExpandedByDefault,
+  defaultGroupingExpansionDepth
+}) => {
+  let parentNodeId = GRID_ROOT_GROUP_ID;
+
+  for (let depth = 0; depth < path.length; depth += 1) {
+    const {
+      key,
+      field
+    } = path[depth];
+    const fieldWithDefaultValue = field ?? '__no_field__';
+    const keyWithDefaultValue = key ?? '__no_key__';
+    const existingNodeIdWithPartialPath = tree[parentNodeId].childrenFromPath?.[fieldWithDefaultValue]?.[keyWithDefaultValue.toString()]; // When we reach the last step of the path,
+    // We need to create a node for the row passed to `insertNodeInTree`
+
+    if (depth === path.length - 1) {
+      // If no node matches the full path,
+      // We create a leaf node for the data row.
+      if (existingNodeIdWithPartialPath == null) {
+        const leafNode = {
+          type: 'leaf',
+          id,
+          depth,
+          parent: parentNodeId,
+          groupingKey: key
+        };
+        updatedGroupsManager?.addAction(parentNodeId, 'insertChildren');
+        insertNodeInTree({
+          node: leafNode,
+          tree,
+          treeDepths
+        });
+      } else {
+        const existingNodeWithPartialPath = tree[existingNodeIdWithPartialPath]; // If we already have an auto-generated group matching the partial path,
+        // We replace it with the node from of data row passed to `insertNodeInTree`
+
+        if (existingNodeWithPartialPath.type === 'group' && existingNodeWithPartialPath.isAutoGenerated) {
+          updatedGroupsManager?.addAction(parentNodeId, 'removeChildren');
+          updatedGroupsManager?.addAction(parentNodeId, 'insertChildren');
+          updateGroupNodeIdAndAutoGenerated({
+            tree,
+            treeDepths,
+            node: existingNodeWithPartialPath,
+            updatedNode: {
+              id,
+              isAutoGenerated: false
+            }
+          });
+        } else {
+          // If we have another row matching the partial path, then there is a duplicate in the dataset.
+          // We warn the user and skip the current row.
+          onDuplicatePath?.(existingNodeIdWithPartialPath, id, path);
+        }
+      }
+    } // For the intermediary steps of the path,
+    // We need to make sure that there is a node matching the partial path.
+    //
+    // If no node matches the partial path,
+    // We create an auto-generated group node.
+    else if (existingNodeIdWithPartialPath == null) {
+      const nodeId = getGroupRowIdFromPath(path.slice(0, depth + 1));
+      const autoGeneratedGroupNode = {
+        type: 'group',
+        id: nodeId,
+        parent: parentNodeId,
+        depth,
+        isAutoGenerated: true,
+        groupingKey: key,
+        groupingField: field,
+        children: [],
+        childrenFromPath: {}
+      };
+      updatedGroupsManager?.addAction(parentNodeId, 'insertChildren');
+      insertNodeInTree({
+        node: addGroupDefaultExpansion({
+          node: autoGeneratedGroupNode,
+          defaultGroupingExpansionDepth,
+          isGroupExpandedByDefault
+        }),
+        tree,
+        treeDepths
+      });
+      parentNodeId = nodeId;
+    } // For the intermediary steps of the path
+    // If a node matches the partial path, we use it as parent for the next step
+    else {
+      const currentGroupNode = tree[existingNodeIdWithPartialPath]; // If the node matching the partial path is not a group, we turn it into a group
+
+      if (currentGroupNode.type !== 'group') {
+        const groupNode = {
+          type: 'group',
+          id: currentGroupNode.id,
+          parent: currentGroupNode.parent,
+          depth: currentGroupNode.depth,
+          isAutoGenerated: false,
+          groupingKey: key,
+          groupingField: field,
+          children: [],
+          childrenFromPath: {}
+        };
+        tree[existingNodeIdWithPartialPath] = addGroupDefaultExpansion({
+          node: groupNode,
+          defaultGroupingExpansionDepth,
+          isGroupExpandedByDefault
+        });
+      }
+
+      parentNodeId = currentGroupNode.id;
+    }
+  }
+};

package/modern/utils/tree/models.js

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

package/modern/utils/tree/removeDataRowFromTree.js

@@ -0,0 +1,100 @@
+import { GRID_ROOT_GROUP_ID } from '@mui/x-data-grid';
+import { getNodePathInTree, getGroupRowIdFromPath, removeNodeFromTree, updateGroupNodeIdAndAutoGenerated } from './utils';
+
+const removeNodeAndCleanParent = ({
+  node,
+  tree,
+  treeDepths,
+  updatedGroupsManager
+}) => {
+  removeNodeFromTree({
+    node,
+    tree,
+    treeDepths
+  });
+
+  if (node.type === 'group' && node.footerId != null) {
+    removeNodeFromTree({
+      node: tree[node.footerId],
+      tree,
+      treeDepths
+    });
+  }
+
+  const parentNode = tree[node.parent];
+  updatedGroupsManager?.addAction(parentNode.id, 'removeChildren');
+  const shouldDeleteGroup = parentNode.id !== GRID_ROOT_GROUP_ID && parentNode.children.length === 0;
+
+  if (shouldDeleteGroup) {
+    if (parentNode.isAutoGenerated) {
+      removeNodeAndCleanParent({
+        node,
+        tree,
+        treeDepths
+      });
+    } else {
+      tree[parentNode.id] = {
+        type: 'leaf',
+        id: parentNode.id,
+        depth: parentNode.depth,
+        parent: parentNode.parent,
+        groupingKey: parentNode.groupingKey
+      };
+    }
+  }
+};
+
+const replaceDataGroupWithAutoGeneratedGroup = ({
+  node,
+  tree,
+  treeDepths,
+  updatedGroupsManager
+}) => {
+  updatedGroupsManager?.addAction(node.parent, 'removeChildren');
+  updatedGroupsManager?.addAction(node.parent, 'insertChildren');
+  updateGroupNodeIdAndAutoGenerated({
+    tree,
+    treeDepths,
+    node,
+    updatedNode: {
+      id: getGroupRowIdFromPath(getNodePathInTree({
+        id: node.id,
+        tree
+      })),
+      isAutoGenerated: true
+    }
+  });
+};
+/**
+ * Removed a data row from the tree.
+ * If the node is a non-empty group, replace it with an auto-generated group to be able to keep displaying its children.
+ * If not, remove it and recursively clean its parent with the following rules:
+ * - An empty auto-generated should be removed from the tree
+ * - An empty non-auto-generated should be turned into a leaf
+ */
+
+
+export const removeDataRowFromTree = ({
+  id,
+  tree,
+  treeDepths,
+  updatedGroupsManager
+}) => {
+  const node = tree[id];
+
+  if (node.type === 'group' && node.children.length > 0) {
+    replaceDataGroupWithAutoGeneratedGroup({
+      node,
+      tree,
+      treeDepths,
+      updatedGroupsManager
+    });
+  } else {
+    removeNodeAndCleanParent({
+      node,
+      tree,
+      treeDepths,
+      updatedGroupsManager
+    });
+  }
+};

package/modern/utils/tree/sortRowTree.js

@@ -1,59 +1,65 @@
+import { GRID_ROOT_GROUP_ID } from '@mui/x-data-grid';
 export const sortRowTree = params => {
   const {
-    rowIds,
     rowTree,
     disableChildrenSorting,
-    sortRowList
+    sortRowList,
+    shouldRenderGroupBelowLeaves
   } = params;
-  let sortedRows = []; // Group the rows by parent
+  let sortedRows = [];
+  const sortedGroupedByParentRows = new Map();
 
-  const groupedByParentRows = new Map([[null, {
-    body: [],
-    footer: null
-  }]]);
+  const sortGroup = node => {
+    const shouldSortGroup = !!sortRowList && (!disableChildrenSorting || node.depth === -1);
+    let sortedRowIds;
 
-  for (let i = 0; i < rowIds.length; i += 1) {
-    const rowId = rowIds[i];
-    const node = rowTree[rowId];
-    let group = groupedByParentRows.get(node.parent);
+    if (shouldSortGroup) {
+      for (let i = 0; i < node.children.length; i += 1) {
+        const childNode = rowTree[node.children[i]];
 
-    if (!group) {
-      group = {
-        body: [],
-        footer: null
-      };
-      groupedByParentRows.set(node.parent, group);
-    }
+        if (childNode.type === 'group') {
+          sortGroup(childNode);
+        }
+      }
 
-    if (node.position === 'footer') {
-      group.footer = node;
-    } else {
-      group.body.push(node);
-    }
-  } // Apply the sorting to each list of children
+      sortedRowIds = sortRowList(node.children.map(childId => rowTree[childId]));
+    } else if (shouldRenderGroupBelowLeaves) {
+      const childrenLeaves = [];
+      const childrenGroups = [];
 
+      for (let i = 0; i < node.children.length; i += 1) {
+        const childId = node.children[i];
+        const childNode = rowTree[childId];
 
-  const sortedGroupedByParentRows = new Map();
-  groupedByParentRows.forEach((group, parent) => {
-    if (group.body.length === 0) {
-      sortedGroupedByParentRows.set(parent, []);
+        if (childNode.type === 'group') {
+          sortGroup(childNode);
+          childrenGroups.push(childId);
+        } else if (childNode.type === 'leaf') {
+          childrenLeaves.push(childId);
+        }
+      }
+
+      sortedRowIds = [...childrenLeaves, ...childrenGroups];
     } else {
-      let groupSortedRows;
-      const depth = group.body[0].depth;
+      for (let i = 0; i < node.children.length; i += 1) {
+        const childNode = rowTree[node.children[i]];
 
-      if (depth > 0 && disableChildrenSorting || !sortRowList) {
-        groupSortedRows = group.body.map(row => row.id);
-      } else {
-        groupSortedRows = sortRowList(group.body);
+        if (childNode.type === 'group') {
+          sortGroup(childNode);
+        }
       }
 
-      if (group.footer != null) {
-        groupSortedRows.push(group.footer.id);
-      }
+      sortedRowIds = [...node.children];
+    }
 
-      sortedGroupedByParentRows.set(parent, groupSortedRows);
+    if (node.footerId != null) {
+      sortedRowIds.push(node.footerId);
     }
-  }); // Flatten the sorted lists to have children just after their parent
+
+    sortedGroupedByParentRows.set(node.id, sortedRowIds);
+  };
+
+  sortGroup(rowTree[GRID_ROOT_GROUP_ID]); // Flatten the sorted lists to have children just after their parent
 
   const insertRowListIntoSortedRows = (startIndex, rowList) => {
     sortedRows = [...sortedRows.slice(0, startIndex), ...rowList, ...sortedRows.slice(startIndex)];
@@ -70,6 +76,6 @@ export const sortRowTree = params => {
     return treeSize;
   };
 
-  insertRowListIntoSortedRows(0, sortedGroupedByParentRows.get(null));
+  insertRowListIntoSortedRows(0, sortedGroupedByParentRows.get(GRID_ROOT_GROUP_ID));
   return sortedRows;
 };

package/modern/utils/tree/updateRowTree.js

@@ -0,0 +1,83 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import { GRID_ROOT_GROUP_ID } from '@mui/x-data-grid';
+import { isDeepEqual, getTreeNodeDescendants } from '@mui/x-data-grid/internals';
+import { insertDataRowInTree } from './insertDataRowInTree';
+import { removeDataRowFromTree } from './removeDataRowFromTree';
+import { createUpdatedGroupsManager, getNodePathInTree } from './utils';
+export const updateRowTree = params => {
+  const tree = _extends({}, params.previousTree);
+
+  const treeDepths = _extends({}, params.previousTreeDepth);
+
+  const updatedGroupsManager = createUpdatedGroupsManager();
+
+  for (let i = 0; i < params.nodes.inserted.length; i += 1) {
+    const {
+      id,
+      path
+    } = params.nodes.inserted[i];
+    insertDataRowInTree({
+      tree,
+      treeDepths,
+      updatedGroupsManager,
+      id,
+      path,
+      onDuplicatePath: params.onDuplicatePath,
+      isGroupExpandedByDefault: params.isGroupExpandedByDefault,
+      defaultGroupingExpansionDepth: params.defaultGroupingExpansionDepth
+    });
+  }
+
+  for (let i = 0; i < params.nodes.removed.length; i += 1) {
+    const nodeId = params.nodes.removed[i];
+    removeDataRowFromTree({
+      tree,
+      treeDepths,
+      updatedGroupsManager,
+      id: nodeId
+    });
+  }
+
+  for (let i = 0; i < params.nodes.modified.length; i += 1) {
+    const {
+      id,
+      path
+    } = params.nodes.modified[i];
+    const pathInPreviousTree = getNodePathInTree({
+      tree,
+      id
+    });
+    const isInSameGroup = isDeepEqual(pathInPreviousTree, path);
+
+    if (!isInSameGroup) {
+      removeDataRowFromTree({
+        tree,
+        treeDepths,
+        updatedGroupsManager,
+        id
+      });
+      insertDataRowInTree({
+        tree,
+        treeDepths,
+        updatedGroupsManager,
+        id,
+        path,
+        onDuplicatePath: params.onDuplicatePath,
+        isGroupExpandedByDefault: params.isGroupExpandedByDefault,
+        defaultGroupingExpansionDepth: params.defaultGroupingExpansionDepth
+      });
+    } else {
+      updatedGroupsManager?.addAction(tree[id].parent, 'modifyChildren');
+    }
+  } // TODO rows v6: Avoid walking the whole tree, we should be able to generate the new list only using slices.
+
+
+  const dataRowIds = getTreeNodeDescendants(tree, GRID_ROOT_GROUP_ID, true);
+  return {
+    tree,
+    treeDepths,
+    groupingName: params.groupingName,
+    dataRowIds,
+    updatedGroupsManager
+  };
+};

package/modern/utils/tree/utils.js

@@ -0,0 +1,180 @@
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+import _toPropertyKey from "@babel/runtime/helpers/esm/toPropertyKey";
+import _extends from "@babel/runtime/helpers/esm/extends";
+import { GRID_ROOT_GROUP_ID } from '@mui/x-data-grid';
+export const getGroupRowIdFromPath = path => {
+  const pathStr = path.map(groupingCriteria => `${groupingCriteria.field}/${groupingCriteria.key}`).join('-');
+  return `auto-generated-row-${pathStr}`;
+};
+export const getNodePathInTree = ({
+  id,
+  tree
+}) => {
+  const path = [];
+  let node = tree[id];
+
+  while (node.id !== GRID_ROOT_GROUP_ID) {
+    path.push({
+      field: node.groupingField,
+      key: node.groupingKey
+    });
+    node = tree[node.parent];
+  }
+
+  return path;
+};
+export const addGroupDefaultExpansion = ({
+  node,
+  isGroupExpandedByDefault,
+  defaultGroupingExpansionDepth
+}) => {
+  let childrenExpanded;
+
+  if (node.id === GRID_ROOT_GROUP_ID) {
+    childrenExpanded = true;
+  } else if (isGroupExpandedByDefault) {
+    childrenExpanded = isGroupExpandedByDefault(node);
+  } else {
+    childrenExpanded = defaultGroupingExpansionDepth === -1 || defaultGroupingExpansionDepth > node.depth;
+  }
+
+  return _extends({}, node, {
+    childrenExpanded
+  });
+};
+/**
+ * Insert a node in the tree
+ */
+
+export const insertNodeInTree = ({
+  node,
+  tree,
+  treeDepths
+}) => {
+  // 1. Insert node in the tree.
+  tree[node.id] = node; // 2. Increment the `treeDepths` object for the node's depth.
+
+  treeDepths[node.depth] = (treeDepths[node.depth] ?? 0) + 1; // 3. Register the new node in its parent.
+
+  const parentNode = tree[node.parent];
+
+  if (node.type === 'footer') {
+    // For footers,
+    // Register the node from its parent `footerId` property.
+    tree[node.parent] = _extends({}, parentNode, {
+      footerId: node.id
+    });
+  } else if (node.type === 'group' || node.type === 'leaf') {
+    // For groups and leaves,
+    // Register the node from its parents `children` and `childrenFromPath` properties.
+    const groupingField = node.groupingField ?? '__no_field__';
+    const groupingKey = node.groupingKey ?? '__no_key__';
+    tree[node.parent] = _extends({}, parentNode, {
+      childrenFromPath: _extends({}, parentNode.childrenFromPath, {
+        [groupingField]: _extends({}, parentNode.childrenFromPath?.[groupingField], {
+          [groupingKey.toString()]: node.id
+        })
+      }),
+      children: [...parentNode.children, node.id]
+    });
+  }
+};
+/**
+ * Removes a node from the tree
+ */
+
+export const removeNodeFromTree = ({
+  node,
+  tree,
+  treeDepths
+}) => {
+  // 1. Remove node from the tree.
+  delete tree[node.id]; // 2. Decrement the `treeDepths` object for the node's depth.
+
+  const nodeDepth = node.depth;
+  const currentNodeCount = treeDepths[nodeDepth];
+
+  if (currentNodeCount === 1) {
+    delete treeDepths[nodeDepth];
+  } else {
+    treeDepths[nodeDepth] = currentNodeCount - 1;
+  } // 3. Unregister the new node in its parent.
+
+
+  const parentNode = tree[node.parent]; // For footers,
+  // Unregister the node from its parent `footerId` property.
+
+  if (node.type === 'footer') {
+    tree[parentNode.id] = _extends({}, parentNode, {
+      footerId: null
+    });
+  } // For groups and leaves,
+  // Unregister the node from its parents `children` and `childrenFromPath` properties.
+  else {
+    const groupingField = node.groupingField ?? '__no_field__';
+    const groupingKey = node.groupingKey ?? '__no_key__';
+
+    const _ref = parentNode.childrenFromPath?.[groupingField] ?? {},
+          _groupingKey$toString = groupingKey.toString(),
+          newChildrenFromPathWithField = _objectWithoutPropertiesLoose(_ref, [_groupingKey$toString].map(_toPropertyKey)); // TODO rows v6: Can we avoid this linear complexity ?
+
+
+    const children = parentNode.children.filter(childId => childId !== node.id);
+
+    const childrenFromPath = _extends({}, parentNode.childrenFromPath);
+
+    if (Object.keys(newChildrenFromPathWithField).length === 0) {
+      delete childrenFromPath[groupingField];
+    } else {
+      childrenFromPath[groupingField] = newChildrenFromPathWithField;
+    }
+
+    tree[parentNode.id] = _extends({}, parentNode, {
+      children,
+      childrenFromPath
+    });
+  }
+};
+/**
+ * Updates the `id` and `isAutoGenerated` properties of a group node.
+ */
+
+export const updateGroupNodeIdAndAutoGenerated = ({
+  node,
+  updatedNode,
+  tree,
+  treeDepths
+}) => {
+  // 1. Set the new parent for all children from the old group
+  node.children.forEach(childId => {
+    tree[childId] = _extends({}, tree[childId], {
+      parent: updatedNode.id
+    });
+  }); // 2. Remove the old group from the tree
+
+  removeNodeFromTree({
+    node,
+    tree,
+    treeDepths
+  }); // 3. Add the new group in the tree
+
+  const groupNode = _extends({}, node, updatedNode);
+
+  insertNodeInTree({
+    node: groupNode,
+    tree,
+    treeDepths
+  });
+};
+export const createUpdatedGroupsManager = () => ({
+  value: {},
+
+  addAction(groupId, action) {
+    if (!this.value[groupId]) {
+      this.value[groupId] = {};
+    }
+
+    this.value[groupId][action] = true;
+  }
+
+});

package/node/DataGridPro/DataGridPro.js

@@ -461,7 +461,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.default.func,
@@ -639,16 +639,6 @@ DataGridProRaw.propTypes = {
    */
   onColumnResize: _propTypes.default.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.default.func,
-
   /**
    * Callback fired when the column visibility model changes.
    * @param {GridColumnVisibilityModel} model The new model.
@@ -900,8 +890,8 @@ DataGridProRaw.propTypes = {
    * Rows data to pin on top or bottom.
    */
   pinnedRows: _propTypes.default.shape({
-    bottom: _propTypes.default.array,
-    top: _propTypes.default.array
+    bottom: _propTypes.default.arrayOf(_propTypes.default.object),
+    top: _propTypes.default.arrayOf(_propTypes.default.object)
   }),
 
   /**
@@ -946,7 +936,7 @@ DataGridProRaw.propTypes = {
   /**
    * Set of rows of type [[GridRowsProp]].
    */
-  rows: _propTypes.default.array.isRequired,
+  rows: _propTypes.default.arrayOf(_propTypes.default.object).isRequired,
 
   /**
    * Loading rows can be processed on the server or client-side.

package/node/DataGridPro/useDataGridProProps.js

@@ -30,7 +30,7 @@ const DATA_GRID_PRO_PROPS_DEFAULT_VALUES = (0, _extends2.default)({}, _xDataGrid
   disableChildrenFiltering: false,
   disableChildrenSorting: false,
   rowReordering: false,
-  rowsLoadingMode: _xDataGrid.GridFeatureModeConstant.client,
+  rowsLoadingMode: 'client',
   getDetailPanelHeight: () => 500
 });
 exports.DATA_GRID_PRO_PROPS_DEFAULT_VALUES = DATA_GRID_PRO_PROPS_DEFAULT_VALUES;

package/node/components/DataGridProVirtualScroller.js

@@ -327,7 +327,7 @@ const DataGridProVirtualScroller = /*#__PURE__*/React.forwardRef(function DataGr
   }
 
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_internals.GridVirtualScroller, (0, _extends2.default)({}, getRootProps(other), {
-    children: [topPinnedRowsData.length > 0 ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(VirtualScrollerPinnedRows, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_xDataGrid.GridOverlays, {}), topPinnedRowsData.length > 0 ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(VirtualScrollerPinnedRows, {
       className: classes.topPinnedRows,
       ownerState: {
         position: 'top'

package/node/components/GridDetailPanelToggleCell.js

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