fix(tree): allow single select only and add indicator (#9405)

**Related Issue:** #7899

## Summary
Allowed only single selection and added the selection indicator

packages/calcite-components/src/components/tree-item/tree-item.tsx

@@ -201,7 +201,10 @@ export class TreeItem implements ConditionalSlotComponent, InteractiveComponent
 
   render(): VNode {
     const rtl = getElementDir(this.el) === "rtl";
-    const showBulletPoint = this.selectionMode === "single" || this.selectionMode === "children";
+    const showBulletPoint =
+      this.selectionMode === "single" ||
+      this.selectionMode === "children" ||
+      this.selectionMode === "single-persist";
     const showCheckmark =
       this.selectionMode === "multiple" || this.selectionMode === "multichildren";
     const showBlank = this.selectionMode === "none" && !this.hasChildren;

packages/calcite-components/src/components/tree/tree.e2e.ts

@@ -1348,5 +1348,36 @@ describe("calcite-tree", () => {
       await directItemClick(page, gc1);
       expect(await tree.getProperty("selectedItems")).toHaveLength(0);
     });
+
+    it("single-persist allows only one selection", async () => {
+      const page = await newE2EPage();
+      await page.setContent(html`
+        <calcite-tree selection-mode="single-persist">
+          <calcite-tree-item id="child1">Child 1</calcite-tree-item>
+          <calcite-tree-item id="sub1">
+            Child 2
+            <calcite-tree slot="children" selection-mode="single-persist">
+              <calcite-tree-item id="gc1">Grandchild 1</calcite-tree-item>
+              <calcite-tree-item>Grandchild 2</calcite-tree-item>
+            </calcite-tree>
+          </calcite-tree-item>
+        </calcite-tree>
+      `);
+      const tree = await page.find("calcite-tree");
+      expect(await tree.getProperty("selectedItems")).toHaveLength(0);
+      const child1 = await page.find("#child1");
+      await directItemClick(page, child1);
+      expect(await tree.getProperty("selectedItems")).toHaveLength(1);
+      await directItemClick(page, child1);
+      expect(await tree.getProperty("selectedItems")).toHaveLength(1);
+      const sub1 = await page.find("#sub1");
+      await directItemClick(page, sub1);
+      expect(await tree.getProperty("selectedItems")).toHaveLength(1);
+      const gc1 = await page.find("#gc1");
+      await directItemClick(page, gc1);
+      expect(await tree.getProperty("selectedItems")).toHaveLength(1);
+      await directItemClick(page, gc1);
+      expect(await tree.getProperty("selectedItems")).toHaveLength(1);
+    });
   });
 });

packages/calcite-components/src/components/tree/tree.stories.ts

@@ -161,7 +161,7 @@ export default {
   },
 };
 
-const selectionModes = ["single", "children", "multichildren", "ancestors", "none", "multiple"];
+const selectionModes = ["single", "single-persist", "children", "multichildren", "ancestors", "none", "multiple"];
 
 export const simple = (): string => html`
   <calcite-tree

packages/calcite-components/src/components/tree/tree.tsx

@@ -175,7 +175,8 @@ export class Tree {
       (((this.selectionMode === "single" || this.selectionMode === "multiple") &&
         childItems.length <= 0) ||
         this.selectionMode === "children" ||
-        this.selectionMode === "multichildren");
+        this.selectionMode === "multichildren" ||
+        (this.selectionMode === "single-persist" && !target.hasChildren));
 
     const shouldUpdateExpand =
       ["multiple", "none", "single", "single-persist"].includes(this.selectionMode) &&

packages/calcite-components/src/demos/tree.html

@@ -95,6 +95,61 @@ <h1 style="margin: 0 auto; text-align: center">Tree</h1>
         </div>
       </div>
 
+      <!-- single-persist select -->
+      <div class="parent">
+        <div class="child right-aligned-text">single persist select</div>
+
+        <div class="child">
+          <calcite-tree lines selection-mode="single-persist" scale="s">
+            <calcite-tree-item> Child 1 </calcite-tree-item>
+
+            <calcite-tree-item>
+              Child 2
+
+              <calcite-tree slot="children" selection-mode="single-persist">
+                <calcite-tree-item> Grandchild 1 </calcite-tree-item>
+
+                <calcite-tree-item> Grandchild 2 </calcite-tree-item>
+
+                <calcite-tree-item>
+                  Grandchild 3
+                  <calcite-tree slot="children" selection-mode="single-persist">
+                    <calcite-tree-item> Great-Grandchild 1 </calcite-tree-item>
+                    <calcite-tree-item> Great-Grandchild 2 </calcite-tree-item>
+                    <calcite-tree-item> Great-Grandchild 3 </calcite-tree-item>
+                  </calcite-tree>
+                </calcite-tree-item>
+              </calcite-tree>
+            </calcite-tree-item>
+          </calcite-tree>
+        </div>
+
+        <div class="child">
+          <calcite-tree lines selection-mode="single-persist" scale="m">
+            <calcite-tree-item> Child 1 </calcite-tree-item>
+
+            <calcite-tree-item>
+              Child 2
+
+              <calcite-tree slot="children" selection-mode="single-persist">
+                <calcite-tree-item> Grandchild 1 </calcite-tree-item>
+
+                <calcite-tree-item> Grandchild 2 </calcite-tree-item>
+
+                <calcite-tree-item>
+                  Grandchild 3
+                  <calcite-tree slot="children" selection-mode="single-persist">
+                    <calcite-tree-item> Great-Grandchild 1 </calcite-tree-item>
+                    <calcite-tree-item> Great-Grandchild 2 </calcite-tree-item>
+                    <calcite-tree-item> Great-Grandchild 3 </calcite-tree-item>
+                  </calcite-tree>
+                </calcite-tree-item>
+              </calcite-tree>
+            </calcite-tree-item>
+          </calcite-tree>
+        </div>
+      </div>
+
       <!-- multiple select -->
       <div class="parent">
         <div class="child right-aligned-text">multiple select</div>