From 1d8cdafcbb5a469f371a14dff893604f732f354a Mon Sep 17 00:00:00 2001
From: Alejandro Celaya <alejandro.celaya@hypothes.is>
Date: Thu, 18 Sep 2025 10:04:45 +0200
Subject: [PATCH] Add optional elementRef prop to TransitionComponents

---
 src/components/transition/Slider.tsx | 13 ++++++++-----
 src/types.ts                         |  3 ++-
 2 files changed, 10 insertions(+), 6 deletions(-)

diff --git a/src/components/transition/Slider.tsx b/src/components/transition/Slider.tsx
index f8d33e9e..cf283e75 100644
--- a/src/components/transition/Slider.tsx
+++ b/src/components/transition/Slider.tsx
@@ -1,15 +1,18 @@
-import { useCallback, useEffect, useRef, useState } from 'preact/hooks';
+import { useCallback, useEffect, useState } from 'preact/hooks';
 
+import { useSyncedRef } from '../../hooks/use-synced-ref';
 import type { TransitionComponent } from '../../types';
+import { downcastRef } from '../../util/typing';
 
 const Slider: TransitionComponent = ({
   children,
   direction = 'in',
   onTransitionEnd,
   delay,
+  elementRef,
 }) => {
   const visible = direction === 'in';
-  const containerRef = useRef<HTMLDivElement | null>(null);
+  const containerRef = useSyncedRef(elementRef);
   const [containerHeight, setContainerHeight] = useState(visible ? 'auto' : 0);
 
   // Whether the content is currently partially or wholly visible. This is
@@ -52,7 +55,7 @@ const Slider: TransitionComponent = ({
 
       setContainerHeight(0);
     }
-  }, [containerHeight, visible]);
+  }, [containerHeight, containerRef, visible]);
 
   const handleTransitionEnd = useCallback(
     (e: TransitionEvent) => {
@@ -72,7 +75,7 @@ const Slider: TransitionComponent = ({
       }
       onTransitionEnd?.(direction);
     },
-    [setContainerHeight, visible, onTransitionEnd, direction],
+    [containerRef, visible, onTransitionEnd, direction],
   );
 
   const isFullyVisible = containerHeight === 'auto';
@@ -84,7 +87,7 @@ const Slider: TransitionComponent = ({
       //
       // @ts-ignore
       ontransitionend={handleTransitionEnd}
-      ref={containerRef}
+      ref={downcastRef(containerRef)}
       style={{
         display: contentVisible ? '' : 'none',
         height: containerHeight,
diff --git a/src/types.ts b/src/types.ts
index 959dbfdb..e23a4f46 100644
--- a/src/types.ts
+++ b/src/types.ts
@@ -57,9 +57,10 @@ export type IconComponent = FunctionComponent<JSX.SVGAttributes<SVGSVGElement>>;
 export type TransitionComponent = FunctionComponent<{
   /** Whether the children should be revealed ("in") or hidden ("out"). */
   direction?: 'in' | 'out';
-
   /** Callback invoked when transition ends. */
   onTransitionEnd?: (direction: 'in' | 'out') => void;
+  /** Ref associated with component's outermost or primary element */
+  elementRef?: Ref<HTMLElement | undefined>;
 
   /**
    * Delay before transitions begin. This corresponds to the `transition-delay`