@torpor/ui 0.1.7 → 0.2.1

package/src/MenuBar/MenuBarItem.torp

@@ -0,0 +1,115 @@
+import {
+	MenuBarContextName,
+	MenuBarItemContextName,
+	type MenuBarContext,
+	type MenuBarItemContext
+} from "./MenuBarTypes";
+import { PopoverContextName, type PopoverContext } from "../Popover/PopoverTypes";
+
+interface MenuBarItemProps {
+	/** An ID for the root element */
+	id?: string;
+	/** Class name(s) for the root element */
+	class?: string,
+	/** Whether the item is visible */
+	visible?: boolean,
+	/** Called when the item is opened or closed */
+	ontoggle?: (visible: boolean) => void,
+	/** Called when the item has opened */
+	onopen?: () => void,
+	/** Called when the item has closed */
+	onclose?: () => void,
+}
+
+/**
+ * A popout that is attached to a menubar button and can be used to show a submenu.
+ *
+ * The structure of a MenuBarItem is:
+ *
+ * ```
+ * <MenuBarItem>
+ *     <MenuBarItemTrigger /> (optional)
+ *     <MenuBarItemContent />
+ * </MenuBarItem>
+ * ```
+ */
+export default function MenuBarItem($props: MenuBarItemProps) {
+	$props ??= $watch({});
+	$props.visible ??= false;
+
+	let $state = $watch({
+		visible: $props.visible
+	});
+
+	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;
+
+	// Set the context to pass down to items
+	let context: MenuBarItemContext = {
+		setVisible,
+		state: $state,
+		index: -1
+	};
+	$context[MenuBarItemContextName] = context;
+
+	// Set the context to pass down to items
+	let popoverContext: PopoverContext = {
+		setVisible,
+		handleButton,
+		modal: false,
+		state: $state,
+		//anchorElement: anchor,
+	};
+	$context[PopoverContextName] = popoverContext;
+
+	$mount(() => {
+		setVisible();
+	});
+
+	function setVisible(value: boolean) {
+		if (!value || menubarContext.state.active) {
+			$state.visible = value;
+			if (value) {
+				handleItemShow(context.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}
+			class={`torp-menu-bar-item ${$props.class ?? ""}`.trim()}
+		>
+			<slot />
+		</div>
+	}
+}

package/src/MenuBar/MenuBarItemContent.torp

@@ -0,0 +1,117 @@
+import { addDocumentEvent, removeDocumentEvent } from "../utils/documentEvents";
+import setPopoverPosition from "../utils/setPopoverPosition";
+import {
+	MenuBarContextName,
+	MenuBarItemContextName,
+	type MenuBarContext,
+	type MenuBarItemContext
+} from "./MenuBarTypes";
+
+interface MenuBarItemContentProps {
+	/** An ID for the root element */
+	id?: string;
+	/** Class name(s) for the root element */
+	class?: string,
+	/** Where the popout will be shown, relative to the popout button */
+	side?: "top" | "right" | "bottom" | "left",
+	/** How the popout will be aligned, relative to the popout button */
+	alignment?: "start" | "center" | "end",
+}
+
+/**
+ * The content that is displayed for a MenuBarItem when it is open.
+ */
+export default function MenuBarItemContent($props: MenuBarItemContentProps) {
+	$props ??= $watch({});
+	$props.side ??= "bottom";
+	$props.alignment ??= "start";
+
+	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");
+		}
+
+		setPopoverPosition(itemContext.anchorElement, div, $props.side, $props.alignment);
+	}
+
+	@render {
+		@if ($state.visible) {
+			<div
+				{$props.id}
+				class={`torp-menu-bar-item-content ${$props.class ?? ""}`.trim()}
+				&ref={div}
+				onmount={show}
+			>
+				<slot />
+			</div>
+		}
+	}
+}

package/src/MenuBar/MenuBarItemTrigger.torp

