@mui/x-data-grid-premium 8.10.2 → 8.11.1

package/esm/hooks/features/rows/useGridRowsOverridableMethods.js

@@ -0,0 +1,52 @@
+import * as React from 'react';
+import { gridRowTreeSelector, gridExpandedSortedRowIdsSelector, gridRowNodeSelector } from '@mui/x-data-grid-pro';
+import { gridExpandedSortedRowIndexLookupSelector } from '@mui/x-data-grid-pro/internals';
+import { rowGroupingReorderExecutor } from "../rowReorder/reorderExecutor.js";
+export const useGridRowsOverridableMethods = (apiRef, props) => {
+  const {
+    processRowUpdate,
+    onProcessRowUpdateError
+  } = props;
+  const setRowIndex = React.useCallback(async (sourceRowId, targetOriginalIndex) => {
+    const sortedFilteredRowIds = gridExpandedSortedRowIdsSelector(apiRef);
+    const sortedFilteredRowIndexLookup = gridExpandedSortedRowIndexLookupSelector(apiRef);
+    const rowTree = gridRowTreeSelector(apiRef);
+    const sourceNode = gridRowNodeSelector(apiRef, sourceRowId);
+    if (!sourceNode) {
+      throw new Error(`MUI X: No row with id #${sourceRowId} found.`);
+    }
+    if (sourceNode.type === 'footer') {
+      throw new Error(`MUI X: The row reordering do not support reordering of footer rows.`);
+    }
+
+    /**
+     * Row Grouping Reordering Use Cases
+     * =================================
+     *
+     * | Case | Source Node | Target Node | Parent Relationship       | Action                                                                      |
+     * | :--- | :---------- | :---------- | :------------------------ | :-------------------------------------------------------------------------- |
+     * | A ✅ | Leaf        | Leaf        | Same parent               | Swap positions (similar to flat tree structure)                             |
+     * | B ✅ | Group       | Group       | Same parent               | Swap positions (along with their descendants)                               |
+     * | C ✅ | Leaf        | Leaf        | Different parents         | Make source node a child of target's parent and update parent nodes in tree |
+     * | D ✅ | Leaf        | Group       | Different parents         | Make source a child of target, only allowed at same depth as source.parent  |
+     * | E ❌ | Leaf        | Group       | Target is source's parent | Not allowed, will have no difference                                        |
+     * | F ❌ | Group       | Leaf        | Any                       | Not allowed, will break the row grouping criteria                           |
+     * | G ✅ | Group       | Group       | Different parents         | Only allowed at same depth to preserve grouping criteria                    |
+     */
+
+    const executionContext = {
+      sourceRowId,
+      placeholderIndex: targetOriginalIndex,
+      sortedFilteredRowIds,
+      sortedFilteredRowIndexLookup,
+      rowTree,
+      apiRef,
+      processRowUpdate,
+      onProcessRowUpdateError
+    };
+    await rowGroupingReorderExecutor.execute(executionContext);
+  }, [apiRef, processRowUpdate, onProcessRowUpdateError]);
+  return {
+    setRowIndex
+  };
+};

package/esm/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-data-grid-premium v8.10.2
+ * @mui/x-data-grid-premium v8.11.1
  *
  * @license SEE LICENSE IN LICENSE
  * This source code is licensed under the SEE LICENSE IN LICENSE license found in the

package/esm/models/gridGroupingValueSetter.d.ts

@@ -0,0 +1,14 @@
+import { RefObject } from '@mui/x-internals/types';
+import { GridValidRowModel, GridColDef, GridKeyValue } from '@mui/x-data-grid-pro';
+import { GridApiPremium } from "./gridApiPremium.js";
+/**
+ * Function signature for setting a grouping value on a row.
+ * This is the inverse operation of GridGroupingValueGetter.
+ *
+ * @param {GridKeyValue | null | undefined} groupingValue The grouping value to set
+ * @param {R} row The row to update
+ * @param {GridColDef<R>} column The column definition
+ * @param {RefObject<GridApiPremium>} apiRef Reference to the grid API
+ * @returns {R} The updated row with the new grouping value applied
+ */
+export type GridGroupingValueSetter<R extends GridValidRowModel = GridValidRowModel> = (groupingValue: GridKeyValue | null | undefined, row: R, column: GridColDef<R>, apiRef: RefObject<GridApiPremium>) => R;

package/esm/models/gridGroupingValueSetter.js

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

package/esm/models/index.d.ts

@@ -1,5 +1,6 @@
 export * from "./gridApiPremium.js";
 export * from "./gridGroupingValueGetter.js";
