@torpor/ui 0.0.17 → 0.1.1

package/dist/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/dist/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/dist/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/dist/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/dist/NavMenu/index.cjs

@@ -0,0 +1,78 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/NavMenu/index.ts
+var NavMenu_exports = {};
+__export(NavMenu_exports, {
+  NavMenu: () => NavMenu_default,
+  NavMenuButton: () => NavMenuButton_default,
+  NavMenuElement: () => NavMenuElement_default,
+  NavMenuGroup: () => NavMenuGroup_default,
+  NavMenuGroupHeader: () => NavMenuGroupHeader_default,
+  NavMenuLink: () => NavMenuLink_default,
+  NavMenuPopout: () => NavMenuPopout_default,
+  NavMenuPopoutButton: () => NavMenuPopoutButton_default,
+  NavMenuPopoutContent: () => NavMenuPopoutContent_default,
+  NavMenuSeparator: () => NavMenuSeparator_default
+});
+module.exports = __toCommonJS(NavMenu_exports);
+
+// src/NavMenu/NavMenu.torp
+import NavMenu_default from "./NavMenu.torp";
+
+// src/NavMenu/NavMenuButton.torp
+import NavMenuButton_default from "./NavMenuButton.torp";
+
+// src/NavMenu/NavMenuElement.torp
+import NavMenuElement_default from "./NavMenuElement.torp";
+
+// src/NavMenu/NavMenuGroup.torp
+import NavMenuGroup_default from "./NavMenuGroup.torp";
+
+// src/NavMenu/NavMenuGroupHeader.torp
+import NavMenuGroupHeader_default from "./NavMenuGroupHeader.torp";
+
+// src/NavMenu/NavMenuLink.torp
+import NavMenuLink_default from "./NavMenuLink.torp";
+
+// src/NavMenu/NavMenuPopout.torp
+import NavMenuPopout_default from "./NavMenuPopout.torp";
+
+// src/NavMenu/NavMenuPopoutButton.torp
+import NavMenuPopoutButton_default from "./NavMenuPopoutButton.torp";
+
+// src/NavMenu/NavMenuPopoutContent.torp
+import NavMenuPopoutContent_default from "./NavMenuPopoutContent.torp";
+
+// src/NavMenu/NavMenuSeparator.torp
+import NavMenuSeparator_default from "./NavMenuSeparator.torp";
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  NavMenu,
+  NavMenuButton,
+  NavMenuElement,
+  NavMenuGroup,
+  NavMenuGroupHeader,
+  NavMenuLink,
+  NavMenuPopout,
+  NavMenuPopoutButton,
+  NavMenuPopoutContent,
+  NavMenuSeparator
+});
+//# sourceMappingURL=index.cjs.map

package/dist/NavMenu/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/NavMenu/index.ts"],"sourcesContent":["import NavMenu from \"./NavMenu.torp\";\nimport NavMenuButton from \"./NavMenuButton.torp\";\nimport NavMenuElement from \"./NavMenuElement.torp\";\nimport NavMenuGroup from \"./NavMenuGroup.torp\";\nimport NavMenuGroupHeader from \"./NavMenuGroupHeader.torp\";\nimport NavMenuLink from \"./NavMenuLink.torp\";\nimport NavMenuPopout from \"./NavMenuPopout.torp\";\nimport NavMenuPopoutButton from \"./NavMenuPopoutButton.torp\";\nimport NavMenuPopoutContent from \"./NavMenuPopoutContent.torp\";\nimport NavMenuSeparator from \"./NavMenuSeparator.torp\";\n\nexport {\n\tNavMenu,\n\tNavMenuLink,\n\tNavMenuButton,\n\tNavMenuElement,\n\tNavMenuPopout,\n\tNavMenuPopoutButton,\n\tNavMenuPopoutContent,\n\tNavMenuGroup,\n\tNavMenuGroupHeader,\n\tNavMenuSeparator,\n};\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;A","names":[]}

package/dist/NavMenu/index.js

