@torpor/ui 0.3.6 → 0.4.0

package/dist/ListBox/ListBox.torp

@@ -0,0 +1,271 @@
+import type { ClassValue, StyleValue } from "@torpor/view";
+import getId from "../utils/getId";
+import { PopoutContextName, type PopoutContext, type HandleButtonPress } from "../utils/PopoutTypes";
+import { ListBoxContextName, type ListBoxContext, type ItemState } from "./ListBoxTypes";
+
+// TODO: orientation
+
+interface ListBoxProps {
+	/** An ID for the root element */
+	id?: string;
+	/** Classes for the root element */
+	class?: ClassValue,
+	/** Styles for the root element */
+	style?: StyleValue,
+	/** Whether a single ListBoxItem or multiple ListBoxItems can be selected at the same time */
+	type?: "single" | "multiple",
+	/** The value of the selected ListBoxItem, or an array of values if the type is "multiple" */
+	value?: any | any[],
+	/** If set to true, the user cannot interact with any items in the ListBox */
+	disabled?: boolean,
+	/** An ARIA label for describing the ListBox to screen readers  */
+	ariaLabel?: string | undefined,
+	/** Raised when the selected item(s) have changed */
+	onchange?: (value: any | any[]) => void,
+}
+
+/**
+ * A list of options that a user can select.
+ *
+ * See [the WAI ARIA guidelines for ListBoxes](https://www.w3.org/WAI/ARIA/apg/patterns/listbox/).
+ *
+ * The structure of an ListBox is:
+ *
+ * ```
+ * <ListBox>
+ * 	<ListBoxItem />
+ * 	<ListBoxSeparator /> (optional)
+ * </ListBox>
+ * ```
+ */
+export default function ListBox($props: ListBoxProps | undefined) {
+	let defaultId = getId();
+	let type = $props?.type ?? "single";
+
+	let $state = $watch({
+		value: $props?.value ?? (type === "single" ? undefined : [])
+	});
+
+	// Update $state on $props change
+	$run(() => {
+		$state.value = $props?.value ?? (type === "single" ? undefined : [])
+	});
+
+	// Update $props on $state change
+	$run(() => {
+		if ($props !== undefined) {
+			$props.value = $state.value;
+		}
+	});
+
+	let itemStates: ItemState[] = [];
+
+	// This is used to assign automatic indexes to items where needed
+	let nextIndex = 0;
+
+	// Maybe get stuff out of a popout context
+	let handleButton: HandleButtonPress | undefined = undefined;
+	const popoutContext = $context[PopoutContextName] as PopoutContext;
+	if (popoutContext) {
+		handleButton = popoutContext.handleButton;
+
+		//popoutContext.handleClickOutside = handleClickOutside;
+		// Set the focusFirstElement method in the PopoutContext so that it can be
+		// called after everything has been shown
+		popoutContext.focusFirstElement = focusFirstElement;
+		popoutContext.focusLastElement = focusLastElement;
+
+		// Set the content ID so that it can be used with aria-controls in AccordionTrigger
+		popoutContext.state.contentId = $props?.id ?? defaultId;
+	}
+
+	// Set the context to pass down to items, with functions for each item to call
+	let context: ListBoxContext = {
+		registerItem,
+		removeItem,
+		toggleItem,
+		handleKey,
+	};
+	$context[ListBoxContextName] = context;
+
+	function focusFirstElement() {
+		if (itemStates.length > 0) {
+			itemStates[0].setFocused();
+		}
+	}
+
+	function focusLastElement() {
+		if (itemStates.length > 0) {
+			itemStates.at(-1)!.setFocused();
+		}
+	}
+
+	$run(() => {
+		// Get the value to ensure that this effect will be subscribed
+		let value = $state.value;
+
+		// And set the expanded item(s)
+		switch (type) {
+			case "single": {
+				for (let item of itemStates) {
+					item.selected = item.value === value;
+				}
+				break;
+			}
+			case "multiple": {
+				if (!Array.isArray(value)) {
+					value = [value];
+				}
+				for (let item of itemStates) {
+					item.selected = value.indexOf(item.value) !== -1;
+				}
+				break;
+			}
+		}
+	})
+
+	$run(() => {
+		let disabled = $props?.disabled;
+		itemStates.forEach((s) => s.parentDisabled = disabled === true);
+	});
+
+	// Dispatch the change event when the value changes
+	let firstChange = true;
+	$run(() => {
+		const onchange = $props?.onchange;
+		const value = $state.value;
+		if (firstChange) {
+			firstChange = false;
+		} else if (onchange) {
+			onchange(value);
+		}
+	});
+
+	function registerItem(itemState: ItemState) {
+		// If an index wasn't set for the item, set it automatically
+		if (itemState.index === -1) {
+			itemState.index = nextIndex++;
+		}
+
+		// If a value wasn't set for the item, set it to the index
+		if (!itemState.value) {
+			itemState.value = itemState.index;
+		}
+
+		// If we have a value, set whether the item should be selected
+		if ($state.value !== undefined && $state.value !== null) {
+			switch (type) {
+				case "single": {
+					itemState.selected = $state.value === itemState.value;
+					break;
+				}
+				case "multiple": {
+					itemState.selected = $state.value.includes(itemState.value);
+					break;
+				}
+			}
+		}
+
+		// Set whether the ListBox itself is disabled
+		itemState.parentDisabled = $props?.disabled === true
+
+		// Add the item's state to the array
+		itemStates.splice(itemState.index, 0, itemState);
+	}
+
+	// TODO: I think this should be done by value
+	function removeItem(itemIndex: number) {
+		// Remove the item and re-index
+		let index = itemStates.findIndex((item) => item.index === itemIndex);
+		if (index !== -1) {
+			itemStates.splice(itemIndex, 1);
+		}
+		itemStates.forEach((item, i) => (item.index = i));
+	}
+
+	function toggleItem(value: string) {
+		switch (type) {
+			case "single": {
+				for (let item of itemStates) {
+					if (item.value === value) {
+						$state.value = item.selected ? "" : item.value;
+						break;
+					}
+				}
+				// Pass this along to the containing popout if applicable, so
+				// that the popout can be closed
+				if (handleButton) {
+					handleButton("confirm", value)
+				}
+				break;
+			}
+			case "multiple": {
+				let newValue = [];
+				for (let item of itemStates) {
+					if (
+						(item.value === value && !item.selected) ||
+						(item.value !== value && item.selected)
+					) {
+						newValue.push(item.value);
+					}
+				}
+				$state.value = newValue.sort();
+				break;
+			}
+		}
+	}
+
+	function handleKey(index: number, e: KeyboardEvent) {
+		switch (e.key) {
+			case "Up":
+			case "ArrowUp": {
+				if (index > 0) {
+					e.preventDefault();
+					itemStates[index - 1].setFocused();
+				}
+				break;
+			}
+			case "Down":
+			case "ArrowDown": {
+				if (index < itemStates.length - 1) {
+					e.preventDefault();
+					itemStates[index + 1].setFocused();
+				}
+				break;
+			}
+			case "Home": {
+				if (index > 0) {
+					e.preventDefault();
+					itemStates[0].setFocused();
+				}
+				break;
+			}
+			case "End": {
+				if (index < itemStates.length - 1) {
+					e.preventDefault();
+					itemStates[itemStates.length - 1].setFocused();
+				}
+				break;
+			}
+			case "Escape": {
+				if (handleButton) {
+					handleButton("cancel")
+				}
+				break;
+			}
+		}
+	}
+
+	@render {
+		<div
+			id={$props?.id ?? defaultId}
+			class={["torp-list-box", $props?.class]}
+			{$props?.style}
+			role="listbox"
+			aria-label={$props?.ariaLabel}
+			aria-multiselectable={type === "multiple" ? "true" : undefined}
+		>
+			<slot />
+		</div>
+	}
+}

