@torpor/ui 0.3.5 → 0.3.7

package/src/Form/Label.torp

@@ -1,35 +0,0 @@
-import type { ClassValue, StyleValue } from "@torpor/view";
-import { FieldContextName, type FieldContext } from "./FormTypes";
-
-interface LabelProps {
-	/** An ID for the root element */
-	id?: string;
-	/** Classes for the root element */
-	class?: ClassValue,
-	/** Styles for the root element */
-	style?: StyleValue,
-}
-
-/**
- * A label to describe the contents of an input in a form.
- */
-export default function Label($props: LabelProps | undefined) {
-	// Get stuff out of the FieldContext
-	const context = $context[FieldContextName] as FieldContext;
-	if (!context) {
-		throw new Error("Label must be contained within a Field");
-	}
-	let { state: $state } = context;
-
-	@render {
-		<label
-			{$props?.id}
-			class={["torp-label", $props?.class]}
-			{$props?.style}
-			for={$state.inputId}
-			data-valid={$state.valid ? "valid" : "invalid"}
-		>
-			<slot />
-		</label>
-	}
-}

package/src/Form/Message.torp

@@ -1,39 +0,0 @@
-import type { ClassValue, StyleValue } from "@torpor/view";
-import { FieldContextName, type FieldContext } from "./FormTypes";
-
-interface MessageProps {
-	/** An ID for the root element */
-	id?: string;
-	/** Classes for the root element */
-	class?: ClassValue,
-	/** Styles for the root element */
-	style?: StyleValue,
-}
-
-/**
- * A validation message to show when the contents of an input component have
- * problems that need to be fixed.
- */
-export default function Message($props: MessageProps | undefined) {
-	// Get stuff out of the FieldContext
-	const context = $context[FieldContextName] as FieldContext;
-	if (!context) {
-		throw new Error("Message must be contained within a Field");
-	}
-	const { state: $state } = context;
-
-	@render {
-		@if ($state.message) {
-			<div 
-				{$props?.id}
-				class={["torp-message", $props?.class]}
-				{$props?.style}
-				data-valid={$state.valid ? "valid" : "invalid"}
-			>
-				<slot name="message">
-					{$state.message}
-				</slot>
-			</div>
-		}
-	}
-}

package/src/Form/Option.torp

@@ -1,28 +0,0 @@
-import type { ClassValue, StyleValue } from "@torpor/view";
-import getId from "../utils/getId";
-import { FormContextName, FieldContextName, type FormContext, type FieldContext } from "./FormTypes";
-
-interface OptionProps {
-	/** An ID for the root element */
-	id?: string;
-	/** Classes for the root element */
-	class?: ClassValue,
-	/** Styles for the root element */
-	style?: StyleValue,
-	/** The data value that this option has */
-	value?: any,
-};
-
-/**
- * An option in a select.
- */
-export default function Option($props: OptionProps | undefined) {
-	@render {
-		<option
-			{$props?.id}
-			class={["torp-option", $props?.class]}
-			{$props?.style}
-			&value={$props.value}
-		/>
-	}
-}

package/src/Form/Select.torp

