diff --git a/src/components/tree-item/tree-item.tsx b/src/components/tree-item/tree-item.tsx
index a1c44856f19..9acf74ab8f1 100644
--- a/src/components/tree-item/tree-item.tsx
+++ b/src/components/tree-item/tree-item.tsx
@@ -118,9 +118,9 @@ export class TreeItem implements ConditionalSlotComponent, InteractiveComponent
   @Watch("selectionMode")
   getselectionMode(): void {
     this.isSelectionMultiLike =
-      this.selectionMode === TreeSelectionMode.Multiple ||
-      this.selectionMode === TreeSelectionMode.Multi ||
-      this.selectionMode === TreeSelectionMode.MultiChildren;
+      this.selectionMode === "multiple" ||
+      this.selectionMode === "multi" ||
+      this.selectionMode === "multichildren";
   }
 
   //--------------------------------------------------------------------------
@@ -185,14 +185,12 @@ export class TreeItem implements ConditionalSlotComponent, InteractiveComponent
 
   render(): VNode {
     const rtl = getElementDir(this.el) === "rtl";
-    const showBulletPoint =
-      this.selectionMode === TreeSelectionMode.Single ||
-      this.selectionMode === TreeSelectionMode.Children;
+    const showBulletPoint = this.selectionMode === "single" || this.selectionMode === "children";
     const showCheckmark =
-      this.selectionMode === TreeSelectionMode.Multi ||
-      this.selectionMode === TreeSelectionMode.Multiple ||
-      this.selectionMode === TreeSelectionMode.MultiChildren;
-    const showBlank = this.selectionMode === TreeSelectionMode.None && !this.hasChildren;
+      this.selectionMode === "multi" ||
+      this.selectionMode === "multiple" ||
+      this.selectionMode === "multichildren";
+    const showBlank = this.selectionMode === "none" && !this.hasChildren;
     const chevron = this.hasChildren ? (
       <calcite-icon
         class={{
@@ -207,7 +205,7 @@ export class TreeItem implements ConditionalSlotComponent, InteractiveComponent
     ) : null;
     const defaultSlotNode: VNode = <slot key="default-slot" />;
     const checkbox =
-      this.selectionMode === TreeSelectionMode.Ancestors ? (
+      this.selectionMode === "ancestors" ? (
         <label class={CSS.checkboxLabel} key="checkbox-label">
           <calcite-checkbox
             checked={this.selected}
@@ -293,8 +291,7 @@ export class TreeItem implements ConditionalSlotComponent, InteractiveComponent
       window.open(link.href, target);
     }
     this.calciteInternalTreeItemSelect.emit({
-      modifyCurrentSelection:
-        this.selectionMode === TreeSelectionMode.Ancestors || this.isSelectionMultiLike,
+      modifyCurrentSelection: this.selectionMode === "ancestors" || this.isSelectionMultiLike,
       forceToggle: false
     });
   }
@@ -406,7 +403,7 @@ export class TreeItem implements ConditionalSlotComponent, InteractiveComponent
   };
 
   private updateAncestorTree = (): void => {
-    if (this.selected && this.selectionMode === TreeSelectionMode.Ancestors) {
+    if (this.selected && this.selectionMode === "ancestors") {
       const ancestors: HTMLCalciteTreeItemElement[] = [];
       let parent = this.parentTreeItem;
       while (parent) {
diff --git a/src/components/tree/interfaces.ts b/src/components/tree/interfaces.ts
index d0b6240b628..593b0386e3d 100644
--- a/src/components/tree/interfaces.ts
+++ b/src/components/tree/interfaces.ts
@@ -2,12 +2,4 @@ export interface TreeSelectDetail {
   selected: HTMLCalciteTreeItemElement[];
 }
 
-export enum TreeSelectionMode {
-  Single = "single",
-  Multi = "multi",
-  None = "none",
-  Children = "children",
-  MultiChildren = "multichildren",
-  Ancestors = "ancestors",
-  Multiple = "multiple"
-}
+export type TreeSelectionMode = "single" | "multi" | "none" | "children" | "multichildren" | "ancestors" | "multiple";
diff --git a/src/components/tree/tree.e2e.ts b/src/components/tree/tree.e2e.ts
index 64b5f0cf7f0..e0075966546 100644
--- a/src/components/tree/tree.e2e.ts
+++ b/src/components/tree/tree.e2e.ts
@@ -3,7 +3,6 @@ import { accessible, defaults, hidden, renders } from "../../tests/commonTests";
 import { GlobalTestProps } from "../../tests/utils";
 import { html } from "../../../support/formatting";
 import { CSS } from "../tree-item/resources";
-import { TreeSelectionMode } from "./interfaces";
 import SpyInstance = jest.SpyInstance;
 
 describe("calcite-tree", () => {
@@ -25,7 +24,7 @@ describe("calcite-tree", () => {
       },
       {
         propertyName: "selectionMode",
-        defaultValue: TreeSelectionMode.Single
+        defaultValue: "single"
       }
     ]));
 
@@ -395,11 +394,11 @@ describe("calcite-tree", () => {
       expect(selectEventSpy).toHaveReceivedEventTimes(2);
     });
 
-    describe(`when tree-item selection-mode is ${TreeSelectionMode.Ancestors}`, () => {
+    describe(`when tree-item selection-mode is "ancestors"`, () => {
       it("should render checkbox inputs", async () => {
         const page = await newE2EPage({
           html: `
-          <calcite-tree selection-mode=${TreeSelectionMode.Ancestors}>
+          <calcite-tree selection-mode="ancestors">
             <calcite-tree-item>1</calcite-tree-item>
             <calcite-tree-item>2</calcite-tree-item>
           </calcite-tree>
@@ -412,11 +411,11 @@ describe("calcite-tree", () => {
       });
     });
 
-    describe(`when tree-item selection-mode is ${TreeSelectionMode.None}`, () => {
+    describe(`when tree-item selection-mode is "none"`, () => {
       it("allows selecting items without a selection", async () => {
         const page = await newE2EPage();
         await page.setContent(html`
-          <calcite-tree selection-mode=${TreeSelectionMode.None}>
+          <calcite-tree selection-mode="none">
             <calcite-tree-item id="1">1</calcite-tree-item>
             <calcite-tree-item id="2">2</calcite-tree-item>
           </calcite-tree>
diff --git a/src/components/tree/tree.tsx b/src/components/tree/tree.tsx
index 8ff4b7b8ccc..79895767eeb 100644
--- a/src/components/tree/tree.tsx
+++ b/src/components/tree/tree.tsx
@@ -62,8 +62,7 @@ export class Tree {
    * @default "single"
    * @see [TreeSelectionMode](https://github.com/Esri/calcite-components/blob/master/src/components/tree/interfaces.ts#L5)
    */
-  @Prop({ mutable: true, reflect: true }) selectionMode: TreeSelectionMode =
-    TreeSelectionMode.Single;
+  @Prop({ mutable: true, reflect: true }) selectionMode: TreeSelectionMode = "single";
 
   //--------------------------------------------------------------------------
   //
@@ -86,9 +85,9 @@ export class Tree {
           this.child
             ? undefined
             : (
-                this.selectionMode === TreeSelectionMode.Multi ||
-                this.selectionMode === TreeSelectionMode.Multiple ||
-                this.selectionMode === TreeSelectionMode.MultiChildren
+                this.selectionMode === "multi" ||
+                this.selectionMode === "multiple" ||
+                this.selectionMode === "multichildren"
               ).toString()
         }
         role={!this.child ? "tree" : undefined}
@@ -150,43 +149,40 @@ export class Tree {
       event.stopPropagation();
     }
 
-    if (this.selectionMode === TreeSelectionMode.Ancestors && !this.child) {
+    if (this.selectionMode === "ancestors" && !this.child) {
       this.updateAncestorTree(event);
       return;
     }
 
-    const isNoneSelectionMode = this.selectionMode === TreeSelectionMode.None;
+    const isNoneSelectionMode = this.selectionMode === "none";
 
     const shouldSelect =
       this.selectionMode !== null &&
       (!target.hasChildren ||
         (target.hasChildren &&
-          (this.selectionMode === TreeSelectionMode.Children ||
-            this.selectionMode === TreeSelectionMode.MultiChildren)));
+          (this.selectionMode === "children" || this.selectionMode === "multichildren")));
 
     const shouldModifyToCurrentSelection =
       !isNoneSelectionMode &&
       event.detail.modifyCurrentSelection &&
-      (this.selectionMode === TreeSelectionMode.Multi ||
-        this.selectionMode === TreeSelectionMode.Multiple ||
-        this.selectionMode === TreeSelectionMode.MultiChildren);
+      (this.selectionMode === "multi" ||
+        this.selectionMode === "multiple" ||
+        this.selectionMode === "multichildren");
 
     const shouldSelectChildren =
-      this.selectionMode === TreeSelectionMode.MultiChildren ||
-      this.selectionMode === TreeSelectionMode.Children;
+      this.selectionMode === "multichildren" || this.selectionMode === "children";
 
     const shouldClearCurrentSelection =
       !shouldModifyToCurrentSelection &&
-      (((this.selectionMode === TreeSelectionMode.Single ||
-        this.selectionMode === TreeSelectionMode.Multi ||
-        this.selectionMode === TreeSelectionMode.Multiple) &&
+      (((this.selectionMode === "single" ||
+        this.selectionMode === "multi" ||
+        this.selectionMode === "multiple") &&
         childItems.length <= 0) ||
-        this.selectionMode === TreeSelectionMode.Children ||
-        this.selectionMode === TreeSelectionMode.MultiChildren);
+        this.selectionMode === "children" ||
+        this.selectionMode === "multichildren");
 
     const shouldExpandTarget =
-      this.selectionMode === TreeSelectionMode.Children ||
-      this.selectionMode === TreeSelectionMode.MultiChildren;
+      this.selectionMode === "children" || this.selectionMode === "multichildren";
 
     if (!this.child) {
       const targetItems: HTMLCalciteTreeItemElement[] = [];