@torpor/ui 0.3.5 → 0.3.6

package/src/Dialog/DialogButton.torp

@@ -1,66 +0,0 @@
-import type { ClassValue, StyleValue } from "@torpor/view";
-import { DialogContextName, type DialogContext } from "./DialogTypes";
-
-interface DialogButtonProps {
-	/** 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,
-	/** "confirm" if the button should respond to the Enter key or "cancel" if the button should respond to the Escape key */
-	type?: "confirm" | "cancel",
-	/** Whether this button is disabled */
-	disabled?: boolean,
-	/** Raised when the button is clicked */
-	onclick?: (e: MouseEvent) => void,
-}
-
-/**
- * A button that is placed in a DialogFooter and signals a response by a user.
- * 
- */
-export default function DialogButton($props: DialogButtonProps | undefined) {
-	let button: HTMLButtonElement;
-
-	// Get stuff out of the DialogContext
-	const context = $context[DialogContextName] as DialogContext;
-	if (!context) {
-		throw new Error("DialogButton must be contained within a Dialog");
-	}
-	const handleButton = context.handleButton;
-
-	$mount(() => {
-		// Store the confirm or cancel button in the DialogContext
-		if ($props?.type === "confirm") {
-			context.confirmButton = button;
-		} else if ($props?.type === "cancel") {
-			context.cancelButton = button;
-		}
-	});
-
-	function handleClick(e: MouseEvent) {
-		if ($props?.onclick) {
-			$props?.onclick(e)
-		}
-		if (handleButton) {
-			handleButton($props?.type, $props?.value);
-		}
-	}
-
-	@render {
-		<button
-			type="button"
-			{$props?.id}
-			class={["torp-dialog-button", $props?.class]}
-			{$props?.style}
-			disabled={$props?.disabled}
-			onclick={handleClick}
-			&ref={button}
-		>
-			<slot />
-		</button>
-	}
-}

package/src/Dialog/DialogFooter.torp

@@ -1,25 +0,0 @@
-import type { ClassValue, StyleValue } from "@torpor/view";
-
-interface DialogFooterProps {
-	/** An ID for the root element */
-	id?: string;
-	/** Classes for the root element */
-	class?: ClassValue,
-	/** Styles for the root element */
-	style?: StyleValue,
-}
-
-/**
- * The footer for a Dialog, which may contain one or more DialogButtons.
- */
-export default function DialogFooter($props: DialogFooterProps | undefined) {
-	@render {
-		<div
-			{$props?.id}
-			class={["torp-dialog-footer", $props?.class]}
-			{$props?.style}
-		>
-			<slot />
-		</div>
-	}
-}

package/src/Dialog/DialogHeader.torp

@@ -1,45 +0,0 @@
-import type { ClassValue, StyleValue } from "@torpor/view";
-import getId from "../utils/getId";
-import { DialogContextName, type DialogContext } from "./DialogTypes";
-
-interface DialogHeaderProps {
-	/** An ID for the root element */
-	id?: string;
-	/** Classes for the root element */
-	class?: ClassValue,
-	/** Styles for the root element */
-	style?: StyleValue,
-	/** Whether the header will be announced by screen readers when the Dialog is opened */
-	ariaAnnounce?: boolean,
-}
-
-/**
- * The header for a Dialog. Content in the header will be announced by screen
- * readers when the Dialog is opened, unless ariaAnnounce is false.
- * 
- */
-export default function DialogHeader($props: DialogHeaderProps | undefined) {
-	let defaultId = getId();
-
-	// Get stuff out of the DialogContext
-	const context = $context[DialogContextName] as DialogContext;
-	if (!context) {
-		throw new Error("DialogHeader must be contained within a Dialog");
-	}
-	let $state = context.state;
-
-	// Set the header id for using in the Dialog's ARIA attributes
-	if ($props?.ariaAnnounce !== false) {
-		$state.headerId = $props?.id ?? defaultId;
-	}
-
-	@render {
-		<div
-			id={$props?.id ?? defaultId}
-			class={["torp-dialog-footer", $props?.class]}
-			{$props?.style}
-		>
-			<slot />
-		</div>
-	}
-}

package/src/Dialog/DialogTypes.ts

@@ -1,17 +0,0 @@
-export const DialogContextName = "Dialog";
-
-export type HandleButtonPress = (type: "confirm" | "cancel" | undefined, value?: any) => void;
-
-export interface DialogContext {
-	handleButton?: HandleButtonPress;
-	state: DialogState;
-	anchorElement?: HTMLElement;
-	confirmButton?: HTMLButtonElement;
-	cancelButton?: HTMLButtonElement;
-}
-
-export interface DialogState {
-	dialogId: string;
-	headerId: string;
-	bodyId: string;
-}

package/src/Dialog/index.ts

@@ -1,7 +0,0 @@
-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, DialogHeader, DialogBody, DialogFooter, DialogButton };

package/src/Disclosure/Disclosure.torp

