@torpor/ui 0.3.5 → 0.3.6

package/src/Menu/MenuTypes.ts

@@ -1,60 +0,0 @@
-export const MenuContextName = "Menu";
-export const MenuButtonContextName = "MenuButton";
-export const MenuRadioGroupContextName = "MenuRadioGroup";
-export const MenuPopoutContextName = "MenuPopout";
-
-export interface MenuContext {
-	setVisible: (value: boolean, result?: any) => void;
-
-	/** Called from a MenuButton to close the Menu and return a result */
-	handleButton: (type: "confirm" | "cancel" | undefined, value?: any) => void;
-
-	/** Called from a MenuButton when its button is focused */
-	handleItemFocus: (index: number) => void;
-
-	/** Called from a MenuButton when a key is pressed */
-	handleItemKey: (e: KeyboardEvent) => void;
-
-	state: MenuState;
-
-	/** The element that caused this Menu to be shown */
-	anchorElement?: HTMLElement;
-
-	/** Called from each MenuButton/Check/Radio to register itself with this Menu */
-	registerItem: (setFocused: () => void) => { index: number };
-}
-
-export interface MenuState {
-	/** Whether the Menu is visible */
-	visible: boolean;
-}
-
-export interface MenuButtonContext {
-	state: {
-		checked: boolean;
-	};
-}
-
-export interface MenuRadioGroupContext {
-	registerItemInGroup: (value: string, setChecked: (value: boolean) => void) => void;
-	toggleItem: (value: string) => void;
-}
-
-export interface MenuPopoutContext {
-	setVisible: (value: boolean) => void;
-	state: {
-		visible: boolean;
-	};
-	anchorElement?: HTMLElement;
-	focusFirstElement?: () => void;
-}
-
-export interface ItemState {
-	setFocused: () => void;
-}
-
-export interface RadioGroupItemState {
-	value: string;
-	checked: boolean;
-	setChecked: (value: boolean) => void;
-}

package/src/Menu/index.ts

@@ -1,25 +0,0 @@
-import Menu from "./Menu.torp";
-import MenuButton from "./MenuButton.torp";
-import MenuCheck from "./MenuCheck.torp";
-import MenuGroup from "./MenuGroup.torp";
-import MenuIndicator from "./MenuIndicator.torp";
-import MenuPopout from "./MenuPopout.torp";
-import MenuPopoutContent from "./MenuPopoutContent.torp";
-import MenuPopoutTrigger from "./MenuPopoutTrigger.torp";
-import MenuRadio from "./MenuRadio.torp";
-import MenuRadioGroup from "./MenuRadioGroup.torp";
-import MenuSeparator from "./MenuSeparator.torp";
-
-export {
-	Menu,
-	MenuGroup,
-	MenuButton,
-	MenuCheck,
-	MenuRadio,
-	MenuRadioGroup,
-	MenuIndicator,
-	MenuPopout,
-	MenuPopoutTrigger,
-	MenuPopoutContent,
-	MenuSeparator,
-};

package/src/MenuBar/MenuBar.torp

