@torpor/ui 0.3.4 → 0.3.6

package/src/NavMenu/NavMenuGroup.torp

@@ -1,41 +0,0 @@
-import type { ClassValue, StyleValue } from "@torpor/view";
-import { NavMenuGroupContextName, type NavMenuGroupContext } from "./NavMenuTypes";
-
-interface NavMenuGroupProps {
-	/** An ID for the root element */
-	id?: string;
-	/** Classes for the root element */
-	class?: ClassValue,
-	/** Styles for the root element */
-	style?: StyleValue,
-	/** An ARIA label for describing the group to screen readers  */
-	ariaLabel?: string,
-}
-
-/**
- * A container for a logical group of navigation menu items.
- */
-export default function NavMenuGroup($props: NavMenuGroupProps | undefined) {
-	let $state = $watch({
-		headerId: ""
-	});
-
-	// Set the context to pass down to items
-	let context: NavMenuGroupContext = {
-		state: $state,
-	};
-	$context[NavMenuGroupContextName] = context;
-
-	@render {
-		<div
-			{$props?.id}
-			class={["torp-nav-menu-group", $props?.class]}
-			{$props?.style}
-			role="group"
-			aria-label={$props?.ariaLabel}
-			aria-labelledby={$state.headerId}
-		>
-			<slot />
-		</div>
-	}
-}

package/src/NavMenu/NavMenuGroupHeader.torp

@@ -1,41 +0,0 @@
-import type { ClassValue, StyleValue } from "@torpor/view";
-import getId from "../utils/getId";
-import { NavMenuGroupContextName, type NavMenuGroupContext } from "./NavMenuTypes";
-
-interface NavMenuGroupHeaderProps {
-	/** An ID for the root element */
-	id?: string;
-	/** Classes for the root element */
-	class?: ClassValue,
-	/** Styles for the root element */
-	style?: StyleValue,
-	/** The type of HTML header to use */
-	as?: "h1" | "h2" | "h3" | "h4" | "h5" | "h6",
-}
-
-/**
- * The header for a NavMenuGroup.
- */
-export default function NavMenuGroupHeader($props: NavMenuGroupHeaderProps | undefined) {
-	let defaultId = getId();
-
-	const context = $context[NavMenuGroupContextName] as NavMenuGroupContext;
-	if (!context) {
-		throw new Error("NavMenuGroupHeader must be contained within a NavMenuGroup");
-	}
-	let $state = context.state;
-
-	// Set the header ID now that we know what it is
-	$state.headerId = $props?.id ?? defaultId;
-
-	@render {
-		@// TODO: self={$props.as}
-		<h4
-			id={$props?.id ?? defaultId}
-			class={["torp-nav-menu-group-header", $props?.class]}
-			{$props?.style}
-		>
-			<slot />
-		</h4>
-	}
-}

package/src/NavMenu/NavMenuLink.torp

@@ -1,60 +0,0 @@
-import type { ClassValue, StyleValue } from "@torpor/view";
-import { NavMenuContextName, type NavMenuContext } from "./NavMenuTypes";
-
-interface NavMenuLinkProps {
-	/** An ID for the root element */
-	id?: string;
-	/** Classes for the root element */
-	class?: ClassValue,
-	/** Styles for the root element */
-	style?: StyleValue,
-	/** 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.
- *
- */
-export default function NavMenuLink($props: NavMenuLinkProps | undefined) {
-	let link: HTMLAnchorElement;
-
-	// Get stuff out of the NavMenuContext
-	const menuContext = $context[NavMenuContextName] as NavMenuContext;
-	if (!menuContext) {
-		throw new Error("NavMenuLink must be contained within a NavMenu");
-	}
-	const { registerItem, handleItemKey, handleItemFocus } = menuContext;
-
-	// Register this item with the parent NavMenu and store the index
-	const { index } = registerItem(setFocused);
-
-	function setFocused() {
-		link.focus();
-	}
-
-	@render {
-		<a
-			{$props?.id}
-			class={["torp-nav-menu-link", $props?.class]}
-			{$props?.style}
-			{$props?.href}
-			{$props?.disabled}
-			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}
-		>
-			<slot />
-		</a>
-	}
-}