package/dist/ListBox/ListBoxItem.torp

@@ -0,0 +1,107 @@
+import type { ClassValue, StyleValue } from "@torpor/view";
+import { ListBoxContextName, type ItemState, type ListBoxContext } from "./ListBoxTypes";
+
+interface ListBoxItemProps {
+	/** An ID for the root element */
+	id?: string;
+	/** Classes for the root element */
+	class?: ClassValue,
+	/** Styles for the root element */
+	style?: StyleValue,
+	/** The index of this item in the ListBox. Set this if you will be inserting, removing or sorting items. If you don't set this, it will be set automatically */
+	index?: number,
+	/** A value for the item. Set this if you need more control over which item(s) are selected. If you don't set this, the value will be set to the item's initial index */
+	value?: string,
+	/** If set to true, the user cannot interact with this ListBoxItem */
+	disabled?: boolean,
+	/** Raised when this item is opened or closed */
+	ontoggle?: (open: boolean) => void,
+}
+
+/**
+ * An item in an ListBox.
+ */
+export default function ListBoxItem($props: ListBoxItemProps | undefined) {
+	let $state: ItemState = $watch({
+		index: -1,
+		value: "",
+		selected: false,
+		disabled: $props?.disabled ?? false,
+		parentDisabled: false,
+		setFocused
+	})
+
+	let button: HTMLButtonElement;
+
+	// Get stuff out of the ListBoxContext
+	const context = $context[ListBoxContextName] as ListBoxContext;
+	if (!context) {
+		throw new Error("ListBoxItem must be contained within a ListBox");
+	}
+
+	// Register this item with the parent ListBox, which will handle toggling selected for all items
+	context.registerItem($state, setFocused);
+
+	// Remove the item from the parent ListBox when this item is destroyed
+	$run(() => {
+		return () => {
+			context.removeItem($state.index);
+		}
+	});
+
+	// Dispatch the toggle event when the value of selected changes
+	let firstToggle = true;
+	$run(() => {
+		const ontoggle = $props?.ontoggle;
+		const selected = $state.selected;
+		if (firstToggle) {
+			firstToggle = false;
+		} else if (ontoggle) {
+			ontoggle(selected);
+		}
+	});
+
+	// This function is called by the parent ListBox to focus this item's button
+	function setFocused() {
+		button.focus();
+	}
+
+	function handleClick() {
+		// Pass the value to the toggleItem method in the parent ListBox which will handle toggling
+		// the value of expanded for all items (e.g. to unselect other items if necessary)
+		context.toggleItem($state.value);
+	}
+
+	function handleKey(e: KeyboardEvent) {
+		// For testing
+		switch (e.key) {
+			case "Enter":
+				e.preventDefault();
+				context.toggleItem($state.value);
+				break;
+			default:
+				// Pass the key press up to the parent ListBox which will handle
+				// setting the focused button
+				context.handleKey($state.index, e);
+				break;
+		}
+	}
+
+	@render {
+		<button
+			{$props?.id}
+			class={["torp-list-box-item", $props?.class]}
+			{$props?.style}
+			role="option"
+			aria-selected={$state.selected ? "true" : "false"}
+			aria-disabled={$state.disabled ? "true" : undefined}
+			data-state={$state.selected ? "active" : undefined}
+			data-disabled={$state.disabled ? "true" : undefined}
+			onclick={handleClick}
+			onkeydown={handleKey}
+			&ref={button}
+		>
+			<slot />
+		</button>
+	}
+}

