@torpor/ui 0.2.1 → 0.3.1

package/src/motion/slide.ts

@@ -0,0 +1,45 @@
+import { type Animation } from "@torpor/view";
+import measure from "./measure";
+
+interface Options extends KeyframeAnimationOptions {
+	side: "left" | "right" | "top" | "bottom";
+}
+
+export default function slide(el: HTMLElement, options?: Options): Animation {
+	let position = options?.side ?? "left";
+	switch (position) {
+		case "left": {
+			el.style.left = "0px";
+			const width = measure(el, (el) => el.offsetWidth);
+			const keyframes = [
+				{ transform: `translateX(-${width}px)` },
+				{ transform: "translateX(0px)" },
+			];
+			return { keyframes, options };
+		}
+		case "top": {
+			el.style.top = "0px";
+			const height = measure(el, (el) => el.offsetHeight);
+			const keyframes = [
+				{ transform: `translateY(-${height}px)` },
+				{ transform: "translateY(0px)" },
+			];
+			return { keyframes, options };
+		}
+		case "right": {
+			el.style.right = "0px";
+			const width = measure(el, (el) => el.offsetWidth);
+			const keyframes = [{ transform: `translateX(${width}px)` }, { transform: "translateX(0px)" }];
+			return { keyframes, options };
+		}
+		case "bottom": {
+			el.style.bottom = "0px";
+			const height = measure(el, (el) => el.offsetHeight);
+			const keyframes = [
+				{ transform: `translateY(${height}px)` },
+				{ transform: "translateY(0px)" },
+			];
+			return { keyframes, options };
+		}
+	}
+}

package/src/mount/clickPopover.ts

@@ -0,0 +1,51 @@
+//import type { Component } from "@torpor/view";
+//import showPopover from "../Modal/showModal";
+//
+//interface ClickPopoverOptions {
+//	popover: Component;
+//	props?: Record<PropertyKey, any>;
+//}
+//
+///**
+// * A mount directive for showing a popover when an element is clicked.
+// * @param node The element to show the popover for
+// * @param options Options for showing the popover, consisting of the popover component and any props
+// */
+//export default function clickPopover(node: HTMLElement, options: ClickPopoverOptions) {
+//	const { popover, props } = options;
+//
+//	// Add a click event handler to the node
+//	node.addEventListener("click", handleClick);
+//
+//	function handleClick(e: MouseEvent) {
+//		e.preventDefault();
+//		show();
+//	}
+//
+//	let div: HTMLDivElement;
+//
+//	function show() {
+//		// Show the popover in a div
+//		if (div) {
+//			document.body.removeChild(div);
+//		}
+//		div = document.createElement("div");
+//		document.body.appendChild(div);
+//
+//		showPopover(popover, node, props, div);
+//	}
+//
+//	return {
+//		destroy(): void {
+//			// Remove the event listener from the node on destroy
+//			node.removeEventListener("click", handleClick);
+//
+//			// Remove the div we added
+//			// TODO: Should we do this in more places?
+//			if (div) {
+//				document.body.removeChild(div);
+//			}
+//		},
+//	};
+//}
+//

package/src/mount/contextPopover.ts

@@ -0,0 +1,51 @@
+//import type { Component } from "@torpor/view";
+//import showPopover from "../Modal/showModal";
+//
+//interface ContextPopoverOptions {
+//	popover: Component;
+//	props?: Record<PropertyKey, any>;
+//}
+//
+///**
+// * A mount directive for showing a popover when the user opens an element's context menu.
+// * @param node The element to show the popover for
+// * @param options Options for showing the popover, consisting of the popover component and any props
+// */
+//export default function contextPopover(node: HTMLElement, options: ContextPopoverOptions) {
+//	const { popover, props } = options;
+//
+//	// Add a contextmenu event handler to the node
+//	node.addEventListener("contextmenu", handleClick);
+//
+//	function handleClick(e: MouseEvent) {
+//		e.preventDefault();
+//		show();
+//	}
+//
+//	let div: HTMLDivElement;
+//
+//	function show() {
+//		// Show the popover in a div
+//		if (div) {
+//			document.body.removeChild(div);
+//		}
+//		div = document.createElement("div");
+//		document.body.appendChild(div);
+//
+//		showPopover(popover, node, props, div);
+//	}
+//
+//	return {
+//		destroy(): void {
+//			// Remove the event listener from the node on destroy
+//			node.removeEventListener("contextmenu", handleClick);
+//
+//			// Remove the div we added
+//			// TODO: Should we do this in more places?
+//			if (div) {
+//				document.body.removeChild(div);
+//			}
+//		},
+//	};
+//}
+//