package/src/NavMenu/NavMenuPopout.torp

@@ -1,89 +0,0 @@
-import type { ClassValue, StyleValue } from "@torpor/view";
-import { NavMenuPopoutContextName, type NavMenuPopoutContext } from "./NavMenuTypes";
-
-interface NavMenuPopoutProps {
-	/** An ID for the root element */
-	id?: string;
-	/** Classes for the root element */
-	class?: ClassValue,
-	/** Styles for the root element */
-	style?: StyleValue,
-	/** Whether the popout is visible */
-	visible?: boolean,
-	/** Raised when the popout is opened or closed */
-	ontoggle?: (open: boolean) => void,
-	/** Raised when the popout has opened */
-	onopen?: () => void,
-	/** Raised when the popout has closed */
-	onclose?: (result: any) => void,
-}
-
-/**
- * A popout that is attached to a menu button and can be used to show a submenu.
- *
- * The structure of a NavMenuPopout is:
- *
- * ```
- * <NavMenuPopout>
- * 	<NavMenuPopoutButton />
- * 	<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}
-			class={["torp-nav-menu-popout", $props?.class]}
-			{$props?.style}
-			onmouseleave={handleMouseLeave}
-		>
-			<slot />
-		</div>
-	}
-}

package/src/NavMenu/NavMenuPopoutButton.torp

@@ -1,129 +0,0 @@
-import type { ClassValue, StyleValue } from "@torpor/view";
-import {
-	NavMenuContextName,
-	NavMenuPopoutContextName,
-	type NavMenuContext,
-	type NavMenuPopoutContext,
-} from "./NavMenuTypes";
-
-interface NavMenuPopoutButtonProps {
-	/** 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 NavMenuPopoutButton($props: NavMenuPopoutButtonProps | undefined) {
-	let defaultHoverDelay = 500;
-
-	let button: HTMLButtonElement;
-	let interval: NodeJS.Timeout | undefined;
-
-	// Get stuff out of the NavMenuContext
-	const menuContext = $context[NavMenuContextName] as NavMenuContext;
-	if (!menuContext) {
-		throw new Error("NavMenuPopoutButton must be contained within a NavMenu");
-	}
-	const { registerItem, handleItemKey, handleItemFocus } = menuContext;
-
-	// Get stuff out of the NavMenuPopoutContext
-	const popoutContext = $context[NavMenuPopoutContextName] as NavMenuPopoutContext;
-	if (!popoutContext) {
-		throw new Error("NavMenuPopoutButton must be contained within a NavMenuPopout");
-	}
-	let $state = popoutContext.state;
-
-	// Register this item with the parent NavMenu and store the index
-	const { index } = registerItem(setFocused);
-
-	// TODO: $mount should be run AFTER the button has been set
-	//$mount(() => {
-	//	// Set the anchor element to the button when it exists
-	//	popoutContext.anchorElement = button;
-	//});
-
-	function setFocused() {
-		button.focus();
-	}
-
-	function handleClick() {
-		$state.visible = 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();
-				$state.visible = true;
-				break;
-			default:
-				handleItemKey(e);
-		}
-	}
-
-	function handleMouseEnter() {
-		if ($props?.disabled) return;
-
-		// Handle the hover after a delay
-		if (!interval) {
-			interval = setTimeout(() => $state.visible = 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(() => $state.visible = true, $props?.hoverDelay ?? defaultHoverDelay);
-		}
-	}
-
-	@render {
-		<button
-			{$props?.id}
-			class={["torp-nav-menu-popout-button", $props?.class]}
-			{$props?.style}
-			type="button"
-			{$props?.disabled}
-			role="menuitem"
-			aria-haspopup="true"
-			aria-expanded={$state.visible.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 }
-		>
-			<slot />
-		</button>
-	}
-}

package/src/NavMenu/NavMenuPopoutContent.torp

@@ -1,92 +0,0 @@
-import type { ClassValue, StyleValue } from "@torpor/view";
-import getScrollParent from "../utils/getScrollParent";
-import setPopoverPosition from "../utils/setPopoverPosition";
-import { NavMenuPopoutContextName, type NavMenuPopoutContext } from "./NavMenuTypes";
-
-interface NavMenuPopoutContentProps {
-	/** An ID for the root element */
-	id?: string;
-	/** Classes for the root element */
-	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",
-}
-
-/**
- * The content that is displayed for a NavMenuPopout when it is open.
- *
- */
-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>
-		}
-	}
-}

