@torpor/ui 0.4.0 → 1.0.0

package/dist/Drawer/index.d.ts

@@ -5,30 +5,24 @@ interface DrawerProps {
 	/** 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 drawer is modal. If true, an overlay should be supplied to obscure outside content, and only the drawer content will be visible to screen readers  */
-	modal?: boolean,
+	modal?: boolean;
 	/** Whether the drawer is visible  */
-	visible?: boolean,
+	visible: Bindable<boolean | undefined>;
 	/** Which side of the window to show the drawer from */
-	position?: "left" | "right" | "top" | "bottom",
-	/** A function to be called when the user selects a response */
-	callback?: ((value: any) => void),
-	/** Raised when the drawer is opened or closed */
-	ontoggle?: (open: boolean) => void,
+	position?: "left" | "right" | "top" | "bottom";
 	/** Raised when the drawer has opened */
-	onopen?: () => void,
+	onopen?: () => void;
 	/** Raised when the drawer has closed */
-	onclose?: (result: any) => void,
+	onclose?: (result: any) => void;
 }
 
 /**
  * A drawer that can be used to show rich content or obtain information from a user.
  *
- * See [the WAI ARIA guidelines for Dialogs](https://www.w3.org/WAI/ARIA/apg/patterns/dialogmodal/).
- *
  * The structure of a Drawer is:
  *
  * ```
@@ -52,9 +46,11 @@ interface DrawerContentProps {
 	/** 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 drawer to screen readers */
+	ariaLabel?: string;
 }
 
 /**
@@ -74,9 +70,9 @@ interface DrawerOverlayProps {
 	/** 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;
 }
 
 /**
@@ -97,9 +93,9 @@ interface DrawerTriggerProps {
 	/** 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;
 }
 
 /**
@@ -113,4 +109,4 @@ declare function DrawerTrigger(
 	$slots?: Record<string, SlotRender>,
 ): void;
 
-export { Drawer, DrawerContent, DrawerOverlay, DrawerTrigger };
+export { Drawer, DrawerContent, DrawerOverlay, DrawerTrigger };

package/dist/Drawer/index.js

@@ -1,18 +1,5 @@
-// src/Drawer/Drawer.torp
-import Drawer_default from "./Drawer.torp";
-
-// src/Drawer/DrawerContent.torp
-import DrawerContent_default from "./DrawerContent.torp";
-
-// src/Drawer/DrawerOverlay.torp
-import DrawerOverlay_default from "./DrawerOverlay.torp";
-
-// src/Drawer/DrawerTrigger.torp
-import DrawerTrigger_default from "./DrawerTrigger.torp";
-export {
-  Drawer_default as Drawer,
-  DrawerContent_default as DrawerContent,
-  DrawerOverlay_default as DrawerOverlay,
-  DrawerTrigger_default as DrawerTrigger
-};
-//# sourceMappingURL=index.js.map
+import Drawer from "./Drawer.torp";
+import DrawerContent from "./DrawerContent.torp";
+import DrawerOverlay from "./DrawerOverlay.torp";
+import DrawerTrigger from "./DrawerTrigger.torp";
+export { Drawer, DrawerContent, DrawerOverlay, DrawerTrigger };

package/dist/FocusGroup/FocusGroup.torp

@@ -0,0 +1,70 @@
+import type { ClassValue, StyleValue } from "@torpor/view";
+import { createFocusGroup } from "../utils/focusGroup";
+import {
+	type FocusGroupContext,
+	FocusGroupContextName,
+} from "./FocusGroupTypes";
+
+interface FocusGroupProps {
+	/** An ID for the root element */
+	id?: string;
+	/** Classes for the root element */
+	class?: ClassValue;
+	/** Styles for the root element */
+	style?: StyleValue;
+	/**
+	 * The orientation of the group, which affects which arrow keys move
+	 * within it (default "horizontal")
+	 */
+	orientation?: "horizontal" | "vertical";
+	/** An accessible name for the group */
+	ariaLabel?: string;
+}
+
+/**
+ * A group of buttons (or any focusable elements) that behaves as a single
+ * tab stop: tabbing into the group lands on one item, and the arrow keys
+ * move focus between items -- Home and End jump to the ends. Disabled items
+ * are skipped.
+ *
+ * Wrap any set of controls in it:
+ *
+ * ```
+ * <FocusGroup ariaLabel="Text options">
+ * 	<FocusGroupButton onclick={bold}>Bold</FocusGroupButton>
+ * 	<FocusGroupButton onclick={italic}>Italic</FocusGroupButton>
+ * </FocusGroup>
+ * ```
+ *
+ * Use ToolBar instead when the group needs popouts or separators; use
+ * SegmentedControl when exactly one item must be active.
+ */
+export default function FocusGroup($props?: FocusGroupProps) {
+	const orientation = $props?.orientation ?? "horizontal";
+	const group = createFocusGroup();
+
+	const context: FocusGroupContext = {
+		registerItem: (item) => group.registerItem(item),
+		removeItem: (index) => group.removeItem(index),
+		handleItemFocus: (index) => group.handleItemFocus(index),
+		handleItemKey: (e) => {
+			group.handleGroupKey(group.getFocusIndex(), e, {
+				vertical: orientation === "vertical",
+			});
+		},
+		isTabStop: (index) => group.isTabStop(index),
+	};
+	$context[FocusGroupContextName] = context;
+
+	@render {
+		<div
+			{$props?.id}
+			class={["torp-focus-group", $props?.class]}
+			{$props?.style}
+			role="group"
+			aria-label={$props?.ariaLabel}
+		>
+			<slot />
+		</div>
+	}
+}

