@torpor/ui 0.3.5 → 0.3.6

package/src/Menu/MenuCheck.torp

@@ -1,89 +0,0 @@
-import type { ClassValue, StyleValue } from "@torpor/view";
-import {
-	MenuButtonContextName,
-	MenuContextName,
-	type MenuButtonContext,
-	type MenuContext
-} from "./MenuTypes";
-
-interface MenuCheckProps {
-	/** An ID for the root element */
-	id?: string;
-	/** Classes for the root element */
-	class?: ClassValue,
-	/** Styles for the root element */
-	style?: StyleValue,
-	/** Whether this item is checked */
-	checked?: boolean,
-	/** Whether this item is disabled */
-	disabled?: boolean,
-	/** Raised when the checkbox is clicked */
-	onclick?: (e: MouseEvent) => void,
-}
-
-/**
- * A button that is placed in a Menu or MenuGroup to allow the user to turn an
- * option on or off.
- *
- */
-export default function MenuCheck($props: MenuCheckProps | undefined) {
-	let $state = $watch({
-		checked: $props?.checked ?? false
-	});
-
-	$run(() => {
-		if ($props !== undefined) {
-			$props.checked = $state.checked;
-		}
-	});
-
-	let button: HTMLButtonElement;
-
-	// Get stuff out of the MenuContext
-	const menuContext = $context[MenuContextName] as MenuContext;
-	if (!menuContext) {
-		throw new Error("MenuCheck must be contained within a Menu");
-	}
-	const { registerItem, handleItemKey, handleItemFocus } = menuContext;
-
-	// Register this item with the parent Menu
-	const { index } = registerItem(setFocused);
-
-	// Set the context to pass down to items
-	let context: MenuButtonContext = {
-		state: $state
-	};
-	$context[MenuButtonContextName] = context;
-
-	function setFocused() {
-		button.focus();
-	}
-
-	function handleClick(e: MouseEvent) {
-		$state.checked = !$state.checked;
-		if ($props?.onclick) {
-			$props.onclick(e);
-		}
-	}
-
-	@render {
-		<button
-			{$props?.id}
-			class={["torp-menu-check", $props?.class]}
-			{$props?.style}
-			type="button"
-			{$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}
-			onkeydown={handleItemKey}
-			onclick={handleClick}
-			onfocus={() => handleItemFocus(index)}
-			&ref={button}
-		>
-			<slot />
-		</button>
-	}
-}

package/src/Menu/MenuGroup.torp

