@torpor/ui 0.4.0 → 1.0.1

package/dist/Menu/MenuRadioGroup.torp

@@ -1,100 +1,57 @@
-import type { ClassValue, StyleValue } from "@torpor/view";
+import type { Bindable, ClassValue, StyleValue } from "@torpor/view";
+import $handle from "../utils/$handle";
+import { createItemGroup } from "../utils/createItemGroup";
 import {
 	type MenuRadioGroupContext,
 	MenuRadioGroupContextName,
-	type RadioGroupItemState
+	type RadioGroupItemState,
 } from "./MenuTypes";
 
 interface MenuRadioGroupProps {
 	/** An ID for the root element */
 	id?: string;
 	/** Classes for the root element */
-	class?: ClassValue,
+	class?: ClassValue;
 	/** Styles for the root element */
-	style?: StyleValue,
+	style?: StyleValue;
 	/** An ARIA label for describing the menu to screen readers */
-	ariaLabel?: string,
+	ariaLabel?: string;
 	/** The value of the checked MenuRadio */
-	value?: string | undefined,
+	value: Bindable<string | undefined>;
 	/** Raised when the checked item has changed */
-	onchange?: (value: any) => void,
+	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
+		value: $props?.value,
+	});
+
+	$bind($state, $props, "value");
+
+	const group = createItemGroup<RadioGroupItemState>({
+		state: $state,
+		type: "single",
+		selectedProperty: "checked",
+		allowDeselect: false,
 	});
 
-	$run(() => {
-		if ($props !== undefined) {
-			$props.value = $state.value;
-		}
+	// Dispatch the change event when the value changes
+	$handle((first) => {
+		const value = $state.value;
+		if (!first) $props?.onchange?.(value);
 	});
 
 	// Set the context to pass down to items
 	let context: MenuRadioGroupContext = {
-		registerItemInGroup,
-		toggleItem
+		registerItemInGroup: group.registerItem,
+		toggleItem: group.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}

package/dist/Menu/MenuSeparator.torp

@@ -4,9 +4,9 @@ interface MenuSeparatorProps {
 	/** An ID for the root element */
 	id?: string;
 	/** Classes for the root element */
-	class?: ClassValue,
+	class?: ClassValue;
 	/** Styles for the root element */
-	style?: StyleValue,
+	style?: StyleValue;
 }
 
 /**
@@ -19,6 +19,7 @@ export default function MenuSeparator($props: MenuSeparatorProps | undefined) {
 			class={["torp-menu-separator", $props?.class]}
 			{$props?.style}
 			role="separator"
+			aria-orientation="vertical"
 		>
 			<slot />
 		</div>

package/dist/Menu/MenuTypes.ts

@@ -1,11 +1,10 @@
+import type { SubmenuItemState } from "../utils/PopoutTypes";
+
 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;
-
 	/** Called from a MenuButton to close the Menu and return a result */
 	handleButton: (type: "confirm" | "cancel" | undefined, value?: any) => void;
 
@@ -15,13 +14,16 @@ export interface MenuContext {
 	/** Called from a MenuButton when a key is pressed */
 	handleItemKey: (e: KeyboardEvent) => void;
 
+	/** Called from a MenuButton when a submenu is shown */
+	handlePopout: (index: number) => 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 };
+	registerItem: (item: ItemState) => { index: number };
 }
 
 export interface MenuState {
@@ -36,26 +38,14 @@ export interface MenuButtonContext {
 }
 
 export interface MenuRadioGroupContext {
-	registerItemInGroup: (value: string, setChecked: (value: boolean) => void) => void;
+	registerItemInGroup: (itemState: RadioGroupItemState) => void;
 	toggleItem: (value: string) => void;
 }
 
-export interface MenuPopoutContext {
-	setVisible: (value: boolean) => void;
-	state: {
-		visible: boolean;
-	};
-	anchorElement?: HTMLElement;
-	focusFirstElement?: () => void;
-	focusLastElement?: () => void;
-}
-
-export interface ItemState {
-	setFocused: () => void;
-}
+export type ItemState = SubmenuItemState;
 
 export interface RadioGroupItemState {
+	index: number;
 	value: string;
 	checked: boolean;
-	setChecked: (value: boolean) => void;
 }

package/dist/Menu/index.d.ts

@@ -5,11 +5,11 @@ interface MenuProps {
 	/** An ID for the root element */
 	id?: string;
 	/** Classes for the root element */
-	class?: ClassValue,
+	class?: ClassValue;
 	/** Styles for the root element */
-	style?: StyleValue,
+	style?: StyleValue;
 	/** An ARIA label for describing the menu to screen readers */
-	ariaLabel?: string,
+	ariaLabel?: string;
 }
 
 /**
@@ -44,17 +44,17 @@ interface MenuButtonProps {
 	/** An ID for the root element */
 	id?: string;
 	/** Classes for the root element */
-	class?: ClassValue,
+	class?: ClassValue;
 	/** Styles for the root element */
-	style?: StyleValue,
+	style?: StyleValue;
 	/** The value that should be returned when this button is pressed and the Dialog was invoked by calling showContextual, showPrompt or showPopover */
-	value?: any,
+	value?: any;
 	/** Whether this button is disabled */
-	disabled?: boolean,
+	disabled?: boolean;
 	/** Raised when the button is clicked */
-	onclick?: (e: MouseEvent) => void,
+	onclick?: (e: MouseEvent) => void;
 	/** Raised when a key is pressed down */
-	onkeydown?: (e: KeyboardEvent) => void,
+	onkeydown?: (e: KeyboardEvent) => void;
 }
 
 /**
@@ -75,15 +75,15 @@ interface MenuCheckProps {
 	/** An ID for the root element */
 	id?: string;
 	/** Classes for the root element */
-	class?: ClassValue,
+	class?: ClassValue;
 	/** Styles for the root element */
-	style?: StyleValue,
+	style?: StyleValue;
 	/** Whether this item is checked */
-	checked?: boolean,
+	checked: Bindable<boolean | undefined>;
 	/** Whether this item is disabled */
-	disabled?: boolean,
+	disabled?: boolean;
 	/** Raised when the checkbox is clicked */
-	onclick?: (e: MouseEvent) => void,
+	onclick?: (e: MouseEvent) => void;
 }
 
 /**
@@ -105,11 +105,11 @@ interface MenuGroupProps {
 	/** An ID for the root element */
 	id?: string;
 	/** Classes for the root element */
