@torpor/ui 0.3.7 → 1.0.0

package/dist/Dialog/index.js

@@ -1,22 +1,6 @@
-// src/Dialog/Dialog.torp
-import Dialog_default from "./Dialog.torp";
-
-// src/Dialog/DialogBody.torp
-import DialogBody_default from "./DialogBody.torp";
-
-// src/Dialog/DialogButton.torp
-import DialogButton_default from "./DialogButton.torp";
-
-// src/Dialog/DialogFooter.torp
-import DialogFooter_default from "./DialogFooter.torp";
-
-// src/Dialog/DialogHeader.torp
-import DialogHeader_default from "./DialogHeader.torp";
-export {
-  Dialog_default as Dialog,
-  DialogBody_default as DialogBody,
-  DialogButton_default as DialogButton,
-  DialogFooter_default as DialogFooter,
-  DialogHeader_default as DialogHeader
-};
-//# sourceMappingURL=index.js.map
+import Dialog from "./Dialog.torp";
+import DialogBody from "./DialogBody.torp";
+import DialogButton from "./DialogButton.torp";
+import DialogFooter from "./DialogFooter.torp";
+import DialogHeader from "./DialogHeader.torp";
+export { Dialog, DialogBody, DialogButton, DialogFooter, DialogHeader };

package/dist/Disclosure/Disclosure.torp

@@ -1,19 +1,24 @@
 import type { ClassValue, StyleValue } from "@torpor/view";
-import { DisclosureContextName, type DisclosureContext, type DisclosureState } from "./DisclosureTypes";
+import $handle from "../utils/$handle";
+import {
+	type DisclosureContext,
+	DisclosureContextName,
+	type DisclosureState,
+} from "./DisclosureTypes";
 
 interface DisclosureProps {
 	/** 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 disclosure is expanded and its content visible */
-	expanded?: boolean,
+	expanded?: boolean;
 	/** If set to true, the user cannot interact with this disclosure */
-	disabled?: boolean,
+	disabled?: boolean;
 	/** Raised when the disclosure is opened or closed */
-	ontoggle?: (open: boolean) => void,
+	onchange?: (open: boolean) => void;
 }
 
 /**
@@ -42,10 +47,12 @@ export default function Disclosure($props: DisclosureProps | undefined) {
 
 	// Update $state with $props
 	$run(() => {
-		$state.expanded = $props?.expanded === true ||
+		$state.expanded =
+			$props?.expanded === true ||
 			// @ts-ignore
 			$props?.expanded === "true";
-		$state.disabled = $props?.disabled === true ||
+		$state.disabled =
+			$props?.disabled === true ||
 			// @ts-ignore
 			$props?.disabled === "true";
 	});
@@ -56,16 +63,10 @@ export default function Disclosure($props: DisclosureProps | undefined) {
 	};
 	$context[DisclosureContextName] = itemContext;
 
-	// Dispatch the toggle event when the value of expanded changes
-	let firstToggle = true;
-	$run(() => {
-		const ev = $props?.ontoggle;
+	// Dispatch the change event when the value of expanded changes
+	$handle((first) => {
 		const expanded = $state.expanded;
-		if (firstToggle) {
-			firstToggle = false;
-		} else if (ev) {
-			ev(expanded);
-		}
+		if (!first) $props?.onchange?.(expanded);
 	});
 
 	@render {
@@ -74,7 +75,6 @@ export default function Disclosure($props: DisclosureProps | undefined) {
 			class={["torp-disclosure-item", $props?.class]}
 			{$props?.style}
 			data-state={$state.expanded ? "open" : "closed"}
-			data-disabled={$state.disabled ? "true" : undefined}
 		>
 			<slot />
 		</div>

package/dist/Disclosure/DisclosureContent.torp

@@ -1,16 +1,16 @@
 import type { ClassValue, StyleValue } from "@torpor/view";
 import getId from "../utils/getId";
-import { DisclosureContextName, type DisclosureContext } from "./DisclosureTypes";
+import { type DisclosureContext, DisclosureContextName } from "./DisclosureTypes";
 
 interface DisclosureContentProps {
 	/** 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 this content should act as a region. Set this when the content contains heading elements or a nested Disclosure */
