Added active element

packages/runed/src/lib/functions/index.ts

@@ -1,2 +1,3 @@
+export * from "./withActiveElement.svelte.js";
 export * from "./withDebounce.svelte.js";
 export * from "./withElementSize.svelte.js";

packages/runed/src/lib/functions/withActiveElement.svelte.ts

@@ -0,0 +1,21 @@
+import { documentDefined } from "$lib/internal/utils/defined.js";
+
+export function withActiveElement(): { value: Readonly<Element | null> } {
+	const activeElement = $state({ value: documentDefined() ? document.activeElement : null });
+
+	function onFocusChange() {
+		activeElement.value = document.activeElement;
+	}
+
+	$effect(() => {
+		document.addEventListener("focusin", onFocusChange);
+		document.addEventListener("focusout", onFocusChange);
+
+		return () => {
+			document.removeEventListener("focusin", onFocusChange);
+			document.removeEventListener("focusout", onFocusChange);
+		};
+	});
+
+	return activeElement;
+}

packages/runed/src/lib/internal/utils/defined.ts

@@ -0,0 +1,3 @@
+export function documentDefined() {
+	return typeof document !== "undefined";
+}

sites/docs/content/functions/with-active-element.md

@@ -0,0 +1,33 @@
+---
+title: WithActiveElement
+description: A function that returns the currently active element.
+---
+
+<script>
+import { WithActiveElementDemo } from '$lib/components/demos';
+</script>
+
+## Demo
+
+<WithActiveElementDemo />
+
+## Usage
+
+```svelte
+<script lang="ts">
+	import { withActiveElement } from "runed";
+
+	const activeElement = withActiveElement();
+</script>
+
+<div class="rounded-md bg-card p-8">
+	<p>
+		Currently active element:
+		<span class="font-bold">
+			{activeElement.value !== null
+				? activeElement.value.localName
+				: "No active element found"}
+		</span>
+	</p>
+</div>
+```

sites/docs/src/lib/components/demos/index.ts

@@ -1,2 +1,3 @@
+export { default as WithActiveElementDemo } from "./with-active-element.svelte";
 export { default as WithDebounceDemo } from "./with-debounce.svelte";
 export { default as WithElementSizeDemo } from "./with-element-size.svelte";

sites/docs/src/lib/components/demos/with-active-element.svelte

@@ -0,0 +1,14 @@
+<script lang="ts">
+	import { withActiveElement } from "runed";
+
+	const activeElement = withActiveElement();
+</script>
+
+<div class="rounded-md bg-card p-8">
+	<p>
+		Currently active element:
+		<span class="font-bold">
+			{activeElement.value !== null ? activeElement.value.localName : "No active element found"}
+		</span>
+	</p>
+</div>

sites/docs/src/lib/config/navigation.ts

@@ -61,6 +61,11 @@ export const navigation: Navigation = {
 			title: "Functions",
 			collapsible: true,
 			items: [
+				{
+					title: "withActiveElement",
+					href: "/docs/functions/with-active-element",
+					items: [],
+				},
 				{
 					title: "withDebounce",
 					href: "/docs/functions/with-debounce",