+export * from "./gridGroupingValueSetter.js";
 export * from "./gridPremiumIconSlotsComponent.js";
 export * from "./gridPremiumSlotsComponent.js";
 export * from "./gridPastedValueParser.js";

package/esm/models/index.js

@@ -1,5 +1,6 @@
 export * from "./gridApiPremium.js";
 export * from "./gridGroupingValueGetter.js";
+export * from "./gridGroupingValueSetter.js";
 export * from "./gridPremiumIconSlotsComponent.js";
 export * from "./gridPremiumSlotsComponent.js";
 export * from "./gridPastedValueParser.js";

package/esm/typeOverloads/modules.d.ts

@@ -1,6 +1,6 @@
 import { GridExportDisplayOptions, GridValidRowModel } from '@mui/x-data-grid-pro';
 import type { GridPipeProcessingLookupPro, GridControlledStateEventLookupPro, GridApiCachesPro, GridEventLookupPro } from '@mui/x-data-grid-pro/typeOverloads';
-import type { GridGroupingValueGetter, GridPastedValueParser } from "../models/index.js";
+import type { GridGroupingValueGetter, GridGroupingValueSetter, GridPastedValueParser } from "../models/index.js";
 import type { GridRowGroupingModel, GridAggregationModel, GridAggregationCellMeta, GridAggregationHeaderMeta, GridCellSelectionModel, Conversation } from "../hooks/index.js";
 import { GridRowGroupingInternalCache } from "../hooks/features/rowGrouping/gridRowGroupingInterfaces.js";
 import { GridAggregationInternalCache } from "../hooks/features/aggregation/gridAggregationInterfaces.js";
@@ -107,6 +107,12 @@ export interface GridColDefPremium<R extends GridValidRowModel = any, V = any, F
    * @returns {GridKeyValue | null | undefined} The cell key.
    */
   groupingValueGetter?: GridGroupingValueGetter<R>;
+  /**
+   * Function that takes a grouping value and updates the row data accordingly.
+   * This is the inverse operation of `groupingValueGetter`.
+   * @returns {R} The updated row.
+   */
+  groupingValueSetter?: GridGroupingValueSetter<R>;
   /**
    * Function that takes the clipboard-pasted value and converts it to a value used internally.
    * @returns {V} The converted value.

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

@@ -56,6 +56,7 @@ export declare const unwrapColumnFromAggregation: (column: GridColDef) => GridBa
   aggregable?: boolean;
   availableAggregationFunctions?: string[];
   groupingValueGetter?: import("../../../index.js").GridGroupingValueGetter<import("@mui/x-data-grid").GridValidRowModel> | undefined;
+  groupingValueSetter?: import("../../../index.js").GridGroupingValueSetter<import("@mui/x-data-grid").GridValidRowModel> | undefined;
   pastedValueParser?: import("../../../index.js").GridPastedValueParser<import("@mui/x-data-grid").GridValidRowModel, any, any> | undefined;
   pivotable?: boolean;
 };

package/hooks/features/clipboard/useGridClipboardImport.js

@@ -127,7 +127,7 @@ class CellValueUpdater {
           if (onProcessRowUpdateError) {
             onProcessRowUpdateError(errorThrown);
           } else if (process.env.NODE_ENV !== 'production') {
-            (0, _warning.warnOnce)(['MUI X: A call to `processRowUpdate` threw an error which was not handled because `onProcessRowUpdateError` is missing.', 'To handle the error pass a callback to the `onProcessRowUpdateError` prop, for example `<DataGrid onProcessRowUpdateError={(error) => ...} />`.', 'For more detail, see https://mui.com/x/react-data-grid/editing/persistence/.'], 'error');
+            (0, _warning.warnOnce)(['MUI X: A call to `processRowUpdate()` threw an error which was not handled because `onProcessRowUpdateError()` is missing.', 'To handle the error pass a callback to the `onProcessRowUpdateError()` prop, for example `<DataGrid onProcessRowUpdateError={(error) => ...} />`.', 'For more detail, see https://mui.com/x/react-data-grid/editing/persistence/.'], 'error');
           }
         };
         try {

package/hooks/features/export/serializer/setupExcelExportWebWorker.js

@@ -6,8 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.setupExcelExportWebWorker = setupExcelExportWebWorker;
 var _utils = require("./utils");
 function setupExcelExportWebWorker(workerOptions = {}) {
-  // eslint-disable-next-line no-restricted-globals
-  addEventListener('message', async event => {
+  globalThis.addEventListener('message', async event => {
     const {
       namespace,
       serializedColumns,

package/hooks/features/rowGrouping/createGroupingColDef.d.ts

@@ -2,6 +2,7 @@ import { RefObject } from '@mui/x-internals/types';
 import { GridColDef, GridGroupingColDefOverride } from '@mui/x-data-grid-pro';
 import { GridColumnRawLookup, RowGroupingStrategy } from '@mui/x-data-grid-pro/internals';
 import { GridApiPremium } from "../../../models/gridApiPremium.js";
+import type { GridRowGroupingModel } from "./gridRowGroupingInterfaces.js";
 interface CreateGroupingColDefMonoCriteriaParams {
   columnsLookup: GridColumnRawLookup;
   /**
@@ -35,7 +36,7 @@ interface CreateGroupingColDefSeveralCriteriaParams {
   /**
    * The fields from which we are grouping the rows.
    */
