From 9fa8dcf8b21a0dea2639047062aacb07c7c56861 Mon Sep 17 00:00:00 2001
From: Mahmoud-zino <Mahmoud.zino@liebherr.com>
Date: Sun, 23 Jul 2023 21:10:46 +0200
Subject: [PATCH] fixed docs duplicate tree reference

---
 .../lib/components/TreeView/TreeView.svelte   | 42 ++++++++-----------
 .../components/tree-views/+page.svelte        |  7 ++--
 2 files changed, 21 insertions(+), 28 deletions(-)

diff --git a/packages/skeleton/src/lib/components/TreeView/TreeView.svelte b/packages/skeleton/src/lib/components/TreeView/TreeView.svelte
index 9e4b2dd98..e3bea0937 100644
--- a/packages/skeleton/src/lib/components/TreeView/TreeView.svelte
+++ b/packages/skeleton/src/lib/components/TreeView/TreeView.svelte
@@ -53,10 +53,10 @@
 	 */
 	export function expandAll(): void {
 		const detailsElements = [...tree.querySelectorAll('details.tree-item')] as HTMLDetailsElement[];
-		detailsElements.forEach((details) => {
-			if (!details.open) {
-				const summary: HTMLElement | null = details.querySelector('summary.tree-item-summary');
-				if (summary) summary.click();
+		detailsElements.forEach(details => {
+			if(!details.open) {
+				const summary : HTMLElement | null = details.querySelector('summary.tree-item-summary');
+				if(summary) summary.click();
 			}
 		});
 	}
@@ -66,10 +66,10 @@
 	 */
 	export function collapseAll() {
 		const detailsElements = [...tree.querySelectorAll('details.tree-item')] as HTMLDetailsElement[];
-		detailsElements.forEach((details) => {
-			if (details.open) {
-				const summary: HTMLElement | null = details.querySelector('summary.tree-item-summary');
-				if (summary) summary.click();
+		detailsElements.forEach(details => {
+			if(details.open) {
+				const summary : HTMLElement | null = details.querySelector('summary.tree-item-summary');
+				if(summary) summary.click();
 			}
 		});
 	}
@@ -79,10 +79,10 @@
 	 */
 	export function selectAll() {
 		const detailsElements = [...tree.querySelectorAll('details.tree-item')] as HTMLDetailsElement[];
-		detailsElements.forEach((details) => {
-			const input: HTMLInputElement | null = details.querySelector('input[type="checkbox"].tree-item-checkbox');
-			if (!input) return;
-			if (!input.checked) {
+		detailsElements.forEach(details => {
+			const input : HTMLInputElement | null = details.querySelector('input[type="checkbox"].tree-item-checkbox');
+			if(!input) return;
+			if(!input.checked) {
 				// needs delay
 				setTimeout(() => {
 					input.click();
@@ -96,10 +96,10 @@
 	 */
 	export function deselectAll() {
 		const detailsElements = [...tree.querySelectorAll('details.tree-item')] as HTMLDetailsElement[];
-		detailsElements.forEach((details) => {
-			const input: HTMLInputElement | null = details.querySelector('input[type="checkbox"].tree-item-checkbox');
-			if (!input) return;
-			if (input.checked) {
+		detailsElements.forEach(details => {
+			const input : HTMLInputElement | null = details.querySelector('input[type="checkbox"].tree-item-checkbox');
+			if(!input) return;
+			if(input.checked){
 				// needs delay
 				setTimeout(() => {
 					input.click();
@@ -130,14 +130,6 @@
 	let tree: HTMLDivElement;
 </script>
 
-<div
-	bind:this={tree}
-	class="tree {classesBase}"
-	data-testid="tree"
-	role="tree"
-	aria-multiselectable="true"
-	aria-label={labelledby}
-	aria-disabled={disabled}
->
+<div bind:this={tree} class="tree {classesBase}" data-testid="tree" role="tree" aria-multiselectable="true" aria-label={labelledby} aria-disabled={disabled}>
 	<slot />
 </div>
diff --git a/sites/skeleton.dev/src/routes/(inner)/components/tree-views/+page.svelte b/sites/skeleton.dev/src/routes/(inner)/components/tree-views/+page.svelte
index bf715e38d..53c8e1524 100644
--- a/sites/skeleton.dev/src/routes/(inner)/components/tree-views/+page.svelte
+++ b/sites/skeleton.dev/src/routes/(inner)/components/tree-views/+page.svelte
@@ -42,6 +42,7 @@
 	let childrenMultiple: TreeViewItem[] = [];
 
 	let expandTree: TreeView;
+	let selectTree: TreeView;
 
 	let selectMultiple: string[] = [];
 </script>
@@ -677,7 +678,7 @@ tree.collapseAll();
 			<p>Note: These functions are excecuted only in <code class="code">multiple</code> selection mode.</p>
 			<DocsPreview background="neutral" regionFooter="flex justify-center gap-4">
 				<svelte:fragment slot="preview">
-					<TreeView selection multiple bind:this={expandTree}>
+					<TreeView selection multiple bind:this={selectTree}>
 						<TreeViewItem bind:group={selectMultiple} name="s_medium" value="books">
 							<svelte:fragment slot="lead">
 								<i class="fa-solid fa-book-skull" />
@@ -699,8 +700,8 @@ tree.collapseAll();
 					</TreeView>
 				</svelte:fragment>
 				<svelte:fragment slot="footer">
-					<button class="btn variant-filled-primary" on:click={expandTree.selectAll}> Select all </button>
-					<button class="btn variant-filled-secondary" on:click={expandTree.deselectAll}> Deselect all </button>
+					<button class="btn variant-filled-primary" on:click={selectTree.selectAll}> Select all </button>
+					<button class="btn variant-filled-secondary" on:click={selectTree.deselectAll}> Deselect all </button>
 				</svelte:fragment>
 				<svelte:fragment slot="source">
 					<CodeBlock