@torpor/ui 0.0.17 → 0.1.0

package/src/mount/hoverTrigger.ts

@@ -0,0 +1,59 @@
+interface HoverTriggerOptions {
+	onHover: (node: HTMLElement, e: TouchEvent | MouseEvent) => void;
+	onExit?: (node: HTMLElement, e: TouchEvent | MouseEvent) => void;
+	hoverDelay?: number;
+	touchDelay?: number;
+}
+
+export default function hoverTrigger(node: HTMLElement, options: HoverTriggerOptions): () => void {
+	const { onHover, onExit } = options;
+	const hoverDelay = options.hoverDelay || 1000;
+	const touchDelay = options.touchDelay || 1000;
+
+	let interval: NodeJS.Timeout | undefined;
+
+	// Add click event handlers to the node
+	node.addEventListener("mouseenter", handleMouseEnter);
+	node.addEventListener("mouseleave", handleMouseLeave);
+	node.addEventListener("mousemove", handleMouseMove);
+	node.addEventListener("touchstart", handleMouseEnter);
+	node.addEventListener("touchend", handleMouseLeave);
+
+	function handleMouseEnter(e: MouseEvent | TouchEvent) {
+		// Handle the hover after a delay
+		e.preventDefault();
+		if (!interval) {
+			const delay = e.type.startsWith("mouse") ? hoverDelay : touchDelay;
+			interval = setTimeout(() => onHover(node, e), delay);
+		}
+	}
+
+	function handleMouseLeave(e: MouseEvent | TouchEvent) {
+		// Prevent short hovers or touches from firing the event
+		if (interval) {
+			clearTimeout(interval);
+			interval = undefined;
+		}
+
+		if (onExit) {
+			onExit(node, e);
+		}
+	}
+
+	function handleMouseMove(e: MouseEvent) {
+		// Reset the interval on mouse move
+		if (interval) {
+			clearTimeout(interval);
+			interval = setTimeout(() => onHover(node, e), hoverDelay);
+		}
+	}
+
+	// Remove the event listeners from the node on destroy
+	return () => {
+		node.removeEventListener("mouseenter", handleMouseEnter);
+		node.removeEventListener("mouseleave", handleMouseLeave);
+		node.removeEventListener("mousemove", handleMouseMove);
+		node.removeEventListener("touchstart", handleMouseEnter);
+		node.removeEventListener("touchend", handleMouseLeave);
+	};
+}

package/src/mount/trapFocus.ts

@@ -0,0 +1,58 @@
+export interface TrapFocusOptions {
+	focusableElements: HTMLElement[];
+}
+
+export function trapFocus(node: HTMLElement, options?: TrapFocusOptions): () => void {
+	options = options || { focusableElements: [] };
+
+	// Selectors for all things that are focusable:
+	const focusableSelectors = [
+		"a[href]",
+		"area[href]",
+		'input:not([disabled]):not([type="hidden"]):not([aria-hidden])',
+		"select:not([disabled]):not([aria-hidden])",
+		"textarea:not([disabled]):not([aria-hidden])",
+		"button:not([disabled]):not([aria-hidden])",
+		"iframe",
+		"object",
+		"embed",
+		"[contenteditable]",
+		'[tabindex]:not([tabindex^="-"])',
+	];
+
+	// Set the focusable elements array in the options, which can be used in the caller e.g. to focus the first element
+	options.focusableElements = Array.from(node.querySelectorAll(focusableSelectors.join()));
+
+	// Store first and last focusable elements
+	const firstFocusableElement = options.focusableElements[0] as HTMLElement;
+	const lastFocusableElement = options.focusableElements[
+		options.focusableElements.length - 1
+	] as HTMLElement;
+
+	// Add the keydown event listener to the node
+	node.addEventListener("keydown", handleKey);
+
+	// On Tab or Shift+Tab, move through the focusable elements, wrapping at either end
+	function handleKey(e: KeyboardEvent) {
+		if (e.key === "Tab") {
+			if (e.shiftKey) {
+				if (document.activeElement === firstFocusableElement) {
+					// Shift + Tab on the first element, so move to the last one
+					lastFocusableElement.focus();
+					e.preventDefault();
+				}
+			} else {
+				if (document.activeElement === lastFocusableElement) {
+					// Tab on the last element, so move to the first one
+					firstFocusableElement.focus();
+					e.preventDefault();
+				}
+			}
+		}
+	}
+
+	// Remove the keydown event listener from the node on destroy
+	return () => {
+		node.removeEventListener("keydown", handleKey);
+	};
+}