package/dist/FocusGroup/FocusGroupButton.torp

@@ -0,0 +1,59 @@
+import type { ClassValue, StyleValue } from "@torpor/view";
+import {
+	type FocusGroupContext,
+	FocusGroupContextName,
+} from "./FocusGroupTypes";
+
+interface FocusGroupButtonProps {
+	/** 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;
+	/** Raised when the button is clicked */
+	onclick?: (e: MouseEvent) => void;
+}
+
+/**
+ * A button inside a FocusGroup. The group's tab stop roves with focus:
+ * it starts on the first button and lands wherever focus last rested.
+ */
+export default function FocusGroupButton($props?: FocusGroupButtonProps) {
+	let button: HTMLButtonElement;
+
+	const context = $context[FocusGroupContextName] as FocusGroupContext;
+	if (!context) {
+		throw new Error("FocusGroupButton must be contained within a FocusGroup");
+	}
+
+	function setFocused() {
+		button.focus();
+	}
+
+	const { index } = context.registerItem({ setFocused, disabled: $props?.disabled });
+
+	$run(() => {
+		return () => context.removeItem(index);
+	});
+
+	@render {
+		<button
+			{$props?.id}
+			class={["torp-focus-group-button", $props?.class]}
+			{$props?.style}
+			type="button"
+			tabindex={context.isTabStop(index) ? 0 : -1}
+			{$props?.disabled}
+			aria-disabled={$props?.disabled ? "true" : undefined}
+			onclick={$props?.onclick}
+			onkeydown={(e: KeyboardEvent) => context.handleItemKey(e)}
+			onfocus={() => context.handleItemFocus(index)}
+			&ref={button}
+		>
+			<slot />
+		</button>
+	}
+}

package/dist/FocusGroup/FocusGroupTypes.ts

@@ -0,0 +1,14 @@
+import type { FocusItemState } from "../utils/focusGroup";
+
+export const FocusGroupContextName: unique symbol = Symbol.for("torp.FocusGroupItem");
+
+export type { FocusItemState };
+
+export interface FocusGroupContext {
+	registerItem: (item: FocusItemState) => { index: number };
+	removeItem: (index: number) => void;
+	handleItemFocus: (index: number) => void;
+	handleItemKey: (e: KeyboardEvent) => void;
+	/** Whether item `index` is currently the group's single tab stop */
+	isTabStop: (index: number) => boolean;
+}

package/dist/FocusGroup/index.d.ts

