@torpor/ui 0.2.0 → 0.3.0

package/src/NavMenu/NavMenuPopoutButton.torp

@@ -1,4 +1,3 @@
-
 import {
 	NavMenuContextName,
 	NavMenuPopoutContextName,
@@ -6,17 +5,23 @@ import {
 	type NavMenuPopoutContext,
 } from "./NavMenuTypes";
 
+interface NavMenuPopoutButtonProps {
+	/** An ID for the root element */
+	id?: string;
+	/** Class name(s) for the root element */
+	class?: string,
+	/** The delay before showing the popout, in milliseconds */
+	hoverDelay?: number,
+	/** Whether this button is disabled */
+	disabled?: boolean,
+}
+
 /**
  * A button that is placed in a NavMenu and signals a response by a user.
  *
- * @prop {number} hoverDelay -- The delay before showing the popout, in milliseconds
- * @prop {boolean} disabled -- Whether this button is disabled
  */
-export default function NavMenuPopoutButton($props: any) {
-	$props.hoverDelay ??= 500;
-
-	/** Set when the item is disabled */
-	let dataDisabled = $props.disabled || undefined;
+export default function NavMenuPopoutButton($props: NavMenuPopoutButtonProps | undefined) {
+	let defaultHoverDelay = 500;
 
 	let button: HTMLButtonElement;
 	let interval: NodeJS.Timeout | undefined;
@@ -66,16 +71,16 @@ export default function NavMenuPopoutButton($props: any) {
 	}
 
 	function handleMouseEnter() {
-		if ($props.disabled) return;
+		if ($props?.disabled) return;
 
 		// Handle the hover after a delay
 		if (!interval) {
-			interval = setTimeout(() => $state.visible = true, $props.hoverDelay);
+			interval = setTimeout(() => $state.visible = true, $props?.hoverDelay ?? defaultHoverDelay);
 		}
 	}
 
 	function handleMouseLeave() {
-		if ($props.disabled) return;
+		if ($props?.disabled) return;
 
 		// Prevent short hovers or touches from firing the event
 		if (interval) {
@@ -85,26 +90,26 @@ export default function NavMenuPopoutButton($props: any) {
 	}
 
 	function handleMouseMove() {
-		if ($props.disabled) return;
+		if ($props?.disabled) return;
 
 		// Reset the interval on mouse move
 		if (interval) {
 			clearTimeout(interval);
-			interval = setTimeout(() => $state.visible = true, $props.hoverDelay);
+			interval = setTimeout(() => $state.visible = true, $props?.hoverDelay ?? defaultHoverDelay);
 		}
 	}
 
 	@render {
 		<button
-			{$props.id}
-			class={`torp-nav-menu-popout-button ${$props.class ?? ""}`.trim()}
+			{$props?.id}
+			class={`torp-nav-menu-popout-button ${$props?.class ?? ""}`.trim()}
 			type="button"
-			{$props.disabled}
+			{$props?.disabled}
 			role="menuitem"
 			aria-haspopup="true"
 			aria-expanded={$state.visible.toString()}
-			aria-disabled={$props.disabled ? "true" : undefined}
-			data-disabled={dataDisabled}
+			aria-disabled={$props?.disabled ? "true" : undefined}
+			data-disabled={$props?.disabled ? "true" : undefined}
 			onkeydown={handlePopoutKey}
 			onclick={handleClick}
 			onfocus={() => handleItemFocus(index)}

package/src/NavMenu/NavMenuPopoutContent.torp

@@ -3,16 +3,22 @@ import getScrollParent from "../utils/getScrollParent";
 import setPopoverPosition from "../utils/setPopoverPosition";
 import { NavMenuPopoutContextName, type NavMenuPopoutContext } from "./NavMenuTypes";
 
+interface NavMenuPopoutContentProps {
+	/** An ID for the root element */
+	id?: string;
+	/** Class name(s) for the root element */
+	class?: string,
+	/** Where the popout will be shown, relative to the popout button */
+	side?: "top" | "right" | "bottom" | "left",
+	/** How the popout will be aligned, relative to the popout button */
+	alignment?: "start" | "center" | "end",
+}
+
 /**
  * The content that is displayed for a NavMenuPopout when it is open.
  *
- * @prop {"top" | "right" | "bottom" | "left"} side -- Where the popout will be shown, relative to the popout button
- * @prop {"start" | "center" | "end"} alignment -- How the popout will be aligned, relative to the popout button
  */
-export default function NavMenuPopoutContent($props: any) {
-	$props.side ??= "bottom";
-	$props.alignment ??= "start";
-
+export default function NavMenuPopoutContent($props: NavMenuPopoutContentProps | undefined) {
 	let div: HTMLDivElement;
 	let shown = false;
 
@@ -34,7 +40,8 @@ export default function NavMenuPopoutContent($props: any) {
 
 		// Set the position and listen for window resize and scroll to reset the position
 		setPosition();
-		const scrollParent = getScrollParent(context.anchorElement)
+		const anchorElement = context.anchorElement!
+		const scrollParent = getScrollParent(anchorElement)
 		scrollParent.addEventListener("resize", setPosition);
 		scrollParent.addEventListener("scroll", setPosition);
 		if (context.focusFirstElement) {
@@ -46,11 +53,12 @@ export default function NavMenuPopoutContent($props: any) {
 		if (!shown) return;
 
 		// Stop listening for window resize and focus the anchor element per WAI guidelines
-		const scrollParent = getScrollParent(context.anchorElement)
+		const anchorElement = context.anchorElement!
+		const scrollParent = getScrollParent(anchorElement)
 		scrollParent.removeEventListener("resize", setPosition);
 		scrollParent.removeEventListener("scroll", setPosition);
-		if (context.anchorElement?.focus) {
-			context.anchorElement.focus();
+		if (anchorElement.focus) {
+			anchorElement.focus();
 		}
 	}
 
@@ -60,15 +68,17 @@ export default function NavMenuPopoutContent($props: any) {
 		}
 
 		if (div) {
-			setPopoverPosition(context.anchorElement, div, $props.side, $props.alignment);
+			let side = $props?.side ?? "bottom";
+			let alignment = $props?.alignment ?? "start";
+			setPopoverPosition(context.anchorElement, div, side, alignment);
 		}
 	}
 
 	@render {
 		@if ($state.visible) {
 			<div
-				{$props.id}
-				class={`torp-nav-menu-popout-content ${$props.class ?? ""}`.trim()}
+				{$props?.id}
+				class={`torp-nav-menu-popout-content ${$props?.class ?? ""}`.trim()}
 				&ref={div}
 				onmount={show}
 			>

package/src/NavMenu/NavMenuSeparator.torp

@@ -1,12 +1,19 @@
 
+interface NavMenuSeparatorProps {
+	/** An ID for the root element */
+	id?: string;
+	/** Class name(s) for the root element */
+	class?: string,
+}
+
 /**
  * An element in a menu that separates logical sets of menu items.
  */
-export default function NavMenuSeparator($props: any) {
+export default function NavMenuSeparator($props: NavMenuSeparatorProps | undefined) {
 	@render {
 		<div
-			{$props.id}
-			class={`torp-nav-menu-separator ${$props.class ?? ""}`.trim()} role="separator"
+			{$props?.id}
+			class={`torp-nav-menu-separator ${$props?.class ?? ""}`.trim()} role="separator"
 		>
 			<slot />
 		</div>

package/src/Notification/Notification.torp

@@ -1,18 +1,39 @@
 import { NotificationContextName, type NotificationContext } from "./NotificationTypes";
 
+interface NotificationProps {
+	/** An ID for the root element */
+	id?: string;
+	/** Class name(s) for the root element */
+	class?: string,
+	/** Whether the notification is visible */
+	visible?: boolean,
+	/** The duration, in milliseconds, to keep the notification visible */
+	duration?: number,
+	/** Raised when the notification has closed, either after the duration has elapsed, or when the user has pressed the close button */
+	onclose?: () => void,
+}
+
 /**
  * An element that displays a brief, important message in a way that attracts
  * the user's attention without interrupting the user's task.
  *
  * See [the WAI ARIA guidelines for Alerts](https://www.w3.org/WAI/ARIA/apg/patterns/alert/).
- *
- * @prop {boolean} visible -- Whether the notification is visible
- * @prop {number | undefined} duration -- The duration, in milliseconds, to keep the notification visible
- * @prop {() => void} onclose -- Raised when the notification has closed, either after the duration has elapsed, or when the user has pressed the close button
  */
-export default function Notification($props) {
-	$props.visible ??= true;
-	$props.duration ??= 5000;
+export default function Notification($props: NotificationProps | undefined) {
+	let defaultDuration = 5000;
+
+	let $state = $watch({
+		visible: false
+	});
+
+	$run(() => {
+		$state.visible = $props?.visible ?? true;
+	});
+	$run(() => {
+		if ($props !== undefined) {
+			$props.visible = $state.visible;
+		}
+	});
 
 	// Set the context to pass down to items
 	let context: NotificationContext = {
@@ -21,24 +42,22 @@ export default function Notification($props) {
 	$context[NotificationContextName] = context;
 
 	$mount(() => {
-		if ($props.duration) {
-			setTimeout(closeNotification, $props.duration);
-		}
+		setTimeout(closeNotification, $props?.duration ?? defaultDuration);
 	});
 
 	function closeNotification() {
-		$props.visible = false;
+		$state.visible = false;
 
-		if ($props.onclose) {
-			$props.onclose();
+		if ($props?.onclose) {
+			$props?.onclose();
 		}
 	}
 
 	@render {
-		@if ($props.visible) {
+		@if ($state.visible) {
 			<div 
-				{$props.id}
-				class={`torp-notification ${$props.class ?? ""}`.trim()}
+				{$props?.id}
+				class={`torp-notification ${$props?.class ?? ""}`.trim()}
 				role="alert"
 			>
 				<slot />

package/src/Notification/NotificationClose.torp

@@ -1,9 +1,16 @@
 import { NotificationContextName, type NotificationContext } from "./NotificationTypes";
 
+interface NotificationCloseProps {
+	/** An ID for the root element */
+	id?: string;
+	/** Class name(s) for the root element */
+	class?: string,
+}
+
 /**
  * The button that a user can press to close this Notification.
  */
-export default function NotificationClose() {
+export default function NotificationClose($props: NotificationCloseProps | undefined) {
 	// Get stuff out of the NotificationContext
 	const context = $context[NotificationContextName] as NotificationContext;
 	if (!context) {
@@ -17,8 +24,8 @@ export default function NotificationClose() {
 
 	@render {
 		<button
-			{$props.id}
-			class={`torp-notification-close ${$props.class ?? ""}`.trim()}
+			{$props?.id}
+			class={`torp-notification-close ${$props?.class ?? ""}`.trim()}
 			type="button"
 			onclick={handleClick}
 		>

package/src/Notification/NotificationContainer.torp

@@ -1,12 +1,20 @@
+
+interface NotificationContainerProps {
+	/** An ID for the root element */
+	id?: string;
+	/** Class name(s) for the root element */
+	class?: string,
+}
+
 /**
  * The container for one or more Notifications, which can be used to position
  * the notifications inside the viewport.
  */
-export default function NotificationContainer() {
+export default function NotificationContainer($props: NotificationContainerProps | undefined) {
 	@render {
 		<div
-			{$props.id}
-			class={`torp-notification-container ${$props.class ?? ""}`.trim()}
+			{$props?.id}
+			class={`torp-notification-container ${$props?.class ?? ""}`.trim()}
 		>
 			<slot />
 		</div>

package/src/Notification/NotificationContent.torp

@@ -1,11 +1,19 @@
+
+interface NotificationContentProps {
+	/** An ID for the root element */
+	id?: string;
+	/** Class name(s) for the root element */
+	class?: string,
+}
+
 /**
  * The content to display within a Notification.
  */
-export default function NotificationContent() {
+export default function NotificationContent($props: NotificationContentProps | undefined) {
 	@render {
 		<div 
-			{$props.id}
-			class={`torp-notification-content ${$props.class ?? ""}`.trim()}
+			{$props?.id}
+			class={`torp-notification-content ${$props?.class ?? ""}`.trim()}
 		>
 			<slot />
 		</div>

package/src/Popover/Popover.torp

@@ -1,31 +1,57 @@
 import { PopoverContextName, type Point, type PopoverContext, type PopoverState } from "./PopoverTypes";
 
+interface PopoverProps {
+	/** An ID for the root element */
+	id?: string;
+	/** Class name(s) for the root element */
+	class?: string,
+	/** Whether the popover is modal. If true, an overlay should be supplied to obscure outside content, and only the popover content will be visible to screen readers  */
+	modal?: boolean,
+	/** Whether the popover is visible  */
+	visible?: boolean,
+	/** The element to anchor this popover to, as an alternative to supplying a PopoverTrigger  */
+	anchor?: HTMLElement,
+	/** The position to display this popover at if it's contextual, as an alternative to supplying a PopoverTriggerContextual  */
+	position?: Point,
+	/** A function to be called when the user selects a response */
+	callback?: ((value: any) => void),
+	/** Raised when the popover is opened or closed */
+	ontoggle?: (open: boolean) => void,
+	/** Raised when the popover has opened */
+	onopen?: () => void,
+	/** Raised when the popover has closed */
+	onclose?: (result: any) => void,
+}
+
 /**
- * A popover that can be used to show rich content or obtain information from a user.
- *
- * See [the WAI ARIA guidelines for Dialogs](https://www.w3.org/WAI/ARIA/apg/patterns/dialogmodal/).
+ * A popover window that is shown to the user relative to an anchor element.
  *
  * The structure of a Popover is:
  *
  * ```
  * <Popover>
- * 	<PopoverOverlay /> (optional, if modal)
- * 	<PopoverTrigger/PopoverTriggerContextual/PopoverTriggerHover /> (optional)
- * 	<PopoverContent/PopoverContentAnchored/PopoverContentContextual />
+ * 	<PopoverTrigger /> (optional)
+ * 	<PopoverContent />
  * </Popover>
  * ```
- * @prop {boolean} modal -- Whether the popover is modal. If true, an overlay should be supplied to obscure outside content, and only the popover content will be visible to screen readers 
- * @prop {boolean} visible -- Whether the popover is visible 
- * @prop {HTMLElement | undefined} anchor -- The element to anchor this popover to, as an alternative to supplying a PopoverTrigger 
- * @prop {Point | undefined} position -- The position to display this popover at if it's contextual, as an alternative to supplying a PopoverTriggerContextual 
- * @prop {((value: any) => void) | undefined} [callback] -- A function to be called when the user selects a response
  */
-export default function Popover($props: any) {
+export default function Popover($props: PopoverProps | undefined) {
 	let $state: PopoverState = $watch({
 		visible: false,
 		position: { x: 0, y: 0 }
 	})
 
+	// Sync props and state
+	$run(() => {
+		$state.visible = $props?.visible ?? false;
+		$state.position = $props?.position ?? { x: 0, y: 0 };
+	});
+	$run(() => {
+		if ($props !== undefined) {
+			$props.visible = $state.visible;
+		}
+	});
+
 	let result: any;
 
 	// Set the context to pass down to items
@@ -33,23 +59,17 @@ export default function Popover($props: any) {
 		handleButton,
 		handleClickOutside,
 		state: $state,
-		modal: $props.modal,
-		anchorElement: $unwrap($props.anchor),
+		modal: $props?.modal,
+		anchorElement: $props?.anchor ? $unwrap($props.anchor) : undefined,
 	};
 	$context[PopoverContextName] = context;
 
-	// Copy props into state whenever they change
-	$run(() => {
-		$state.visible = $props.visible ?? false;
-		$state.position = $props.position ?? { x: 0, y: 0 };
-	})
-
-	// Dispatch the toggle event when the popout is opened or closed
+	// Dispatch the toggle event when the popover is opened or closed
 	let firstToggle = true;
 	$run(() => {
-		const ontoggle = $props.ontoggle;
-		const onopen = $props.onopen;
-		const onclose = $props.onclose;
+		const ontoggle = $props?.ontoggle;
+		const onopen = $props?.onopen;
+		const onclose = $props?.onclose;
 		const visible = $state.visible;
 		if (firstToggle) {
 			firstToggle = false;
@@ -84,8 +104,8 @@ export default function Popover($props: any) {
 		$state.visible = false;
 
 		// Call the callback
-		if ($props.callback) {
-			$props.callback(result);
+		if ($props?.callback) {
+			$props?.callback(result);
 		}
 	}
 
@@ -96,8 +116,8 @@ export default function Popover($props: any) {
 
 	@render {
 		<div
-			{$props.id}
-			class={`torp-popover ${$props.class ?? ""}`.trim()}
+			{$props?.id}
+			class={`torp-popover ${$props?.class ?? ""}`.trim()}
 		>
 			<slot />
 		</div>

package/src/Popover/PopoverContent.torp

@@ -1,11 +1,24 @@
 import { addDocumentEvent, removeDocumentEvent } from "../utils/documentEvents";
+import getScrollParent from "../utils/getScrollParent";
+import setPopoverPosition from "../utils/setPopoverPosition";
 import { PopoverContextName, type PopoverContext } from "./PopoverTypes";
 
+interface PopoverContentProps {
+	/** An ID for the root element */
+	id?: string;
+	/** Class name(s) for the root element */
+	class?: string,
+	/** Where the popover will be shown, relative to the popover trigger */
+	side?: "top" | "right" | "bottom" | "left",
+	/** How the popover will be aligned, relative to the popover trigger */
+	alignment?: "start" | "center" | "end",
+}
+
 /**
- * The content that is displayed for a Popover when it is open, such as a Dialog
- * in the middle of the screen or a div that slides in from the side.
+ * The content that is displayed for a Popover when it is open, displayed
+ * alongside an element.
  */
-export default function PopoverContent($props: any) {
+export default function PopoverContent($props?: PopoverContentProps | undefined) {
 	let div: HTMLDivElement;
 	let shown = false;
 	let closeOnClick = false;
@@ -32,6 +45,12 @@ export default function PopoverContent($props: any) {
 		addDocumentEvent("mousedown", handleDocumentMouseDown);
 		addDocumentEvent("click", handleDocumentClick);
 
+		// Set the position and listen for window resize and scroll to reset the position
+		setPosition();
+		const anchorElement = context.anchorElement!
+		const scrollParent = getScrollParent(anchorElement)
+		scrollParent.addEventListener("resize", setPosition);
+		scrollParent.addEventListener("scroll", setPosition);
 		if (context.focusFirstElement) {
 			context.focusFirstElement();
 		}
@@ -43,9 +62,13 @@ export default function PopoverContent($props: any) {
 		removeDocumentEvent("mousedown", handleDocumentMouseDown);
 		removeDocumentEvent("click", handleDocumentClick);
 
-		// Focus the anchor element per WAI guidelines
-		if (context.anchorElement?.focus) {
-			context.anchorElement.focus();
+		// Stop listening for window resize and focus the anchor element per WAI guidelines
+		const anchorElement = context.anchorElement!
+		const scrollParent = getScrollParent(anchorElement)
+		scrollParent.removeEventListener("resize", setPosition);
+		scrollParent.removeEventListener("scroll", setPosition);
+		if (anchorElement.focus) {
+			anchorElement.focus();
 		}
 	}
 
@@ -60,15 +83,26 @@ export default function PopoverContent($props: any) {
 			!div.contains(e.target as HTMLElement) &&
 			(!context.anchorElement || !context.anchorElement.contains(e.target as HTMLElement))
 		) {
+			e.preventDefault();
 			context.handleClickOutside!(e);
 		}
 	}
 
+	function setPosition() {
+		if (!context.anchorElement) {
+			throw new Error("Popover must have an anchor element");
+		}
+
+		let side = $props?.side ?? "bottom";
+		let alignment = $props?.alignment ?? "center";
+		setPopoverPosition(context.anchorElement, div, side, alignment);
+	}
+
 	@render {
 		@if ($state.visible) {
 			<div
-				{$props.id}
-				class={`torp-popover-content ${$props.class ?? ""}`.trim()}
+				{$props?.id}
+				class={`torp-popover-content ${$props?.class ?? ""}`.trim()}
 				&ref={div}
 				onmount={show}
 			>

package/src/Popover/PopoverTrigger.torp

@@ -1,9 +1,21 @@
 import { PopoverContextName, type PopoverContext } from "./PopoverTypes";
+import hoverTrigger from "../mount/hoverTrigger";
+
+interface PopoverTriggerProps {
+	/** An ID for the root element */
+	id?: string;
+	/** Class name(s) for the root element */
+	class?: string,
+	/** Whether the popover is activated by click/press or by hover **/
+	activation?: "press" | "hover"
+}
 
 /**
  * The button that causes a Popover to appear or disappear.
  */
-export default function PopoverTrigger($props: any) {
+export default function PopoverTrigger($props: PopoverTriggerProps | undefined) {
+	let activation = $props?.activation ?? "press";
+
 	// Get stuff out of the PopoverContext
 	const context = $context[PopoverContextName] as PopoverContext;
 	if (!context) {
@@ -12,15 +24,32 @@ export default function PopoverTrigger($props: any) {
 	let $state = context.state;
 
 	function handleClick() {
+		if (activation !== "press") return;
+
 		$state.visible = !$state.visible;
 	}
 
+	function handleHover(node: HTMLElement, e: MouseEvent) {
+		if (activation !== "hover") return;
+
+		if ($state.position) {
+			// Get the position relative to the element, so we can reposition on scroll
+			const rect = node.getBoundingClientRect();
+			const x = e.clientX - rect.left;
+			const y = e.clientY - rect.top;
+			$state.position = { x, y };
+			//$state.position = { x: window.scrollX + e.clientX, y: window.scrollY + e.clientY };
+		}
+		$state.visible = !$state.visible
+	}
+
 	@render {
 		<button
 			type="button"
-			{$props.id}
-			class={`torp-popover-trigger ${$props.class ?? ""}`.trim()}
+			{$props?.id}
+			class={`torp-popover-trigger ${$props?.class ?? ""}`.trim()}
 			onclick={handleClick}
+			onmount={(el) => hoverTrigger(el, { onHover: handleHover, onExit: handleHover })}
 			&ref={context.anchorElement}
 		>
 			<slot />

package/src/Popover/PopoverTypes.ts

@@ -7,7 +7,7 @@ export interface PopoverContext {
 	// There may be a more elegant way to accomplish this too
 	handleClickOutside?: (e: MouseEvent) => void;
 	state: PopoverState;
-	modal: boolean;
+	//modal: boolean;
 	anchorElement?: HTMLElement;
 	// HACK: focusFirstElement is necessary because if we focus the first element e.g. in a Dialog's
 	// onMount, it will scroll the page to the focused element and mess up our careful positioning

package/src/Popover/index.ts

@@ -1,29 +1,6 @@
 import Popover from "./Popover.torp";
 import PopoverContent from "./PopoverContent.torp";
-import PopoverContentAnchored from "./PopoverContentAnchored.torp";
-import PopoverContentContextual from "./PopoverContentContextual.torp";
-import PopoverOverlay from "./PopoverOverlay.torp";
 import PopoverTrigger from "./PopoverTrigger.torp";
-import PopoverTriggerContextual from "./PopoverTriggerContextual.torp";
-import PopoverTriggerHover from "./PopoverTriggerHover.torp";
-import clickPopover from "./mountClickPopover";
-import contextPopover from "./mountContextPopover";
-import hoverPopover from "./mountHoverPopover";
 import showPopover from "./showPopover";
-import showPopoverPrompt from "./showPopoverPrompt";
 
-export {
-	Popover,
-	PopoverOverlay,
-	PopoverTrigger,
-	PopoverTriggerHover,
-	PopoverTriggerContextual,
-	PopoverContentAnchored,
-	PopoverContentContextual,
-	PopoverContent,
-	showPopover,
-	showPopoverPrompt,
-	clickPopover,
-	contextPopover,
-	hoverPopover,
-};
+export { Popover, PopoverTrigger, PopoverContent, showPopover };

package/src/Slider/Slider.torp

@@ -1,4 +1,4 @@
-export default function Slider() {
+export default function Slider($props: any | undefined) {
 	//export let value = 0;
 	//export let total = 0;
 
@@ -71,8 +71,8 @@ export default function Slider() {
 
 	@render {
 		<div
-			id={$props.id}
-			class={`torp-slider ${$props.class ?? ""}`.trim()}
+			{$props?.id}
+			class={`torp-slider ${$props?.class ?? ""}`.trim()}
 			onmousemove={handleMouseMove}
 			onmouseup={handleMouseUp}
 		>