@@ -0,0 +1,98 @@
+import {
+	MenuBarContextName,
+	MenuBarItemContextName,
+	type MenuBarContext,
+	type MenuBarItemContext
+} from "./MenuBarTypes";
+
+interface MenuBarItemTriggerProps {
+	/** An ID for the root element */
+	id?: string;
+	/** Class name(s) for the root element */
+	class?: string,
+	/** Whether this button is disabled */
+	disabled?: boolean,
+}
+
+/**
+ * A button that is placed in a MenuBar and opens a submenu.
+ *
+ */
+export default function MenuBarItemTrigger($props: MenuBarItemTriggerProps) {
+	$props ??= $watch({});
+	$props.disabled ??= false;
+
+	let button: HTMLButtonElement;
+
+	// Get stuff out of the MenuBarContext
+	const menubarContext = $context[MenuBarContextName] as MenuBarContext;
+	if (!menubarContext) {
+		throw new Error("MenuBarItemTrigger must be contained within a MenuBar");
+	}
+	const { registerItem, handleButtonKey, handleButtonFocus } = menubarContext;
+
+	// Get stuff out of the MenuBarItemContext
+	const itemContext = $context[MenuBarItemContextName] as MenuBarItemContext;
+	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);
+	}
+
+	@render {
+		<button
+			{$props.id}
+			class={`torp-menu-bar-item-button ${$props.class ?? ""}`.trim()}
+			type="button"
+			{$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}
+			onclick={handleClick}
+			onfocus={() => handleButtonFocus(index)}
+			onmouseenter={handleMouseEnter}
+			&ref={button}
+			onmount={(el) => itemContext.anchorElement = el}
+		>
+			<slot />
+		</button>
+	}
+}

package/src/MenuBar/MenuBarTypes.ts

@@ -0,0 +1,36 @@
+export const MenuBarContextName = "MenuBar";
+export const MenuBarItemContextName = "MenuBarItem";
+
+export interface MenuBarContext {
+	/** Called from a MenuBarItem when it is shown, to hide others */
+	handleItemShow: (index: number) => void;
+
+	/** Called from a MenuBarButton when its button is focused */
+	handleButtonFocus: (index: number) => void;
+
+	/** Called from a MenuBarButton when a key is pressed */
+	handleButtonKey: (e: KeyboardEvent) => void;
+
+	/** Called from each MenuBarButton to register itself with this MenuBar */
+	registerItem: (setVisible: (value: boolean) => void, setFocused: () => void) => { index: number };
+
+	state: {
+		/** Whether a menubar item is showing its content. If so, changing to another item should show its content */
+		active: boolean;
+	};
+}
+
+export interface MenuBarItemContext {
+	setVisible: (value: boolean) => void;
+	state: {
+		visible: boolean;
+	};
+	index: number;
+	anchorElement?: HTMLElement;
+	focusFirstElement?: () => void;
+}
+
+export interface ItemState {
+	setVisible: (value: boolean) => void;
+	setFocused: () => void;
+}

package/src/MenuBar/index.ts

@@ -0,0 +1,6 @@
+import MenuBar from "./MenuBar.torp";
+import MenuBarItem from "./MenuBarItem.torp";
+import MenuBarItemContent from "./MenuBarItemContent.torp";
+import MenuBarItemTrigger from "./MenuBarItemTrigger.torp";
+
+export { MenuBar, MenuBarItem, MenuBarItemTrigger, MenuBarItemContent };

package/src/NavMenu/NavMenu.torp

@@ -6,6 +6,17 @@ import {
 	type NavMenuPopoutContext
 } from "./NavMenuTypes";
 
+interface NavMenuProps {
+	/** An ID for the root element */
+	id?: string;
+	/** Class name(s) for the root element */
+	class?: string,
+	/** An ARIA label for describing the menu to screen readers  */
+	ariaLabel?: string | undefined,
+	/** The orientation of the menu, which affects keyboard navigation */
+	orientation?: "horizontal" | "vertical",
+}
+
 /**
  * A list of links for navigating a website.
  *
@@ -21,11 +32,9 @@ import {
  *	 ...
  * </NavMenu>
  * ```
- *
- * @prop {string | undefined} ariaLabel -- An ARIA label for describing the menu to screen readers 
- * @prop {"horizontal" | "vertical"} orientation -- The orientation of the menu, which affects keyboard navigation
  */
