@torpor/ui 0.1.6 → 0.2.0

package/dist/MenuBar/MenuBarItemContent.torp

@@ -0,0 +1,108 @@
+import { addDocumentEvent, removeDocumentEvent } from "../utils/documentEvents";
+import setPopoverPosition from "../utils/setPopoverPosition";
+import {
+	MenuBarContextName,
+	MenuBarItemContextName,
+	type MenuBarContext,
+	type MenuBarItemContext
+} from "./MenuBarTypes";
+
+/**
+ * The content that is displayed for a MenuBarItem when it is open.
+ *
+ * @prop {"top" | "right" | "bottom" | "left"} side -- Where the popout will be shown, relative to the popout button
+ * @prop {"start" | "center" | "end"} alignment -- How the popout will be aligned, relative to the popout button
+ */
+export default function MenuBarItemContent() {
+	$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/dist/MenuBar/MenuBarItemTrigger.torp

@@ -0,0 +1,89 @@
+import {
+	MenuBarContextName,
+	MenuBarItemContextName,
+	type MenuBarContext,
+	type MenuBarItemContext
+} from "./MenuBarTypes";
+
+/**
+ * A button that is placed in a MenuBar and opens a submenu.
+ *
+ * @prop {boolean} disabled -- Whether this button is disabled
+ */
+export default function MenuBarItemTrigger() {
+	$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/dist/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/dist/MenuBar/index.d.ts

@@ -0,0 +1,74 @@
+import { type SlotRender } from "@torpor/view";
+
+
+/**
+ * Mounts or hydrates the component into the supplied parent node.
+ * @param $parent -- The parent node.
+ * @param $anchor -- The node to mount the component before.
+ * @param $props -- The values that have been passed into the component as properties.
+ * @param $context -- Values that have been passed into the component from its ancestors.
+ * @param $slots -- Functions for rendering children into slot nodes within the component.
+ */
+declare function MenuBar(
+	$parent: ParentNode,
+	$anchor: Node | null,
+	$props?: Record<PropertyKey, any>,
+	$context?: Record<PropertyKey, any>,
+	$slots?: Record<string, SlotRender>,
+): void;
+
+
+
+/**
+ * Mounts or hydrates the component into the supplied parent node.
+ * @param $parent -- The parent node.
+ * @param $anchor -- The node to mount the component before.
+ * @param $props -- The values that have been passed into the component as properties.
+ * @param $context -- Values that have been passed into the component from its ancestors.
+ * @param $slots -- Functions for rendering children into slot nodes within the component.
+ */
+declare function MenuBarItem(
+	$parent: ParentNode,
+	$anchor: Node | null,
+	$props?: Record<PropertyKey, any>,
+	$context?: Record<PropertyKey, any>,
+	$slots?: Record<string, SlotRender>,
+): void;
+
+
+
+/**
+ * Mounts or hydrates the component into the supplied parent node.
+ * @param $parent -- The parent node.
+ * @param $anchor -- The node to mount the component before.
+ * @param $props -- The values that have been passed into the component as properties.
+ * @param $context -- Values that have been passed into the component from its ancestors.
+ * @param $slots -- Functions for rendering children into slot nodes within the component.
+ */
+declare function MenuBarItemContent(
+	$parent: ParentNode,
+	$anchor: Node | null,
+	$props?: Record<PropertyKey, any>,
+	$context?: Record<PropertyKey, any>,
+	$slots?: Record<string, SlotRender>,
+): void;
+
+
+
+/**
+ * Mounts or hydrates the component into the supplied parent node.
+ * @param $parent -- The parent node.
+ * @param $anchor -- The node to mount the component before.
+ * @param $props -- The values that have been passed into the component as properties.
+ * @param $context -- Values that have been passed into the component from its ancestors.
+ * @param $slots -- Functions for rendering children into slot nodes within the component.
+ */
+declare function MenuBarItemTrigger(
+	$parent: ParentNode,
+	$anchor: Node | null,
+	$props?: Record<PropertyKey, any>,
+	$context?: Record<PropertyKey, any>,
+	$slots?: Record<string, SlotRender>,
+): void;
+
+export { MenuBar, MenuBarItem, MenuBarItemContent, MenuBarItemTrigger };

package/dist/MenuBar/index.js

@@ -0,0 +1,18 @@
+// 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

package/dist/MenuBar/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}

package/dist/NavMenu/NavMenu.torp

@@ -164,7 +164,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 +172,7 @@ export default function NavMenu($props: any) {
 			aria-orientation={$props.orientation}
 			onfocus={handleFocus}
 		>
-			<:slot />
+			<slot />
 		</nav>
 	}
 }

package/dist/NavMenu/NavMenuButton.torp

@@ -27,7 +27,7 @@ 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}
@@ -40,7 +40,7 @@ export default function NavMenuButton($props: any) {
 			onfocus={() => handleItemFocus(index)}
 			&ref={button}
 		>
-			<:slot />
+			<slot />
 		</button>
 	}
 }

package/dist/NavMenu/NavMenuElement.torp

@@ -26,7 +26,7 @@ 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"
@@ -37,7 +37,7 @@ export default function NavMenuElement($props: any) {
 			onclick
 			onfocus={() => handleItemFocus(index)}
 		>
-			<:slot />
+			<slot />
 		</div>
 	}
 }

package/dist/NavMenu/NavMenuGroup.torp

