@torpor/ui 0.0.17 → 0.1.1

package/src/Popover.ts

@@ -0,0 +1,29 @@
+import Popover from "./Popover/Popover.torp";
+import PopoverContent from "./Popover/PopoverContent.torp";
+import PopoverContentAnchored from "./Popover/PopoverContentAnchored.torp";
+import PopoverContentContextual from "./Popover/PopoverContentContextual.torp";
+import PopoverOverlay from "./Popover/PopoverOverlay.torp";
+import PopoverTrigger from "./Popover/PopoverTrigger.torp";
+import PopoverTriggerContextual from "./Popover/PopoverTriggerContextual.torp";
+import PopoverTriggerHover from "./Popover/PopoverTriggerHover.torp";
+import clickPopover from "./Popover/mountClickPopover";
+import contextPopover from "./Popover/mountContextPopover";
+import hoverPopover from "./Popover/mountHoverPopover";
+import showPopover from "./Popover/showPopover";
+import showPopoverPrompt from "./Popover/showPopoverPrompt";
+
+export {
+	Popover,
+	PopoverOverlay,
+	PopoverTrigger,
+	PopoverTriggerHover,
+	PopoverTriggerContextual,
+	PopoverContentAnchored,
+	PopoverContentContextual,
+	PopoverContent,
+	showPopover,
+	showPopoverPrompt,
+	clickPopover,
+	contextPopover,
+	hoverPopover,
+};

package/src/TabGroup/TabContent.torp

@@ -1,5 +1,5 @@
-import getId from '../utils/getId';
-import { TabGroupContextName, type TabGroupContext } from './TabGroupTypes';
+import getId from "../utils/getId";
+import { TabGroupContextName, type TabGroupContext } from "./TabGroupTypes";
 
 /**
  * Content for a TabGroup, which can be revealed or hidden by an associated TabTrigger.
@@ -11,7 +11,7 @@ export default function TabContent($props: any) {
 
 	const context = $context[TabGroupContextName] as TabGroupContext;
 	if (!context) {
-		throw new Error('TabContent must be contained within a TabGroup');
+		throw new Error("TabContent must be contained within a TabGroup");
 	}
 	let $state = $context[TabGroupContextName].registerItem($props.index, $props.value);
 
@@ -21,7 +21,7 @@ export default function TabContent($props: any) {
 	@render {
 		<div
 			id={$props.id}
-			class='torp-tab-content'
+			class={`torp-tab-content ${$props.class ?? ""}`.trim()}
 			role="tabpanel"
 			aria-labelledby={$state.headerId}
 			data-orientation={$props.orientation}

package/src/TabGroup/TabGroup.torp

@@ -1,4 +1,4 @@
-import { TabGroupContextName, type TabGroupContext, type ItemState } from './TabGroupTypes';
+import { TabGroupContextName, type TabGroupContext, type ItemState } from "./TabGroupTypes";
 
 /**
  * A list of interactive headings coupled with layered sections of content that
@@ -19,26 +19,18 @@ import { TabGroupContextName, type TabGroupContext, type ItemState } from './Tab
  * </TabGroup>
  * ```
  *
- * @prop {'horizontal' | 'vertical'} orientation -- The orientation of the tab buttons, which affects keyboard navigation
- * @prop {'automatic' | 'manual'} activation -- How tabs are activated; if automatic they are shown on focus, if manual they must be clicked
+ * @prop {"horizontal" | "vertical"} orientation -- The orientation of the tab buttons, which affects keyboard navigation
+ * @prop {"automatic" | "manual"} activation -- How tabs are activated; if automatic they are shown on focus, if manual they must be clicked
  * @prop {string | string[]} value -- The value of the active TabContent
  * @prop {boolean} disabled -- If set to true, the user cannot interact with any items in the TabGroup
  * @prop {(value: string | string[]) => void} [onchange] -- Raised when the active item has changed
  */
 export default function TabGroup($props: any) {
-	$props.orientation ||= 'horizontal';
-	$props.activation ||= 'automatic';
-	$props.value ||= '';
+	$props.orientation ||= "horizontal";
+	$props.activation ||= "automatic";
+	$props.value ||= "";
 
-	interface State {
-		value: 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 nextHeaderIndex = 0;
@@ -58,36 +50,40 @@ export default function TabGroup($props: any) {
 
 	$run(() => {
 		// HACK: This should probably be done with setters?
-		let newValue = $state.value;
+		let newValue = $props.value;
 
 		// 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.active = item.value === newValue;
 		}
 
 		// 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);
 		}
-	})
+	});
 
