@torpor/ui 0.0.16 → 0.1.0

package/src/NavMenu/NavMenuLink.torp

@@ -0,0 +1,52 @@
+
+import { NavMenuContextName, type NavMenuContext } from "./NavMenuTypes";
+
+/**
+ * A link that is placed in a NavMenu and signals a response by a user.
+ *
+ * @prop {string} href -- The URL for the menu link
+ * @prop {newWindow} boolean -- Whether the menu link should open in a new tab/window
+ * @prop {boolean} disabled -- Whether this link is disabled
+ */
+export default function NavMenuLink($props: any) {
+	$props.newWindow ??= false;
+
+	/** Set when the item is disabled */
+	let dataDisabled = $props.disabled || undefined;
+
+	let link: HTMLAnchorElement;
+
+	// Get stuff out of the NavMenuContext
+	const menuContext = $context[NavMenuContextName] as NavMenuContext;
+	if (!menuContext) {
+		throw new Error("NavMenuLink must be contained within a NavMenu");
+	}
+	const { registerItem, handleItemKey, handleItemFocus } = menuContext;
+
+	// Register this item with the parent NavMenu and store the index
+	const { index } = registerItem(setFocused);
+
+	function setFocused() {
+		link.focus();
+	}
+
+	@render {
+		<a
+			id={$props.id}
+			class={`torp-nav-menu-link ${$props.class ?? ""}`.trim()}
+			href={$props.href}
+			disabled={$props.disabled}
+			target={$props.newWindow ? "_blank" : undefined}
+			role="menuitem"
+			aria-disabled={$props.disabled ? "true" : undefined}
+			data-disabled={dataDisabled}
+			onkeydown
+			onkeydown={handleItemKey}
+			onclick
+			onfocus={() => handleItemFocus(index)}
+			&ref={link}
+		>
+			<:slot />
+		</a>
+	}
+}

package/src/NavMenu/NavMenuPopout.torp

@@ -0,0 +1,69 @@
+import { NavMenuPopoutContextName, type NavMenuPopoutContext } from "./NavMenuTypes";
+
+/**
+ * A popout that is attached to a menu button and can be used to show a submenu.
+ *
+ * The structure of a NavMenuPopout is:
+ *
+ * ```
+ * <NavMenuPopout>
+ *     <NavMenuPopoutButton />
+ * 	<NavMenuPopoutContent />
+ * </NavMenuPopout>
+ * ```
+ *
+ * @prop {boolean} visible -- Whether the popout is visible
+ */
+export default function NavMenuPopout($props: any) {
+	$props.visible ??= false;
+
+	let $state = $watch({
+		visible: $props.visible
+	});
+
+	let result: any;
+
+	// Set the context to pass down to items
+	let context: NavMenuPopoutContext = {
+		state: $state,
+	};
+	$context[NavMenuPopoutContextName] = context;
+
+	// Copy props into state whenever they change
+	$run(() => {
+		$state.visible = $props.visible ?? false;
+	});
+
+	// Dispatch the toggle event when the popout is opened or closed
+	let firstToggle = true;
+	$run(() => {
+		const ontoggle = $props.ontoggle;
+		const onopen = $props.onopen;
+		const onclose = $props.onclose;
+		const visible = $props.visible;
+		if (firstToggle) {
+			firstToggle = false;
+		} else {
+			if (ontoggle) ontoggle(visible);
+			if (visible) {
+				if (onopen) onopen()
+			} else {
+				if (onclose) onclose(result);
+			}
+		}
+	});
+
+	function handleMouseLeave() {
+		$state.visible = false;
+	}
+
+	@render {
+		<div
+			id={$props.id}
+			class={`torp-nav-menu-popout ${$props.class ?? ""}`.trim()}
+			onmouseleave={handleMouseLeave}
+		>
+			<:slot />
+		</div>
+	}
+}

package/src/NavMenu/NavMenuPopoutButton.torp