@@ -0,0 +1,44 @@
+import { type SlotRender } from "@torpor/view";
+
+
+/**
+ * A group of buttons (or any focusable elements) that behaves as a single
+ * tab stop: tabbing into the group lands on one item, and the arrow keys
+ * move focus between items -- Home and End jump to the ends. Disabled items
+ * are skipped.
+ *
+ * Wrap any set of controls in it:
+ *
+ * ```
+ * <FocusGroup ariaLabel="Text options">
+ * 	<FocusGroupButton onclick={bold}>Bold</FocusGroupButton>
+ * 	<FocusGroupButton onclick={italic}>Italic</FocusGroupButton>
+ * </FocusGroup>
+ * ```
+ *
+ * Use ToolBar instead when the group needs popouts or separators; use
+ * SegmentedControl when exactly one item must be active.
+ */
+declare function FocusGroup(
+	$parent: ParentNode,
+	$anchor: Node | null,
+	$props?: FocusGroupProps,
+	$context?: Record<PropertyKey, any>,
+	$slots?: Record<string, SlotRender>,
+): void;
+
+
+
+/**
+ * A button inside a FocusGroup. The group's tab stop roves with focus:
+ * it starts on the first button and lands wherever focus last rested.
+ */
+declare function FocusGroupButton(
+	$parent: ParentNode,
+	$anchor: Node | null,
+	$props?: FocusGroupButtonProps,
+	$context?: Record<PropertyKey, any>,
+	$slots?: Record<string, SlotRender>,
+): void;
+
+export { FocusGroup, FocusGroupButton };

package/dist/FocusGroup/index.js

@@ -0,0 +1,3 @@
+import FocusGroup from "./FocusGroup.torp";
+import FocusGroupButton from "./FocusGroupButton.torp";
+export { FocusGroup, FocusGroupButton };

package/dist/Form/CheckBox.torp

@@ -1,25 +1,30 @@
 import type { ClassValue, StyleValue } from "@torpor/view";
 import getId from "../utils/getId";
-import { FormContextName, FieldContextName, type FormContext, type FieldContext } from "./FormTypes";
+import {
+	type FieldContext,
+	FieldContextName,
+	type FormContext,
+	FormContextName,
+} from "./FormTypes";
 
 interface CheckBoxProps {
 	/** 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 name of the checkbox's form data field */
-	name?: string,
+	name?: string;
 	/** Whether the checkbox is checked */
-	checked?: boolean,
+	checked?: boolean;
 	/** An ARIA label for describing the checkbox to screen readers when there is no associated label element */
-	ariaLabel?: string,
+	ariaLabel?: string;
 	/** Raised on change */
-	onchange?: (e: Event) => void,
+	onchange?: (e: Event) => void;
 	/** Raised on input */
-	oninput?: (e: Event) => void,
-};
+	oninput?: (e: Event) => void;
+}
 
 /**
  * A checkbox input in a form.
@@ -27,7 +32,7 @@ interface CheckBoxProps {
 export default function CheckBox($props: CheckBoxProps | undefined) {
 	let defaultId = getId();
 
-	let name = $props?.name
+	let name = $props?.name;
 
 	let blurred = false;
 
@@ -39,13 +44,15 @@ export default function CheckBox($props: CheckBoxProps | undefined) {
 	}
 
 	// Use the FieldContext's state, or create a new one
-	let $state = fieldContext?.state ?? $watch({
-		inputId: $props?.id ?? defaultId,
-		value: $props?.checked,
-		errors: {} as Record<string, string>,
-		valid: false,
-		message: "",
-	});
+	let $state =
+		fieldContext?.state ??
+		$watch({
+			inputId: $props?.id ?? defaultId,
+			value: $props?.checked,
+			errors: {} as Record<string, string>,
+			valid: false,
+			message: "",
+		});
 
 	// Binding
 	$run(() => {
@@ -85,7 +92,9 @@ export default function CheckBox($props: CheckBoxProps | undefined) {
 			&checked={$state.value}
 			aria-label={$props?.ariaLabel}
 			data-valid={$state.valid ? "valid" : "invalid"}
-			onchange={$props?.onchange}
+			aria-describedby={$state.messageId}
+			aria-invalid={fieldContext && !$state.valid ? "true" : undefined}
+			{$props?.onchange}
 			oninput={handleInput}
 			onblur={handleBlur}
 		/>

package/dist/Form/Field.torp

@@ -1,27 +1,27 @@
-import type { ClassValue, StyleValue } from "@torpor/view";
+import type { Bindable, ClassValue, StyleValue } from "@torpor/view";
 import {
-	FormContextName,
+	type FieldContext,
 	FieldContextName,
-	type ValidationIssue,
 	type FormContext,
-	type FieldContext,
+	FormContextName,
+	type ValidationIssue,
 } from "./FormTypes";
-import { StandardSchemaV1 } from "./StandardSchemaV1"
+import { StandardSchemaV1 } from "./StandardSchemaV1";
 
 interface FieldProps {
 	/** 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 name of the data that this field contains */
