@torpor/ui 0.4.0 → 1.0.0

package/dist/Menu/MenuButton.torp

@@ -1,21 +1,21 @@
 import type { ClassValue, StyleValue } from "@torpor/view";
-import { MenuContextName, type MenuContext } from "./MenuTypes";
+import { type ItemState, type MenuContext, MenuContextName } from "./MenuTypes";
 
 interface MenuButtonProps {
 	/** 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 value that should be returned when this button is pressed and the Dialog was invoked by calling showContextual, showPrompt or showPopover */
-	value?: any,
+	value?: any;
 	/** 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;
 }
 
 /**
@@ -33,7 +33,8 @@ export default function MenuButton($props: MenuButtonProps | undefined) {
 	const { registerItem, handleButton, handleItemKey, handleItemFocus } = menuContext;
 
 	// Register this item with the parent Menu and store the index
-	const { index } = registerItem(setFocused);
+	const item: ItemState = { setFocused, disabled: $props?.disabled };
+	const { index } = registerItem(item);
 
 	function handleKeyDown(e: KeyboardEvent) {
 		handleItemKey(e);
@@ -43,7 +44,7 @@ export default function MenuButton($props: MenuButtonProps | undefined) {
 	}
 
 	function handleClick(e: MouseEvent) {
-		handleButton($props?.value);
+		handleButton("confirm", $props?.value);
 		if ($props?.onclick) {
 			$props.onclick(e);
 		}
@@ -53,6 +54,11 @@ export default function MenuButton($props: MenuButtonProps | undefined) {
 		button.focus();
 	}
 
+	// Store the item's label for type-ahead
+	function handleMount(el: HTMLButtonElement) {
+		item.text = el.textContent.trim();
+	}
+
 	@render {
 		<button
 			{$props?.id}
@@ -61,11 +67,12 @@ export default function MenuButton($props: MenuButtonProps | undefined) {
 			type="button"
 			{$props?.disabled}
 			role="menuitem"
+			tabindex="-1"
 			aria-disabled={$props?.disabled ? "true" : undefined}
-			data-disabled={$props?.disabled ? "true" : undefined}
 			onkeydown={handleKeyDown}
 			onclick={handleClick}
 			onfocus={() => handleItemFocus(index)}
+			onmount={handleMount}
 			&ref={button}
 		>
 			<slot />

package/dist/Menu/MenuCheck.torp

@@ -1,24 +1,25 @@
-import type { ClassValue, StyleValue } from "@torpor/view";
+import type { Bindable, ClassValue, StyleValue } from "@torpor/view";
 import {
+	type ItemState,
+	type MenuButtonContext,
 	MenuButtonContextName,
+	type MenuContext,
 	MenuContextName,
-	type MenuButtonContext,
-	type MenuContext
 } from "./MenuTypes";
 
 interface MenuCheckProps {
 	/** 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 item is checked */
-	checked?: boolean,
+	checked: Bindable<boolean | undefined>;
 	/** Whether this item is disabled */
-	disabled?: boolean,
+	disabled?: boolean;
 	/** Raised when the checkbox is clicked */
-	onclick?: (e: MouseEvent) => void,
+	onclick?: (e: MouseEvent) => void;
 }
 
 /**
@@ -28,14 +29,10 @@ interface MenuCheckProps {
  */
 export default function MenuCheck($props: MenuCheckProps | undefined) {
 	let $state = $watch({
-		checked: $props?.checked ?? false
+		checked: $props?.checked ?? false,
 	});
 
-	$run(() => {
-		if ($props !== undefined) {
-			$props.checked = $state.checked;
-		}
-	});
+	$bind($state, $props, "checked");
 
 	let button: HTMLButtonElement;
 
@@ -47,11 +44,12 @@ export default function MenuCheck($props: MenuCheckProps | undefined) {
 	const { registerItem, handleItemKey, handleItemFocus } = menuContext;
 
 	// Register this item with the parent Menu
-	const { index } = registerItem(setFocused);
+	const item: ItemState = { setFocused, disabled: $props?.disabled };
+	const { index } = registerItem(item);
 
 	// Set the context to pass down to items
 	let context: MenuButtonContext = {
-		state: $state
+		state: $state,
 	};
 	$context[MenuButtonContextName] = context;
 
@@ -59,6 +57,11 @@ export default function MenuCheck($props: MenuCheckProps | undefined) {
 		button.focus();
 	}
 
+	// Store the item's label for type-ahead
+	function handleMount(el: HTMLButtonElement) {
+		item.text = el.textContent.trim();
+	}
+
 	function handleClick(e: MouseEvent) {
 		$state.checked = !$state.checked;
 		if ($props?.onclick) {
@@ -74,13 +77,14 @@ export default function MenuCheck($props: MenuCheckProps | undefined) {
 			type="button"
 			{$props?.disabled}
 			role="menuitemcheckbox"
-			aria-checked={$props?.checked ? "true" : "false"}
+			tabindex="-1"
+			aria-checked={$state.checked ? "true" : "false"}
 			aria-disabled={$props?.disabled ? "true" : undefined}
 			data-state={$props?.checked ? "checked" : "unchecked"}
-			data-disabled={$props?.disabled ? "true" : undefined}
 			onkeydown={handleItemKey}
 			onclick={handleClick}
 			onfocus={() => handleItemFocus(index)}
+			onmount={handleMount}
 			&ref={button}
 		>
 			<slot />

package/dist/Menu/MenuGroup.torp

@@ -4,11 +4,11 @@ interface MenuGroupProps {
 	/** 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 group to screen readers */
-	ariaLabel?: string,
+	ariaLabel?: string;
 }
 
 /**
@@ -28,4 +28,4 @@ export default function MenuGroup($props: MenuGroupProps | undefined) {
 			<slot />
 		</div>
 	}
-}
+}

package/dist/Menu/MenuIndicator.torp

@@ -1,21 +1,19 @@
 import type { ClassValue, StyleValue } from "@torpor/view";
-import { MenuButtonContextName, type MenuButtonContext } from "./MenuTypes";
+import { type MenuButtonContext, MenuButtonContextName } from "./MenuTypes";
 
 interface MenuIndicatorProps {
 	/** An ID for the root element */
 	id?: string;
 	/** Classes for the root element */
-	class?: ClassValue,
+	class?: ClassValue;
 	/** Styles for the root element */
-	style?: StyleValue,
-	/** Whether this item is disabled */
-	disabled?: boolean,
+	style?: StyleValue;
 }
 
 /**
  * An indicator for a MenuCheck or MenuRadio component, which is displayed
  * when the value of checked is true.
- */ 
+ */
 export default function MenuIndicator($props: MenuIndicatorProps | undefined) {
 	// Get stuff out of the MenuButtonContext
 	const context = $context[MenuButtonContextName] as MenuButtonContext;
@@ -26,13 +24,7 @@ export default function MenuIndicator($props: MenuIndicatorProps | undefined) {
 
 	@render {
 		@if ($state.checked) {
-			<div
-				{$props?.id}
-				class={["torp-menu-indicator", $props?.class]}
-				{$props?.style}
-				aria-disabled={$props?.disabled ? "true" : undefined}
-				data-disabled={$props?.disabled ? "true" : undefined}
-			>
+			<div {$props?.id} class={["torp-menu-indicator", $props?.class]} {$props?.style}>
 				<slot />
 			</div>
 		}

package/dist/Menu/MenuPopout.torp

@@ -1,21 +1,20 @@
 import type { ClassValue, StyleValue } from "@torpor/view";
-import { MenuPopoutContextName, type MenuPopoutContext } from "./MenuTypes";
+import SubmenuPopout from "../utils/SubmenuPopout.torp";
+import { type MenuContext, MenuContextName } from "./MenuTypes";
 
 interface MenuPopoutProps {
 	/** 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?: boolean;
 	/** Raised when the popout has opened */
-	onopen?: () => void,
+	onopen?: () => void;
 	/** Raised when the popout has closed */
-	onclose?: (result: any) => void,
+	onclose?: (result: any) => void;
 }
 
 /**
@@ -31,53 +30,24 @@ interface MenuPopoutProps {
  * ```
  */
 export default function MenuPopout($props: MenuPopoutProps | undefined) {
-	let $state = $watch({
-		visible: $props?.visible ?? false
-	});
-
-	let result: any;
-
-	// Set the context to pass down to items
-	let context: MenuPopoutContext = {
-		setVisible,
-		state: $state
-	};
-	$context[MenuPopoutContextName] = context;
-
-	function setVisible(value: boolean) {
-		$state.visible = value;
-	}
-
-	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() {
-		setVisible(false);
+	// Get stuff out of the MenuContext
+	const menuContext = $context[MenuContextName] as MenuContext;
+	if (!menuContext) {
+		throw new Error("MenuPopout must be contained within a Menu");
 	}
 
 	@render {
-		<div
-			{$props?.id}
+		<SubmenuPopout
+			id={$props?.id}
 			class={["torp-menu-popout", $props?.class]}
-			{$props?.style}
-			onmouseleave={handleMouseLeave}
+			style={$props?.style}
+			visible={$props?.visible}
+			onopen={$props?.onopen}
+			onclose={$props?.onclose}
+			context={{ handleButton: menuContext.handleButton }}
+			contentRole="menu"
 		>
 			<slot />
-		</div>
+		</SubmenuPopout>
 	}
 }

package/dist/Menu/MenuPopoutContent.torp

@@ -1,84 +1,33 @@
 import type { ClassValue, StyleValue } from "@torpor/view";
-import setPopoverPosition from "../utils/setPopoverPosition";
-import { MenuPopoutContextName, type MenuPopoutContext } from "./MenuTypes";
+import SubmenuPopoutContent from "../utils/SubmenuPopoutContent.torp";
 
 interface MenuPopoutContentProps {
 	/** 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";
 }
 
 /**
  * The content that is displayed for a MenuPopout when it is open.
  */
 export default function MenuPopoutContent($props: MenuPopoutContentProps | undefined) {
-	let div: HTMLDivElement;
-	let shown = false;
-
-	// Get stuff out of the MenuPopoutContext
-	const popoutContext = $context[MenuPopoutContextName] as MenuPopoutContext;
-	if (!popoutContext) {
-		throw new Error("MenuPopoutContent must be contained within a MenuPopout");
-	}
-	let $state = popoutContext.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();
-		addEventListener("resize", setPosition);
-		addEventListener("scroll", setPosition);
-		if (popoutContext.focusFirstElement) {
-			popoutContext.focusFirstElement();
-		}
-	}
-
-	function hide() {
-		if (!shown) return;
-
-		// Stop listening for window resize and focus the anchor element per WAI guidelines
-		removeEventListener("resize", setPosition);
-		removeEventListener("scroll", setPosition);
-		if (popoutContext.anchorElement?.focus) {
-			popoutContext.anchorElement.focus();
-		}
-	}
-
-	function setPosition() {
-		if (!popoutContext.anchorElement) {
-			throw new Error("MenuPopoutContent must have an anchor element");
-		}
-
-		let side = $props?.side ?? "right";
-		let alignment = $props?.alignment ?? "start";
-		setPopoverPosition(popoutContext.anchorElement, div, side, alignment);
-	}
-
 	@render {
-		@if ($state.visible) {
-			<div
-				{$props?.id}
-				class={["torp-menu-popout-content", $props?.class]}
-				{$props?.style}
-				&ref={div}
-				onmount={show}
-			>
-				<slot />
-			</div>
-		}
+		<SubmenuPopoutContent
+			id={$props?.id}
+			class={["torp-menu-popout-content", $props?.class]}
+			style={$props?.style}
+			side={$props?.side ?? "right"}
+			alignment={$props?.alignment}
+			escapeOnlyWhenFocused
+		>
+			<slot />
+		</SubmenuPopoutContent>
 	}
 }

package/dist/Menu/MenuPopoutTrigger.torp

@@ -1,128 +1,47 @@
 import type { ClassValue, StyleValue } from "@torpor/view";
-import {
-	MenuContextName,
-	MenuPopoutContextName,
-	type MenuContext,
-	type MenuPopoutContext
-} from "./MenuTypes";
+import SubmenuPopoutTrigger from "../utils/SubmenuPopoutTrigger.torp";
+import { type MenuContext, MenuContextName } from "./MenuTypes";
 
 interface MenuPopoutTriggerProps {
 	/** 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;
 }
 
 /**
  * A button that is placed in a Menu or MenuGroup and signals a response by a user.
  */
 export default function MenuPopoutTrigger($props: MenuPopoutTriggerProps | undefined) {
-	let defaultHoverDelay = 500;
-
-	let button: HTMLButtonElement;
-	let interval: NodeJS.Timeout | undefined;
-
 	// Get stuff out of the MenuContext
 	const menuContext = $context[MenuContextName] as MenuContext;
 	if (!menuContext) {
 		throw new Error("MenuPopoutTrigger must be contained within a Menu");
 	}
-	const { registerItem, handleItemKey, handleItemFocus } = menuContext;
-
-	// Get stuff out of the MenuPopoutContext
-	const popoutContext = $context[MenuPopoutContextName] as MenuPopoutContext;
-	if (!popoutContext) {
-		throw new Error("MenuPopoutTrigger must be contained within a MenuPopout");
-	}
-	const { state: $state, setVisible } = popoutContext;
-
-	// Register this item with the parent Menu and store the index
-	const { index } = registerItem(setFocused);
-
-	// TODO: This is getting called before @render
-	//$mount(() => {
-	//	// Set the anchor element to the button when it exists
-	//	popoutContext.anchorElement = button;
-	//});
-
-	function setFocused() {
-		button.focus();
-	}
-
-	function handleClick() {
-		setVisible(true);
-	}
-
-	function handlePopoutKey(e: KeyboardEvent) {
-		switch (e.key) {
-			case "Right":
-			case "ArrowRight":
-				// TODO: This should be based on what side the menu shows on
-				e.preventDefault();
-				setVisible(true);
-				break;
-			default:
-				handleItemKey(e);
-		}
-	}
-
-	function handleMouseEnter() {
-		if ($props?.disabled) return;
-
-		// Handle the hover after a delay
-		if (!interval) {
-			interval = setTimeout(() => setVisible(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(() => setVisible(true), $props?.hoverDelay ?? defaultHoverDelay);
-		}
-	}
+	const { registerItem, handleItemKey, handleItemFocus, handlePopout } = menuContext;
 
 	@render {
-		<button
-			{$props?.id}
+		<SubmenuPopoutTrigger
+			id={$props?.id}
 			class={["torp-menu-popout-trigger", $props?.class]}
-			{$props?.style}
-			type="button"
-			{$props?.disabled}
+			style={$props?.style}
+			hoverDelay={$props?.hoverDelay}
+			disabled={$props?.disabled}
 			role="menuitem"
-			aria-haspopup="true"
-			aria-expanded={($state.visible ?? false).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}
+			tabindex="-1"
+			openKey="ArrowRight"
+			registerItem={registerItem}
+			handleItemKey={handleItemKey}
+			handleItemFocus={handleItemFocus}
+			onActivate={handlePopout}
 		>
 			<slot />
-		</button>
+		</SubmenuPopoutTrigger>
 	}
 }

package/dist/Menu/MenuRadio.torp

@@ -1,41 +1,37 @@
 import type { ClassValue, StyleValue } from "@torpor/view";
 import {
+	type ItemState,
+	type MenuButtonContext,
 	MenuButtonContextName,
+	type MenuContext,
 	MenuContextName,
+	type MenuRadioGroupContext,
 	MenuRadioGroupContextName,
-	type MenuButtonContext,
-	type MenuContext,
-	type MenuRadioGroupContext
+	type RadioGroupItemState,
 } from "./MenuTypes";
 
 interface MenuRadioProps {
 	/** 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 value of the item */
-	value?: string,
-	/** Whether this item is checked */
-	checked?: boolean,
+	value: string;
 	/** Whether this item is disabled */
-	disabled?: boolean,
+	disabled?: boolean;
 }
 
 /**
  * A button that is placed in a Menu or MenuGroup to allow the user to select
  * from a number of options.
  */
-export default function MenuRadio($props: MenuRadioProps | undefined) {
-	let $state = $watch({
-		checked: $props?.checked ?? false,
-	});
-
-	$run(() => {
-		if ($props !== undefined) {
-			$props.checked = $state.checked;
-		}
+export default function MenuRadio($props: MenuRadioProps) {
+	let $state: RadioGroupItemState = $watch({
+		index: -1,
+		value: $props.value,
+		checked: false,
 	});
 
 	let button: HTMLButtonElement;
@@ -55,14 +51,15 @@ export default function MenuRadio($props: MenuRadioProps | undefined) {
 	const { registerItemInGroup, toggleItem } = groupContext;
 
 	// Register this item with the parent Menu
-	const { index } = registerItem(setFocused);
+	const item: ItemState = { setFocused, disabled: $props?.disabled };
+	const { index } = registerItem(item);
 
 	// Register this item with the parent MenuRadioGroup
-	registerItemInGroup($props?.value ?? "", setChecked);
+	registerItemInGroup($state);
 
 	// Set the context to pass down to items
 	let context: MenuButtonContext = {
-		state: $state
+		state: $state,
 	};
 	$context[MenuButtonContextName] = context;
 
@@ -70,8 +67,9 @@ export default function MenuRadio($props: MenuRadioProps | undefined) {
 		button.focus();
 	}
 
-	function setChecked(value: boolean) {
-		$state.checked = value;
+	// Store the item's label for type-ahead
+	function handleMount(el: HTMLButtonElement) {
+		item.text = el.textContent.trim();
 	}
 
 	function handleClick() {
@@ -88,13 +86,14 @@ export default function MenuRadio($props: MenuRadioProps | undefined) {
 			type="button"
 			{$props?.disabled}
 			role="menuitemradio"
-			aria-checked={$props?.checked}
+			tabindex="-1"
+			aria-checked={$state.checked ? "true" : "false"}
 			aria-disabled={$props?.disabled ? "true" : undefined}
-			data-state={$props?.checked ? "checked" : "unchecked"}
-			data-disabled={$props?.disabled ? "true" : undefined}
+			data-state={$state.checked ? "checked" : "unchecked"}
 			onkeydown={handleItemKey}
 			onclick={handleClick}
 			onfocus={() => handleItemFocus(index)}
+			onmount={handleMount}
 			&ref={button}
 		>
 			<slot />