@@ -0,0 +1,120 @@
+
+import {
+	NavMenuContextName,
+	NavMenuPopoutContextName,
+	type NavMenuContext,
+	type NavMenuPopoutContext,
+} from "./NavMenuTypes";
+
+/**
+ * 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;
+
+	let button: HTMLButtonElement;
+	let interval: NodeJS.Timeout | undefined;
+
+	// Get stuff out of the NavMenuContext
+	const menuContext = $context[NavMenuContextName] as NavMenuContext;
+	if (!menuContext) {
+		throw new Error("NavMenuPopoutButton must be contained within a NavMenu");
+	}
+	const { registerItem, handleItemKey, handleItemFocus } = menuContext;
+
+	// Get stuff out of the NavMenuPopoutContext
+	const popoutContext = $context[NavMenuPopoutContextName] as NavMenuPopoutContext;
+	if (!popoutContext) {
+		throw new Error("NavMenuPopoutButton must be contained within a NavMenuPopout");
+	}
+	let $state = popoutContext.state;
+
+	// Register this item with the parent NavMenu and store the index
+	const { index } = registerItem(setFocused);
+
+	// TODO: $mount should be run AFTER the button has been set
+	//$mount(() => {
+	//	// Set the anchor element to the button when it exists
+	//	popoutContext.anchorElement = button;
+	//});
+
+	function setFocused() {
+		button.focus();
+	}
+
+	function handleClick() {
+		$state.visible = true;
+	}
+
+	function handlePopoutKey(e: KeyboardEvent) {
+		switch (e.key) {
+			case "Right":
+			case "ArrowRight":
+				// TODO: This should be based on what side the menu shows on
+				e.preventDefault();
+				$state.visible = true;
+				break;
+			default:
+				handleItemKey(e);
+		}
+	}
+
+	function handleMouseEnter() {
+		if ($props.disabled) return;
+
+		// Handle the hover after a delay
+		if (!interval) {
+			interval = setTimeout(() => $state.visible = true, $props.hoverDelay);
+		}
+	}
+
+	function handleMouseLeave() {
+		if ($props.disabled) return;
+
+		// Prevent short hovers or touches from firing the event
+		if (interval) {
+			clearTimeout(interval);
+			interval = undefined;
+		}
+	}
+
+	function handleMouseMove() {
+		if ($props.disabled) return;
+
+		// Reset the interval on mouse move
+		if (interval) {
+			clearTimeout(interval);
+			interval = setTimeout(() => $state.visible = true, $props.hoverDelay);
+		}
+	}
+
+	@render {
+		<button
+			id={$props.id}
+			class={`torp-nav-menu-popout-button ${$props.class ?? ""}`.trim()}
+			type="button"
+			disabled={$props.disabled}
+			role="menuitem"
+			aria-haspopup="true"
+			aria-expanded={$state.visible.toString()}
+			aria-disabled={$props.disabled ? "true" : undefined}
+			data-disabled={dataDisabled}
+			onkeydown={handlePopoutKey}
+			onclick={handleClick}
+			onfocus={() => handleItemFocus(index)}
+			onmouseenter={handleMouseEnter}
+			onmouseleave={handleMouseLeave}
+			onmousemove={handleMouseMove}
+			&ref={button}
+			:onmount={(el) => popoutContext.anchorElement = el }
+		>
+			<:slot />
+		</button>
+	}
+}

package/src/NavMenu/NavMenuPopoutContent.torp

@@ -0,0 +1,79 @@
+
+import getScrollParent from "../utils/getScrollParent";
+import setPopoverPosition from "../utils/setPopoverPosition";
+import { NavMenuPopoutContextName, type NavMenuPopoutContext } from "./NavMenuTypes";
+
+/**
+ * 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";
+
+	let div: HTMLDivElement;
+
+	// Get stuff out of the NavMenuPopoutContext
+	const context = $context[NavMenuPopoutContextName] as NavMenuPopoutContext;
+	if (!context) {
+		throw new Error("NavMenuPopoutContent must be contained within a NavMenuPopout");
+	}
+	let $state = context.state;
+
+	let first = true;
+	$run(() => {
+		let visible = $state.visible;
+
+		if (first) {
+			first = false;
+			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();
+			}
+		}
+	});
+
+	function setPosition() {
+		if (!context.anchorElement) {
+			throw new Error("NavMenuPopoutContent must have an anchor element");
+		}
+
+		if (div) {
+			setPopoverPosition(context.anchorElement, div, $props.side, $props.alignment);
+		}
+	}
+
+	@render {
+		<div style="display: contents">			
+			@if ($state.visible) {
+				<div
+					id={$props.id}
+					class={`torp-nav-menu-popout-content ${$props.class ?? ""}`.trim()}
+					&ref={div}
+					:onmount={(el) => setPopoverPosition(context.anchorElement, el, $props.side, $props.alignment)}
+				>
+					<:slot />
+				</div>
+			}
+		</div>
+	}
+}

package/src/NavMenu/NavMenuSeparator.torp

@@ -0,0 +1,14 @@
+
+/**
+ * An element in a menu that separates logical sets of menu items.
+ */
+export default function NavMenuSeparator($props: any) {
+	@render {
+		<div
+			id={$props.id}
+			class={`torp-nav-menu-separator ${$props.class ?? ""}`.trim()} role="separator"
+		>
+			<:slot />
+		</div>
+	}
+}