package/src/utils/documentEvents.ts

@@ -0,0 +1,17 @@
+export function addDocumentEvent<K extends keyof DocumentEventMap>(
+	type: K,
+	listener: (this: Document, ev: DocumentEventMap[K]) => any
+): void {
+	if (typeof document !== 'undefined') {
+		document.addEventListener(type, listener);
+	}
+}
+
+export function removeDocumentEvent<K extends keyof DocumentEventMap>(
+	type: K,
+	listener: (this: Document, ev: DocumentEventMap[K]) => any
+): void {
+	if (typeof document !== 'undefined') {
+		document.removeEventListener(type, listener);
+	}
+}

package/src/utils/getScrollParent.ts

@@ -0,0 +1,22 @@
+// From https://stackoverflow.com/a/76535387
+export default function getScrollParent(node: Element): Element {
+	let currentParent = node.parentElement;
+	while (currentParent) {
+		if (isScrollable(currentParent)) {
+			return currentParent;
+		}
+		currentParent = currentParent.parentElement;
+	}
+	return document.scrollingElement || document.documentElement;
+}
+
+function isScrollable(node: Element): boolean {
+	if (!(node instanceof HTMLElement || node instanceof SVGElement)) {
+		return false;
+	}
+	const style = getComputedStyle(node);
+	return ["overflow", "overflow-x", "overflow-y"].some((propertyName) => {
+		const value = style.getPropertyValue(propertyName);
+		return value === "auto" || value === "scroll";
+	});
+}

package/src/utils/setContextPosition.ts

@@ -0,0 +1,31 @@
+interface Point {
+	x: number;
+	y: number;
+}
+
+export default function setContextPosition(
+	anchor: HTMLElement,
+	content: HTMLElement,
+	position: Point,
+): void {
+	var anchorRect = anchor.getBoundingClientRect();
+	var contentRect = content.getBoundingClientRect();
+
+	content.style.position = "fixed";
+
+	// Try to make sure the content is entirely on the screen horizontally
+	// Just move it left or right -- the pointer is outside the content vertically so moving it left
+	// or right won't make the content appear over the cursor
+	let left = anchorRect.left + position.x;
+	left = Math.min(left, window.innerWidth - contentRect.width);
+	left = Math.max(left, 0);
+	content.style.left = left + "px";
+
+	// Try to make sure the content is entirely on the screen vertically
+	// Show it above the position if it wouldn't fit
+	let top = anchorRect.top + position.y;
+	if (top + contentRect.height > window.innerHeight) {
+		top -= contentRect.height;
+	}
+	content.style.top = top + "px";
+}

package/src/utils/setPopoverPosition.ts