-export default function NavMenu($props: any) {
+export default function NavMenu($props: NavMenuProps) {
+	$props ??= $watch({});
 	$props.orientation ||= "horizontal";
 
 	// A collection containing the state and some functions for each item
@@ -164,7 +173,7 @@ export default function NavMenu($props: any) {
 
 	@render {
 		<nav
-			id={$props.id}
+			{$props.id}
 			class={`torp-nav-menu ${$props.class ?? ""}`.trim()}
 			tabindex="0"
 			role="menubar"
@@ -172,7 +181,7 @@ export default function NavMenu($props: any) {
 			aria-orientation={$props.orientation}
 			onfocus={handleFocus}
 		>
-			<:slot />
+			<slot />
 		</nav>
 	}
 }

package/src/NavMenu/NavMenuButton.torp

@@ -1,13 +1,20 @@
 import { NavMenuContextName, type NavMenuContext } from "./NavMenuTypes";
 
+interface NavMenuButtonProps {
+	/** An ID for the root element */
+	id?: string;
+	/** Class name(s) for the root element */
+	class?: string,
+	/** Whether this button is disabled  */
+	disabled?: boolean,
+}
+
 /**
  * A button that is placed in a NavMenu to carry out a non-navigation action such as logging out.
  *
- * @prop {boolean} disabled -- Whether this button is disabled 
  */
-export default function NavMenuButton($props: any) {
-	/** Set when the item is disabled */
-	let dataDisabled = $props.disabled || undefined;
+export default function NavMenuButton($props: NavMenuButtonProps) {
+	$props ??= $watch({});
 
 	let button: HTMLButtonElement;
 
@@ -27,20 +34,20 @@ export default function NavMenuButton($props: any) {
 
 	@render {
 		<button
-			id={$props.id}
+			{$props.id}
 			class={`torp-nav-menu-button ${$props.class ?? ""}`.trim()}
 			type="button"
 			{$props.disabled}
 			role="menuitem"
 			aria-disabled={$props.disabled ? "true" : undefined}
-			data-disabled={dataDisabled}
+			data-disabled={$props.disabled ? "true" : undefined}
 			onkeydown
 			onkeydown={handleItemKey}
 			onclick
 			onfocus={() => handleItemFocus(index)}
 			&ref={button}
 		>
-			<:slot />
+			<slot />
 		</button>
 	}
 }

package/src/NavMenu/NavMenuElement.torp

@@ -1,14 +1,22 @@
 import { NavMenuContextName, type NavMenuContext } from "./NavMenuTypes";
 
+interface NavMenuElementProps {
+	/** An ID for the root element */
+	id?: string;
+	/** Class name(s) for the root element */
+	class?: string,
+	/** Whether this button is disabled  */
+	disabled?: boolean,
+	/** An element that can be focused via keyboard navigation */
+	element?: HTMLElement,
+}
+
 /**
  * An element of any type that can be placed in a NavMenu.
  *
- * @prop {boolean} disabled -- Whether this button is disabled 
- * @prop {HTMLElement} element -- An element that can be focused via keyboard navigation
  */
-export default function NavMenuElement($props: any) {
-	/** Set when the item is disabled */
-	let dataDisabled = $props.disabled || undefined;
+export default function NavMenuElement($props: NavMenuElementProps) {
+	$props ??= $watch({});
 
 	// Get stuff out of the NavMenuContext
 	const menuContext = $context[NavMenuContextName] as NavMenuContext;
@@ -26,18 +34,18 @@ export default function NavMenuElement($props: any) {
 
 	@render {
 		<div
-			id={$props.id}
+			{$props.id}
 			class={`torp-nav-menu-div ${$props.class ?? ""}`.trim()}
 			type="div"
 			role="menuitem"
 			aria-disabled={$props.disabled ? "true" : undefined}
-			data-disabled={dataDisabled}
+			data-disabled={$props.disabled ? "true" : undefined}
 			onkeydown
 			onkeydown={handleItemKey}
 			onclick
 			onfocus={() => handleItemFocus(index)}
 		>
-			<:slot />
+			<slot />
 		</div>
 	}
 }

package/src/NavMenu/NavMenuGroup.torp

@@ -1,11 +1,20 @@
 import { NavMenuGroupContextName, type NavMenuGroupContext } from "./NavMenuTypes";
 
+interface NavMenuGroupProps {
+	/** An ID for the root element */
+	id?: string;
+	/** Class name(s) for the root element */
+	class?: string,
+	/** An ARIA label for describing the group to screen readers  */
+	ariaLabel?: string,
+}
+
 /**
  * A container for a logical group of navigation menu items.
- *
- * @prop {string | undefined} ariaLabel -- An ARIA label for describing the group to screen readers 
  */
-export default function NavMenuGroup($props: any) {
+export default function NavMenuGroup($props: NavMenuGroupProps) {
+	$props ??= $watch({});
+
 	let $state = $watch({
 		headerId: ""
 	});
@@ -18,13 +27,13 @@ export default function NavMenuGroup($props: any) {
 
 	@render {
 		<div
-			id={$props.id}
+			{$props.id}
 			class={`torp-nav-menu-group ${$props.class ?? ""}`.trim()}
 			role="group"
 			aria-label={$props.ariaLabel}
 			aria-labelledby={$state.headerId}
 		>
-			<:slot />
+			<slot />
 		</div>
 	}
 }

package/src/NavMenu/NavMenuGroupHeader.torp

@@ -1,12 +1,20 @@
 import getId from "../utils/getId";
 import { NavMenuGroupContextName, type NavMenuGroupContext } from "./NavMenuTypes";
 
+interface NavMenuGroupHeaderProps {
+	/** An ID for the root element */
+	id?: string;
+	/** Class name(s) for the root element */
+	class?: string,
+	/** The type of HTML header to use */
+	as?: "h1" | "h2" | "h3" | "h4" | "h5" | "h6",
+}
+
 /**
  * The header for a NavMenuGroup.
- *
- * @prop {"h1" | "h2" | "h3" | "h4" | "h5" | "h6"} as -- The type of HTML header to use
  */
-export default function NavMenuGroupHeader($props: any) {
+export default function NavMenuGroupHeader($props: NavMenuGroupHeaderProps) {
+	$props ??= $watch({});
 	$props.id ??= getId();
 
 	const context = $context[NavMenuGroupContextName] as NavMenuGroupContext;
@@ -19,12 +27,12 @@ export default function NavMenuGroupHeader($props: any) {
 	$state.headerId = $props.id;
 
 	@render {
+		@// TODO: self={$props.as}
 		<h4
-			@// TODO: self={$props.as}
-			id={$props.id}
+			{$props.id}
 			class={`torp-nav-menu-group-header ${$props.class ?? ""}`.trim()}
 		>
-			<:slot />
+			<slot />
 		</h4>
 	}
 }

package/src/NavMenu/NavMenuLink.torp

@@ -1,19 +1,27 @@
 
 import { NavMenuContextName, type NavMenuContext } from "./NavMenuTypes";
 
+interface NavMenuLinkProps {
+	/** An ID for the root element */
+	id?: string;
+	/** Class name(s) for the root element */
+	class?: string,
+	/** The URL for the menu link */
+	href: string,
+	/** Whether the menu link should open in a new tab/window */
+	newWindow?: boolean,
+	/** Whether this link is disabled */
+	disabled?: boolean,
+}
+
 /**
  * A link that is placed in a NavMenu and signals a response by a user.
  *
- * @prop {string} href -- The URL for the menu link
- * @prop {newWindow} boolean -- Whether the menu link should open in a new tab/window
- * @prop {boolean} disabled -- Whether this link is disabled
  */
-export default function NavMenuLink($props: any) {
+export default function NavMenuLink($props: NavMenuLinkProps) {
+	$props ??= $watch({ href: "#" });
 	$props.newWindow ??= false;
 
-	/** Set when the item is disabled */
-	let dataDisabled = $props.disabled || undefined;
-
 	let link: HTMLAnchorElement;
 
 	// Get stuff out of the NavMenuContext
@@ -32,21 +40,21 @@ export default function NavMenuLink($props: any) {
 
 	@render {
 		<a
-			id={$props.id}
+			{$props.id}
 			class={`torp-nav-menu-link ${$props.class ?? ""}`.trim()}
 			href={$props.href}
 			{$props.disabled}
 			target={$props.newWindow ? "_blank" : undefined}
 			role="menuitem"
 			aria-disabled={$props.disabled ? "true" : undefined}
-			data-disabled={dataDisabled}
+			data-disabled={$props.disabled ? "true" : undefined}
 			onkeydown
 			onkeydown={handleItemKey}
 			onclick
 			onfocus={() => handleItemFocus(index)}
 			&ref={link}
 		>
-			<:slot />
+			<slot />
 		</a>
 	}
 }