@@ -1,82 +0,0 @@
-import type { ClassValue, StyleValue } from "@torpor/view";
-import { DisclosureContextName, type DisclosureContext, type DisclosureState } from "./DisclosureTypes";
-
-interface DisclosureProps {
-	/** An ID for the root element */
-	id?: string;
-	/** Classes for the root element */
-	class?: ClassValue,
-	/** Styles for the root element */
-	style?: StyleValue,
-	/** Whether the disclosure is expanded and its content visible */
-	expanded?: boolean,
-	/** If set to true, the user cannot interact with this disclosure */
-	disabled?: boolean,
-	/** Raised when the disclosure is opened or closed */
-	ontoggle?: (open: boolean) => void,
-}
-
-/**
- * An interactive header that enables users to reveal or hide an associated section of content.
- *
- * See [the WAI ARIA guidelines for Disclosures](https://www.w3.org/WAI/ARIA/apg/patterns/disclosure/).
- *
- * The structure of a Disclosure is:
- *
- * ```
- * <Disclosure>
- * 	<DisclosureHeader>
- * 		<DisclosureTrigger />
- * 	</DisclosureHeader>
- * 	<DisclosureContent />
- * </Disclosure>
- * ```
- */
-export default function Disclosure($props: DisclosureProps | undefined) {
-	let $state: DisclosureState = $watch({
-		expanded: false,
-		disabled: false,
-		headerId: "",
-		contentId: "",
-	});
-
-	// Update $state with $props
-	$run(() => {
-		$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
-	const itemContext: DisclosureContext = {
-		state: $state,
-	};
-	$context[DisclosureContextName] = itemContext;
-
-	// Dispatch the toggle event when the value of expanded changes
-	let firstToggle = true;
-	$run(() => {
-		const ev = $props?.ontoggle;
-		const expanded = $state.expanded;
-		if (firstToggle) {
-			firstToggle = false;
-		} else if (ev) {
-			ev(expanded);
-		}
-	});
-
-	@render {
-		<div
-			{$props?.id}
-			class={["torp-disclosure-item", $props?.class]}
-			{$props?.style}
-			data-state={$state.expanded ? "open" : "closed"}
-			data-disabled={$state.disabled ? "true" : undefined}
-		>
-			<slot />
-		</div>
-	}
-}

package/src/Disclosure/DisclosureContent.torp

@@ -1,46 +0,0 @@
-import type { ClassValue, StyleValue } from "@torpor/view";
-import getId from "../utils/getId";
-import { DisclosureContextName, type DisclosureContext } from "./DisclosureTypes";
-
-interface DisclosureContentProps {
-	/** An ID for the root element */
-	id?: string;
-	/** Classes for the root element */
-	class?: ClassValue,
-	/** Styles for the root element */
-	style?: StyleValue,
-	/** Whether this content should act as a region. Set this when the content contains heading elements or a nested Disclosure */
-	ariaRegion?: boolean,
-}
-
-/**
- * Content for a Disclosure, which can be revealed or hidden by an associated DisclosureTrigger.
- */
-export default function DisclosureContent($props: DisclosureContentProps | undefined) {
-	let defaultId = getId();
-
-	const context = $context[DisclosureContextName] as DisclosureContext;
-	if (!context) {
-		throw new Error("DisclosureContent must be contained within a Disclosure");
-	}
-	let $state = context.state
-
-	// Set the content ID so that it can be used with aria-controls in DisclosureTrigger
-	$state.contentId = $props?.id ?? defaultId;
-
-	@render {
-		<div
-			id={$props?.id ?? defaultId}
-			class={["torp-disclosure-content", $props?.class]}
-			{$props?.style}
-			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 />
-			}
-		</div>
-	}
-}

package/src/Disclosure/DisclosureHeader.torp

@@ -1,45 +0,0 @@
-import type { ClassValue, StyleValue } from "@torpor/view";
-import { DisclosureContextName, type DisclosureContext } from "./DisclosureTypes";
-
-interface DisclosureHeaderProps {
-	/** An ID for the root element */
-	id?: string;
-	/** Classes for the root element */
-	class?: ClassValue,
-	/** Styles for the root element */
-	style?: StyleValue,
-	/** The type of HTML header to use */
-	as?: "h1" | "h2" | "h3" | "h4" | "h5" | "h6",
-}
-
-/**
- * The header for a Disclosure, which contains the DisclosureTrigger.
- *
- * The structure of a DisclosureHeader is:
- * 
- * ```
- * <DisclosureHeader>
- * 	<DisclosureTrigger />
- * </DisclosureHeader>
- * ```
- */
-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");
-	}
-	let $state = context.state
-
-	@render {
-		@// TODO: $props.as
-		<h4
-			{$props?.id}
-			class={["torp-disclosure-header", $props?.class]}
-			{$props?.style}
-			data-state={$state.expanded ? "open" : "closed"}
-			data-disabled={$state.disabled ? "true" : undefined}
-		>
-			<slot />
-		</h4>
-	}
-}

package/src/Disclosure/DisclosureTrigger.torp

