Add use escape key down

packages/primitives/leptos/use-escape-keydown/Cargo.toml

@@ -0,0 +1,12 @@
+[package]
+name = "radix-leptos-use-escape-keydown"
+description = "Leptos port of Radix Use Escape Key Down."
+
+authors.workspace = true
+edition.workspace = true
+license.workspace = true
+repository.workspace = true
+version.workspace = true
+
+[dependencies]
+leptos.workspace = true

packages/primitives/leptos/use-escape-keydown/README.md

@@ -0,0 +1,13 @@
+<p align="center">
+    <a href="../../../../logo.svg" alt="Rust Radix logo">
+        <img src="../../../../logo.svg" width="300" height="200">
+    </a>
+</p>
+
+<h1 align="center">radix-leptos-use-keyboard-keydown</h1>
+
+This is an internal utility, not intended for public usage.
+
+## Rust Radix
+
+[Rust Radix](https://github.com/RustForWeb/radix) is a Rust port of [Radix](https://www.radix-ui.com/primitives).

packages/primitives/leptos/use-escape-keydown/src/lib.rs

@@ -0,0 +1,9 @@
+//! Leptos port of [Radix Use Escape Key Down](https://www.radix-ui.com/primitives).
+//!
+//! This is an internal utility, not intended for public usage.
+//!
+//! See [`@radix-ui/react-use-escape-keydown`](https://www.npmjs.com/package/@radix-ui/react-use-escpae-keydown) for the original package.
+
+mod use_escape_keydown;
+
+pub use use_escape_keydown::*;

packages/primitives/leptos/use-escape-keydown/src/use_escape_keydown.rs

@@ -0,0 +1,53 @@
+use std::rc::Rc;
+
+use leptos::{
+    create_effect, document,
+    ev::KeyboardEvent,
+    on_cleanup,
+    web_sys::{
+        wasm_bindgen::{closure::Closure, JsCast},
+        AddEventListenerOptions, Document,
+    },
+    Callable, Callback, StoredValue,
+};
+
+/// Listens for when the escape key is down.
+pub fn use_escape_keydown(
+    on_escape_key_down: Option<Callback<KeyboardEvent>>,
+    owner_document: Option<Document>,
+) {
+    let owner_document = StoredValue::new(owner_document.unwrap_or(document()));
+
+    let handle_key_down: Rc<Closure<dyn Fn(KeyboardEvent)>> =
+        Rc::new(Closure::new(move |event: KeyboardEvent| {
+            if event.key() == "Escape" {
+                if let Some(on_escape_key_down) = on_escape_key_down {
+                    on_escape_key_down.call(event);
+                }
+            }
+        }));
+    let cleanup_handle_key_down = handle_key_down.clone();
+
+    create_effect(move |_| {
+        owner_document
+            .get_value()
+            .add_event_listener_with_callback_and_add_event_listener_options(
+                "keydown",
+                (*handle_key_down).as_ref().unchecked_ref(),
+                AddEventListenerOptions::new().capture(true),
+            )
+            .expect("Key down event listener should be added.");
+    });
+
+    on_cleanup(move || {
+        // TODO: change to options once web_sys supports it
+        owner_document
+            .get_value()
+            .remove_event_listener_with_callback_and_bool(
+                "keydown",
+                (*cleanup_handle_key_down).as_ref().unchecked_ref(),
+                true,
+            )
+            .expect("Key down event listener should be removed.");
+    });
+}