package/src/NavMenu/NavMenuSeparator.torp

@@ -1,24 +0,0 @@
-import type { ClassValue, StyleValue } from "@torpor/view";
-
-interface NavMenuSeparatorProps {
-	/** An ID for the root element */
-	id?: string;
-	/** Classes for the root element */
-	class?: ClassValue,
-	/** Styles for the root element */
-	style?: StyleValue,
-}
-
-/**
- * An element in a menu that separates logical sets of menu items.
- */
-export default function NavMenuSeparator($props: NavMenuSeparatorProps | undefined) {
-	@render {
-		<div
-			{$props?.id}
-			class={`torp-nav-menu-separator ${$props?.class ?? ""}`.trim()} role="separator"
-		>
-			<slot />
-		</div>
-	}
-}

package/src/NavMenu/NavMenuTypes.ts

@@ -1,32 +0,0 @@
-export const NavMenuContextName = "NavMenu";
-export const NavMenuPopoutContextName = "NavMenuPopout";
-export const NavMenuGroupContextName = "NavMenuGroup";
-
-export interface NavMenuContext {
-	/** Called from a NavMenuLink or NavMenuButton when its button is focused */
-	handleItemFocus: (index: number) => void;
-
-	/** Called from a NavMenuLink or NavMenuButton when a key is pressed */
-	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;
-}
-
-export interface NavMenuGroupContext {
-	state: {
-		headerId: string;
-	};
-}
-
-export interface ItemState {
-	setFocused: () => void;
-}

package/src/NavMenu/index.ts

@@ -1,23 +0,0 @@
-import NavMenu from "./NavMenu.torp";
-import NavMenuButton from "./NavMenuButton.torp";
-import NavMenuElement from "./NavMenuElement.torp";
-import NavMenuGroup from "./NavMenuGroup.torp";
-import NavMenuGroupHeader from "./NavMenuGroupHeader.torp";
-import NavMenuLink from "./NavMenuLink.torp";
-import NavMenuPopout from "./NavMenuPopout.torp";
-import NavMenuPopoutButton from "./NavMenuPopoutButton.torp";
-import NavMenuPopoutContent from "./NavMenuPopoutContent.torp";
-import NavMenuSeparator from "./NavMenuSeparator.torp";
-
-export {
-	NavMenu,
-	NavMenuLink,
-	NavMenuButton,
-	NavMenuElement,
-	NavMenuPopout,
-	NavMenuPopoutButton,
-	NavMenuPopoutContent,
-	NavMenuGroup,
-	NavMenuGroupHeader,
-	NavMenuSeparator,
-};

package/src/Notification/Notification.torp