@@ -1,101 +0,0 @@
-import type { ClassValue, StyleValue } from "@torpor/view";
-import getId from "../utils/getId";
-import { FormContextName, FieldContextName, type FormContext, type FieldContext } from "./FormTypes";
-
-interface SelectProps {
-	/** An ID for the root element */
-	id?: string;
-	/** Classes for the root element */
-	class?: ClassValue,
-	/** Styles for the root element */
-	style?: StyleValue,
-	/** The name of the input's form data field */
-	name?: string,
-	/** The data value that this field is bound to */
-	value?: any,
-	/** Text to display when the input value is empty */
-	placeholder?: string,
-	/** Whether the input should be readonly */
-	readonly?: boolean,
-	/** An ARIA label for describing the input to screen readers when there is no associated label element */
-	ariaLabel?: string,
-	/** Raised on change */
-	onchange?: (e: Event) => void,
-	/** Raised on input */
-	oninput?: (e: Event) => void,
-};
-
-/**
- * A select in a form.
- */
-export default function Select($props: SelectProps | undefined) {
-	let defaultId = getId();
-
-	let name = $props?.name
-
-	let blurred = false;
-
-	// Get stuff out of the FormContext and FieldContext
-	const formContext = $context[FormContextName] as FormContext;
-	const fieldContext = $context[FieldContextName] as FieldContext;
-	if (fieldContext) {
-		name ??= fieldContext.name;
-	}
-
-	// Use the FieldContext's state, or create a new one
-	let $state = fieldContext?.state ?? $watch({
-		inputId: $props?.id ?? defaultId,
-		value: $props?.value,
-		errors: {} as Record<string, string>,
-		valid: false,
-		message: "",
-	});
-
-	// Binding
-	$run(() => {
-		if ($props !== undefined) {
-			$props.value = $state.value;
-		}
-	});
-
-	// Set the input ID now that we know it and it will get linked with the associated label
-	$state.inputId = $props?.id ?? defaultId;
-
-	function handleInput(e: Event & { currentTarget: EventTarget & HTMLInputElement }) {
-		if (formContext) {
-			formContext.validate();
-		}
-		if (fieldContext && blurred) {
-			fieldContext.validate();
-		}
-		if ($props?.oninput) {
-			$props.oninput(e);
-		}
-	}
-
-	function handleBlur() {
-		if (fieldContext) {
-			fieldContext.validate();
-		}
-		blurred = true;
-	}
-
-	@render {
-		<select
-			id={$props?.id ?? defaultId}
-			class={["torp-select", $props?.class]}
-			{$props?.style}
-			{name}
-			&value={$state.value}
-			{$props?.placeholder}
-			{$props?.readonly}
-			aria-label={$props?.ariaLabel}
-			data-valid={$state.valid ? "valid" : "invalid"}
-			onchange={$props?.onchange}
-			oninput={handleInput}
-			onblur={handleBlur}
-		>
-			<slot />
-		</select>
-	}
-}

package/src/Form/StandardSchemaV1.ts

@@ -1,70 +0,0 @@
-// From https://github.com/standard-schema/standard-schema
-
-/** The Standard Schema interface. */
-export interface StandardSchemaV1<Input = unknown, Output = Input> {
-	/** The Standard Schema properties. */
-	readonly "~standard": StandardSchemaV1.Props<Input, Output>;
-}
-
-export declare namespace StandardSchemaV1 {
-	/** The Standard Schema properties interface. */
-	export interface Props<Input = unknown, Output = Input> {
-		/** The version number of the standard. */
-		readonly version: 1;
-		/** The vendor name of the schema library. */
-		readonly vendor: string;
-		/** Validates unknown input values. */
-		readonly validate: (value: unknown) => Result<Output> | Promise<Result<Output>>;
-		/** Inferred types associated with the schema. */
-		readonly types?: Types<Input, Output> | undefined;
-	}
-
-	/** The result interface of the validate function. */
-	export type Result<Output> = SuccessResult<Output> | FailureResult;
-
-	/** The result interface if validation succeeds. */
-	export interface SuccessResult<Output> {
-		/** The typed output value. */
-		readonly value: Output;
-		/** The non-existent issues. */
-		readonly issues?: undefined;
-	}
-
-	/** The result interface if validation fails. */
-	export interface FailureResult {
-		/** The issues of failed validation. */
-		readonly issues: ReadonlyArray<Issue>;
-	}
-
-	/** The issue interface of the failure output. */
-	export interface Issue {
-		/** The error message of the issue. */
-		readonly message: string;
-		/** The path of the issue, if any. */
-		readonly path?: ReadonlyArray<PropertyKey | PathSegment> | undefined;
-	}
-
-	/** The path segment interface of the issue. */
-	export interface PathSegment {
-		/** The key representing a path segment. */
-		readonly key: PropertyKey;
-	}
-
-	/** The Standard Schema types interface. */
-	export interface Types<Input = unknown, Output = Input> {
-		/** The input type of the schema. */
-		readonly input: Input;
-		/** The output type of the schema. */
-		readonly output: Output;
-	}
-
-	/** Infers the input type of a Standard Schema. */
-	export type InferInput<Schema extends StandardSchemaV1> = NonNullable<
-		Schema["~standard"]["types"]
-	>["input"];
-
-	/** Infers the output type of a Standard Schema. */
-	export type InferOutput<Schema extends StandardSchemaV1> = NonNullable<
-		Schema["~standard"]["types"]
-	>["output"];
-}

package/src/Form/TextArea.torp

