SlTree: separate expand/collapse and selection behaviour in 'single' …

…mode (#1521)

* Never select tree items when clicking the chevron

This changes the behaviour of sl-tree so that clicking on the expand/collapse icon will not select/deselect the item, only toggle it's expanded state.

* Refactor: inline SlTree.syncTreeItems

This was only called from 2 places, and they each had different
behaviour anyways.

* SlTree: separate expand/collapse from selection

This makes 'multi' and 'single' mode consistent with each other, and
with native file managers.

src/components/tree/tree.component.ts

@@ -168,20 +168,6 @@ export default class SlTree extends ShoelaceElement {
     }
   };
 
-  private syncTreeItems(selectedItem: SlTreeItem) {
-    const items = this.getAllTreeItems();
-
-    if (this.selection === 'multiple') {
-      syncCheckboxes(selectedItem);
-    } else {
-      for (const item of items) {
-        if (item !== selectedItem) {
-          item.selected = false;
-        }
-      }
-    }
-  }
-
   private selectItem(selectedItem: SlTreeItem) {
     const previousSelection = [...this.selectedItems];
 
@@ -190,12 +176,12 @@ export default class SlTree extends ShoelaceElement {
       if (selectedItem.lazy) {
         selectedItem.expanded = true;
       }
-      this.syncTreeItems(selectedItem);
+      syncCheckboxes(selectedItem);
     } else if (this.selection === 'single' || selectedItem.isLeaf) {
-      selectedItem.expanded = !selectedItem.expanded;
-      selectedItem.selected = true;
-
-      this.syncTreeItems(selectedItem);
+      const items = this.getAllTreeItems();
+      for (const item of items) {
+        item.selected = (item === selectedItem);
+      }
     } else if (this.selection === 'leaf') {
       selectedItem.expanded = !selectedItem.expanded;
     }
@@ -311,7 +297,7 @@ export default class SlTree extends ShoelaceElement {
       return;
     }
 
-    if (this.selection === 'multiple' && isExpandButton) {
+    if (isExpandButton) {
       treeItem.expanded = !treeItem.expanded;
     } else {
       this.selectItem(treeItem);