[TreeView] Make label editing and items reordering stable (#16439)

mui · Feb 3, 2025 · 29d6148 · 29d6148
1 parent 7a96012
commit 29d6148
Show file tree

Hide file tree

Showing 66 changed files with 83 additions and 206 deletions.
diff --git a/docs/data/tree-view/rich-tree-view/editing/CustomBehavior.js b/docs/data/tree-view/rich-tree-view/editing/CustomBehavior.js
@@ -35,7 +35,6 @@ export default function CustomBehavior() {
       <RichTreeView
         items={MUI_X_PRODUCTS}
         slots={{ item: CustomTreeItem }}
-        experimentalFeatures={{ labelEditing: true }}
         isItemEditable
         defaultExpandedItems={['grid', 'pickers']}
       />

diff --git a/docs/data/tree-view/rich-tree-view/editing/CustomBehavior.tsx b/docs/data/tree-view/rich-tree-view/editing/CustomBehavior.tsx
@@ -38,7 +38,6 @@ export default function CustomBehavior() {
       <RichTreeView
         items={MUI_X_PRODUCTS}
         slots={{ item: CustomTreeItem }}
-        experimentalFeatures={{ labelEditing: true }}
         isItemEditable
         defaultExpandedItems={['grid', 'pickers']}
       />

diff --git a/docs/data/tree-view/rich-tree-view/editing/CustomBehavior.tsx.preview b/docs/data/tree-view/rich-tree-view/editing/CustomBehavior.tsx.preview
@@ -1,7 +1,6 @@
 <RichTreeView
   items={MUI_X_PRODUCTS}
   slots={{ item: CustomTreeItem }}
-  experimentalFeatures={{ labelEditing: true }}
   isItemEditable
   defaultExpandedItems={['grid', 'pickers']}
 />
diff --git a/docs/data/tree-view/rich-tree-view/editing/CustomLabelInput.js b/docs/data/tree-view/rich-tree-view/editing/CustomLabelInput.js
@@ -176,7 +176,6 @@ export default function CustomLabelInput() {
       <RichTreeView
         items={ITEMS}
         slots={{ item: CustomTreeItem }}
-        experimentalFeatures={{ labelEditing: true }}
         isItemEditable
         defaultExpandedItems={['1', '2']}
         getItemLabel={(item) => `${item.firstName} ${item.lastName}`}

diff --git a/docs/data/tree-view/rich-tree-view/editing/CustomLabelInput.tsx b/docs/data/tree-view/rich-tree-view/editing/CustomLabelInput.tsx
@@ -203,7 +203,6 @@ export default function CustomLabelInput() {
       <RichTreeView
         items={ITEMS}
         slots={{ item: CustomTreeItem }}
-        experimentalFeatures={{ labelEditing: true }}
         isItemEditable
         defaultExpandedItems={['1', '2']}
         getItemLabel={(item) => `${item.firstName} ${item.lastName}`}

diff --git a/docs/data/tree-view/rich-tree-view/editing/CustomLabelInput.tsx.preview b/docs/data/tree-view/rich-tree-view/editing/CustomLabelInput.tsx.preview
@@ -1,7 +1,6 @@
 <RichTreeView
   items={ITEMS}
   slots={{ item: CustomTreeItem }}
-  experimentalFeatures={{ labelEditing: true }}
   isItemEditable
   defaultExpandedItems={['1', '2']}
   getItemLabel={(item) => `${item.firstName} ${item.lastName}`}

diff --git a/docs/data/tree-view/rich-tree-view/editing/EditLeaves.js b/docs/data/tree-view/rich-tree-view/editing/EditLeaves.js
@@ -43,7 +43,6 @@ export default function EditLeaves() {
       <RichTreeView
         items={MUI_X_PRODUCTS}
         apiRef={apiRef}
-        experimentalFeatures={{ labelEditing: true }}
         isItemEditable={(item) =>
           apiRef.current.getItemOrderedChildrenIds(item.id).length === 0
         }

diff --git a/docs/data/tree-view/rich-tree-view/editing/EditLeaves.tsx b/docs/data/tree-view/rich-tree-view/editing/EditLeaves.tsx
@@ -50,7 +50,6 @@ export default function EditLeaves() {
       <RichTreeView
         items={MUI_X_PRODUCTS}
         apiRef={apiRef}
-        experimentalFeatures={{ labelEditing: true }}
         isItemEditable={(item) =>
           apiRef.current!.getItemOrderedChildrenIds(item.id).length === 0
         }

diff --git a/docs/data/tree-view/rich-tree-view/editing/EditLeaves.tsx.preview b/docs/data/tree-view/rich-tree-view/editing/EditLeaves.tsx.preview
@@ -1,7 +1,6 @@
 <RichTreeView
   items={MUI_X_PRODUCTS}
   apiRef={apiRef}
-  experimentalFeatures={{ labelEditing: true }}
   isItemEditable={(item) =>
     apiRef.current!.getItemOrderedChildrenIds(item.id).length === 0
   }

diff --git a/docs/data/tree-view/rich-tree-view/editing/EditWithIcons.js b/docs/data/tree-view/rich-tree-view/editing/EditWithIcons.js
@@ -107,7 +107,6 @@ export default function EditWithIcons() {
       <RichTreeView
         items={MUI_X_PRODUCTS}
         slots={{ item: CustomTreeItem }}
-        experimentalFeatures={{ labelEditing: true }}
         isItemEditable
         defaultExpandedItems={['grid', 'pickers']}
         expansionTrigger="iconContainer"

diff --git a/docs/data/tree-view/rich-tree-view/editing/EditWithIcons.tsx b/docs/data/tree-view/rich-tree-view/editing/EditWithIcons.tsx
@@ -135,7 +135,6 @@ export default function EditWithIcons() {
       <RichTreeView
         items={MUI_X_PRODUCTS}
         slots={{ item: CustomTreeItem }}
-        experimentalFeatures={{ labelEditing: true }}
         isItemEditable
         defaultExpandedItems={['grid', 'pickers']}
         expansionTrigger="iconContainer"

diff --git a/docs/data/tree-view/rich-tree-view/editing/EditWithIcons.tsx.preview b/docs/data/tree-view/rich-tree-view/editing/EditWithIcons.tsx.preview
@@ -1,7 +1,6 @@
 <RichTreeView
   items={MUI_X_PRODUCTS}
   slots={{ item: CustomTreeItem }}
-  experimentalFeatures={{ labelEditing: true }}
   isItemEditable
   defaultExpandedItems={['grid', 'pickers']}
   expansionTrigger="iconContainer"

diff --git a/docs/data/tree-view/rich-tree-view/editing/EditingCallback.js b/docs/data/tree-view/rich-tree-view/editing/EditingCallback.js
@@ -21,7 +21,6 @@ export default function EditingCallback() {
       <Box sx={{ minHeight: 352, minWidth: 260 }}>
         <RichTreeView
           items={MUI_X_PRODUCTS}
-          experimentalFeatures={{ labelEditing: true }}
           isItemEditable
           defaultExpandedItems={['grid', 'pickers']}
           onItemLabelChange={(itemId, label) => setLastEditedItem({ itemId, label })}

diff --git a/docs/data/tree-view/rich-tree-view/editing/EditingCallback.tsx b/docs/data/tree-view/rich-tree-view/editing/EditingCallback.tsx
@@ -24,7 +24,6 @@ export default function EditingCallback() {
       <Box sx={{ minHeight: 352, minWidth: 260 }}>
         <RichTreeView
           items={MUI_X_PRODUCTS}
-          experimentalFeatures={{ labelEditing: true }}
           isItemEditable
           defaultExpandedItems={['grid', 'pickers']}
           onItemLabelChange={(itemId, label) => setLastEditedItem({ itemId, label })}

diff --git a/docs/data/tree-view/rich-tree-view/editing/EditingCallback.tsx.preview b/docs/data/tree-view/rich-tree-view/editing/EditingCallback.tsx.preview
@@ -0,0 +1,16 @@
+{lastEditedItem ? (
+  <Typography>
+    The label of item with id <em>{lastEditedItem!.itemId}</em> has been edited
+    to <em>{lastEditedItem!.label}</em>
+  </Typography>
+) : (
+  <Typography>No item has been edited yet</Typography>
+)}
+<Box sx={{ minHeight: 352, minWidth: 260 }}>
+  <RichTreeView
+    items={MUI_X_PRODUCTS}
+    isItemEditable
+    defaultExpandedItems={['grid', 'pickers']}
+    onItemLabelChange={(itemId, label) => setLastEditedItem({ itemId, label })}
+  />
+</Box>
diff --git a/docs/data/tree-view/rich-tree-view/editing/LabelEditingAllItems.js b/docs/data/tree-view/rich-tree-view/editing/LabelEditingAllItems.js
@@ -9,7 +9,6 @@ export default function LabelEditingAllItems() {
       <RichTreeView
         items={MUI_X_PRODUCTS}
         isItemEditable
-        experimentalFeatures={{ labelEditing: true }}
         defaultExpandedItems={['grid', 'pickers']}
       />
     </Box>

diff --git a/docs/data/tree-view/rich-tree-view/editing/LabelEditingAllItems.tsx b/docs/data/tree-view/rich-tree-view/editing/LabelEditingAllItems.tsx
@@ -9,7 +9,6 @@ export default function LabelEditingAllItems() {
       <RichTreeView
         items={MUI_X_PRODUCTS}
         isItemEditable
-        experimentalFeatures={{ labelEditing: true }}
         defaultExpandedItems={['grid', 'pickers']}
       />
     </Box>

diff --git a/docs/data/tree-view/rich-tree-view/editing/LabelEditingAllItems.tsx.preview b/docs/data/tree-view/rich-tree-view/editing/LabelEditingAllItems.tsx.preview
@@ -1,6 +1,5 @@
 <RichTreeView
   items={MUI_X_PRODUCTS}
   isItemEditable
-  experimentalFeatures={{ labelEditing: true }}
   defaultExpandedItems={['grid', 'pickers']}
 />
diff --git a/docs/data/tree-view/rich-tree-view/editing/LabelEditingSomeItems.js b/docs/data/tree-view/rich-tree-view/editing/LabelEditingSomeItems.js
@@ -9,7 +9,6 @@ export default function LabelEditingSomeItems() {
       <RichTreeView
         items={MUI_X_PRODUCTS}
         isItemEditable={(item) => Boolean(item?.editable)}
-        experimentalFeatures={{ labelEditing: true }}
         defaultExpandedItems={['grid', 'pickers']}
       />
     </Box>

diff --git a/docs/data/tree-view/rich-tree-view/editing/LabelEditingSomeItems.tsx b/docs/data/tree-view/rich-tree-view/editing/LabelEditingSomeItems.tsx
@@ -9,7 +9,6 @@ export default function LabelEditingSomeItems() {
       <RichTreeView
         items={MUI_X_PRODUCTS}
         isItemEditable={(item) => Boolean(item?.editable)}
-        experimentalFeatures={{ labelEditing: true }}
         defaultExpandedItems={['grid', 'pickers']}
       />
     </Box>

diff --git a/docs/data/tree-view/rich-tree-view/editing/LabelEditingSomeItems.tsx.preview b/docs/data/tree-view/rich-tree-view/editing/LabelEditingSomeItems.tsx.preview
@@ -1,6 +1,5 @@
 <RichTreeView
   items={MUI_X_PRODUCTS}
   isItemEditable={(item) => Boolean(item?.editable)}
-  experimentalFeatures={{ labelEditing: true }}
   defaultExpandedItems={['grid', 'pickers']}
 />
diff --git a/docs/data/tree-view/rich-tree-view/editing/Validation.js b/docs/data/tree-view/rich-tree-view/editing/Validation.js
@@ -100,7 +100,6 @@ export default function Validation() {
         items={MUI_X_PRODUCTS}
         slots={{ item: CustomTreeItem }}
         isItemEditable
-        experimentalFeatures={{ labelEditing: true }}
         defaultExpandedItems={['grid', 'pickers']}
       />
     </Box>

diff --git a/docs/data/tree-view/rich-tree-view/editing/Validation.tsx b/docs/data/tree-view/rich-tree-view/editing/Validation.tsx
@@ -109,7 +109,6 @@ export default function Validation() {
         items={MUI_X_PRODUCTS}
         slots={{ item: CustomTreeItem }}
         isItemEditable
-        experimentalFeatures={{ labelEditing: true }}
         defaultExpandedItems={['grid', 'pickers']}
       />
     </Box>

diff --git a/docs/data/tree-view/rich-tree-view/editing/Validation.tsx.preview b/docs/data/tree-view/rich-tree-view/editing/Validation.tsx.preview
@@ -2,6 +2,5 @@
   items={MUI_X_PRODUCTS}
   slots={{ item: CustomTreeItem }}
   isItemEditable
-  experimentalFeatures={{ labelEditing: true }}
   defaultExpandedItems={['grid', 'pickers']}
 />
diff --git a/docs/data/tree-view/rich-tree-view/ordering/DragAndDrop.js b/docs/data/tree-view/rich-tree-view/ordering/DragAndDrop.js
@@ -40,9 +40,6 @@ export default function DragAndDrop() {
         items={ITEMS}
         itemsReordering
         defaultExpandedItems={['grid', 'pickers']}
-        experimentalFeatures={{
-          itemsReordering: true,
-        }}
       />
     </Box>
   );

diff --git a/docs/data/tree-view/rich-tree-view/ordering/DragAndDrop.tsx b/docs/data/tree-view/rich-tree-view/ordering/DragAndDrop.tsx
@@ -40,9 +40,6 @@ export default function DragAndDrop() {
         items={ITEMS}
         itemsReordering
         defaultExpandedItems={['grid', 'pickers']}
-        experimentalFeatures={{
-          itemsReordering: true,
-        }}
       />
     </Box>
   );

diff --git a/docs/data/tree-view/rich-tree-view/ordering/DragAndDrop.tsx.preview b/docs/data/tree-view/rich-tree-view/ordering/DragAndDrop.tsx.preview
@@ -2,7 +2,4 @@
   items={ITEMS}
   itemsReordering
   defaultExpandedItems={['grid', 'pickers']}
-  experimentalFeatures={{
-    itemsReordering: true,
-  }}
 />
diff --git a/docs/data/tree-view/rich-tree-view/ordering/FileExplorer.js b/docs/data/tree-view/rich-tree-view/ordering/FileExplorer.js
@@ -247,7 +247,6 @@ export default function FileExplorer() {
       defaultExpandedItems={['1', '1.1']}
       sx={{ height: 'fit-content', flexGrow: 1, maxWidth: 400, overflowY: 'auto' }}
       slots={{ item: CustomTreeItem }}
-      experimentalFeatures={{ itemsReordering: true }}
       itemsReordering
       canMoveItemToNewPosition={(params) => {
         return (

diff --git a/docs/data/tree-view/rich-tree-view/ordering/FileExplorer.tsx b/docs/data/tree-view/rich-tree-view/ordering/FileExplorer.tsx
@@ -280,7 +280,6 @@ export default function FileExplorer() {
       defaultExpandedItems={['1', '1.1']}
       sx={{ height: 'fit-content', flexGrow: 1, maxWidth: 400, overflowY: 'auto' }}
       slots={{ item: CustomTreeItem }}
-      experimentalFeatures={{ itemsReordering: true }}
       itemsReordering
       canMoveItemToNewPosition={(params) => {
         return (

diff --git a/docs/data/tree-view/rich-tree-view/ordering/FileExplorer.tsx.preview b/docs/data/tree-view/rich-tree-view/ordering/FileExplorer.tsx.preview
@@ -0,0 +1,16 @@
+<RichTreeViewPro
+  items={ITEMS}
+  apiRef={apiRef}
+  defaultExpandedItems={['1', '1.1']}
+  sx={{ height: 'fit-content', flexGrow: 1, maxWidth: 400, overflowY: 'auto' }}
+  slots={{ item: CustomTreeItem }}
+  itemsReordering
+  canMoveItemToNewPosition={(params) => {
+    return (
+      params.newPosition.parentId === null ||
+      ['folder', 'trash'].includes(
+        apiRef.current!.getItem(params.newPosition.parentId).fileType,
+      )
+    );
+  }}
+/>
diff --git a/docs/data/tree-view/rich-tree-view/ordering/OnItemPositionChange.js b/docs/data/tree-view/rich-tree-view/ordering/OnItemPositionChange.js
@@ -44,9 +44,6 @@ export default function OnItemPositionChange() {
         <RichTreeViewPro
           items={MUI_X_PRODUCTS}
           itemsReordering
-          experimentalFeatures={{
-            itemsReordering: true,
-          }}
           defaultExpandedItems={['grid', 'pickers']}
           onItemPositionChange={(params) => setLastReorder(params)}
         />

diff --git a/docs/data/tree-view/rich-tree-view/ordering/OnItemPositionChange.tsx b/docs/data/tree-view/rich-tree-view/ordering/OnItemPositionChange.tsx
@@ -52,9 +52,6 @@ export default function OnItemPositionChange() {
         <RichTreeViewPro
           items={MUI_X_PRODUCTS}
           itemsReordering
-          experimentalFeatures={{
-            itemsReordering: true,
-          }}
           defaultExpandedItems={['grid', 'pickers']}
           onItemPositionChange={(params) => setLastReorder(params)}
         />

diff --git a/docs/data/tree-view/rich-tree-view/ordering/OnlyReorderFromDragHandle.js b/docs/data/tree-view/rich-tree-view/ordering/OnlyReorderFromDragHandle.js
@@ -104,9 +104,6 @@ export default function OnlyReorderFromDragHandle() {
       <RichTreeViewPro
         items={MUI_X_PRODUCTS}
         defaultExpandedItems={['grid', 'pickers']}
-        experimentalFeatures={{
-          itemsReordering: true,
-        }}
         itemsReordering
         slots={{ item: CustomTreeItem }}
       />

diff --git a/docs/data/tree-view/rich-tree-view/ordering/OnlyReorderFromDragHandle.tsx b/docs/data/tree-view/rich-tree-view/ordering/OnlyReorderFromDragHandle.tsx
@@ -115,9 +115,6 @@ export default function OnlyReorderFromDragHandle() {
       <RichTreeViewPro
         items={MUI_X_PRODUCTS}
         defaultExpandedItems={['grid', 'pickers']}
-        experimentalFeatures={{
-          itemsReordering: true,
-        }}
         itemsReordering
         slots={{ item: CustomTreeItem }}
       />

diff --git a/docs/data/tree-view/rich-tree-view/ordering/OnlyReorderFromDragHandle.tsx.preview b/docs/data/tree-view/rich-tree-view/ordering/OnlyReorderFromDragHandle.tsx.preview
@@ -1,9 +1,6 @@
 <RichTreeViewPro
   items={MUI_X_PRODUCTS}
   defaultExpandedItems={['grid', 'pickers']}
-  experimentalFeatures={{
-    itemsReordering: true,
-  }}
   itemsReordering
   slots={{ item: CustomTreeItem }}
 />
diff --git a/docs/data/tree-view/rich-tree-view/ordering/OnlyReorderInSameParent.js b/docs/data/tree-view/rich-tree-view/ordering/OnlyReorderInSameParent.js
@@ -40,9 +40,6 @@ export default function OnlyReorderInSameParent() {
         items={MUI_X_PRODUCTS}
         itemsReordering
         defaultExpandedItems={['grid', 'pickers']}
-        experimentalFeatures={{
-          itemsReordering: true,
-        }}
         canMoveItemToNewPosition={(params) =>
           params.oldPosition.parentId === params.newPosition.parentId
         }

diff --git a/docs/data/tree-view/rich-tree-view/ordering/OnlyReorderInSameParent.tsx b/docs/data/tree-view/rich-tree-view/ordering/OnlyReorderInSameParent.tsx
@@ -40,9 +40,6 @@ export default function OnlyReorderInSameParent() {
         items={MUI_X_PRODUCTS}
         itemsReordering
         defaultExpandedItems={['grid', 'pickers']}
-        experimentalFeatures={{
-          itemsReordering: true,
-        }}
         canMoveItemToNewPosition={(params) =>
           params.oldPosition.parentId === params.newPosition.parentId
         }

diff --git a/docs/data/tree-view/rich-tree-view/ordering/OnlyReorderInSameParent.tsx.preview b/docs/data/tree-view/rich-tree-view/ordering/OnlyReorderInSameParent.tsx.preview
@@ -2,9 +2,6 @@
   items={MUI_X_PRODUCTS}
   itemsReordering
   defaultExpandedItems={['grid', 'pickers']}
-  experimentalFeatures={{
-    itemsReordering: true,
-  }}
   canMoveItemToNewPosition={(params) =>
     params.oldPosition.parentId === params.newPosition.parentId
   }

diff --git a/docs/data/tree-view/rich-tree-view/ordering/OnlyReorderLeaves.js b/docs/data/tree-view/rich-tree-view/ordering/OnlyReorderLeaves.js
@@ -43,9 +43,6 @@ export default function OnlyReorderLeaves() {
         items={MUI_X_PRODUCTS}
         itemsReordering
         defaultExpandedItems={['grid', 'pickers']}
-        experimentalFeatures={{
-          itemsReordering: true,
-        }}
         apiRef={apiRef}
         isItemReorderable={(itemId) =>
           apiRef.current.getItemOrderedChildrenIds(itemId).length === 0

diff --git a/docs/data/tree-view/rich-tree-view/ordering/OnlyReorderLeaves.tsx b/docs/data/tree-view/rich-tree-view/ordering/OnlyReorderLeaves.tsx
@@ -43,9 +43,6 @@ export default function OnlyReorderLeaves() {
         items={MUI_X_PRODUCTS}
         itemsReordering
         defaultExpandedItems={['grid', 'pickers']}
-        experimentalFeatures={{
-          itemsReordering: true,
-        }}
         apiRef={apiRef}
         isItemReorderable={(itemId) =>
           apiRef.current!.getItemOrderedChildrenIds(itemId).length === 0

diff --git a/docs/data/tree-view/rich-tree-view/ordering/OnlyReorderLeaves.tsx.preview b/docs/data/tree-view/rich-tree-view/ordering/OnlyReorderLeaves.tsx.preview
@@ -2,9 +2,6 @@
   items={MUI_X_PRODUCTS}
   itemsReordering
   defaultExpandedItems={['grid', 'pickers']}
-  experimentalFeatures={{
-    itemsReordering: true,
-  }}
   apiRef={apiRef}
   isItemReorderable={(itemId) =>
     apiRef.current!.getItemOrderedChildrenIds(itemId).length === 0

diff --git a/docs/data/tree-view/rich-tree-view/ordering/SendAllItemsToServer.js b/docs/data/tree-view/rich-tree-view/ordering/SendAllItemsToServer.js
@@ -69,9 +69,6 @@ export default function SendAllItemsToServer() {
           items={MUI_X_PRODUCTS}
           itemsReordering
           defaultExpandedItems={['grid', 'pickers']}
-          experimentalFeatures={{
-            itemsReordering: true,
-          }}
           onItemPositionChange={handleItemPositionChangeTreeViewA}
         />
       </Box>

diff --git a/docs/data/tree-view/rich-tree-view/ordering/SendAllItemsToServer.tsx b/docs/data/tree-view/rich-tree-view/ordering/SendAllItemsToServer.tsx
@@ -69,9 +69,6 @@ export default function SendAllItemsToServer() {
           items={MUI_X_PRODUCTS}
           itemsReordering
           defaultExpandedItems={['grid', 'pickers']}
-          experimentalFeatures={{
-            itemsReordering: true,
-          }}
           onItemPositionChange={handleItemPositionChangeTreeViewA}
         />
       </Box>