@torpor/ui 0.0.17 → 0.1.1

package/dist/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/dist/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/dist/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/dist/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/dist/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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@torpor/ui",
-  "version": "0.0.17",
+  "version": "0.1.1",
   "description": "Accessible, unstyled components for use in your Torpor front-end",
   "type": "module",
   "main": "dist/index.cjs",
@@ -12,6 +12,26 @@
       "import": "./dist/Accordion/index.js",
       "require": "./dist/Accordion/index.cjs"
     },
+    "./Dialog": {
+      "types": "./dist/Dialog/index.d.ts",
+      "import": "./dist/Dialog/index.js",
+      "require": "./dist/Dialog/index.cjs"
+    },
+    "./NavMenu": {
+      "types": "./dist/NavMenu/index.d.ts",
+      "import": "./dist/NavMenu/index.js",
+      "require": "./dist/NavMenu/index.cjs"
+    },
+    "./Offscreen": {
+      "types": "./dist/Offscreen/index.d.ts",
+      "import": "./dist/Offscreen/index.js",
+      "require": "./dist/Offscreen/index.cjs"
+    },
+    "./Popover": {
+      "types": "./dist/Popover/index.d.ts",
+      "import": "./dist/Popover/index.js",
+      "require": "./dist/Popover/index.cjs"
+    },
     "./TabGroup": {
       "types": "./dist/TabGroup/index.d.ts",
       "import": "./dist/TabGroup/index.js",
@@ -35,18 +55,18 @@
     "@testing-library/user-event": "^14.6.1",
     "@trivago/prettier-plugin-sort-imports": "^5.2.2",
     "@types/jsdom": "^21.1.7",
-    "@types/node": "^22.15.17",
+    "@types/node": "^22.15.29",
     "chalk": "^5.4.1",
     "esno": "^4.8.0",
     "fast-glob": "^3.3.3",
     "jsdom": "^26.1.0",
-    "tsup": "^8.4.0",
+    "tsup": "^8.5.0",
     "typescript": "^5.8.3",
-    "vitest": "^3.1.3"
+    "vitest": "^3.2.1"
   },
   "dependencies": {
-    "@torpor/unplugin": "^0.1.10",
-    "@torpor/view": "^0.0.14"
+    "@torpor/unplugin": "^0.1.12",
+    "@torpor/view": "^0.1.1"
   },
   "scripts": {
     "build": "tsc --noEmit && tsup",

package/scripts/postbuild.ts

@@ -35,7 +35,13 @@ async function run() {
 		let relatedFiles = (await fs.readdir(join(sourceFolder, component)))
 			.filter((f) => f.endsWith(".torp") && f !== component)
 			.map((f) => basename(f, ".torp"))
-			.map((f) => distFiles.find((df) => df.startsWith(`${f}-`) && df.endsWith(".torp"))!);
+			.map((f) => {
+				const output = distFiles.find((df) => df.startsWith(`${f}-`) && df.endsWith(".torp"));
+				if (!output) {
+					console.log("FILE NOT FOUND:", f, distFiles);
+				}
+				return output!;
+			});
 		for (let file of relatedFiles) {
 			const newfile = file.substring(0, file.indexOf("-")) + ".torp";
 			await fs.rename(join(distFolder, file), join(distFolder, component, newfile));
@@ -52,16 +58,22 @@ async function run() {
 	}
 
 	// Move all utils/*.ts files into the dest folder
-	if (!existsSync(join(distFolder, "utils"))) {
-		await fs.mkdir(join(distFolder, "utils"));
+	moveUtils(distFolder, "utils");
+	moveUtils(distFolder, "mount");
+}
+
+async function moveUtils(distFolder: string, folderName: string) {
+	// Move all utils/*.ts files into the dest folder
+	if (!existsSync(join(distFolder, folderName))) {
+		await fs.mkdir(join(distFolder, folderName));
 	}
 
-	const utilsFolder = resolve(distFolder, "..", "src", "utils");
+	const utilsFolder = resolve(distFolder, "..", "src", folderName);
 	const utilsFiles = (await fs.readdir(utilsFolder)).filter(
 		(f) => f.endsWith(".ts") && f !== "index.ts",
 	);
 	for (const file of utilsFiles) {
-		await fs.copyFile(join(utilsFolder, file), join(distFolder, "utils", file));
+		await fs.copyFile(join(utilsFolder, file), join(distFolder, folderName, file));
 	}
 }
 

package/src/Accordion/Accordion.torp

@@ -1,4 +1,4 @@
-import { AccordionContextName, type AccordionContext, type ItemState } from './AccordionTypes';
+import { AccordionContextName, type AccordionContext, type ItemState } from "./AccordionTypes";
 
 /**
  * A vertically stacked set of interactive headings that enable users to reveal
@@ -19,24 +19,16 @@ import { AccordionContextName, type AccordionContext, type ItemState } from './A
  * </Accordion>
  * ```
  *
- * @prop {'single' | 'multiple'} type -- Whether a single AccordionItem or multiple AccordionItems can be expanded at the same time
- * @prop {string | string[]} value -- The value of the expanded AccordionItem, or an array of values if the type is 'multiple'
+ * @prop {"single" | "multiple"} type -- Whether a single AccordionItem or multiple AccordionItems can be expanded at the same time
+ * @prop {string | string[]} value -- The value of the expanded AccordionItem, or an array of values if the type is "multiple"
  * @prop {boolean} disabled -- If set to true, the user cannot interact with any items in the Accordion
  * @prop {(value: string | string[]) => void} [onchange] -- Raised when the expanded item(s) have changed
  */
 export default function Accordion($props: any) {
-	$props.type ||= 'single';
-	$props.value ||= $props.type === 'single' ? '' : [];
+	$props.type ||= "single";
+	$props.value ||= $props.type === "single" ? "" : [];
 
-	interface State {
-		value: string | string[];
-		itemStates: ItemState[];
-	}
-
-	let $state: State = $watch({
-		value: $props.value,
-		itemStates: []
-	})
+	let itemStates: ItemState[] = [];
 
 	// This is used to assign automatic indexes to items where needed
 	let nextIndex = 0;
@@ -52,24 +44,24 @@ export default function Accordion($props: any) {
 
 	$run(() => {
 		// HACK: This should probably be done with setters?
-		let newValue = $state.value;
+		let newValue = $props.value;
 
 		// Get the value
 		switch ($props.type) {
-			case 'single': {
+			case "single": {
 				// Ensure the value passed in was a string (in case e.g. the user has set values to ints)
 				newValue = newValue?.toString();
-				for (let item of $state.itemStates) {
+				for (let item of itemStates) {
 					item.expanded = item.value === newValue;
 				}
 				break;
 			}
-			case 'multiple': {
+			case "multiple": {
 				// Ensure the value passed in is an array
 				if (!Array.isArray(newValue)) {
 					newValue = [newValue];
 				}
-				for (let item of $state.itemStates) {
+				for (let item of itemStates) {
 					item.expanded = newValue.indexOf(item.value) !== -1;
 				}
 				break;
@@ -77,20 +69,24 @@ export default function Accordion($props: any) {
 		}
 
 		// Set the value
-		$state.value = newValue;
+		$props.value = newValue;
 	})
 
 	$run(() => {
-		$state.itemStates.forEach((s) => s.parentDisabled = $props.disabled);
+		itemStates.forEach((s) => s.parentDisabled = $props.disabled);
 	});
 
 	// Dispatch the change event when the value changes
-	// TODO: Should this be a setter instead?
+	let firstChange = true;
 	$run(() => {
-		if ($props.onchange) {
-			$props.onchange($state.value);
+		const ev = $props.onchange;
+		const value = $props.value;
+		if (firstChange) {
+			firstChange = false;
+		} else if (ev) {
+			ev(value);
 		}
-	})
+	});
 
 	function registerItem(itemState: ItemState) {
 		// If an index wasn't set for the item, set it automatically
@@ -104,52 +100,52 @@ export default function Accordion($props: any) {
 		}
 
 		// If we have a value, set whether the item should be expanded
-		if ($state.value) {
+		if ($props.value) {
 			switch ($props.type) {
-				case 'single': {
-					itemState.expanded = $state.value === itemState.value;
+				case "single": {
+					itemState.expanded = $props.value === itemState.value;
 					break;
 				}
-				case 'multiple': {
-					itemState.expanded = $state.value.includes(itemState.value);
+				case "multiple": {
+					itemState.expanded = $props.value.includes(itemState.value);
 					break;
 				}
 			}
 		}
 
 		// Set whether the Accordion itself is disabled
-		$state.parentDisabled = $props.disabled
+		itemState.parentDisabled = $props.disabled
 
 		// Add the item's state to the array
-		$state.itemStates.splice(itemState.index, 0, itemState);
+		itemStates.splice(itemState.index, 0, itemState);
 	}
 
 	// TODO: I think this should be done by value
 	function removeItem(itemIndex: number) {
 		// Remove the item and re-index
-		let index = $state.itemStates.findIndex((item) => item.index === itemIndex);
+		let index = itemStates.findIndex((item) => item.index === itemIndex);
 		if (index !== -1) {
-			$state.itemStates.splice(itemIndex, 1);
+			itemStates.splice(itemIndex, 1);
 		}
-		$state.itemStates.forEach((item, i) => (item.index = i));
+		itemStates.forEach((item, i) => (item.index = i));
 	}
 
 	function toggleItem(toggleValue: string) {
 		switch ($props.type) {
-			case 'single': {
-				for (let item of $state.itemStates) {
+			case "single": {
+				for (let item of itemStates) {
 					// The item is expanded if it has the supplied value (i.e. if it was clicked) and if it
 					// wasn't already expanded (i.e. we collapse it if it was expanded and clicked)
 					if (item.value === toggleValue) {
-						$state.value = item.expanded ? '' : item.value;
+						$props.value = item.expanded ? "" : item.value;
 						break;
 					}
 				}
 				break;
 			}
-			case 'multiple': {
+			case "multiple": {
 				let newValue = [];
-				for (let item of $state.itemStates) {
+				for (let item of itemStates) {
 					// The item is expanded if it has the supplied value (i.e. if it was clicked) or if it
 					// was already expanded
 					if (
@@ -159,7 +155,7 @@ export default function Accordion($props: any) {
 						newValue.push(item.value);
 					}
 				}
-				$state.value = newValue.sort();
+				$props.value = newValue.sort();
 				break;
 			}
 		}
@@ -167,33 +163,33 @@ export default function Accordion($props: any) {
 
 	function handleHeaderKey(headerIndex: number, e: KeyboardEvent) {
 		switch (e.key) {
-			case 'Up':
-			case 'ArrowUp': {
+			case "Up":
+			case "ArrowUp": {
 				if (headerIndex > 0) {
 					e.preventDefault();
-					$state.itemStates[headerIndex - 1].setFocused();
+					itemStates[headerIndex - 1].setFocused();
 				}
 				break;
 			}
-			case 'Down':
-			case 'ArrowDown': {
-				if (headerIndex < $state.itemStates.length - 1) {
+			case "Down":
+			case "ArrowDown": {
+				if (headerIndex < itemStates.length - 1) {
 					e.preventDefault();
-					$state.itemStates[headerIndex + 1].setFocused();
+					itemStates[headerIndex + 1].setFocused();
 				}
 				break;
 			}
-			case 'Home': {
+			case "Home": {
 				if (headerIndex > 0) {
 					e.preventDefault();
-					$state.itemStates[0].setFocused();
+					itemStates[0].setFocused();
 				}
 				break;
 			}
-			case 'End': {
-				if (headerIndex < $state.itemStates.length - 1) {
+			case "End": {
+				if (headerIndex < itemStates.length - 1) {
 					e.preventDefault();
-					$state.itemStates[$state.itemStates.length - 1].setFocused();
+					itemStates[itemStates.length - 1].setFocused();
 				}
 				break;
 			}
@@ -201,7 +197,10 @@ export default function Accordion($props: any) {
 	}
 
 	@render {
-		<div class="torp-accordion">
+		<div
+			id={$props.id}
+			class={`torp-accordion ${$props.class ?? ""}`.trim()}
+		>
 			<:slot />
 		</div>
 	}

package/src/Accordion/AccordionContent.torp

@@ -1,5 +1,5 @@
-import getId from '../utils/getId';
-import { AccordionItemContextName, type AccordionItemContext } from './AccordionTypes';
+import getId from "../utils/getId";
+import { AccordionItemContextName, type AccordionItemContext } from "./AccordionTypes";
 
 /**
  * Content for an AccordionItem, which can be revealed or hidden by an associated AccordionTrigger.
@@ -12,7 +12,7 @@ export default function AccordionContent($props: any) {
 
 	const context = $context[AccordionItemContextName] as AccordionItemContext;
 	if (!context) {
-		throw new Error('AccordionContent must be contained within an AccordionItem');
+		throw new Error("AccordionContent must be contained within an AccordionItem");
 	}
 	let $state = $context[AccordionItemContextName].state
 
@@ -22,8 +22,8 @@ export default function AccordionContent($props: any) {
 	@render {
 		<div
 			id={$props.id}
-			class='torp-accordion-content'
-			role={$props.ariaRegion ? 'region' : undefined}
+			class={`torp-accordion-content ${$props.class ?? ""}`.trim()}
+			role={$props.ariaRegion ? "region" : undefined}
 			aria-labelledby={$state.headerId}
 			data-state={$state.dataState}
 			data-disabled={$state.dataDisabled}

package/src/Accordion/AccordionHeader.torp

@@ -1,4 +1,4 @@
-import { AccordionItemContextName, type AccordionItemContext } from './AccordionTypes';
+import { AccordionItemContextName, type AccordionItemContext } from "./AccordionTypes";
 
 /**
  * The header for an AccordionItem, which contains the AccordionTrigger.
@@ -11,19 +11,20 @@ import { AccordionItemContextName, type AccordionItemContext } from './Accordion
  * </AccordionHeader>
  * ```
  *
- * @prop {'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'} as -- The type of HTML header to use
+ * @prop {"h1" | "h2" | "h3" | "h4" | "h5" | "h6"} as -- The type of HTML header to use
  */
 export default function AccordionHeader($props: any) {
 	const context = $context[AccordionItemContextName] as AccordionItemContext;
 	if (!context) {
-		throw new Error('AccordionHeader must be contained within an AccordionItem');
+		throw new Error("AccordionHeader must be contained within an AccordionItem");
 	}
 	let $state = $context[AccordionItemContextName].state
 
 	@render {
 		@// TODO: $props.as
 		<h4
-			class='torp-accordion-header'
+			id={$props.id}
+			class={`torp-accordion-header ${$props.class ?? ""}`.trim()}
 			data-state={$state.dataState}
 			data-disabled={$state.dataDisabled}
 		>