@torpor/ui 0.4.0 → 1.0.0

package/dist/MenuBar/MenuBarItem.torp

@@ -1,27 +1,25 @@
 import type { ClassValue, StyleValue } from "@torpor/view";
+import SubmenuPopout from "../utils/SubmenuPopout.torp";
 import {
+	type MenuBarContext,
 	MenuBarContextName,
+	type MenuBarItemContext,
 	MenuBarItemContextName,
-	type MenuBarContext,
-	type MenuBarItemContext
 } from "./MenuBarTypes";
-import { PopoutContextName, type PopoutContext } from "../utils/PopoutTypes";
 
 interface MenuBarItemProps {
 	/** 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 item is visible */
-	visible?: boolean,
-	/** Raised when the item is opened or closed */
-	ontoggle?: (visible: boolean) => void,
+	visible?: boolean;
 	/** Raised when the item has opened */
-	onopen?: () => void,
+	onopen?: () => void;
 	/** Raised when the item has closed */
-	onclose?: (result: any) => void,
+	onclose?: (result: any) => void;
 }
 
 /**
@@ -38,76 +36,60 @@ interface MenuBarItemProps {
  */
 export default function MenuBarItem($props: MenuBarItemProps | undefined) {
 	let $state = $watch({
-		visible: $props?.visible ?? false
+		visible: false,
+		contentId: undefined,
+		triggerId: undefined,
+		contentRole: undefined,
 	});
 
-	let result: any;
-
 	// Get stuff out of the MenuBarContext
 	const menubarContext = $context[MenuBarContextName] as MenuBarContext;
 	if (!menubarContext) {
 		throw new Error("MenuBarItem must be contained within a MenuBar");
 	}
-	const { handleItemShow } = menubarContext;
+	const { handleItemShow, handleAdjacentItem } = menubarContext;
 
-	// Set the context to pass down to items
-	let context: MenuBarItemContext = {
+	// Set the context to pass down to the trigger and content
+	let itemContext: MenuBarItemContext = {
 		setVisible,
 		state: $state,
-		index: -1
+		index: -1,
 	};
-	$context[MenuBarItemContextName] = context;
+	$context[MenuBarItemContextName] = itemContext;
 
-	// Set the context to pass down to items
-	let popoutContext: PopoutContext = {
-		handleButton,
-		state: $state,
-	};
-	$context[PopoutContextName] = popoutContext;
-
-	$mount(() => {
-		setVisible(false);
-	});
+	function handleNavigateMenuBar(target: "previous" | "next") {
+		// Called from a contained Menu when focus should move to an adjacent
+		// menubar item; the MenuBar moves focus and opens that item's menu
+		handleAdjacentItem(itemContext.index, target);
+	}
 
 	function setVisible(value: boolean) {
 		if (!value || menubarContext.state.active) {
 			$state.visible = value;
 			if (value) {
-				handleItemShow(context.index);
+				handleItemShow(itemContext.index);
 			}
 		}
 	}
 
-	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 handleButton(_type: "confirm" | "cancel" | undefined, _value?: any) {
 		menubarContext.state.active = false;
 		setVisible(false);
 	}
 
 	@render {
-		<div 
-			{$props?.id}
+		<SubmenuPopout
+			id={$props?.id}
 			class={["torp-menu-bar-item", $props?.class]}
-			{$props?.style}
+			style={$props?.style}
+			visible={$props?.visible}
+			onopen={$props?.onopen}
+			onclose={$props?.onclose}
+			state={$state}
+			context={{ handleButton, navigateMenuBar: handleNavigateMenuBar }}
+			closeOnMouseLeave={false}
 		>
 			<slot />
-		</div>
+		</SubmenuPopout>
 	}
 }

package/dist/MenuBar/MenuBarItemContent.torp

@@ -1,119 +1,33 @@
 import type { ClassValue, StyleValue } from "@torpor/view";
-import { addDocumentEvent, removeDocumentEvent } from "../utils/documentEvents";
-import setPopoverPosition from "../utils/setPopoverPosition";
-import {
-	MenuBarContextName,
-	MenuBarItemContextName,
-	type MenuBarContext,
-	type MenuBarItemContext
-} from "./MenuBarTypes";
+import SubmenuPopoutContent from "../utils/SubmenuPopoutContent.torp";
 
 interface MenuBarItemContentProps {
 	/** 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 MenuBarItem when it is open.
  */
 export default function MenuBarItemContent($props: MenuBarItemContentProps | undefined) {
-	let div: HTMLDivElement;
-	let closeOnClick = false;
-	let shown = false;
-
-	// Get stuff out of the MenuBarContext
-	const context = $context[MenuBarContextName] as MenuBarContext;
-	if (!context) {
-		throw new Error("MenuBarItemContent must be contained within a MenuBar");
-	}
-
-	// Get stuff out of the MenuBarItemContext
-	const itemContext = $context[MenuBarItemContextName] as MenuBarItemContext;
-	if (!itemContext) {
-		throw new Error("MenuBarItemContent must be contained within a MenuBarItem");
-	}
-	const { state: $state, setVisible } = itemContext;
-
-	$run(() => {
-		if (!$state.visible) {
-			hide();
-		}
-	});
-
-	function show() {
-		shown = true;
-
-		// HACK: Because this Contextual could be shown with a click, we need to wait for another mousedown
-		// before we close on click. Otherwise the click immediately bubbles to the document. I guess
-		// we could require the user to preventDefault after calling showContextual, but that seems very
-		// error-prone?
-		closeOnClick = false;
-		addDocumentEvent("mousedown", handleDocumentMouseDown);
-		addDocumentEvent("click", handleDocumentClick);
-
-		// Set the position and listen for window resize and scroll to reset the position
-		setPosition();
-		addEventListener("resize", setPosition);
-		addEventListener("scroll", setPosition);
-		if (itemContext.focusFirstElement) {
-			itemContext.focusFirstElement();
-		}
-	}
-
-	function hide() {
-		if (!shown) return;
-
-		removeDocumentEvent("mousedown", handleDocumentMouseDown);
-		removeDocumentEvent("click", handleDocumentClick);
-
-		// Stop listening for window resize and focus the anchor element per WAI guidelines
-		removeEventListener("resize", setPosition);
-		removeEventListener("scroll", setPosition);
-		if (itemContext.anchorElement?.focus) {
-			itemContext.anchorElement.focus();
-		}
-	}
-
-	function handleDocumentMouseDown() {
-		closeOnClick = true;
-	}
-
-	function handleDocumentClick(e: MouseEvent) {
-		if (closeOnClick && !div.contains(e.target as HTMLElement)) {
-			//context.active = false;
-			setVisible(false);
-		}
-	}
-
-	function setPosition() {
-		if (!itemContext.anchorElement) {
-			throw new Error("MenuBarItemContent must have an anchor element");
-		}
-
-		let side = $props?.side ?? "bottom";
-		let alignment = $props?.alignment ?? "start";
-		setPopoverPosition(itemContext.anchorElement, div, side, alignment);
-	}
-
 	@render {
-		@if ($state.visible) {
-			<div
-				{$props?.id}
-				class={["torp-menu-bar-item-content", $props?.class]}
-				{$props?.style}
-				&ref={div}
-				onmount={show}
-			>
-				<slot />
-			</div>
-		}
+		<SubmenuPopoutContent
+			id={$props?.id}
+			class={["torp-menu-bar-item-content", $props?.class]}
+			style={$props?.style}
+			side={$props?.side}
+			alignment={$props?.alignment}
+			closeOnEscape={false}
+		>
+			<slot />
+		</SubmenuPopoutContent>
 	}
 }

package/dist/MenuBar/MenuBarItemTrigger.torp

@@ -1,20 +1,21 @@
 import type { ClassValue, StyleValue } from "@torpor/view";
+import SubmenuPopoutTrigger from "../utils/SubmenuPopoutTrigger.torp";
 import {
+	type MenuBarContext,
 	MenuBarContextName,
+	type MenuBarItemContext,
 	MenuBarItemContextName,
-	type MenuBarContext,
-	type MenuBarItemContext
 } from "./MenuBarTypes";
 
 interface MenuBarItemTriggerProps {
 	/** 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;
 }
 
 /**
@@ -22,8 +23,6 @@ interface MenuBarItemTriggerProps {
  *
  */
 export default function MenuBarItemTrigger($props: MenuBarItemTriggerProps | undefined) {
-	let button: HTMLButtonElement;
-
 	// Get stuff out of the MenuBarContext
 	const menubarContext = $context[MenuBarContextName] as MenuBarContext;
 	if (!menubarContext) {
@@ -36,64 +35,30 @@ export default function MenuBarItemTrigger($props: MenuBarItemTriggerProps | und
 	if (!itemContext) {
 		throw new Error("MenuBarItemTrigger must be contained within a MenuBarItem");
 	}
-	const { state: $state, setVisible } = itemContext;
-
-	// Register this item with the parent MenuBar and store the index
-	const { index } = registerItem(setVisible, setFocused);
-
-	$mount(() => {
-		// Set the anchor element to the button when it exists
-		//itemContext.anchorElement = button;
-		itemContext.index = index;
-	});
-
-	function setFocused() {
-		button.focus();
-	}
 
 	function handleClick() {
 		menubarContext.state.active = !menubarContext.state.active;
-		setVisible(menubarContext.state.active);
-	}
-
-	function handleKey(e: KeyboardEvent) {
-		switch (e.key) {
-			case "Down":
-			case "ArrowDown":
-				// TODO: This should be based on what side the menu shows on
-				e.preventDefault();
-				menubarContext.state.active = true;
-				setVisible(true);
-				break;
-			default:
-				handleButtonKey(e);
-		}
-	}
-
-	function handleMouseEnter() {
-		setVisible(true);
+		itemContext.setVisible(menubarContext.state.active);
 	}
 
 	@render {
-		<button
-			{$props?.id}
+		<SubmenuPopoutTrigger
+			id={$props?.id}
 			class={["torp-menu-bar-item-button", $props?.class]}
-			{$props?.style}
-			type="button"
-			{$props?.disabled}
+			style={$props?.style}
+			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={handleKey}
+			openKey="ArrowDown"
+			hoverDelay={0}
+			registerItem={registerItem}
+			handleItemKey={handleButtonKey}
+			handleItemFocus={handleButtonFocus}
+			setVisible={itemContext.setVisible}
+			onRegister={(index: number) => (itemContext.index = index)}
+			onActivate={() => (menubarContext.state.active = true)}
 			onclick={handleClick}
-			onfocus={() => handleButtonFocus(index)}
-			onmouseenter={handleMouseEnter}
-			&ref={button}
-			onmount={(el) => itemContext.anchorElement = el}
 		>
 			<slot />
-		</button>
+		</SubmenuPopoutTrigger>
 	}
 }

package/dist/MenuBar/MenuBarTypes.ts

@@ -1,3 +1,5 @@
+import { type PopoutState, type SubmenuItemState } from "../utils/PopoutTypes";
+
 export const MenuBarContextName: unique symbol = Symbol.for("torp.MenuBar");
 export const MenuBarItemContextName: unique symbol = Symbol.for("torp.MenuBarItem");
 
@@ -11,8 +13,14 @@ export interface MenuBarContext {
 	/** Called from a MenuBarButton when a key is pressed */
 	handleButtonKey: (e: KeyboardEvent) => void;
 
+	/**
+	 * Called from a MenuBarItem when a contained menu signals that focus should
+	 * move to an adjacent item, opening its menu
+	 */
+	handleAdjacentItem: (index: number, target: "previous" | "next") => void;
+
 	/** Called from each MenuBarButton to register itself with this MenuBar */
-	registerItem: (setVisible: (value: boolean) => void, setFocused: () => void) => { index: number };
+	registerItem: (item: ItemState) => { index: number };
 
 	state: {
 		/** Whether a menubar item is showing its content. If so, changing to another item should show its content */
@@ -22,15 +30,8 @@ export interface MenuBarContext {
 
 export interface MenuBarItemContext {
 	setVisible: (value: boolean) => void;
-	state: {
-		visible: boolean;
-	};
+	state: PopoutState;
 	index: number;
-	anchorElement?: HTMLElement;
-	focusFirstElement?: () => void;
 }
 
-export interface ItemState {
-	setVisible: (value: boolean) => void;
-	setFocused: () => void;
-}
+export type ItemState = SubmenuItemState;

package/dist/MenuBar/index.d.ts

@@ -5,13 +5,13 @@ interface MenuBarProps {
 	/** 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,
+	ariaLabel?: string;
 	/** The orientation of the menu, which affects keyboard navigation */
-	orientation?: "horizontal" | "vertical",
+	orientation?: "horizontal" | "vertical";
 }
 
 /**
@@ -46,17 +46,15 @@ interface MenuBarItemProps {
 	/** 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 item is visible */
-	visible?: boolean,
-	/** Raised when the item is opened or closed */
-	ontoggle?: (visible: boolean) => void,
+	visible?: boolean;
 	/** Raised when the item has opened */
-	onopen?: () => void,
+	onopen?: () => void;
 	/** Raised when the item has closed */
-	onclose?: (result: any) => void,
+	onclose?: (result: any) => void;
 }
 
 /**
@@ -85,13 +83,13 @@ interface MenuBarItemContentProps {
 	/** 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";
 }
 
 /**
@@ -111,11 +109,11 @@ interface MenuBarItemTriggerProps {
 	/** 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;
 }
 
 /**
@@ -130,4 +128,4 @@ declare function MenuBarItemTrigger(
 	$slots?: Record<string, SlotRender>,
 ): void;
 
-export { MenuBar, MenuBarItem, MenuBarItemContent, MenuBarItemTrigger };
+export { MenuBar, MenuBarItem, MenuBarItemContent, MenuBarItemTrigger };

package/dist/MenuBar/index.js

@@ -1,18 +1,5 @@
-// src/MenuBar/MenuBar.torp
-import MenuBar_default from "./MenuBar.torp";
-
-// src/MenuBar/MenuBarItem.torp
-import MenuBarItem_default from "./MenuBarItem.torp";
-
-// src/MenuBar/MenuBarItemContent.torp
-import MenuBarItemContent_default from "./MenuBarItemContent.torp";
-
-// src/MenuBar/MenuBarItemTrigger.torp
-import MenuBarItemTrigger_default from "./MenuBarItemTrigger.torp";
-export {
-  MenuBar_default as MenuBar,
-  MenuBarItem_default as MenuBarItem,
-  MenuBarItemContent_default as MenuBarItemContent,
-  MenuBarItemTrigger_default as MenuBarItemTrigger
-};
-//# sourceMappingURL=index.js.map
+import MenuBar from "./MenuBar.torp";
+import MenuBarItem from "./MenuBarItem.torp";
+import MenuBarItemContent from "./MenuBarItemContent.torp";
+import MenuBarItemTrigger from "./MenuBarItemTrigger.torp";
+export { MenuBar, MenuBarItem, MenuBarItemContent, MenuBarItemTrigger };

package/dist/Modal/Modal.torp

@@ -1,24 +1,21 @@
-import type { ClassValue, StyleValue } from "@torpor/view";
-import { ModalContextName, type ModalContext, type ModalState } from "./ModalTypes";
-import { PopoutContextName, type PopoutContext } from "../utils/PopoutTypes";
+import type { Bindable, ClassValue, StyleValue } from "@torpor/view";
+import $handle from "../utils/$handle";
+import { type PopoutContext, PopoutContextName } from "../utils/PopoutTypes";
+import { type ModalContext, ModalContextName, type ModalState } from "./ModalTypes";
 
 interface ModalProps {
 	/** 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 modal is visible  */
-	visible?: boolean,
-	/** A function to be called when the user selects a response */
-	callback?: ((value: any) => void),
-	/** Raised when the modal is opened or closed */
-	ontoggle?: (open: boolean) => void,
+	visible: Bindable<boolean | undefined>;
 	/** Raised when the modal has opened */
-	onopen?: () => void,
+	onopen?: () => void;
 	/** Raised when the modal has closed */
-	onclose?: (result: any) => void,
+	onclose?: (result: any) => void;
 }
 
 /**
@@ -39,18 +36,13 @@ interface ModalProps {
 export default function Modal($props: ModalProps | undefined) {
 	let $state: ModalState = $watch({
 		visible: false,
-	})
-
-	// Sync props and state
-	$run(() => {
-		$state.visible = $props?.visible ?? false;
-	});
-	$run(() => {
-		if ($props !== undefined) {
-			$props.visible = $state.visible;
-		}
+		contentId: undefined,
+		triggerId: undefined,
+		contentRole: undefined,
 	});
 
+	$bind($state, $props, "visible");
+
 	let result: any;
 
 	// Set the context to pass down to items
@@ -65,22 +57,14 @@ export default function Modal($props: ModalProps | undefined) {
 	let popoutContext: PopoutContext = context;
 	$context[PopoutContextName] = popoutContext;
 
-	// Dispatch the toggle event when the modal is opened or closed
-	let firstToggle = true;
-	$run(() => {
-		const ontoggle = $props?.ontoggle;
-		const onopen = $props?.onopen;
-		const onclose = $props?.onclose;
+	// Dispatch the open/close events when the modal is opened or closed
+	$handle((first) => {
 		const visible = $state.visible;
-		if (firstToggle) {
-			firstToggle = false;
+		if (first) return;
+		if (visible) {
+			$props?.onopen?.();
 		} else {
-			if (ontoggle) ontoggle(visible);
-			if (visible) {
-				if (onopen) onopen()
-			} else {
-				if (onclose) onclose(result);
-			}
+			$props?.onclose?.(result);
 		}
 	});
 
@@ -103,24 +87,15 @@ export default function Modal($props: ModalProps | undefined) {
 
 		// Hide the modal
 		$state.visible = false;
-
-		// Call the callback
-		if ($props?.callback) {
-			$props?.callback(result);
-		}
 	}
 
-	function handleClickOutside(e: MouseEvent) {
+	function handleClickOutside(e: MouseEvent | KeyboardEvent) {
 		e.preventDefault();
 		$state.visible = false;
 	}
 
 	@render {
-		<div
-			{$props?.id}
-			class={["torp-modal", $props?.class]}
-			{$props?.style}
-		>
+		<div {$props?.id} class={["torp-modal", $props?.class]} {$props?.style}>
 			<slot />
 		</div>
 	}