@@ -1,47 +0,0 @@
-import type { ClassValue, StyleValue } from "@torpor/view";
-import getId from "../utils/getId";
-import { DisclosureContextName, type DisclosureContext } from "./DisclosureTypes";
-
-interface DisclosureTriggerProps {
-	/** An ID for the root element */
-	id?: string;
-	/** Classes for the root element */
-	class?: ClassValue,
-	/** Styles for the root element */
-	style?: StyleValue,
-}
-
-/**
- * A header button for a Disclosure, which can be used to reveal or hide an associated DisclosureContent.
- */
-export default function DisclosureTrigger($props: DisclosureTriggerProps | undefined) {
-	let defaultId = getId();
-
-	// Get stuff out of the DisclosureContext
-	const context = $context[DisclosureContextName] as DisclosureContext;
-	if (!context) {
-		throw new Error("DisclosureTrigger must be contained within a Disclosure");
-	}
-	let $state = context.state;
-
-	// Set the header ID so that it can be used with aria-labelledby in DisclosureContent
-	$state.headerId = $props?.id ?? defaultId;
-
-	@render {
-		<button
-			type="button"
-			id={$props?.id ?? defaultId}
-			class={["torp-disclosure-trigger", $props?.class]}
-			{$props?.style}
-			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 />
-		</button>
-	}
-}

package/src/Disclosure/DisclosureTypes.ts

@@ -1,13 +0,0 @@
-export const DisclosureContextName = "Disclosure";
-
-export interface DisclosureContext {
-	/** The reactive state for a Disclosure */
-	state: DisclosureState;
-}
-
-export interface DisclosureState {
-	headerId: string;
-	contentId: string;
-	expanded: boolean;
-	disabled: boolean;
-}

package/src/Disclosure/index.ts

@@ -1,6 +0,0 @@
-import Disclosure from "./Disclosure.torp";
-import DisclosureContent from "./DisclosureContent.torp";
-import DisclosureHeader from "./DisclosureHeader.torp";
-import DisclosureTrigger from "./DisclosureTrigger.torp";
-
-export { Disclosure, DisclosureHeader, DisclosureTrigger, DisclosureContent };

package/src/Drawer/Drawer.torp

@@ -1,127 +0,0 @@
-import type { ClassValue, StyleValue } from "@torpor/view";
-import { DrawerContextName, type DrawerContext, type DrawerState } from "./DrawerTypes";
-
-interface DrawerProps {
-	/** An ID for the root element */
-	id?: string;
-	/** Classes for the root element */
-	class?: ClassValue,
-	/** Styles for the root element */
-	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,
-	/** Whether the drawer is visible  */
-	visible?: boolean,
-	/** 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>
- * ```
- */
-export default function Drawer($props: DrawerProps | undefined) {
-	let $state: DrawerState = $watch({
-		visible: false,
-		modal: $props?.modal ?? false,
-		position: $props?.position ?? "left",
-	});
-
-	// Sync props and state
-	$run(() => {
-		$state.visible = $props?.visible ?? false;
-	});
-	$run(() => {
-		if ($props !== undefined) {
-			$props.visible = $state.visible;
-		}
-	});
-
-	let result: any;
-
-	// Set the context to pass down to items
-	let context: DrawerContext = {
-		handleButton,
-		handleClickOutside,
-		state: $state,
-	};
-	$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;
-		const visible = $state.visible;
-		if (firstToggle) {
-			firstToggle = false;
-		} else {
-			if (ontoggle) ontoggle(visible);
-			if (visible) {
-				if (onopen) onopen()
-			} else {
-				if (onclose) onclose(result);
-			}
-		}
-	});
-
-	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;
-			}
-		}
-
-		// Hide the drawer
-		$state.visible = false;
-
-		// Call the callback
-		if ($props?.callback) {
-			$props?.callback(result);
-		}
-	}
-
-	function handleClickOutside(e: MouseEvent) {
-		e.preventDefault();
-		$state.visible = false;
-	}
-
-	@render {
-		<div
-			{$props?.id}
-			class={["torp-drawer", $props?.class]}
-			{$props?.style}
-		>
-			<slot />
-		</div>
-	}
-}

package/src/Drawer/DrawerContent.torp

@@ -1,83 +0,0 @@
-import type { ClassValue, StyleValue } 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;
-	/** Classes for the root element */
-	class?: ClassValue,
-	/** Styles for the root element */
-	style?: StyleValue,
-}
-
-/**
- * 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]}
-				{$props?.style}
-				style="position: fixed;"
-				transition={(e) => slide(e, { side: $state.position })}
-				&ref={drawer}
-				onmount={show}
-			>
-				<slot />
-			</div>
-		}
-	}
-}

package/src/Drawer/DrawerOverlay.torp

@@ -1,42 +0,0 @@
-import type { ClassValue, StyleValue } from "@torpor/view";
-import { disableScroll } from "../mount/disableScroll";
-import { DrawerContextName, type DrawerContext } from "./DrawerTypes";
-
-interface DrawerOverlayProps {
-	/** An ID for the root element */
-	id?: string;
-	/** Classes for the root element */
-	class?: ClassValue,
-	/** Styles for the root element */
-	style?: StyleValue,
-}
-
-/**
- * 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]}
-				{$props?.style}
-				tabindex="-1"
-				onmount={(el) => disableScroll(el)}
-			>
-				<slot />
-			</div>
-		}
-	}
-}