@torpor/ui 0.1.7 → 0.2.1

package/src/NavMenu/NavMenuPopout.torp

@@ -1,5 +1,14 @@
 import { NavMenuPopoutContextName, type NavMenuPopoutContext } from "./NavMenuTypes";
 
+interface NavMenuPopoutProps {
+	/** An ID for the root element */
+	id?: string;
+	/** Class name(s) for the root element */
+	class?: string,
+	/** Whether the popout is visible */
+	visible?: boolean,
+}
+
 /**
  * A popout that is attached to a menu button and can be used to show a submenu.
  *
@@ -11,10 +20,9 @@ import { NavMenuPopoutContextName, type NavMenuPopoutContext } from "./NavMenuTy
  * 	<NavMenuPopoutContent />
  * </NavMenuPopout>
  * ```
- *
- * @prop {boolean} visible -- Whether the popout is visible
  */
-export default function NavMenuPopout($props: any) {
+export default function NavMenuPopout($props: NavMenuPopoutProps) {
+	$props ??= $watch({});
 	$props.visible ??= false;
 
 	let $state = $watch({
@@ -59,11 +67,11 @@ export default function NavMenuPopout($props: any) {
 
 	@render {
 		<div
-			id={$props.id}
+			{$props.id}
 			class={`torp-nav-menu-popout ${$props.class ?? ""}`.trim()}
 			onmouseleave={handleMouseLeave}
 		>
-			<:slot />
+			<slot />
 		</div>
 	}
 }

package/src/NavMenu/NavMenuPopoutButton.torp

@@ -1,4 +1,3 @@
-
 import {
 	NavMenuContextName,
 	NavMenuPopoutContextName,
@@ -6,18 +5,25 @@ 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) {
+export default function NavMenuPopoutButton($props: NavMenuPopoutButtonProps) {
+	$props ??= $watch({});
 	$props.hoverDelay ??= 500;
 
-	/** Set when the item is disabled */
-	let dataDisabled = $props.disabled || undefined;
-
 	let button: HTMLButtonElement;
 	let interval: NodeJS.Timeout | undefined;
 
@@ -96,7 +102,7 @@ export default function NavMenuPopoutButton($props: any) {
 
 	@render {
 		<button
-			id={$props.id}
+			{$props.id}
 			class={`torp-nav-menu-popout-button ${$props.class ?? ""}`.trim()}
 			type="button"
 			{$props.disabled}
@@ -104,7 +110,7 @@ export default function NavMenuPopoutButton($props: any) {
 			aria-haspopup="true"
 			aria-expanded={$state.visible.toString()}
 			aria-disabled={$props.disabled ? "true" : undefined}
-			data-disabled={dataDisabled}
+			data-disabled={$state.disabled ? "true" : undefined}
 			onkeydown={handlePopoutKey}
 			onclick={handleClick}
 			onfocus={() => handleItemFocus(index)}
@@ -112,9 +118,9 @@ export default function NavMenuPopoutButton($props: any) {
 			onmouseleave={handleMouseLeave}
 			onmousemove={handleMouseMove}
 			&ref={button}
-			:onmount={(el) => popoutContext.anchorElement = el }
+			onmount={(el) => popoutContext.anchorElement = el }
 		>
-			<:slot />
+			<slot />
 		</button>
 	}
 }

package/src/NavMenu/NavMenuPopoutContent.torp

@@ -3,17 +3,28 @@ 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) {
+export default function NavMenuPopoutContent($props: NavMenuPopoutContentProps) {
+	$props ??= $watch({});
 	$props.side ??= "bottom";
 	$props.alignment ??= "start";
 
 	let div: HTMLDivElement;
+	let shown = false;
 
 	// Get stuff out of the NavMenuPopoutContext
 	const context = $context[NavMenuPopoutContextName] as NavMenuPopoutContext;
@@ -22,35 +33,36 @@ export default function NavMenuPopoutContent($props: any) {
 	}
 	let $state = context.state;
 
-	let first = true;
 	$run(() => {
-		let visible = $state.visible;
+		if (!$state.visible) {
+			hide();
+		}
+	});
+
+	function show() {
+		shown = true;
 
-		if (first) {
-			first = false;
-			return;
+		// Set the position and listen for window resize and scroll to reset the position
+		setPosition();
+		const scrollParent = getScrollParent(context.anchorElement)
+		scrollParent.addEventListener("resize", setPosition);
+		scrollParent.addEventListener("scroll", setPosition);
+		if (context.focusFirstElement) {
+			context.focusFirstElement();
 		}
+	}
+
+	function hide() {
+		if (!shown) return;
 
-		if (visible) {
-			// Wait for the content div to be shown, set its position, and listen for window resize to re-position
-			//await tick();
-			setPosition();
-			if (context.focusFirstElement) {
-				context.focusFirstElement();
-			}
-			const scrollParent = getScrollParent(context.anchorElement)
-			scrollParent.addEventListener("resize", setPosition);
-			scrollParent.addEventListener("scroll", setPosition);
-		} else {
-			// Stop listening for window resize and focus the anchor element per WAI guidelines
-			const scrollParent = getScrollParent(context.anchorElement)
-			scrollParent.removeEventListener("resize", setPosition);
-			scrollParent.removeEventListener("scroll", setPosition);
-			if (context.anchorElement?.focus) {
-				context.anchorElement.focus();
-			}
+		// Stop listening for window resize and focus the anchor element per WAI guidelines
+		const scrollParent = getScrollParent(context.anchorElement)
+		scrollParent.removeEventListener("resize", setPosition);
+		scrollParent.removeEventListener("scroll", setPosition);
+		if (context.anchorElement?.focus) {
+			context.anchorElement.focus();
 		}
-	});
+	}
 
 	function setPosition() {
 		if (!context.anchorElement) {
@@ -65,12 +77,12 @@ export default function NavMenuPopoutContent($props: any) {
 	@render {
 		@if ($state.visible) {
 			<div
-				id={$props.id}
+				{$props.id}
 				class={`torp-nav-menu-popout-content ${$props.class ?? ""}`.trim()}
 				&ref={div}
-				:onmount={(el) => setPopoverPosition(context.anchorElement, el, $props.side, $props.alignment)}
+				onmount={show}
 			>
-				<:slot />
+				<slot />
 			</div>
 		}
 	}

package/src/NavMenu/NavMenuSeparator.torp

@@ -1,14 +1,23 @@
 
+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) {
+	$props ??= $watch({});
+
 	@render {
 		<div
-			id={$props.id}
+			{$props.id}
 			class={`torp-nav-menu-separator ${$props.class ?? ""}`.trim()} role="separator"
 		>
-			<:slot />
+			<slot />
 		</div>
 	}
 }

package/src/Notification/Notification.torp

@@ -0,0 +1,58 @@
+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/).
+ */
+export default function Notification($props: NotificationProps) {
+	$props ??= $watch({});
+	$props.visible ??= true;
+	$props.duration ??= 5000;
+
+	// Set the context to pass down to items
+	let context: NotificationContext = {
+		closeNotification
+	};
+	$context[NotificationContextName] = context;
+
+	$mount(() => {
+		if ($props.duration) {
+			setTimeout(closeNotification, $props.duration);
+		}
+	});
+
+	function closeNotification() {
+		$props.visible = false;
+
+		if ($props.onclose) {
+			$props.onclose();
+		}
+	}
+
+	@render {
+		@if ($props.visible) {
+			<div 
+				{$props.id}
+				class={`torp-notification ${$props.class ?? ""}`.trim()}
+				role="alert"
+			>
+				<slot />
+			</div>
+		}
+	}
+}

package/src/Notification/NotificationClose.torp

@@ -0,0 +1,37 @@
+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($props: NotificationCloseProps) {
+	$props ??= $watch({});
+
+	// Get stuff out of the NotificationContext
+	const context = $context[NotificationContextName] as NotificationContext;
+	if (!context) {
+		throw new Error("NotificationClose must be contained within a Notification");
+	}
+	const { closeNotification } = context;
+
+	function handleClick() {
+		closeNotification();
+	}
+
+	@render {
+		<button
+			{$props.id}
+			class={`torp-notification-close ${$props.class ?? ""}`.trim()}
+			type="button"
+			onclick={handleClick}
+		>
+			<slot />
+		</button>
+	}
+}

package/src/Notification/NotificationContainer.torp

@@ -0,0 +1,24 @@
+
+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($props: NotificationContainerProps) {
+	$props ??= $watch({});
+
+	@render {
+		<div
+			{$props.id}
+			class={`torp-notification-container ${$props.class ?? ""}`.trim()}
+		>
+			<slot />
+		</div>
+	}
+}

package/src/Notification/NotificationContent.torp

@@ -0,0 +1,23 @@
+
+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($props: NotificationContentProps) {
+	$props ??= $watch({});
+
+	@render {
+		<div 
+			{$props.id}
+			class={`torp-notification-content ${$props.class ?? ""}`.trim()}
+		>
+			<slot />
+		</div>
+	}
+}

package/src/Notification/NotificationTypes.ts

@@ -0,0 +1,5 @@
+export const NotificationContextName = 'Notification';
+
+export interface NotificationContext {
+	closeNotification: () => void;
+}

package/src/Notification/index.ts

@@ -0,0 +1,13 @@
+import Notification from "./Notification.torp";
+import NotificationClose from "./NotificationClose.torp";
+import NotificationContainer from "./NotificationContainer.torp";
+import NotificationContent from "./NotificationContent.torp";
+import showNotification from "./showNotification";
+
+export {
+	Notification,
+	NotificationContainer,
+	NotificationContent,
+	NotificationClose,
+	showNotification,
+};

package/src/Notification/showNotification.ts

@@ -0,0 +1,30 @@
+import { mount } from "@torpor/view";
+
+/**
+ * Shows a notification component in code.
+ * @param notification The notification component
+ * @param props The properties for the notification component
+ * @param target The target element to show the notification in
+ */
+export default function showNotification(notification: any, props: any, target?: Element): void {
+	if (!target) {
+		// Put the notification in the first NotificationContainer, or the
+		// document body if there are no NotificationContainers
+		target = document.getElementsByClassName("torp-notification-container")[0];
+		if (!target) {
+			throw new Error("No notification container found");
+		}
+	}
+
+	// HACK: Should allow mounting in a non-empty container
+	// Move existing nodes into a fragment, and add them back after mounting
+	var fragment = document.createDocumentFragment();
+	while (target.firstChild) {
+		fragment.append(target.firstChild);
+	}
+
+	// Create the notification
+	mount(target, notification, props);
+
+	target.prepend(fragment);
+}

package/src/Popover/Popover.torp

@@ -1,5 +1,22 @@
 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),
+}
+
 /**
  * A popover that can be used to show rich content or obtain information from a user.
  *
@@ -14,13 +31,10 @@ import { PopoverContextName, type Point, type PopoverContext, type PopoverState
  * 	<PopoverContent/PopoverContentAnchored/PopoverContentContextual />
  * </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) {
+	$props ??= $watch({});
+
 	let $state: PopoverState = $watch({
 		visible: false,
 		position: { x: 0, y: 0 }
@@ -96,10 +110,10 @@ export default function Popover($props: any) {
 
 	@render {
 		<div
-			id={$props.id}
+			{$props.id}
 			class={`torp-popover ${$props.class ?? ""}`.trim()}
 		>
-			<:slot />
+			<slot />
 		</div>
 	}
 }

package/src/Popover/PopoverContent.torp

@@ -1,12 +1,23 @@
 import { addDocumentEvent, removeDocumentEvent } from "../utils/documentEvents";
 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,
+}
+
 /**
  * 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.
  */
-export default function PopoverContent($props: any) {
+export default function PopoverContent($props: PopoverContentProps) {
+	$props ??= $watch({});
+
 	let div: HTMLDivElement;
+	let shown = false;
+	let closeOnClick = false;
 
 	// Get stuff out of the PopoverContext
 	const context = $context[PopoverContextName] as PopoverContext;
@@ -15,37 +26,37 @@ export default function PopoverContent($props: any) {
 	}
 	let $state = context.state;
 
-	let closeOnClick = false;
-
-	let first = true;
 	$run(() => {
-		let visible = $state.visible;
+		if (!$state.visible) {
+			hide();
+		}
+	});
 
-		if (first) {
-			first = false;
-			return;
+	function show() {
+		shown = true;
+
+		// HACK: Because this Popover could be shown with a click, we need to wait for another mousedown
+		// before we close on click. Otherwise the click immediately bubbles to the document
+		closeOnClick = false;
+		addDocumentEvent("mousedown", handleDocumentMouseDown);
+		addDocumentEvent("click", handleDocumentClick);
+
+		if (context.focusFirstElement) {
+			context.focusFirstElement();
 		}
+	}
+
+	function hide() {
+		if (!shown) return;
 
-		if (visible) {
-			// HACK: Because this Popover could be shown with a click, we need to wait for another mousedown
-			// before we close on click. Otherwise the click immediately bubbles to the document
-			closeOnClick = false;
-			addDocumentEvent("mousedown", handleDocumentMouseDown);
-			addDocumentEvent("click", handleDocumentClick);
-			// Wait for the content div to be shown, set its position, and listen for window resize to re-position
-			//await tick();
-			if (context.focusFirstElement) {
-				context.focusFirstElement();
-			}
-		} else {
-			removeDocumentEvent("mousedown", handleDocumentMouseDown);
-			removeDocumentEvent("click", handleDocumentClick);
-			// Focus the anchor element per WAI guidelines
-			if (context.anchorElement?.focus) {
-				context.anchorElement.focus();
-			}
+		removeDocumentEvent("mousedown", handleDocumentMouseDown);
+		removeDocumentEvent("click", handleDocumentClick);
+
+		// Focus the anchor element per WAI guidelines
+		if (context.anchorElement?.focus) {
+			context.anchorElement.focus();
 		}
-	});
+	}
 
 	function handleDocumentMouseDown() {
 		closeOnClick = true;
@@ -65,11 +76,12 @@ export default function PopoverContent($props: any) {
 	@render {
 		@if ($state.visible) {
 			<div
-				id={$props.id}
+				{$props.id}
 				class={`torp-popover-content ${$props.class ?? ""}`.trim()}
 				&ref={div}
+				onmount={show}
 			>
-				<:slot />
+				<slot />
 			</div>
 		}
 	}