@mui/x-data-grid-premium 8.18.0 → 8.20.0

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

@@ -1,28 +1,44 @@
 import * as React from 'react';
-import { gridRowTreeSelector, gridExpandedSortedRowIdsSelector, gridRowNodeSelector, gridRowMaximumTreeDepthSelector } from '@mui/x-data-grid-pro';
-import { gridExpandedSortedRowIndexLookupSelector, useGridRowsOverridableMethods as useGridRowsOverridableMethodsCommunity, useGridSelector } from '@mui/x-data-grid-pro/internals';
-import { rowGroupingReorderExecutor } from "../rowReorder/reorderExecutor.js";
+import { gridRowTreeSelector, gridExpandedSortedRowIdsSelector, gridRowNodeSelector, gridRowMaximumTreeDepthSelector, gridExpandedSortedRowIndexLookupSelector } from '@mui/x-data-grid-pro';
+import { useGridRowsOverridableMethodsCommunity, useGridRowsOverridableMethodsPro, useGridSelector } from '@mui/x-data-grid-pro/internals';
+import { rowGroupingReorderExecutor } from "../rowReorder/rowGroupingReorderExecutor.js";
 export const useGridRowsOverridableMethods = (apiRef, props) => {
   const {
     processRowUpdate,
     onProcessRowUpdateError
   } = props;
   const {
-    setRowIndex: setRowIndexPlain
+    setRowIndex: setRowIndexPlain,
+    setRowPosition: setRowPositionPlain
   } = useGridRowsOverridableMethodsCommunity(apiRef);
+  const {
+    setRowIndex: setRowIndexTreeData,
+    setRowPosition: setRowPositionTreeData
+  } = useGridRowsOverridableMethodsPro(apiRef, props);
   const flatTree = useGridSelector(apiRef, gridRowMaximumTreeDepthSelector) === 1;
-  const setRowIndex = React.useCallback(async (sourceRowId, targetOriginalIndex) => {
+  const setRowPosition = React.useCallback(async (sourceRowId, targetRowId, position) => {
     const sortedFilteredRowIds = gridExpandedSortedRowIdsSelector(apiRef);
     const sortedFilteredRowIndexLookup = gridExpandedSortedRowIndexLookupSelector(apiRef);
     const rowTree = gridRowTreeSelector(apiRef);
     const sourceNode = gridRowNodeSelector(apiRef, sourceRowId);
+    const targetNode = gridRowNodeSelector(apiRef, targetRowId);
     if (!sourceNode) {
       throw new Error(`MUI X: No row with id #${sourceRowId} found.`);
     }
+    if (!targetNode) {
+      throw new Error(`MUI X: No row with id #${targetRowId} found.`);
+    }
     if (sourceNode.type === 'footer') {
       throw new Error(`MUI X: The row reordering do not support reordering of footer rows.`);
     }
 
+    // Get the target index from the targetRowId using the lookup selector
+    const targetIndexUnadjusted = sortedFilteredRowIndexLookup[targetRowId];
+    if (targetIndexUnadjusted === undefined) {
+      throw new Error(`MUI X: Target row with id #${targetRowId} not found in current view.`);
+    }
+    const targetIndex = position === 'below' ? targetIndexUnadjusted + 1 : targetIndexUnadjusted;
+
     /**
      * Row Grouping Reordering Use Cases
      * =================================
@@ -40,6 +56,31 @@ export const useGridRowsOverridableMethods = (apiRef, props) => {
 
     const executionContext = {
       sourceRowId,
+      dropPosition: position,
+      placeholderIndex: targetIndex,
+      sortedFilteredRowIds,
+      sortedFilteredRowIndexLookup,
+      rowTree,
+      apiRef,
+      processRowUpdate,
+      onProcessRowUpdateError
+    };
+    return rowGroupingReorderExecutor.execute(executionContext);
+  }, [apiRef, processRowUpdate, onProcessRowUpdateError]);
+  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.`);
+    }
+    const executionContext = {
+      sourceRowId,
+      dropPosition: 'below',
       placeholderIndex: targetOriginalIndex,
       sortedFilteredRowIds,
       sortedFilteredRowIndexLookup,
@@ -48,9 +89,22 @@ export const useGridRowsOverridableMethods = (apiRef, props) => {
       processRowUpdate,
       onProcessRowUpdateError
     };
-    await rowGroupingReorderExecutor.execute(executionContext);
+    return rowGroupingReorderExecutor.execute(executionContext);
   }, [apiRef, processRowUpdate, onProcessRowUpdateError]);
+  if (flatTree) {
+    return {
+      setRowIndex: setRowIndexPlain,
+      setRowPosition: setRowPositionPlain
+    };
+  }
+  if (props.treeData) {
+    return {
+      setRowIndex: setRowIndexTreeData,
+      setRowPosition: setRowPositionTreeData
+    };
+  }
   return {
-    setRowIndex: flatTree ? setRowIndexPlain : setRowIndex
+    setRowIndex,
+    setRowPosition
   };
 };

package/esm/index.js

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

package/hooks/features/aggregation/useGridAggregation.js

@@ -46,8 +46,8 @@ const useGridAggregation = (apiRef, props) => {
     }
   }, [apiRef]);
   const abortControllerRef = React.useRef(null);
-  const applyAggregation = React.useCallback(reason => {
-    // Abort previous if any
+  const applyAggregation = React.useCallback(() => {
+    // Abort previous if we're proceeding
     if (abortControllerRef.current) {
       abortControllerRef.current.abort();
     }
@@ -56,19 +56,17 @@ const useGridAggregation = (apiRef, props) => {
     const aggregationRules = (0, _gridAggregationUtils.getAggregationRules)((0, _xDataGridPro.gridColumnLookupSelector)(apiRef), (0, _gridAggregationSelectors.gridAggregationModelSelector)(apiRef), props.aggregationFunctions, !!props.dataSource);
     const aggregatedFields = Object.keys(aggregationRules);
     const currentAggregationLookup = (0, _gridAggregationSelectors.gridAggregationLookupSelector)(apiRef);
-    const needsSorting = (0, _createAggregationLookup.shouldApplySorting)(aggregationRules, aggregatedFields);
-    if (reason === 'sort' && !needsSorting) {
-      // no need to re-apply aggregation on `sortedRowsSet` if sorting is not needed
-      return;
-    }
     const renderContext = (0, _xDataGridPro.gridRenderContextSelector)(apiRef);
     const visibleColumns = (0, _xDataGridPro.gridVisibleColumnFieldsSelector)(apiRef);
     const chunks = [];
+    const sortedAggregatedFields = (0, _xDataGridPro.gridSortModelSelector)(apiRef).map(s => s.field).filter(field => aggregatedFields.includes(field));
     const visibleAggregatedFields = visibleColumns.slice(renderContext.firstColumnIndex, renderContext.lastColumnIndex + 1).filter(field => aggregatedFields.includes(field));
+    const visibleAggregatedFieldsWithSort = [...visibleAggregatedFields, ...sortedAggregatedFields.filter(field => !visibleAggregatedFields.includes(field))];
+    const hasAggregatedSortedField = (0, _xDataGridPro.gridRowMaximumTreeDepthSelector)(apiRef) > 1 && sortedAggregatedFields.length > 0;
     if (visibleAggregatedFields.length > 0) {
-      chunks.push(visibleAggregatedFields);
+      chunks.push(visibleAggregatedFieldsWithSort);
     }
-    const otherAggregatedFields = aggregatedFields.filter(field => !visibleAggregatedFields.includes(field));
+    const otherAggregatedFields = aggregatedFields.filter(field => !visibleAggregatedFieldsWithSort.includes(field));
     const chunkSize = 20; // columns per chunk
     for (let i = 0; i < otherAggregatedFields.length; i += chunkSize) {
       chunks.push(otherAggregatedFields.slice(i, i + chunkSize));
@@ -83,11 +81,7 @@ const useGridAggregation = (apiRef, props) => {
       }
       const currentChunk = chunks[chunkIndex];
       if (!currentChunk) {
-        const sortModel = (0, _xDataGridPro.gridSortModelSelector)(apiRef).map(s => s.field);
-        const hasAggregatedSorting = sortModel.some(field => aggregationRules[field]);
-        if (hasAggregatedSorting) {
-          apiRef.current.applySorting();
-        }
+        apiRef.current.publishEvent('aggregationLookupSet');
         abortControllerRef.current = null;
         return;
       }
@@ -114,6 +108,9 @@ const useGridAggregation = (apiRef, props) => {
           lookup: (0, _extends2.default)({}, aggregationLookup)
         })
       }));
+      if (chunkIndex === 0 && hasAggregatedSortedField) {
+        apiRef.current.applySorting();
+      }
       chunkIndex += 1;
       if (performance.now() - chunkStartTime < timeLimit) {
         processChunk();
@@ -144,7 +141,9 @@ const useGridAggregation = (apiRef, props) => {
       }
     };
   }, []);
-  const deferredApplyAggregation = (0, _xDataGridPro.useRunOncePerLoop)(applyAggregation);
+  const {
+    schedule: deferredApplyAggregation
+  } = (0, _xDataGridPro.useRunOncePerLoop)(applyAggregation);
   const aggregationApi = {
     setAggregationModel
   };
@@ -185,7 +184,24 @@ const useGridAggregation = (apiRef, props) => {
   (0, _xDataGridPro.useGridEvent)(apiRef, 'aggregationModelChange', checkAggregationRulesDiff);
   (0, _xDataGridPro.useGridEvent)(apiRef, 'columnsChange', checkAggregationRulesDiff);
   (0, _xDataGridPro.useGridEvent)(apiRef, 'filteredRowsSet', deferredApplyAggregation);
-  (0, _xDataGridPro.useGridEvent)(apiRef, 'sortedRowsSet', () => deferredApplyAggregation('sort'));
+  const lastSortModel = React.useRef((0, _xDataGridPro.gridSortModelSelector)(apiRef));
+  (0, _xDataGridPro.useGridEvent)(apiRef, 'sortedRowsSet', () => {
+    const sortModel = (0, _xDataGridPro.gridSortModelSelector)(apiRef);
+    if (lastSortModel.current === sortModel) {
+      return;
+    }
+    lastSortModel.current = sortModel;
+    const aggregationRules = (0, _gridAggregationUtils.getAggregationRules)((0, _xDataGridPro.gridColumnLookupSelector)(apiRef), (0, _gridAggregationSelectors.gridAggregationModelSelector)(apiRef), props.aggregationFunctions, !!props.dataSource);
+    const aggregatedFields = Object.keys(aggregationRules);
+    if (!aggregatedFields.length) {
+      return;
+    }
+    const needsSorting = (0, _createAggregationLookup.shouldApplySorting)(aggregationRules, aggregatedFields);
+    if (!needsSorting) {
+      return;
+    }
+    deferredApplyAggregation();
+  });
 
   /**
    * EFFECTS
@@ -195,5 +211,10 @@ const useGridAggregation = (apiRef, props) => {
       apiRef.current.setAggregationModel(props.aggregationModel);
     }
   }, [apiRef, props.aggregationModel]);
+  React.useEffect(() => {
+    if (props.getAggregationPosition !== undefined) {
+      deferredApplyAggregation();
+    }
+  }, [deferredApplyAggregation, props.getAggregationPosition]);
 };
 exports.useGridAggregation = useGridAggregation;

package/hooks/features/chartsIntegration/useGridChartsIntegration.js

@@ -506,6 +506,7 @@ const useGridChartsIntegration = (apiRef, props) => {
   (0, _internals.useGridEvent)(apiRef, 'pivotModeChange', (0, _internals.runIf)(isChartsIntegrationAvailable, () => debouncedHandleColumnDataUpdate(syncedChartIds)));
   (0, _internals.useGridEvent)(apiRef, 'filteredRowsSet', (0, _internals.runIf)(isChartsIntegrationAvailable, () => debouncedHandleRowDataUpdate(syncedChartIds)));
   (0, _internals.useGridEvent)(apiRef, 'sortedRowsSet', (0, _internals.runIf)(isChartsIntegrationAvailable, () => debouncedHandleRowDataUpdate(syncedChartIds)));
+  (0, _internals.useGridEvent)(apiRef, 'aggregationLookupSet', (0, _internals.runIf)(isChartsIntegrationAvailable, () => debouncedHandleRowDataUpdate(syncedChartIds)));
   const stateExportPreProcessing = React.useCallback((prevState, exportContext) => {
     if (!props.chartsIntegration || !props.experimentalFeatures?.charts) {
       return prevState;

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" | "isGroupExpandedByDefault" | "rowGroupingColumnMode" | "disableRowGrouping" | "slotProps" | "slots" | "dataSource" | "treeData">) => void;
+export declare const useGridRowGrouping: (apiRef: RefObject<GridPrivateApiPremium>, props: Pick<DataGridPremiumProcessedProps, "initialState" | "rowGroupingModel" | "onRowGroupingModelChange" | "isGroupExpandedByDefault" | "rowGroupingColumnMode" | "disableRowGrouping" | "slotProps" | "slots" | "dataSource" | "treeData" | "isValidRowReorder">) => void;

package/hooks/features/rowGrouping/useGridRowGrouping.js

@@ -13,7 +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");
+var _rowGroupingReorderValidator = require("../rowReorder/rowGroupingReorderValidator");
 const rowGroupingStateInitializer = (state, props, apiRef) => {
   apiRef.current.caches.rowGrouping = {
     rulesOnLastRowTreeCreation: []
@@ -177,7 +177,8 @@ const useGridRowGrouping = (apiRef, props) => {
       }
     }
   }, [apiRef, props.disableRowGrouping]);
-  const getRowReorderTargetIndex = React.useCallback((initialValue, {
+  const isValidRowReorderProp = props.isValidRowReorder;
+  const isRowReorderValid = React.useCallback((initialValue, {
     sourceRowId,
     targetRowId,
     dropPosition,
@@ -186,10 +187,9 @@ const useGridRowGrouping = (apiRef, props) => {
     if ((0, _xDataGridPro.gridRowMaximumTreeDepthSelector)(apiRef) === 1 || props.treeData) {
       return initialValue;
     }
-    const expandedSortedRowIndexLookup = (0, _internals.gridExpandedSortedRowIndexLookupSelector)(apiRef);
+    const expandedSortedRowIndexLookup = (0, _xDataGridPro.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];
@@ -198,30 +198,34 @@ const useGridRowGrouping = (apiRef, props) => {
 
     // Basic validity checks
     if (!sourceNode || !targetNode) {
-      return -1;
+      return false;
     }
 
     // Create context object
     const context = {
+      apiRef,
       sourceNode,
       targetNode,
       prevNode,
       nextNode,
-      rowTree,
       dropPosition,
-      dragDirection,
-      targetRowIndex,
-      sourceRowIndex,
-      expandedSortedRowIndexLookup
+      dragDirection
     };
 
-    // Check if the reorder is valid
-    if (_reorderValidator.rowGroupingReorderValidator.validate(context)) {
-      return dropPosition === 'below' ? targetRowIndex + 1 : targetRowIndex;
+    // First apply internal validation
+    let isValid = _rowGroupingReorderValidator.rowGroupingReorderValidator.validate(context);
+
+    // If internal validation passes AND user provided additional validation
+    if (isValid && isValidRowReorderProp) {
+      // Apply additional user restrictions
+      isValid = isValidRowReorderProp(context);
+    }
+    if (isValid) {
+      return true;
     }
-    return -1;
-  }, [apiRef, props.treeData]);
-  (0, _internals.useGridRegisterPipeProcessor)(apiRef, 'getRowReorderTargetIndex', getRowReorderTargetIndex);
+    return false;
+  }, [apiRef, props.treeData, isValidRowReorderProp]);
+  (0, _internals.useGridRegisterPipeProcessor)(apiRef, 'isRowReorderValid', isRowReorderValid);
   (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

@@ -1,34 +1,13 @@
-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;
-}
+import { BaseReorderOperation, type ReorderOperation, type ReorderExecutionContext } from '@mui/x-data-grid-pro/internals';
+import { GridPrivateApiPremium } from "../../../models/gridApiPremium.js";
+type ReorderExecutionContextType = ReorderExecutionContext<GridPrivateApiPremium>;
 /**
  * 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>;
+  executeOperation(operation: ReorderOperation, ctx: ReorderExecutionContextType): Promise<void>;
 }
 /**
  * Handles moving entire groups between different parents.
@@ -36,5 +15,6 @@ export declare class CrossParentLeafOperation extends BaseReorderOperation {
 export declare class CrossParentGroupOperation extends BaseReorderOperation {
   readonly operationType = "cross-parent-group";
   detectOperation(ctx: ReorderExecutionContext): ReorderOperation | null;
-  executeOperation(operation: ReorderOperation, ctx: ReorderExecutionContext): Promise<void>;
-}
+  executeOperation(operation: ReorderOperation, ctx: ReorderExecutionContextType): Promise<void>;
+}
+export {};