@torpor/ui 0.4.0 → 1.0.0

package/dist/ToolBar/ToolBar.torp

@@ -1,23 +1,19 @@
 import type { ClassValue, StyleValue } from "@torpor/view";
-import {
-	ToolBarContextName,
-	type ToolBarContext,
-	type ItemState,
-	ToolBarPopoutContextName,
-	type ToolBarPopoutContext
-} from "./ToolBarTypes";
+import { type PopoutContext, PopoutContextName } from "../utils/PopoutTypes";
+import { createFocusGroup } from "../utils/focusGroup";
+import { type ItemState, type ToolBarContext, ToolBarContextName } from "./ToolBarTypes";
 
 interface ToolBarProps {
 	/** An ID for the root element */
 	id?: string;
 	/** Classes for the root element */
-	class?: ClassValue,
+	class?: ClassValue;
 	/** Styles for the root element */
-	style?: StyleValue,
+	style?: StyleValue;
 	/** An ARIA label for describing the menu to screen readers  */
-	ariaLabel?: string | undefined,
+	ariaLabel?: string | undefined;
 	/** The orientation of the menu, which affects keyboard navigation */
-	orientation?: "horizontal" | "vertical",
+	orientation?: "horizontal" | "vertical";
 }
 
 /**
@@ -39,19 +35,18 @@ interface ToolBarProps {
 export default function ToolBar($props: ToolBarProps | undefined) {
 	let orientation = $props?.orientation ?? "horizontal";
 
-	// A collection containing the state and some functions for each item
-	let itemStates: ItemState[] = [];
-	let focusIndex = -1;
+	// The focus group owns the item ledger and roving-tabindex bookkeeping
+	const group = createFocusGroup<ItemState>();
 
 	// Check whether this is a menu in a popout
-	const popoutContext = $context[ToolBarPopoutContextName] as ToolBarPopoutContext;
+	const popoutContext = $context[PopoutContextName] as PopoutContext;
 	const inPopout = !!popoutContext;
 	let popoutState = popoutContext?.state;
 
 	// Set the focusFirstElement method in the PopoverContext(s) so that it can be called after everything has been shown
 	if (popoutContext) {
-		popoutContext.focusFirstElement = focusFirstElement;
-		popoutContext.focusLastElement = focusLastElement;
+		popoutContext.focusFirstElement = group.focusFirstItem;
+		popoutContext.focusLastElement = group.focusLastItem;
 	}
 
 	// Set the context to pass down to items
@@ -59,126 +54,50 @@ export default function ToolBar($props: ToolBarProps | undefined) {
 		handleItemFocus,
 		handleItemKey,
 		registerItem,
-		orientation
+		handlePopout,
+		orientation,
 	};
 	$context[ToolBarContextName] = context;
 
-	// If the ToolBar is not in a popout, focus its first item. Otherwise the popout will call focusFirstElement, below
+	// If the ToolBar is not in a popout, focus its first item. Otherwise the popout will call focusFirstItem, below
 	function handleFocus() {
-		if (!popoutContext && itemStates.length) {
-			itemStates[0].setFocused();
+		if (!popoutContext && group.itemStates.length) {
+			group.focusFirstItem();
 		}
 	}
 
-	function focusFirstElement() {
-		if (itemStates.length) {
-			itemStates[0].setFocused();
-		}
-	}
-
-	function focusLastElement() {
-		if (itemStates.length > 0) {
-			itemStates.at(-1)!.setFocused();
-		}
-	}
-
-	function registerItem(setFocused: () => void) {
-		// Add the item's state to the array and return its index
-		const newItemState: ItemState = {
-			setFocused
-		};
-		itemStates.push(newItemState);
-		itemStates = itemStates;
-		return { index: itemStates.length - 1 };
+	function registerItem(item: ItemState) {
+		return group.registerItem(item);
 	}
 
 	function handleItemFocus(index: number) {
-		focusIndex = index;
+		group.handleItemFocus(index);
 	}
 
 	function handleItemKey(e: KeyboardEvent) {
+		const index = group.getFocusIndex();
 		switch (e.key) {
-			case "Esc":
 			case "Escape": {
 				if (inPopout) {
 					e.preventDefault();
-					//setPopoutVisible(false);
 					popoutState.visible = false;
 				}
 				break;
 			}
-			case "Right":
-			case "ArrowRight": {
-				if (orientation === "horizontal") {
-					e.preventDefault();
-					focusItem("next");
-				}
-				break;
-			}
-			case "Left":
-			case "ArrowLeft": {
-				if (orientation === "horizontal") {
-					e.preventDefault();
-					focusItem("previous");
-				}
-				break;
-			}
-			case "Down":
-			case "ArrowDown": {
-				if (orientation === "vertical") {
-					e.preventDefault();
-					focusItem("next");
-				}
-				break;
-			}
-			case "Up":
-			case "ArrowUp": {
-				if (orientation === "vertical") {
-					e.preventDefault();
-					focusItem("previous");
-				} else {
-					// TODO: This should be based on what side the menu shows on
-					// And on the orientation
-					if (inPopout) {
-						e.preventDefault();
-						popoutState.visible = false;
-					}
-				}
-				break;
-			}
-			case "Home": {
-				e.preventDefault();
-				focusItem("start");
-				break;
-			}
-			case "End": {
-				e.preventDefault();
-				focusItem("end");
+			default: {
+				group.handleGroupKey(index, e, { vertical: orientation === "vertical" });
 				break;
 			}
 		}
 	}
 
-	function focusItem(target: "start" | "previous" | "next" | "end") {
-		switch (target) {
-			case "start": {
-				focusIndex = 0;
-				break;
-			}
-			case "previous": {
-				focusIndex = Math.max(0, focusIndex - 1);
-				break;
-			}
-			case "next": {
-				focusIndex = Math.min(itemStates.length - 1, focusIndex + 1);
-				break;
-			}
-			case "end": {
-				focusIndex = itemStates.length - 1;
-				break;
+	function handlePopout(index: number) {
+		// Hide all other popouts
+		for (let item of group.itemStates) {
+			if (item.index !== index) {
+				item.setVisible?.(false);
 			}
 		}
-		itemStates[focusIndex]?.setFocused();
 	}
 
 	@render {
@@ -189,7 +108,7 @@ export default function ToolBar($props: ToolBarProps | undefined) {
 			tabindex="0"
 			role="toolbar"
 			aria-label={$props?.ariaLabel}
-			aria-orientation={orientation}
+			aria-orientation={orientation === "vertical" ? "vertical" : undefined}
 			onfocus={handleFocus}
 		>
 			<slot />

package/dist/ToolBar/ToolBarButton.torp

@@ -1,19 +1,19 @@
 import type { ClassValue, StyleValue } from "@torpor/view";
-import { ToolBarContextName, type ToolBarContext } from "./ToolBarTypes";
+import { type ToolBarContext, ToolBarContextName } from "./ToolBarTypes";
 
 interface ToolBarButtonProps {
 	/** An ID for the root element */
 	id?: string;
 	/** Classes for the root element */
