From a517cb3741970d1d151b4cbe4c3b98d9b3b494df Mon Sep 17 00:00:00 2001
From: Jose Carcamo <jcarcamo@esri.com>
Date: Thu, 23 May 2024 11:58:48 -0700
Subject: [PATCH 1/4] fix(tree): allow single select only and add indicator

---
 .../src/components/tree-item/tree-item.tsx    |  5 +-
 .../src/components/tree/tree.tsx              |  3 +-
 .../calcite-components/src/demos/tree.html    | 55 +++++++++++++++++++
 3 files changed, 61 insertions(+), 2 deletions(-)

diff --git a/packages/calcite-components/src/components/tree-item/tree-item.tsx b/packages/calcite-components/src/components/tree-item/tree-item.tsx
index 1c7e2fa8753..c5284322ef8 100644
--- a/packages/calcite-components/src/components/tree-item/tree-item.tsx
+++ b/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;
diff --git a/packages/calcite-components/src/components/tree/tree.tsx b/packages/calcite-components/src/components/tree/tree.tsx
index 29d7773aeaa..4784160e894 100644
--- a/packages/calcite-components/src/components/tree/tree.tsx
+++ b/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");
 
     const shouldUpdateExpand =
       ["multiple", "none", "single", "single-persist"].includes(this.selectionMode) &&
diff --git a/packages/calcite-components/src/demos/tree.html b/packages/calcite-components/src/demos/tree.html
index 7af2b25dd65..6f6c9984966 100644
--- a/packages/calcite-components/src/demos/tree.html
+++ b/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>

From 89cf8ed97254e77d8794723fa8726418d3f2e9e1 Mon Sep 17 00:00:00 2001
From: Jose Carcamo <jcarcamo@esri.com>
Date: Thu, 23 May 2024 12:12:27 -0700
Subject: [PATCH 2/4] Added e2e for single persist

---
 .../src/components/tree/tree.e2e.ts           | 31 +++++++++++++++++++
 1 file changed, 31 insertions(+)

diff --git a/packages/calcite-components/src/components/tree/tree.e2e.ts b/packages/calcite-components/src/components/tree/tree.e2e.ts
index 6d90c958c5b..d35e260ee06 100644
--- a/packages/calcite-components/src/components/tree/tree.e2e.ts
+++ b/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);
+    });
   });
 });

From fc5ad9ec052fcdf3da9e35be8ead7a4753a03c1a Mon Sep 17 00:00:00 2001
From: Jose Carcamo <jcarcamo@esri.com>
Date: Thu, 23 May 2024 14:45:14 -0700
Subject: [PATCH 3/4] Fixed selection clearing

---
 packages/calcite-components/src/components/tree/tree.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/calcite-components/src/components/tree/tree.tsx b/packages/calcite-components/src/components/tree/tree.tsx
index 4784160e894..530cac5fda6 100644
--- a/packages/calcite-components/src/components/tree/tree.tsx
+++ b/packages/calcite-components/src/components/tree/tree.tsx
@@ -176,7 +176,7 @@ export class Tree {
         childItems.length <= 0) ||
         this.selectionMode === "children" ||
         this.selectionMode === "multichildren" ||
-        this.selectionMode === "single-persist");
+        (this.selectionMode === "single-persist" && !target.hasChildren));
 
     const shouldUpdateExpand =
       ["multiple", "none", "single", "single-persist"].includes(this.selectionMode) &&

From 40d7f6faa79eab69b8670bbbf789a0fe55ecf444 Mon Sep 17 00:00:00 2001
From: Jose Carcamo <jcarcamo@esri.com>
Date: Thu, 23 May 2024 15:04:58 -0700
Subject: [PATCH 4/4] Added single-persist story

---
 packages/calcite-components/src/components/tree/tree.stories.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/calcite-components/src/components/tree/tree.stories.ts b/packages/calcite-components/src/components/tree/tree.stories.ts
index 9c68f9e4cea..487bf5842f0 100644
--- a/packages/calcite-components/src/components/tree/tree.stories.ts
+++ b/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