package/src/mount/hoverPopover.ts

@@ -0,0 +1,58 @@
+//import type { Component } from "@torpor/view";
+//import showPopover from "../Modal/showModal";
+//import hoverTrigger from "./hoverTrigger";
+//
+//interface HoverPopoverOptions {
+//	popover: Component;
+//	props?: Record<PropertyKey, any>;
+//	hoverDelay?: number;
+//	touchDelay?: number;
+//}
+//
+///**
+// * A mount directive for showing a popover when an element is hovered.
+// * @param node The element to show the popover for
+// * @param options Options for showing the popover, consisting of the popover component, any props and delays for hover and touch
+// */
+//export default function hoverPopover(node: HTMLElement, options: HoverPopoverOptions): () => void {
+//	const { popover, props, hoverDelay, touchDelay } = options;
+//
+//	let div: HTMLDivElement | undefined;
+//
+//	function onHover(node: HTMLElement, e: MouseEvent | TouchEvent) {
+//		// Show the popover in a div
+//		if (div) {
+//			document.body.removeChild(div);
+//		}
+//		div = document.createElement("div");
+//		document.body.appendChild(div);
+//
+//		// Get the position relative to the element, so we can reposition on scroll
+//		const rect = node.getBoundingClientRect();
+//		let position: { x: number; y: number };
+//		if (e.type.startsWith("mouse")) {
+//			const me = e as MouseEvent;
+//			position = { x: me.clientX - rect.left, y: me.clientY - rect.top };
+//		} else {
+//			const te = e as TouchEvent;
+//			position = {
+//				x: te.touches[0].clientX - rect.left,
+//				y: te.touches[0].clientY - rect.top,
+//			};
+//		}
+//		const allProps = Object.assign({}, props, { anchor: node, position });
+//
+//		showPopover(popover, node, allProps, div);
+//	}
+//
+//	function onExit() {
+//		// Remove the div
+//		if (div) {
+//			document.body.removeChild(div);
+//			div = undefined;
+//		}
+//	}
+//
+//	return hoverTrigger(node, { onHover, onExit, hoverDelay, touchDelay });
+//}
+//

package/test/Accordion/components/AccordionAccessibility.torp

@@ -6,9 +6,7 @@ import {
 	AccordionContent,
 } from "../../../src/Accordion/index";
 
