@torpor/ui 0.2.1 → 0.3.1

package/src/Menu/Menu.torp

@@ -1,3 +1,5 @@
+import { ContextualContextName } from "../Contextual/ContextualTypes";
+import { ModalContextName } from "../Modal/ModalTypes";
 import { PopoverContextName, type PopoverContext } from "../Popover/PopoverTypes";
 import {
 	MenuContextName,
@@ -26,27 +28,26 @@ interface MenuProps {
  *
  * ```
  * <Menu>
- *     <MenuButton />
- *     <MenuSeparator /> (optional)
- *     <MenuGroup> (optional)
- *         <MenuButton />
- *     </MenuGroup>
+ * 	<MenuButton />
+ * 	<MenuSeparator /> (optional)
+ * 	<MenuGroup> (optional)
+ * 		<MenuButton />
+ * 	</MenuGroup>
  * </Menu>
  * ```
  */
-export default function Menu($props: MenuProps) {
-	$props ??= $watch({});
-
+export default function Menu($props: MenuProps | undefined) {
 	// A collection containing the state and some functions for each item
 	let itemStates: ItemState[] = [];
 	let focusIndex = -1;
 
 	// Get stuff out of the PopoverContext
-	const popoverContext = $context[PopoverContextName] as PopoverContext;
+	// HACK: share state in PopupState and extend in context/modal/popover
+	const popoverContext = $context[ContextualContextName] ?? $context[ModalContextName] ?? $context[PopoverContextName] as PopoverContext;
 	if (!popoverContext) {
-		throw new Error("Menu must be contained within a Contextual, Prompt or Popover");
+		throw new Error("Menu must be contained within a Context, Modal or Popover");
 	}
-	const { setVisible, handleButton, modal, visible } = popoverContext;
+	const { setVisible, handleButton, visible } = popoverContext;
 
 	// Check whether this is a menu in a popout
 	const popoutContext = $context[MenuPopoutContextName] as MenuPopoutContext;
@@ -77,7 +78,7 @@ export default function Menu($props: MenuProps) {
 	}
 
 	function registerItem(setFocused: () => void) {
-		// Add the item"s state to the array and return its index
+		// Add the item's state to the array and return its index
 		const newItemState: ItemState = {
 			setFocused
 		};
@@ -156,11 +157,11 @@ export default function Menu($props: MenuProps) {
 
 	@render {
 		<div
-			{$props.id}
-			class={`torp-menu ${$props.class ?? ""}`.trim()}
+			{$props?.id}
+			class={`torp-menu ${$props?.class ?? ""}`.trim()}
 			tabindex="-1"
 			role="menu"
-			aria-label={$props.ariaLabel}
+			aria-label={$props?.ariaLabel}
 			aria-orientation="vertical"
 		>
 			<slot />

package/src/Menu/MenuButton.torp

@@ -9,15 +9,17 @@ interface MenuButtonProps {
 	value?: any,
 	/** Whether this button is disabled */
 	disabled?: boolean,
+	/** Raised when the button is clicked */
+	onclick?: (e: MouseEvent) => void,
+	/** Raised when a key is pressed down */
+	onkeydown?: (e: KeyboardEvent) => void,
 }
 
 /**
  * A button that is placed in a Menu or MenuGroup and signals a response by a user.
  *
  */
-export default function MenuButton($props: MenuButtonProps) {
-	$props ??= $watch({});
-
+export default function MenuButton($props: MenuButtonProps | undefined) {
 	let button: HTMLButtonElement;
 
 	// Get stuff out of the MenuContext
@@ -30,14 +32,18 @@ export default function MenuButton($props: MenuButtonProps) {
 	// Register this item with the parent Menu and store the index
 	const { index } = registerItem(setFocused);
 
-	function handleKeyDown(e) {
+	function handleKeyDown(e: KeyboardEvent) {
 		handleItemKey(e);
-		if ($props.onkeydown) $props.onkeydown(e);
+		if ($props?.onkeydown) {
+			$props.onkeydown(e);
+		}
 	}
 
-	function handleClick(e) {
-		handleButton($props.value);
-		if ($props.onclick) $props.onclick(e);
+	function handleClick(e: MouseEvent) {
+		handleButton($props?.value);
+		if ($props?.onclick) {
+			$props.onclick(e);
+		}
 	}
 
 	function setFocused() {
@@ -46,13 +52,13 @@ export default function MenuButton($props: MenuButtonProps) {
 
 	@render {
 		<button
-			{$props.id}
-			class={`torp-menu-button ${$props.class ?? ""}`.trim()}
+			{$props?.id}
+			class={`torp-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={handleKeyDown}
 			onclick={handleClick}
 			onfocus={() => handleItemFocus(index)}

package/src/Menu/MenuCheck.torp

@@ -14,6 +14,8 @@ interface MenuCheckProps {
 	checked?: boolean,
 	/** Whether this item is disabled */
 	disabled?: boolean,
+	/** Raised when the checkbox is clicked */
+	onclick?: (e: MouseEvent) => void,
 }
 
 /**
@@ -21,15 +23,15 @@ interface MenuCheckProps {
  * option on or off.
  *
  */
-export default function MenuCheck($props: MenuCheckProps) {
-	$props ??= $watch({});
-
+export default function MenuCheck($props: MenuCheckProps | undefined) {
 	let $state = $watch({
-		checked: $props.checked
+		checked: $props?.checked ?? false
 	});
 
 	$run(() => {
-		$props.checked = $state.checked;
+		if ($props !== undefined) {
+			$props.checked = $state.checked;
+		}
 	});
 
 	let button: HTMLButtonElement;
@@ -54,22 +56,24 @@ export default function MenuCheck($props: MenuCheckProps) {
 		button.focus();
 	}
 
-	function handleClick() {
+	function handleClick(e: MouseEvent) {
 		$state.checked = !$state.checked;
-		if ($props.onclick) $props.onclick();
+		if ($props?.onclick) {
+			$props.onclick(e);
+		}
 	}
 
 	@render {
 		<button
-			{$props.id}
-			class={`torp-menu-check ${$props.class ?? ""}`.trim()}
+			{$props?.id}
+			class={`torp-menu-check ${$props?.class ?? ""}`.trim()}
 			type="button"
-			{$props.disabled}
+			{$props?.disabled}
 			role="menuitemcheckbox"
-			aria-checked={$props.checked ? "true" : "false"}
-			aria-disabled={$props.disabled ? "true" : undefined}
-			data-state={$props.checked ? "checked" : "unchecked"}
-			data-disabled={$props.disabled ? "true" : undefined}
+			aria-checked={$props?.checked ? "true" : "false"}
+			aria-disabled={$props?.disabled ? "true" : undefined}
+			data-state={$props?.checked ? "checked" : "unchecked"}
+			data-disabled={$props?.disabled ? "true" : undefined}
 			onkeydown={handleItemKey}
 			onclick={handleClick}
 			onfocus={() => handleItemFocus(index)}

package/src/Menu/MenuGroup.torp

@@ -11,17 +11,15 @@ interface MenuGroupProps {
 /**
  * A container for a logical group of menu items.
  */
-export default function MenuGroup($props: MenuGroupProps) {
-	$props ??= $watch({});
-
+export default function MenuGroup($props: MenuGroupProps | undefined) {
 	// TODO: Intercept the context to steal toggleItem??
 
 	@render {
 		<div
-			{$props.id}
-			class={`torp-menu-group ${$props.class ?? ""}`.trim()}
+			{$props?.id}
+			class={`torp-menu-group ${$props?.class ?? ""}`.trim()}
 			role="group"
-			aria-label={$props.ariaLabel}
+			aria-label={$props?.ariaLabel}
 		>
 			<slot />
 		</div>

package/src/Menu/MenuIndicator.torp

@@ -13,9 +13,7 @@ interface MenuIndicatorProps {
  * An indicator for a MenuCheck or MenuRadio component, which is displayed
  * when the value of checked is true.
  */ 
-export default function MenuIndicator($props: MenuIndicatorProps) {
-	$props ??= $watch({});
-
+export default function MenuIndicator($props: MenuIndicatorProps | undefined) {
 	// Get stuff out of the MenuButtonContext
 	const context = $context[MenuButtonContextName] as MenuButtonContext;
 	if (!context) {
@@ -26,10 +24,10 @@ export default function MenuIndicator($props: MenuIndicatorProps) {
 	@render {
 		@if ($state.checked) {
 			<div
-				{$props.id}
-				class={`torp-menu-indicator ${$props.class ?? ""}`.trim()}
-				aria-disabled={$props.disabled ? "true" : undefined}
-				data-disabled={$props.disabled ? "true" : undefined}
+				{$props?.id}
+				class={`torp-menu-indicator ${$props?.class ?? ""}`.trim()}
+				aria-disabled={$props?.disabled ? "true" : undefined}
+				data-disabled={$props?.disabled ? "true" : undefined}
 			>
 				<slot />
 			</div>

package/src/Menu/MenuPopout.torp

@@ -7,12 +7,12 @@ interface MenuPopoutProps {
 	class?: string,
 	/** Whether the popout is visible */
 	visible?: boolean,
-	/** Called when the popout is opened or closed */
+	/** Raised when the popout is opened or closed */
 	ontoggle?: (open: boolean) => void,
-	/** Called when the popout has opened */
+	/** Raised when the popout has opened */
 	onopen?: () => void,
-	/** Called when the popout has closed */
-	onclose?: () => void,
+	/** Raised when the popout has closed */
+	onclose?: (result: any) => void,
 }
 
 /**
@@ -22,17 +22,14 @@ interface MenuPopoutProps {
  *
  * ```
  * <MenuPopout>
- *     <MenuPopoutTrigger /> (optional)
+ * 	<MenuPopoutTrigger /> (optional)
  * 	<MenuPopoutContent />
  * </MenuPopout>
  * ```
  */
-export default function MenuPopout($props: MenuPopoutProps) {
-	$props ??= $watch({});
-	$props.visible ??= false;
-
+export default function MenuPopout($props: MenuPopoutProps | undefined) {
 	let $state = $watch({
-		visible: $props.visible
+		visible: $props?.visible ?? false
 	});
 
 	let result: any;
@@ -50,9 +47,9 @@ export default function MenuPopout($props: MenuPopoutProps) {
 
 	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;
@@ -72,8 +69,8 @@ export default function MenuPopout($props: MenuPopoutProps) {
 
 	@render {
 		<div
-			{$props.id}
-			class={`torp-menu-popout ${$props.class ?? ""}`.trim()}
+			{$props?.id}
+			class={`torp-menu-popout ${$props?.class ?? ""}`.trim()}
 			onmouseleave={handleMouseLeave}
 		>
 			<slot />

package/src/Menu/MenuPopoutContent.torp

@@ -16,11 +16,7 @@ interface MenuPopoutContentProps {
 /**
  * The content that is displayed for a MenuPopout when it is open.
  */
-export default function MenuPopoutContent($props: MenuPopoutContentProps) {
-	$props ??= $watch({});
-	$props.side ??= "right";
-	$props.alignment ??= "start";
-
+export default function MenuPopoutContent($props: MenuPopoutContentProps | undefined) {
 	let div: HTMLDivElement;
 	let shown = false;
 
@@ -65,14 +61,16 @@ export default function MenuPopoutContent($props: MenuPopoutContentProps) {
 			throw new Error("MenuPopoutContent must have an anchor element");
 		}
 
-		setPopoverPosition(popoutContext.anchorElement, div, $props.side, $props.alignment);
+		let side = $props?.side ?? "right";
+		let alignment = $props?.alignment ?? "start";
+		setPopoverPosition(popoutContext.anchorElement, div, side, alignment);
 	}
 
 	@render {
 		@if ($state.visible) {
 			<div
-				{$props.id}
-				class={`torp-menu-popout-content ${$props.class ?? ""}`.trim()}
+				{$props?.id}
+				class={`torp-menu-popout-content ${$props?.class ?? ""}`.trim()}
 				&ref={div}
 				onmount={show}
 			>

package/src/Menu/MenuPopoutTrigger.torp

@@ -19,10 +19,8 @@ interface MenuPopoutTriggerProps {
 /**
  * A button that is placed in a Menu or MenuGroup and signals a response by a user.
  */
-export default function MenuPopoutTrigger($props: MenuPopoutTriggerProps) {
-	$props ??= $watch({});
-	$props.hoverDelay ??= 500;
-	$props.disabled ??= false;
+export default function MenuPopoutTrigger($props: MenuPopoutTriggerProps | undefined) {
+	let defaultHoverDelay = 500;
 
 	let button: HTMLButtonElement;
 	let interval: NodeJS.Timeout | undefined;
@@ -72,16 +70,16 @@ export default function MenuPopoutTrigger($props: MenuPopoutTriggerProps) {
 	}
 
 	function handleMouseEnter() {
-		if ($props.disabled) return;
+		if ($props?.disabled) return;
 
 		// Handle the hover after a delay
 		if (!interval) {
-			interval = setTimeout(() => setVisible(true), $props.hoverDelay);
+			interval = setTimeout(() => setVisible(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 +89,26 @@ export default function MenuPopoutTrigger($props: MenuPopoutTriggerProps) {
 	}
 
 	function handleMouseMove() {
-		if ($props.disabled) return;
+		if ($props?.disabled) return;
 
 		// Reset the interval on mouse move
 		if (interval) {
 			clearTimeout(interval);
-			interval = setTimeout(() => setVisible(true), $props.hoverDelay);
+			interval = setTimeout(() => setVisible(true), $props?.hoverDelay ?? defaultHoverDelay);
 		}
 	}
 
 	@render {
 		<button
-			{$props.id}
-			class={`torp-menu-popout-trigger ${$props.class ?? ""}`.trim()}
+			{$props?.id}
+			class={`torp-menu-popout-trigger ${$props?.class ?? ""}`.trim()}
 			type="button"
-			{$props.disabled}
+			{$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}
+			aria-disabled={$props?.disabled ? "true" : undefined}
+			data-disabled={$props?.disabled ? "true" : undefined}
 			onkeydown={handlePopoutKey}
 			onclick={handleClick}
 			onfocus={() => handleItemFocus(index)}

package/src/Menu/MenuRadio.torp

@@ -24,15 +24,15 @@ interface MenuRadioProps {
  * A button that is placed in a Menu or MenuGroup to allow the user to select
  * from a number of options.
  */
-export default function MenuRadio($props: MenuRadioProps) {
-	$props ??= $watch({});
-
+export default function MenuRadio($props: MenuRadioProps | undefined) {
 	let $state = $watch({
-		checked: $props.checked,
+		checked: $props?.checked ?? false,
 	});
 
 	$run(() => {
-		$props.checked = $state.checked;
+		if ($props !== undefined) {
+			$props.checked = $state.checked;
+		}
 	});
 
 	let button: HTMLButtonElement;
@@ -55,7 +55,7 @@ export default function MenuRadio($props: MenuRadioProps) {
 	const { index } = registerItem(setFocused);
 
 	// Register this item with the parent MenuRadioGroup
-	registerItemInGroup($props.value, setChecked);
+	registerItemInGroup($props?.value ?? "", setChecked);
 
 	// Set the context to pass down to items
 	let context: MenuButtonContext = {
@@ -73,21 +73,21 @@ export default function MenuRadio($props: MenuRadioProps) {
 
 	function handleClick() {
 		if (!$state.checked) {
-			toggleItem($props.value);
+			toggleItem($props?.value ?? "");
 		}
 	}
 
 	@render {
 		<button
-			{$props.id}
-			class={`torp-menu-radio ${$props.class ?? ""}`.trim()}
+			{$props?.id}
+			class={`torp-menu-radio ${$props?.class ?? ""}`.trim()}
 			type="button"
-			{$props.disabled}
+			{$props?.disabled}
 			role="menuitemradio"
-			aria-checked={$props.checked}
-			aria-disabled={$props.disabled ? "true" : undefined}
-			data-state={$props.checked ? "checked" : "unchecked"}
-			data-disabled={$props.disabled ? "true" : undefined}
+			aria-checked={$props?.checked}
+			aria-disabled={$props?.disabled ? "true" : undefined}
+			data-state={$props?.checked ? "checked" : "unchecked"}
+			data-disabled={$props?.disabled ? "true" : undefined}
 			onkeydown={handleItemKey}
 			onclick={handleClick}
 			onfocus={() => handleItemFocus(index)}

package/src/Menu/MenuRadioGroup.torp

@@ -13,19 +13,27 @@ interface MenuRadioGroupProps {
 	ariaLabel?: string,
 	/** The value of the checked MenuRadio */
 	value?: string | undefined,
-	/** Called when the checked item has changed */
+	/** Raised when the checked item has changed */
 	onchange?: (value: any) => void,
 }
 
 /**
  * A container for a logical group of menu RadioGroup items.
  */
-export default function MenuRadioGroup($props: MenuRadioGroupProps) {
-	$props ??= $watch({});
-
+export default function MenuRadioGroup($props: MenuRadioGroupProps | undefined) {
 	// A collection containing the state and some functions for each item
 	let itemStates: RadioGroupItemState[] = [];
 
+	let $state = $watch({
+		value: $props?.value
+	});
+
+	$run(() => {
+		if ($props !== undefined) {
+			$props.value = $state.value;
+		}
+	});
+
 	// Set the context to pass down to items
 	let context: MenuRadioGroupContext = {
 		registerItemInGroup,
@@ -35,11 +43,11 @@ export default function MenuRadioGroup($props: MenuRadioGroupProps) {
 
 	$mount(() => {
 		// Set the initial checked item
-		setValue($props.value);
+		setValue($props?.value);
 	});
 
 	function registerItemInGroup(itemValue: string, setChecked: (value: boolean) => void) {
-		// Add the item"s state to the array
+		// Add the item's state to the array
 		const newItemState: RadioGroupItemState = {
 			value: itemValue,
 			checked: false,
@@ -63,11 +71,11 @@ export default function MenuRadioGroup($props: MenuRadioGroupProps) {
 		}
 
 		// Set the value
-		if ($props.value !== newValue) {
-			$props.value = newValue;
+		if ($state.value !== newValue) {
+			$state.value = newValue;
 
-			if ($props.onchange) {
-				$props.onchange($props.value);
+			if ($props?.onchange) {
+				$props?.onchange($props?.value);
 			}
 		}
 	}
@@ -81,15 +89,15 @@ export default function MenuRadioGroup($props: MenuRadioGroupProps) {
 				newValue = item.value;
 			}
 		}
-		$props.value = newValue;
+		$state.value = newValue;
 	}
 
 	@render {
 		<div
-			{$props.id}
-			class={`torp-menu-radio-group ${$props.class ?? ""}`.trim()}
+			{$props?.id}
+			class={`torp-menu-radio-group ${$props?.class ?? ""}`.trim()}
 			role="group"
-			aria-label={$props.ariaLabel}
+			aria-label={$props?.ariaLabel}
 		>
 			<slot />
 		</div>

package/src/Menu/MenuSeparator.torp

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

package/src/Menu/MenuTypes.ts

@@ -7,7 +7,7 @@ export interface MenuContext {
 	setVisible: (value: boolean, result?: any) => void;
 
 	/** Called from a MenuButton to close the Menu and return a result */
-	handleTrigger: (type: "confirm" | "cancel" | undefined, value?: any) => void;
+	handleButton: (type: "confirm" | "cancel" | undefined, value?: any) => void;
 
 	/** Called from a MenuButton when its button is focused */
 	handleItemFocus: (index: number) => void;
@@ -15,10 +15,7 @@ export interface MenuContext {
 	/** Called from a MenuButton when a key is pressed */
 	handleItemKey: (e: KeyboardEvent) => void;
 
-	state: {
-		/** Whether the Menu is visible. Writable so that it can be subscribed to by children */
-		visible: boolean;
-	};
+	state: MenuState;
 
 	/** The element that caused this Menu to be shown */
 	anchorElement?: HTMLElement;
@@ -27,6 +24,11 @@ export interface MenuContext {
 	registerItem: (setFocused: () => void) => { index: number };
 }
 
+export interface MenuState {
+	/** Whether the Menu is visible */
+	visible: boolean;
+}
+
 export interface MenuButtonContext {
 	state: {
 		checked: boolean;

package/src/MenuBar/MenuBar.torp

@@ -20,18 +20,17 @@ interface MenuBarProps {
  *
  * ```
  * <MenuBar>
- *     <MenuBarItem>
- *         <MenuBarItemTrigger />
- *         <MenuBarItemContent>
- *             <Menu />
- *         </MenuBarItemContent>
- *     </MenuBarItem>
+ * 	<MenuBarItem>
+ * 		<MenuBarItemTrigger />
+ * 		<MenuBarItemContent>
+ * 			<Menu />
+ * 		</MenuBarItemContent>
+ * 	</MenuBarItem>
  * </MenuBar>
  * ```
  */
-export default function MenuBar($props: MenuBarProps) {
-	$props ??= $watch({});
-	$props.orientation ??= "horizontal";
+export default function MenuBar($props: MenuBarProps | undefined) {
+	let orientation = $props?.orientation ?? "horizontal";
 
 	let $state = $watch({
 		active: false,
@@ -52,7 +51,7 @@ export default function MenuBar($props: MenuBarProps) {
 	$context[MenuBarContextName] = context;
 
 	function registerItem(setVisible: (value: boolean) => void, setFocused: () => void) {
-		// Add the item"s state to the array and return its index
+		// Add the item's state to the array and return its index
 		const newItemState: ItemState = {
 			setVisible,
 			setFocused
@@ -146,12 +145,12 @@ export default function MenuBar($props: MenuBarProps) {
 
 	@render {
 		<div
-			{$props.id}
-			class={`torp-menu-bar ${$props.class ?? ""}`.trim()}
+			{$props?.id}
+			class={`torp-menu-bar ${$props?.class ?? ""}`.trim()}
 			tabindex="-1"
 			role="menubar"
-			aria-label={$props.ariaLabel}
-			aria-orientation={$props.orientation}
+			aria-label={$props?.ariaLabel}
+			aria-orientation={orientation}
 		>
 			<slot />
 		</div>