From aa3017990d252d46852d62a918bcf8eae1c574e7 Mon Sep 17 00:00:00 2001
From: Ryan Gossiaux <ryan.gossiaux@gmail.com>
Date: Mon, 20 Dec 2021 22:55:35 -0800
Subject: [PATCH] Move Transition to <Render>

---
 .../transitions/TransitionChild.svelte        | 26 ++++++++++++++++---
 .../transitions/TransitionChildWrapper.svelte | 17 ++++++++++++
 .../transitions/TransitionRoot.svelte         | 15 +++++++++++
 3 files changed, 55 insertions(+), 3 deletions(-)

diff --git a/src/lib/components/transitions/TransitionChild.svelte b/src/lib/components/transitions/TransitionChild.svelte
index 7cb8cc3..ae42cd8 100644
--- a/src/lib/components/transitions/TransitionChild.svelte
+++ b/src/lib/components/transitions/TransitionChild.svelte
@@ -4,7 +4,6 @@
   import { match } from "$lib/utils/match";
   import { State, useOpenClosedProvider } from "$lib/internal/open-closed";
   import { Reason, transition } from "$lib/utils/transition";
-
   import {
     hasChildren,
     NestingContextValues,
@@ -15,6 +14,20 @@
     useTransitionContext,
   } from "./TransitionRoot.svelte";
   import { useId } from "$lib/hooks/use-id";
+  import { forwardEventsBuilder } from "$lib/internal/forwardEventsBuilder";
+  import { get_current_component } from "svelte/internal";
+  import type { SupportedAs } from "$lib/internal/elements";
+  import type { HTMLActionArray } from "$lib/hooks/use-actions";
+  import Render from "$lib/utils/Render.svelte";
+  const forwardEvents = forwardEventsBuilder(get_current_component(), [
+    "beforeEnter",
+    "beforeLeave",
+    "afterEnter",
+    "afterLeave",
+  ]);
+
+  export let as: SupportedAs = "div";
+  export let use: HTMLActionArray = [];
 
   export let unmount = true;
   export let enter = "";
@@ -166,8 +179,15 @@
     : `${$$props.class || ""} ${entered}`;
 </script>
 
-<div bind:this={container} {...$$restProps} class={classes}>
+<Render
+  {...$$restProps}
+  {as}
+  use={[...use, forwardEvents]}
+  name={"TransitionChild"}
+  bind:el={container}
+  class={classes}
+>
   {#if state === TreeStates.Visible}
     <slot />
   {/if}
-</div>
+</Render>
diff --git a/src/lib/components/transitions/TransitionChildWrapper.svelte b/src/lib/components/transitions/TransitionChildWrapper.svelte
index 7bdc29a..2362140 100644
--- a/src/lib/components/transitions/TransitionChildWrapper.svelte
+++ b/src/lib/components/transitions/TransitionChildWrapper.svelte
@@ -4,6 +4,19 @@
   import TransitionRoot, {
     hasTransitionContext,
   } from "./TransitionRoot.svelte";
+  import { forwardEventsBuilder } from "$lib/internal/forwardEventsBuilder";
+  import { get_current_component } from "svelte/internal";
+  import type { SupportedAs } from "$lib/internal/elements";
+  import type { HTMLActionArray } from "$lib/hooks/use-actions";
+  const forwardEvents = forwardEventsBuilder(get_current_component(), [
+    "beforeEnter",
+    "beforeLeave",
+    "afterEnter",
+    "afterLeave",
+  ]);
+
+  export let as: SupportedAs = "div";
+  export let use: HTMLActionArray = [];
 
   let hasTransition = hasTransitionContext();
   let hasOpen = hasOpenClosed();
@@ -12,6 +25,8 @@
 {#if !hasTransition && hasOpen}
   <TransitionRoot
     {...$$props}
+    {as}
+    use={[...use, forwardEvents]}
     on:afterEnter
     on:afterLeave
     on:beforeEnter
@@ -22,6 +37,8 @@
 {:else}
   <TransitionChild
     {...$$props}
+    {as}
+    use={[...use, forwardEvents]}
     on:afterEnter
     on:afterLeave
     on:beforeEnter
diff --git a/src/lib/components/transitions/TransitionRoot.svelte b/src/lib/components/transitions/TransitionRoot.svelte
index 567a530..823a67e 100644
--- a/src/lib/components/transitions/TransitionRoot.svelte
+++ b/src/lib/components/transitions/TransitionRoot.svelte
@@ -111,6 +111,19 @@
   import { RenderStrategy } from "$lib/utils/Render.svelte";
   import TransitionChild from "./TransitionChild.svelte";
   import type { useId } from "$lib/hooks/use-id";
+  import { forwardEventsBuilder } from "$lib/internal/forwardEventsBuilder";
+  import { get_current_component } from "svelte/internal";
+  import type { SupportedAs } from "$lib/internal/elements";
+  import type { HTMLActionArray } from "$lib/hooks/use-actions";
+  const forwardEvents = forwardEventsBuilder(get_current_component(), [
+    "beforeEnter",
+    "beforeLeave",
+    "afterEnter",
+    "afterLeave",
+  ]);
+
+  export let as: SupportedAs = "div";
+  export let use: HTMLActionArray = [];
 
   export let show: boolean | undefined = undefined;
   export let unmount = true;
@@ -181,6 +194,8 @@
 {#if state === TreeStates.Visible}
   <TransitionChild
     {...$$restProps}
+    {as}
+    use={[...use, forwardEvents]}
     {unmount}
     on:afterEnter
     on:afterLeave