@torpor/ui 0.2.1 → 0.3.1

package/dist/Dialog/DialogFooter.torp

@@ -9,13 +9,11 @@ interface DialogFooterProps {
 /**
  * The footer for a Dialog, which may contain one or more DialogButtons.
  */
-export default function DialogFooter($props: DialogFooterProps) {
-	$props ??= $watch({});
-
+export default function DialogFooter($props: DialogFooterProps | undefined) {
 	@render {
 		<div
-			{$props.id}
-			class={`torp-dialog-footer ${$props.class ?? ""}`.trim()}
+			{$props?.id}
+			class={`torp-dialog-footer ${$props?.class ?? ""}`.trim()}
 		>
 			<slot />
 		</div>

package/dist/Dialog/DialogHeader.torp

@@ -15,10 +15,8 @@ interface DialogHeaderProps {
  * readers when the Dialog is opened, unless ariaAnnounce is false.
  * 
  */
-export default function DialogHeader($props: DialogHeaderProps) {
-	$props ??= $watch({});
-	$props.id ??= getId();
-	$props.ariaAnnounce ??= true;
+export default function DialogHeader($props: DialogHeaderProps | undefined) {
+	let defaultId = getId();
 
 	// Get stuff out of the DialogContext
 	const context = $context[DialogContextName] as DialogContext;
@@ -28,14 +26,14 @@ export default function DialogHeader($props: DialogHeaderProps) {
 	let $state = context.state;
 
 	// Set the header id for using in the Dialog's ARIA attributes
-	if ($props.ariaAnnounce) {
-		$state.headerId = $props.id;
+	if ($props?.ariaAnnounce !== false) {
+		$state.headerId = $props?.id ?? defaultId;
 	}
 
 	@render {
 		<div
-			{$props.id}
-			class={`torp-dialog-footer ${$props.class ?? ""}`.trim()}
+			id={$props?.id ?? defaultId}
+			class={`torp-dialog-footer ${$props?.class ?? ""}`.trim()}
 		>
 			<slot />
 		</div>

package/dist/Dialog/DialogTypes.ts

@@ -1,7 +1,9 @@
 export const DialogContextName = "Dialog";
 
+export type HandleButtonPress = (type: "confirm" | "cancel" | undefined, value?: any) => void;
+
 export interface DialogContext {
-	handleButton: (type: "confirm" | "cancel" | undefined, value?: any) => void;
+	handleButton?: HandleButtonPress;
 	state: DialogState;
 	anchorElement?: HTMLElement;
 	confirmButton?: HTMLButtonElement;
@@ -12,5 +14,4 @@ export interface DialogState {
 	dialogId: string;
 	headerId: string;
 	bodyId: string;
-	visible: boolean;
 }

package/dist/Dialog/index.d.ts

@@ -13,7 +13,9 @@ interface DialogProps {
 }
 
 /**
- * Content for a window displayed in a Popover.
+ * A dialog that can be used to show a message to the user, or get information from the user.
+ * 
+ * Dialogs are typically shown within a Modal or Popover.
  * 
  * See [the WAI ARIA guidelines for Dialogs](https://www.w3.org/WAI/ARIA/apg/patterns/dialogmodal/).
  * 
@@ -21,11 +23,12 @@ interface DialogProps {
  * 
  * ```
  * <Dialog>
- *     <DialogHeader /> (optional)
- *     <DialogBody /> (optional)
- *     <DialogFooter> (optional)
- *         <DialogButton /> (optional)
- *     </DialogFooter>
+ * 	<ModalOverlay /> (optional -- will set `modal` to true)
+ * 	<DialogHeader /> (optional)
+ * 	<DialogBody /> (optional)
+ * 	<DialogFooter> (optional)
+ * 		<DialogButton /> (optional)
+ * 	</DialogFooter>
  * </Dialog>
  * ```
  * 
@@ -33,7 +36,7 @@ interface DialogProps {
 declare function Dialog(
 	$parent: ParentNode,
 	$anchor: Node | null,
-	$props: DialogProps,
+	$props: DialogProps | undefined,
 	$context?: Record<PropertyKey, any>,
 	$slots?: Record<string, SlotRender>,
 ): void;
@@ -56,7 +59,7 @@ interface DialogBodyProps {
 declare function DialogBody(
 	$parent: ParentNode,
 	$anchor: Node | null,
-	$props: DialogBodyProps,
+	$props: DialogBodyProps | undefined,
 	$context?: Record<PropertyKey, any>,
 	$slots?: Record<string, SlotRender>,
 ): void;
@@ -74,6 +77,8 @@ interface DialogButtonProps {
 	type?: "confirm" | "cancel",
 	/** Whether this button is disabled */
 	disabled?: boolean,
+	/** Raised when the button is clicked */
+	onclick?: (e: MouseEvent) => void,
 }
 
 /**
@@ -83,7 +88,7 @@ interface DialogButtonProps {
 declare function DialogButton(
 	$parent: ParentNode,
 	$anchor: Node | null,
-	$props: DialogButtonProps,
+	$props: DialogButtonProps | undefined,
 	$context?: Record<PropertyKey, any>,
 	$slots?: Record<string, SlotRender>,
 ): void;
@@ -103,7 +108,7 @@ interface DialogFooterProps {
 declare function DialogFooter(
 	$parent: ParentNode,
 	$anchor: Node | null,
-	$props: DialogFooterProps,
+	$props: DialogFooterProps | undefined,
 	$context?: Record<PropertyKey, any>,
 	$slots?: Record<string, SlotRender>,
 ): void;
@@ -127,7 +132,7 @@ interface DialogHeaderProps {
 declare function DialogHeader(
 	$parent: ParentNode,
 	$anchor: Node | null,
-	$props: DialogHeaderProps,
+	$props: DialogHeaderProps | undefined,
 	$context?: Record<PropertyKey, any>,
 	$slots?: Record<string, SlotRender>,
 ): void;

package/dist/Disclosure/Disclosure.torp

@@ -5,11 +5,11 @@ interface DisclosureProps {
 	id?: string;
 	/** Class name(s) for the root element */
 	class?: string,
-	/** Whether the Disclosure is expanded and its content visible */
+	/** Whether the disclosure is expanded and its content visible */
 	expanded?: boolean,
-	/** If set to true, the user cannot interact with this Disclosure */
+	/** If set to true, the user cannot interact with this disclosure */
 	disabled?: boolean,
-	/** Raised when this item is opened or closed */
+	/** Raised when the disclosure is opened or closed */
 	ontoggle?: (open: boolean) => void,
 }
 
@@ -22,30 +22,29 @@ interface DisclosureProps {
  *
  * ```
  * <Disclosure>
- *     <DisclosureHeader>
- *         <DisclosureTrigger />
- *     </DisclosureHeader>
- *     <DisclosureContent />
+ * 	<DisclosureHeader>
+ * 		<DisclosureTrigger />
+ * 	</DisclosureHeader>
+ * 	<DisclosureContent />
  * </Disclosure>
  * ```
  */
-export default function Disclosure($props: DisclosureProps) {
-	$props ??= $watch({});
-	$props.expanded ??= false;
-	$props.disabled ??= false;
-
+export default function Disclosure($props: DisclosureProps | undefined) {
 	let $state: DisclosureState = $watch({
-		expanded: $props.expanded && $props.expanded !== "false",
-		disabled: $props.disabled,
-		get dataState() {
-			return this.expanded ? "open" : "closed";
-		},
+		expanded: false,
+		disabled: false,
+		headerId: "",
+		contentId: "",
 	});
 
 	// Update $state with $props
 	$run(() => {
-		$state.expanded = $props.expanded && $props.expanded !== "false";
-		$state.disabled = $props.disabled;
+		$state.expanded = $props?.expanded === true ||
+			// @ts-ignore
+			$props?.expanded === "true";
+		$state.disabled = $props?.disabled === true ||
+			// @ts-ignore
+			$props?.disabled === "true";
 	});
 
 	// Put stuff into a DisclosureContext
@@ -57,7 +56,7 @@ export default function Disclosure($props: DisclosureProps) {
 	// Dispatch the toggle event when the value of expanded changes
 	let firstToggle = true;
 	$run(() => {
-		const ev = $props.ontoggle;
+		const ev = $props?.ontoggle;
 		const expanded = $state.expanded;
 		if (firstToggle) {
 			firstToggle = false;
@@ -68,9 +67,9 @@ export default function Disclosure($props: DisclosureProps) {
 
 	@render {
 		<div
-			{$props.id}
-			class={`torp-disclosure-item ${$props.class ?? ""}`.trim()}
-			data-state={$state.dataState}
+			{$props?.id}
+			class={`torp-disclosure-item ${$props?.class ?? ""}`.trim()}
+			data-state={$state.expanded ? "open" : "closed"}
 			data-disabled={$state.disabled ? "true" : undefined}
 		>
 			<slot />

package/dist/Disclosure/DisclosureContent.torp

@@ -13,9 +13,8 @@ interface DisclosureContentProps {
 /**
  * Content for a Disclosure, which can be revealed or hidden by an associated DisclosureTrigger.
  */
-export default function DisclosureContent($props: DisclosureContentProps) {
-	$props ??= $watch({});
-	$props.id ||= getId();
+export default function DisclosureContent($props: DisclosureContentProps | undefined) {
+	let defaultId = getId();
 
 	const context = $context[DisclosureContextName] as DisclosureContext;
 	if (!context) {
@@ -24,15 +23,15 @@ export default function DisclosureContent($props: DisclosureContentProps) {
 	let $state = context.state
 
 	// Set the content ID so that it can be used with aria-controls in DisclosureTrigger
-	$state.contentId = $props.id;
+	$state.contentId = $props?.id ?? defaultId;
 
 	@render {
 		<div
-			{$props.id}
-			class={`torp-disclosure-content ${$props.class ?? ""}`.trim()}
-			role={$props.ariaRegion ? "region" : undefined}
+			id={$props?.id ?? defaultId}
+			class={`torp-disclosure-content ${$props?.class ?? ""}`.trim()}
+			role={$props?.ariaRegion ? "region" : undefined}
 			aria-labelledby={$state.headerId}
-			data-state={$state.dataState}
+			data-state={$state.expanded ? "open" : "closed"}
 			data-disabled={$state.disabled ? "true" : undefined}
 		>
 			@if ($state.expanded) {

package/dist/Disclosure/DisclosureHeader.torp

@@ -16,13 +16,11 @@ interface DisclosureHeaderProps {
  * 
  * ```
  * <DisclosureHeader>
- *    <DisclosureTrigger />
+ * 	<DisclosureTrigger />
  * </DisclosureHeader>
  * ```
  */
-export default function DisclosureHeader($props: DisclosureHeaderProps) {
-	$props ??= $watch({});
-
+export default function DisclosureHeader($props: DisclosureHeaderProps | undefined) {
 	const context = $context[DisclosureContextName] as DisclosureContext;
 	if (!context) {
 		throw new Error("DisclosureHeader must be contained within a Disclosure");
@@ -32,9 +30,9 @@ export default function DisclosureHeader($props: DisclosureHeaderProps) {
 	@render {
 		@// TODO: $props.as
 		<h4
-			{$props.id}
-			class={`torp-disclosure-header ${$props.class ?? ""}`.trim()}
-			data-state={$state.dataState}
+			{$props?.id}
+			class={`torp-disclosure-header ${$props?.class ?? ""}`.trim()}
+			data-state={$state.expanded ? "open" : "closed"}
 			data-disabled={$state.disabled ? "true" : undefined}
 		>
 			<slot />

package/dist/Disclosure/DisclosureTrigger.torp

@@ -11,9 +11,8 @@ interface DisclosureTriggerProps {
 /**
  * A header button for a Disclosure, which can be used to reveal or hide an associated DisclosureContent.
  */
-export default function DisclosureTrigger($props: DisclosureTriggerProps) {
-	$props ??= $watch({});
-	$props.id ||= getId();
+export default function DisclosureTrigger($props: DisclosureTriggerProps | undefined) {
+	let defaultId = getId();
 
 	// Get stuff out of the DisclosureContext
 	const context = $context[DisclosureContextName] as DisclosureContext;
@@ -23,18 +22,18 @@ export default function DisclosureTrigger($props: DisclosureTriggerProps) {
 	let $state = context.state;
 
 	// Set the header ID so that it can be used with aria-labelledby in DisclosureContent
-	$state.headerId = $props.id;
+	$state.headerId = $props?.id ?? defaultId;
 
 	@render {
 		<button
 			type="button"
-			{$props.id}
-			class={`torp-disclosure-trigger ${$props.class ?? ""}`.trim()}
-			disabled={$state.disabled || $state.parentDisabled}
+			id={$props?.id ?? defaultId}
+			class={`torp-disclosure-trigger ${$props?.class ?? ""}`.trim()}
+			disabled={$state.disabled}
 			aria-expanded={$state.expanded.toString()}
 			aria-disabled={$state.disabled}
 			aria-controls={$state.contentId}
-			data-state={$state.dataState}
+			data-state={$state.expanded ? "open" : "closed"}
 			data-disabled={$state.disabled}
 			onclick={() => $state.expanded = !$state.expanded}
 		>

package/dist/Disclosure/DisclosureTypes.ts

@@ -10,5 +10,4 @@ export interface DisclosureState {
 	contentId: string;
 	expanded: boolean;
 	disabled: boolean;
-	dataState: "open" | "closed";
 }

package/dist/Disclosure/index.d.ts

@@ -6,11 +6,11 @@ interface DisclosureProps {
 	id?: string;
 	/** Class name(s) for the root element */
 	class?: string,
-	/** Whether the Disclosure is expanded and its content visible */
+	/** Whether the disclosure is expanded and its content visible */
 	expanded?: boolean,
-	/** If set to true, the user cannot interact with this Disclosure */
+	/** If set to true, the user cannot interact with this disclosure */
 	disabled?: boolean,
-	/** Raised when this item is opened or closed */
+	/** Raised when the disclosure is opened or closed */
 	ontoggle?: (open: boolean) => void,
 }
 
@@ -23,17 +23,17 @@ interface DisclosureProps {
  *
  * ```
  * <Disclosure>
- *     <DisclosureHeader>
- *         <DisclosureTrigger />
- *     </DisclosureHeader>
- *     <DisclosureContent />
+ * 	<DisclosureHeader>
+ * 		<DisclosureTrigger />
+ * 	</DisclosureHeader>
+ * 	<DisclosureContent />
  * </Disclosure>
  * ```
  */
 declare function Disclosure(
 	$parent: ParentNode,
 	$anchor: Node | null,
-	$props: DisclosureProps,
+	$props: DisclosureProps | undefined,
 	$context?: Record<PropertyKey, any>,
 	$slots?: Record<string, SlotRender>,
 ): void;
@@ -55,7 +55,7 @@ interface DisclosureContentProps {
 declare function DisclosureContent(
 	$parent: ParentNode,
 	$anchor: Node | null,
-	$props: DisclosureContentProps,
+	$props: DisclosureContentProps | undefined,
 	$context?: Record<PropertyKey, any>,
 	$slots?: Record<string, SlotRender>,
 ): void;
@@ -78,14 +78,14 @@ interface DisclosureHeaderProps {
  * 
  * ```
  * <DisclosureHeader>
- *    <DisclosureTrigger />
+ * 	<DisclosureTrigger />
  * </DisclosureHeader>
  * ```
  */
 declare function DisclosureHeader(
 	$parent: ParentNode,
 	$anchor: Node | null,
-	$props: DisclosureHeaderProps,
+	$props: DisclosureHeaderProps | undefined,
 	$context?: Record<PropertyKey, any>,
 	$slots?: Record<string, SlotRender>,
 ): void;
@@ -105,7 +105,7 @@ interface DisclosureTriggerProps {
 declare function DisclosureTrigger(
 	$parent: ParentNode,
 	$anchor: Node | null,
-	$props: DisclosureTriggerProps,
+	$props: DisclosureTriggerProps | undefined,
 	$context?: Record<PropertyKey, any>,
 	$slots?: Record<string, SlotRender>,
 ): void;

package/dist/Drawer/Drawer.torp

@@ -1,92 +1,123 @@
+import { DrawerContextName, type DrawerContext, type DrawerState } from "./DrawerTypes";
 
 interface DrawerProps {
 	/** An ID for the root element */
 	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,
 }
 
-export default function Drawer($props: DrawerProps) {
-	$props ??= $watch({});
-	$props.visible ??= true;
-	$props.position ||= "left";
+/**
+ * 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>
+ * ```
+ */
+export default function Drawer($props: DrawerProps | undefined) {
+	let $state: DrawerState = $watch({
+		visible: false,
+		modal: $props?.modal ?? false,
+		position: $props?.position ?? "left",
+	});
 
-	let offscreen: HTMLElement | undefined;
+	// Sync props and state
+	$run(() => {
+		$state.visible = $props?.visible ?? false;
+	});
+	$run(() => {
+		if ($props !== undefined) {
+			$props.visible = $state.visible;
+		}
+	});
 
-	// From https://stackoverflow.com/a/46707458
-	function measure(el, fn) {
-		let oldVisibility = el.style.visibility;
-		let oldPosition = el.style.position;
+	let result: any;
 
-		let oldParent = el.parentNode;
-		let oldBefore = el.nextNode;
+	// Set the context to pass down to items
+	let context: DrawerContext = {
+		handleButton,
+		handleClickOutside,
+		state: $state,
+	};
+	$context[DrawerContextName] = context;
 
-		el.style.visibility = "hidden";
-		el.style.position = "absolute";
+	// Dispatch the toggle event when the drawer is opened or closed
+	let firstToggle = true;
+	$run(() => {
+		const ontoggle = $props?.ontoggle;
+		const onopen = $props?.onopen;
+		const onclose = $props?.onclose;
+		const visible = $state.visible;
+		if (firstToggle) {
+			firstToggle = false;
+		} else {
+			if (ontoggle) ontoggle(visible);
+			if (visible) {
+				if (onopen) onopen()
+			} else {
+				if (onclose) onclose(result);
+			}
+		}
+	});
 
-		document.body.appendChild(el);
-		let result = fn(el);
-		el.parentNode.removeChild(el);
+	function handleButton(type: "confirm" | "cancel" | undefined, value?: any) {
+		// Get the button's result
+		switch (type) {
+			case "confirm": {
+				result = value || true;
+				break;
+			}
+			case "cancel": {
+				result = value || false;
+				break;
+			}
+			default: {
+				result = value;
+				break;
+			}
+		}
 
-		oldParent.appendChild(el, oldBefore);
-		el.style.visibility = oldVisibility;
-		el.style.position = oldPosition;
+		// Hide the drawer
+		$state.visible = false;
 
-		return result;
+		// Call the callback
+		if ($props?.callback) {
+			$props?.callback(result);
+		}
 	}
 
-	function transitionArgs() {
-		if (offscreen) {
-			switch ($props.position) {
-				case "left": {
-					offscreen.style.left = 0;
-					const width = measure(offscreen, (el) => el.offsetWidth);
-					return [
-						{ transform: `translateX(-${width}px)` },
-						{ transform: "translateX(0px)" }
-					];
-				}
-				case "top": {
-					offscreen.style.top = 0;
-					const height = measure(offscreen, (el) => el.offsetHeight);
-					return [
-						{ transform: `translateY(-${height}px)` },
-						{ transform: "translateY(0px)" }
-					];
-				}
-				case "right": {
-					offscreen.style.right = 0;
-					const width = measure(offscreen, (el) => el.offsetWidth);
-					return [
-						{ transform: `translateX(${width}px)` },
-						{ transform: "translateX(0px)" }
-					];
-				}
-				case "bottom": {
-					offscreen.style.bottom = 0;
-					const height = measure(offscreen, (el) => el.offsetHeight);
-					return [
-						{ transform: `translateY(${height}px)` },
-						{ transform: "translateY(0px)" }
-					];
-				}
-			}
-		}
+	function handleClickOutside(e: MouseEvent) {
+		e.preventDefault();
+		$state.visible = false;
 	}
 
 	@render {
-		@if ($props.visible) {
-			<div
-				{$props.id}
-				class={`torp-offscreen ${$props.class ?? ""}`.trim()}
-				style="position: fixed;"
-				transition={transitionArgs()}
-				&ref={offscreen}
-			>
-				<slot />
-			</div>
-		}
+		<div
+			{$props?.id}
+			class={`torp-drawer ${$props?.class ?? ""}`.trim()}
+		>
+			<slot />
+		</div>
 	}
-}
+}

package/dist/Drawer/DrawerContent.torp

@@ -0,0 +1,80 @@
+import { type Animation } from "@torpor/view";
+import { slide } from "../motion";
+import { addDocumentEvent, removeDocumentEvent } from "../utils/documentEvents";
+import { DrawerContextName, type DrawerContext } from "./DrawerTypes";
+
+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.
+ */
+export default function DrawerContent($props: DrawerContentProps | undefined) {
+	let drawer: HTMLElement;
+	let shown = false;
+	let closeOnClick = false;
+
+	// Get stuff out of the DrawerContext
+	const context = $context[DrawerContextName] as DrawerContext;
+	if (!context) {
+		throw new Error("DrawerContent must be contained within a Drawer");
+	}
+	let $state = context.state;
+
+	$run(() => {
+		if (!$state.visible) {
+			hide();
+		}
+	});
+
+	function show() {
+		shown = true;
+
+		// HACK: Because this Drawer could be shown with a click, we need to wait for another mousedown
+		// before we close on click. Otherwise the click immediately bubbles to the document
+		closeOnClick = false;
+		addDocumentEvent("mousedown", handleDocumentMouseDown);
+		addDocumentEvent("click", handleDocumentClick);
+	}
+
+	function hide() {
+		if (!shown) return;
+
+		removeDocumentEvent("mousedown", handleDocumentMouseDown);
+		removeDocumentEvent("click", handleDocumentClick);
+	}
+
+	function handleDocumentMouseDown() {
+		closeOnClick = true;
+	}
+
+	function handleDocumentClick(e: MouseEvent) {
+		if (
+			closeOnClick &&
+			drawer &&
+			!drawer.contains(e.target as HTMLElement)
+		) {
+			e.preventDefault();
+			context.handleClickOutside!(e);
+		}
+	}
+
+	@render {
+		@if ($state.visible) {
+			<div
+				{$props?.id}
+				class={`torp-drawer-content ${$props?.class ?? ""}`.trim()}
+				style="position: fixed;"
+				transition={(e) => slide(e, { side: $state.position })}
+				&ref={drawer}
+				onmount={show}
+			>
+				<slot />
+			</div>
+		}
+	}
+}