@torpor/ui 0.2.1 → 0.3.0

package/src/NavMenu/NavMenu.torp

@@ -33,9 +33,8 @@ interface NavMenuProps {
  * </NavMenu>
  * ```
  */
-export default function NavMenu($props: NavMenuProps) {
-	$props ??= $watch({});
-	$props.orientation ||= "horizontal";
+export default function NavMenu($props: NavMenuProps | undefined) {
+	let orientation = $props?.orientation ?? "horizontal";
 
 	// A collection containing the state and some functions for each item
 	let itemStates: ItemState[] = [];
@@ -60,7 +59,7 @@ export default function NavMenu($props: NavMenuProps) {
 	$context[NavMenuContextName] = context;
 
 	// If the NavMenu is not in a popout, focus its first item. Otherwise the popout will call focusFirstElement, below
-	function handleFocus(e: FocusEvent & { currentTarget: EventTarget & HTMLElement }) {
+	function handleFocus() {
 		if (!popoutContext && itemStates.length) {
 			itemStates[0].setFocused();
 		}
@@ -173,12 +172,12 @@ export default function NavMenu($props: NavMenuProps) {
 
 	@render {
 		<nav
-			{$props.id}
-			class={`torp-nav-menu ${$props.class ?? ""}`.trim()}
+			{$props?.id}
+			class={`torp-nav-menu ${$props?.class ?? ""}`.trim()}
 			tabindex="0"
 			role="menubar"
-			aria-label={$props.ariaLabel}
-			aria-orientation={$props.orientation}
+			aria-label={$props?.ariaLabel}
+			aria-orientation={orientation}
 			onfocus={handleFocus}
 		>
 			<slot />

package/src/NavMenu/NavMenuButton.torp

@@ -13,9 +13,7 @@ interface NavMenuButtonProps {
  * A button that is placed in a NavMenu to carry out a non-navigation action such as logging out.
  *
  */
-export default function NavMenuButton($props: NavMenuButtonProps) {
-	$props ??= $watch({});
-
+export default function NavMenuButton($props: NavMenuButtonProps | undefined) {
 	let button: HTMLButtonElement;
 
 	// Get stuff out of the NavMenuContext
@@ -34,13 +32,13 @@ export default function NavMenuButton($props: NavMenuButtonProps) {
 
 	@render {
 		<button
-			{$props.id}
-			class={`torp-nav-menu-button ${$props.class ?? ""}`.trim()}
+			{$props?.id}
+			class={`torp-nav-menu-button ${$props?.class ?? ""}`.trim()}
 			type="button"
-			{$props.disabled}
+			{$props?.disabled}
 			role="menuitem"
-			aria-disabled={$props.disabled ? "true" : undefined}
-			data-disabled={$props.disabled ? "true" : undefined}
+			aria-disabled={$props?.disabled ? "true" : undefined}
+			data-disabled={$props?.disabled ? "true" : undefined}
 			onkeydown
 			onkeydown={handleItemKey}
 			onclick

package/src/NavMenu/NavMenuElement.torp

@@ -15,9 +15,7 @@ interface NavMenuElementProps {
  * An element of any type that can be placed in a NavMenu.
  *
  */
-export default function NavMenuElement($props: NavMenuElementProps) {
-	$props ??= $watch({});
-
+export default function NavMenuElement($props: NavMenuElementProps | undefined) {
 	// Get stuff out of the NavMenuContext
 	const menuContext = $context[NavMenuContextName] as NavMenuContext;
 	if (!menuContext) {
@@ -29,17 +27,19 @@ export default function NavMenuElement($props: NavMenuElementProps) {
 	const { index } = registerItem(setFocused);
 
 	function setFocused() {
-		element.focus();
+		if ($props?.element) {
+			$props.element.focus();
+		}
 	}
 
 	@render {
 		<div
-			{$props.id}
-			class={`torp-nav-menu-div ${$props.class ?? ""}`.trim()}
+			{$props?.id}
+			class={`torp-nav-menu-div ${$props?.class ?? ""}`.trim()}
 			type="div"
 			role="menuitem"
-			aria-disabled={$props.disabled ? "true" : undefined}
-			data-disabled={$props.disabled ? "true" : undefined}
+			aria-disabled={$props?.disabled ? "true" : undefined}
+			data-disabled={$props?.disabled ? "true" : undefined}
 			onkeydown
 			onkeydown={handleItemKey}
 			onclick

package/src/NavMenu/NavMenuGroup.torp

@@ -12,9 +12,7 @@ interface NavMenuGroupProps {
 /**
  * A container for a logical group of navigation menu items.
  */
-export default function NavMenuGroup($props: NavMenuGroupProps) {
-	$props ??= $watch({});
-
+export default function NavMenuGroup($props: NavMenuGroupProps | undefined) {
 	let $state = $watch({
 		headerId: ""
 	});
@@ -27,10 +25,10 @@ export default function NavMenuGroup($props: NavMenuGroupProps) {
 
 	@render {
 		<div
-			{$props.id}
-			class={`torp-nav-menu-group ${$props.class ?? ""}`.trim()}
+			{$props?.id}
+			class={`torp-nav-menu-group ${$props?.class ?? ""}`.trim()}
 			role="group"
-			aria-label={$props.ariaLabel}
+			aria-label={$props?.ariaLabel}
 			aria-labelledby={$state.headerId}
 		>
 			<slot />

package/src/NavMenu/NavMenuGroupHeader.torp

@@ -13,9 +13,8 @@ interface NavMenuGroupHeaderProps {
 /**
  * The header for a NavMenuGroup.
  */
-export default function NavMenuGroupHeader($props: NavMenuGroupHeaderProps) {
-	$props ??= $watch({});
-	$props.id ??= getId();
+export default function NavMenuGroupHeader($props: NavMenuGroupHeaderProps | undefined) {
+	let defaultId = getId();
 
 	const context = $context[NavMenuGroupContextName] as NavMenuGroupContext;
 	if (!context) {
@@ -24,13 +23,13 @@ export default function NavMenuGroupHeader($props: NavMenuGroupHeaderProps) {
 	let $state = context.state;
 
 	// Set the header ID now that we know what it is
-	$state.headerId = $props.id;
+	$state.headerId = $props?.id ?? defaultId;
 
 	@render {
 		@// TODO: self={$props.as}
 		<h4
-			{$props.id}
-			class={`torp-nav-menu-group-header ${$props.class ?? ""}`.trim()}
+			id={$props?.id ?? defaultId}
+			class={`torp-nav-menu-group-header ${$props?.class ?? ""}`.trim()}
 		>
 			<slot />
 		</h4>

package/src/NavMenu/NavMenuLink.torp

@@ -18,10 +18,7 @@ interface NavMenuLinkProps {
  * A link that is placed in a NavMenu and signals a response by a user.
  *
  */
-export default function NavMenuLink($props: NavMenuLinkProps) {
-	$props ??= $watch({ href: "#" });
-	$props.newWindow ??= false;
-
+export default function NavMenuLink($props: NavMenuLinkProps | undefined) {
 	let link: HTMLAnchorElement;
 
 	// Get stuff out of the NavMenuContext
@@ -40,14 +37,14 @@ export default function NavMenuLink($props: NavMenuLinkProps) {
 
 	@render {
 		<a
-			{$props.id}
-			class={`torp-nav-menu-link ${$props.class ?? ""}`.trim()}
-			href={$props.href}
-			{$props.disabled}
-			target={$props.newWindow ? "_blank" : undefined}
+			{$props?.id}
+			class={`torp-nav-menu-link ${$props?.class ?? ""}`.trim()}
+			{$props?.href}
+			{$props?.disabled}
+			target={$props?.newWindow ? "_blank" : undefined}
 			role="menuitem"
-			aria-disabled={$props.disabled ? "true" : undefined}
-			data-disabled={$props.disabled ? "true" : undefined}
+			aria-disabled={$props?.disabled ? "true" : undefined}
+			data-disabled={$props?.disabled ? "true" : undefined}
 			onkeydown
 			onkeydown={handleItemKey}
 			onclick

package/src/NavMenu/NavMenuPopout.torp

@@ -7,6 +7,12 @@ interface NavMenuPopoutProps {
 	class?: string,
 	/** 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,
 }
 
 /**
@@ -16,17 +22,24 @@ interface NavMenuPopoutProps {
  *
  * ```
  * <NavMenuPopout>
- *     <NavMenuPopoutButton />
+ * 	<NavMenuPopoutButton />
  * 	<NavMenuPopoutContent />
  * </NavMenuPopout>
  * ```
  */
-export default function NavMenuPopout($props: NavMenuPopoutProps) {
-	$props ??= $watch({});
-	$props.visible ??= false;
-
+export default function NavMenuPopout($props: NavMenuPopoutProps | undefined) {
 	let $state = $watch({
-		visible: $props.visible
+		visible: false
+	});
+
+	// Sync props and state
+	$run(() => {
+		$state.visible = $props?.visible ?? false;
+	});
+	$run(() => {
+		if ($props !== undefined) {
+			$props.visible = $state.visible;
+		}
 	});
 
 	let result: any;
@@ -37,18 +50,13 @@ export default function NavMenuPopout($props: NavMenuPopoutProps) {
 	};
 	$context[NavMenuPopoutContextName] = context;
 
-	// Copy props into state whenever they change
-	$run(() => {
-		$state.visible = $props.visible ?? false;
-	});
-
 	// 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 = $props.visible;
+		const ontoggle = $props?.ontoggle;
+		const onopen = $props?.onopen;
+		const onclose = $props?.onclose;
+		const visible = $state.visible;
 		if (firstToggle) {
 			firstToggle = false;
 		} else {
@@ -67,8 +75,8 @@ export default function NavMenuPopout($props: NavMenuPopoutProps) {
 
 	@render {
 		<div
-			{$props.id}
-			class={`torp-nav-menu-popout ${$props.class ?? ""}`.trim()}
+			{$props?.id}
+			class={`torp-nav-menu-popout ${$props?.class ?? ""}`.trim()}
 			onmouseleave={handleMouseLeave}
 		>
 			<slot />

package/src/NavMenu/NavMenuPopoutButton.torp

@@ -20,9 +20,8 @@ interface NavMenuPopoutButtonProps {
  * A button that is placed in a NavMenu and signals a response by a user.
  *
  */
-export default function NavMenuPopoutButton($props: NavMenuPopoutButtonProps) {
-	$props ??= $watch({});
-	$props.hoverDelay ??= 500;
+export default function NavMenuPopoutButton($props: NavMenuPopoutButtonProps | undefined) {
+	let defaultHoverDelay = 500;
 
 	let button: HTMLButtonElement;
 	let interval: NodeJS.Timeout | undefined;
@@ -72,16 +71,16 @@ export default function NavMenuPopoutButton($props: NavMenuPopoutButtonProps) {
 	}
 
 	function handleMouseEnter() {
-		if ($props.disabled) return;
+		if ($props?.disabled) return;
 
 		// Handle the hover after a delay
 		if (!interval) {
-			interval = setTimeout(() => $state.visible = true, $props.hoverDelay);
+			interval = setTimeout(() => $state.visible = true, $props?.hoverDelay ?? defaultHoverDelay);
 		}
 	}
 
 	function handleMouseLeave() {
-		if ($props.disabled) return;
+		if ($props?.disabled) return;
 
 		// Prevent short hovers or touches from firing the event
 		if (interval) {
@@ -91,26 +90,26 @@ export default function NavMenuPopoutButton($props: NavMenuPopoutButtonProps) {
 	}
 
 	function handleMouseMove() {
-		if ($props.disabled) return;
+		if ($props?.disabled) return;
 
 		// Reset the interval on mouse move
 		if (interval) {
 			clearTimeout(interval);
-			interval = setTimeout(() => $state.visible = true, $props.hoverDelay);
+			interval = setTimeout(() => $state.visible = true, $props?.hoverDelay ?? defaultHoverDelay);
 		}
 	}
 
 	@render {
 		<button
-			{$props.id}
-			class={`torp-nav-menu-popout-button ${$props.class ?? ""}`.trim()}
+			{$props?.id}
+			class={`torp-nav-menu-popout-button ${$props?.class ?? ""}`.trim()}
 			type="button"
-			{$props.disabled}
+			{$props?.disabled}
 			role="menuitem"
 			aria-haspopup="true"
 			aria-expanded={$state.visible.toString()}
-			aria-disabled={$props.disabled ? "true" : undefined}
-			data-disabled={$state.disabled ? "true" : undefined}
+			aria-disabled={$props?.disabled ? "true" : undefined}
+			data-disabled={$props?.disabled ? "true" : undefined}
 			onkeydown={handlePopoutKey}
 			onclick={handleClick}
 			onfocus={() => handleItemFocus(index)}

package/src/NavMenu/NavMenuPopoutContent.torp

@@ -18,11 +18,7 @@ interface NavMenuPopoutContentProps {
  * The content that is displayed for a NavMenuPopout when it is open.
  *
  */
-export default function NavMenuPopoutContent($props: NavMenuPopoutContentProps) {
-	$props ??= $watch({});
-	$props.side ??= "bottom";
-	$props.alignment ??= "start";
-
+export default function NavMenuPopoutContent($props: NavMenuPopoutContentProps | undefined) {
 	let div: HTMLDivElement;
 	let shown = false;
 
@@ -44,7 +40,8 @@ export default function NavMenuPopoutContent($props: NavMenuPopoutContentProps)
 
 		// Set the position and listen for window resize and scroll to reset the position
 		setPosition();
-		const scrollParent = getScrollParent(context.anchorElement)
+		const anchorElement = context.anchorElement!
+		const scrollParent = getScrollParent(anchorElement)
 		scrollParent.addEventListener("resize", setPosition);
 		scrollParent.addEventListener("scroll", setPosition);
 		if (context.focusFirstElement) {
@@ -56,11 +53,12 @@ export default function NavMenuPopoutContent($props: NavMenuPopoutContentProps)
 		if (!shown) return;
 
 		// Stop listening for window resize and focus the anchor element per WAI guidelines
-		const scrollParent = getScrollParent(context.anchorElement)
+		const anchorElement = context.anchorElement!
+		const scrollParent = getScrollParent(anchorElement)
 		scrollParent.removeEventListener("resize", setPosition);
 		scrollParent.removeEventListener("scroll", setPosition);
-		if (context.anchorElement?.focus) {
-			context.anchorElement.focus();
+		if (anchorElement.focus) {
+			anchorElement.focus();
 		}
 	}
 
@@ -70,15 +68,17 @@ export default function NavMenuPopoutContent($props: NavMenuPopoutContentProps)
 		}
 
 		if (div) {
-			setPopoverPosition(context.anchorElement, div, $props.side, $props.alignment);
+			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 ?? ""}`.trim()}
+				{$props?.id}
+				class={`torp-nav-menu-popout-content ${$props?.class ?? ""}`.trim()}
 				&ref={div}
 				onmount={show}
 			>