-	ariaRegion?: boolean,
+	ariaRegion?: boolean;
 }
 
 /**
@@ -23,7 +23,7 @@ export default function DisclosureContent($props: DisclosureContentProps | undef
 	if (!context) {
 		throw new Error("DisclosureContent must be contained within a Disclosure");
 	}
-	let $state = context.state
+	let $state = context.state;
 
 	// Set the content ID so that it can be used with aria-controls in DisclosureTrigger
 	$state.contentId = $props?.id ?? defaultId;
@@ -36,7 +36,6 @@ export default function DisclosureContent($props: DisclosureContentProps | undef
 			role={$props?.ariaRegion ? "region" : undefined}
 			aria-labelledby={$state.headerId}
 			data-state={$state.expanded ? "open" : "closed"}
-			data-disabled={$state.disabled ? "true" : undefined}
 		>
 			@if ($state.expanded) {
 				<slot />

package/dist/Disclosure/DisclosureHeader.torp

@@ -1,22 +1,20 @@
 import type { ClassValue, StyleValue } from "@torpor/view";
-import { DisclosureContextName, type DisclosureContext } from "./DisclosureTypes";
+import { type DisclosureContext, DisclosureContextName } from "./DisclosureTypes";
 
 interface DisclosureHeaderProps {
 	/** An ID for the root element */
 	id?: string;
 	/** Classes for the root element */
-	class?: ClassValue,
+	class?: ClassValue;
 	/** Styles for the root element */
-	style?: StyleValue,
-	/** The type of HTML header to use */
-	as?: "h1" | "h2" | "h3" | "h4" | "h5" | "h6",
+	style?: StyleValue;
 }
 
 /**
  * The header for a Disclosure, which contains the DisclosureTrigger.
  *
  * The structure of a DisclosureHeader is:
- * 
+ *
  * ```
  * <DisclosureHeader>
  * 	<DisclosureTrigger />
@@ -28,18 +26,16 @@ export default function DisclosureHeader($props: DisclosureHeaderProps | undefin
 	if (!context) {
 		throw new Error("DisclosureHeader must be contained within a Disclosure");
 	}
-	let $state = context.state
+	let $state = context.state;
 
 	@render {
-		@// TODO: $props.as
-		<h4
+		<div
 			{$props?.id}
 			class={["torp-disclosure-header", $props?.class]}
 			{$props?.style}
 			data-state={$state.expanded ? "open" : "closed"}
-			data-disabled={$state.disabled ? "true" : undefined}
 		>
 			<slot />
-		</h4>
+		</div>
 	}
 }

package/dist/Disclosure/DisclosureTrigger.torp

@@ -1,14 +1,14 @@
 import type { ClassValue, StyleValue } from "@torpor/view";
 import getId from "../utils/getId";
-import { DisclosureContextName, type DisclosureContext } from "./DisclosureTypes";
+import { type DisclosureContext, DisclosureContextName } from "./DisclosureTypes";
 
 interface DisclosureTriggerProps {
 	/** 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;
 }
 
 /**
@@ -33,12 +33,11 @@ export default function DisclosureTrigger($props: DisclosureTriggerProps | undef
 			id={$props?.id ?? defaultId}
 			class={["torp-disclosure-trigger", $props?.class]}
 			{$props?.style}
-			disabled={$state.disabled}
+			{$state.disabled}
 			aria-expanded={$state.expanded.toString()}
 			aria-disabled={$state.disabled}
 			aria-controls={$state.contentId}
 			data-state={$state.expanded ? "open" : "closed"}
-			data-disabled={$state.disabled}
 			onclick={() => $state.expanded = !$state.expanded}
 		>
 			<slot />

package/dist/Disclosure/DisclosureTypes.ts

@@ -1,4 +1,4 @@
-export const DisclosureContextName = "Disclosure";
+export const DisclosureContextName: unique symbol = Symbol.for("torp.Disclosure");
 
 export interface DisclosureContext {
 	/** The reactive state for a Disclosure */

package/dist/Disclosure/index.d.ts