-  rowGroupingModel: string[];
+  rowGroupingModel: GridRowGroupingModel;
   /**
    * The col def properties the user wants to override.
    * This value comes `prop.groupingColDef`.

package/hooks/features/rowGrouping/createGroupingColDef.js

@@ -81,11 +81,34 @@ const groupedByColValueFormatter = groupedByColDef => (value, row, _, apiRef) =>
   }
   return value;
 };
-const getGroupingCriteriaProperties = (groupedByColDef, applyHeaderName) => {
+function getGroupingCriteriaProperties(groupedByColDef, rowGroupingColumnMode, rowGroupingModel = [], columnsLookup = {}) {
+  let valueFormatter;
+  if (rowGroupingColumnMode === 'single' && rowGroupingModel.length > 1) {
+    // In single column grouping mode, the `valueFormatter` of the grouping column uses
+    // value formatters from original columns for each of the grouping criteria
+    valueFormatter = (value, row, column, apiRef) => {
+      const rowId = (0, _xDataGridPro.gridRowIdSelector)(apiRef, row);
+      const rowNode = (0, _xDataGridPro.gridRowNodeSelector)(apiRef, rowId);
+      if (rowNode.type === 'group') {
+        const originalColDef = columnsLookup[rowNode.groupingField];
+        if (originalColDef.type === 'singleSelect') {
+          // the default valueFormatter of a singleSelect colDef won't work with the grouping column values
+          return value;
+        }
+        const columnValueFormatter = originalColDef.valueFormatter;
+        if (typeof columnValueFormatter === 'function') {
+          return columnValueFormatter(value, row, column, apiRef);
+        }
+      }
+      return value;
+    };
+  } else {
+    valueFormatter = groupedByColDef.valueFormatter ? groupedByColValueFormatter(groupedByColDef) : undefined;
+  }
   const properties = {
     sortable: groupedByColDef.sortable,
     filterable: groupedByColDef.filterable,
-    valueFormatter: groupedByColDef.valueFormatter ? groupedByColValueFormatter(groupedByColDef) : undefined,
+    valueFormatter,
     valueOptions: (0, _internals.isSingleSelectColDef)(groupedByColDef) ? groupedByColDef.valueOptions : undefined,
     sortComparator: (v1, v2, cellParams1, cellParams2) => {
       // We only want to sort the groups of the current grouping criteria
@@ -97,11 +120,12 @@ const getGroupingCriteriaProperties = (groupedByColDef, applyHeaderName) => {
     },
     filterOperators: groupedByColDef.filterOperators
   };
+  const applyHeaderName = !(rowGroupingColumnMode === 'single' && rowGroupingModel.length > 1);
   if (applyHeaderName) {
     properties.headerName = groupedByColDef.headerName ?? groupedByColDef.field;
   }
   return properties;
-};
+}
 /**
  * Creates the `GridColDef` for a grouping column that only takes care of a single grouping criteria
  */