package/dist/ListBox/ListBoxSeparator.torp

@@ -0,0 +1,26 @@
+import type { ClassValue, StyleValue } from "@torpor/view";
+
+interface ListBoxSeparatorProps {
+	/** 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 list box that separates logical sets of items.
+ */
+export default function ListBoxSeparator($props: ListBoxSeparatorProps | undefined) {
+	@render {
+		<div
+			{$props?.id}
+			class={["torp-list-box-separator", $props?.class]}
+			{$props?.style}
+			role="separator"
+		>
+			<slot />
+		</div>
+	}
+}

package/dist/ListBox/ListBoxTypes.ts

@@ -0,0 +1,23 @@
+export const ListBoxContextName: unique symbol = Symbol.for("torp.ListBox");
+export const ListBoxItemContextName: unique symbol = Symbol.for("torp.ListBoxItem");
+
+export interface ListBoxContext {
+	/** Called from an ListBoxItem when it is added */
+	registerItem: (state: ItemState, setFocused: () => void) => void;
+	/** Called from an ListBoxItem when it is removed */
+	removeItem: (index: number) => void;
+	/** Called from an ListBoxItem when it is toggled */
+	toggleItem: (value: string) => void;
+	/** Called from an ListBoxItem when it receives a keyboard event */
+	handleKey: (index: number, e: KeyboardEvent) => void;
+}
+
+export interface ItemState {
+	index: number;
+	value: any;
+	selected: boolean;
+	disabled: boolean;
+	parentDisabled: boolean;
+	/** Called in the ListBox when an item needs to be focused */
+	setFocused: () => void;
+}

package/dist/ListBox/index.d.ts

@@ -0,0 +1,97 @@
+import { type SlotRender } from "@torpor/view";
+
+
+interface ListBoxProps {
+	/** An ID for the root element */
+	id?: string;
+	/** Classes for the root element */
+	class?: ClassValue,
+	/** Styles for the root element */
+	style?: StyleValue,
+	/** Whether a single ListBoxItem or multiple ListBoxItems can be selected at the same time */
+	type?: "single" | "multiple",
+	/** The value of the selected ListBoxItem, or an array of values if the type is "multiple" */
+	value?: any | any[],
+	/** If set to true, the user cannot interact with any items in the ListBox */
+	disabled?: boolean,
+	/** An ARIA label for describing the ListBox to screen readers  */
+	ariaLabel?: string | undefined,
+	/** Raised when the selected item(s) have changed */
+	onchange?: (value: any | any[]) => void,
+}
+
+/**
+ * A list of options that a user can select.
+ *
+ * See [the WAI ARIA guidelines for ListBoxes](https://www.w3.org/WAI/ARIA/apg/patterns/listbox/).
+ *
+ * The structure of an ListBox is:
+ *
+ * ```
+ * <ListBox>
+ * 	<ListBoxItem />
+ * 	<ListBoxSeparator /> (optional)
+ * </ListBox>
+ * ```
+ */
+declare function ListBox(
+	$parent: ParentNode,
+	$anchor: Node | null,
+	$props: ListBoxProps | undefined,
+	$context?: Record<PropertyKey, any>,
+	$slots?: Record<string, SlotRender>,
+): void;
+
+
+
+interface ListBoxItemProps {
+	/** An ID for the root element */
+	id?: string;
+	/** Classes for the root element */
+	class?: ClassValue,
+	/** Styles for the root element */
+	style?: StyleValue,
+	/** The index of this item in the ListBox. Set this if you will be inserting, removing or sorting items. If you don't set this, it will be set automatically */
+	index?: number,
+	/** A value for the item. Set this if you need more control over which item(s) are selected. If you don't set this, the value will be set to the item's initial index */
+	value?: string,
+	/** If set to true, the user cannot interact with this ListBoxItem */
+	disabled?: boolean,
+	/** Raised when this item is opened or closed */
+	ontoggle?: (open: boolean) => void,
+}
+
+/**
+ * An item in an ListBox.
+ */
+declare function ListBoxItem(
+	$parent: ParentNode,
+	$anchor: Node | null,
+	$props: ListBoxItemProps | undefined,
+	$context?: Record<PropertyKey, any>,
+	$slots?: Record<string, SlotRender>,
+): void;
+
+
+
+interface ListBoxSeparatorProps {
+	/** 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 list box that separates logical sets of items.
+ */
+declare function ListBoxSeparator(
+	$parent: ParentNode,
+	$anchor: Node | null,
+	$props: ListBoxSeparatorProps | undefined,
+	$context?: Record<PropertyKey, any>,
+	$slots?: Record<string, SlotRender>,
+): void;
+
+export { ListBox, ListBoxItem, ListBoxSeparator };

package/dist/ListBox/index.js

@@ -0,0 +1,14 @@
+// src/ListBox/ListBox.torp
+import ListBox_default from "./ListBox.torp";
+
+// src/ListBox/ListBoxItem.torp
+import ListBoxItem_default from "./ListBoxItem.torp";
+
+// src/ListBox/ListBoxSeparator.torp
+import ListBoxSeparator_default from "./ListBoxSeparator.torp";
+export {
+  ListBox_default as ListBox,
+  ListBoxItem_default as ListBoxItem,
+  ListBoxSeparator_default as ListBoxSeparator
+};
+//# sourceMappingURL=index.js.map

package/dist/ListBox/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}

package/dist/Menu/Menu.torp

@@ -1,7 +1,5 @@
 import type { ClassValue, StyleValue } from "@torpor/view";
-import { ContextualContextName } from "../Contextual/ContextualTypes";
-import { ModalContextName } from "../Modal/ModalTypes";
-import { PopoverContextName, type PopoverContext } from "../Popover/PopoverTypes";
+import { PopoutContextName, type PopoutContext } from "../utils/PopoutTypes";
 import {
 	MenuContextName,
 	type MenuContext,
@@ -46,21 +44,22 @@ export default function Menu($props: MenuProps | undefined) {
 
 	// Get stuff out of the 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 Context, Modal or Popover");
+	const popoutContext = $context[PopoutContextName] as PopoutContext;
+	if (!popoutContext) {
+		throw new Error("Menu must be contained within a popout component");
 	}
-	const { setVisible, handleButton, visible } = popoverContext;
+	const { setVisible, handleButton, state } = popoutContext;
 
 	// Check whether this is a menu in a popout
-	const popoutContext = $context[MenuPopoutContextName] as MenuPopoutContext;
-	const inPopout = !!popoutContext;
-	const setPopoutVisible = popoutContext?.setVisible;
+	const menuPopoutContext = $context[MenuPopoutContextName] as MenuPopoutContext;
+	const inPopout = !!menuPopoutContext;
+	const setPopoutVisible = menuPopoutContext?.setVisible;
 
 	// Set the focusFirstElement method in the PopoverContext(s) so that it can be called after everything has been shown
-	popoverContext.focusFirstElement = focusFirstElement;
-	if (popoutContext) {
-		popoutContext.focusFirstElement = focusFirstElement;
+	popoutContext.focusFirstElement = focusFirstElement;
+	if (menuPopoutContext) {
+		menuPopoutContext.focusFirstElement = focusFirstElement;
+		menuPopoutContext.focusLastElement = focusLastElement;
 	}
 
 	// Set the context to pass down to items
@@ -69,7 +68,7 @@ export default function Menu($props: MenuProps | undefined) {
 		handleButton,
 		handleItemFocus,
 		handleItemKey,
-		visible,
+		state,
 		registerItem
 	};
 	$context[MenuContextName] = context;
@@ -80,6 +79,12 @@ export default function Menu($props: MenuProps | undefined) {
 		}
 	}
 
+	function focusLastElement() {
+		if (itemStates.length > 0) {
+			itemStates.at(-1)!.setFocused();
+		}
+	}
+
 	function registerItem(setFocused: () => void) {
 		// Add the item's state to the array and return its index
 		const newItemState: ItemState = {

package/dist/Menu/MenuTypes.ts

@@ -1,7 +1,7 @@
-export const MenuContextName = "Menu";
-export const MenuButtonContextName = "MenuButton";
-export const MenuRadioGroupContextName = "MenuRadioGroup";
-export const MenuPopoutContextName = "MenuPopout";
+export const MenuContextName: unique symbol = Symbol.for("torp.Menu");
+export const MenuButtonContextName: unique symbol = Symbol.for("torp.MenuButton");
+export const MenuRadioGroupContextName: unique symbol = Symbol.for("torp.MenuRadioGroup");
+export const MenuPopoutContextName: unique symbol = Symbol.for("torp.MenuPopout");
 
 export interface MenuContext {
 	setVisible: (value: boolean, result?: any) => void;
@@ -47,6 +47,7 @@ export interface MenuPopoutContext {
 	};
 	anchorElement?: HTMLElement;
 	focusFirstElement?: () => void;
+	focusLastElement?: () => void;
 }
 
 export interface ItemState {

package/dist/MenuBar/MenuBarItem.torp

@@ -5,7 +5,7 @@ import {
 	type MenuBarContext,
 	type MenuBarItemContext
 } from "./MenuBarTypes";
-import { PopoverContextName, type PopoverContext } from "../Popover/PopoverTypes";
+import { PopoutContextName, type PopoutContext } from "../utils/PopoutTypes";
 
 interface MenuBarItemProps {
 	/** An ID for the root element */
@@ -59,17 +59,14 @@ export default function MenuBarItem($props: MenuBarItemProps | undefined) {
 	$context[MenuBarItemContextName] = context;
 
 	// Set the context to pass down to items
-	let popoverContext: PopoverContext = {
-		setVisible,
+	let popoutContext: PopoutContext = {
 		handleButton,
-		modal: false,
 		state: $state,
-		//anchorElement: anchor,
 	};
-	$context[PopoverContextName] = popoverContext;
+	$context[PopoutContextName] = popoutContext;
 
 	$mount(() => {
-		setVisible();
+		setVisible(false);
 	});
 
 	function setVisible(value: boolean) {
@@ -99,7 +96,7 @@ export default function MenuBarItem($props: MenuBarItemProps | undefined) {
 		}
 	});
 
-	function handleButton(type: "confirm" | "cancel" | undefined, value?: any) {
+	function handleButton(_type: "confirm" | "cancel" | undefined, _value?: any) {
 		menubarContext.state.active = false;
 		setVisible(false);
 	}

package/dist/MenuBar/MenuBarTypes.ts

@@ -1,5 +1,5 @@
-export const MenuBarContextName = "MenuBar";
-export const MenuBarItemContextName = "MenuBarItem";
+export const MenuBarContextName: unique symbol = Symbol.for("torp.MenuBar");
+export const MenuBarItemContextName: unique symbol = Symbol.for("torp.MenuBarItem");
 
 export interface MenuBarContext {
 	/** Called from a MenuBarItem when it is shown, to hide others */