package/src/NavMenu/NavMenuSeparator.torp

@@ -9,13 +9,11 @@ interface NavMenuSeparatorProps {
 /**
  * An element in a menu that separates logical sets of menu items.
  */
-export default function NavMenuSeparator($props: NavMenuSeparatorProps) {
-	$props ??= $watch({});
-
+export default function NavMenuSeparator($props: NavMenuSeparatorProps | undefined) {
 	@render {
 		<div
-			{$props.id}
-			class={`torp-nav-menu-separator ${$props.class ?? ""}`.trim()} role="separator"
+			{$props?.id}
+			class={`torp-nav-menu-separator ${$props?.class ?? ""}`.trim()} role="separator"
 		>
 			<slot />
 		</div>

package/src/Notification/Notification.torp

@@ -19,10 +19,21 @@ interface NotificationProps {
  *
  * See [the WAI ARIA guidelines for Alerts](https://www.w3.org/WAI/ARIA/apg/patterns/alert/).
  */
-export default function Notification($props: NotificationProps) {
-	$props ??= $watch({});
-	$props.visible ??= true;
-	$props.duration ??= 5000;
+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 = {
@@ -31,24 +42,22 @@ export default function Notification($props: NotificationProps) {
 	$context[NotificationContextName] = context;
 
 	$mount(() => {
-		if ($props.duration) {
-			setTimeout(closeNotification, $props.duration);
-		}
+		setTimeout(closeNotification, $props?.duration ?? defaultDuration);
 	});
 
 	function closeNotification() {
-		$props.visible = false;
+		$state.visible = false;
 
-		if ($props.onclose) {
-			$props.onclose();
+		if ($props?.onclose) {
+			$props?.onclose();
 		}
 	}
 
 	@render {
-		@if ($props.visible) {
+		@if ($state.visible) {
 			<div 
-				{$props.id}
-				class={`torp-notification ${$props.class ?? ""}`.trim()}
+				{$props?.id}
+				class={`torp-notification ${$props?.class ?? ""}`.trim()}
 				role="alert"
 			>
 				<slot />

package/src/Notification/NotificationClose.torp

@@ -10,9 +10,7 @@ interface NotificationCloseProps {
 /**
  * The button that a user can press to close this Notification.
  */
-export default function NotificationClose($props: NotificationCloseProps) {
-	$props ??= $watch({});
-
+export default function NotificationClose($props: NotificationCloseProps | undefined) {
 	// Get stuff out of the NotificationContext
 	const context = $context[NotificationContextName] as NotificationContext;
 	if (!context) {
@@ -26,8 +24,8 @@ export default function NotificationClose($props: NotificationCloseProps) {
 
 	@render {
 		<button
-			{$props.id}
-			class={`torp-notification-close ${$props.class ?? ""}`.trim()}
+			{$props?.id}
+			class={`torp-notification-close ${$props?.class ?? ""}`.trim()}
 			type="button"
 			onclick={handleClick}
 		>

package/src/Notification/NotificationContainer.torp

@@ -10,13 +10,11 @@ interface NotificationContainerProps {
  * The container for one or more Notifications, which can be used to position
  * the notifications inside the viewport.
  */
-export default function NotificationContainer($props: NotificationContainerProps) {
-	$props ??= $watch({});
-
+export default function NotificationContainer($props: NotificationContainerProps | undefined) {
 	@render {
 		<div
-			{$props.id}
-			class={`torp-notification-container ${$props.class ?? ""}`.trim()}
+			{$props?.id}
+			class={`torp-notification-container ${$props?.class ?? ""}`.trim()}
 		>
 			<slot />
 		</div>

package/src/Notification/NotificationContent.torp

@@ -9,13 +9,11 @@ interface NotificationContentProps {
 /**
  * The content to display within a Notification.
  */
-export default function NotificationContent($props: NotificationContentProps) {
-	$props ??= $watch({});
-
+export default function NotificationContent($props: NotificationContentProps | undefined) {
 	@render {
 		<div 
-			{$props.id}
-			class={`torp-notification-content ${$props.class ?? ""}`.trim()}
+			{$props?.id}
+			class={`torp-notification-content ${$props?.class ?? ""}`.trim()}
 		>
 			<slot />
 		</div>

package/src/Popover/Popover.torp

@@ -15,31 +15,43 @@ interface PopoverProps {
 	position?: Point,
 	/** A function to be called when the user selects a response */
 	callback?: ((value: any) => void),
+	/** Raised when the popover is opened or closed */
+	ontoggle?: (open: boolean) => void,
+	/** Raised when the popover has opened */
+	onopen?: () => void,
+	/** Raised when the popover has closed */
+	onclose?: (result: any) => void,
 }
 
 /**
- * A popover that can be used to show rich content or obtain information from a user.
- *
- * See [the WAI ARIA guidelines for Dialogs](https://www.w3.org/WAI/ARIA/apg/patterns/dialogmodal/).
+ * A popover window that is shown to the user relative to an anchor element.
  *
  * The structure of a Popover is:
  *
  * ```
  * <Popover>
- * 	<PopoverOverlay /> (optional, if modal)
- * 	<PopoverTrigger/PopoverTriggerContextual/PopoverTriggerHover /> (optional)
- * 	<PopoverContent/PopoverContentAnchored/PopoverContentContextual />
+ * 	<PopoverTrigger /> (optional)
+ * 	<PopoverContent />
  * </Popover>
  * ```
  */
-export default function Popover($props: PopoverProps) {
-	$props ??= $watch({});
-
+export default function Popover($props: PopoverProps | undefined) {
 	let $state: PopoverState = $watch({
 		visible: false,
 		position: { x: 0, y: 0 }
 	})
 
+	// Sync props and state
+	$run(() => {
+		$state.visible = $props?.visible ?? false;
+		$state.position = $props?.position ?? { x: 0, y: 0 };
+	});
+	$run(() => {
+		if ($props !== undefined) {
+			$props.visible = $state.visible;
+		}
+	});
+
 	let result: any;
 
 	// Set the context to pass down to items
@@ -47,23 +59,17 @@ export default function Popover($props: PopoverProps) {
 		handleButton,
 		handleClickOutside,
 		state: $state,
-		modal: $props.modal,
-		anchorElement: $unwrap($props.anchor),
+		modal: $props?.modal,
+		anchorElement: $props?.anchor ? $unwrap($props.anchor) : undefined,
 	};
 	$context[PopoverContextName] = context;
 
-	// Copy props into state whenever they change
-	$run(() => {
-		$state.visible = $props.visible ?? false;
-		$state.position = $props.position ?? { x: 0, y: 0 };
-	})
-
-	// Dispatch the toggle event when the popout is opened or closed
+	// Dispatch the toggle event when the popover is opened or closed
 	let firstToggle = true;
 	$run(() => {
-		const ontoggle = $props.ontoggle;
-		const onopen = $props.onopen;
-		const onclose = $props.onclose;
+		const ontoggle = $props?.ontoggle;
+		const onopen = $props?.onopen;
+		const onclose = $props?.onclose;
 		const visible = $state.visible;
 		if (firstToggle) {
 			firstToggle = false;
@@ -98,8 +104,8 @@ export default function Popover($props: PopoverProps) {
 		$state.visible = false;
 
 		// Call the callback
-		if ($props.callback) {
-			$props.callback(result);
+		if ($props?.callback) {
+			$props?.callback(result);
 		}
 	}
 
@@ -110,8 +116,8 @@ export default function Popover($props: PopoverProps) {
 
 	@render {
 		<div
-			{$props.id}
-			class={`torp-popover ${$props.class ?? ""}`.trim()}
+			{$props?.id}
+			class={`torp-popover ${$props?.class ?? ""}`.trim()}
 		>
 			<slot />
 		</div>