@@ -1,162 +0,0 @@
-import type { ClassValue, StyleValue } from "@torpor/view";
-import { MenuBarContextName, type MenuBarContext, type ItemState } from "./MenuBarTypes";
-
-interface MenuBarProps {
-	/** 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 orientation of the menu, which affects keyboard navigation */
-	orientation?: "horizontal" | "vertical",
-}
-
-/**
- * A menu bar, similar to that shown at the top of Windows applications or at the top of the screen on Macs.
- *
- * See [the WAI ARIA guidelines for Menus](https://www.w3.org/WAI/ARIA/apg/patterns/menu/).
- *
- * The structure of a MenuBar is:
- *
- * ```
- * <MenuBar>
- * 	<MenuBarItem>
- * 		<MenuBarItemTrigger />
- * 		<MenuBarItemContent>
- * 			<Menu />
- * 		</MenuBarItemContent>
- * 	</MenuBarItem>
- * </MenuBar>
- * ```
- */
-export default function MenuBar($props: MenuBarProps | undefined) {
-	let orientation = $props?.orientation ?? "horizontal";
-
-	let $state = $watch({
-		active: false,
-	});
-
-	// A collection containing the state and some functions for each item
-	let itemStates: ItemState[] = [];
-	let focusIndex = -1;
-
-	// Set the context to pass down to items
-	let context: MenuBarContext = {
-		handleItemShow,
-		handleButtonFocus,
-		handleButtonKey,
-		registerItem,
-		state: $state
-	};
-	$context[MenuBarContextName] = context;
-
-	function registerItem(setVisible: (value: boolean) => void, setFocused: () => void) {
-		// Add the item's state to the array and return its index
-		const newItemState: ItemState = {
-			setVisible,
-			setFocused
-		};
-		itemStates.push(newItemState);
-		itemStates = itemStates;
-		return { index: itemStates.length - 1 };
-	}
-
-	function handleItemShow(index: number) {
-		// Make sure other items are hidden
-		itemStates.forEach((item, i) => {
-			if (i !== index) {
-				item.setVisible(false);
-			}
-		});
-	}
-
-	function handleButtonFocus(index: number) {
-		focusIndex = index;
-	}
-
-	function handleButtonKey(e: KeyboardEvent) {
-		switch (e.key) {
-			case "Right":
-			case "ArrowRight": {
-				if (orientation === "horizontal") {
-					e.preventDefault();
-					focusItem("next");
-				}
-				break;
-			}
-			case "Left":
-			case "ArrowLeft": {
-				if (orientation === "horizontal") {
-					e.preventDefault();
-					focusItem("previous");
-				}
-				break;
-			}
-			case "Down":
-			case "ArrowDown": {
-				if (orientation === "vertical") {
-					e.preventDefault();
-					focusItem("next");
-				}
-				break;
-			}
-			case "Up":
-			case "ArrowUp": {
-				if (orientation === "vertical") {
-					e.preventDefault();
-					focusItem("previous");
-				}
-				break;
-			}
-			case "Home": {
-				e.preventDefault();
-				focusItem("start");
-				break;
-			}
-			case "End": {
-				e.preventDefault();
-				focusItem("end");
-				break;
-			}
-		}
-	}
-
-	function focusItem(target: "start" | "previous" | "next" | "end") {
-		switch (target) {
-			case "start": {
-				focusIndex = 0;
-				break;
-			}
-			case "previous": {
-				focusIndex = Math.max(0, focusIndex - 1);
-				break;
-			}
-			case "next": {
-				focusIndex = Math.min(itemStates.length - 1, focusIndex + 1);
-				break;
-			}
-			case "end": {
-				focusIndex = itemStates.length - 1;
-				break;
-			}
-		}
-		itemStates[focusIndex]?.setFocused();
-	}
-
-	@render {
-		<div
-			{$props?.id}
-			class={["torp-menu-bar", $props?.class]}
-			{$props?.style}
-			tabindex="-1"
-			role="menubar"
-			aria-label={$props?.ariaLabel}
-			aria-orientation={orientation}
-		>
-			<slot />
-		</div>
-	}
-}

package/src/MenuBar/MenuBarItem.torp

@@ -1,116 +0,0 @@
-import type { ClassValue, StyleValue } from "@torpor/view";
-import {
-	MenuBarContextName,
-	MenuBarItemContextName,
-	type MenuBarContext,
-	type MenuBarItemContext
-} from "./MenuBarTypes";
-import { PopoverContextName, type PopoverContext } from "../Popover/PopoverTypes";
-
-interface MenuBarItemProps {
-	/** An ID for the root element */
-	id?: string;
-	/** Classes for the root element */
-	class?: ClassValue,
-	/** Styles for the root element */
-	style?: StyleValue,
-	/** Whether the item is visible */
-	visible?: boolean,
-	/** Raised when the item is opened or closed */
-	ontoggle?: (visible: boolean) => void,
-	/** Raised when the item has opened */
-	onopen?: () => void,
-	/** Raised when the item has closed */
-	onclose?: (result: any) => void,
-}
-
-/**
- * A popout that is attached to a menubar button and can be used to show a submenu.
- *
- * The structure of a MenuBarItem is:
- *
- * ```
- * <MenuBarItem>
- * 	<MenuBarItemTrigger /> (optional)
- * 	<MenuBarItemContent />
- * </MenuBarItem>
- * ```
- */
-export default function MenuBarItem($props: MenuBarItemProps | undefined) {
-	let $state = $watch({
-		visible: $props?.visible ?? false
-	});
-
-	let result: any;
-
-	// Get stuff out of the MenuBarContext
-	const menubarContext = $context[MenuBarContextName] as MenuBarContext;
-	if (!menubarContext) {
-		throw new Error("MenuBarItem must be contained within a MenuBar");
-	}
-	const { handleItemShow } = menubarContext;
-
-	// Set the context to pass down to items
-	let context: MenuBarItemContext = {
-		setVisible,
-		state: $state,
-		index: -1
-	};
-	$context[MenuBarItemContextName] = context;
-
-	// Set the context to pass down to items
-	let popoverContext: PopoverContext = {
-		setVisible,
-		handleButton,
-		modal: false,
-		state: $state,
-		//anchorElement: anchor,
-	};
-	$context[PopoverContextName] = popoverContext;
-
-	$mount(() => {
-		setVisible();
-	});
-
-	function setVisible(value: boolean) {
-		if (!value || menubarContext.state.active) {
-			$state.visible = value;
-			if (value) {
-				handleItemShow(context.index);
-			}
-		}
-	}
-
-	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 handleButton(type: "confirm" | "cancel" | undefined, value?: any) {
-		menubarContext.state.active = false;
-		setVisible(false);
-	}
-
-	@render {
-		<div 
-			{$props?.id}
-			class={["torp-menu-bar-item", $props?.class]}
-			{$props?.style}
-		>
-			<slot />
-		</div>
-	}
-}