@@ -1,105 +0,0 @@
-import type { ClassValue, StyleValue } from "@torpor/view";
-import getId from "../utils/getId";
-import { FormContextName, FieldContextName, type FormContext, type FieldContext } from "./FormTypes";
-
-interface TextAreaProps {
-	/** An ID for the root element */
-	id?: string;
-	/** Classes for the root element */
-	class?: ClassValue,
-	/** Styles for the root element */
-	style?: StyleValue,
-	/** The name of the input's form data field */
-	name?: string,
-	/** The data value that this field is bound to */
-	value?: any,
-	/** The number of rows to show in the input */
-	rows?: number,
-	/** Text to display when the input's value is empty */
-	placeholder?: string,
-	/** Whether the input should be readonly */
-	readonly?: boolean,
-	/** The maximum number of characters allowed for the input value */
-	maxlength?: number,
-	/** An ARIA label for describing the input to screen readers when there is no associated label element */
-	ariaLabel?: string,
-	/** Raised on change */
-	onchange?: (e: Event) => void,
-	/** Raised on input */
-	oninput?: (e: Event) => void,
-};
-
-/**
- * A standard input in a form.
- */
-export default function TextArea($props: TextAreaProps | undefined) {
-	let defaultId = getId();
-
-	let name = $props?.name
-
-	let blurred = false;
-
-	// Get stuff out of the FormContext and FieldContext
-	const formContext = $context[FormContextName] as FormContext;
-	const fieldContext = $context[FieldContextName] as FieldContext;
-	if (fieldContext) {
-		name ??= fieldContext.name;
-	}
-
-	// Use the FieldContext's state, or create a new one
-	let $state = fieldContext?.state ?? $watch({
-		inputId: $props?.id ?? defaultId,
-		value: $props?.value,
-		errors: {} as Record<string, string>,
-		valid: false,
-		message: "",
-	});
-
-	// Binding
-	$run(() => {
-		if ($props !== undefined) {
-			$props.value = $state.value;
-		}
-	});
-
-	// Set the input ID now that we know it and it will get linked with the associated label
-	$state.inputId = $props?.id ?? defaultId;
-
-	function handleInput(e: Event) {
-		if (formContext) {
-			formContext.validate();
-		}
-		if (fieldContext && blurred) {
-			fieldContext.validate();
-		}
-		if ($props?.oninput) {
-			$props.oninput(e);
-		}
-	}
-
-	function handleBlur() {
-		if (fieldContext) {
-			fieldContext.validate();
-		}
-		blurred = true;
-	}
-
-	@render {
-		<textarea
-			id={$props?.id ?? defaultId}
-			class={["torp-text-area", $props?.class]}
-			{$props?.style}
-			{name}
-			&value={$state.value}
-			{$props?.rows}
-			{$props?.placeholder}
-			{$props?.readonly}
-			{$props?.maxlength}
-			aria-label={$props?.ariaLabel}
-			data-valid={$state.valid ? "valid" : "invalid"}
-			onchange={$props?.onchange}
-			oninput={handleInput}
-			onblur={handleBlur}
-		/>
-	}
-}

package/src/Form/index.ts

@@ -1,13 +0,0 @@
-import CheckBox from "./CheckBox.torp";
-import Field from "./Field.torp";
-import File from "./File.torp";
-import Form from "./Form.torp";
-import Hidden from "./Hidden.torp";
-import Input from "./Input.torp";
-import Label from "./Label.torp";
-import Message from "./Message.torp";
-import Option from "./Option.torp";
-import Select from "./Select.torp";
-import TextArea from "./TextArea.torp";
-
-export { CheckBox, Field, File, Form, Hidden, Input, Label, Message, Option, Select, TextArea };

package/src/Menu/Menu.torp

