From 39f3be401519987c8fe90b3c677beb59538f1785 Mon Sep 17 00:00:00 2001
From: Maccesch <maccesch@synphonyte.com>
Date: Wed, 9 Oct 2024 21:15:17 +0200
Subject: [PATCH] finished porting use_active_element

---
 examples/Cargo.toml                     | 2 +-
 examples/use_active_element/src/main.rs | 6 +++++-
 src/lib.rs                              | 4 ++--
 src/use_active_element.rs               | 9 +++------
 4 files changed, 11 insertions(+), 10 deletions(-)

diff --git a/examples/Cargo.toml b/examples/Cargo.toml
index dc0d6ce..5d3a9b5 100644
--- a/examples/Cargo.toml
+++ b/examples/Cargo.toml
@@ -7,6 +7,7 @@ members = [
     "signal_throttled",
     "sync_signal",
     "use_abs",
+    "use_active_element",
     "use_and",
     "use_breakpoints",
     "use_broadcast_channel",
@@ -68,7 +69,6 @@ members = [
     "watch_debounced",
     "watch_pausable",
     "watch_throttled",
-    # "use_active_element",
     # "use_drop_zone",
     # "use_webtransport",
 ]
diff --git a/examples/use_active_element/src/main.rs b/examples/use_active_element/src/main.rs
index 6a9bb84..dfdefa2 100644
--- a/examples/use_active_element/src/main.rs
+++ b/examples/use_active_element/src/main.rs
@@ -1,4 +1,5 @@
 use leptos::prelude::*;
+use leptos::wasm_bindgen::JsCast;
 use leptos_use::docs::{demo_or_body, Note};
 use leptos_use::use_active_element;
 
@@ -10,7 +11,10 @@ fn Demo() -> impl IntoView {
             "{:?}",
             active_element
                 .get()
-                .map(|el| el.dataset().get("id"))
+                .map(|el| el
+                    .unchecked_ref::<web_sys::HtmlElement>()
+                    .dataset()
+                    .get("id"))
                 .unwrap_or_default()
         )
     };
diff --git a/src/lib.rs b/src/lib.rs
index ff090e5..cd609b6 100644
--- a/src/lib.rs
+++ b/src/lib.rs
@@ -35,7 +35,7 @@ mod signal_throttled;
 #[cfg(feature = "sync_signal")]
 mod sync_signal;
 #[cfg(feature = "use_active_element")]
-// mod use_active_element;
+mod use_active_element;
 #[cfg(feature = "use_breakpoints")]
 mod use_breakpoints;
 #[cfg(feature = "use_broadcast_channel")]
@@ -183,7 +183,7 @@ pub use signal_throttled::*;
 #[cfg(feature = "sync_signal")]
 pub use sync_signal::*;
 #[cfg(feature = "use_active_element")]
-// pub use use_active_element::*;
+pub use use_active_element::*;
 #[cfg(feature = "use_breakpoints")]
 pub use use_breakpoints::*;
 #[cfg(feature = "use_broadcast_channel")]
diff --git a/src/use_active_element.rs b/src/use_active_element.rs
index b0ef1a9..1d284b8 100644
--- a/src/use_active_element.rs
+++ b/src/use_active_element.rs
@@ -2,7 +2,6 @@
 
 use crate::{use_document, use_event_listener_with_options, use_window, UseEventListenerOptions};
 use leptos::ev::{blur, focus};
-use leptos::html::{AnyElement, ToHtmlElement};
 use leptos::reactive::wrappers::read::Signal;
 use leptos::prelude::*;
 
@@ -16,8 +15,7 @@ use leptos::prelude::*;
 ///
 /// ```
 /// # use leptos::prelude::*;
-/// # use leptos::logging::log;
-/// use leptos_use::use_active_element;
+/// # use leptos_use::use_active_element;
 /// #
 /// # #[component]
 /// # fn Demo() -> impl IntoView {
@@ -34,14 +32,13 @@ use leptos::prelude::*;
 /// ## Server-Side Rendering
 ///
 /// On the server this returns a `Signal` that always contains the value `None`.
-pub fn use_active_element() -> Signal<Option<HtmlElement<AnyElement>>> {
+pub fn use_active_element() -> Signal<Option<web_sys::Element>, LocalStorage> {
     let get_active_element = move || {
         use_document()
             .active_element()
-            .map(|el| el.to_leptos_element())
     };
 
-    let (active_element, set_active_element) = signal(get_active_element());
+    let (active_element, set_active_element) = signal_local(get_active_element());
 
     let listener_options = UseEventListenerOptions::default().capture(true);