-	class?: ClassValue,
+	class?: ClassValue;
 	/** Styles for the root element */
-	style?: StyleValue,
+	style?: StyleValue;
 	/** Whether this button is disabled  */
-	disabled?: boolean,
+	disabled?: boolean;
 	/** Raised when the button is clicked */
-	onclick?: (e: MouseEvent) => void,
+	onclick?: (e: MouseEvent) => void;
 	/** Raised when a key is pressed down */
-	onkeydown?: (e: KeyboardEvent) => void,
+	onkeydown?: (e: KeyboardEvent) => void;
 }
 
 /**
@@ -31,7 +31,7 @@ export default function ToolBarButton($props: ToolBarButtonProps | undefined) {
 	const { registerItem, handleItemKey, handleItemFocus } = menuContext;
 
 	// Register this item with the parent ToolBar and store the index
-	const { index } = registerItem(setFocused);
+	const { index } = registerItem({ setFocused, disabled: $props?.disabled });
 
 	function setFocused() {
 		button.focus();
@@ -45,7 +45,6 @@ export default function ToolBarButton($props: ToolBarButtonProps | undefined) {
 			type="button"
 			{$props?.disabled}
 			aria-disabled={$props?.disabled ? "true" : undefined}
-			data-disabled={$props?.disabled ? "true" : undefined}
 			{$props?.onclick}
 			onkeydown={handleItemKey}
 			onfocus={() => handleItemFocus(index)}

package/dist/ToolBar/ToolBarElement.torp

@@ -1,17 +1,17 @@
 import type { ClassValue, StyleValue } from "@torpor/view";
-import { ToolBarContextName, type ToolBarContext } from "./ToolBarTypes";
+import { type ToolBarContext, ToolBarContextName } from "./ToolBarTypes";
 
 interface ToolBarElementProps {
 	/** An ID for the root element */
 	id?: string;
 	/** Classes for the root element */