@@ -1,31 +0,0 @@
-import type { ClassValue, StyleValue } from "@torpor/view";
-
-interface MenuGroupProps {
-	/** 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 menu items.
- */
-export default function MenuGroup($props: MenuGroupProps | undefined) {
-	// TODO: Intercept the context to steal toggleItem??
-
-	@render {
-		<div
-			{$props?.id}
-			class={["torp-menu-group", $props?.class]}
-			{$props?.style}
-			role="group"
-			aria-label={$props?.ariaLabel}
-		>
-			<slot />
-		</div>
-	}
-}

package/src/Menu/MenuIndicator.torp

@@ -1,40 +0,0 @@
-import type { ClassValue, StyleValue } from "@torpor/view";
-import { MenuButtonContextName, type MenuButtonContext } from "./MenuTypes";
-
-interface MenuIndicatorProps {
-	/** An ID for the root element */
-	id?: string;
-	/** Classes for the root element */
-	class?: ClassValue,
-	/** Styles for the root element */
-	style?: StyleValue,
-	/** Whether this item is disabled */
-	disabled?: boolean,
-}
-
-/**
- * An indicator for a MenuCheck or MenuRadio component, which is displayed
- * when the value of checked is true.
- */ 
-export default function MenuIndicator($props: MenuIndicatorProps | undefined) {
-	// Get stuff out of the MenuButtonContext
-	const context = $context[MenuButtonContextName] as MenuButtonContext;
-	if (!context) {
-		throw new Error("MenuIndicator must be contained within a MenuCheck or MenuRadio");
-	}
-	let $state = context.state;
-
-	@render {
-		@if ($state.checked) {
-			<div
-				{$props?.id}
-				class={["torp-menu-indicator", $props?.class]}
-				{$props?.style}
-				aria-disabled={$props?.disabled ? "true" : undefined}
-				data-disabled={$props?.disabled ? "true" : undefined}
-			>
-				<slot />
-			</div>
-		}
-	}
-}

package/src/Menu/MenuPopout.torp

@@ -1,83 +0,0 @@
-import type { ClassValue, StyleValue } from "@torpor/view";
-import { MenuPopoutContextName, type MenuPopoutContext } from "./MenuTypes";
-
-interface MenuPopoutProps {
-	/** 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 MenuPopout is:
- *
- * ```
- * <MenuPopout>
- * 	<MenuPopoutTrigger /> (optional)
- * 	<MenuPopoutContent />
- * </MenuPopout>
- * ```
- */
-export default function MenuPopout($props: MenuPopoutProps | undefined) {
-	let $state = $watch({
-		visible: $props?.visible ?? false
-	});
-
-	let result: any;
-
-	// Set the context to pass down to items
-	let context: MenuPopoutContext = {
-		setVisible,
-		state: $state
-	};
-	$context[MenuPopoutContextName] = context;
-
-	function setVisible(value: boolean) {
-		$state.visible = value;
-	}
-
-	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() {
-		setVisible(false);
-	}
-
-	@render {
-		<div
-			{$props?.id}
-			class={["torp-menu-popout", $props?.class]}
-			{$props?.style}
-			onmouseleave={handleMouseLeave}
-		>
-			<slot />
-		</div>
-	}
-}

package/src/Menu/MenuPopoutContent.torp

@@ -1,84 +0,0 @@
-import type { ClassValue, StyleValue } from "@torpor/view";
-import setPopoverPosition from "../utils/setPopoverPosition";
-import { MenuPopoutContextName, type MenuPopoutContext } from "./MenuTypes";
-
-interface MenuPopoutContentProps {
-	/** 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 MenuPopout when it is open.
- */
-export default function MenuPopoutContent($props: MenuPopoutContentProps | undefined) {
-	let div: HTMLDivElement;
-	let shown = false;
-
-	// Get stuff out of the MenuPopoutContext
-	const popoutContext = $context[MenuPopoutContextName] as MenuPopoutContext;
-	if (!popoutContext) {
-		throw new Error("MenuPopoutContent must be contained within a MenuPopout");
-	}
-	let $state = popoutContext.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();
-		addEventListener("resize", setPosition);
-		addEventListener("scroll", setPosition);
-		if (popoutContext.focusFirstElement) {
-			popoutContext.focusFirstElement();
-		}
-	}
-
-	function hide() {
-		if (!shown) return;
-
-		// Stop listening for window resize and focus the anchor element per WAI guidelines
-		removeEventListener("resize", setPosition);
-		removeEventListener("scroll", setPosition);
-		if (popoutContext.anchorElement?.focus) {
-			popoutContext.anchorElement.focus();
-		}
-	}
-
-	function setPosition() {
-		if (!popoutContext.anchorElement) {
-			throw new Error("MenuPopoutContent must have an anchor element");
-		}
-
-		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]}
-				{$props?.style}
-				&ref={div}
-				onmount={show}
-			>
-				<slot />
-			</div>
-		}
-	}
-}

package/src/Menu/MenuPopoutTrigger.torp