@@ -0,0 +1,138 @@
+export default function setPopoverPosition(
+	anchor: HTMLElement,
+	content: HTMLElement,
+	side: "top" | "right" | "bottom" | "left",
+	alignment: "start" | "center" | "end",
+): void {
+	var anchorRect = anchor.getBoundingClientRect();
+	var contentRect = content.getBoundingClientRect();
+
+	content.style.position = "fixed";
+
+	// Check that we there is enough room to show the content on the side requested
+	// Otherwise, if there is enough room on the other side, show it there instead
+	let calculatedSide = side;
+	const canShowOnTop = anchorRect.top - contentRect.height >= 0;
+	const canShowAtRight = anchorRect.right + contentRect.width <= window.innerWidth;
+	const canShowOnBottom = anchorRect.bottom + contentRect.height <= window.innerHeight;
+	const canShowAtLeft = anchorRect.left - contentRect.width >= 0;
+	switch (side) {
+		case "top": {
+			if (!canShowOnTop && canShowOnBottom) {
+				calculatedSide = "bottom";
+			}
+			break;
+		}
+		case "right": {
+			if (!canShowAtRight && canShowAtLeft) {
+				calculatedSide = "left";
+			}
+			break;
+		}
+		case "bottom": {
+			if (!canShowOnBottom && canShowOnTop) {
+				calculatedSide = "top";
+			}
+			break;
+		}
+		case "left": {
+			if (!canShowAtLeft && canShowAtRight) {
+				calculatedSide = "right";
+			}
+			break;
+		}
+		default: {
+			throw new Error(`Invalid MenuPopout side: ${side}`);
+		}
+	}
+
+	switch (calculatedSide) {
+		case "top": {
+			content.style.top = anchorRect.top - contentRect.height + "px";
+			setVerticalAlignment(content, anchorRect, contentRect, alignment);
+			break;
+		}
+		case "right": {
+			content.style.left = anchorRect.right + "px";
+			setHorizontalAlignment(content, anchorRect, contentRect, alignment);
+			break;
+		}
+		case "bottom": {
+			content.style.top = anchorRect.bottom + "px";
+			setVerticalAlignment(content, anchorRect, contentRect, alignment);
+			break;
+		}
+		case "left": {
+			content.style.left = anchorRect.left - contentRect.width + "px";
+			setHorizontalAlignment(content, anchorRect, contentRect, alignment);
+			break;
+		}
+		default: {
+			throw new Error(`Invalid MenuPopout side: ${side}`);
+		}
+	}
+}
+
+function setVerticalAlignment(
+	content: HTMLElement,
+	anchorRect: DOMRect,
+	contentRect: DOMRect,
+	alignment: "start" | "center" | "end",
+) {
+	let left = 0;
+	switch (alignment) {
+		case "start": {
+			left = anchorRect.left;
+			break;
+		}
+		case "center": {
+			left = anchorRect.left + anchorRect.width / 2 - contentRect.width / 2;
+			break;
+		}
+		case "end": {
+			left = anchorRect.right - contentRect.width;
+			break;
+		}
+		default: {
+			throw new Error(`Invalid Popout alignment: ${alignment}`);
+		}
+	}
+
+	// Try to make sure the content is entirely on the screen horizontally
+	left = Math.min(left, window.innerWidth - contentRect.width);
+	left = Math.max(left, 0);
+
+	content.style.left = left + "px";
+}
+
+function setHorizontalAlignment(
+	content: HTMLElement,
+	anchorRect: DOMRect,
+	contentRect: DOMRect,
+	alignment: "start" | "center" | "end",
+) {
+	let top = 0;
+	switch (alignment) {
+		case "start": {
+			top = anchorRect.top;
+			break;
+		}
+		case "center": {
+			top = anchorRect.top + anchorRect.height / 2 - contentRect.height / 2;
+			break;
+		}
+		case "end": {
+			top = anchorRect.bottom - contentRect.height;
+			break;
+		}
+		default: {
+			throw new Error(`Invalid Popout alignment: ${alignment}`);
+		}
+	}
+
+	// Try to make sure the content is entirely on the screen vertically
+	top = Math.min(top, window.innerHeight - contentRect.height);
+	top = Math.max(top, 0);
+
+	content.style.top = top + "px";
+}

package/test/Accordion/accessibility.test.ts

@@ -1,14 +1,11 @@
 import { queryByText } from "@testing-library/dom";
 import "@testing-library/jest-dom/vitest";