-	class?: ClassValue,
+	class?: ClassValue;
 	/** Styles for the root element */
-	style?: StyleValue,
+	style?: StyleValue;
 	/** An ARIA label for describing the group to screen readers */
-	ariaLabel?: string,
+	ariaLabel?: string;
 }
 
 /**
@@ -129,11 +129,9 @@ interface MenuIndicatorProps {
 	/** An ID for the root element */
 	id?: string;
 	/** Classes for the root element */
-	class?: ClassValue,
+	class?: ClassValue;
 	/** Styles for the root element */
-	style?: StyleValue,
-	/** Whether this item is disabled */
-	disabled?: boolean,
+	style?: StyleValue;
 }
 
 /**
@@ -154,17 +152,15 @@ interface MenuPopoutProps {
 	/** An ID for the root element */
 	id?: string;
 	/** Classes for the root element */
-	class?: ClassValue,
+	class?: ClassValue;
 	/** Styles for the root element */
-	style?: StyleValue,
+	style?: StyleValue;
 	/** Whether the popout is visible */
-	visible?: boolean,
-	/** Raised when the popout is opened or closed */
-	ontoggle?: (open: boolean) => void,
+	visible?: boolean;
 	/** Raised when the popout has opened */
-	onopen?: () => void,
+	onopen?: () => void;
 	/** Raised when the popout has closed */
-	onclose?: (result: any) => void,
+	onclose?: (result: any) => void;
 }
 
 /**
@@ -193,13 +189,13 @@ interface MenuPopoutContentProps {
 	/** An ID for the root element */
 	id?: string;
 	/** Classes for the root element */
-	class?: ClassValue,
+	class?: ClassValue;
 	/** Styles for the root element */
-	style?: StyleValue,
+	style?: StyleValue;
 	/** Where the popout will be shown, relative to the popout button */
