From 2f543b15848b58fa522921a52ccdd080adf7dba0 Mon Sep 17 00:00:00 2001
From: anatolzak <53095479+anatolzak@users.noreply.github.com>
Date: Thu, 22 Feb 2024 17:29:08 +0200
Subject: [PATCH] standardize conditional rendering across components to
 prevent out transition bug during navigation huntabyte#340

---
 .../components/accordion-content.svelte       |  71 ++++++----
 .../menu/components/menu-sub-content.svelte   | 124 +++++++++---------
 2 files changed, 107 insertions(+), 88 deletions(-)

diff --git a/src/lib/bits/accordion/components/accordion-content.svelte b/src/lib/bits/accordion/components/accordion-content.svelte
index 4d714d085..87f4fbf8b 100644
--- a/src/lib/bits/accordion/components/accordion-content.svelte
+++ b/src/lib/bits/accordion/components/accordion-content.svelte
@@ -32,32 +32,49 @@
 	$: Object.assign(builder, attrs);
 </script>
 
-{#if asChild && $isSelected(props)}
-	<slot {builder} />
-{:else if transition && $isSelected(props)}
-	<div bind:this={el} transition:transition={transitionConfig} use:melt={builder} {...$$restProps}>
+{#if $isSelected(props)}
+	{#if asChild}
 		<slot {builder} />
-	</div>
-{:else if inTransition && outTransition && $isSelected(props)}
-	<div
-		bind:this={el}
-		in:inTransition={inTransitionConfig}
-		out:outTransition={outTransitionConfig}
-		use:melt={builder}
-		{...$$restProps}
-	>
-		<slot {builder} />
-	</div>
-{:else if inTransition && $isSelected(props)}
-	<div bind:this={el} in:inTransition={inTransitionConfig} use:melt={builder} {...$$restProps}>
-		<slot {builder} />
-	</div>
-{:else if outTransition && $isSelected(props)}
-	<div bind:this={el} out:outTransition={outTransitionConfig} use:melt={builder} {...$$restProps}>
-		<slot {builder} />
-	</div>
-{:else if $isSelected(props)}
-	<div bind:this={el} use:melt={builder} {...$$restProps}>
-		<slot {builder} />
-	</div>
+	{:else if transition}
+		<div
+			bind:this={el}
+			transition:transition|global={transitionConfig}
+			use:melt={builder}
+			{...$$restProps}
+		>
+			<slot {builder} />
+		</div>
+	{:else if inTransition && outTransition}
+		<div
+			bind:this={el}
+			in:inTransition|global={inTransitionConfig}
+			out:outTransition|global={outTransitionConfig}
+			use:melt={builder}
+			{...$$restProps}
+		>
+			<slot {builder} />
+		</div>
+	{:else if inTransition}
+		<div
+			bind:this={el}
+			in:inTransition|global={inTransitionConfig}
+			use:melt={builder}
+			{...$$restProps}
+		>
+			<slot {builder} />
+		</div>
+	{:else if outTransition}
+		<div
+			bind:this={el}
+			out:outTransition|global={outTransitionConfig}
+			use:melt={builder}
+			{...$$restProps}
+		>
+			<slot {builder} />
+		</div>
+	{:else}
+		<div bind:this={el} use:melt={builder} {...$$restProps}>
+			<slot {builder} />
+		</div>
+	{/if}
 {/if}
diff --git a/src/lib/bits/menu/components/menu-sub-content.svelte b/src/lib/bits/menu/components/menu-sub-content.svelte
index 455318835..67d507b46 100644
--- a/src/lib/bits/menu/components/menu-sub-content.svelte
+++ b/src/lib/bits/menu/components/menu-sub-content.svelte
@@ -63,66 +63,68 @@
 	});
 </script>
 
-{#if asChild && $subOpen}
-	<slot {builder} />
-{:else if transition && $subOpen}
-	<div
-		bind:this={el}
-		transition:transition={transitionConfig}
-		use:melt={builder}
-		{...$$restProps}
-		on:m-focusout={dispatch}
-		on:m-keydown={dispatch}
-		on:m-pointermove={dispatch}
-	>
+{#if $subOpen}
+	{#if asChild}
 		<slot {builder} />
-	</div>
-{:else if inTransition && outTransition && $subOpen}
-	<div
-		bind:this={el}
-		in:inTransition={inTransitionConfig}
-		out:outTransition={outTransitionConfig}
-		use:melt={builder}
-		{...$$restProps}
-		on:m-focusout={dispatch}
-		on:m-keydown={dispatch}
-		on:m-pointermove={dispatch}
-	>
-		<slot {builder} />
-	</div>
-{:else if inTransition && $subOpen}
-	<div
-		bind:this={el}
-		in:inTransition={inTransitionConfig}
-		use:melt={builder}
-		{...$$restProps}
-		on:m-focusout={dispatch}
-		on:m-keydown={dispatch}
-		on:m-pointermove={dispatch}
-	>
-		<slot {builder} />
-	</div>
-{:else if outTransition && $subOpen}
-	<div
-		bind:this={el}
-		out:outTransition={outTransitionConfig}
-		use:melt={builder}
-		{...$$restProps}
-		on:m-focusout={dispatch}
-		on:m-keydown={dispatch}
-		on:m-pointermove={dispatch}
-	>
-		<slot {builder} />
-	</div>
-{:else if $subOpen}
-	<div
-		bind:this={el}
-		use:melt={builder}
-		{...$$restProps}
-		on:m-focusout={dispatch}
-		on:m-keydown={dispatch}
-		on:m-pointermove={dispatch}
-	>
-		<slot {builder} />
-	</div>
+	{:else if transition}
+		<div
+			bind:this={el}
+			transition:transition|global={transitionConfig}
+			use:melt={builder}
+			{...$$restProps}
+			on:m-focusout={dispatch}
+			on:m-keydown={dispatch}
+			on:m-pointermove={dispatch}
+		>
+			<slot {builder} />
+		</div>
+	{:else if inTransition && outTransition}
+		<div
+			bind:this={el}
+			in:inTransition|global={inTransitionConfig}
+			out:outTransition|global={outTransitionConfig}
+			use:melt={builder}
+			{...$$restProps}
+			on:m-focusout={dispatch}
+			on:m-keydown={dispatch}
+			on:m-pointermove={dispatch}
+		>
+			<slot {builder} />
+		</div>
+	{:else if inTransition}
+		<div
+			bind:this={el}
+			in:inTransition|global={inTransitionConfig}
+			use:melt={builder}
+			{...$$restProps}
+			on:m-focusout={dispatch}
+			on:m-keydown={dispatch}
+			on:m-pointermove={dispatch}
+		>
+			<slot {builder} />
+		</div>
+	{:else if outTransition}
+		<div
+			bind:this={el}
+			out:outTransition|global={outTransitionConfig}
+			use:melt={builder}
+			{...$$restProps}
+			on:m-focusout={dispatch}
+			on:m-keydown={dispatch}
+			on:m-pointermove={dispatch}
+		>
+			<slot {builder} />
+		</div>
+	{:else}
+		<div
+			bind:this={el}
+			use:melt={builder}
+			{...$$restProps}
+			on:m-focusout={dispatch}
+			on:m-keydown={dispatch}
+			on:m-pointermove={dispatch}
+		>
+			<slot {builder} />
+		</div>
+	{/if}
 {/if}