@torpor/ui 0.0.16 → 0.1.0

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.16",
+  "version": "0.1.0",
   "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"
+    },
+    "./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",
+      "require": "./dist/TabGroup/index.cjs"
+    },
     "./motion": {
       "types": "./dist/motion.d.ts",
       "import": "./dist/motion.js",
@@ -30,18 +50,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.21",
     "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.1.4"
   },
   "dependencies": {
-    "@torpor/view": "^0.0.13",
-    "@torpor/unplugin": "^0.1.9"
+    "@torpor/view": "^0.1.0",
+    "@torpor/unplugin": "^0.1.11"
   },
   "scripts": {
     "build": "tsc --noEmit && tsup",

package/scripts/postbuild.ts

@@ -1,13 +1,18 @@
 import chalk from "chalk";
 import { existsSync, promises as fs, lstatSync } from "node:fs";
-import { dirname, join, resolve } from "node:path";
+import { basename, dirname, join, resolve } from "node:path";
 import { fileURLToPath } from "node:url";
 
 // HACK: There is almost certainly a way to do this with standard TS/TSUP/etc
 // but I can't figure it out
 
 async function run() {
-	const distFolder = resolve(dirname(fileURLToPath(import.meta.url)), "../dist");
+	const scriptsFolder = dirname(fileURLToPath(import.meta.url));
+	const sourceFolder = resolve(scriptsFolder, "../src");
+	const distFolder = resolve(scriptsFolder, "../dist");
+
+	// Read the dist files first, not for every component
+	const distFiles = (await fs.readdir(distFolder)).filter((f) => f.endsWith(".torp"));
 
 	// Loop through component folders e.g. Accordion
 	const componentFolders = (await fs.readdir(distFolder)).filter((f) =>
@@ -27,10 +32,17 @@ async function run() {
 		}
 
 		// Move all *.torp files for the component into this folder
-		const relatedFiles = (await fs.readdir(distFolder)).filter(
-			(f) => f.startsWith(component) && f !== component,
-		);
-		for (const file of relatedFiles) {
+		let relatedFiles = (await fs.readdir(join(sourceFolder, component)))
+			.filter((f) => f.endsWith(".torp") && f !== component)
+			.map((f) => basename(f, ".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));
 		}
@@ -46,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}
 		>

package/src/Accordion/AccordionItem.torp

@@ -1,4 +1,4 @@
-import { AccordionContextName, AccordionItemContextName, type AccordionContext, type AccordionItemContext } from './AccordionTypes';
+import { AccordionContextName, AccordionItemContextName, type AccordionContext, type AccordionItemContext } from "./AccordionTypes";
 
 /**
  * An item in an Accordion, which must consist of an AccordionTrigger and an AccordionContent.
@@ -27,14 +27,14 @@ export default function AccordionItem($props: any) {
 		disabled: $props.disabled,
 		parentDisabled: false,
 		get dataState() {
-			return this.expanded ? 'open' : 'closed';
+			return this.expanded ? "open" : "closed";
 		},
 	})
 
 	// Get stuff out of the AccordionContext
 	const context = $context[AccordionContextName] as AccordionContext;
 	if (!context) {
-		throw new Error('AccordionItem must be contained within an Accordion');
+		throw new Error("AccordionItem must be contained within an Accordion");
 	}
 
 	// Put stuff into an AccordionItemContext
@@ -56,16 +56,21 @@ export default function AccordionItem($props: any) {
 	});
 
 	// Dispatch the toggle event when the value of expanded changes
-	// TODO: Should this be a setter instead?
+	let firstToggle = true;
 	$run(() => {
-		if ($props.ontoggle) {
-			$props.ontoggle($state.expanded);
+		const ev = $props.ontoggle;
+		const expanded = $state.expanded;
+		if (firstToggle) {
+			firstToggle = false;
+		} else if (ev) {
+			ev(expanded);
 		}
-	})
+	});
 
 	@render {
 		<div
-			class='torp-accordion-item'
+			id={$props.id}
+			class={`torp-accordion-item ${$props.class ?? ""}`.trim()}
 			data-state={$state.dataState}
 			data-disabled={$state.dataDisabled}
 		>

package/src/Accordion/AccordionTrigger.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";
 
 /**
  * A header button for an AccordionItem, which can be used to reveal or hide an associated AccordionContent.
@@ -12,7 +12,7 @@ export default function AccordionTrigger() {
 	// Get stuff out of the AccordionItemContext
 	const context = $context[AccordionItemContextName] as AccordionItemContext;
 	if (!context) {
-		throw new Error('AccordionTrigger must be contained within an AccordionItem');
+		throw new Error("AccordionTrigger must be contained within an AccordionItem");
 	}
 	let $state = $context[AccordionItemContextName].state;
 
@@ -42,14 +42,14 @@ export default function AccordionTrigger() {
 		<button
 			type="button"
 			id={$props.id}
-			class='torp-accordion-button'
+			class={`torp-accordion-trigger ${$props.class ?? ""}`.trim()}
 			disabled={$state.disabled || $state.parentDisabled}
 			aria-expanded={$state.expanded.toString()}
 			aria-disabled={$state.disabled}
 			aria-controls={$state.contentId}
 			data-state={$state.dataState}
 			data-disabled={$state.disabled}
-			:self={button}
+			&ref={button}
 			onclick={handleClick}
 			onkeydown={handleKey}
 		>

package/src/Accordion/AccordionTypes.ts

@@ -27,6 +27,7 @@ export interface ItemState {
 	expanded: boolean;
 	disabled: boolean;
 	parentDisabled: boolean;
+	dataState: "open" | "closed";
 	/** Called in the Accordion when a header needs to be focused */
 	setFocused: () => void;
 }