@torpor/ui 0.3.7 → 1.0.0

package/dist/TabGroup/TabGroup.torp

@@ -1,23 +1,25 @@
-import type { ClassValue, StyleValue } from "@torpor/view";
-import { TabGroupContextName, type TabGroupContext, type ItemState } from "./TabGroupTypes";
+import type { Bindable, ClassValue, StyleValue } from "@torpor/view";
+import $handle from "../utils/$handle";
+import { createItemGroup } from "../utils/createItemGroup";
+import { type ItemState, type TabGroupContext, TabGroupContextName } from "./TabGroupTypes";
 
 interface TabGroupProps {
 	/** 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 orientation of the tab buttons, which affects keyboard navigation */
-	orientation?: "horizontal" | "vertical",
+	orientation?: "horizontal" | "vertical";
 	/** How tabs are activated; if automatic they are shown on focus, if manual they must be clicked */
-	activation?: "automatic" | "manual",
+	activation?: "automatic" | "manual";
 	/** The value of the active TabContent */
-	value?: string,
+	value?: Bindable<string | undefined>;
 	/** If set to true, the user cannot interact with any items in the TabGroup */
-	disabled?: boolean,
+	disabled?: boolean;
 	/** Raised when the active item has changed */
-	onchange?: (value: string | string[]) => void
+	onchange?: (value: string | string[]) => void;
 }
 
 /**
@@ -40,24 +42,19 @@ interface TabGroupProps {
  * ```
  */
 export default function TabGroup($props: TabGroupProps | undefined) {
-	let orientation = $props?.orientation ?? "horizontal";
-	let activation = $props?.activation ?? "automatic";
-
 	let $state = $watch({
-		value: ""
+		value: "",
 	});
 
-	// Sync props and state
-	$run(() => {
-		$state.value = $props?.value ?? "";
-	});
-	$run(() => {
-		if ($props !== undefined) {
-			$props.value = $state.value;
-		}
-	});
+	$bind($state, $props, "value");
 
-	let itemStates: ItemState[] = [];
+	const group = createItemGroup<ItemState>({
+		state: $state,
+		type: "single",
+		selectedProperty: "active",
+		allowDeselect: false,
+		disabled: () => $props?.disabled,
+	});
 
 	// This is used to assign automatic indexes to items where needed
 	let nextHeaderIndex = 0;
@@ -67,55 +64,43 @@ export default function TabGroup($props: TabGroupProps | undefined) {
 	let context: TabGroupContext = {
 		registerHeader,
 		registerItem,
-		removeItem,
-		triggerItem,
+		removeItem: group.removeItem,
+		triggerItem: group.toggleItem,
 		handleHeaderKey,
-		orientation,
-		activation,
+		get orientation() {
+			return $props?.orientation ?? "horizontal";
+		},
+		get activation() {
+			return $props?.activation ?? "automatic";
+		},
 	};
 	$context[TabGroupContextName] = context;
 
-	$run(() => {
-		// Ensure the value passed in was a string (in case e.g. the user has set values to ints)
-		$state.value = $state.value.toString();
-		for (let item of itemStates) {
-			item.active = item.value === $state.value;
-		}
-	});
-
-	$run(() => {
-		itemStates.forEach((s) => s.parentDisabled = $props?.disabled === true);
-	});
-
 	// Dispatch the change event when the value changes
-	let firstChange = true;
-	$run(() => {
-		const ev = $props?.onchange;
+	$handle((first) => {
 		const value = $props?.value;
-		if (firstChange) {
-			firstChange = false;
-		} else if (ev) {
-			ev(value!);
-		}
+		if (!first) $props?.onchange?.(value!);
 	});
 
 	// On mount, if no value was set, show the first tab content
-	$mount(() => {
-		if ($state.value === "" && itemStates.length) {
-			$state.value = itemStates[0].value;
+	$onmount(() => {
+		if ($state.value === "" && group.itemStates.length) {
+			$state.value = group.itemStates[0].value;
 		}
 	});
 
-	function registerHeader(index: number | undefined, value: string | undefined, setFocused: () => void): ItemState {
+	function registerHeader(
+		index: number | undefined,
+		value: string | undefined,
+		disabled: boolean | undefined,
+	): ItemState {
 		// If an index wasn't set for the header, set it automatically
-		if (!index) {
+		if (index === undefined) {
 			index = nextHeaderIndex++;
 		}
 
 		// Get or add the ItemState at this index
-		const itemState = getItemState(index, value);
-
-		itemState.setFocused = setFocused;
+		const itemState = getItemState(index, value, disabled);
 
 		return itemState;
 	}
@@ -132,10 +117,11 @@ export default function TabGroup($props: TabGroupProps | undefined) {
 		return itemState;
 	}
 
-	function getItemState(index: number, value: string | undefined): ItemState {
-		// If we already have an item at this index, just return it
-		if (itemStates.length > index) {
-			return itemStates[index];
+	function getItemState(index: number, value: string | undefined, disabled?: boolean): ItemState {
+		// If we already have an item with this index, just return it
+		const existing = group.itemStates.find((item) => item.index === index);
+		if (existing) {
+			return existing;
 		}
 
 		// If a value wasn't set for the item, set it to the index
@@ -143,94 +129,92 @@ export default function TabGroup($props: TabGroupProps | undefined) {
 			value = index.toString();
 		}
 
-		// Add the item's state to the array
+		// Add the item's state to the array; the group assigns the active and
+		// parentDisabled states and places it at its index
 		const newItemState: ItemState = $watch({
 			index,
 			value,
-			// TODO: this would be better than using $mount, but it doesn't work with nested tabs
-			// active: value === $props?.value || ($props?.value === "" && index === 0),
-			active: value === $state.value,
+			active: false,
 			headerId: "",
 			contentId: "",
-			disabled: false,
-			parentDisabled: false,
-			get dataState() {
-				return this.active ? "active" : "inactive";
-			},
+			disabled: $props?.disabled ?? disabled ?? false,
+			parentDisabled: $props?.disabled ?? false,
 			setFocused: () => {},
-			orientation,
-			activation
 		});
-		itemStates.splice(index, 0, newItemState);
+		group.registerItem(newItemState);
 
 		return newItemState;
 	}
 
-	// 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 triggerItem(toggleValue: string) {
-		for (let item of itemStates) {
-			// The item is active if it has the supplied value
-			if (item.value === toggleValue) {
-				$state.value = item.value;
-				break;
-			}
-		}
-	}
-
 	function handleHeaderKey(headerIndex: number, e: KeyboardEvent) {
+		const itemStates = group.itemStates;
+		const orientation = $props?.orientation ?? "horizontal";
 		switch (e.key) {
-			case "Left":
 			case "ArrowLeft": {
-				if (orientation === "horizontal" && headerIndex > 0) {
-					e.preventDefault();
-					itemStates[headerIndex - 1].setFocused();
+				if (orientation === "horizontal") {
+					for (let i = headerIndex - 1; i >= 0; i--) {
+						if (!itemStates[i].disabled) {
+							e.preventDefault();
+							itemStates[i].setFocused();
+							break;
+						}
+					}
 				}
 				break;
 			}
-			case "Up":
 			case "ArrowUp": {
-				if (orientation === "vertical" && headerIndex > 0) {
-					e.preventDefault();
-					itemStates[headerIndex - 1].setFocused();
+				if (orientation === "vertical") {
+					for (let i = headerIndex - 1; i >= 0; i--) {
+						if (!itemStates[i].disabled) {
+							e.preventDefault();
+							itemStates[i].setFocused();
+							break;
+						}
+					}
 				}
 				break;
 			}
-			case "Right":
 			case "ArrowRight": {
-				if (orientation === "horizontal" && headerIndex < itemStates.length - 1) {
-					e.preventDefault();
-					itemStates[headerIndex + 1].setFocused();
+				if (orientation === "horizontal") {
+					for (let i = headerIndex + 1; i < itemStates.length; i++) {
+						if (!itemStates[i].disabled) {
+							e.preventDefault();
+							itemStates[i].setFocused();
+							break;
+						}
+					}
 				}
 				break;
 			}
-			case "Down":
 			case "ArrowDown": {
-				if (orientation === "vertical" && headerIndex < itemStates.length - 1) {
-					e.preventDefault();
-					itemStates[headerIndex + 1].setFocused();
+				if (orientation === "vertical") {
+					for (let i = headerIndex + 1; i < itemStates.length; i++) {
+						if (!itemStates[i].disabled) {
+							e.preventDefault();
+							itemStates[i].setFocused();
+							break;
+						}
+					}
 				}
 				break;
 			}
 			case "Home": {
-				if (headerIndex > 0) {
-					e.preventDefault();
-					itemStates[0].setFocused();
+				for (let i = 0; i < itemStates.length; i++) {
+					if (!itemStates[i].disabled) {
+						e.preventDefault();
+						itemStates[i].setFocused();
+						break;
+					}
 				}
 				break;
 			}
 			case "End": {
-				if (headerIndex < itemStates.length - 1) {
-					e.preventDefault();
-					itemStates[itemStates.length - 1].setFocused();
+				for (let i = itemStates.length - 1; i >= 0; i--) {
+					if (!itemStates[i].disabled) {
+						e.preventDefault();
+						itemStates[i].setFocused();
+						break;
+					}
 				}
 				break;
 			}

package/dist/TabGroup/TabGroupTypes.ts

@@ -1,12 +1,12 @@
-export const TabGroupContextName = "TabGroup";
-export const TabItemContextName = "TabItem";
+export const TabGroupContextName: unique symbol = Symbol.for("torp.TabGroup");
+export const TabItemContextName: unique symbol = Symbol.for("torp.TabItem");
 
 export interface TabGroupContext {
 	/** Called from a header when it is added */
 	registerHeader: (
 		index: number | undefined,
 		value: string | undefined,
-		setFocused: () => void,
+		disabled: boolean | undefined,
 	) => ItemState;
 	/** Called from an item when it is added */
 	registerItem: (index: number | undefined, value: string | undefined) => ItemState;

package/dist/TabGroup/TabHeader.torp

@@ -1,26 +1,31 @@
 import type { ClassValue, StyleValue } from "@torpor/view";
-import { TabGroupContextName, TabItemContextName, type TabGroupContext, type TabItemContext } from "./TabGroupTypes";
+import {
+	type TabGroupContext,
+	TabGroupContextName,
+	type TabItemContext,
+	TabItemContextName,
+} from "./TabGroupTypes";
 
 interface TabHeaderProps {
 	/** An ID for the root element */
 	id?: string;
 	/** Classes for the root element */
-	class?: ClassValue,
+	class?: ClassValue;
 	/** Styles for the root element */
-	style?: StyleValue,
-	/** The type of HTML header to use */
-	as?: "h1" | "h2" | "h3" | "h4" | "h5" | "h6"
+	style?: StyleValue;
 	/** The index of this header's item */
-	index?: number,
+	index?: number;
 	/** The value for this header's item */
-	value?: string,
+	value?: string;
+	/** If set to true, the user cannot interact with this header */
+	disabled?: boolean;
 }
 
 /**
  * The header for a tab item, which contains the TabTrigger.
  *
  * The structure of a TabHeader is:
- * 
+ *
  * ```
  * <TabHeader>
  * 	<TabTrigger />
@@ -28,20 +33,22 @@ interface TabHeaderProps {
  * ```
  */
 export default function TabHeader($props: TabHeaderProps | undefined) {
-	let button: HTMLButtonElement;
-
 	const context = $context[TabGroupContextName] as TabGroupContext;
 	if (!context) {
 		throw new Error("TabHeader must be contained within a TabGroup");
 	}
-	let $state = context.registerHeader($props?.index, $props?.value);
+	let $state = context.registerHeader($props?.index, $props?.value, $props?.disabled);
 
 	const itemContext: TabItemContext = {
 		triggerItem: context.triggerItem,
 		handleHeaderKey: context.handleHeaderKey,
 		state: $state,
-		orientation: context.orientation,
-		activation: context.activation
+		get orientation() {
+			return context.orientation;
+		},
+		get activation() {
+			return context.activation;
+		},
 	};
 	$context[TabItemContextName] = itemContext;
 
@@ -49,12 +56,11 @@ export default function TabHeader($props: TabHeaderProps | undefined) {
 	$run(() => {
 		return () => {
 			context.removeItem($state.index);
-		}
+		};
 	});
 
 	@render {
-		@// TODO: $props?.as
-		<h4
+		<div
 			{$props?.id}
 			class={[
 				"torp-tab-header",
@@ -62,11 +68,9 @@ export default function TabHeader($props: TabHeaderProps | undefined) {
 				context.orientation
 			]}
 			data-state={$state.active ? "active" : "inactive"}
-			data-disabled={$state.disabled ? "true" : undefined}
-			&ref={button}
 		>
 			<slot />
-		</h4>
+		</div>
 	}
 
 	@style {

package/dist/TabGroup/TabList.torp

@@ -1,22 +1,22 @@
 import type { ClassValue, StyleValue } from "@torpor/view";
-import { TabGroupContextName, type TabGroupContext } from "./TabGroupTypes";
+import { type TabGroupContext, TabGroupContextName } from "./TabGroupTypes";
 
 interface TabListProps {
 	/** 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 tab list to screen readers */
-	ariaLabel?: string,
+	ariaLabel?: string;
 }
 
 /**
  * A component that holds the TabHeaders of a TabGroup.
- * 
+ *
  * The structure of a TabList is:
- * 
+ *
  * ```
  * <TabList>
  * 	<TabHeader>
@@ -31,17 +31,6 @@ export default function TabList($props: TabListProps | undefined) {
 	if (!context) {
 		throw new Error("TabList must be contained within a TabGroup");
 	}
-	// TODO: const { orientation } = context;
-	const orientation = context.orientation;
-
-	function handleFocus(e: FocusEvent & { currentTarget: EventTarget & HTMLElement }) {
-		// TODO: Should this be the first button?
-		const el = e.currentTarget.childNodes[0];
-		if (el instanceof HTMLElement) {
-			el.focus();
-			e.preventDefault();
-		}
-	}
 
 	@render {
 		<div
@@ -50,10 +39,8 @@ export default function TabList($props: TabListProps | undefined) {
 			{$props?.style}
 			role="tablist"
 			aria-label={$props?.ariaLabel}
-			aria-orientation={orientation}
-			data-orientation={orientation}
-			tabindex="0"
-			onfocus={handleFocus}
+			aria-orientation={context.orientation}
+			data-orientation={context.orientation}
 		>
 			<slot />
 		</div>

package/dist/TabGroup/TabTrigger.torp

@@ -1,14 +1,14 @@
 import type { ClassValue, StyleValue } from "@torpor/view";
 import getId from "../utils/getId";
-import { TabItemContextName, type TabItemContext } from "./TabGroupTypes";
+import { type TabItemContext, TabItemContextName } from "./TabGroupTypes";
 
 interface TabTriggerProps {
 	/** 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;
 }
 
 /**
@@ -58,13 +58,12 @@ export default function TabTrigger($props: TabTriggerProps | undefined) {
 			class={["torp-tab-trigger", $props?.class]}
 			{$props?.style}
 			role="tab"
-			tabindex="-1"
+			tabindex={$state.active ? "0" : "-1"}
 			disabled={$state.disabled || $state.parentDisabled}
-			aria-selected={$state.active.toString()}
-			aria-disabled={$state.disabled}
+			aria-selected={$state.active ? "true" : "false"}
+			aria-disabled={$state.disabled || $state.parentDisabled}
 			aria-controls={$state.contentId}
 			data-state={$state.active ? "active" : "inactive"}
-			data-disabled={$state.disabled}
 			data-orientation={context.orientation}
 			&ref={button}
 			onclick={handleClick}

package/dist/TabGroup/index.d.ts

@@ -5,13 +5,13 @@ interface TabContentProps {
 	/** 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 index of this item */
-	index?: number,
+	index?: number;
 	/** The value for this item */
-	value?: string,
+	value?: string;
 }
 
 /**
@@ -31,19 +31,19 @@ interface TabGroupProps {
 	/** 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 orientation of the tab buttons, which affects keyboard navigation */
-	orientation?: "horizontal" | "vertical",
+	orientation?: "horizontal" | "vertical";
 	/** How tabs are activated; if automatic they are shown on focus, if manual they must be clicked */
-	activation?: "automatic" | "manual",
+	activation?: "automatic" | "manual";
 	/** The value of the active TabContent */
-	value?: string,
+	value?: Bindable<string | undefined>;
 	/** If set to true, the user cannot interact with any items in the TabGroup */
-	disabled?: boolean,
+	disabled?: boolean;
 	/** Raised when the active item has changed */
-	onchange?: (value: string | string[]) => void
+	onchange?: (value: string | string[]) => void;
 }
 
 /**
@@ -79,22 +79,22 @@ interface TabHeaderProps {
 	/** An ID for the root element */
 	id?: string;
 	/** Classes for the root element */
-	class?: ClassValue,
+	class?: ClassValue;
 	/** Styles for the root element */
-	style?: StyleValue,
-	/** The type of HTML header to use */
-	as?: "h1" | "h2" | "h3" | "h4" | "h5" | "h6"
+	style?: StyleValue;
 	/** The index of this header's item */
-	index?: number,
+	index?: number;
 	/** The value for this header's item */
-	value?: string,
+	value?: string;
+	/** If set to true, the user cannot interact with this header */
+	disabled?: boolean;
 }
 
 /**
  * The header for a tab item, which contains the TabTrigger.
  *
  * The structure of a TabHeader is:
- * 
+ *
  * ```
  * <TabHeader>
  * 	<TabTrigger />
@@ -115,18 +115,18 @@ interface TabListProps {
 	/** 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 tab list to screen readers */
-	ariaLabel?: string,
+	ariaLabel?: string;
 }
 
 /**
  * A component that holds the TabHeaders of a TabGroup.
- * 
+ *
  * The structure of a TabList is:
- * 
+ *
  * ```
  * <TabList>
  * 	<TabHeader>
@@ -149,9 +149,9 @@ interface TabTriggerProps {
 	/** 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;
 }
 
 /**
@@ -165,4 +165,4 @@ declare function TabTrigger(
 	$slots?: Record<string, SlotRender>,
 ): void;
 
-export { TabContent, TabGroup, TabHeader, TabList, TabTrigger };
+export { TabContent, TabGroup, TabHeader, TabList, TabTrigger };

package/dist/TabGroup/index.js

@@ -1,22 +1,6 @@
-// src/TabGroup/TabContent.torp
-import TabContent_default from "./TabContent.torp";
-
-// src/TabGroup/TabGroup.torp
-import TabGroup_default from "./TabGroup.torp";
-
-// src/TabGroup/TabHeader.torp
-import TabHeader_default from "./TabHeader.torp";
-
-// src/TabGroup/TabList.torp
-import TabList_default from "./TabList.torp";
-
-// src/TabGroup/TabTrigger.torp
-import TabTrigger_default from "./TabTrigger.torp";
-export {
-  TabContent_default as TabContent,
-  TabGroup_default as TabGroup,
-  TabHeader_default as TabHeader,
-  TabList_default as TabList,
-  TabTrigger_default as TabTrigger
-};
-//# sourceMappingURL=index.js.map
+import TabContent from "./TabContent.torp";
+import TabGroup from "./TabGroup.torp";
+import TabHeader from "./TabHeader.torp";
+import TabList from "./TabList.torp";
+import TabTrigger from "./TabTrigger.torp";
+export { TabContent, TabGroup, TabHeader, TabList, TabTrigger };