@@ -1,128 +0,0 @@
-import type { ClassValue, StyleValue } from "@torpor/view";
-import {
-	MenuContextName,
-	MenuPopoutContextName,
-	type MenuContext,
-	type MenuPopoutContext
-} from "./MenuTypes";
-
-interface MenuPopoutTriggerProps {
-	/** 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 Menu or MenuGroup and signals a response by a user.
- */
-export default function MenuPopoutTrigger($props: MenuPopoutTriggerProps | undefined) {
-	let defaultHoverDelay = 500;
-
-	let button: HTMLButtonElement;
-	let interval: NodeJS.Timeout | undefined;
-
-	// Get stuff out of the MenuContext
-	const menuContext = $context[MenuContextName] as MenuContext;
-	if (!menuContext) {
-		throw new Error("MenuPopoutTrigger must be contained within a Menu");
-	}
-	const { registerItem, handleItemKey, handleItemFocus } = menuContext;
-
-	// Get stuff out of the MenuPopoutContext
-	const popoutContext = $context[MenuPopoutContextName] as MenuPopoutContext;
-	if (!popoutContext) {
-		throw new Error("MenuPopoutTrigger must be contained within a MenuPopout");
-	}
-	const { state: $state, setVisible } = popoutContext;
-
-	// Register this item with the parent Menu and store the index
-	const { index } = registerItem(setFocused);
-
-	// TODO: This is getting called before @render
-	//$mount(() => {
-	//	// Set the anchor element to the button when it exists
-	//	popoutContext.anchorElement = button;
-	//});
-
-	function setFocused() {
-		button.focus();
-	}
-
-	function handleClick() {
-		setVisible(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();
-				setVisible(true);
-				break;
-			default:
-				handleItemKey(e);
-		}
-	}
-
-	function handleMouseEnter() {
-		if ($props?.disabled) return;
-
-		// Handle the hover after a delay
-		if (!interval) {
-			interval = setTimeout(() => setVisible(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(() => setVisible(true), $props?.hoverDelay ?? defaultHoverDelay);
-		}
-	}
-
-	@render {
-		<button
-			{$props?.id}
-			class={["torp-menu-popout-trigger", $props?.class]}
-			{$props?.style}
-			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={handlePopoutKey}
-			onclick={handleClick}
-			onfocus={() => handleItemFocus(index)}
-			onmouseenter={handleMouseEnter}
-			onmouseleave={handleMouseLeave}
-			onmousemove={handleMouseMove}
-			&ref={button}
-			onmount={(el) => popoutContext.anchorElement = el}
-		>
-			<slot />
-		</button>
-	}
-}

package/src/Menu/MenuRadio.torp

@@ -1,103 +0,0 @@
-import type { ClassValue, StyleValue } from "@torpor/view";
-import {
-	MenuButtonContextName,
-	MenuContextName,
-	MenuRadioGroupContextName,
-	type MenuButtonContext,
-	type MenuContext,
-	type MenuRadioGroupContext
-} from "./MenuTypes";
-
-interface MenuRadioProps {
-	/** An ID for the root element */
-	id?: string;
-	/** Classes for the root element */
-	class?: ClassValue,
-	/** Styles for the root element */
-	style?: StyleValue,
-	/** The value of the item */
-	value?: string,
-	/** Whether this item is checked */
-	checked?: boolean,
-	/** Whether this item is disabled */
-	disabled?: boolean,
-}
-
-/**
- * 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 | undefined) {
-	let $state = $watch({
-		checked: $props?.checked ?? false,
-	});
-
-	$run(() => {
-		if ($props !== undefined) {
-			$props.checked = $state.checked;
-		}
-	});
-
-	let button: HTMLButtonElement;
-
-	// Get stuff out of the MenuContext
-	const menuContext = $context[MenuContextName] as MenuContext;
-	if (!menuContext) {
-		throw new Error("MenuRadio must be contained within a Menu");
-	}
-	const { registerItem, handleItemKey, handleItemFocus } = menuContext;
-
-	// Get stuff out of the MenuRadioGroupContext
-	const groupContext = $context[MenuRadioGroupContextName] as MenuRadioGroupContext;
-	if (!groupContext) {
-		throw new Error("MenuRadio must be contained within a MenuRadioGroup");
-	}
-	const { registerItemInGroup, toggleItem } = groupContext;
-
-	// Register this item with the parent Menu
-	const { index } = registerItem(setFocused);
-
-	// Register this item with the parent MenuRadioGroup
-	registerItemInGroup($props?.value ?? "", setChecked);
-
-	// Set the context to pass down to items
-	let context: MenuButtonContext = {
-		state: $state
-	};
-	$context[MenuButtonContextName] = context;
-
-	function setFocused() {
-		button.focus();
-	}
-
-	function setChecked(value: boolean) {
-		$state.checked = value;
-	}
-
-	function handleClick() {
-		if (!$state.checked) {
-			toggleItem($props?.value ?? "");
-		}
-	}
-
-	@render {
-		<button
-			{$props?.id}
-			class={["torp-menu-radio", $props?.class]}
-			{$props?.style}
-			type="button"
-			{$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}
-			onkeydown={handleItemKey}
-			onclick={handleClick}
-			onfocus={() => handleItemFocus(index)}
-			&ref={button}
-		>
-			<slot />
-		</button>
-	}
-}

package/src/Menu/MenuRadioGroup.torp

@@ -1,109 +0,0 @@
-import type { ClassValue, StyleValue } from "@torpor/view";
-import {
-	type MenuRadioGroupContext,
-	MenuRadioGroupContextName,
-	type RadioGroupItemState
-} from "./MenuTypes";
-
-interface MenuRadioGroupProps {
-	/** 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 menu to screen readers */
-	ariaLabel?: string,
-	/** The value of the checked MenuRadio */
-	value?: string | undefined,
-	/** 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 | 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,
-		toggleItem
-	};
-	$context[MenuRadioGroupContextName] = context;
-
-	$mount(() => {
-		// Set the initial checked item
-		setValue($props?.value);
-	});
-
-	function registerItemInGroup(itemValue: string, setChecked: (value: boolean) => void) {
-		// Add the item's state to the array
-		const newItemState: RadioGroupItemState = {
-			value: itemValue,
-			checked: false,
-			setChecked
-		};
-		itemStates.push(newItemState);
-		itemStates = itemStates;
-	}
-
-	function setValue(newValue?: string) {
-		// No point doing this if there aren't any items yet (e.g. from the initial setValue() call)
-		if (!itemStates.length) {
-			return;
-		}
-
-		// Ensure the value passed in was a string (in case e.g. the user has set values to ints)
-		newValue = newValue?.toString();
-		for (let item of itemStates) {
-			item.checked = item.value === newValue;
-			item.setChecked(item.checked);
-		}
-
-		// Set the value
-		if ($state.value !== newValue) {
-			$state.value = newValue;
-
-			if ($props?.onchange) {
-				$props?.onchange($props?.value);
-			}
-		}
-	}
-
-	function toggleItem(toggleValue: string) {
-		let newValue = "";
-		for (let item of itemStates) {
-			const checked = item.value === toggleValue;
-			item.setChecked(checked);
-			if (checked) {
-				newValue = item.value;
-			}
-		}
-		$state.value = newValue;
-	}
-
-	@render {
-		<div
-			{$props?.id}
-			class={["torp-menu-radio-group", $props?.class]}
-			{$props?.style}
-			role="group"
-			aria-label={$props?.ariaLabel}
-		>
-			<slot />
-		</div>
-	}
-}

package/src/Menu/MenuSeparator.torp

@@ -1,26 +0,0 @@
-import type { ClassValue, StyleValue } from "@torpor/view";
-
-interface MenuSeparatorProps {
-	/** 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 MenuSeparator($props: MenuSeparatorProps | undefined) {
-	@render {
-		<div
-			{$props?.id}
-			class={["torp-menu-separator", $props?.class]}
-			{$props?.style}
-			role="separator"
-		>
-			<slot />
-		</div>
-	}
-}