@torpor/ui 0.2.1 → 0.3.1

package/test/Popover/trigger.test.ts

@@ -0,0 +1,27 @@
+import { 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 PopoverTrigger from "./components/PopoverTrigger.torp";
+
+describe("Prompt", () => {
+	it("Showing with a trigger", async () => {
+		const container = document.createElement("div");
+		document.body.appendChild(container);
+		mount(container, PopoverTrigger);
+
+		// By default, the prompt shouldn't be shown
+		expect(queryByText(container, "Which color do you prefer?")).not.toBeInTheDocument();
+		expect(queryByText(container, "Your favorite color is blue?!")).not.toBeInTheDocument();
+
+		// 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();
+	});
+});

package/test/Popover/variable.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 PromptVariable from "./components/PromptVariable.torp";
+import PopoverVariable from "./components/PopoverVariable.torp";
 
 describe("Prompt", () => {
 	it("Showing with a variable", async () => {
 		const container = document.createElement("div");
 		document.body.appendChild(container);
-		mount(container, PromptVariable);
+		mount(container, PopoverVariable);
 
 		// By default, the prompt shouldn't be shown
 		expect(queryByText(container, "Which color do you prefer?")).not.toBeInTheDocument();

package/test/TabGroup/components/TabGroupAccessibility.torp

@@ -7,10 +7,8 @@ import {
 } from "../../../src/TabGroup/index";
 
 export default function TabGroupAccessibility() {
-	$props ??= $watch({});
-
 	@render {
-		<TabGroup value={$props.value}>
+		<TabGroup value={$props?.value}>
 			<TabList ariaLabel="Example tabs">
 				<TabHeader as="h4">
 					<TabTrigger>Header 1</TabTrigger>

package/test/TabGroup/components/TabGroupKeyboard.torp

@@ -7,10 +7,8 @@ import {
 } from "../../../src/TabGroup/index";
 
 export default function TabGroupKeyboard() {
-	$props ??= $watch({});
-
 	@render {
-		<TabGroup value={$props.value}>
+		<TabGroup value={$props?.value}>
 			<TabList>
 				<TabHeader as="h4">
 					<TabTrigger>Header 1</TabTrigger>

package/test/TabGroup/components/TabGroupList.torp

@@ -7,10 +7,8 @@ import {
 } from "../../../src/TabGroup/index";
 
 export default function TabGroupList() {
-	$props ??= $watch({});
-
 	@render {
-		<TabGroup value={$props.value}>
+		<TabGroup value={$props?.value}>
 			<TabList>
 			@for (let item of $props.items) {
 				@key = item.id

package/test/TabGroup/components/TabGroupTrigger.torp

@@ -7,10 +7,8 @@ import {
 } from "../../../src/TabGroup/index";
 
 export default function TabGroupTrigger() {
-	$props ??= $watch({});
-
 	@render {
-		<TabGroup value={$props.value}>
+		<TabGroup value={$props?.value}>
 			<TabList>
 				<TabHeader as="h4">
 					<TabTrigger>Header 1</TabTrigger>

package/tsup.config.ts

@@ -10,12 +10,14 @@ export default defineConfig({
 		"src/Accordion/index.ts",
 		"src/Breadcrumb/index.ts",
 		"src/Calendar/index.ts",
+		"src/Contextual/index.ts",
 		"src/Dialog/index.ts",
 		"src/Disclosure/index.ts",
 		"src/Drawer/index.ts",
 		"src/Form/index.ts",
 		"src/Menu/index.ts",
 		"src/MenuBar/index.ts",
+		"src/Modal/index.ts",
 		"src/NavMenu/index.ts",
 		"src/Notification/index.ts",
 		"src/Popover/index.ts",

package/dist/Popover/PopoverContentAnchored.torp

@@ -1,113 +0,0 @@
-import { addDocumentEvent, removeDocumentEvent } from "../utils/documentEvents";
-import getScrollParent from "../utils/getScrollParent";
-import setPopoverPosition from "../utils/setPopoverPosition";
-import { PopoverContextName, type PopoverContext } from "./PopoverTypes";
-
-interface PopoverContentAnchoredProps {
-	/** An ID for the root element */
-	id?: string;
-	/** Class name(s) for the root element */
-	class?: string,
-	/** Where the popover will be shown, relative to the popover button */
-	side?: "top" | "right" | "bottom" | "left",
-	/** How the popover will be aligned, relative to the popover button */
-	alignment?: "start" | "center" | "end",
-}
-
-/**
- * The content that is displayed for a Popover when it is open, displayed
- * alongside an element.
- */
-export default function PopoverContentAnchored($props: PopoverContentAnchoredProps) {
-	$props ??= $watch({});
-	$props.side ??= "bottom";
-	$props.alignment ??= "center";
-
-	let div: HTMLDivElement;
-	let shown = false;
-	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;
-
-	$run(() => {
-		if (!$state.visible) {
-			hide();
-		}
-	});
-
-	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);
-
-		// 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;
-
-		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");
-		}
-
-		setPopoverPosition(context.anchorElement, div, $props.side, $props.alignment);
-	}
-
-	@render {
-		@if ($state.visible) {
-			<div
-				{$props.id}
-				class={`torp-popover-content-anchored ${$props.class ?? ""}`.trim()}
-				&ref={div}
-				onmount={show}
-			>
-				<slot />
-			</div>
-		}
-	}
-}

package/dist/Popover/PopoverOverlay.torp

@@ -1,39 +0,0 @@
-import { disableScroll } from "../mount/disableScroll";
-import { PopoverContextName, type PopoverContext } from "./PopoverTypes";
-
-interface PopoverOverlayProps {
-	/** An ID for the root element */
-	id?: string;
-	/** Class name(s) for the root element */
-	class?: string,
-}
-
-/**
- * The background overlay for a Popover. Adding an overlay automatically sets the Popover to modal.
- */
-export default function PopoverOverlay($props: PopoverOverlayProps) {
-	$props ??= $watch({});
-
-	// Get stuff out of the PopoverContext
-	const context = $context[PopoverContextName] as PopoverContext;
-	if (!context) {
-		throw new Error("PopoverOverlay must be contained within a Popover");
-	}
-	let $state = context.state;
-
-	// Any Popover with an overlay is modal
-	context.modal = true;
-
-	@render {
-		@if ($state.visible) {
-			<div
-				{$props.id}
-				class={`torp-popover-overlay ${$props.class ?? ""}`.trim()}
-				tabindex="-1"
-				onmount={(el) => disableScroll(el)}
-			>
-				<slot />
-			</div>
-		}
-	}
-}

package/dist/Popover/PopoverTriggerContextual.torp

@@ -1,46 +0,0 @@
-import { PopoverContextName, type PopoverContext } from "./PopoverTypes";
-
-interface PopoverTriggerContextualProps {
-	/** An ID for the root element */
-	id?: string;
-	/** Class name(s) for the root element */
-	class?: string,
-}
-
-/**
- * The element that causes a Popover to appear or disappear when right-clicked.
- */
-export default function PopoverTriggerContextual($props: PopoverTriggerContextualProps) {
-	$props ??= $watch({});
-
-	// Get stuff out of the PopoverContext
-	const context = $context[PopoverContextName] as PopoverContext;
-	if (!context) {
-		throw new Error("PopoverTriggerContextual must be contained within a Popover");
-	}
-	let $state = context.state;
-
-	function handleContextual(e: MouseEvent & { currentTarget: EventTarget & HTMLDivElement }) {
-		e.preventDefault();
-		if ($state.position) {
-			// Get the position relative to the element, so we can reposition on scroll
-			const rect = e.currentTarget.getBoundingClientRect();
-			const x = e.clientX - rect.left;
-			const y = e.clientY - rect.top;
-			$state.position = { x, y };
-			//$state.position = { x: window.scrollX + e.clientX, y: window.scrollY + e.clientY };
-		}
-		$state.visible = !$state.visible;
-	}
-
-	@render {
-		<div
-			{$props.id}
-			class={`torp-popover-trigger-contextual ${$props.class ?? ""}`.trim()}
-			oncontextmenu={handleContextual}
-			&ref={context.anchorElement}
-		>
-			<slot />
-		</div>
-	}
-}

package/dist/Popover/PopoverTriggerHover.torp

@@ -1,47 +0,0 @@
-
-import { PopoverContextName, type PopoverContext } from "./PopoverTypes";
-import hoverTrigger from "../mount/hoverTrigger";
-
-interface PopoverTriggerHoverProps {
-	/** An ID for the root element */
-	id?: string;
-	/** Class name(s) for the root element */
-	class?: string,
-}
-
-/**
- * The div that causes a Popover to appear or disappear when hovered.
- */
-export default function PopoverTriggerHover($props: PopoverTriggerHoverProps) {
-	$props ??= $watch({});
-
-	// Get stuff out of the PopoverContext
-	const context = $context[PopoverContextName] as PopoverContext;
-	if (!context) {
-		throw new Error("PopoverTriggerHover must be contained within a Popover");
-	}
-	let $state = context.state;
-
-	function handleHover(node: HTMLElement, e: TouchEvent | MouseEvent) {
-		if ($state.position) {
-			// Get the position relative to the element, so we can reposition on scroll
-			const rect = node.getBoundingClientRect();
-			const x = e.clientX - rect.left;
-			const y = e.clientY - rect.top;
-			$state.position = { x, y };
-			//$state.position = { x: window.scrollX + e.clientX, y: window.scrollY + e.clientY };
-		}
-		$state.visible = !$state.visible
-	}
-
-	@render {
-		<div
-			{$props.id}
-			class={`torp-popover-trigger-hover ${$props.class ?? ""}`.trim()}
-			onmount={(el) => hoverTrigger(el, { onHover: handleHover, onExit: handleHover })}
-			&ref={context.anchorElement}
-		>
-			<slot />
-		</div>
-	}
-}

package/dist/Popover/mountClickPopover.ts

@@ -1,50 +0,0 @@
-import type { Component } from "@torpor/view";
-import showPopover from "./showPopover";
-
-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/dist/Popover/mountContextPopover.ts

@@ -1,50 +0,0 @@
-import type { Component } from "@torpor/view";
-import showPopover from "./showPopover";
-
-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/dist/Popover/mountHoverPopover.ts

@@ -1,57 +0,0 @@
-import type { Component } from "@torpor/view";
-import hoverTrigger from "../mount/hoverTrigger";
-import showPopover from "./showPopover";
-
-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/dist/Popover/showPopoverPrompt.ts

@@ -1,23 +0,0 @@
-import type { Component } from "@torpor/view";
-
-/**
- * Shows a popover component in code, and asynchronously returns the value selected by the user.
- * @param popover The popover component
- * @param props The properties for the popover component
- * @param target The target element to show the popover in
- * @returns The value selected by the user
- */
-export default function showPopoverPrompt(
-	popover: Component,
-	props?: Record<PropertyKey, any>,
-	target?: Element,
-): Promise<void> {
-	return new Promise((resolve) => {
-		// Add the promise as the callback
-		const allProps = Object.assign({}, props, { callback: resolve });
-
-		// Create the popover
-		// TODO: This needs to clean up after itself, like the use methods do
-		popover(target || document.body, null, allProps);
-	});
-}

package/src/Popover/PopoverContentAnchored.torp

@@ -1,113 +0,0 @@
-import { addDocumentEvent, removeDocumentEvent } from "../utils/documentEvents";
-import getScrollParent from "../utils/getScrollParent";
-import setPopoverPosition from "../utils/setPopoverPosition";
-import { PopoverContextName, type PopoverContext } from "./PopoverTypes";
-
-interface PopoverContentAnchoredProps {
-	/** An ID for the root element */
-	id?: string;
-	/** Class name(s) for the root element */
-	class?: string,
-	/** Where the popover will be shown, relative to the popover button */
-	side?: "top" | "right" | "bottom" | "left",
-	/** How the popover will be aligned, relative to the popover button */
-	alignment?: "start" | "center" | "end",
-}
-
-/**
- * The content that is displayed for a Popover when it is open, displayed
- * alongside an element.
- */
-export default function PopoverContentAnchored($props: PopoverContentAnchoredProps) {
-	$props ??= $watch({});
-	$props.side ??= "bottom";
-	$props.alignment ??= "center";
-
-	let div: HTMLDivElement;
-	let shown = false;
-	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;
-
-	$run(() => {
-		if (!$state.visible) {
-			hide();
-		}
-	});
-
-	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);
-
-		// 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;
-
-		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");
-		}
-
-		setPopoverPosition(context.anchorElement, div, $props.side, $props.alignment);
-	}
-
-	@render {
-		@if ($state.visible) {
-			<div
-				{$props.id}
-				class={`torp-popover-content-anchored ${$props.class ?? ""}`.trim()}
-				&ref={div}
-				onmount={show}
-			>
-				<slot />
-			</div>
-		}
-	}
-}