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

package/esm/hooks/features/detailPanel/useGridDetailPanel.js

@@ -2,7 +2,7 @@
 
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
-import { useGridSelector, useGridEvent, useGridApiMethod, gridDataRowIdsSelector } from '@mui/x-data-grid';
+import { useGridEvent, useGridApiMethod, gridDataRowIdsSelector } from '@mui/x-data-grid';
 import { useGridRegisterPipeProcessor } from '@mui/x-data-grid/internals';
 import { GRID_DETAIL_PANEL_TOGGLE_FIELD } from "./gridDetailPanelToggleColDef.js";
 import { gridDetailPanelExpandedRowIdsSelector, gridDetailPanelExpandedRowsContentCacheSelector, gridDetailPanelRawHeightCacheSelector } from "./gridDetailPanelSelector.js";
@@ -46,11 +46,11 @@ function cacheContentAndHeight(apiRef, getDetailPanelContent, getDetailPanelHeig
   };
 }
 export const useGridDetailPanel = (apiRef, props) => {
-  const contentCache = useGridSelector(apiRef, gridDetailPanelExpandedRowsContentCacheSelector);
   const handleCellClick = React.useCallback((params, event) => {
     if (params.field !== GRID_DETAIL_PANEL_TOGGLE_FIELD || props.getDetailPanelContent == null) {
       return;
     }
+    const contentCache = gridDetailPanelExpandedRowsContentCacheSelector(apiRef);
     const content = contentCache[params.id];
     if (! /*#__PURE__*/React.isValidElement(content)) {
       return;
@@ -61,7 +61,7 @@ export const useGridDetailPanel = (apiRef, props) => {
       return;
     }
     apiRef.current.toggleDetailPanel(params.id);
-  }, [apiRef, contentCache, props.getDetailPanelContent]);
+  }, [apiRef, props.getDetailPanelContent]);
   const handleCellKeyDown = React.useCallback((params, event) => {
     if (props.getDetailPanelContent == null) {
       return;
@@ -83,6 +83,7 @@ export const useGridDetailPanel = (apiRef, props) => {
     if (props.getDetailPanelContent == null) {
       return;
     }
+    const contentCache = gridDetailPanelExpandedRowsContentCacheSelector(apiRef);
     const content = contentCache[id];
     if (! /*#__PURE__*/React.isValidElement(content)) {
       return;
@@ -95,7 +96,7 @@ export const useGridDetailPanel = (apiRef, props) => {
       newIds.add(id);
     }
     apiRef.current.setExpandedDetailPanels(newIds);
-  }, [apiRef, contentCache, props.getDetailPanelContent]);
+  }, [apiRef, props.getDetailPanelContent]);
   const getExpandedDetailPanels = React.useCallback(() => gridDetailPanelExpandedRowIdsSelector(apiRef), [apiRef]);
   const setExpandedDetailPanels = React.useCallback(ids => {
     apiRef.current.setState(state => {
@@ -157,7 +158,7 @@ export const useGridDetailPanel = (apiRef, props) => {
   const previousGetDetailPanelContentProp = React.useRef(undefined);
   const previousGetDetailPanelHeightProp = React.useRef(undefined);
   const updateCachesIfNeeded = React.useCallback(() => {
-    if (props.getDetailPanelContent === previousGetDetailPanelContentProp.current && props.getDetailPanelHeight === previousGetDetailPanelHeightProp.current) {
+    if (props.getDetailPanelContent === previousGetDetailPanelContentProp.current && props.getDetailPanelHeight === previousGetDetailPanelHeightProp.current || !props.getDetailPanelContent) {
       return;
     }
     apiRef.current.setState(state => {

package/esm/hooks/features/infiniteLoader/useGridInfiniteLoader.js

@@ -1,5 +1,5 @@
-import { useGridSelector, useGridEventPriority, gridVisibleColumnDefinitionsSelector, useGridEvent } from '@mui/x-data-grid';
-import { useGridVisibleRows, runIf } from '@mui/x-data-grid/internals';
+import { useGridEventPriority, gridVisibleColumnDefinitionsSelector, useGridEvent } from '@mui/x-data-grid';
+import { runIf, getVisibleRows } from '@mui/x-data-grid/internals';
 import useEventCallback from '@mui/utils/useEventCallback';
 /**
  * @requires useGridColumns (state)
@@ -7,10 +7,10 @@ import useEventCallback from '@mui/utils/useEventCallback';
  * @requires useGridScroll (method
  */
 export const useGridInfiniteLoader = (apiRef, props) => {
-  const visibleColumns = useGridSelector(apiRef, gridVisibleColumnDefinitionsSelector);
-  const currentPage = useGridVisibleRows(apiRef, props);
   const isEnabled = props.rowsLoadingMode === 'client' && !!props.onRowsScrollEnd;
   const handleLoadMoreRows = useEventCallback(() => {
+    const visibleColumns = gridVisibleColumnDefinitionsSelector(apiRef);
+    const currentPage = getVisibleRows(apiRef);
     const viewportPageSize = apiRef.current.getViewportPageSize();
     const rowScrollEndParams = {
       visibleColumns,

package/esm/hooks/features/rowReorder/commonReorderConditions.d.ts

@@ -0,0 +1,30 @@
+import type { ReorderValidationContext as Ctx } from "./models.js";
+/**
+ * Reusable validation conditions for row reordering validation
+ */
+export declare const commonReorderConditions: {
+  isGroupToGroup: (ctx: Ctx) => boolean;
+  isLeafToLeaf: (ctx: Ctx) => boolean;
+  isLeafToGroup: (ctx: Ctx) => boolean;
+  isGroupToLeaf: (ctx: Ctx) => boolean;
+  isDropAbove: (ctx: Ctx) => boolean;
+  isDropBelow: (ctx: Ctx) => boolean;
+  sameDepth: (ctx: Ctx) => boolean;
+  sourceDepthGreater: (ctx: Ctx) => boolean;
+  targetDepthIsSourceMinusOne: (ctx: Ctx) => boolean;
+  sameParent: (ctx: Ctx) => boolean;
+  targetGroupExpanded: (ctx: Ctx) => boolean;
+  targetGroupCollapsed: (ctx: Ctx) => boolean;
+  hasPrevNode: (ctx: Ctx) => boolean;
+  hasNextNode: (ctx: Ctx) => boolean;
+  prevIsLeaf: (ctx: Ctx) => boolean;
+  prevIsGroup: (ctx: Ctx) => boolean;
+  nextIsLeaf: (ctx: Ctx) => boolean;
+  nextIsGroup: (ctx: Ctx) => boolean;
+  prevDepthEquals: (ctx: Ctx, depth: number) => boolean;
+  prevDepthEqualsSource: (ctx: Ctx) => boolean;
+  prevBelongsToSource: (ctx: Ctx) => boolean;
+  isAdjacentPosition: (ctx: Ctx) => boolean;
+  targetFirstChildIsGroupWithSourceDepth: (ctx: Ctx) => boolean;
+  targetFirstChildDepthEqualsSource: (ctx: Ctx) => boolean;
+};

package/esm/hooks/features/rowReorder/commonReorderConditions.js

@@ -0,0 +1,78 @@
+import { gridExpandedSortedRowIndexLookupSelector, gridRowTreeSelector } from '@mui/x-data-grid';
+/**
+ * Reusable validation conditions for row reordering validation
+ */
+export const commonReorderConditions = {
+  // Node type checks
+  isGroupToGroup: ctx => ctx.sourceNode.type === 'group' && ctx.targetNode.type === 'group',
+  isLeafToLeaf: ctx => ctx.sourceNode.type === 'leaf' && ctx.targetNode.type === 'leaf',
+  isLeafToGroup: ctx => ctx.sourceNode.type === 'leaf' && ctx.targetNode.type === 'group',
+  isGroupToLeaf: ctx => ctx.sourceNode.type === 'group' && ctx.targetNode.type === 'leaf',
+  // Drop position checks
+  isDropAbove: ctx => ctx.dropPosition === 'above',
+  isDropBelow: ctx => ctx.dropPosition === 'below',
+  // Depth checks
+  sameDepth: ctx => ctx.sourceNode.depth === ctx.targetNode.depth,
+  sourceDepthGreater: ctx => ctx.sourceNode.depth > ctx.targetNode.depth,
+  targetDepthIsSourceMinusOne: ctx => ctx.targetNode.depth === ctx.sourceNode.depth - 1,
+  // Parent checks
+  sameParent: ctx => ctx.sourceNode.parent === ctx.targetNode.parent,
+  // Node state checks
+  targetGroupExpanded: ctx => (ctx.targetNode.type === 'group' && ctx.targetNode.childrenExpanded) ?? false,
+  targetGroupCollapsed: ctx => ctx.targetNode.type === 'group' && !ctx.targetNode.childrenExpanded,
+  // Previous/Next node checks
+  hasPrevNode: ctx => ctx.prevNode !== null,
+  hasNextNode: ctx => ctx.nextNode !== null,
+  prevIsLeaf: ctx => ctx.prevNode?.type === 'leaf',
+  prevIsGroup: ctx => ctx.prevNode?.type === 'group',
+  nextIsLeaf: ctx => ctx.nextNode?.type === 'leaf',
+  nextIsGroup: ctx => ctx.nextNode?.type === 'group',
+  prevDepthEquals: (ctx, depth) => ctx.prevNode?.depth === depth,
+  prevDepthEqualsSource: ctx => ctx.prevNode?.depth === ctx.sourceNode.depth,
+  // Complex checks
+  prevBelongsToSource: ctx => {
+    if (!ctx.prevNode) {
+      return false;
+    }
+    // Check if prevNode.parent OR any of its ancestors === sourceNode.id
+    let currentId = ctx.prevNode.parent;
+    while (currentId) {
+      if (currentId === ctx.sourceNode.id) {
+        return true;
+      }
+      const node = gridRowTreeSelector(ctx.apiRef)[currentId];
+      if (!node) {
+        break;
+      }
+      currentId = node.parent;
+    }
+    return false;
+  },
+  // Position checks
+  isAdjacentPosition: ctx => {
+    const expandedSortedRowIndexLookup = gridExpandedSortedRowIndexLookupSelector(ctx.apiRef);
+    const sourceRowIndex = expandedSortedRowIndexLookup[ctx.sourceNode.id];
+    const targetRowIndex = expandedSortedRowIndexLookup[ctx.targetNode.id];
+    const dropPosition = ctx.dropPosition;
+    return dropPosition === 'above' && targetRowIndex === sourceRowIndex + 1 || dropPosition === 'below' && targetRowIndex === sourceRowIndex - 1;
+  },
+  // First child check
+  targetFirstChildIsGroupWithSourceDepth: ctx => {
+    if (ctx.targetNode.type !== 'group') {
+      return false;
+    }
+    const rowTree = gridRowTreeSelector(ctx.apiRef);
+    const targetGroup = ctx.targetNode;
+    const firstChild = targetGroup.children?.[0] ? rowTree[targetGroup.children[0]] : null;
+    return firstChild?.type === 'group' && firstChild.depth === ctx.sourceNode.depth;
+  },
+  targetFirstChildDepthEqualsSource: ctx => {
+    if (ctx.targetNode.type !== 'group') {
+      return false;
+    }
+    const rowTree = gridRowTreeSelector(ctx.apiRef);
+    const targetGroup = ctx.targetNode;
+    const firstChild = targetGroup.children?.[0] ? rowTree[targetGroup.children[0]] : null;
+    return firstChild ? firstChild.depth === ctx.sourceNode.depth : false;
+  }
+};

package/esm/hooks/features/rowReorder/index.d.ts

@@ -1 +1,2 @@
-export * from "./gridRowReorderColDef.js";
+export * from "./gridRowReorderColDef.js";
+export type { ReorderValidationContext, IsRowReorderableParams } from "./models.js";

package/esm/hooks/features/rowReorder/index.js

@@ -1 +1,2 @@
-export * from "./gridRowReorderColDef.js";
+export * from "./gridRowReorderColDef.js";
+export {};

package/esm/hooks/features/rowReorder/models.d.ts

@@ -0,0 +1,17 @@
+import { GridTreeNode, GridValidRowModel } from '@mui/x-data-grid';
+import type { RefObject } from '@mui/x-internals/types';
+import type { RowReorderDropPosition, RowReorderDragDirection } from '@mui/x-data-grid/internals';
+import type { GridPrivateApiPro } from "../../../models/gridApiPro.js";
+export type IsRowReorderableParams<R extends GridValidRowModel = any> = {
+  row: R;
+  rowNode: GridTreeNode;
+};
+export type ReorderValidationContext = {
+  apiRef: RefObject<GridPrivateApiPro>;
+  sourceNode: GridTreeNode;
+  targetNode: GridTreeNode;
+  prevNode: GridTreeNode | null;
+  nextNode: GridTreeNode | null;
+  dropPosition: RowReorderDropPosition;
+  dragDirection: RowReorderDragDirection;
+};

package/esm/hooks/features/rowReorder/models.js

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

package/esm/hooks/features/rowReorder/reorderExecutor.d.ts

@@ -0,0 +1,27 @@
+import type { ReorderExecutionContext, ReorderOperation } 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;
+}
+/**
+ * Executor class for handling row reorder operations in grouped data grids.
+ *
+ * This class coordinates the execution of different reorder operation types,
+ * trying each operation in order until one succeeds or all fail.
+ */
+export declare class RowReorderExecutor {
+  private operations;
+  constructor(operations: BaseReorderOperation[]);
+  execute(ctx: ReorderExecutionContext): Promise<void>;
+}

package/esm/hooks/features/rowReorder/reorderExecutor.js

@@ -0,0 +1,29 @@
+import { warnOnce } from '@mui/x-internals/warning';
+/**
+ * Base class for all reorder operations.
+ * Provides abstract methods for operation detection and execution.
+ */
+export class BaseReorderOperation {}
+
+/**
+ * Executor class for handling row reorder operations in grouped data grids.
+ *
+ * This class coordinates the execution of different reorder operation types,
+ * trying each operation in order until one succeeds or all fail.
+ */
+export class RowReorderExecutor {
+  constructor(operations) {
+    this.operations = operations;
+  }
+  async execute(ctx) {
+    for (const operation of this.operations) {
+      const detectedOperation = operation.detectOperation(ctx);
+      if (detectedOperation) {
+        // eslint-disable-next-line no-await-in-loop
+        await operation.executeOperation(detectedOperation, ctx);
+        return;
+      }
+    }
+    warnOnce(['MUI X: The parameters provided to the API method resulted in a no-op.', 'Consider looking at the documentation at https://mui.com/x/react-data-grid/row-ordering/'], 'warning');
+  }
+}

package/esm/hooks/features/rowReorder/reorderValidator.d.ts

@@ -0,0 +1,12 @@
+import { ReorderValidationContext } from "./models.js";
+export interface ValidationRule {
+  name: string;
+  applies: (ctx: ReorderValidationContext) => boolean;
+  isInvalid: (ctx: ReorderValidationContext) => boolean;
+  message?: string;
+}
+export declare class RowReorderValidator {
+  private rules;
+  constructor(rules: ValidationRule[]);
+  validate(context: ReorderValidationContext): boolean;
+}

package/esm/hooks/features/rowReorder/reorderValidator.js

@@ -0,0 +1,14 @@
+export class RowReorderValidator {
+  constructor(rules) {
+    this.rules = rules;
+  }
+  validate(context) {
+    // Check all validation rules
+    for (const rule of this.rules) {
+      if (rule.applies(context) && rule.isInvalid(context)) {
+        return false;
+      }
+    }
+    return true;
+  }
+}

package/esm/hooks/features/rowReorder/types.d.ts

@@ -0,0 +1,25 @@
+import type { GridRowId, GridTreeNode, GridRowTreeConfig } from '@mui/x-data-grid';
+import type { RefObject } from '@mui/x-internals/types';
+import type { RowReorderDropPosition } from '@mui/x-data-grid/internals';
+import type { GridPrivateApiPro } from "../../../models/gridApiPro.js";
+import type { DataGridProProcessedProps } from "../../../models/dataGridProProps.js";
+export type ReorderOperationType = 'same-parent-swap' | 'cross-parent-leaf' | 'cross-parent-group' | 'drop-on-leaf' | 'drop-on-group';
+export interface ReorderExecutionContext<ApiRef extends GridPrivateApiPro = GridPrivateApiPro> {
+  sourceRowId: GridRowId;
+  dropPosition: RowReorderDropPosition;
+  placeholderIndex: number;
+  sortedFilteredRowIds: GridRowId[];
+  sortedFilteredRowIndexLookup: Record<GridRowId, number>;
+  rowTree: GridRowTreeConfig;
+  apiRef: RefObject<ApiRef>;
+  processRowUpdate?: DataGridProProcessedProps['processRowUpdate'];
+  onProcessRowUpdateError?: DataGridProProcessedProps['onProcessRowUpdateError'];
+  setTreeDataPath?: DataGridProProcessedProps['setTreeDataPath'];
+}
+export interface ReorderOperation {
+  sourceNode: GridTreeNode;
+  targetNode: GridTreeNode;
+  actualTargetIndex: number;
+  isLastChild: boolean;
+  operationType: ReorderOperationType;
+}

package/esm/hooks/features/rowReorder/types.js

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

package/esm/hooks/features/rowReorder/useGridRowReorder.d.ts

@@ -7,4 +7,4 @@ export declare const rowReorderStateInitializer: GridStateInitializer;
  * Hook for row reordering (Pro package)
  * @requires useGridRows (method)
  */
-export declare const useGridRowReorder: (apiRef: RefObject<GridPrivateApiPro>, props: Pick<DataGridProProcessedProps, "rowReordering" | "onRowOrderChange" | "classes" | "treeData" | "dataSource">) => void;
+export declare const useGridRowReorder: (apiRef: RefObject<GridPrivateApiPro>, props: Pick<DataGridProProcessedProps, "rowReordering" | "onRowOrderChange" | "classes" | "treeData" | "dataSource" | "isValidRowReorder">) => void;