-	class?: ClassValue,
+	class?: ClassValue;
 	/** Styles for the root element */
-	style?: StyleValue,
+	style?: StyleValue;
 	/** Whether this button is disabled  */
-	disabled?: boolean,
+	disabled?: boolean;
 	/** An element that can be focused via keyboard navigation */
-	element?: HTMLElement,
+	element?: HTMLElement;
 }
 
 /**
@@ -27,7 +27,7 @@ export default function ToolBarElement($props: ToolBarElementProps | undefined)
 	const { registerItem, handleItemKey, handleItemFocus } = menuContext;
 
 	// Register this item with the parent ToolBar and store the index
-	const { index } = registerItem(setFocused);
+	const { index } = registerItem({ setFocused, disabled: $props?.disabled });
 
 	function setFocused() {
 		if ($props?.element) {
@@ -40,13 +40,9 @@ export default function ToolBarElement($props: ToolBarElementProps | undefined)
 			{$props?.id}
 			class={["torp-tool-bar-div", $props?.class]}
 			{$props?.style}
-			type="div"
-			role="menuitem"
+			tabindex="0"
 			aria-disabled={$props?.disabled ? "true" : undefined}
-			data-disabled={$props?.disabled ? "true" : undefined}
-			onkeydown
 			onkeydown={handleItemKey}
-			onclick
 			onfocus={() => handleItemFocus(index)}
 		>
 			<slot />

package/dist/ToolBar/ToolBarPopout.torp

@@ -1,26 +1,23 @@
-import type { ClassValue, StyleValue } from "@torpor/view";
-import { ToolBarPopoutContextName, type ToolBarPopoutContext } from "./ToolBarTypes";
-import { PopoutContextName, type PopoutContext } from "../utils/PopoutTypes";
+import type { Bindable, ClassValue, StyleValue } from "@torpor/view";
+import SubmenuPopout from "../utils/SubmenuPopout.torp";
 
 interface ToolBarPopoutProps {
 	/** An ID for the root element */
 	id?: string;
 	/** Classes for the root element */
-	class?: ClassValue,
+	class?: ClassValue;
 	/** Styles for the root element */
-	style?: StyleValue,
+	style?: StyleValue;
 	/** Whether the popout is visible */
-	visible?: boolean,
-	/** Raised when the popout is opened or closed */
-	ontoggle?: (open: boolean) => void,
+	visible: Bindable<boolean | undefined>;
 	/** Raised when the popout has opened */
-	onopen?: () => void,
+	onopen?: () => void;
 	/** Raised when the popout has closed */
-	onclose?: (result: any) => void,
+	onclose?: (result: any) => void;
 }
 
 /**
- * A popout that is attached to a menu button and can be used to show a submenu.
+ * A popout that is attached to a toolbar button and can be used to show a submenu.
  *
  * The structure of a ToolBarPopout is:
  *
@@ -32,66 +29,17 @@ interface ToolBarPopoutProps {
  * ```
  */
 export default function ToolBarPopout($props: ToolBarPopoutProps | undefined) {
-	let $state = $watch({
-		visible: false
-	});
-
-	// Sync props and state
-	$run(() => {
-		$state.visible = $props?.visible ?? false;
-	});
-	$run(() => {
-		if ($props !== undefined) {
-			$props.visible = $state.visible;
-		}
-	});
-
-	let result: any;
-
-	// Set the context to pass down to items
-	let context: ToolBarPopoutContext = {
-		state: $state,
-	};
-	$context[ToolBarPopoutContextName] = context;
-
-	// Set the context to pass down to items
-	let popoutContext: PopoutContext = {
-		handleButton: () => {},
-		state: $state,
-	};
-	$context[PopoutContextName] = popoutContext;
-
-	// Dispatch the toggle event when the popout is opened or closed
-	let firstToggle = true;
-	$run(() => {
-		const ontoggle = $props?.ontoggle;
-		const onopen = $props?.onopen;
-		const onclose = $props?.onclose;
-		const visible = $state.visible;
-		if (firstToggle) {
-			firstToggle = false;
-		} else {
-			if (ontoggle) ontoggle(visible);
-			if (visible) {
-				if (onopen) onopen()
-			} else {
-				if (onclose) onclose(result);
-			}
-		}
-	});
-
-	function handleMouseLeave() {
-		$state.visible = false;
-	}
-
 	@render {
-		<div
-			{$props?.id}
+		<SubmenuPopout
+			id={$props?.id}
 			class={["torp-tool-bar-popout", $props?.class]}
-			{$props?.style}
-			onmouseleave={handleMouseLeave}
+			style={$props?.style}
+			visible={$props?.visible}
+			onopen={$props?.onopen}
+			onclose={$props?.onclose}
+			contentRole="menu"
 		>
 			<slot />
-		</div>
+		</SubmenuPopout>
 	}
 }