-	// TODO:
-	//$mount(() => {
-	//	if ($state.value === "" && $state.itemStates.length) {
-	//		$state.value = $state.itemStates[0].value;
-	//	}
-	//})
+	// On mount, if no value was set, show the first tab content
+	$mount(() => {
+		if ($props.value === "" && itemStates.length) {
+			$props.value = itemStates[0].value;
+		}
+	});
 
 	function registerHeader(index: number | undefined, value: string | undefined, setFocused: () => void): ItemState {
 		// If an index wasn't set for the header, set it automatically
@@ -117,8 +113,8 @@ export default function TabGroup($props: any) {
 
 	function getItemState(index: number, value: string | undefined): ItemState {
 		// If we already have an item at this index, just return it
-		if ($state.itemStates.length > index) {
-			return $state.itemStates[index];
+		if (itemStates.length > index) {
+			return itemStates[index];
 		}
 
 		// If a value wasn't set for the item, set it to the index
@@ -130,16 +126,21 @@ export default function TabGroup($props: any) {
 		const newItemState: ItemState = $watch({
 			index,
 			value,
-			active: value === $state.value,
-			headerId: '',
-			contentId: '',
+			// TODO: this would be better than using $mount, but it doesn't work with nested tabs
+			// active: value === $props.value || ($props.value === "" && index === 0),
+			active: value === $props.value,
+			headerId: "",
+			contentId: "",
 			disabled: false,
 			parentDisabled: false,
+			get dataState() {
+				return this.active ? "active" : "inactive";
+			},
 			setFocused: () => {},
 			orientation: $props.orientation,
 			activation: $props.activation
 		});
-		$state.itemStates.splice(index, 0, newItemState);
+		itemStates.splice(index, 0, newItemState);
 
 		return newItemState;
 	}
@@ -147,18 +148,18 @@ export default function TabGroup($props: any) {
 	// 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 triggerItem(toggleValue: string) {
-		for (let item of $state.itemStates) {
+		for (let item of itemStates) {
 			// The item is active if it has the supplied value
 			if (item.value === toggleValue) {
-				$state.value = item.value;
+				$props.value = item.value;
 				break;
 			}
 		}
@@ -166,49 +167,49 @@ export default function TabGroup($props: any) {
 
 	function handleHeaderKey(headerIndex: number, e: KeyboardEvent) {
 		switch (e.key) {
-			case 'Left':
-			case 'ArrowLeft': {
-				if ($props.orientation === 'horizontal' && headerIndex > 0) {
+			case "Left":
+			case "ArrowLeft": {
+				if ($props.orientation === "horizontal" && headerIndex > 0) {
 					e.preventDefault();
-					$state.itemStates[headerIndex - 1].setFocused();
+					itemStates[headerIndex - 1].setFocused();
 				}
 				break;
 			}
-			case 'Up':
-			case 'ArrowUp': {
-				if ($props.orientation === 'vertical' && headerIndex > 0) {
+			case "Up":
+			case "ArrowUp": {
+				if ($props.orientation === "vertical" && headerIndex > 0) {
 					e.preventDefault();
-					$state.itemStates[headerIndex - 1].setFocused();
+					itemStates[headerIndex - 1].setFocused();
 				}
 				break;
 			}
-			case 'Right':
-			case 'ArrowRight': {
-				if ($props.orientation === 'horizontal' && headerIndex < $state.itemStates.length - 1) {
+			case "Right":
+			case "ArrowRight": {
+				if ($props.orientation === "horizontal" && headerIndex < itemStates.length - 1) {
 					e.preventDefault();
-					$state.itemStates[headerIndex + 1].setFocused();
+					itemStates[headerIndex + 1].setFocused();
 				}
 				break;
 			}
-			case 'Down':
-			case 'ArrowDown': {
-				if ($props.orientation === 'vertical' && headerIndex < $state.itemStates.length - 1) {
+			case "Down":
+			case "ArrowDown": {
+				if ($props.orientation === "vertical" && 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;
 			}
@@ -217,7 +218,8 @@ export default function TabGroup($props: any) {
 
 	@render {
 		<div
-			class="torp-tab-group"
+			id={$props.id}
+			class={`torp-tab-group ${$props.class ?? ""}`.trim()}
 			data-orientation={$props.orientation}
 		>
 			<:slot />

package/src/TabGroup/TabGroupTypes.ts

@@ -33,6 +33,7 @@ export interface ItemState {
 	contentId: string;
 	disabled: boolean;
 	parentDisabled: boolean;
+	dataState: "active" | "inactive";
 	/** Called in the TabGroup when a header needs to be focused */
 	setFocused: () => void;
 }

package/src/TabGroup/TabHeader.torp

@@ -1,9 +1,9 @@
-import { TabGroupContextName, TabItemContextName, type TabGroupContext, type TabItemContext } from './TabGroupTypes';
+import { TabGroupContextName, TabItemContextName, type TabGroupContext, type TabItemContext } from "./TabGroupTypes";
 
 /**
  * The header for a tab item, which contains the TabTrigger.
  *
- * The structure of an TabHeader is:
+ * The structure of a TabHeader is:
  * 
  * ```
  * <TabHeader>
@@ -11,12 +11,12 @@ import { TabGroupContextName, TabItemContextName, type TabGroupContext, type Tab
  * </TabHeader>
  * ```
  *
- * @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 TabHeader($props: any) {
 	const context = $context[TabGroupContextName] as TabGroupContext;
 	if (!context) {
-		throw new Error('TabHeader must be contained within a TabGroup');
+		throw new Error("TabHeader must be contained within a TabGroup");
 	}
 	let $state = $context[TabGroupContextName].registerHeader($props.index, $props.value);
 
@@ -37,10 +37,12 @@ export default function TabHeader($props: any) {
 	@render {
 		@// TODO: $props.as
 		<h4
-			:class={{
-				'torp-tab-header': true,
-				horizontal: $state.orientation === "horizontal",
-				vertical: $state.orientation === "vertical" }}
+			id={$props.id}
+			:class={[
+				"torp-tab-header",
+				$props.class,
+				$state.orientation
+			]}
 			data-state={$state.dataState}
 			data-disabled={$state.dataDisabled}
 		>

package/src/TabGroup/TabList.torp

@@ -1,4 +1,4 @@
-import { TabGroupContextName, TabItemContextName, type TabGroupContext, type TabItemContext } from './TabGroupTypes';
+import { TabGroupContextName, TabItemContextName, type TabGroupContext, type TabItemContext } from "./TabGroupTypes";
 
 /**
  * A component that holds the TabHeaders of a TabGroup.
@@ -19,7 +19,7 @@ export default function TabList($props: any) {
 	// Get stuff out of the TabGroupContext
 	const context = $context[TabGroupContextName] as TabGroupContext;
 	if (!context) {
-		throw new Error('TabList must be contained within an TabGroup');
+		throw new Error("TabList must be contained within a TabGroup");
 	}
 	// TODO: const { orientation } = context;
 	const orientation = context.orientation;
@@ -35,7 +35,8 @@ export default function TabList($props: any) {
 
 	@render {
 		<div
-			class='torp-tab-list'
+			id={$props.id}
+			class={`torp-tab-list ${$props.class ?? ""}`.trim()}
 			role="tablist"
 			aria-label={$props.ariaLabel}
 			aria-orientation={orientation}

package/src/TabGroup/TabTrigger.torp

@@ -1,5 +1,5 @@
-import getId from '../utils/getId';
-import { TabItemContextName, type TabItemContext } from './TabGroupTypes';
+import getId from "../utils/getId";
+import { TabItemContextName, type TabItemContext } from "./TabGroupTypes";
 
 /**
  * A header button for a tab item, which can be used to reveal an associated TabContent.
@@ -12,7 +12,7 @@ export default function TabTrigger() {
 	// Get stuff out of the TabItemContext
 	const context = $context[TabItemContextName] as TabItemContext;
 	if (!context) {
-		throw new Error('TabTrigger must be contained within an TabItem');
+		throw new Error("TabTrigger must be contained within a TabHeader");
 	}
 	let $state = $context[TabItemContextName].state;
 
@@ -25,7 +25,7 @@ export default function TabTrigger() {
 	// This function is called by the parent TabGroup to focus this item's button
 	function setFocused() {
 		button.focus();
-		if ($state.activation === 'automatic') {
+		if ($state.activation === "automatic") {
 			context.triggerItem($state.value);
 		}
 	}
@@ -45,7 +45,7 @@ export default function TabTrigger() {
 		<button
 			type="button"
 			id={$props.id}
-			class='torp-tab-trigger'
+			class={`torp-tab-trigger ${$props.class ?? ""}`.trim()}
 			role="tab"
 			tabindex="-1"
 			disabled={$state.disabled || $state.parentDisabled}
@@ -55,7 +55,7 @@ export default function TabTrigger() {
 			data-state={$state.dataState}
 			data-disabled={$state.disabled}
 			data-orientation={$state.orientation}
-			:self={button}
+			&ref={button}
 			onclick={handleClick}
 			onkeydown={handleKey}
 		>

package/src/mount/disableScroll.ts

@@ -0,0 +1,28 @@
+export function disableScroll(): () => void {
+	// Remember body styles
+	const overflowX = document.body.style.overflowY;
+	const overflowY = document.body.style.overflowY;
+	const overscrollBehaviourX = document.body.style.overscrollBehaviorX;
+	const overscrollBehaviourY = document.body.style.overscrollBehaviorY;
+	const marginRight = document.body.style.marginRight;
+
+	// Get scrollbar width (if visible) so that we can set a margin to avoid things jumping around
+	// HACK: Does this work in all browsers/systems?
+	const scrollBarWidth = window.innerWidth - document.body.clientWidth;
+
+	// Set body styles to disallow scrolling
+	document.body.style.overflowY = "hidden";
+	document.body.style.overflowY = "hidden";
+	document.body.style.overscrollBehaviorX = "contain";
+	document.body.style.overscrollBehaviorY = "contain";
+	document.body.style.marginRight = scrollBarWidth + "px";
+
+	return () => {
+		// Reset body styles
+		document.body.style.overflowY = overflowX;
+		document.body.style.overflowY = overflowY;
+		document.body.style.overscrollBehaviorX = overscrollBehaviourX;
+		document.body.style.overscrollBehaviorY = overscrollBehaviourY;
+		document.body.style.marginRight = marginRight;
+	};
+}

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";
+}