-	side?: "top" | "right" | "bottom" | "left",
+	side?: "top" | "right" | "bottom" | "left";
 	/** How the popout will be aligned, relative to the popout button */
-	alignment?: "start" | "center" | "end",
+	alignment?: "start" | "center" | "end";
 }
 
 /**
@@ -219,13 +215,13 @@ interface MenuPopoutTriggerProps {
 	/** An ID for the root element */
 	id?: string;
 	/** Classes for the root element */
-	class?: ClassValue,
+	class?: ClassValue;
 	/** Styles for the root element */
-	style?: StyleValue,
+	style?: StyleValue;
 	/** The delay before showing the popout, in milliseconds */
-	hoverDelay?: number,
+	hoverDelay?: number;
 	/** Whether this button is disabled */
-	disabled?: boolean,
+	disabled?: boolean;
 }
 
 /**
@@ -245,15 +241,13 @@ interface MenuRadioProps {
 	/** An ID for the root element */
 	id?: string;
 	/** Classes for the root element */
-	class?: ClassValue,
+	class?: ClassValue;
 	/** Styles for the root element */
-	style?: StyleValue,
+	style?: StyleValue;
 	/** The value of the item */
-	value?: string,
-	/** Whether this item is checked */
-	checked?: boolean,
+	value: string;
 	/** Whether this item is disabled */
-	disabled?: boolean,
+	disabled?: boolean;
 }
 
 /**
@@ -263,7 +257,7 @@ interface MenuRadioProps {
 declare function MenuRadio(
 	$parent: ParentNode,
 	$anchor: Node | null,
-	$props: MenuRadioProps | undefined,
+	$props: MenuRadioProps,
 	$context?: Record<PropertyKey, any>,
 	$slots?: Record<string, SlotRender>,
 ): void;
@@ -274,15 +268,15 @@ interface MenuRadioGroupProps {
 	/** An ID for the root element */
 	id?: string;
 	/** Classes for the root element */
-	class?: ClassValue,
+	class?: ClassValue;
 	/** Styles for the root element */
-	style?: StyleValue,
+	style?: StyleValue;
 	/** An ARIA label for describing the menu to screen readers */
-	ariaLabel?: string,
+	ariaLabel?: string;
 	/** The value of the checked MenuRadio */
-	value?: string | undefined,
+	value: Bindable<string | undefined>;
 	/** Raised when the checked item has changed */
-	onchange?: (value: any) => void,
+	onchange?: (value: any) => void;
 }
 
 /**
@@ -302,9 +296,9 @@ interface MenuSeparatorProps {
 	/** An ID for the root element */
 	id?: string;
 	/** Classes for the root element */
-	class?: ClassValue,
+	class?: ClassValue;
 	/** Styles for the root element */