-export default function AccordionAccessibility() {
-	$props ??= $watch({});
-
+export default function AccordionAccessibility($props: any) {
 	@render {
 		<Accordion value={$props.value} type="multiple">
 			<AccordionItem>

package/test/Accordion/components/AccordionKeyboard.torp

@@ -6,9 +6,7 @@ import {
 	AccordionContent,
 } from "../../../src/Accordion/index";
 
-export default function AccordionKeyboard() {
-	$props ??= $watch({});
-
+export default function AccordionKeyboard($props: any) {
 	@render {
 		<Accordion value={$props.value} type="multiple">
 			<AccordionItem>

package/test/Accordion/components/AccordionList.torp

@@ -6,9 +6,7 @@ import {
 	AccordionContent,
 } from "../../../src/Accordion/index";
 
-export default function AccordionList() {
-	$props ??= $watch({});
-
+export default function AccordionList($props: any) {
 	@render {
 		<Accordion value={$props.value}>
 			@for (let item of $props.items) {

package/test/Accordion/components/AccordionMultiple.torp

@@ -6,11 +6,9 @@ import {
 	AccordionContent,
 } from "../../../src/Accordion/index";
 
-export default function AccordionMultiple() {
-	$props ??= $watch({});
-
+export default function AccordionMultiple($props: any) {
 	@render {
-		<Accordion value={$props.value} type="multiple">
+		<Accordion value={$props?.value} type="multiple">
 			<AccordionItem>
 				<AccordionHeader as="h4">
 					<AccordionTrigger>Header 1</AccordionTrigger>

package/test/Accordion/components/AccordionSingle.torp

@@ -6,11 +6,9 @@ import {
 	AccordionContent,
 } from "../../../src/Accordion/index";
 
-export default function AccordionSingle() {
-	$props ??= $watch({});
-
+export default function AccordionSingle($props: any) {
 	@render {
-		<Accordion value={$props.value}>
+		<Accordion value={$props?.value}>
 			<AccordionItem>
 				<AccordionHeader as="h4">
 					<AccordionTrigger>Header 1</AccordionTrigger>

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

@@ -2,13 +2,13 @@ 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";
+import DialogModal from "./components/DialogModal.torp";
 
 describe("Dialog", () => {
 	it("Accessibility -- modal", async () => {
 		const container = document.createElement("div");
 		document.body.appendChild(container);
-		mount(container, DialogAccessibility, { modal: true, ariaAnnounce: false });
+		mount(container, DialogModal, { 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

package/test/Dialog/components/DialogAccessibility.torp

@@ -1,4 +1,3 @@
-import { Popover, PopoverContent } from "../../../src/Popover/index";
 import {
 	Dialog,
 	DialogHeader,
@@ -8,24 +7,19 @@ import {
 } 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}>
-			<PopoverContent>
-				<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>
-			</PopoverContent>
-		</Popover>
+		<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>
 	}
 }

package/test/Dialog/components/DialogFunction.torp

@@ -1,12 +1,11 @@
-import { showPopoverPrompt } from "../../../src/Popover";
-import CustomDialog from "./CustomDialog.torp";
+import { Modal, ModalContent, showPrompt } from "../../../src/Modal/index";
+import { Dialog, DialogBody, DialogFooter, DialogButton } from "../../../src/Dialog/index";
 
 export default function DialogFunction($props: any) {
 	let $state = $watch({ color: "" });
 
 	async function show() {
-		// @ts-ignore
-		$state.color = await showPopoverPrompt(CustomDialog, null, $parent);
+		$state.color = await showPrompt(CustomDialog, null, $parent);
 	}
 
 	@render {
@@ -18,3 +17,20 @@ export default function DialogFunction($props: any) {
 	}
 }
 
+function CustomDialog($props: any) {
+	@render {
+		<Modal visible callback={$props.callback}>
+			<ModalContent>
+				<Dialog>
+					<DialogBody>
+						<p>Which color do you prefer?</p>
+					</DialogBody>
+					<DialogFooter>
+						<DialogButton value="blue">Blue</DialogButton>
+						<DialogButton value="red">Red</DialogButton>
+					</DialogFooter>
+				</Dialog>
+			</ModalContent>
+		</Modal>
+	}
+}

package/test/Dialog/components/DialogModal.torp

@@ -0,0 +1,30 @@
+import { Modal, ModalContent } from "../../../src/Modal/index";
+import {
+	Dialog,
+	DialogHeader,
+	DialogBody,
+	DialogFooter,
+	DialogButton
+} from "../../../src/Dialog/index";
+
+export default function DialogModal($props: any) {
+	$props.alert ??= false;
+	$props.ariaAnnounce ??= true;
+
+	let color = "";
+
+	@render {
+		<Modal visible>
+			<ModalContent>
+				<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>
+			</ModalContent>
+		</Modal>
+	}
+}

package/test/Dialog/components/DialogVariable.torp

@@ -1,14 +1,14 @@
-import { Popover, PopoverContent } from "../../../src/Popover/index";
+import { Modal, ModalContent } from "../../../src/Modal/index";
 import { Dialog, DialogBody, DialogFooter, DialogButton } from "../../../src/Dialog/index";
 
 export default function DialogVariable($props: any) {
 	let $state = $watch({
 		color: "",
-		showPopover: false
+		showModal: false
 	});
 
 	@render {
-		<button type="button" onclick={(e) => ($state.showPopover = !$state.showPopover)}>
+		<button type="button" onclick={(e) => ($state.showModal = !$state.showModal)}>
 			Show the modal
 		</button>
 
@@ -16,8 +16,8 @@ export default function DialogVariable($props: any) {
 			<p>Your favorite color is {$state.color}?!</p>
 		}
 
-		<Popover visible={$state.showPopover}>
-			<PopoverContent>
+		<Modal &visible={$state.showModal}>
+			<ModalContent>
 				<Dialog>
 					<DialogBody>
 						<p>Which color do you prefer?</p>
@@ -27,7 +27,7 @@ export default function DialogVariable($props: any) {
 						<DialogButton value="red" onclick={() => ($state.color = "red")}>Red</DialogButton>
 					</DialogFooter>
 				</Dialog>
-			</PopoverContent>
-		</Popover>
+			</ModalContent>
+		</Modal>
 	}
 }

package/test/Disclosure/components/DisclosureTest.torp

@@ -6,10 +6,8 @@ import {
 } from "../../../src/Disclosure/index";
 
 export default function DisclosureAccessibility($props: { expanded: boolean }) {
-	$props ??= $watch({ expanded: false });
-
 	@render {
-		<Disclosure {$props.expanded}>
+		<Disclosure {$props?.expanded}>
 			<DisclosureHeader as="h4">
 				<DisclosureTrigger>Disclosure header</DisclosureTrigger>
 			</DisclosureHeader>

package/test/Menu/components/MenuAccessibility.torp

@@ -1,4 +1,4 @@
-import { Popover, PopoverContent } from "../../../src/Popover";
+import { Modal, ModalContent } from "../../../src/Modal";
 import {
 	Menu,
 	MenuButton,
@@ -14,8 +14,8 @@ import {
 
 export default function MenuAccessibility() {
 	@render {
-		<Popover visible>
-			<PopoverContent>
+		<Modal visible>
+			<ModalContent>
 				<Menu ariaLabel="A menu">
 					<MenuButton>Menu button</MenuButton>
 					<MenuButton disabled>Disabled button</MenuButton>
@@ -53,7 +53,7 @@ export default function MenuAccessibility() {
 						</MenuPopoutContent>
 					</MenuPopout>
 				</Menu>
-			</PopoverContent>
-		</Popover>
+			</ModalContent>
+		</Modal>
 	}
 }

package/test/Menu/components/MenuBasic.torp

@@ -1,4 +1,4 @@
-import { Popover, PopoverContent } from "../../../src/Popover";
+import { Modal, ModalContent } from "../../../src/Modal";
 import {
 	Menu,
 	MenuButton,
@@ -14,8 +14,8 @@ import {
 
 export default function MenuBasic() {
 	@render {
-		<Popover visible>
-			<PopoverContent>
+		<Modal visible>
+			<ModalContent>
 				<Menu ariaLabel="A menu">
 					<MenuButton>Menu button</MenuButton>
 					<MenuSeparator>---</MenuSeparator>
@@ -52,7 +52,7 @@ export default function MenuBasic() {
 						</MenuPopoutContent>
 					</MenuPopout>
 				</Menu>
-			</PopoverContent>
-		</Popover>
+			</ModalContent>
+		</Modal>
 	}
 }

package/test/Notification/components/NotificationFunction.torp

@@ -1,8 +1,5 @@
 import {
-	Notification,
 	NotificationContainer,
-	NotificationContent,
-	NotificationClose,
 	showNotification
 } from "../../../src/Notification/index";
 import CustomNotification from "./CustomNotification.torp";

package/test/Notification/components/NotificationVariable.torp

@@ -10,7 +10,7 @@ export default function NotificationVariable() {
 	});
 
 	@render {
-		<button type="button" onclick={(e) => ($state.showNotification = !$state.showNotification)}>
+		<button type="button" onclick={() => ($state.showNotification = !$state.showNotification)}>
 			Show a notification
 		</button>
 

package/test/Popover/components/PopoverFunction.torp

@@ -0,0 +1,37 @@
+import { Popover, PopoverContent, showPopover } from "../../../src/Popover/index";
+import {
+	Dialog,
+	DialogBody,
+	DialogFooter,
+	DialogButton
+} from "../../../src/Dialog/index";
+
+export default function PopoverFunction() {
+	let anchor;
+
+	async function show() {
+		showPopover(CustomDialog, anchor);
+	}
+
+	@render {
+		<button type="button" &ref={anchor} onclick={show}>Show the prompt</button>
+	}
+}
+
+function CustomDialog($props) {
+	@render {
+		<Popover visible {$props.anchor}>
+			<PopoverContent>
+				<Dialog>
+					<DialogBody>
+						<p>Which color do you prefer?</p>
+					</DialogBody>
+					<DialogFooter>
+						<DialogButton value="blue">Blue</DialogButton>
+						<DialogButton value="red">Red</DialogButton>
+					</DialogFooter>
+				</Dialog>
+			</PopoverContent>
+		</Popover>
+	}
+}

package/test/Popover/components/PopoverTrigger.torp

@@ -0,0 +1,36 @@
+import { Popover, PopoverContent, PopoverTrigger } from "../../../src/Popover/index";
+import {
+	Dialog,
+	DialogBody,
+	DialogFooter,
+	DialogButton
+} from "../../../src/Dialog/index";
+
+export default function PopoverTriggerTest() {
+	let $state = $watch({
+		color: "",
+	});
+
+	@render {
+		@if ($state.color) {
+			<p>Your favorite color is {$state.color}?!</p>
+		}
+
+		<Popover &visible={$state.showPopover}>
+			<PopoverTrigger>
+				Show the prompt
+			</PopoverTrigger>
+			<PopoverContent>
+				<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>
+			</PopoverContent>
+		</Popover>
+	}
+}

package/test/Popover/components/{PromptVariable.torp → PopoverVariable.torp}

@@ -6,14 +6,16 @@ import {
 	DialogButton
 } from "../../../src/Dialog/index";
 
-export default function PromptVariable() {
+export default function PopoverVariable() {
 	let $state = $watch({
 		color: "",
 		showPopover: false
 	});
 
+	let button: HTMLButtonElement;
+
 	@render {
-		<button type="button" onclick={(e) => ($state.showPopover = !$state.showPopover)}>
+		<button type="button" onclick={() => ($state.showPopover = !$state.showPopover)} &ref={button}>
 			Show the prompt
 		</button>
 
@@ -21,7 +23,7 @@ export default function PromptVariable() {
 			<p>Your favorite color is {$state.color}?!</p>
 		}
 
-		<Popover &visible={$state.showPopover}>
+		<Popover &visible={$state.showPopover} anchor={button}>
 			<PopoverContent>
 				<Dialog>
 					<DialogBody>

package/test/Popover/function.test.ts

@@ -3,13 +3,13 @@ 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 PromptFunction from "./components/PromptFunction.torp";
+import PopoverFunction from "./components/PopoverFunction.torp";
 
 describe("Prompt", () => {
 	it("Showing with a function", async () => {
 		const container = document.createElement("div");
 		document.body.appendChild(container);
-		mount(container, PromptFunction);
+		mount(container, PopoverFunction);
 
 		// By default, the prompt shouldn't be shown
 		expect(queryByText(container, "Which color do you prefer?")).not.toBeInTheDocument();
@@ -17,10 +17,5 @@ describe("Prompt", () => {
 		// Clicking the button should show the prompt
 		await userEvent.click(getByText(container, "Show the prompt"));
 		expect(queryByText(container, "Which color do you prefer?")).toBeInTheDocument();
-
-		// Clicking the blue button should hide the prompt and set the value
-		await userEvent.click(getByText(container, "Blue"));
-		expect(queryByText(container, "Which color do you prefer?")).not.toBeInTheDocument();
-		expect(queryByText(container, "Your favorite color is blue?!")).toBeInTheDocument();
 	});
 });