@@ -183,11 +207,11 @@ const createGroupingColDefForOneGroupingCriteria = ({
   // By default, we apply the sorting / filtering on the groups of this column's grouping criteria based on the properties of `groupedColDef`.
   let sourceProperties;
   if (mainGroupingCriteria && mainGroupingCriteria === groupingCriteria) {
-    sourceProperties = getGroupingCriteriaProperties(groupedByColDef, true);
+    sourceProperties = getGroupingCriteriaProperties(groupedByColDef, 'multiple');
   } else if (leafColDef) {
     sourceProperties = getLeafProperties(leafColDef);
   } else {
-    sourceProperties = getGroupingCriteriaProperties(groupedByColDef, true);
+    sourceProperties = getGroupingCriteriaProperties(groupedByColDef, 'multiple');
   }
 
   // The properties that can't be overridden with `colDefOverride`
@@ -274,11 +298,11 @@ const createGroupingColDefForAllGroupingCriteria = ({
   if (process.env.NODE_ENV !== "production") commonProperties.renderCell.displayName = "commonProperties.renderCell";
   let sourceProperties;
   if (mainGroupingCriteria && rowGroupingModel.includes(mainGroupingCriteria)) {
-    sourceProperties = getGroupingCriteriaProperties(columnsLookup[mainGroupingCriteria], true);
+    sourceProperties = getGroupingCriteriaProperties(columnsLookup[mainGroupingCriteria], 'single', rowGroupingModel, columnsLookup);
   } else if (leafColDef) {
     sourceProperties = getLeafProperties(leafColDef);
   } else {
-    sourceProperties = getGroupingCriteriaProperties(columnsLookup[rowGroupingModel[0]], rowGroupingModel.length === 1);
+    sourceProperties = getGroupingCriteriaProperties(columnsLookup[rowGroupingModel[0]], 'single', rowGroupingModel, columnsLookup);
   }
 
   // The properties that can't be overridden with `colDefOverride`

package/hooks/features/rowGrouping/gridRowGroupingInterfaces.d.ts

@@ -40,5 +40,6 @@ export interface GridRowGroupingApi {
 export interface GridGroupingRule<R extends GridValidRowModel = GridValidRowModel, V = any> {
   field: string;
   groupingValueGetter?: GridColDef<R, V>['groupingValueGetter'];
+  groupingValueSetter?: GridColDef<R, V>['groupingValueSetter'];
 }
 export type GridGroupingRules<R extends GridValidRowModel = GridValidRowModel> = GridGroupingRule<R>[];

package/hooks/features/rowGrouping/gridRowGroupingUtils.js

@@ -181,7 +181,8 @@ const getGroupingRules = ({
   columnsLookup
 }) => sanitizedRowGroupingModel.map(field => ({
   field,
-  groupingValueGetter: columnsLookup[field]?.groupingValueGetter
+  groupingValueGetter: columnsLookup[field]?.groupingValueGetter,
+  groupingValueSetter: columnsLookup[field]?.groupingValueSetter
 }));
 
 /**
@@ -197,6 +198,9 @@ const areGroupingRulesEqual = (newValue, previousValue) => {
     if (previousRule.groupingValueGetter !== newRule.groupingValueGetter) {
       return false;
     }
+    if (previousRule.groupingValueSetter !== newRule.groupingValueSetter) {
+      return false;
+    }
     if (previousRule.field !== newRule.field) {
       return false;
     }

package/hooks/features/rowGrouping/useGridRowGrouping.d.ts

@@ -8,4 +8,4 @@ export declare const rowGroupingStateInitializer: GridStateInitializer<Pick<Data
  * @requires useGridRows (state, method) - can be after, async only
  * @requires useGridParamsApi (method) - can be after, async only
  */
-export declare const useGridRowGrouping: (apiRef: RefObject<GridPrivateApiPremium>, props: Pick<DataGridPremiumProcessedProps, "initialState" | "rowGroupingModel" | "onRowGroupingModelChange" | "defaultGroupingExpansionDepth" | "isGroupExpandedByDefault" | "rowGroupingColumnMode" | "disableRowGrouping" | "slotProps" | "slots" | "dataSource">) => void;
+export declare const useGridRowGrouping: (apiRef: RefObject<GridPrivateApiPremium>, props: Pick<DataGridPremiumProcessedProps, "initialState" | "rowGroupingModel" | "onRowGroupingModelChange" | "defaultGroupingExpansionDepth" | "isGroupExpandedByDefault" | "rowGroupingColumnMode" | "disableRowGrouping" | "slotProps" | "slots" | "dataSource" | "treeData">) => void;

package/hooks/features/rowGrouping/useGridRowGrouping.js

@@ -13,6 +13,7 @@ var _xDataGridPro = require("@mui/x-data-grid-pro");
 var _internals = require("@mui/x-data-grid-pro/internals");
 var _gridRowGroupingSelector = require("./gridRowGroupingSelector");
 var _gridRowGroupingUtils = require("./gridRowGroupingUtils");
+var _reorderValidator = require("../rowReorder/reorderValidator");
 const rowGroupingStateInitializer = (state, props, apiRef) => {
   apiRef.current.caches.rowGrouping = {
     rulesOnLastRowTreeCreation: []
@@ -176,6 +177,51 @@ const useGridRowGrouping = (apiRef, props) => {
       }
     }
   }, [apiRef, props.disableRowGrouping]);
+  const getRowReorderTargetIndex = React.useCallback((initialValue, {
+    sourceRowId,
+    targetRowId,
+    dropPosition,
+    dragDirection
+  }) => {
+    if ((0, _xDataGridPro.gridRowMaximumTreeDepthSelector)(apiRef) === 1 || props.treeData) {
+      return initialValue;
+    }
+    const expandedSortedRowIndexLookup = (0, _internals.gridExpandedSortedRowIndexLookupSelector)(apiRef);
+    const expandedSortedRowIds = (0, _xDataGridPro.gridExpandedSortedRowIdsSelector)(apiRef);
+    const rowTree = (0, _xDataGridPro.gridRowTreeSelector)(apiRef);
+    const sourceRowIndex = expandedSortedRowIndexLookup[sourceRowId];
+    const targetRowIndex = expandedSortedRowIndexLookup[targetRowId];
+    const sourceNode = rowTree[sourceRowId];
+    const targetNode = rowTree[targetRowId];
+    const prevNode = targetRowIndex > 0 ? rowTree[expandedSortedRowIds[targetRowIndex - 1]] : null;
+    const nextNode = targetRowIndex < expandedSortedRowIds.length - 1 ? rowTree[expandedSortedRowIds[targetRowIndex + 1]] : null;
+
+    // Basic validity checks
+    if (!sourceNode || !targetNode) {
+      return -1;
+    }
+
+    // Create context object
+    const context = {
+      sourceNode,
+      targetNode,
+      prevNode,
+      nextNode,
+      rowTree,
+      dropPosition,
+      dragDirection,
+      targetRowIndex,
+      sourceRowIndex,
+      expandedSortedRowIndexLookup
+    };
+
+    // Check if the reorder is valid
+    if (_reorderValidator.rowGroupingReorderValidator.validate(context)) {
+      return dropPosition === 'below' ? targetRowIndex + 1 : targetRowIndex;
+    }
+    return -1;
+  }, [apiRef, props.treeData]);
+  (0, _internals.useGridRegisterPipeProcessor)(apiRef, 'getRowReorderTargetIndex', getRowReorderTargetIndex);
   (0, _xDataGridPro.useGridEvent)(apiRef, 'cellKeyDown', handleCellKeyDown);
   (0, _xDataGridPro.useGridEvent)(apiRef, 'columnsChange', checkGroupingColumnsModelDiff);
   (0, _xDataGridPro.useGridEvent)(apiRef, 'rowGroupingModelChange', checkGroupingColumnsModelDiff);

package/hooks/features/rowReorder/operations.d.ts

@@ -0,0 +1,40 @@
+import type { ReorderOperation, ReorderExecutionContext } from "./types.js";
+/**
+ * Base class for all reorder operations.
+ * Provides abstract methods for operation detection and execution.
+ */
+export declare abstract class BaseReorderOperation {
+  abstract readonly operationType: string;
+  /**
+   * Detects if this operation can handle the given context.
+   */
+  abstract detectOperation(ctx: ReorderExecutionContext): ReorderOperation | null;
+  /**
+   * Executes the detected operation.
+   */
+  abstract executeOperation(operation: ReorderOperation, ctx: ReorderExecutionContext): Promise<void> | void;
+}
+/**
+ * Handles reordering of items within the same parent group.
+ */
+export declare class SameParentSwapOperation extends BaseReorderOperation {
+  readonly operationType = "same-parent-swap";
+  detectOperation(ctx: ReorderExecutionContext): ReorderOperation | null;
+  executeOperation(operation: ReorderOperation, ctx: ReorderExecutionContext): void;
+}
+/**
+ * Handles moving leaf nodes between different parent groups.
+ */
+export declare class CrossParentLeafOperation extends BaseReorderOperation {
+  readonly operationType = "cross-parent-leaf";
+  detectOperation(ctx: ReorderExecutionContext): ReorderOperation | null;
+  executeOperation(operation: ReorderOperation, ctx: ReorderExecutionContext): Promise<void>;
+}
+/**
+ * Handles moving entire groups between different parents.
+ */
+export declare class CrossParentGroupOperation extends BaseReorderOperation {
+  readonly operationType = "cross-parent-group";
+  detectOperation(ctx: ReorderExecutionContext): ReorderOperation | null;
+  executeOperation(operation: ReorderOperation, ctx: ReorderExecutionContext): Promise<void>;
+}