@torpor/ui 0.3.7 → 1.0.0

package/dist/NavMenu/NavMenuGroup.torp

@@ -1,15 +1,15 @@
 import type { ClassValue, StyleValue } from "@torpor/view";
-import { NavMenuGroupContextName, type NavMenuGroupContext } from "./NavMenuTypes";
+import { type NavMenuGroupContext, NavMenuGroupContextName } from "./NavMenuTypes";
 
 interface NavMenuGroupProps {
 	/** 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;
 }
 
 /**
@@ -17,7 +17,7 @@ interface NavMenuGroupProps {
  */
 export default function NavMenuGroup($props: NavMenuGroupProps | undefined) {
 	let $state = $watch({
-		headerId: ""
+		headerId: "",
 	});
 
 	// Set the context to pass down to items

package/dist/NavMenu/NavMenuGroupHeader.torp

@@ -1,16 +1,14 @@
 import type { ClassValue, StyleValue } from "@torpor/view";
 import getId from "../utils/getId";
-import { NavMenuGroupContextName, type NavMenuGroupContext } from "./NavMenuTypes";
+import { type NavMenuGroupContext, NavMenuGroupContextName } from "./NavMenuTypes";
 
 interface NavMenuGroupHeaderProps {
 	/** An ID for the root element */
 	id?: string;
 	/** Classes for the root element */
-	class?: ClassValue,
+	class?: ClassValue;
 	/** Styles for the root element */
-	style?: StyleValue,
-	/** The type of HTML header to use */
-	as?: "h1" | "h2" | "h3" | "h4" | "h5" | "h6",
+	style?: StyleValue;
 }
 
 /**
@@ -29,13 +27,12 @@ export default function NavMenuGroupHeader($props: NavMenuGroupHeaderProps | und
 	$state.headerId = $props?.id ?? defaultId;
 
 	@render {
-		@// TODO: self={$props.as}
-		<h4
+		<div
 			id={$props?.id ?? defaultId}
 			class={["torp-nav-menu-group-header", $props?.class]}
 			{$props?.style}
 		>
 			<slot />
-		</h4>
+		</div>
 	}
 }

package/dist/NavMenu/NavMenuLink.torp

@@ -1,19 +1,19 @@
 import type { ClassValue, StyleValue } from "@torpor/view";
-import { NavMenuContextName, type NavMenuContext } from "./NavMenuTypes";
+import { type NavMenuContext, NavMenuContextName } from "./NavMenuTypes";
 
 interface NavMenuLinkProps {
 	/** 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 URL for the menu link */
-	href: string,
+	href: string;
 	/** Whether the menu link should open in a new tab/window */
-	newWindow?: boolean,
+	newWindow?: boolean;
 	/** Whether this link is disabled */
-	disabled?: boolean,
+	disabled?: boolean;
 }
 
 /**
@@ -31,7 +31,7 @@ export default function NavMenuLink($props: NavMenuLinkProps | undefined) {
 	const { registerItem, handleItemKey, handleItemFocus } = menuContext;
 
 	// Register this item with the parent NavMenu and store the index
-	const { index } = registerItem(setFocused);
+	const { index } = registerItem({ setFocused, disabled: $props?.disabled });
 
 	function setFocused() {
 		link.focus();
@@ -47,10 +47,7 @@ export default function NavMenuLink($props: NavMenuLinkProps | undefined) {
 			target={$props?.newWindow ? "_blank" : undefined}
 			role="menuitem"
 			aria-disabled={$props?.disabled ? "true" : undefined}
-			data-disabled={$props?.disabled ? "true" : undefined}
-			onkeydown
 			onkeydown={handleItemKey}
-			onclick
 			onfocus={() => handleItemFocus(index)}
 			&ref={link}
 		>

package/dist/NavMenu/NavMenuPopout.torp

@@ -1,89 +1,44 @@
-import type { ClassValue, StyleValue } from "@torpor/view";
-import { NavMenuPopoutContextName, type NavMenuPopoutContext } from "./NavMenuTypes";
+import type { Bindable, ClassValue, StyleValue } from "@torpor/view";
+import SubmenuPopout from "../utils/SubmenuPopout.torp";
 
 interface NavMenuPopoutProps {
 	/** 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 nav menu button and can be used to show a submenu.
  *
  * The structure of a NavMenuPopout is:
  *
  * ```
  * <NavMenuPopout>
- * 	<NavMenuPopoutButton />
+ * 	<NavMenuPopoutTrigger />
  * 	<NavMenuPopoutContent />
  * </NavMenuPopout>
  * ```
  */
 export default function NavMenuPopout($props: NavMenuPopoutProps | 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: NavMenuPopoutContext = {
-		state: $state,
-	};
-	$context[NavMenuPopoutContextName] = context;
-
-	// 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-nav-menu-popout", $props?.class]}
-			{$props?.style}
-			onmouseleave={handleMouseLeave}
+			style={$props?.style}
+			visible={$props?.visible}
+			onopen={$props?.onopen}
+			onclose={$props?.onclose}
 		>
 			<slot />
-		</div>
+		</SubmenuPopout>
 	}
 }