-	style?: StyleValue,
+	style?: StyleValue;
 }
 
 /**
@@ -318,4 +312,4 @@ declare function MenuSeparator(
 	$slots?: Record<string, SlotRender>,
 ): void;
 
-export { Menu, MenuButton, MenuCheck, MenuGroup, MenuIndicator, MenuPopout, MenuPopoutContent, MenuPopoutTrigger, MenuRadio, MenuRadioGroup, MenuSeparator };
+export { Menu, MenuButton, MenuCheck, MenuGroup, MenuIndicator, MenuPopout, MenuPopoutContent, MenuPopoutTrigger, MenuRadio, MenuRadioGroup, MenuSeparator };

package/dist/Menu/index.js

@@ -1,46 +1,12 @@
-// src/Menu/Menu.torp
-import Menu_default from "./Menu.torp";
-
-// src/Menu/MenuButton.torp
-import MenuButton_default from "./MenuButton.torp";
-
-// src/Menu/MenuCheck.torp
-import MenuCheck_default from "./MenuCheck.torp";
-
-// src/Menu/MenuGroup.torp
-import MenuGroup_default from "./MenuGroup.torp";
-
-// src/Menu/MenuIndicator.torp
-import MenuIndicator_default from "./MenuIndicator.torp";
-
-// src/Menu/MenuPopout.torp
-import MenuPopout_default from "./MenuPopout.torp";
-
-// src/Menu/MenuPopoutContent.torp
-import MenuPopoutContent_default from "./MenuPopoutContent.torp";
-
-// src/Menu/MenuPopoutTrigger.torp
-import MenuPopoutTrigger_default from "./MenuPopoutTrigger.torp";
-
-// src/Menu/MenuRadio.torp
-import MenuRadio_default from "./MenuRadio.torp";
-
-// src/Menu/MenuRadioGroup.torp
-import MenuRadioGroup_default from "./MenuRadioGroup.torp";
-
-// src/Menu/MenuSeparator.torp
-import MenuSeparator_default from "./MenuSeparator.torp";
-export {
-  Menu_default as Menu,
-  MenuButton_default as MenuButton,
-  MenuCheck_default as MenuCheck,
-  MenuGroup_default as MenuGroup,
-  MenuIndicator_default as MenuIndicator,
-  MenuPopout_default as MenuPopout,
-  MenuPopoutContent_default as MenuPopoutContent,
-  MenuPopoutTrigger_default as MenuPopoutTrigger,
-  MenuRadio_default as MenuRadio,
-  MenuRadioGroup_default as MenuRadioGroup,
-  MenuSeparator_default as MenuSeparator
-};
-//# sourceMappingURL=index.js.map
+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, MenuButton, MenuCheck, MenuGroup, MenuIndicator, MenuPopout, MenuPopoutContent, MenuPopoutTrigger, MenuRadio, MenuRadioGroup, MenuSeparator };

package/dist/MenuBar/MenuBar.torp

@@ -1,17 +1,18 @@
 import type { ClassValue, StyleValue } from "@torpor/view";
-import { MenuBarContextName, type MenuBarContext, type ItemState } from "./MenuBarTypes";
+import { createFocusGroup } from "../utils/focusGroup";
+import { type ItemState, type MenuBarContext, MenuBarContextName } from "./MenuBarTypes";
 
 interface MenuBarProps {
 	/** An ID for the root element */
 	id?: string;
 	/** Classes for the root element */
-	class?: ClassValue,
+	class?: ClassValue;
 	/** Styles for the root element */
-	style?: StyleValue,
+	style?: StyleValue;
 	/** An ARIA label for describing the menu to screen readers */
-	ariaLabel?: string,
+	ariaLabel?: string;
 	/** The orientation of the menu, which affects keyboard navigation */
-	orientation?: "horizontal" | "vertical",
+	orientation?: "horizontal" | "vertical";
 }
 
 /**
@@ -39,111 +40,58 @@ export default function MenuBar($props: MenuBarProps | undefined) {
 		active: false,
 	});
 
-	// A collection containing the state and some functions for each item
-	let itemStates: ItemState[] = [];
-	let focusIndex = -1;
+	// The focus group owns the item ledger and roving-tabindex bookkeeping
+	const group = createFocusGroup<ItemState>();
+	const { itemStates } = group;
 
 	// Set the context to pass down to items
 	let context: MenuBarContext = {
 		handleItemShow,
 		handleButtonFocus,
 		handleButtonKey,
+		handleAdjacentItem,
 		registerItem,
-		state: $state
+		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 registerItem(item: ItemState) {
+		return group.registerItem(item);
 	}
 
 	function handleItemShow(index: number) {
 		// Make sure other items are hidden
 		itemStates.forEach((item, i) => {
 			if (i !== index) {
-				item.setVisible(false);
+				item.setVisible?.(false);
 			}
 		});
 	}
 
 	function handleButtonFocus(index: number) {
-		focusIndex = index;
+		group.handleItemFocus(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 handleAdjacentItem(index: number, target: "previous" | "next") {
+		// Move focus to the adjacent item and open its menu; opening it also
+		// hides the current item's menu via handleItemShow
+		group.handleItemFocus(index);
+		focusItem(target);
+		const next = group.getFocusIndex();
+		if (next !== index) {
+			$state.active = true;
+			itemStates[next].setVisible?.(true);
 		}
 	}
 
+	function handleButtonKey(e: KeyboardEvent) {
+		group.handleGroupKey(group.getFocusIndex(), e, {
+			vertical: orientation === "vertical",
+		});
+	}
+
 	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();
+		group.moveFocus(group.getFocusIndex(), target);
 	}
 
 	@render {