@torpor/ui 0.2.1 → 0.3.0

package/src/Popover/PopoverContent.torp

@@ -1,4 +1,6 @@
 import { addDocumentEvent, removeDocumentEvent } from "../utils/documentEvents";
+import getScrollParent from "../utils/getScrollParent";
+import setPopoverPosition from "../utils/setPopoverPosition";
 import { PopoverContextName, type PopoverContext } from "./PopoverTypes";
 
 interface PopoverContentProps {
@@ -6,15 +8,17 @@ interface PopoverContentProps {
 	id?: string;
 	/** Class name(s) for the root element */
 	class?: string,
+	/** Where the popover will be shown, relative to the popover trigger */
+	side?: "top" | "right" | "bottom" | "left",
+	/** How the popover will be aligned, relative to the popover trigger */
+	alignment?: "start" | "center" | "end",
 }
 
 /**
- * The content that is displayed for a Popover when it is open, such as a Dialog
- * in the middle of the screen or a div that slides in from the side.
+ * The content that is displayed for a Popover when it is open, displayed
+ * alongside an element.
  */
-export default function PopoverContent($props: PopoverContentProps) {
-	$props ??= $watch({});
-
+export default function PopoverContent($props?: PopoverContentProps | undefined) {
 	let div: HTMLDivElement;
 	let shown = false;
 	let closeOnClick = false;
@@ -41,6 +45,12 @@ export default function PopoverContent($props: PopoverContentProps) {
 		addDocumentEvent("mousedown", handleDocumentMouseDown);
 		addDocumentEvent("click", handleDocumentClick);
 
+		// Set the position and listen for window resize and scroll to reset the position
+		setPosition();
+		const anchorElement = context.anchorElement!
+		const scrollParent = getScrollParent(anchorElement)
+		scrollParent.addEventListener("resize", setPosition);
+		scrollParent.addEventListener("scroll", setPosition);
 		if (context.focusFirstElement) {
 			context.focusFirstElement();
 		}
@@ -52,9 +62,13 @@ export default function PopoverContent($props: PopoverContentProps) {
 		removeDocumentEvent("mousedown", handleDocumentMouseDown);
 		removeDocumentEvent("click", handleDocumentClick);
 
-		// Focus the anchor element per WAI guidelines
-		if (context.anchorElement?.focus) {
-			context.anchorElement.focus();
+		// Stop listening for window resize and focus the anchor element per WAI guidelines
+		const anchorElement = context.anchorElement!
+		const scrollParent = getScrollParent(anchorElement)
+		scrollParent.removeEventListener("resize", setPosition);
+		scrollParent.removeEventListener("scroll", setPosition);
+		if (anchorElement.focus) {
+			anchorElement.focus();
 		}
 	}
 
@@ -69,15 +83,26 @@ export default function PopoverContent($props: PopoverContentProps) {
 			!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("Popover must have an anchor element");
+		}
+
+		let side = $props?.side ?? "bottom";
+		let alignment = $props?.alignment ?? "center";
+		setPopoverPosition(context.anchorElement, div, side, alignment);
+	}
+
 	@render {
 		@if ($state.visible) {
 			<div
-				{$props.id}
-				class={`torp-popover-content ${$props.class ?? ""}`.trim()}
+				{$props?.id}
+				class={`torp-popover-content ${$props?.class ?? ""}`.trim()}
 				&ref={div}
 				onmount={show}
 			>

package/src/Popover/PopoverTrigger.torp

@@ -1,17 +1,20 @@
 import { PopoverContextName, type PopoverContext } from "./PopoverTypes";
+import hoverTrigger from "../mount/hoverTrigger";
 
 interface PopoverTriggerProps {
 	/** An ID for the root element */
 	id?: string;
 	/** Class name(s) for the root element */
 	class?: string,
+	/** Whether the popover is activated by click/press or by hover **/
+	activation?: "press" | "hover"
 }
 
 /**
  * The button that causes a Popover to appear or disappear.
  */
-export default function PopoverTrigger($props: PopoverTriggerProps) {
-	$props ??= $watch({});
+export default function PopoverTrigger($props: PopoverTriggerProps | undefined) {
+	let activation = $props?.activation ?? "press";
 
 	// Get stuff out of the PopoverContext
 	const context = $context[PopoverContextName] as PopoverContext;
@@ -21,15 +24,32 @@ export default function PopoverTrigger($props: PopoverTriggerProps) {
 	let $state = context.state;
 
 	function handleClick() {
+		if (activation !== "press") return;
+
 		$state.visible = !$state.visible;
 	}
 
+	function handleHover(node: HTMLElement, e: MouseEvent) {
+		if (activation !== "hover") return;
+
+		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 {
 		<button
 			type="button"
-			{$props.id}
-			class={`torp-popover-trigger ${$props.class ?? ""}`.trim()}
+			{$props?.id}
+			class={`torp-popover-trigger ${$props?.class ?? ""}`.trim()}
 			onclick={handleClick}
+			onmount={(el) => hoverTrigger(el, { onHover: handleHover, onExit: handleHover })}
 			&ref={context.anchorElement}
 		>
 			<slot />

package/src/Popover/PopoverTypes.ts

@@ -7,7 +7,7 @@ export interface PopoverContext {
 	// There may be a more elegant way to accomplish this too
 	handleClickOutside?: (e: MouseEvent) => void;
 	state: PopoverState;
-	modal: boolean;
+	//modal: boolean;
 	anchorElement?: HTMLElement;
 	// HACK: focusFirstElement is necessary because if we focus the first element e.g. in a Dialog's
 	// onMount, it will scroll the page to the focused element and mess up our careful positioning

package/src/Popover/index.ts

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

package/src/Slider/Slider.torp

@@ -1,4 +1,4 @@
-export default function Slider() {
+export default function Slider($props: any | undefined) {
 	//export let value = 0;
 	//export let total = 0;
 
@@ -71,8 +71,8 @@ export default function Slider() {
 
 	@render {
 		<div
-			id={$props.id}
-			class={`torp-slider ${$props.class ?? ""}`.trim()}
+			{$props?.id}
+			class={`torp-slider ${$props?.class ?? ""}`.trim()}
 			onmousemove={handleMouseMove}
 			onmouseup={handleMouseUp}
 		>

package/src/TabGroup/TabContent.torp

@@ -6,32 +6,35 @@ interface TabContentProps {
 	id?: string;
 	/** Class name(s) for the root element */
 	class?: string,
+	/** The index of this item */
+	index?: number,
+	/** The value for this item */
+	value?: string,
 }
 
 /**
  * Content for a TabGroup, which can be revealed or hidden by an associated TabTrigger.
  */
-export default function TabContent($props: TabContentProps) {
-	$props ??= $watch({});
-	$props.id ||= getId();
+export default function TabContent($props: TabContentProps | undefined) {
+	let defaultId = getId();
 
 	const context = $context[TabGroupContextName] as TabGroupContext;
 	if (!context) {
 		throw new Error("TabContent must be contained within a TabGroup");
 	}
-	let $state = context.registerItem($props.index, $props.value);
+	let $state = context.registerItem($props?.index, $props?.value);
 
 	// Set the content ID so that it can be used with aria-controls in TabTrigger
-	$state.contentId = $props.id;
+	$state.contentId = $props?.id ?? defaultId;
 
 	@render {
 		<div
-			{$props.id}
-			class={`torp-tab-content ${$props.class ?? ""}`.trim()}
+			id={$props?.id ?? defaultId}
+			class={`torp-tab-content ${$props?.class ?? ""}`.trim()}
 			role="tabpanel"
 			aria-labelledby={$state.headerId}
-			data-orientation={$props.orientation}
-			data-state={$state.dataState}
+			data-orientation={context.orientation}
+			data-state={$state.active ? "active" : "inactive"}
 			data-disabled={$state.disabled ? "true" : undefined}
 		>
 			@if ($state.active) {

package/src/TabGroup/TabGroup.torp

@@ -10,7 +10,7 @@ interface TabGroupProps {
 	/** How tabs are activated; if automatic they are shown on focus, if manual they must be clicked */
 	activation?: "automatic" | "manual",
 	/** The value of the active TabContent */
-	value?: string | string[],
+	value?: string,
 	/** If set to true, the user cannot interact with any items in the TabGroup */
 	disabled?: boolean,
 	/** Raised when the active item has changed */
@@ -36,11 +36,23 @@ interface TabGroupProps {
  * </TabGroup>
  * ```
  */
-export default function TabGroup($props: TabGroupProps) {
-	$props ??= $watch({});
-	$props.orientation ||= "horizontal";
-	$props.activation ||= "automatic";
-	$props.value ||= "";
+export default function TabGroup($props: TabGroupProps | undefined) {
+	let orientation = $props?.orientation ?? "horizontal";
+	let activation = $props?.activation ?? "automatic";
+
+	let $state = $watch({
+		value: ""
+	});
+
+	// Sync props and state
+	$run(() => {
+		$state.value = $props?.value ?? "";
+	});
+	$run(() => {
+		if ($props !== undefined) {
+			$props.value = $state.value;
+		}
+	});
 
 	let itemStates: ItemState[] = [];
 
@@ -55,34 +67,28 @@ export default function TabGroup($props: TabGroupProps) {
 		removeItem,
 		triggerItem,
 		handleHeaderKey,
-		orientation: $props.orientation,
-		activation: $props.activation,
+		orientation,
+		activation,
 	};
 	$context[TabGroupContextName] = context;
 
 	$run(() => {
-		// HACK: This should probably be done with setters?
-		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();
+		$state.value = $state.value.toString();
 		for (let item of itemStates) {
-			item.active = item.value === newValue;
+			item.active = item.value === $state.value;
 		}
-
-		// Set the value
-		$props.value = newValue;
 	});
 
 	$run(() => {
-		itemStates.forEach((s) => s.parentDisabled = $props.disabled === true);
+		itemStates.forEach((s) => s.parentDisabled = $props?.disabled === true);
 	});
 
 	// Dispatch the change event when the value changes
 	let firstChange = true;
 	$run(() => {
-		const ev = $props.onchange;
-		const value = $props.value;
+		const ev = $props?.onchange;
+		const value = $props?.value;
 		if (firstChange) {
 			firstChange = false;
 		} else if (ev) {
@@ -92,8 +98,8 @@ export default function TabGroup($props: TabGroupProps) {
 
 	// On mount, if no value was set, show the first tab content
 	$mount(() => {
-		if ($props.value === "" && itemStates.length) {
-			$props.value = itemStates[0].value;
+		if ($state.value === "" && itemStates.length) {
+			$state.value = itemStates[0].value;
 		}
 	});
 
@@ -113,7 +119,7 @@ export default function TabGroup($props: TabGroupProps) {
 
 	function registerItem(index: number | undefined, value: string | undefined): ItemState {
 		// If an index wasn't set for the item, set it automatically
-		if (!index) {
+		if (index === undefined) {
 			index = nextItemIndex++;
 		}
 
@@ -130,7 +136,7 @@ export default function TabGroup($props: TabGroupProps) {
 		}
 
 		// If a value wasn't set for the item, set it to the index
-		if (!value) {
+		if (value === undefined) {
 			value = index.toString();
 		}
 
@@ -139,8 +145,8 @@ export default function TabGroup($props: TabGroupProps) {
 			index,
 			value,
 			// 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,
+			// active: value === $props?.value || ($props?.value === "" && index === 0),
+			active: value === $state.value,
 			headerId: "",
 			contentId: "",
 			disabled: false,
@@ -149,8 +155,8 @@ export default function TabGroup($props: TabGroupProps) {
 				return this.active ? "active" : "inactive";
 			},
 			setFocused: () => {},
-			orientation: $props.orientation,
-			activation: $props.activation
+			orientation,
+			activation
 		});
 		itemStates.splice(index, 0, newItemState);
 
@@ -171,7 +177,7 @@ export default function TabGroup($props: TabGroupProps) {
 		for (let item of itemStates) {
 			// The item is active if it has the supplied value
 			if (item.value === toggleValue) {
-				$props.value = item.value;
+				$state.value = item.value;
 				break;
 			}
 		}
@@ -181,7 +187,7 @@ export default function TabGroup($props: TabGroupProps) {
 		switch (e.key) {
 			case "Left":
 			case "ArrowLeft": {
-				if ($props.orientation === "horizontal" && headerIndex > 0) {
+				if (orientation === "horizontal" && headerIndex > 0) {
 					e.preventDefault();
 					itemStates[headerIndex - 1].setFocused();
 				}
@@ -189,7 +195,7 @@ export default function TabGroup($props: TabGroupProps) {
 			}
 			case "Up":
 			case "ArrowUp": {
-				if ($props.orientation === "vertical" && headerIndex > 0) {
+				if (orientation === "vertical" && headerIndex > 0) {
 					e.preventDefault();
 					itemStates[headerIndex - 1].setFocused();
 				}
@@ -197,7 +203,7 @@ export default function TabGroup($props: TabGroupProps) {
 			}
 			case "Right":
 			case "ArrowRight": {
-				if ($props.orientation === "horizontal" && headerIndex < itemStates.length - 1) {
+				if (orientation === "horizontal" && headerIndex < itemStates.length - 1) {
 					e.preventDefault();
 					itemStates[headerIndex + 1].setFocused();
 				}
@@ -205,7 +211,7 @@ export default function TabGroup($props: TabGroupProps) {
 			}
 			case "Down":
 			case "ArrowDown": {
-				if ($props.orientation === "vertical" && headerIndex < itemStates.length - 1) {
+				if (orientation === "vertical" && headerIndex < itemStates.length - 1) {
 					e.preventDefault();
 					itemStates[headerIndex + 1].setFocused();
 				}
@@ -230,9 +236,9 @@ export default function TabGroup($props: TabGroupProps) {
 
 	@render {
 		<div
-			{$props.id}
-			class={`torp-tab-group ${$props.class ?? ""}`.trim()}
-			data-orientation={$props.orientation}
+			{$props?.id}
+			class={`torp-tab-group ${$props?.class ?? ""}`.trim()}
+			data-orientation={$props?.orientation}
 		>
 			<slot />
 		</div>

package/src/TabGroup/TabGroupTypes.ts

@@ -3,9 +3,13 @@ export const TabItemContextName = "TabItem";
 
 export interface TabGroupContext {
 	/** Called from a header when it is added */
-	registerHeader: (index: number, value: string, setFocused: () => void) => ItemState;
+	registerHeader: (
+		index: number | undefined,
+		value: string | undefined,
+		setFocused: () => void,
+	) => ItemState;
 	/** Called from an item when it is added */
-	registerItem: (index: number, value: string) => ItemState;
+	registerItem: (index: number | undefined, value: string | undefined) => ItemState;
 	/** Called from an item when it is removed */
 	removeItem: (index: number) => void;
 	/** Called from an item when it is triggered */
@@ -17,12 +21,14 @@ export interface TabGroupContext {
 }
 
 export interface TabItemContext {
-	/** Called when an item is triggered */
+	/** Raised when an item is triggered */
 	triggerItem: (value: string) => void;
-	/** Called when a TabHeader receives a keyboard event */
+	/** Raised when a TabHeader receives a keyboard event */
 	handleHeaderKey: (index: number, e: KeyboardEvent) => void;
 	/** The reactive state for an item */
 	state: ItemState;
+	orientation: "horizontal" | "vertical";
+	activation: "automatic" | "manual";
 }
 
 export interface ItemState {
@@ -33,7 +39,6 @@ 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

@@ -7,6 +7,10 @@ interface TabHeaderProps {
 	class?: string,
 	/** The type of HTML header to use */
 	as?: "h1" | "h2" | "h3" | "h4" | "h5" | "h6"
+	/** The index of this header's item */
+	index?: number,
+	/** The value for this header's item */
+	value?: string,
 }
 
 /**
@@ -20,19 +24,21 @@ interface TabHeaderProps {
  * </TabHeader>
  * ```
  */
-export default function TabHeader($props: TabHeaderProps) {
-	$props ??= $watch({});
+export default function TabHeader($props: TabHeaderProps | undefined) {
+	let button: HTMLButtonElement;
 
 	const context = $context[TabGroupContextName] as TabGroupContext;
 	if (!context) {
 		throw new Error("TabHeader must be contained within a TabGroup");
 	}
-	let $state = context.registerHeader($props.index, $props.value);
+	let $state = context.registerHeader($props?.index, $props?.value);
 
 	const itemContext: TabItemContext = {
 		triggerItem: context.triggerItem,
 		handleHeaderKey: context.handleHeaderKey,
 		state: $state,
+		orientation: context.orientation,
+		activation: context.activation
 	};
 	$context[TabItemContextName] = itemContext;
 
@@ -44,16 +50,17 @@ export default function TabHeader($props: TabHeaderProps) {
 	});
 
 	@render {
-		@// TODO: $props.as
+		@// TODO: $props?.as
 		<h4
-			{$props.id}
+			{$props?.id}
 			class={[
 				"torp-tab-header",
-				$props.class,
-				$state.orientation
+				$props?.class,
+				context.orientation
 			]}
-			data-state={$state.dataState}
+			data-state={$state.active ? "active" : "inactive"}
 			data-disabled={$state.disabled ? "true" : undefined}
+			&ref={button}
 		>
 			<slot />
 		</h4>

package/src/TabGroup/TabList.torp

@@ -22,9 +22,7 @@ interface TabListProps {
  * </TabList>
  * ```
  */
-export default function TabList($props: TabListProps) {
-	$props ??= $watch({});
-
+export default function TabList($props: TabListProps | undefined) {
 	// Get stuff out of the TabGroupContext
 	const context = $context[TabGroupContextName] as TabGroupContext;
 	if (!context) {
@@ -44,10 +42,10 @@ export default function TabList($props: TabListProps) {
 
 	@render {
 		<div
-			{$props.id}
-			class={`torp-tab-list ${$props.class ?? ""}`.trim()}
+			{$props?.id}
+			class={`torp-tab-list ${$props?.class ?? ""}`.trim()}
 			role="tablist"
-			aria-label={$props.ariaLabel}
+			aria-label={$props?.ariaLabel}
 			aria-orientation={orientation}
 			data-orientation={orientation}
 			tabindex="0"

package/src/TabGroup/TabTrigger.torp

@@ -11,9 +11,8 @@ interface TabTriggerProps {
 /**
  * A header button for a tab item, which can be used to reveal an associated TabContent.
  */
-export default function TabTrigger($props: TabTriggerProps) {
-	$props ??= $watch({});
-	$props.id ||= getId();
+export default function TabTrigger($props: TabTriggerProps | undefined) {
+	let defaultId = getId();
 
 	let button: HTMLButtonElement;
 
@@ -25,7 +24,7 @@ export default function TabTrigger($props: TabTriggerProps) {
 	let $state = context.state;
 
 	// Set the header ID so that it can be used with aria-labelledby in TabContent
-	$state.headerId = $props.id;
+	$state.headerId = $props?.id ?? defaultId;
 
 	// Let the item know how to set the button's focus
 	$state.setFocused = setFocused;
@@ -33,7 +32,7 @@ export default function TabTrigger($props: TabTriggerProps) {
 	// This function is called by the parent TabGroup to focus this item's button
 	function setFocused() {
 		button.focus();
-		if ($state.activation === "automatic") {
+		if (context.activation === "automatic") {
 			context.triggerItem($state.value);
 		}
 	}
@@ -52,17 +51,17 @@ export default function TabTrigger($props: TabTriggerProps) {
 	@render {
 		<button
 			type="button"
-			{$props.id}
-			class={`torp-tab-trigger ${$props.class ?? ""}`.trim()}
+			id={$props?.id ?? defaultId}
+			class={`torp-tab-trigger ${$props?.class ?? ""}`.trim()}
 			role="tab"
 			tabindex="-1"
 			disabled={$state.disabled || $state.parentDisabled}
 			aria-selected={$state.active.toString()}
 			aria-disabled={$state.disabled}
 			aria-controls={$state.contentId}
-			data-state={$state.dataState}
+			data-state={$state.active ? "active" : "inactive"}
 			data-disabled={$state.disabled}
-			data-orientation={$state.orientation}
+			data-orientation={context.orientation}
 			&ref={button}
 			onclick={handleClick}
 			onkeydown={handleKey}

package/src/icons/ArrowDown.torp

@@ -1,4 +1,6 @@
-export default function ArrowDown($props: any) {
+import { type IconProps } from "./IconTypes";
+
+export default function ArrowDown($props: IconProps | undefined) {
 	@render {
 		<svg
 			{$props?.id}

package/src/icons/ArrowLeft.torp

@@ -1,4 +1,6 @@
-export default function ArrowLeft($props: any) {
+import { type IconProps } from "./IconTypes";
+
+export default function ArrowLeft($props: IconProps | undefined) {
 	@render {
 		<svg
 			{$props?.id}

package/src/icons/ArrowRight.torp

@@ -1,4 +1,6 @@
-export default function ArrowRight($props: any) {
+import { type IconProps } from "./IconTypes";
+
+export default function ArrowRight($props: IconProps | any) {
 	@render {
 		<svg
 			{$props?.id}

package/src/icons/ArrowUp.torp

@@ -1,4 +1,6 @@
-export default function ArrowUp($props: any) {
+import { type IconProps } from "./IconTypes";
+
+export default function ArrowUp($props: IconProps | undefined) {
 	@render {
 		<svg
 			{$props?.id}

package/src/icons/Bars.torp

@@ -1,4 +1,6 @@
-export default function Bars($props: any) {
+import { type IconProps } from "./IconTypes";
+
+export default function Bars($props: IconProps | undefined) {
 	@render {
 		<svg
 			{$props?.id}

package/src/icons/Check.torp

@@ -1,4 +1,6 @@
-export default function Check($props: any) {
+import { type IconProps } from "./IconTypes";
+
+export default function Check($props: IconProps | undefined) {
 	@render {
 		<svg
 			{$props?.id}