@torpor/ui 0.2.1 → 0.3.1

package/dist/Form/Select.torp

@@ -0,0 +1,97 @@
+import getId from "../utils/getId";
+import { FormContextName, FieldContextName, type FormContext, type FieldContext } from "./FormTypes";
+
+interface SelectProps {
+	/** An ID for the root element */
+	id?: string;
+	/** Class name(s) for the root element */
+	class?: string,
+	/** 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 ?? ""}`.trim()}
+			{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/dist/Form/TextArea.torp

@@ -0,0 +1,101 @@
+import getId from "../utils/getId";
+import { FormContextName, FieldContextName, type FormContext, type FieldContext } from "./FormTypes";
+
+interface TextAreaProps {
+	/** An ID for the root element */
+	id?: string;
+	/** Class name(s) for the root element */
+	class?: string,
+	/** 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 {
+		<input
+			id={$props?.id ?? defaultId}
+			class={`torp-text-area ${$props?.class ?? ""}`.trim()}
+			{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/dist/Form/index.d.ts

@@ -1,6 +1,36 @@
 import { type SlotRender } from "@torpor/view";
 
 
+interface CheckBoxProps {
+	/** An ID for the root element */
+	id?: string;
+	/** Class name(s) for the root element */
+	class?: string,
+	/** The name of the checkbox's form data field */
+	name?: string,
+	/** Whether the checkbox is checked */
+	checked?: boolean,
+	/** An ARIA label for describing the checkbox 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 checkbox input in a form.
+ */
+declare function CheckBox(
+	$parent: ParentNode,
+	$anchor: Node | null,
+	$props: CheckBoxProps | undefined,
+	$context?: Record<PropertyKey, any>,
+	$slots?: Record<string, SlotRender>,
+): void;
+
+
+
 interface FieldProps {
 	/** An ID for the root element */
 	id?: string;
@@ -28,6 +58,44 @@ declare function Field(
 
 
 
+interface FileProps {
+	/** An ID for the root element */
+	id?: string;
+	/** Class name(s) for the root element */
+	class?: string,
+	/** The name of the input's form data field */
+	name?: string,
+	/** The type of files that this input accepts e.g. `image/*` */
+	accepts?: 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,
+	/** 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 file input in a form.
+ */
+declare function Input(
+	$parent: ParentNode,
+	$anchor: Node | null,
+	$props: FileProps | undefined,
+	$context?: Record<PropertyKey, any>,
+	$slots?: Record<string, SlotRender>,
+): void;
+
+
+
 interface FormProps {
 	/** An ID for the root element */
 	id?: string;
@@ -37,6 +105,13 @@ interface FormProps {
 	data?: any,
 	/** Where to post the form's data **/
 	action?: string,
+	/** The action to use when submitting the form, which defaults to POST */
+	method?: string,
+	/**
+	 * The form's encoding type e.g. `multipart/form-data` where there are file
+	 * inputs. This will be automatically set unless overridden
+	 */
+	enctype?: string,
 	/** The schema validator to use for this form */
 	schema?: StandardSchemaV1,
 	onsubmit?: (e: SubmitEvent) => boolean | void | Promise<boolean | void>,
@@ -48,7 +123,7 @@ interface FormProps {
 declare function Form(
 	$parent: ParentNode,
 	$anchor: Node | null,
-	$props: FormProps,
+	$props: FormProps | undefined,
 	$context?: Record<PropertyKey, any>,
 	$slots?: Record<string, SlotRender>,
 ): void;
@@ -74,6 +149,10 @@ interface InputProps {
 	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,
 }
 
 /**
@@ -82,26 +161,40 @@ interface InputProps {
 declare function Input(
 	$parent: ParentNode,
 	$anchor: Node | null,
-	$props: InputProps,
+	$props: InputProps | undefined,
 	$context?: Record<PropertyKey, any>,
 	$slots?: Record<string, SlotRender>,
 ): void;
 
 
 
+interface LabelProps {
+	/** An ID for the root element */
+	id?: string;
+	/** Class name(s) for the root element */
+	class?: string,
+}
+
 /**
  * A label to describe the contents of an input in a form.
  */
 declare function Label(
 	$parent: ParentNode,
 	$anchor: Node | null,
-	$props?: LabelProps,
+	$props: LabelProps | undefined,
 	$context?: Record<PropertyKey, any>,
 	$slots?: Record<string, SlotRender>,
 ): void;
 
 
 
+interface MessageProps {
+	/** An ID for the root element */
+	id?: string;
+	/** Class name(s) for the root element */
+	class?: string,
+}
+
 /**
  * A validation message to show when the contents of an input component have
  * problems that need to be fixed.
@@ -109,9 +202,103 @@ declare function Label(
 declare function Message(
 	$parent: ParentNode,
 	$anchor: Node | null,
-	$props?: MessageProps,
+	$props: MessageProps | undefined,
+	$context?: Record<PropertyKey, any>,
+	$slots?: Record<string, SlotRender>,
+): void;
+
+
+
+interface OptionProps {
+	/** An ID for the root element */
+	id?: string;
+	/** Class name(s) for the root element */
+	class?: string,
+	/** The data value that this option has */
+	value?: any,
+}
+
+/**
+ * An option in a select.
+ */
+declare function Option(
+	$parent: ParentNode,
+	$anchor: Node | null,
+	$props: OptionProps | undefined,
+	$context?: Record<PropertyKey, any>,
+	$slots?: Record<string, SlotRender>,
+): void;
+
+
+
+interface SelectProps {
+	/** An ID for the root element */
+	id?: string;
+	/** Class name(s) for the root element */
+	class?: string,
+	/** 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.
+ */
+declare function Select(
+	$parent: ParentNode,
+	$anchor: Node | null,
+	$props: SelectProps | undefined,
+	$context?: Record<PropertyKey, any>,
+	$slots?: Record<string, SlotRender>,
+): void;
+
+
+
+interface TextAreaProps {
+	/** An ID for the root element */
+	id?: string;
+	/** Class name(s) for the root element */
+	class?: string,
+	/** 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.
+ */
+declare function TextArea(
+	$parent: ParentNode,
+	$anchor: Node | null,
+	$props: TextAreaProps | undefined,
 	$context?: Record<PropertyKey, any>,
 	$slots?: Record<string, SlotRender>,
 ): void;
 
-export { Field, Form, Input, Label, Message };
+export { CheckBox, Field, Input, Form, Input, Label, Message, Option, Select, TextArea };

package/dist/Form/index.js

@@ -1,6 +1,12 @@
+// src/Form/CheckBox.torp
+import CheckBox_default from "./CheckBox.torp";
+
 // src/Form/Field.torp
 import Field_default from "./Field.torp";
 
+// src/Form/File.torp
+import File_default from "./File.torp";
+
 // src/Form/Form.torp
 import Form_default from "./Form.torp";
 
@@ -12,11 +18,25 @@ import Label_default from "./Label.torp";
 
 // src/Form/Message.torp
 import Message_default from "./Message.torp";
+
+// src/Form/Option.torp
+import Option_default from "./Option.torp";
+
+// src/Form/Select.torp
+import Select_default from "./Select.torp";
+
+// src/Form/TextArea.torp
+import TextArea_default from "./TextArea.torp";
 export {
+  CheckBox_default as CheckBox,
   Field_default as Field,
+  File_default as File,
   Form_default as Form,
   Input_default as Input,
   Label_default as Label,
-  Message_default as Message
+  Message_default as Message,
+  Option_default as Option,
+  Select_default as Select,
+  TextArea_default as TextArea
 };
 //# sourceMappingURL=index.js.map

package/dist/Menu/Menu.torp

@@ -1,3 +1,5 @@
+import { ContextualContextName } from "../Contextual/ContextualTypes";
+import { ModalContextName } from "../Modal/ModalTypes";
 import { PopoverContextName, type PopoverContext } from "../Popover/PopoverTypes";
 import {
 	MenuContextName,
@@ -26,27 +28,26 @@ interface MenuProps {
  *
  * ```
  * <Menu>
- *     <MenuButton />
- *     <MenuSeparator /> (optional)
- *     <MenuGroup> (optional)
- *         <MenuButton />
- *     </MenuGroup>
+ * 	<MenuButton />
+ * 	<MenuSeparator /> (optional)
+ * 	<MenuGroup> (optional)
+ * 		<MenuButton />
+ * 	</MenuGroup>
  * </Menu>
  * ```
  */
-export default function Menu($props: MenuProps) {
-	$props ??= $watch({});
-
+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
-	const popoverContext = $context[PopoverContextName] as 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 Contextual, Prompt or Popover");
+		throw new Error("Menu must be contained within a Context, Modal or Popover");
 	}
-	const { setVisible, handleButton, modal, visible } = popoverContext;
+	const { setVisible, handleButton, visible } = popoverContext;
 
 	// Check whether this is a menu in a popout
 	const popoutContext = $context[MenuPopoutContextName] as MenuPopoutContext;
@@ -77,7 +78,7 @@ export default function Menu($props: MenuProps) {
 	}
 
 	function registerItem(setFocused: () => void) {
-		// Add the item"s state to the array and return its index
+		// Add the item's state to the array and return its index
 		const newItemState: ItemState = {
 			setFocused
 		};
@@ -156,11 +157,11 @@ export default function Menu($props: MenuProps) {
 
 	@render {
 		<div
-			{$props.id}
-			class={`torp-menu ${$props.class ?? ""}`.trim()}
+			{$props?.id}
+			class={`torp-menu ${$props?.class ?? ""}`.trim()}
 			tabindex="-1"
 			role="menu"
-			aria-label={$props.ariaLabel}
+			aria-label={$props?.ariaLabel}
 			aria-orientation="vertical"
 		>
 			<slot />

package/dist/Menu/MenuButton.torp

@@ -9,15 +9,17 @@ interface MenuButtonProps {
 	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) {
-	$props ??= $watch({});
-
+export default function MenuButton($props: MenuButtonProps | undefined) {
 	let button: HTMLButtonElement;
 
 	// Get stuff out of the MenuContext
@@ -30,14 +32,18 @@ export default function MenuButton($props: MenuButtonProps) {
 	// Register this item with the parent Menu and store the index
 	const { index } = registerItem(setFocused);
 
-	function handleKeyDown(e) {
+	function handleKeyDown(e: KeyboardEvent) {
 		handleItemKey(e);
-		if ($props.onkeydown) $props.onkeydown(e);
+		if ($props?.onkeydown) {
+			$props.onkeydown(e);
+		}
 	}
 
-	function handleClick(e) {
-		handleButton($props.value);
-		if ($props.onclick) $props.onclick(e);
+	function handleClick(e: MouseEvent) {
+		handleButton($props?.value);
+		if ($props?.onclick) {
+			$props.onclick(e);
+		}
 	}
 
 	function setFocused() {
@@ -46,13 +52,13 @@ export default function MenuButton($props: MenuButtonProps) {
 
 	@render {
 		<button
-			{$props.id}
-			class={`torp-menu-button ${$props.class ?? ""}`.trim()}
+			{$props?.id}
+			class={`torp-menu-button ${$props?.class ?? ""}`.trim()}
 			type="button"
-			{$props.disabled}
+			{$props?.disabled}
 			role="menuitem"
-			aria-disabled={$props.disabled ? "true" : undefined}
-			data-disabled={$props.disabled ? "true" : undefined}
+			aria-disabled={$props?.disabled ? "true" : undefined}
+			data-disabled={$props?.disabled ? "true" : undefined}
 			onkeydown={handleKeyDown}
 			onclick={handleClick}
 			onfocus={() => handleItemFocus(index)}

package/dist/Menu/MenuCheck.torp

@@ -14,6 +14,8 @@ interface MenuCheckProps {
 	checked?: boolean,
 	/** Whether this item is disabled */
 	disabled?: boolean,
+	/** Raised when the checkbox is clicked */
+	onclick?: (e: MouseEvent) => void,
 }
 
 /**
@@ -21,15 +23,15 @@ interface MenuCheckProps {
  * option on or off.
  *
  */
-export default function MenuCheck($props: MenuCheckProps) {
-	$props ??= $watch({});
-
+export default function MenuCheck($props: MenuCheckProps | undefined) {
 	let $state = $watch({
-		checked: $props.checked
+		checked: $props?.checked ?? false
 	});
 
 	$run(() => {
-		$props.checked = $state.checked;
+		if ($props !== undefined) {
+			$props.checked = $state.checked;
+		}
 	});
 
 	let button: HTMLButtonElement;
@@ -54,22 +56,24 @@ export default function MenuCheck($props: MenuCheckProps) {
 		button.focus();
 	}
 
-	function handleClick() {
+	function handleClick(e: MouseEvent) {
 		$state.checked = !$state.checked;
-		if ($props.onclick) $props.onclick();
+		if ($props?.onclick) {
+			$props.onclick(e);
+		}
 	}
 
 	@render {
 		<button
-			{$props.id}
-			class={`torp-menu-check ${$props.class ?? ""}`.trim()}
+			{$props?.id}
+			class={`torp-menu-check ${$props?.class ?? ""}`.trim()}
 			type="button"
-			{$props.disabled}
+			{$props?.disabled}
 			role="menuitemcheckbox"
-			aria-checked={$props.checked ? "true" : "false"}
-			aria-disabled={$props.disabled ? "true" : undefined}
-			data-state={$props.checked ? "checked" : "unchecked"}
-			data-disabled={$props.disabled ? "true" : undefined}
+			aria-checked={$props?.checked ? "true" : "false"}
+			aria-disabled={$props?.disabled ? "true" : undefined}
+			data-state={$props?.checked ? "checked" : "unchecked"}
+			data-disabled={$props?.disabled ? "true" : undefined}
 			onkeydown={handleItemKey}
 			onclick={handleClick}
 			onfocus={() => handleItemFocus(index)}