[DataGridPro] Improve trigger for nested row reordering (#21642)

Author: MBilalShafi

packages/x-data-grid-premium/src/hooks/features/rows/useGridRowsOverridableMethods.ts

@@ -128,7 +128,7 @@ export const useGridRowsOverridableMethods = (
     [apiRef, processRowUpdate, onProcessRowUpdateError],
   );
 
-  if (flatTree) {
+  if (flatTree && !props.treeData) {
     return {
       setRowIndex: setRowIndexPlain,
       setRowPosition: setRowPositionPlain,

packages/x-data-grid-pro/src/DataGridPro/DataGridPro.tsx

@@ -14,7 +14,7 @@ import { useMaterialCSSVariables } from '@mui/x-data-grid/material';
 import { forwardRef } from '@mui/x-internals/forwardRef';
 import { useGridRowsOverridableMethods } from '../hooks/features/rows/useGridRowsOverridableMethods';
 import { useDataGridProComponent } from './useDataGridProComponent';
-import type { DataGridProProps } from '../models/dataGridProProps';
+import type { DataGridProProcessedProps, DataGridProProps } from '../models/dataGridProProps';
 import { useDataGridProProps } from './useDataGridProProps';
 import { propValidatorsDataGridPro } from '../internals/propValidation';
 import { useGridAriaAttributesPro } from '../hooks/utils/useGridAriaAttributes';
@@ -23,7 +23,7 @@ import type { GridApiPro, GridPrivateApiPro } from '../models/gridApiPro';
 
 export type { GridProSlotsComponent as GridSlots } from '../models';
 
-const configuration: GridConfiguration<GridPrivateApiPro> = {
+const configuration: GridConfiguration<GridPrivateApiPro, DataGridProProcessedProps> = {
   hooks: {
     useCSSVariables: useMaterialCSSVariables,
     useGridAriaAttributes: useGridAriaAttributesPro,

packages/x-data-grid-pro/src/hooks/features/rows/useGridRowsOverridableMethods.ts

@@ -3,8 +3,6 @@ import {
   gridRowTreeSelector,
   gridExpandedSortedRowIdsSelector,
   gridRowNodeSelector,
-  useGridSelector,
-  gridRowMaximumTreeDepthSelector,
   gridExpandedSortedRowIndexLookupSelector,
   type GridRowProApi,
 } from '@mui/x-data-grid';
@@ -19,15 +17,13 @@ export const useGridRowsOverridableMethods = (
   apiRef: RefObject<GridPrivateApiPro>,
   props: Pick<
     DataGridProProcessedProps,
-    'processRowUpdate' | 'onProcessRowUpdateError' | 'setTreeDataPath'
+    'processRowUpdate' | 'onProcessRowUpdateError' | 'setTreeDataPath' | 'treeData'
   >,
 ) => {
-  const { processRowUpdate, onProcessRowUpdateError, setTreeDataPath } = props;
+  const { processRowUpdate, onProcessRowUpdateError, setTreeDataPath, treeData } = props;
   const { setRowIndex: setRowIndexFlat, setRowPosition: setRowPositionFlat } =
     useGridRowsOverridableMethodsCommunity(apiRef);
 
-  const flatTree = useGridSelector(apiRef, gridRowMaximumTreeDepthSelector) === 1;
-
   const setRowPosition = React.useCallback<GridRowProApi['setRowPosition']>(
     async (sourceRowId, targetRowId, position) => {
       const sortedFilteredRowIds = gridExpandedSortedRowIdsSelector(apiRef);
@@ -101,7 +97,7 @@ export const useGridRowsOverridableMethods = (
   }, []);
 
   return {
-    setRowIndex: flatTree ? setRowIndexFlat : setRowIndex,
-    setRowPosition: flatTree ? setRowPositionFlat : setRowPosition,
+    setRowIndex: treeData ? setRowIndex : setRowIndexFlat,
+    setRowPosition: treeData ? setRowPosition : setRowPositionFlat,
   };
 };

packages/x-data-grid-pro/src/tests/rowReorderTreeData.DataGridPro.test.tsx

@@ -825,6 +825,60 @@ describe.skipIf(isJSDOM)('<DataGridPro /> - Tree data row reordering', () => {
         // Verify all paths maintain correct hierarchy
         expect(updatedRows.length).to.equal(2); // Project + File.doc
       });
+
+      it('should allow dropping inside when initial data has no children (all rows at root level)', async () => {
+        // Regression test for https://github.com/mui/mui-x/issues/21347
+        // When treeData is enabled but all rows are flat (no parent-child relationships),
+        // the "inside" drop position should still work.
+        const handleRowOrderChange = spy();
+        const processedRows: GridRowModel[] = [];
+
+        const handleProcessRowUpdate = (newRow: GridRowModel) => {
+          processedRows.push(newRow);
+          return newRow;
+        };
+
+        render(
+          <Test
+            onRowOrderChange={handleRowOrderChange}
+            processRowUpdate={handleProcessRowUpdate}
+            rows={[
+              { id: 1, path: ['Folder'], name: 'Folder' },
+              { id: 2, path: ['FileA'], name: 'FileA' },
+              { id: 3, path: ['FileB'], name: 'FileB' },
+            ]}
+          />,
+        );
+
+        const allValues = getColumnValues(0);
+        const fileAIndex = findRowIndex(allValues, 'FileA', 2);
+        const folderIndex = findRowIndex(allValues, 'Folder', 1);
+
+        expect(fileAIndex).to.be.greaterThan(
+          -1,
+          `FileA should be found in: ${allValues.join(', ')}`,
+        );
+        expect(folderIndex).to.be.greaterThan(
+          -1,
+          `Folder should be found in: ${allValues.join(', ')}`,
+        );
+
+        const sourceCell = getCell(fileAIndex, 0).firstChild!;
+        const targetCell = getCell(folderIndex, 0);
+
+        performDragOperation(sourceCell, targetCell, 'inside');
+
+        await waitFor(() => {
+          expect(handleRowOrderChange.callCount).to.equal(1);
+        });
+
+        // Verify FileA is now a child of Folder
+        const rowTree = gridRowTreeSelector(apiRef!);
+        const fileANode = rowTree[2];
+        const folderNode = rowTree[1];
+        expect(folderNode.type).to.equal('group');
+        expect(fileANode.parent).to.equal(folderNode.id);
+      });
     });
   });