package/src/MenuBar/MenuBarItemContent.torp

@@ -1,119 +0,0 @@
-import type { ClassValue, StyleValue } from "@torpor/view";
-import { addDocumentEvent, removeDocumentEvent } from "../utils/documentEvents";
-import setPopoverPosition from "../utils/setPopoverPosition";
-import {
-	MenuBarContextName,
-	MenuBarItemContextName,
-	type MenuBarContext,
-	type MenuBarItemContext
-} from "./MenuBarTypes";
-
-interface MenuBarItemContentProps {
-	/** 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 MenuBarItem when it is open.
- */
-export default function MenuBarItemContent($props: MenuBarItemContentProps | undefined) {
-	let div: HTMLDivElement;
-	let closeOnClick = false;
-	let shown = false;
-
-	// Get stuff out of the MenuBarContext
-	const context = $context[MenuBarContextName] as MenuBarContext;
-	if (!context) {
-		throw new Error("MenuBarItemContent must be contained within a MenuBar");
-	}
-
-	// Get stuff out of the MenuBarItemContext
-	const itemContext = $context[MenuBarItemContextName] as MenuBarItemContext;
-	if (!itemContext) {
-		throw new Error("MenuBarItemContent must be contained within a MenuBarItem");
-	}
-	const { state: $state, setVisible } = itemContext;
-
-	$run(() => {
-		if (!$state.visible) {
-			hide();
-		}
-	});
-
-	function show() {
-		shown = true;
-
-		// HACK: Because this Contextual could be shown with a click, we need to wait for another mousedown
-		// before we close on click. Otherwise the click immediately bubbles to the document. I guess
-		// we could require the user to preventDefault after calling showContextual, but that seems very
-		// error-prone?
-		closeOnClick = false;
-		addDocumentEvent("mousedown", handleDocumentMouseDown);
-		addDocumentEvent("click", handleDocumentClick);
-
-		// Set the position and listen for window resize and scroll to reset the position
-		setPosition();
-		addEventListener("resize", setPosition);
-		addEventListener("scroll", setPosition);
-		if (itemContext.focusFirstElement) {
-			itemContext.focusFirstElement();
-		}
-	}
-
-	function hide() {
-		if (!shown) return;
-
-		removeDocumentEvent("mousedown", handleDocumentMouseDown);
-		removeDocumentEvent("click", handleDocumentClick);
-
-		// Stop listening for window resize and focus the anchor element per WAI guidelines
-		removeEventListener("resize", setPosition);
-		removeEventListener("scroll", setPosition);
-		if (itemContext.anchorElement?.focus) {
-			itemContext.anchorElement.focus();
-		}
-	}
-
-	function handleDocumentMouseDown() {
-		closeOnClick = true;
-	}
-
-	function handleDocumentClick(e: MouseEvent) {
-		if (closeOnClick && !div.contains(e.target as HTMLElement)) {
-			//context.active = false;
-			setVisible(false);
-		}
-	}
-
-	function setPosition() {
-		if (!itemContext.anchorElement) {
-			throw new Error("MenuBarItemContent must have an anchor element");
-		}
-
-		let side = $props?.side ?? "bottom";
-		let alignment = $props?.alignment ?? "start";
-		setPopoverPosition(itemContext.anchorElement, div, side, alignment);
-	}
-
-	@render {
-		@if ($state.visible) {
-			<div
-				{$props?.id}
-				class={["torp-menu-bar-item-content", $props?.class]}
-				{$props?.style}
-				&ref={div}
-				onmount={show}
-			>
-				<slot />
-			</div>
-		}
-	}
-}

package/src/MenuBar/MenuBarItemTrigger.torp

@@ -1,99 +0,0 @@
-import type { ClassValue, StyleValue } from "@torpor/view";
-import {
-	MenuBarContextName,
-	MenuBarItemContextName,
-	type MenuBarContext,
-	type MenuBarItemContext
-} from "./MenuBarTypes";
-
-interface MenuBarItemTriggerProps {
-	/** An ID for the root element */
-	id?: string;
-	/** Classes for the root element */
-	class?: ClassValue,
-	/** Styles for the root element */
-	style?: StyleValue,
-	/** Whether this button is disabled */
-	disabled?: boolean,
-}
-
-/**
- * A button that is placed in a MenuBar and opens a submenu.
- *
- */
-export default function MenuBarItemTrigger($props: MenuBarItemTriggerProps | undefined) {
-	let button: HTMLButtonElement;
-
-	// Get stuff out of the MenuBarContext
-	const menubarContext = $context[MenuBarContextName] as MenuBarContext;
-	if (!menubarContext) {
-		throw new Error("MenuBarItemTrigger must be contained within a MenuBar");
-	}
-	const { registerItem, handleButtonKey, handleButtonFocus } = menubarContext;
-
-	// Get stuff out of the MenuBarItemContext
-	const itemContext = $context[MenuBarItemContextName] as MenuBarItemContext;
-	if (!itemContext) {
-		throw new Error("MenuBarItemTrigger must be contained within a MenuBarItem");
-	}
-	const { state: $state, setVisible } = itemContext;
-
-	// Register this item with the parent MenuBar and store the index
-	const { index } = registerItem(setVisible, setFocused);
-
-	$mount(() => {
-		// Set the anchor element to the button when it exists
-		//itemContext.anchorElement = button;
-		itemContext.index = index;
-	});
-
-	function setFocused() {
-		button.focus();
-	}
-
-	function handleClick() {
-		menubarContext.state.active = !menubarContext.state.active;
-		setVisible(menubarContext.state.active);
-	}
-
-	function handleKey(e: KeyboardEvent) {
-		switch (e.key) {
-			case "Down":
-			case "ArrowDown":
-				// TODO: This should be based on what side the menu shows on
-				e.preventDefault();
-				menubarContext.state.active = true;
-				setVisible(true);
-				break;
-			default:
-				handleButtonKey(e);
-		}
-	}
-
-	function handleMouseEnter() {
-		setVisible(true);
-	}
-
-	@render {
-		<button
-			{$props?.id}
-			class={["torp-menu-bar-item-button", $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={handleKey}
-			onclick={handleClick}
-			onfocus={() => handleButtonFocus(index)}
-			onmouseenter={handleMouseEnter}
-			&ref={button}
-			onmount={(el) => itemContext.anchorElement = el}
-		>
-			<slot />
-		</button>
-	}
-}

package/src/MenuBar/MenuBarTypes.ts

@@ -1,36 +0,0 @@
-export const MenuBarContextName = "MenuBar";
-export const MenuBarItemContextName = "MenuBarItem";
-
-export interface MenuBarContext {
-	/** Called from a MenuBarItem when it is shown, to hide others */
-	handleItemShow: (index: number) => void;
-
-	/** Called from a MenuBarButton when its button is focused */
-	handleButtonFocus: (index: number) => void;
-
-	/** Called from a MenuBarButton when a key is pressed */
-	handleButtonKey: (e: KeyboardEvent) => void;
-
-	/** Called from each MenuBarButton to register itself with this MenuBar */
-	registerItem: (setVisible: (value: boolean) => void, setFocused: () => void) => { index: number };
-
-	state: {
-		/** Whether a menubar item is showing its content. If so, changing to another item should show its content */
-		active: boolean;
-	};
-}
-
-export interface MenuBarItemContext {
-	setVisible: (value: boolean) => void;
-	state: {
-		visible: boolean;
-	};
-	index: number;
-	anchorElement?: HTMLElement;
-	focusFirstElement?: () => void;
-}
-
-export interface ItemState {
-	setVisible: (value: boolean) => void;
-	setFocused: () => void;
-}

package/src/MenuBar/index.ts

@@ -1,6 +0,0 @@
-import MenuBar from "./MenuBar.torp";
-import MenuBarItem from "./MenuBarItem.torp";
-import MenuBarItemContent from "./MenuBarItemContent.torp";
-import MenuBarItemTrigger from "./MenuBarItemTrigger.torp";
-
-export { MenuBar, MenuBarItem, MenuBarItemTrigger, MenuBarItemContent };