@@ -0,0 +1,42 @@
+// src/NavMenu/NavMenu.torp
+import NavMenu_default from "./NavMenu.torp";
+
+// src/NavMenu/NavMenuButton.torp
+import NavMenuButton_default from "./NavMenuButton.torp";
+
+// src/NavMenu/NavMenuElement.torp
+import NavMenuElement_default from "./NavMenuElement.torp";
+
+// src/NavMenu/NavMenuGroup.torp
+import NavMenuGroup_default from "./NavMenuGroup.torp";
+
+// src/NavMenu/NavMenuGroupHeader.torp
+import NavMenuGroupHeader_default from "./NavMenuGroupHeader.torp";
+
+// src/NavMenu/NavMenuLink.torp
+import NavMenuLink_default from "./NavMenuLink.torp";
+
+// src/NavMenu/NavMenuPopout.torp
+import NavMenuPopout_default from "./NavMenuPopout.torp";
+
+// src/NavMenu/NavMenuPopoutButton.torp
+import NavMenuPopoutButton_default from "./NavMenuPopoutButton.torp";
+
+// src/NavMenu/NavMenuPopoutContent.torp
+import NavMenuPopoutContent_default from "./NavMenuPopoutContent.torp";
+
+// src/NavMenu/NavMenuSeparator.torp
+import NavMenuSeparator_default from "./NavMenuSeparator.torp";
+export {
+  NavMenu_default as NavMenu,
+  NavMenuButton_default as NavMenuButton,
+  NavMenuElement_default as NavMenuElement,
+  NavMenuGroup_default as NavMenuGroup,
+  NavMenuGroupHeader_default as NavMenuGroupHeader,
+  NavMenuLink_default as NavMenuLink,
+  NavMenuPopout_default as NavMenuPopout,
+  NavMenuPopoutButton_default as NavMenuPopoutButton,
+  NavMenuPopoutContent_default as NavMenuPopoutContent,
+  NavMenuSeparator_default as NavMenuSeparator
+};
+//# sourceMappingURL=index.js.map

package/dist/NavMenu/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}

package/dist/Offscreen/Offscreen.torp

@@ -0,0 +1,93 @@
+
+export default function Offscreen($props: any) {
+	$props.visible ||= true;
+	$props.position ||= "left";
+
+	let offscreen: HTMLElement | undefined;
+
+	// From https://stackoverflow.com/a/46707458
+	function measure(el, fn) {
+		let oldVisibility = el.style.visibility;
+		let oldPosition = el.style.position;
+
+		let oldParent = el.parentNode;
+		let oldBefore = el.nextNode;
+
+		el.style.visibility = "hidden";
+		el.style.position = "absolute";
+
+		document.body.appendChild(el);
+		let result = fn(el);
+		el.parentNode.removeChild(el);
+
+		oldParent.appendChild(el, oldBefore);
+		el.style.visibility = oldVisibility;
+		el.style.position = oldPosition;
+
+		return result;
+	}
+
+	function transitionArgs() {
+		if (offscreen) {
+			switch ($props.position) {
+				case "left": {
+					offscreen.style.left = 0;
+					const width = measure(offscreen, (el) => el.offsetWidth);
+					return [
+						{ transform: `translateX(-${width}px)` },
+						{ transform: "translateX(0px)" }
+					];
+				}
+				case "top": {
+					offscreen.style.top = 0;
+					const height = measure(offscreen, (el) => el.offsetHeight);
+					return [
+						{ transform: `translateY(-${height}px)` },
+						{ transform: "translateY(0px)" }
+					];
+				}
+				case "right": {
+					offscreen.style.right = 0;
+					const width = measure(offscreen, (el) => el.offsetWidth);
+					return [
+						{ transform: `translateX(${width}px)` },
+						{ transform: "translateX(0px)" }
+					];
+				}
+				case "bottom": {
+					offscreen.style.bottom = 0;
+					const height = measure(offscreen, (el) => el.offsetHeight);
+					return [
+						{ transform: `translateY(${height}px)` },
+						{ transform: "translateY(0px)" }
+					];
+				}
+			}
+		}
+	}
+
+	function close() {
+		$props.visible = false;
+		if ($props.onclose) {
+			$props.onclose()
+		}
+	}
+
+	@render {
+		<div style="display: contents">			
+			@if ($props.visible) {
+				<div onclick={close} >
+					<div
+						id={$props.id}
+						class={`torp-offscreen ${$props.class ?? ""}`.trim()}
+						style="position: fixed;"
+						:transition={transitionArgs()}
+						&ref={offscreen}
+					>
+						<:slot />
+					</div>
+				</div>
+			}
+		</div>
+	}
+}

package/dist/Offscreen/index.cjs

@@ -0,0 +1,33 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/Offscreen/index.ts
+var Offscreen_exports = {};
+__export(Offscreen_exports, {
+  Offscreen: () => Offscreen_default
+});
+module.exports = __toCommonJS(Offscreen_exports);
+
+// src/Offscreen/Offscreen.torp
+import Offscreen_default from "./Offscreen.torp";
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Offscreen
+});
+//# sourceMappingURL=index.cjs.map

package/dist/Offscreen/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/Offscreen/index.ts"],"sourcesContent":["import Offscreen from \"./Offscreen.torp\";\n\nexport { Offscreen };\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;A","names":[]}

package/dist/Offscreen/index.js

@@ -0,0 +1,6 @@
+// src/Offscreen/Offscreen.torp
+import Offscreen_default from "./Offscreen.torp";
+export {
+  Offscreen_default as Offscreen
+};
+//# sourceMappingURL=index.js.map

package/dist/Offscreen/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}

package/dist/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)
+ * 	<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) {
+	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>
+	}
+}