@@ -1,71 +0,0 @@
-import type { ClassValue, StyleValue } from "@torpor/view";
-import { NotificationContextName, type NotificationContext } from "./NotificationTypes";
-
-interface NotificationProps {
-	/** An ID for the root element */
-	id?: string;
-	/** Classes for the root element */
-	class?: ClassValue,
-	/** Styles for the root element */
-	style?: StyleValue,
-	/** Whether the notification is visible */
-	visible?: boolean,
-	/** The duration, in milliseconds, to keep the notification visible */
-	duration?: number,
-	/** Raised when the notification has closed, either after the duration has elapsed, or when the user has pressed the close button */
-	onclose?: () => void,
-}
-
-/**
- * An element that displays a brief, important message in a way that attracts
- * the user's attention without interrupting the user's task.
- *
- * See [the WAI ARIA guidelines for Alerts](https://www.w3.org/WAI/ARIA/apg/patterns/alert/).
- */
-export default function Notification($props: NotificationProps | undefined) {
-	let defaultDuration = 5000;
-
-	let $state = $watch({
-		visible: false
-	});
-
-	$run(() => {
-		$state.visible = $props?.visible ?? true;
-	});
-	$run(() => {
-		if ($props !== undefined) {
-			$props.visible = $state.visible;
-		}
-	});
-
-	// Set the context to pass down to items
-	let context: NotificationContext = {
-		closeNotification
-	};
-	$context[NotificationContextName] = context;
-
-	$mount(() => {
-		setTimeout(closeNotification, $props?.duration ?? defaultDuration);
-	});
-
-	function closeNotification() {
-		$state.visible = false;
-
-		if ($props?.onclose) {
-			$props?.onclose();
-		}
-	}
-
-	@render {
-		@if ($state.visible) {
-			<div 
-				{$props?.id}
-				class={["torp-notification", $props?.class]}
-				{$props?.style}
-				role="alert"
-			>
-				<slot />
-			</div>
-		}
-	}
-}

package/src/Notification/NotificationClose.torp

@@ -1,39 +0,0 @@
-import type { ClassValue, StyleValue } from "@torpor/view";
-import { NotificationContextName, type NotificationContext } from "./NotificationTypes";
-
-interface NotificationCloseProps {
-	/** An ID for the root element */
-	id?: string;
-	/** Classes for the root element */
-	class?: ClassValue,
-	/** Styles for the root element */
-	style?: StyleValue,
-}
-
-/**
- * The button that a user can press to close this Notification.
- */
-export default function NotificationClose($props: NotificationCloseProps | undefined) {
-	// Get stuff out of the NotificationContext
-	const context = $context[NotificationContextName] as NotificationContext;
-	if (!context) {
-		throw new Error("NotificationClose must be contained within a Notification");
-	}
-	const { closeNotification } = context;
-
-	function handleClick() {
-		closeNotification();
-	}
-
-	@render {
-		<button
-			{$props?.id}
-			class={["torp-notification-close", $props?.class]}
-			{$props?.style}
-			type="button"
-			onclick={handleClick}
-		>
-			<slot />
-		</button>
-	}
-}

package/src/Notification/NotificationContainer.torp

@@ -1,26 +0,0 @@
-import type { ClassValue, StyleValue } from "@torpor/view";
-
-interface NotificationContainerProps {
-	/** An ID for the root element */
-	id?: string;
-	/** Classes for the root element */
-	class?: ClassValue,
-	/** Styles for the root element */
-	style?: StyleValue,
-}
-
-/**
- * The container for one or more Notifications, which can be used to position
- * the notifications inside the viewport.
- */
-export default function NotificationContainer($props: NotificationContainerProps | undefined) {
-	@render {
-		<div
-			{$props?.id}
-			class={["torp-notification-container", $props?.class]}
-			{$props?.style}
-		>
-			<slot />
-		</div>
-	}
-}

package/src/Notification/NotificationContent.torp

@@ -1,25 +0,0 @@
-import type { ClassValue, StyleValue } from "@torpor/view";
-
-interface NotificationContentProps {
-	/** An ID for the root element */
-	id?: string;
-	/** Classes for the root element */
-	class?: ClassValue,
-	/** Styles for the root element */
-	style?: StyleValue,
-}
-
-/**
- * The content to display within a Notification.
- */
-export default function NotificationContent($props: NotificationContentProps | undefined) {
-	@render {
-		<div 
-			{$props?.id}
-			class={["torp-notification-content", $props?.class]}
-			{$props?.style}
-		>
-			<slot />
-		</div>
-	}
-}