package/dist/ToolBar/ToolBarPopoutContent.torp

@@ -1,19 +1,17 @@
 import type { ClassValue, StyleValue } from "@torpor/view";
-import getScrollParent from "../utils/getScrollParent";
-import setPopoverPosition from "../utils/setPopoverPosition";
-import { ToolBarPopoutContextName, type ToolBarPopoutContext } from "./ToolBarTypes";
+import SubmenuPopoutContent from "../utils/SubmenuPopoutContent.torp";
 
 interface ToolBarPopoutContentProps {
 	/** An ID for the root element */
 	id?: string;
 	/** Classes for the root element */
-	class?: ClassValue,
+	class?: ClassValue;
 	/** Styles for the root element */
-	style?: StyleValue,
+	style?: StyleValue;
 	/** Where the popout will be shown, relative to the popout button */
-	side?: "top" | "right" | "bottom" | "left",
+	side?: "top" | "right" | "bottom" | "left";
 	/** How the popout will be aligned, relative to the popout button */
-	alignment?: "start" | "center" | "end",
+	alignment?: "start" | "center" | "end";
 }
 
 /**
@@ -21,72 +19,16 @@ interface ToolBarPopoutContentProps {
  *
  */
 export default function ToolBarPopoutContent($props: ToolBarPopoutContentProps | undefined) {
-	let div: HTMLDivElement;
-	let shown = false;
-
-	// Get stuff out of the ToolBarPopoutContext
-	const context = $context[ToolBarPopoutContextName] as ToolBarPopoutContext;
-	if (!context) {
-		throw new Error("ToolBarPopoutContent must be contained within a ToolBarPopout");
-	}
-	let $state = context.state;
-
-	$run(() => {
-		if (!$state.visible) {
-			hide();
-		}
-	});
-
-	function show() {
-		shown = true;
-
-		// 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();
-		}
-	}
-
-	function hide() {
-		if (!shown) return;
-
-		// 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();
-		}
-	}
-
-	function setPosition() {
-		if (!context.anchorElement) {
-			throw new Error("ToolBarPopoutContent must have an anchor element");
-		}
-
-		if (div) {
-			let side = $props?.side ?? "bottom";
-			let alignment = $props?.alignment ?? "start";
-			setPopoverPosition(context.anchorElement, div, side, alignment);
-		}
-	}
-
 	@render {
-		@if ($state.visible) {
-			<div
-				{$props?.id}
-				class={["torp-tool-bar-popout-content", $props?.class]}
-				{$props?.style}
-				&ref={div}
-				onmount={show}
-			>
-				<slot />
-			</div>
-		}
+		<SubmenuPopoutContent
+			id={$props?.id}
+			class={["torp-tool-bar-popout-content", $props?.class]}
+			style={$props?.style}
+			side={$props?.side}
+			alignment={$props?.alignment}
+			role="menu"
+		>
+			<slot />
+		</SubmenuPopoutContent>
 	}
 }

package/dist/ToolBar/ToolBarPopoutTrigger.torp

@@ -1,22 +1,18 @@
 import type { ClassValue, StyleValue } from "@torpor/view";