-	name: string,
+	name: string;
 	/** The data value that this field is bound to */
-	value?: any,
+	value: Bindable<any>;
 	/** The schema validator to use for this form */
-	schema?: StandardSchemaV1,
-};
+	schema?: StandardSchemaV1;
+}
 
 /**
  * A field in a form which automatically links up a Label and/or an input
@@ -36,14 +36,14 @@ export default function Field($props: FieldProps) {
 			return this.issues.find((i) => i.path === $props.name) === undefined;
 		},
 		get message() {
-			return this.issues.filter((i) => i.path === $props.name).map((i) => i.message).join("\n");
+			return this.issues
+				.filter((i) => i.path === $props.name)
+				.map((i) => i.message)
+				.join("\n");
 		},
 	});
 
-	// Binding
-	$run(() => {
-		$props.value = $state.value;
-	});
+	$bind($state, $props, "value");
 
 	// Get stuff out of the FormContext, if applicable
 	const formContext = $context[FormContextName] as FormContext;
@@ -57,7 +57,7 @@ export default function Field($props: FieldProps) {
 	let context: FieldContext = {
 		name: $props.name,
 		state: $state,
-		validate: handleValidate
+		validate: handleValidate,
 	};
 	$context[FieldContextName] = context;
 

package/dist/Form/File.torp

@@ -1,31 +1,36 @@
 import type { ClassValue, StyleValue } from "@torpor/view";
 import getId from "../utils/getId";
-import { FormContextName, FieldContextName, type FormContext, type FieldContext } from "./FormTypes";
+import {
+	type FieldContext,
+	FieldContextName,
+	type FormContext,
+	FormContextName,
+} from "./FormTypes";
 
 interface FileProps {
 	/** 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 name of the input's form data field */
-	name?: string,
+	name?: string;
 	/** The type of files that this input accepts e.g. `image/*` */
-	accept?: string,
+	accept?: string;
 	/** Text to display when the input value is empty */
-	placeholder?: string,
+	placeholder?: string;
 	/** Whether the input should be readonly */
-	readonly?: boolean,
+	readonly?: boolean;
 	/** The maximum number of characters allowed for the input value */
-	maxlength?: number,
+	maxlength?: number;
 	/** An ARIA label for describing the input to screen readers when there is no associated label element */
-	ariaLabel?: string,
+	ariaLabel?: string;
 	/** Raised on change */
-	onchange?: (e: Event) => void,
+	onchange?: (e: Event) => void;
 	/** Raised on input */
-	oninput?: (e: Event) => void,
-};
+	oninput?: (e: Event) => void;
+}
 
 /**
  * A file input in a form.
@@ -33,7 +38,7 @@ interface FileProps {
 export default function File($props: FileProps | undefined) {
 	let defaultId = getId();
 
-	let name = $props?.name
+	let name = $props?.name;
 
 	let blurred = false;
 
@@ -50,14 +55,16 @@ export default function File($props: FileProps | undefined) {
 	}
 
 	// Use the FieldContext's state, or create a new one
-	let $state = fieldContext?.state ?? $watch({
-		inputId: $props?.id ?? defaultId,
-		// You can't use value with a file input
-		value: null,
-		errors: {} as Record<string, string>,
-		valid: false,
-		message: "",
-	});
+	let $state =
+		fieldContext?.state ??
+		$watch({
+			inputId: $props?.id ?? defaultId,
+			// You can't use value with a file input
+			value: null,
+			errors: {} as Record<string, string>,
+			valid: false,
+			message: "",
+		});
 
 	// Set the input ID now that we know it and it will get linked with the associated label
 	$state.inputId = $props?.id ?? defaultId;
@@ -94,7 +101,9 @@ export default function File($props: FileProps | undefined) {
 			{$props?.maxlength}
 			aria-label={$props?.ariaLabel}
 			data-valid={$state.valid ? "valid" : "invalid"}
-			onchange={$props?.onchange}
+			aria-describedby={$state.messageId}
+			aria-invalid={fieldContext && !$state.valid ? "true" : undefined}
+			{$props?.onchange}
 			oninput={handleInput}
 			onblur={handleBlur}
 		/>