@preact/signals-devtools-ui 0.1.0 → 0.1.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@preact/signals-devtools-ui",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "license": "MIT",
   "description": "DevTools UI components for @preact/signals",
   "keywords": [
@@ -57,8 +57,7 @@
     "@preact/signals": "2.6.0"
   },
   "publishConfig": {
-    "access": "public",
-    "provenance": false
+    "provenance": true
   },
   "scripts": {
     "test": "vitest run"

package/src/components/Button.tsx

@@ -1,11 +1,12 @@
 import type { ComponentChildren } from "preact";
 
 interface ButtonProps {
-	onClick: () => void;
+	onClick?: () => void;
 	className?: string;
 	disabled?: boolean;
 	children: ComponentChildren;
 	variant?: "primary" | "secondary";
+	popovertarget?: string;
 	active?: boolean;
 }
 
@@ -15,6 +16,7 @@ export function Button({
 	disabled = false,
 	children,
 	variant = "secondary",
+	popovertarget,
 	active = false,
 }: ButtonProps) {
 	const baseClass = "btn";
@@ -24,7 +26,12 @@ export function Button({
 		`${baseClass} ${variantClass} ${activeClass} ${className}`.trim();
 
 	return (
-		<button onClick={onClick} className={combinedClassName} disabled={disabled}>
+		<button
+			popovertarget={popovertarget}
+			onClick={onClick}
+			className={combinedClassName}
+			disabled={disabled}
+		>
 			{children}
 		</button>
 	);

package/src/components/Header.tsx

@@ -3,9 +3,8 @@ import { Button } from "./Button";
 import { getContext } from "../context";
 
 export function Header() {
-	const { connectionStore, updatesStore, settingsStore } = getContext();
+	const { connectionStore, updatesStore } = getContext();
 
-	const onToggleSettings = settingsStore.toggleSettings;
 	const onTogglePause = () => {
 		updatesStore.isPaused.value = !updatesStore.isPaused.value;
 	};
@@ -30,9 +29,7 @@ export function Header() {
 						{updatesStore.isPaused.value ? "Resume" : "Pause"}
 					</Button>
 				)}
-				{onToggleSettings && (
-					<Button onClick={onToggleSettings}>Settings</Button>
-				)}
+				<Button popovertarget="settings-panel-popover">Settings</Button>
 			</div>
 		</header>
 	);

package/src/components/SettingsPanel.tsx

@@ -2,14 +2,14 @@ import { useSignal, useSignalEffect } from "@preact/signals";
 import { Button } from "./Button";
 import type { Settings } from "@preact/signals-devtools-adapter";
 import { getContext } from "../context";
+import { useRef } from "preact/hooks";
 
 export function SettingsPanel() {
 	const { settingsStore } = getContext();
+	const popover = useRef<HTMLDivElement>(null);
 
-	const onCancel = settingsStore.hideSettings;
 	const onApply = settingsStore.applySettings;
 	const settings = settingsStore.settings;
-	const isVisible = settingsStore.showSettings;
 
 	const localSettings = useSignal<Settings>(settings);
 
@@ -21,12 +21,18 @@ export function SettingsPanel() {
 		onApply(localSettings.value);
 	};
 
-	if (!isVisible) {
-		return null;
-	}
+	const onCancel = () => {
+		// @ts-expect-error
+		popover.current?.hide();
+	};
 
 	return (
-		<div className="settings-panel">
+		<div
+			ref={popover}
+			popover="auto"
+			id="settings-panel-popover"
+			className="settings-panel"
+		>
 			<div className="settings-content">
 				<h3>Debug Configuration</h3>
 

package/src/context.ts

@@ -288,21 +288,11 @@ export function createSettingsStore(adapter: DevToolsAdapter) {
 		filterPatterns: [],
 	});
 
-	const showSettings = signal<boolean>(false);
 	const showDisposedSignals = signal<boolean>(false);
 
 	const applySettings = (newSettings: Settings) => {
 		settings.value = newSettings;
 		adapter.sendConfig(newSettings);
-		showSettings.value = false;
-	};
-
-	const toggleSettings = () => {
-		showSettings.value = !showSettings.value;
-	};
-
-	const hideSettings = () => {
-		showSettings.value = false;
 	};
 
 	const toggleShowDisposedSignals = () => {
@@ -320,9 +310,6 @@ export function createSettingsStore(adapter: DevToolsAdapter) {
 		get settings() {
 			return settings.value;
 		},
-		get showSettings() {
-			return showSettings.value;
-		},
 		get showDisposedSignals() {
 			return showDisposedSignals.value;
 		},
@@ -330,8 +317,6 @@ export function createSettingsStore(adapter: DevToolsAdapter) {
 			settings.value = newSettings;
 		},
 		applySettings,
-		toggleSettings,
-		hideSettings,
 		toggleShowDisposedSignals,
 	};
 }