-import {
-	ToolBarContextName,
-	ToolBarPopoutContextName,
-	type ToolBarContext,
-	type ToolBarPopoutContext,
-} from "./ToolBarTypes";
+import SubmenuPopoutTrigger from "../utils/SubmenuPopoutTrigger.torp";
+import { type ToolBarContext, ToolBarContextName } from "./ToolBarTypes";
 
 interface ToolBarPopoutTriggerProps {
 	/** An ID for the root element */
 	id?: string;
 	/** Classes for the root element */
-	class?: ClassValue,
+	class?: ClassValue;
 	/** Styles for the root element */
-	style?: StyleValue,
+	style?: StyleValue;
 	/** The delay before showing the popout, in milliseconds */
-	hoverDelay?: number,
+	hoverDelay?: number;
 	/** Whether this button is disabled */
-	disabled?: boolean,
+	disabled?: boolean;
 }
 
 /**
@@ -24,115 +20,28 @@ interface ToolBarPopoutTriggerProps {
  *
  */
 export default function ToolBarPopoutTrigger($props: ToolBarPopoutTriggerProps | undefined) {
-	let defaultHoverDelay = 500;
-
-	let button: HTMLButtonElement;
-	let interval: NodeJS.Timeout | undefined;
-
 	// Get stuff out of the ToolBarContext
 	const toolBarContext = $context[ToolBarContextName] as ToolBarContext;
 	if (!toolBarContext) {
 		throw new Error("ToolBarPopoutTrigger must be contained within a ToolBar");
 	}
-	const { registerItem, handleItemKey, handleItemFocus } = toolBarContext;
-
-	// Get stuff out of the ToolBarPopoutContext
-	const popoutContext = $context[ToolBarPopoutContextName] as ToolBarPopoutContext;
-	if (!popoutContext) {
-		throw new Error("ToolBarPopoutTrigger must be contained within a ToolBarPopout");
-	}
-	let $state = popoutContext.state;
-
-	// Register this item with the parent ToolBar and store the index
-	const { index } = registerItem(setFocused);
-
-	// TODO: $mount should be run AFTER the button has been set
-	//$mount(() => {
-	//	// Set the anchor element to the button when it exists
-	//	popoutContext.anchorElement = button;
-	//});
-
-	function setFocused() {
-		button.focus();
-	}
-
-	function handleClick() {
-		$state.visible = true;
-	}
-
-	function handlePopoutKey(e: KeyboardEvent) {
-		switch (e.key) {
-			case "Right":
-			case "ArrowRight":
-				if (toolBarContext.orientation === "vertical") {
-					// TODO: This should be based on what side the menu shows on
-					e.preventDefault();
-					$state.visible = true;
-				}
-				break;
-			case "Down":
-			case "ArrowDown":
-				if (toolBarContext.orientation === "horizontal") {
-					e.preventDefault();
-					$state.visible = true;
-				}
-				break;
-			default:
-				handleItemKey(e);
-		}
-	}
-
-	function handleMouseEnter() {
-		if ($props?.disabled) return;
-
-		// Handle the hover after a delay
-		if (!interval) {
-			interval = setTimeout(() => $state.visible = true, $props?.hoverDelay ?? defaultHoverDelay);
-		}
-	}
-
-	function handleMouseLeave() {
-		if ($props?.disabled) return;
-
-		// Prevent short hovers or touches from firing the event
-		if (interval) {
-			clearTimeout(interval);
-			interval = undefined;
-		}
-	}
-
-	function handleMouseMove() {
-		if ($props?.disabled) return;
-
-		// Reset the interval on mouse move
-		if (interval) {
-			clearTimeout(interval);
-			interval = setTimeout(() => $state.visible = true, $props?.hoverDelay ?? defaultHoverDelay);
-		}
-	}
+	const { registerItem, handleItemKey, handleItemFocus, handlePopout, orientation } =
+		toolBarContext;
 
 	@render {
-		<button
-			{$props?.id}
+		<SubmenuPopoutTrigger
+			id={$props?.id}
 			class={["torp-tool-bar-popout-trigger", $props?.class]}
-			{$props?.style}
-			type="button"
-			{$props?.disabled}
-			role="menuitem"
-			aria-haspopup="true"
-			aria-expanded={$state.visible.toString()}
-			aria-disabled={$props?.disabled ? "true" : undefined}
-			data-disabled={$props?.disabled ? "true" : undefined}
-			onkeydown={handlePopoutKey}
-			onclick={handleClick}
-			onfocus={() => handleItemFocus(index)}
-			onmouseenter={handleMouseEnter}
-			onmouseleave={handleMouseLeave}
-			onmousemove={handleMouseMove}
-			&ref={button}
-			onmount={(el) => popoutContext.anchorElement = el }
+			style={$props?.style}
+			hoverDelay={$props?.hoverDelay}
+			disabled={$props?.disabled}
+			openKey={orientation === "vertical" ? "ArrowRight" : "ArrowDown"}
+			registerItem={registerItem}
+			handleItemKey={handleItemKey}
+			handleItemFocus={handleItemFocus}
+			onActivate={handlePopout}
 		>
 			<slot />
-		</button>
+		</SubmenuPopoutTrigger>
 	}
 }