@torpor/ui 0.2.1 → 0.3.0

package/dist/Drawer/DrawerOverlay.torp

@@ -0,0 +1,38 @@
+import { disableScroll } from "../mount/disableScroll";
+import { DrawerContextName, type DrawerContext } from "./DrawerTypes";
+
+interface DrawerOverlayProps {
+	/** An ID for the root element */
+	id?: string;
+	/** Class name(s) for the root element */
+	class?: string,
+}
+
+/**
+ * The background overlay for a Drawer component.
+ * Adding an overlay automatically sets the component's `modal` value to true.
+ */
+export default function DrawerOverlay($props: DrawerOverlayProps | undefined) {
+	// Get stuff out of the DrawerContext
+	const context = $context[DrawerContextName] as DrawerContext;
+	if (!context) {
+		throw new Error("DrawerOverlay must be contained within a Drawer");
+	}
+	let $state = context.state;
+
+	// Any drawer with an overlay is modal
+	$state.modal = true;
+
+	@render {
+		@if ($state.visible) {
+			<div
+				{$props?.id}
+				class={`torp-drawer-overlay ${$props?.class ?? ""}`.trim()}
+				tabindex="-1"
+				onmount={(el) => disableScroll(el)}
+			>
+				<slot />
+			</div>
+		}
+	}
+}

package/dist/Drawer/DrawerTrigger.torp

@@ -0,0 +1,35 @@
+import { DrawerContextName, type DrawerContext } from "./DrawerTypes";
+
+interface DrawerTriggerProps {
+	/** An ID for the root element */
+	id?: string;
+	/** Class name(s) for the root element */
+	class?: string,
+}
+
+/**
+ * The button that causes a Drawer to appear or disappear.
+ */
+export default function DrawerTrigger($props: DrawerTriggerProps | undefined) {
+	// Get stuff out of the DrawerContext
+	const context = $context[DrawerContextName] as DrawerContext;
+	if (!context) {
+		throw new Error("DrawerTrigger must be contained within a Drawer");
+	}
+	let $state = context.state;
+
+	function handleClick() {
+		$state.visible = !$state.visible;
+	}
+
+	@render {
+		<button
+			type="button"
+			{$props?.id}
+			class={`torp-drawer-trigger ${$props?.class ?? ""}`.trim()}
+			onclick={handleClick}
+		>
+			<slot />
+		</button>
+	}
+}

package/dist/Drawer/DrawerTypes.ts

@@ -0,0 +1,24 @@
+export const DrawerContextName = "Drawer";
+
+/** The shared context for drawer components (Contextual, Prompt and Drawer) */
+export interface DrawerContext {
+	handleButton: (type: "confirm" | "cancel" | undefined, value?: any) => void;
+	// HACK: We need to be able to let children (i.e. Dialogs) override the click outside functionality
+	// There may be a more elegant way to accomplish this too
+	handleClickOutside?: (e: MouseEvent) => void;
+	state: DrawerState;
+	// HACK: focusFirstElement is necessary because if we focus the first element e.g. in a Dialog's
+	// onMount, it will scroll the page to the focused element and mess up our careful positioning
+	// We need to be able to manually set the order to
+	// 1. set visible (so we have an element with content)
+	// 2. set position (so the element is in the right place)
+	// 3. set focus (for accessibility)
+	// There may be a more elegant way to accomplish this!
+	focusFirstElement?: () => void;
+}
+
+export interface DrawerState {
+	visible: boolean;
+	modal: boolean;
+	position: "left" | "right" | "top" | "bottom";
+}

package/dist/Drawer/index.d.ts

