Add test and fine tune behaviors

mui · Apr 24, 2024 · 59c5454 · 59c5454
1 parent f816031
commit 59c5454
Show file tree

Hide file tree

Showing 10 changed files with 392 additions and 21 deletions.
diff --git a/packages/x-tree-view/src/TreeItem/TreeItemContent.tsx b/packages/x-tree-view/src/TreeItem/TreeItemContent.tsx
@@ -131,7 +131,7 @@ const TreeItemContent = React.forwardRef(function TreeItemContent(
           className={classes.checkbox}
           checked={selected}
           onChange={handleCheckboxSelection}
-          disabled={disableSelection}
+          disabled={disabled || disableSelection}
           ref={checkboxRef}
           tabIndex={-1}
         />

diff --git a/packages/x-tree-view/src/TreeItem/useTreeItemState.ts b/packages/x-tree-view/src/TreeItem/useTreeItemState.ts
@@ -44,17 +44,21 @@ export function useTreeItemState(itemId: string) {
           instance.selectItem(event, itemId, true);
         }
       } else {
-        instance.selectItem(event, itemId);
+        instance.selectItem(event, itemId, false);
       }
     }
   };
 
-  const handleCheckboxSelection = (event: React.ChangeEvent) => {
+  const handleCheckboxSelection = (event: React.ChangeEvent<HTMLInputElement>) => {
+    if (disableSelection || disabled) {
+      return;
+    }
+
     const hasShift = (event.nativeEvent as PointerEvent).shiftKey;
     if (multiSelect && hasShift) {
       instance.expandSelectionRange(event, itemId);
     } else {
-      instance.selectItem(event, itemId, multiSelect);
+      instance.selectItem(event, itemId, multiSelect, event.target.checked);
     }
   };
 

diff --git a/packages/x-tree-view/src/hooks/useTreeItem2Utils/useTreeItem2Utils.tsx b/packages/x-tree-view/src/hooks/useTreeItem2Utils/useTreeItem2Utils.tsx
@@ -6,7 +6,7 @@ import type { UseTreeItem2Status } from '../../useTreeItem2';
 interface UseTreeItem2Interactions {
   handleExpansion: (event: React.MouseEvent) => void;
   handleSelection: (event: React.MouseEvent) => void;
-  handleCheckboxSelection: (event: React.ChangeEvent) => void;
+  handleCheckboxSelection: (event: React.ChangeEvent<HTMLInputElement>) => void;
 }
 
 interface UseTreeItem2UtilsReturnValue {
@@ -69,16 +69,16 @@ export const useTreeItem2Utils = ({
         instance.selectItem(event, itemId, true);
       }
     } else {
-      instance.selectItem(event, itemId);
+      instance.selectItem(event, itemId, false);
     }
   };
 
-  const handleCheckboxSelection = (event: React.ChangeEvent) => {
+  const handleCheckboxSelection = (event: React.ChangeEvent<HTMLInputElement>) => {
     const hasShift = (event.nativeEvent as PointerEvent).shiftKey;
     if (multiSelect && hasShift) {
       instance.expandSelectionRange(event, itemId);
     } else {
-      instance.selectItem(event, itemId, multiSelect);
+      instance.selectItem(event, itemId, multiSelect, event.target.checked);
     }
   };
 

diff --git a/...view/src/internals/plugins/useTreeViewKeyboardNavigation/useTreeViewKeyboardNavigation.ts b/...view/src/internals/plugins/useTreeViewKeyboardNavigation/useTreeViewKeyboardNavigation.ts
@@ -109,7 +109,7 @@ export const useTreeViewKeyboardNavigation: TreeViewPlugin<
         } else if (params.multiSelect) {
           instance.selectItem(event, itemId, true);
         } else {
-          instance.selectItem(event, itemId);
+          instance.selectItem(event, itemId, false);
         }
         break;
       }
@@ -125,7 +125,7 @@ export const useTreeViewKeyboardNavigation: TreeViewPlugin<
             event.preventDefault();
             instance.selectItem(event, itemId, true);
           } else if (!instance.isItemSelected(itemId)) {
-            instance.selectItem(event, itemId);
+            instance.selectItem(event, itemId, false);
             event.preventDefault();
           }
         }