package/src/NavMenu/NavMenuTypes.ts

@@ -0,0 +1,32 @@
+export const NavMenuContextName = "NavMenu";
+export const NavMenuPopoutContextName = "NavMenuPopout";
+export const NavMenuGroupContextName = "NavMenuGroup";
+
+export interface NavMenuContext {
+	/** Called from a NavMenuLink or NavMenuButton when its button is focused */
+	handleItemFocus: (index: number) => void;
+
+	/** Called from a NavMenuLink or NavMenuButton when a key is pressed */
+	handleItemKey: (e: KeyboardEvent) => void;
+
+	/** Called from each NavMenuLink or NavMenuButton to register itself with this NavMenu */
+	registerItem: (setFocused: () => void) => { index: number };
+}
+
+export interface NavMenuPopoutContext {
+	state: {
+		visible: boolean;
+	};
+	anchorElement?: HTMLElement;
+	focusFirstElement?: () => void;
+}
+
+export interface NavMenuGroupContext {
+	state: {
+		headerId: string;
+	};
+}
+
+export interface ItemState {
+	setFocused: () => void;
+}

package/src/NavMenu/index.ts

@@ -0,0 +1,23 @@
+import NavMenu from "./NavMenu.torp";
+import NavMenuButton from "./NavMenuButton.torp";
+import NavMenuElement from "./NavMenuElement.torp";
+import NavMenuGroup from "./NavMenuGroup.torp";
+import NavMenuGroupHeader from "./NavMenuGroupHeader.torp";
+import NavMenuLink from "./NavMenuLink.torp";
+import NavMenuPopout from "./NavMenuPopout.torp";
+import NavMenuPopoutButton from "./NavMenuPopoutButton.torp";
+import NavMenuPopoutContent from "./NavMenuPopoutContent.torp";
+import NavMenuSeparator from "./NavMenuSeparator.torp";
+
+export {
+	NavMenu,
+	NavMenuLink,
+	NavMenuButton,
+	NavMenuElement,
+	NavMenuPopout,
+	NavMenuPopoutButton,
+	NavMenuPopoutContent,
+	NavMenuGroup,
+	NavMenuGroupHeader,
+	NavMenuSeparator,
+};

package/src/NavMenu.ts

@@ -0,0 +1,23 @@
+import NavMenu from "./NavMenu/NavMenu.torp";
+import NavMenuButton from "./NavMenu/NavMenuButton.torp";
+import NavMenuElement from "./NavMenu/NavMenuElement.torp";
+import NavMenuGroup from "./NavMenu/NavMenuGroup.torp";
+import NavMenuGroupHeader from "./NavMenu/NavMenuGroupHeader.torp";
+import NavMenuLink from "./NavMenu/NavMenuLink.torp";
+import NavMenuPopout from "./NavMenu/NavMenuPopout.torp";
+import NavMenuPopoutButton from "./NavMenu/NavMenuPopoutButton.torp";
+import NavMenuPopoutContent from "./NavMenu/NavMenuPopoutContent.torp";
+import NavMenuSeparator from "./NavMenu/NavMenuSeparator.torp";
+
+export {
+	NavMenu,
+	NavMenuLink,
+	NavMenuButton,
+	NavMenuElement,
+	NavMenuPopout,
+	NavMenuPopoutButton,
+	NavMenuPopoutContent,
+	NavMenuGroup,
+	NavMenuGroupHeader,
+	NavMenuSeparator,
+};

package/src/Popover/Popover.torp