@@ -1,174 +0,0 @@
-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 {
-	MenuContextName,
-	type MenuContext,
-	type ItemState,
-	MenuPopoutContextName,
-	type MenuPopoutContext
-} from "./MenuTypes";
-
-interface MenuProps {
-	/** 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,
-}
-
-/**
- * A list of choices for the user, such as a set of actions or functions. A
- * menu is usually hidden until made visible by the user.
- *
- * See [the WAI ARIA guidelines for Menus](https://www.w3.org/WAI/ARIA/apg/patterns/menu/).
- *
- * The structure of a Menu is:
- *
- * ```
- * <Menu>
- * 	<MenuButton />
- * 	<MenuSeparator /> (optional)
- * 	<MenuGroup> (optional)
- * 		<MenuButton />
- * 	</MenuGroup>
- * </Menu>
- * ```
- */
-export default function Menu($props: MenuProps | undefined) {
-	// A collection containing the state and some functions for each item
-	let itemStates: ItemState[] = [];
-	let focusIndex = -1;
-
-	// 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 { setVisible, handleButton, visible } = popoverContext;
-
-	// Check whether this is a menu in a popout
-	const popoutContext = $context[MenuPopoutContextName] as MenuPopoutContext;
-	const inPopout = !!popoutContext;
-	const setPopoutVisible = popoutContext?.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;
-	}
-
-	// Set the context to pass down to items
-	let context: MenuContext = {
-		setVisible,
-		handleButton,
-		handleItemFocus,
-		handleItemKey,
-		visible,
-		registerItem
-	};
-	$context[MenuContextName] = context;
-
-	function focusFirstElement() {
-		if (itemStates.length) {
-			itemStates[0].setFocused();
-		}
-	}
-
-	function registerItem(setFocused: () => void) {
-		// Add the item's state to the array and return its index
-		const newItemState: ItemState = {
-			setFocused
-		};
-		itemStates.push(newItemState);
-		itemStates = itemStates;
-		return { index: itemStates.length - 1 };
-	}
-
-	function handleItemFocus(index: number) {
-		focusIndex = index;
-	}
-
-	function handleItemKey(e: KeyboardEvent) {
-		switch (e.key) {
-			case "Esc":
-			case "Escape": {
-				e.preventDefault();
-				setVisible(false);
-				break;
-			}
-			case "Down":
-			case "ArrowDown": {
-				e.preventDefault();
-				focusItem("next");
-				break;
-			}
-			case "Up":
-			case "ArrowUp": {
-				e.preventDefault();
-				focusItem("previous");
-				break;
-			}
-			case "Left":
-			case "ArrowLeft": {
-				// TODO: This should be based on what side the menu shows on
-				if (inPopout) {
-					e.preventDefault();
-					setPopoutVisible(false);
-				}
-				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", $props?.class]}
-			{$props?.style}
-			tabindex="-1"
-			role="menu"
-			aria-label={$props?.ariaLabel}
-			aria-orientation="vertical"
-		>
-			<slot />
-		</div>
-	}
-}

package/src/Menu/MenuButton.torp

@@ -1,74 +0,0 @@
-import type { ClassValue, StyleValue } from "@torpor/view";
-import { MenuContextName, type MenuContext } from "./MenuTypes";
-
-interface MenuButtonProps {
-	/** An ID for the root element */
-	id?: string;
-	/** Classes for the root element */
-	class?: ClassValue,
-	/** Styles for the root element */
-	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,
-	/** Whether this button is disabled */
-	disabled?: boolean,
-	/** Raised when the button is clicked */
-	onclick?: (e: MouseEvent) => void,
-	/** Raised when a key is pressed down */
-	onkeydown?: (e: KeyboardEvent) => void,
-}
-
-/**
- * A button that is placed in a Menu or MenuGroup and signals a response by a user.
- *
- */
-export default function MenuButton($props: MenuButtonProps | undefined) {
-	let button: HTMLButtonElement;
-
-	// Get stuff out of the MenuContext
-	const menuContext = $context[MenuContextName] as MenuContext;
-	if (!menuContext) {
-		throw new Error("MenuButton must be contained within a Menu");
-	}
-	const { registerItem, handleButton, handleItemKey, handleItemFocus } = menuContext;
-
-	// Register this item with the parent Menu and store the index
-	const { index } = registerItem(setFocused);
-
-	function handleKeyDown(e: KeyboardEvent) {
-		handleItemKey(e);
-		if ($props?.onkeydown) {
-			$props.onkeydown(e);
-		}
-	}
-
-	function handleClick(e: MouseEvent) {
-		handleButton($props?.value);
-		if ($props?.onclick) {
-			$props.onclick(e);
-		}
-	}
-
-	function setFocused() {
-		button.focus();
-	}
-
-	@render {
-		<button
-			{$props?.id}
-			class={["torp-menu-button", $props?.class]}
-			{$props?.style}
-			type="button"
-			{$props?.disabled}
-			role="menuitem"
-			aria-disabled={$props?.disabled ? "true" : undefined}
-			data-disabled={$props?.disabled ? "true" : undefined}
-			onkeydown={handleKeyDown}
-			onclick={handleClick}
-			onfocus={() => handleItemFocus(index)}
-			&ref={button}
-		>
-			<slot />
-		</button>
-	}
-}