@@ -6,16 +6,103 @@ interface DrawerProps {
 	id?: string;
 	/** Class name(s) for the root element */
 	class?: string,
+	/** 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,
+	/** Whether the drawer is visible  */
 	visible?: boolean,
-	position?: "left" | "right",
+	/** 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,
+	/** Raised when the drawer has opened */
+	onopen?: () => void,
+	/** Raised when the drawer has closed */
+	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:
+ *
+ * ```
+ * <Drawer>
+ * 	<DrawerTrigger /> (optional)
+ * 	<DrawerContent />
+ * </Drawer>
+ * ```
+ */
 declare function Drawer(
 	$parent: ParentNode,
 	$anchor: Node | null,
-	$props: DrawerProps,
+	$props: DrawerProps | undefined,
 	$context?: Record<PropertyKey, any>,
 	$slots?: Record<string, SlotRender>,
 ): void;
 
-export { Drawer };
+
+
+interface DrawerContentProps {
+	/** An ID for the root element */
+	id?: string;
+	/** Class name(s) for the root element */
+	class?: string,
+}
+
+/**
+ * The content that is displayed for a Drawer when it is open.
+ */
+declare function DrawerContent(
+	$parent: ParentNode,
+	$anchor: Node | null,
+	$props: DrawerContentProps | undefined,
+	$context?: Record<PropertyKey, any>,
+	$slots?: Record<string, SlotRender>,
+): void;
+
+
+
+interface DrawerOverlayProps {
+	/** An ID for the root element */
+	id?: string;
+	/** Class name(s) for the root element */
+	class?: string,
+}
+
+/**
+ * The background overlay for a Drawer component.
+ * Adding an overlay automatically sets the component's `modal` value to true.
+ */
+declare function DrawerOverlay(
+	$parent: ParentNode,
+	$anchor: Node | null,
+	$props: DrawerOverlayProps | undefined,
+	$context?: Record<PropertyKey, any>,
+	$slots?: Record<string, SlotRender>,
+): void;
+
+
+
+interface DrawerTriggerProps {
+	/** An ID for the root element */
+	id?: string;
+	/** Class name(s) for the root element */
+	class?: string,
+}
+
+/**
+ * The button that causes a Drawer to appear or disappear.
+ */
+declare function DrawerTrigger(
+	$parent: ParentNode,
+	$anchor: Node | null,
+	$props: DrawerTriggerProps | undefined,
+	$context?: Record<PropertyKey, any>,
+	$slots?: Record<string, SlotRender>,
+): void;
+
+export { Drawer, DrawerContent, DrawerOverlay, DrawerTrigger };

package/dist/Drawer/index.js

@@ -1,6 +1,18 @@
 // 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
+  Drawer_default as Drawer,
+  DrawerContent_default as DrawerContent,
+  DrawerOverlay_default as DrawerOverlay,
+  DrawerTrigger_default as DrawerTrigger
 };
 //# sourceMappingURL=index.js.map

package/dist/Form/Field.torp