@@ -5,15 +5,15 @@ interface DisclosureProps {
 	/** 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 disclosure is expanded and its content visible */
-	expanded?: boolean,
+	expanded?: boolean;
 	/** If set to true, the user cannot interact with this disclosure */
-	disabled?: boolean,
+	disabled?: boolean;
 	/** Raised when the disclosure is opened or closed */
-	ontoggle?: (open: boolean) => void,
+	onchange?: (open: boolean) => void;
 }
 
 /**
@@ -46,11 +46,11 @@ interface DisclosureContentProps {
 	/** 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 this content should act as a region. Set this when the content contains heading elements or a nested Disclosure */
-	ariaRegion?: boolean,
+	ariaRegion?: boolean;
 }
 
 /**
@@ -70,18 +70,16 @@ interface DisclosureHeaderProps {
 	/** An ID for the root element */
 	id?: string;
 	/** Classes for the root element */
-	class?: ClassValue,
+	class?: ClassValue;
 	/** Styles for the root element */
-	style?: StyleValue,
-	/** The type of HTML header to use */
-	as?: "h1" | "h2" | "h3" | "h4" | "h5" | "h6",
+	style?: StyleValue;
 }
 
 /**
  * The header for a Disclosure, which contains the DisclosureTrigger.
  *
  * The structure of a DisclosureHeader is:
- * 
+ *
  * ```
  * <DisclosureHeader>
  * 	<DisclosureTrigger />
@@ -102,9 +100,9 @@ interface DisclosureTriggerProps {
 	/** 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;
 }
 
 /**
@@ -118,4 +116,4 @@ declare function DisclosureTrigger(
 	$slots?: Record<string, SlotRender>,
 ): void;
 
-export { Disclosure, DisclosureContent, DisclosureHeader, DisclosureTrigger };
+export { Disclosure, DisclosureContent, DisclosureHeader, DisclosureTrigger };

package/dist/Disclosure/index.js

@@ -1,18 +1,5 @@
-// src/Disclosure/Disclosure.torp
-import Disclosure_default from "./Disclosure.torp";
-
-// src/Disclosure/DisclosureContent.torp
-import DisclosureContent_default from "./DisclosureContent.torp";
-
-// src/Disclosure/DisclosureHeader.torp
-import DisclosureHeader_default from "./DisclosureHeader.torp";
-
-// src/Disclosure/DisclosureTrigger.torp
-import DisclosureTrigger_default from "./DisclosureTrigger.torp";
-export {
-  Disclosure_default as Disclosure,
-  DisclosureContent_default as DisclosureContent,
-  DisclosureHeader_default as DisclosureHeader,
-  DisclosureTrigger_default as DisclosureTrigger
-};
-//# sourceMappingURL=index.js.map
+import Disclosure from "./Disclosure.torp";
+import DisclosureContent from "./DisclosureContent.torp";
+import DisclosureHeader from "./DisclosureHeader.torp";
+import DisclosureTrigger from "./DisclosureTrigger.torp";
+export { Disclosure, DisclosureContent, DisclosureHeader, DisclosureTrigger };

package/dist/Drawer/Drawer.torp

@@ -1,34 +1,29 @@
-import type { ClassValue, StyleValue } from "@torpor/view";
-import { DrawerContextName, type DrawerContext, type DrawerState } from "./DrawerTypes";
+import type { Bindable, ClassValue, StyleValue } from "@torpor/view";
+import $handle from "../utils/$handle";
+import { type DrawerContext, DrawerContextName, type DrawerState } from "./DrawerTypes";
 
 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:
  *
  * ```
@@ -45,15 +40,7 @@ export default function Drawer($props: DrawerProps | undefined) {
 		position: $props?.position ?? "left",
 	});
 
-	// Sync props and state
-	$run(() => {
-		$state.visible = $props?.visible ?? false;
-	});
-	$run(() => {
-		if ($props !== undefined) {
-			$props.visible = $state.visible;
-		}
-	});
+	$bind($state, $props, "visible");
 
 	let result: any;
 
@@ -65,22 +52,14 @@ export default function Drawer($props: DrawerProps | undefined) {
 	};
 	$context[DrawerContextName] = context;
 
-	// 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;
+	// Dispatch the open/close events when the drawer is opened or closed
+	$handle((first) => {
 		const visible = $state.visible;
-		if (firstToggle) {
-			firstToggle = false;
+		if (first) return;
+		if (visible) {
+			$props?.onopen?.();
 		} else {
-			if (ontoggle) ontoggle(visible);
-			if (visible) {
-				if (onopen) onopen()
-			} else {
-				if (onclose) onclose(result);
-			}
+			$props?.onclose?.(result);
 		}
 	});
 
@@ -88,11 +67,11 @@ export default function Drawer($props: DrawerProps | undefined) {
 		// Get the button's result
 		switch (type) {
 			case "confirm": {
-				result = value || true;
+				result = value ?? true;
 				break;
 			}
 			case "cancel": {
-				result = value || false;
+				result = value ?? false;
 				break;
 			}
 			default: {
@@ -103,11 +82,6 @@ export default function Drawer($props: DrawerProps | undefined) {
 
 		// Hide the drawer
 		$state.visible = false;
-
-		// Call the callback
-		if ($props?.callback) {
-			$props?.callback(result);
-		}
 	}
 
 	function handleClickOutside(e: MouseEvent) {
@@ -116,12 +90,8 @@ export default function Drawer($props: DrawerProps | undefined) {
 	}
 
 	@render {
-		<div
-			{$props?.id}
-			class={["torp-drawer", $props?.class]}
-			{$props?.style}
-		>
+		<div {$props?.id} class={["torp-drawer", $props?.class]} {$props?.style}>
 			<slot />
 		</div>
 	}
-}
+}

package/dist/Drawer/DrawerContent.torp

@@ -1,21 +1,27 @@
 import type { ClassValue, StyleValue } from "@torpor/view";
-import { slide } from "../motion";
 import { addDocumentEvent, removeDocumentEvent } from "../utils/documentEvents";
-import { DrawerContextName, type DrawerContext } from "./DrawerTypes";
+import getId from "../utils/getId";
+import { type DrawerContext, DrawerContextName } from "./DrawerTypes";
+
+const FOCUSABLE_SELECTOR = 'a[href], button:not([disabled]), textarea:not([disabled]), input:not([disabled]), select:not([disabled]), [tabindex]:not([tabindex="-1"])';
 
 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;
 }
 
 /**
  * The content that is displayed for a Drawer when it is open.
  */
 export default function DrawerContent($props: DrawerContentProps | undefined) {
+	const defaultId = getId();
+
 	let drawer: HTMLElement;
 	let shown = false;
 	let closeOnClick = false;
@@ -27,6 +33,8 @@ export default function DrawerContent($props: DrawerContentProps | undefined) {
 	}
 	let $state = context.state;
 
+	$state.contentId = $props?.id ?? defaultId;
+
 	$run(() => {
 		if (!$state.visible) {
 			hide();
@@ -36,11 +44,20 @@ export default function DrawerContent($props: DrawerContentProps | undefined) {
 	function show() {
 		shown = true;
 
+		// Focus the first focusable element in the drawer for accessibility
+		if (drawer) {
+			const firstFocusable = drawer.querySelector<HTMLElement>(FOCUSABLE_SELECTOR);
+			if (firstFocusable) {
+				firstFocusable.focus();
+			}
+		}
+
 		// 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);
+		addDocumentEvent("keydown", handleDocumentKeyDown);
 	}
 
 	function hide() {
@@ -48,6 +65,10 @@ export default function DrawerContent($props: DrawerContentProps | undefined) {
 
 		removeDocumentEvent("mousedown", handleDocumentMouseDown);
 		removeDocumentEvent("click", handleDocumentClick);
+		removeDocumentEvent("keydown", handleDocumentKeyDown);
+		if (context.focusTrigger) {
+			context.focusTrigger();
+		}
 	}
 
 	function handleDocumentMouseDown() {
@@ -55,26 +76,59 @@ export default function DrawerContent($props: DrawerContentProps | undefined) {
 	}
 
 	function handleDocumentClick(e: MouseEvent) {
-		if (
-			closeOnClick &&
-			drawer &&
-			!drawer.contains(e.target as HTMLElement)
-		) {
+		if (closeOnClick && drawer && !drawer.contains(e.target as HTMLElement)) {
 			e.preventDefault();
 			context.handleClickOutside!(e);
 		}
 	}
 
+	function trapFocus(e: KeyboardEvent) {
+		if (e.key !== "Tab") return;
+
+		if (!drawer) return;
+
+		const focusableElements = drawer.querySelectorAll<HTMLElement>(FOCUSABLE_SELECTOR);
+		if (focusableElements.length === 0) {
+			e.preventDefault();
+			return;
+		}
+
+		const firstElement = focusableElements[0];
+		const lastElement = focusableElements[focusableElements.length - 1];
+
+		if (e.shiftKey) {
+			if (document.activeElement === firstElement) {
+				e.preventDefault();
+				lastElement.focus();
+			}
+		} else {
+			if (document.activeElement === lastElement) {
+				e.preventDefault();
+				firstElement.focus();
+			}
+		}
+	}
+
+	function handleDocumentKeyDown(e: KeyboardEvent) {
+		if (e.key === "Escape") {
+			e.preventDefault();
+			$state.visible = false;
+		}
+		trapFocus(e);
+	}
+
 	@render {
 		@if ($state.visible) {
 			<div
-				{$props?.id}
+				id={$props?.id ?? defaultId}
 				class={["torp-drawer-content", $props?.class]}
 				{$props?.style}
-				style="position: fixed;"
-				transition={(e) => slide(e, { side: $state.position })}
 				&ref={drawer}
-				onmount={show}
+				role="dialog"
+				aria-modal={$state.modal}
+				aria-label={$props?.ariaLabel}
+				aria-labelledby={$props?.ariaLabel ? undefined : $state.triggerId}
+				onmount={(_el) => show()}
 			>
 				<slot />
 			</div>

package/dist/Drawer/DrawerOverlay.torp

@@ -1,14 +1,14 @@
 import type { ClassValue, StyleValue } from "@torpor/view";
 import { disableScroll } from "../mount/disableScroll";
-import { DrawerContextName, type DrawerContext } from "./DrawerTypes";
+import { type DrawerContext, DrawerContextName } from "./DrawerTypes";
 
 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;
 }
 
 /**
@@ -33,7 +33,7 @@ export default function DrawerOverlay($props: DrawerOverlayProps | undefined) {
 				class={["torp-drawer-overlay", $props?.class]}
 				{$props?.style}
 				tabindex="-1"
-				onmount={(el) => disableScroll(el)}
+				onmount={(_el) => disableScroll()}
 			>
 				<slot />
 			</div>

package/dist/Drawer/DrawerTrigger.torp

@@ -1,19 +1,22 @@
 import type { ClassValue, StyleValue } from "@torpor/view";
-import { DrawerContextName, type DrawerContext } from "./DrawerTypes";
+import getId from "../utils/getId";
+import { type DrawerContext, DrawerContextName } from "./DrawerTypes";
 
 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;
 }
 
 /**
  * The button that causes a Drawer to appear or disappear.
  */
 export default function DrawerTrigger($props: DrawerTriggerProps | undefined) {
+	const defaultId = getId();
+
 	// Get stuff out of the DrawerContext
 	const context = $context[DrawerContextName] as DrawerContext;
 	if (!context) {
@@ -21,6 +24,11 @@ export default function DrawerTrigger($props: DrawerTriggerProps | undefined) {
 	}
 	let $state = context.state;
 
+	let button: HTMLButtonElement;
+
+	$state.triggerId = $props?.id ?? defaultId;
+	context.focusTrigger = () => button.focus();
+
 	function handleClick() {
 		$state.visible = !$state.visible;
 	}
@@ -28,10 +36,14 @@ export default function DrawerTrigger($props: DrawerTriggerProps | undefined) {
 	@render {
 		<button
 			type="button"
-			{$props?.id}
+			id={$props?.id ?? defaultId}
 			class={["torp-drawer-trigger", $props?.class]}
 			{$props?.style}
 			onclick={handleClick}
+			aria-expanded={$state.visible ? "true" : "false"}
+			aria-haspopup="dialog"
+			aria-controls={$state.contentId}
+			&ref={button}
 		>
 			<slot />
 		</button>