-import userEvent from "@testing-library/user-event";
 import { mount } from "@torpor/view";
 import { describe, expect, it } from "vitest";
 import AccordionAccessibility from "./components/AccordionAccessibility.torp";
 
 describe("Accordion", () => {
 	it("Accessibility", async () => {
-		const user = userEvent.setup();
-
 		const container = document.createElement("div");
 		document.body.appendChild(container);
 		mount(container, AccordionAccessibility, { value: ["1", "3"] });

package/test/Accordion/for-items.test.ts

@@ -7,8 +7,6 @@ import AccordionList from "./components/AccordionList.torp";
 
 describe("Accordion", () => {
 	it("Items in a for loop", async () => {
-		const user = userEvent.setup();
-
 		let $state = $watch({
 			value: "1",
 			items: [
@@ -35,7 +33,7 @@ describe("Accordion", () => {
 		expect(queryByText(container, "Content 3")).not.toBeInTheDocument();
 
 		// Clicking header 1 should reveal body 1
-		await user.click(getByText(container, "Item 1"));
+		await userEvent.click(getByText(container, "Item 1"));
 		expect(queryByText(container, "Content 1")).toBeInTheDocument();
 
 		$state.items.push({ id: 3, header: "Item 4", text: "Content 4" });
@@ -47,7 +45,7 @@ describe("Accordion", () => {
 		expect(queryByText(container, "Content 4")).not.toBeInTheDocument();
 
 		// Clicking header 4 should reveal body 4
-		await user.click(getByText(container, "Item 4"));
+		await userEvent.click(getByText(container, "Item 4"));
 		expect(queryByText(container, "Content 1")).not.toBeInTheDocument();
 		expect(queryByText(container, "Content 4")).toBeInTheDocument();
 	});

package/test/Accordion/keyboard.test.ts

@@ -1,14 +1,11 @@
 import { fireEvent, getByText, queryByText } from "@testing-library/dom";
 import "@testing-library/jest-dom/vitest";
-import userEvent from "@testing-library/user-event";
 import { mount } from "@torpor/view";
 import { describe, expect, it } from "vitest";
 import AccordionKeyboard from "./components/AccordionKeyboard.torp";
 
 describe("Accordion", () => {
 	it("Keyboard", async () => {
-		const user = userEvent.setup();
-
 		const container = document.createElement("div");
 		document.body.appendChild(container);
 		mount(container, AccordionKeyboard, { value: ["1", "2"] });

package/test/Accordion/multiple-item-toggle.test.ts

@@ -7,8 +7,6 @@ import AccordionMultiple from "./components/AccordionMultiple.torp";
 
 describe("Accordion", () => {
 	it("Multiple item toggle", async () => {
-		const user = userEvent.setup();
-
 		const container = document.createElement("div");
 		document.body.appendChild(container);
 		mount(container, AccordionMultiple);
@@ -18,16 +16,16 @@ describe("Accordion", () => {
 		expect(queryByText(container, "Content 3")).not.toBeInTheDocument();
 
 		// Clicking header 1 should reveal body 1
-		await user.click(getByText(container, "Header 1"));
+		await userEvent.click(getByText(container, "Header 1"));
 		expect(queryByText(container, "Content 1")).toBeInTheDocument();
 
 		// Clicking header 2 should reveal body 1 and body 2
-		await user.click(getByText(container, "Header 2"));
+		await userEvent.click(getByText(container, "Header 2"));
 		expect(queryByText(container, "Content 1")).toBeInTheDocument();
 		expect(queryByText(container, "Content 2")).toBeInTheDocument();
 
 		// Clicking header 2 again should hide body 2
-		await user.click(getByText(container, "Header 2"));
+		await userEvent.click(getByText(container, "Header 2"));
 		expect(queryByText(container, "Content 1")).toBeInTheDocument();
 		expect(queryByText(container, "Content 2")).not.toBeInTheDocument();
 	});

package/test/Accordion/single-item-toggle.test.ts

@@ -7,8 +7,6 @@ import AccordionSingle from "./components/AccordionSingle.torp";
 
 describe("Accordion", () => {
 	it("Single item toggle", async () => {
-		const user = userEvent.setup();
-
 		const container = document.createElement("div");
 		document.body.appendChild(container);
 		mount(container, AccordionSingle);
@@ -18,16 +16,16 @@ describe("Accordion", () => {
 		expect(queryByText(container, "Content 3")).not.toBeInTheDocument();
 
 		// Clicking header 1 should reveal body 1
-		await user.click(getByText(container, "Header 1"));
+		await userEvent.click(getByText(container, "Header 1"));
 		expect(queryByText(container, "Content 1")).toBeInTheDocument();
 
 		// Clicking header 2 should hide body 1 and reveal body 2
-		await user.click(getByText(container, "Header 2"));
+		await userEvent.click(getByText(container, "Header 2"));
 		expect(queryByText(container, "Content 1")).not.toBeInTheDocument();
 		expect(queryByText(container, "Content 2")).toBeInTheDocument();
 
 		// Clicking header 2 again should hide body 2
-		await user.click(getByText(container, "Header 2"));
+		await userEvent.click(getByText(container, "Header 2"));
 		expect(queryByText(container, "Content 2")).not.toBeInTheDocument();
 	});
 });

package/test/Dialog/accessibility-alert.test.ts

@@ -0,0 +1,40 @@
+import { queryByText } from "@testing-library/dom";
+import "@testing-library/jest-dom/vitest";
+import { mount } from "@torpor/view";
+import { assert, describe, expect, it } from "vitest";
+import DialogAccessibility from "./components/DialogAccessibility.torp";
+
+describe("Dialog", () => {
+	it("Accessibility -- alert", async () => {
+		const container = document.createElement("div");
+		document.body.appendChild(container);
+		mount(container, DialogAccessibility, { alert: true });
+
+		// Tests from https://www.w3.org/WAI/ARIA/apg/patterns/alertdialog/
+		// This is for a Dialog with its alert property set to true
+
+		// The element that contains all elements of the dialog, including the
+		// alert message and any dialog buttons, has role alertdialog
+		let dialog = queryByText(container, "Which color do you prefer?");
+		assert(dialog, "Dialog not found");
+		assert(dialog.parentElement, "Dialog parent not found");
+		dialog = dialog.parentElement;
+		expect(dialog).toHaveAttribute("role", "alertdialog");
+
+		// The element with role alertdialog has either:
+		//   * A value for aria-labelledby that refers to the element containing
+		//     the title of the dialog if the dialog has a visible label
+		//   * A value for aria-label if the dialog does not have a visible
+		//     label
+		const header = queryByText(container, "Color preference");
+		assert(header, "Header not found");
+		expect(dialog).toHaveAttribute("aria-labelledby", header.id);
+
+		// The element with role alertdialog has a value set for
+		// aria-describedby that refers to the element containing the alert
+		// message
+		const body = queryByText(container, "Which color do you prefer?");
+		assert(body, "Body not found");
+		expect(dialog).toHaveAttribute("aria-describedby", body.id);
+	});
+});

package/test/Dialog/accessibility-modal.test.ts

@@ -0,0 +1,52 @@
+import { queryByText } from "@testing-library/dom";
+import "@testing-library/jest-dom/vitest";
+import { mount } from "@torpor/view";
+import { assert, describe, expect, it } from "vitest";
+import DialogAccessibility from "./components/DialogAccessibility.torp";
+
+describe("Dialog", () => {
+	it("Accessibility -- modal", async () => {
+		const container = document.createElement("div");
+		document.body.appendChild(container);
+		mount(container, DialogAccessibility, { modal: true, ariaAnnounce: false });
+
+		// Tests from https://www.w3.org/WAI/ARIA/apg/patterns/dialogmodal/
+		// This is for a Dialog in a Popover with its modal property set to true
+
+		// The element that serves as the dialog container has a role of dialog
+		let dialog = queryByText(container, "Which color do you prefer?");
+		assert(dialog, "Dialog not found");
+		assert(dialog.parentElement, "Dialog parent not found");
+		dialog = dialog.parentElement;
+		expect(dialog).toHaveAttribute("role", "dialog");
+
+		// All elements required to operate the dialog are descendants of the
+		// element that has role dialog
+
+		// The dialog container element has aria-modal set to true
+		expect(dialog).toHaveAttribute("aria-modal", "true");
+
+		// The dialog has either:
+		//   * A value set for the aria-labelledby property that refers to a
+		//     visible dialog title
+		//   * A label specified by aria-label
+		const header = queryByText(container, "Color preference");
+		assert(header, "Header not found");
+		expect(dialog).toHaveAttribute("aria-labelledby", header.id);
+
+		// Optionally, the aria-describedby property is set on the element with
+		// the dialog role to indicate which element or elements in the dialog
+		// contain content that describes the primary purpose or message of the
+		// dialog. Specifying descriptive elements enables screen readers to
+		// announce the description along with the dialog title and initially
+		// focused element when the dialog opens, which is typically helpful
+		// only when the descriptive content is simple and can easily be
+		// understood without structural information. It is advisable to omit
+		// specifying aria-describedby if the dialog content includes semantic
+		// structures, such as lists, tables, or multiple paragraphs, that need
+		// to be perceived in order to easily understand the content, i.e., if
+		// the content would be difficult to understand when announced as a
+		// single unbroken string
+		expect(dialog).not.toHaveAttribute("aria-describedby");
+	});
+});

package/test/Dialog/components/CustomDialog.torp

@@ -0,0 +1,20 @@
+import { Popover, PopoverContentStatic } from "../../../src/Popover/index";
+import { Dialog, DialogBody, DialogFooter, DialogButton } from "../../../src/Dialog/index";
+
+export default function CustomDialog($props: any) {
+	@render {
+		<Popover visible callback={$props.callback}>
+			<PopoverContentStatic>
+				<Dialog>
+					<DialogBody>
+						<p>Which color do you prefer?</p>
+					</DialogBody>
+					<DialogFooter>
+						<DialogButton value="blue">Blue</DialogButton>
+						<DialogButton value="red">Red</DialogButton>
+					</DialogFooter>
+				</Dialog>
+			</PopoverContentStatic>
+		</Popover>
+	}
+}

package/test/Dialog/components/DialogAccessibility.torp

@@ -0,0 +1,31 @@
+import { Popover, PopoverContentStatic } from '../../../src/Popover/index';
+import {
+	Dialog,
+	DialogHeader,
+	DialogBody,
+	DialogFooter,
+	DialogButton
+} from '../../../src/Dialog/index';
+
+export default function DialogAccessibility($props: any) {
+	$props.modal ??= false;
+	$props.alert ??= false;
+	$props.ariaAnnounce ??= true;
+
+	let color = '';
+
+	@render {
+		<Popover visible modal={$props.modal}>
+			<PopoverContentStatic>
+				<Dialog alert={$props.alert}>
+					<DialogHeader>Color preference</DialogHeader>
+					<DialogBody ariaAnnounce={$props.ariaAnnounce}>Which color do you prefer?</DialogBody>
+					<DialogFooter>
+						<DialogButton value="blue" onclick={() => (color = 'blue')}>Blue</DialogButton>
+						<DialogButton value="red" onclick={() => (color = 'red')}>Red</DialogButton>
+					</DialogFooter>
+				</Dialog>
+			</PopoverContentStatic>
+		</Popover>
+	}
+}

package/test/Dialog/components/DialogFunction.torp

@@ -0,0 +1,22 @@
+import { showPopoverPrompt } from "../../../src/Popover";
+import CustomDialog from "./CustomDialog.torp";
+
+export default function DialogFunction($props: any) {
+	let $state = $watch({ color: "" });
+
+	async function show() {
+		// @ts-ignore
+		$state.color = await showPopoverPrompt(CustomDialog, null, $parent);
+	}
+
+	@render {
+		<div>
+			<button type="button" onclick={show}>Show the modal</button>
+
+			@if ($state.color) {
+				<p>Your favorite color is {$state.color}?!</p>
+			}
+		</div>
+	}
+}
+

package/test/Dialog/components/DialogVariable.torp

@@ -0,0 +1,35 @@
+import { Popover, PopoverContentStatic } from "../../../src/Popover/index";
+import { Dialog, DialogBody, DialogFooter, DialogButton } from "../../../src/Dialog/index";
+
+export default function DialogVariable($props: any) {
+	let $state = $watch({
+		color: "",
+		showPopover: false
+	});
+
+	@render {
+		<div>
+			<button type="button" onclick={(e) => ($state.showPopover = !$state.showPopover)}>
+				Show the modal
+			</button>
+
+			@if ($state.color) {
+				<p>Your favorite color is {$state.color}?!</p>
+			}
+
+			<Popover visible={$state.showPopover}>
+				<PopoverContentStatic>
+					<Dialog>
+						<DialogBody>
+							<p>Which color do you prefer?</p>
+						</DialogBody>
+						<DialogFooter>
+							<DialogButton value="blue" onclick={() => ($state.color = "blue")}>Blue</DialogButton>
+							<DialogButton value="red" onclick={() => ($state.color = "red")}>Red</DialogButton>
+						</DialogFooter>
+					</Dialog>
+				</PopoverContentStatic>
+			</Popover>
+		</div>
+	}
+}