package/dist/NavMenu/NavMenuPopoutContent.torp

@@ -1,19 +1,17 @@
 import type { ClassValue, StyleValue } from "@torpor/view";
-import getScrollParent from "../utils/getScrollParent";
-import setPopoverPosition from "../utils/setPopoverPosition";
-import { NavMenuPopoutContextName, type NavMenuPopoutContext } from "./NavMenuTypes";
+import SubmenuPopoutContent from "../utils/SubmenuPopoutContent.torp";
 
 interface NavMenuPopoutContentProps {
 	/** 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,15 @@ interface NavMenuPopoutContentProps {
  *
  */
 export default function NavMenuPopoutContent($props: NavMenuPopoutContentProps | undefined) {
-	let div: HTMLDivElement;
-	let shown = false;
-
-	// Get stuff out of the NavMenuPopoutContext
-	const context = $context[NavMenuPopoutContextName] as NavMenuPopoutContext;
-	if (!context) {
-		throw new Error("NavMenuPopoutContent must be contained within a NavMenuPopout");
-	}
-	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("NavMenuPopoutContent 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-nav-menu-popout-content", $props?.class]}
-				{$props?.style}
-				&ref={div}
-				onmount={show}
-			>
-				<slot />
-			</div>
-		}
+		<SubmenuPopoutContent
+			id={$props?.id}
+			class={["torp-nav-menu-popout-content", $props?.class]}
+			style={$props?.style}
+			side={$props?.side}
+			alignment={$props?.alignment}
+		>
+			<slot />
+		</SubmenuPopoutContent>
 	}
 }

package/dist/NavMenu/NavMenuPopoutTrigger.torp

@@ -0,0 +1,47 @@
+import type { ClassValue, StyleValue } from "@torpor/view";
+import SubmenuPopoutTrigger from "../utils/SubmenuPopoutTrigger.torp";
+import { type NavMenuContext, NavMenuContextName } from "./NavMenuTypes";
+
+interface NavMenuPopoutTriggerProps {
+	/** An ID for the root element */
+	id?: string;
+	/** Classes for the root element */
+	class?: ClassValue;
+	/** Styles for the root element */
+	style?: StyleValue;
+	/** The delay before showing the popout, in milliseconds */
+	hoverDelay?: number;
+	/** Whether this button is disabled */
+	disabled?: boolean;
+}
+
+/**
+ * A button that is placed in a NavMenu and signals a response by a user.
+ *
+ */
+export default function NavMenuPopoutTrigger($props: NavMenuPopoutTriggerProps | undefined) {
+	// Get stuff out of the NavMenuContext
+	const menuContext = $context[NavMenuContextName] as NavMenuContext;
+	if (!menuContext) {
+		throw new Error("NavMenuPopoutTrigger must be contained within a NavMenu");
+	}
+	const { registerItem, handleItemKey, handleItemFocus } = menuContext;
+
+	@render {
+		<SubmenuPopoutTrigger
+			id={$props?.id}
+			class={["torp-nav-menu-popout-button", $props?.class]}
+			style={$props?.style}
+			hoverDelay={$props?.hoverDelay}
+			disabled={$props?.disabled}
+			role="menuitem"
+			tabindex="-1"
+			openKey="ArrowRight"
+			registerItem={registerItem}
+			handleItemKey={handleItemKey}
+			handleItemFocus={handleItemFocus}
+		>
+			<slot />
+		</SubmenuPopoutTrigger>
+	}
+}