@@ -25,8 +25,6 @@ interface FieldProps {
  * component and/or a Message.
  */
 export default function Field($props: FieldProps) {
-	$props ??= $watch({ name: "" });
-
 	let $state = $watch({
 		inputId: "-1",
 		value: $props.value,
@@ -83,8 +81,8 @@ export default function Field($props: FieldProps) {
 
 	@render {
 		<div
-			{$props.id}
-			class={`torp-field ${$props.class ?? ""}`.trim()}
+			{$props?.id}
+			class={`torp-field ${$props?.class ?? ""}`.trim()}
 			data-valid={$state.valid ? "valid" : "invalid"}
 		>
 			<slot />

package/dist/Form/Form.torp

@@ -18,11 +18,9 @@ interface FormProps {
 /**
  * A form for submitting values.
  */
-export default function Form($props: FormProps) {
-	$props ??= $watch({});
-
+export default function Form($props: FormProps | undefined) {
 	let $state = $watch({
-		data: $props.data ?? {},
+		data: $props?.data ?? {},
 		issues: [] as ValidationIssue[],
 		get valid() {
 			return this.issues.length === 0;
@@ -35,7 +33,7 @@ export default function Form($props: FormProps) {
 
 	// Set the context to pass down to Fields
 	let context: FormContext = {
-		schema: $props.schema,
+		schema: $props?.schema,
 		state: $state,
 		validate: handleValidate
 	};
@@ -43,7 +41,7 @@ export default function Form($props: FormProps) {
 	$context[FormContextName] = context;
 
 	async function validate() {
-		if ($props.schema) {
+		if ($props?.schema) {
 			const validator = $props.schema["~standard"];
 			let result = validator.validate($props.data);
 			if (result instanceof Promise) {
@@ -77,7 +75,7 @@ export default function Form($props: FormProps) {
 		}
 
 		// Dispatch the submit event for the user to handle
-		if ($props.onsubmit) {
+		if ($props?.onsubmit) {
 			let userSubmit = $props.onsubmit(e);
 			if (userSubmit instanceof Promise) {
 				userSubmit = await userSubmit;
@@ -118,8 +116,8 @@ export default function Form($props: FormProps) {
 
 	@render {
 		<form
-			{$props.id}
-			class={`torp-form ${$props.class ?? ""}`.trim()}
+			{$props?.id}
+			class={`torp-form ${$props?.class ?? ""}`.trim()}
 			method="POST"
 			onsubmit={handleSubmit}
 			@// Set novalidate only if JS is enabled (to override HTML validation)

package/dist/Form/Input.torp

@@ -25,10 +25,11 @@ interface InputProps {
 /**
  * A standard input in a form.
  */
-export default function Input($props: InputProps) {
-	$props ??= $watch({});
-	$props.id ??= getId();
-	$props.type ??= "text";
+export default function Input($props: InputProps | undefined) {
+	let defaultId = getId();
+
+	let type = $props?.type ?? "text";
+	let name = $props?.name
 
 	let blurred = false;
 
@@ -36,13 +37,13 @@ export default function Input($props: InputProps) {
 	const formContext = $context[FormContextName] as FormContext;
 	const fieldContext = $context[FieldContextName] as FieldContext;
 	if (fieldContext) {
-		$props.name ??= fieldContext.name;
+		name ??= fieldContext.name;
 	}
 
 	// Use the FieldContext's state, or create a new one
 	let $state = fieldContext?.state ?? $watch({
-		inputId: $props.id,
-		value: $props.value,
+		inputId: $props?.id ?? defaultId,
+		value: $props?.value,
 		errors: {} as Record<string, string>,
 		valid: false,
 		message: "",
@@ -50,11 +51,13 @@ export default function Input($props: InputProps) {
 
 	// Binding
 	$run(() => {
-		$props.value = $state.value;
+		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;
+	$state.inputId = $props?.id ?? defaultId;
 
 	// NOTE: Adapted this from https://stackoverflow.com/a/57393751,
 	// not sure if it's still a good way to do things
@@ -77,15 +80,15 @@ export default function Input($props: InputProps) {
 
 	@render {
 		<input
-			{$props.id}
-			class={`torp-input ${$props.class ?? ""}`.trim()}
-			{$props.name}
+			id={$props?.id ?? defaultId}
+			class={`torp-input ${$props?.class ?? ""}`.trim()}
+			{type}
+			{name}
 			&value={$state.value}
-			{$props.type}
-			{$props.placeholder}
-			{$props.readonly}
-			{$props.maxlength}
-			aria-label={$props.ariaLabel}
+			{$props?.placeholder}
+			{$props?.readonly}
+			{$props?.maxlength}
+			aria-label={$props?.ariaLabel}
 			data-valid={$state.valid ? "valid" : "invalid"}
 			oninput={handleInput}
 			onblur={handleBlur}

package/dist/Form/Label.torp

@@ -10,7 +10,7 @@ interface LabelProps {
 /**
  * A label to describe the contents of an input in a form.
  */
-export default function Label($props?: LabelProps) {
+export default function Label($props: LabelProps | undefined) {
 	// Get stuff out of the FieldContext
 	const context = $context[FieldContextName] as FieldContext;
 	if (!context) {

package/dist/Form/Message.torp

@@ -11,7 +11,7 @@ interface MessageProps {
  * 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) {
+export default function Message($props: MessageProps | undefined) {
 	// Get stuff out of the FieldContext
 	const context = $context[FieldContextName] as FieldContext;
 	if (!context) {

package/dist/Form/index.d.ts

@@ -48,7 +48,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;
@@ -82,26 +82,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,7 +123,7 @@ 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;

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)}

package/dist/Menu/MenuGroup.torp

@@ -11,17 +11,15 @@ interface MenuGroupProps {
 /**
  * A container for a logical group of menu items.
  */
-export default function MenuGroup($props: MenuGroupProps) {
-	$props ??= $watch({});
-
+export default function MenuGroup($props: MenuGroupProps | undefined) {
 	// TODO: Intercept the context to steal toggleItem??
 
 	@render {
 		<div
-			{$props.id}
-			class={`torp-menu-group ${$props.class ?? ""}`.trim()}
+			{$props?.id}
+			class={`torp-menu-group ${$props?.class ?? ""}`.trim()}
 			role="group"
-			aria-label={$props.ariaLabel}
+			aria-label={$props?.ariaLabel}
 		>
 			<slot />
 		</div>