@@ -0,0 +1,105 @@
+import { PopoverContextName, type Point, type PopoverContext, type PopoverState } from "./PopoverTypes";
+
+/**
+ * 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/).
+ *
+ * The structure of a Popover is:
+ *
+ * ```
+ * <Popover>
+ * 	<PopoverOverlay /> (optional, if modal)
+ * 	<PopoverTrigger/PopoverTriggerContextual/PopoverTriggerHover /> (optional)
+ * 	<PopoverContentStatic/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) {
+	let $state: PopoverState = $watch({
+		visible: false,
+		position: { x: 0, y: 0 }
+	})
+
+	let result: any;
+
+	// Set the context to pass down to items
+	let context: PopoverContext = {
+		handleButton,
+		handleClickOutside,
+		state: $state,
+		modal: $props.modal,
+		anchorElement: $unwrap($props.anchor),
+	};
+	$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
+	let firstToggle = true;
+	$run(() => {
+		const ontoggle = $props.ontoggle;
+		const onopen = $props.onopen;
+		const onclose = $props.onclose;
+		const visible = $state.visible;
+		if (firstToggle) {
+			firstToggle = false;
+		} else {
+			if (ontoggle) ontoggle(visible);
+			if (visible) {
+				if (onopen) onopen()
+			} else {
+				if (onclose) onclose(result);
+			}
+		}
+	});
+
+	function handleButton(type: "confirm" | "cancel" | undefined, value?: any) {
+		// Get the button's result
+		switch (type) {
+			case "confirm": {
+				result = value || true;
+				break;
+			}
+			case "cancel": {
+				result = value || false;
+				break;
+			}
+			default: {
+				result = value;
+				break;
+			}
+		}
+
+		// Hide the popover
+		$state.visible = false;
+
+		// Call the callback
+		if ($props.callback) {
+			$props.callback(result);
+		}
+	}
+
+	function handleClickOutside(e: MouseEvent) {
+		e.preventDefault();
+		$state.visible = false;
+	}
+
+	@render {
+		<div
+			id={$props.id}
+			class={`torp-popover ${$props.class ?? ""}`.trim()}
+		>
+			<:slot />
+		</div>
+	}
+}

package/src/Popover/PopoverContentAnchored.torp

@@ -0,0 +1,107 @@
+import { addDocumentEvent, removeDocumentEvent } from "../utils/documentEvents";
+import getScrollParent from "../utils/getScrollParent";
+import setPopoverPosition from "../utils/setPopoverPosition";
+import { PopoverContextName, type PopoverContext } from "./PopoverTypes";
+
+/**
+ * The content that is displayed for a Popover when it is open, displayed
+ * alongside an element.
+ *
+ * @prop {"top" | "right" | "bottom" | "left"} site -- Where the popover will be
+ * shown, relative to the popover button
+ * @prop {"start" | "center" | "end"} alignment -- How the popover will be
+ * aligned, relative to the popover button
+ */
+export default function PopoverContentAnchored($props: any) {
+	$props.side ??= "bottom";
+	$props.alignment ??= "center";
+
+	let div: HTMLDivElement;
+
+	let closeOnClick = false;
+
+	// Get stuff out of the PopoverContext
+	const context = $context[PopoverContextName] as PopoverContext;
+	if (!context) {
+		throw new Error("PopoverContentAnchored must be contained within a Popover");
+	}
+	let $state = context.state;
+
+	let first = true;
+	$run(() => {
+		let visible = $state.visible;
+
+		if (first) {
+			first = false;
+			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();
+			setPosition();
+			if (context.focusFirstElement) {
+				context.focusFirstElement();
+			}
+			const scrollParent = getScrollParent(context.anchorElement)
+			scrollParent.addEventListener("resize", setPosition);
+			scrollParent.addEventListener("scroll", setPosition);
+		} else {
+			removeDocumentEvent("mousedown", handleDocumentMouseDown);
+			removeDocumentEvent("click", handleDocumentClick);
+			// 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 handleDocumentMouseDown() {
+		closeOnClick = true;
+	}
+
+	function handleDocumentClick(e: MouseEvent) {
+		if (
+			closeOnClick &&
+			div &&
+			!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("PopoverContentAnchored must have an anchor element");
+		}
+
+		if (div) {
+			setPopoverPosition(context.anchorElement, div, $props.side, $props.alignment);
+		}
+	}
+
+	@render {
+		<div style="display: content;">
+			@if ($state.visible) {
+				<div
+					id={$props.id}
+					class={`torp-popover-content-anchored ${$props.class ?? ""}`.trim()}
+					&ref={div}
+					:onmount={(el) => setPopoverPosition(context.anchorElement, el, $props.side, $props.alignment)}
+				>
+					<:slot />
+				</div>
+			}
+		</div>
+	}
+}