package/dist/NavMenu/NavMenuSeparator.torp

@@ -4,9 +4,9 @@ interface NavMenuSeparatorProps {
 	/** 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;
 }
 
 /**
@@ -14,10 +14,7 @@ interface NavMenuSeparatorProps {
  */
 export default function NavMenuSeparator($props: NavMenuSeparatorProps | undefined) {
 	@render {
-		<div
-			{$props?.id}
-			class={`torp-nav-menu-separator ${$props?.class ?? ""}`.trim()} role="separator"
-		>
+		<div {$props?.id} class={["torp-nav-menu-separator", $props?.class]} role="separator">
 			<slot />
 		</div>
 	}

package/dist/NavMenu/NavMenuTypes.ts

@@ -1,6 +1,7 @@
-export const NavMenuContextName = "NavMenu";
-export const NavMenuPopoutContextName = "NavMenuPopout";
-export const NavMenuGroupContextName = "NavMenuGroup";
+import type { SubmenuItemState } from "../utils/PopoutTypes";
+
+export const NavMenuContextName: unique symbol = Symbol.for("torp.NavMenu");
+export const NavMenuGroupContextName: unique symbol = Symbol.for("torp.NavMenuGroup");
 
 export interface NavMenuContext {
 	/** Called from a NavMenuLink or NavMenuButton when its button is focused */
@@ -10,15 +11,7 @@ export interface NavMenuContext {
 	handleItemKey: (e: KeyboardEvent) => void;
 
 	/** Called from each NavMenuLink or NavMenuButton to register itself with this NavMenu */
-	registerItem: (setFocused: () => void) => { index: number };
-}
-
-export interface NavMenuPopoutContext {
-	state: {
-		visible: boolean;
-	};
-	anchorElement?: HTMLElement;
-	focusFirstElement?: () => void;
+	registerItem: (item: ItemState) => { index: number };
 }
 
 export interface NavMenuGroupContext {
@@ -27,6 +20,4 @@ export interface NavMenuGroupContext {
 	};
 }
 
-export interface ItemState {
-	setFocused: () => void;
-}
+export type ItemState = SubmenuItemState;

package/dist/NavMenu/index.d.ts

@@ -5,13 +5,13 @@ interface NavMenuProps {
 	/** 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";
 }
 
 /**
@@ -44,11 +44,15 @@ interface NavMenuButtonProps {
 	/** 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;
+	/** Raised when a key is pressed down */
+	onkeydown?: (e: KeyboardEvent) => void;
 }
 
 /**
@@ -69,13 +73,13 @@ interface NavMenuElementProps {
 	/** 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;
 }
 
 /**
@@ -96,11 +100,11 @@ interface NavMenuGroupProps {
 	/** 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;
 }
 
 /**
@@ -120,11 +124,9 @@ interface NavMenuGroupHeaderProps {
 	/** An ID for the root element */
 	id?: string;
 	/** Classes for the root element */
-	class?: ClassValue,
+	class?: ClassValue;
 	/** Styles for the root element */
-	style?: StyleValue,
-	/** The type of HTML header to use */
-	as?: "h1" | "h2" | "h3" | "h4" | "h5" | "h6",
+	style?: StyleValue;
 }
 
 /**
@@ -144,15 +146,15 @@ interface NavMenuLinkProps {
 	/** 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 URL for the menu link */
-	href: string,
+	href: string;
 	/** Whether the menu link should open in a new tab/window */
-	newWindow?: boolean,
+	newWindow?: boolean;
 	/** Whether this link is disabled */
-	disabled?: boolean,
+	disabled?: boolean;
 }
 
 /**
@@ -173,27 +175,25 @@ interface NavMenuPopoutProps {
 	/** 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 nav menu button and can be used to show a submenu.
  *
  * The structure of a NavMenuPopout is:
  *
  * ```
  * <NavMenuPopout>
- * 	<NavMenuPopoutButton />
+ * 	<NavMenuPopoutTrigger />
  * 	<NavMenuPopoutContent />
  * </NavMenuPopout>
  * ```
@@ -208,54 +208,54 @@ declare function NavMenuPopout(
 
 
 
-interface NavMenuPopoutButtonProps {
+interface NavMenuPopoutContentProps {
 	/** An ID for the root element */
 	id?: string;
 	/** Classes for the root element */
-	class?: ClassValue,
+	class?: ClassValue;
 	/** Styles for the root element */
-	style?: StyleValue,
-	/** The delay before showing the popout, in milliseconds */
-	hoverDelay?: number,
-	/** Whether this button is disabled */
-	disabled?: boolean,
+	style?: StyleValue;
+	/** 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";
 }
 
 /**
- * A button that is placed in a NavMenu and signals a response by a user.
+ * The content that is displayed for a NavMenuPopout when it is open.
  *
  */
-declare function NavMenuPopoutButton(
+declare function NavMenuPopoutContent(
 	$parent: ParentNode,
 	$anchor: Node | null,
-	$props: NavMenuPopoutButtonProps | undefined,
+	$props: NavMenuPopoutContentProps | undefined,
 	$context?: Record<PropertyKey, any>,
 	$slots?: Record<string, SlotRender>,
 ): void;
 
 
 
-interface NavMenuPopoutContentProps {
+interface NavMenuPopoutTriggerProps {
 	/** An ID for the root element */
 	id?: string;
 	/** Classes for the root element */
-	class?: ClassValue,
+	class?: ClassValue;
 	/** Styles for the root element */
-	style?: StyleValue,
-	/** 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",
+	style?: StyleValue;
+	/** The delay before showing the popout, in milliseconds */
+	hoverDelay?: number;
+	/** Whether this button is disabled */
+	disabled?: boolean;
 }
 
 /**
- * The content that is displayed for a NavMenuPopout when it is open.
+ * A button that is placed in a NavMenu and signals a response by a user.
  *
  */
-declare function NavMenuPopoutContent(
+declare function NavMenuPopoutTrigger(
 	$parent: ParentNode,
 	$anchor: Node | null,
-	$props: NavMenuPopoutContentProps | undefined,
+	$props: NavMenuPopoutTriggerProps | undefined,
 	$context?: Record<PropertyKey, any>,
 	$slots?: Record<string, SlotRender>,
 ): void;
@@ -266,9 +266,9 @@ interface NavMenuSeparatorProps {
 	/** 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;
 }
 
 /**
@@ -282,4 +282,4 @@ declare function NavMenuSeparator(
 	$slots?: Record<string, SlotRender>,
 ): void;
 
-export { NavMenu, NavMenuButton, NavMenuElement, NavMenuGroup, NavMenuGroupHeader, NavMenuLink, NavMenuPopout, NavMenuPopoutButton, NavMenuPopoutContent, NavMenuSeparator };
+export { NavMenu, NavMenuButton, NavMenuElement, NavMenuGroup, NavMenuGroupHeader, NavMenuLink, NavMenuPopout, NavMenuPopoutContent, NavMenuPopoutTrigger, NavMenuSeparator };