@@ -18,13 +18,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/dist/NavMenu/NavMenuGroupHeader.torp

@@ -21,10 +21,10 @@ export default function NavMenuGroupHeader($props: any) {
 	@render {
 		<h4
 			@// TODO: self={$props.as}
-			id={$props.id}
+			{$props.id}
 			class={`torp-nav-menu-group-header ${$props.class ?? ""}`.trim()}
 		>
-			<:slot />
+			<slot />
 		</h4>
 	}
 }

package/dist/NavMenu/NavMenuLink.torp

@@ -32,7 +32,7 @@ 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}
@@ -46,7 +46,7 @@ export default function NavMenuLink($props: any) {
 			onfocus={() => handleItemFocus(index)}
 			&ref={link}
 		>
-			<:slot />
+			<slot />
 		</a>
 	}
 }

package/dist/NavMenu/NavMenuPopout.torp

@@ -59,11 +59,11 @@ export default function NavMenuPopout($props: any) {
 
 	@render {
 		<div
-			id={$props.id}
+			{$props.id}
 			class={`torp-nav-menu-popout ${$props.class ?? ""}`.trim()}
 			onmouseleave={handleMouseLeave}
 		>
-			<:slot />
+			<slot />
 		</div>
 	}
 }

package/dist/NavMenu/NavMenuPopoutButton.torp

@@ -96,7 +96,7 @@ export default function NavMenuPopoutButton($props: any) {
 
 	@render {
 		<button
-			id={$props.id}
+			{$props.id}
 			class={`torp-nav-menu-popout-button ${$props.class ?? ""}`.trim()}
 			type="button"
 			{$props.disabled}
@@ -112,9 +112,9 @@ export default function NavMenuPopoutButton($props: any) {
 			onmouseleave={handleMouseLeave}
 			onmousemove={handleMouseMove}
 			&ref={button}
-			:onmount={(el) => popoutContext.anchorElement = el }
+			onmount={(el) => popoutContext.anchorElement = el }
 		>
-			<:slot />
+			<slot />
 		</button>
 	}
 }

package/dist/NavMenu/NavMenuPopoutContent.torp

@@ -14,6 +14,7 @@ export default function NavMenuPopoutContent($props: any) {
 	$props.alignment ??= "start";
 
 	let div: HTMLDivElement;
+	let shown = false;
 
 	// Get stuff out of the NavMenuPopoutContext
 	const context = $context[NavMenuPopoutContextName] as NavMenuPopoutContext;
@@ -22,35 +23,36 @@ export default function NavMenuPopoutContent($props: any) {
 	}
 	let $state = context.state;
 
-	let first = true;
 	$run(() => {
-		let visible = $state.visible;
+		if (!$state.visible) {
+			hide();
+		}
+	});
 
-		if (first) {
-			first = false;
-			return;
+	function show() {
+		shown = true;
+
+		// Set the position and listen for window resize and scroll to reset the position
+		setPosition();
+		const scrollParent = getScrollParent(context.anchorElement)
+		scrollParent.addEventListener("resize", setPosition);
+		scrollParent.addEventListener("scroll", setPosition);
+		if (context.focusFirstElement) {
+			context.focusFirstElement();
 		}
+	}
 
-		if (visible) {
-			// Wait for the content div to be shown, set its position, and listen for window resize to re-position
-			//await tick();
-			setPosition();
-			if (context.focusFirstElement) {
-				context.focusFirstElement();
-			}
-			const scrollParent = getScrollParent(context.anchorElement)
-			scrollParent.addEventListener("resize", setPosition);
-			scrollParent.addEventListener("scroll", setPosition);
-		} else {
-			// Stop listening for window resize and focus the anchor element per WAI guidelines
-			const scrollParent = getScrollParent(context.anchorElement)
-			scrollParent.removeEventListener("resize", setPosition);
-			scrollParent.removeEventListener("scroll", setPosition);
-			if (context.anchorElement?.focus) {
-				context.anchorElement.focus();
-			}
+	function hide() {
+		if (!shown) return;
+
+		// Stop listening for window resize and focus the anchor element per WAI guidelines
+		const scrollParent = getScrollParent(context.anchorElement)
+		scrollParent.removeEventListener("resize", setPosition);
+		scrollParent.removeEventListener("scroll", setPosition);
+		if (context.anchorElement?.focus) {
+			context.anchorElement.focus();
 		}
-	});
+	}
 
 	function setPosition() {
 		if (!context.anchorElement) {
@@ -65,12 +67,12 @@ export default function NavMenuPopoutContent($props: any) {
 	@render {
 		@if ($state.visible) {
 			<div
-				id={$props.id}
+				{$props.id}
 				class={`torp-nav-menu-popout-content ${$props.class ?? ""}`.trim()}
 				&ref={div}
-				:onmount={(el) => setPopoverPosition(context.anchorElement, el, $props.side, $props.alignment)}
+				onmount={show}
 			>
-				<:slot />
+				<slot />
 			</div>
 		}
 	}

package/dist/NavMenu/NavMenuSeparator.torp

@@ -5,10 +5,10 @@
 export default function NavMenuSeparator($props: any) {
 	@render {
 		<div
-			id={$props.id}
+			{$props.id}
 			class={`torp-nav-menu-separator ${$props.class ?? ""}`.trim()} role="separator"
 		>
-			<:slot />
+			<slot />
 		</div>
 	}
 }