@torpor/ui 0.3.4 → 0.3.6

package/src/Calendar/CalendarDay.torp

@@ -1,78 +0,0 @@
-import type { ClassValue, StyleValue } from "@torpor/view";
-import { areDatesEqual } from "../utils/dateUtils";
-import { type CalendarContext, type CalendarEvent, CalendarContextName } from "./CalendarTypes";
-
-interface CalendarDayProps {
-	/** An ID for the root element */
-	id?: string;
-	/** Classes for the root element */
-	class?: ClassValue,
-	/** Styles for the root element */
-	style?: StyleValue,
-}
-
-export default function CalendarDay($props: CalendarDayProps) {
-	$props ??= $watch({});
-	$props.date ??= new Date();
-	$props.selectable ??= false;
-	$props.muted ??= false;
-	$props.active ??= false;
-	$props.events ??= [];
-
-	// HACK: can't unwrap in @render
-	let date = $unwrap($props.date);
-
-	// Register this item with the parent Calendar, which will handle toggling active for all days
-	const { registerDay } = $context[CalendarContextName] as CalendarContext;
-	registerDay($props.date, setActive);
-
-	// This function is called by the parent Calendar to set this item's active value
-	function setActive(value: boolean) {
-		//if (active !== value) {
-		//	active = value;
-		//	dispatch("activeChange", value);
-		//}
-	}
-
-	function isToday() {
-		const today = new Date();
-		return areDatesEqual(date, today);
-	}
-
-	async function handleClick() {
-		//dispatch("click", date);
-		if ($props.onclick) $props.onclick($props.date);
-	}
-
-	async function handleKey() {
-		//dispatch("click", date);
-		if ($props.onkeydown) $props.onkeydown();
-	}
-
-	@render {
-		<div 
-			{$props?.id}
-			class={[
-				`torp-calendar-day ${$props?.class ?? ""}`.trim(),
-				{
-					muted: $props.muted,
-					today: isToday(),
-					active: $props.selectable && $props.active
-				}
-			]}
-		>
-			@if ($props.selectable) {
-				<button type="button" tabindex="-1" onclick={handleClick} onkeydown={handleKey}>
-					<span>{date.getDate()}</span>
-				</button>
-			} else {
-				<span>{date.getDate()}</span>
-			}
-			<ul class={`torp-calendar-day-events ${$props?.class ?? ""}`.trim()}>
-				@for (ev of $props.events) {
-					<li title={ev.content} />
-				}
-			</ul>
-		</div>
-	}
-}

package/src/Calendar/CalendarTypes.ts

@@ -1,22 +0,0 @@
-export const CalendarContextName = "Calendar";
-
-export interface CalendarContext {
-	// The registerDay function is called from each CalendarDay to register itself with this
-	// Calendar. They pass us a setActive method that we can call
-	registerDay: (date: Date, setActive: (value: boolean) => void) => void;
-}
-
-export interface DayState {
-	date: Date;
-	muted: boolean;
-	state: {
-		active: boolean;
-	};
-	setActive?: (value: boolean) => void;
-}
-
-export interface CalendarEvent {
-	date: Date;
-	content: string;
-	color: string;
-}

package/src/Calendar/index.ts

@@ -1,4 +0,0 @@
-import Calendar from "./Calendar.torp";
-import CalendarDay from "./CalendarDay.torp";
-
-export { Calendar, CalendarDay };

package/src/Contextual/Contextual.torp

@@ -1,129 +0,0 @@
-import type { ClassValue, StyleValue } from "@torpor/view";
-import { ContextualContextName, type Point, type ContextualContext, type ContextualState } from "./ContextualTypes";
-
-interface ContextualProps {
-	/** An ID for the root element */
-	id?: string;
-	/** Classes for the root element */
-	class?: ClassValue,
-	/** Styles for the root element */
-	style?: StyleValue,
-	/** Whether the contextual is modal. If true, an overlay should be supplied to obscure outside content, and only the context content will be visible to screen readers  */
-	modal?: boolean,
-	/** Whether the contextual is visible  */
-	visible?: boolean,
-	/** The element to anchor this contextual to, as an alternative to supplying a ContextualTrigger  */
-	anchor?: HTMLElement,
-	/** The position to display this contextual at  */
-	position?: Point,
-	/** A function to be called when the user selects a response */
-	callback?: ((value: any) => void),
-	/** Raised when this contextual is opened or closed */
-	ontoggle?: (open: boolean) => void,
-	/** Raised when the contextual has opened */
-	onopen?: () => void,
-	/** Raised when the contextual has closed */
-	onclose?: (result: any) => void,
-}
-
-/**
- * A contextual window that is shown to the user at the cursor's location.
- *
- * The structure of a Contextual is:
- *
- * ```
- * <Contextual>
- * 	<ContextualTrigger /> (optional)
- * 	<ContextualContent />
- * </Contextual>
- * ```
- */
-export default function Contextual($props: ContextualProps | undefined) {
-	let $state: ContextualState = $watch({
-		visible: false,
-		position: { x: 0, y: 0 }
-	})
-
-	// Sync props and state
-	$run(() => {
-		$state.visible = $props?.visible ?? false;
-		$state.position = $props?.position ?? { x: 0, y: 0 };
-	});
-	$run(() => {
-		if ($props !== undefined) {
-			$props.visible = $state.visible;
-		}
-	});
-
-	let result: any;
-
-	// Set the context to pass down to items
-	let context: ContextualContext = {
-		handleButton,
-		handleClickOutside,
-		state: $state,
-		modal: $props?.modal,
-		anchorElement: $props?.anchor ? $unwrap($props.anchor) : undefined,
-	};
-	$context[ContextualContextName] = context;
-
-	// Dispatch the toggle event when the contextual 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 contextual
-		$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-context", $props?.class]}
-			{$props?.style}
-		>
-			<slot />
-		</div>
-	}
-}

package/src/Contextual/ContextualContent.torp

@@ -1,112 +0,0 @@
-import type { ClassValue, StyleValue } from "@torpor/view";
-import { addDocumentEvent, removeDocumentEvent } from "../utils/documentEvents";
-import getScrollParent from "../utils/getScrollParent";
-import setContextPosition from "../utils/setContextPosition";
-import { ContextualContextName, type ContextualContext } from "./ContextualTypes";
-
-interface ContextualContentProps {
-	/** 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 Contextual when it is open, displayed at the
- * position that the user right-clicked.
- */
-export default function ContextualContent($props: ContextualContentProps | undefined) {	
-	let div: HTMLDivElement;
-	let shown = false;
-	let closeOnClick = false;
-
-	// Get stuff out of the ContextualContext
-	const context = $context[ContextualContextName] as ContextualContext;
-	if (!context) {
-		throw new Error("ContextualContent must be contained within a Contextual");
-	}
-	let $state = context.state;
-
-	$run(() => {
-		if (!$state.visible) {
-			hide();
-		}
-	});
-
-	function show() {
-		shown = true;
-
-		// HACK: Because this Contextual 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);
-
-		// Set the position and listen for window resize and scroll to reset the position
-		setPosition();
-		const anchorElement = context.anchorElement!;
-		const scrollParent = getScrollParent(anchorElement)
-		scrollParent.addEventListener("resize", setPosition);
-		scrollParent.addEventListener("scroll", setPosition);
-		if (context.focusFirstElement) {
-			context.focusFirstElement();
-		}
-	}
-
-	function hide() {
-		if (!shown) return;
-
-		removeDocumentEvent("mousedown", handleDocumentMouseDown);
-		removeDocumentEvent("click", handleDocumentClick);
-
-		// Stop listening for window resize and focus the anchor element per WAI guidelines
-		const anchorElement = context.anchorElement!;
-		const scrollParent = getScrollParent(anchorElement)
-		scrollParent.removeEventListener("resize", setPosition);
-		scrollParent.removeEventListener("scroll", setPosition);
-		if (anchorElement.focus) {
-			anchorElement.focus();
-		}
-	}
-
-	function handleDocumentMouseDown() {
-		closeOnClick = true;
-	}
-
-	function handleDocumentClick(e: MouseEvent) {
-		if (
-			closeOnClick &&
-			div &&
-			!div.contains(e.target as HTMLElement) &&
-			(!context.anchorElement || !context.anchorElement.contains(e.target as HTMLElement))
-		) {
-			context.handleClickOutside!(e);
-		}
-	}
-
-	function setPosition() {
-		if (!context.anchorElement) {
-			throw new Error("ContextualContent must have an anchor element");
-		}
-
-		if ($state.position) {
-			setContextPosition(context.anchorElement, div, $state.position);
-		}
-	}
-
-	@render {
-		@if ($state.visible) {
-			<div
-				{$props?.id}
-				class={["torp-popover-content-contextual", $props?.class]}
-				{$props?.style}
-				&ref={div}
-				onmount={show}
-			>
-				<slot />
-			</div>
-		}
-	}
-}

package/src/Contextual/ContextualTrigger.torp

@@ -1,70 +0,0 @@
-import type { ClassValue, StyleValue } from "@torpor/view";
-import { ContextualContextName, type ContextualContext } from "./ContextualTypes";
-import hoverTrigger from "../mount/hoverTrigger";
-
-interface ContextualTriggerProps {
-	/** An ID for the root element */
-	id?: string;
-	/** Classes for the root element */
-	class?: ClassValue,
-	/** Styles for the root element */
-	style?: StyleValue,
-	/** Whether the popover is activated by click/press or by hover **/
-	activation?: "press" | "hover"
-}
-
-/**
- * The element that causes a Contextual to appear or disappear when right-clicked.
- */
-export default function ContextualTrigger($props: ContextualTriggerProps | undefined) {
-	let activation = $props?.activation ?? "press";
-
-	// Get stuff out of the ContextualContext
-	const context = $context[ContextualContextName] as ContextualContext;
-	if (!context) {
-		throw new Error("ContextualTrigger must be contained within a Contextual");
-	}
-	let $state = context.state;
-
-	function handleContextualMenu(e: MouseEvent & { currentTarget: EventTarget & HTMLDivElement }) {
-		if (activation !== "press") return;
-
-		e.preventDefault();
-		if ($state.position) {
-			// Get the position relative to the element, so we can reposition on scroll
-			const rect = e.currentTarget.getBoundingClientRect();
-			const x = e.clientX - rect.left;
-			const y = e.clientY - rect.top;
-			$state.position = { x, y };
-			//$state.position = { x: window.scrollX + e.clientX, y: window.scrollY + e.clientY };
-		}
-		$state.visible = !$state.visible;
-	}
-
-	function handleHover(node: HTMLElement, e: MouseEvent) {
-		if (activation !== "hover") return;
-
-		if ($state.position) {
-			// Get the position relative to the element, so we can reposition on scroll
-			const rect = node.getBoundingClientRect();
-			const x = e.clientX - rect.left;
-			const y = e.clientY - rect.top;
-			$state.position = { x, y };
-			//$state.position = { x: window.scrollX + e.clientX, y: window.scrollY + e.clientY };
-		}
-		$state.visible = !$state.visible
-	}
-
-	@render {
-		<div
-			{$props?.id}
-			class={["torp-popover-trigger-contextual", $props?.class]}
-			{$props?.style}
-			oncontextmenu={handleContextualMenu}
-			onmount={(el) => hoverTrigger(el, { onHover: handleHover, onExit: handleHover })}
-			&ref={context.anchorElement}
-		>
-			<slot />
-		</div>
-	}
-}

package/src/Contextual/ContextualTypes.ts

@@ -1,30 +0,0 @@
-export const ContextualContextName = "Contextual";
-
-/** The shared context for popover components (Contextual, Prompt and Contextual) */
-export interface ContextualContext {
-	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: ContextualState;
-	//modal: boolean;
-	anchorElement?: HTMLElement;
-	// 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 ContextualState {
-	visible: boolean;
-	position: Point;
-}
-
-export interface Point {
-	x: number;
-	y: number;
-}

package/src/Contextual/index.ts

@@ -1,5 +0,0 @@
-import Contextual from "./Contextual.torp";
-import ContextualContent from "./ContextualContent.torp";
-import ContextualTrigger from "./ContextualTrigger.torp";
-
-export { Contextual, ContextualContent, ContextualTrigger };

package/src/Dialog/Dialog.torp

@@ -1,136 +0,0 @@
-import type { ClassValue, StyleValue } from "@torpor/view";
-import getId from "../utils/getId";
-import { trapFocus, type TrapFocusOptions } from "../mount/trapFocus";
-import { ModalContextName, type ModalContext } from "../Modal/ModalTypes";
-import { PopoverContextName } from "../Popover/PopoverTypes";
-import { DialogContextName, type DialogContext, type DialogState, type HandleButtonPress } from "./DialogTypes";
-
-interface DialogProps {
-	/** An ID for the root element */
-	id?: string;
-	/** Classes for the root element */
-	class?: ClassValue,
-	/** Styles for the root element */
-	style?: StyleValue,
-	/** An ARIA label for describing the popover to screen readers  */
-	ariaLabel?: string,
-	/** Whether the dialog should alert the user via the screen reader */
-	alert?: boolean,
-}
-
-/**
- * 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/).
- * 
- * The structure of a Dialog is:
- * 
- * ```
- * <Dialog>
- * 	<ModalOverlay /> (optional -- will set `modal` to true)
- * 	<DialogHeader /> (optional)
- * 	<DialogBody /> (optional)
- * 	<DialogFooter> (optional)
- * 		<DialogButton /> (optional)
- * 	</DialogFooter>
- * </Dialog>
- * ```
- * 
- */
-export default function Dialog($props: DialogProps | undefined) {
-	let defaultId = getId();
-
-	//let div: HTMLDivElement;
-
-	let trapFocusOptions: TrapFocusOptions = {
-		focusableElements: []
-	};
-
-	// Maybe get stuff out of a Modal context
-	let modal = false;
-	let visible = true;
-	let handleButton: HandleButtonPress | undefined = undefined;
-	const modalContext = $context[ModalContextName] ?? $context[PopoverContextName] as ModalContext;
-	if (modalContext) {
-		modal = true;
-		visible = modalContext.state.visible;
-		handleButton = modalContext.handleButton;
-
-		modalContext.handleClickOutside = handleClickOutside;
-		// Set the focusFirstElement method in the ModalContext so that it can be
-		// called after everything has been shown
-		modalContext.focusFirstElement = focusFirstElement;
-	}
-
-	// Set the IDs for using in the Dialog's ARIA attributes
-	let $state: DialogState = $watch({
-		dialogId: $props?.id ?? defaultId,
-		headerId: "",
-		bodyId: "",
-		visible
-	})
-
-	// Set the context to pass down to items
-	let context: DialogContext = {
-		handleButton,
-		state: $state,
-		anchorElement: modalContext ? modalContext.anchorElement : undefined
-	};
-	$context[DialogContextName] = context;
-
-	function focusFirstElement() {
-		if (trapFocusOptions.focusableElements.length) {
-			trapFocusOptions.focusableElements[0].focus();
-		}
-	}
-
-	function handleClickOutside(e: MouseEvent) {
-		// Don't allow the user to click outside -- they must press a button or
-		// the Esc key
-		e.preventDefault();
-		if (!modal) {
-			modalContext.state.visible = false;
-		}
-	}
-
-	function handleKey(e: KeyboardEvent) {
-		switch (e.key) {
-			case "Esc":
-			case "Escape": {
-				if (context.cancelButton) {
-					context.cancelButton.click();
-					e.preventDefault();
-				}
-				break;
-			}
-			case "Enter": {
-				if (context.confirmButton) {
-					context.confirmButton.click();
-					e.preventDefault();
-				}
-				break;
-			}
-		}
-	}
-
-	@render {
-		<div
-			id={$props?.id ?? defaultId}
-			class={["torp-dialog", $props?.class]}
-			{$props?.style}
-			tabindex="0"
-			role={$props?.alert === true ? "alertdialog" : "dialog"}
-			aria-modal={modal}
-			aria-label={$props?.ariaLabel}
-			aria-labelledby={!$props?.ariaLabel && $state.headerId ? $state.headerId : undefined}
-			aria-describedby={$state.bodyId ? $state.bodyId : undefined}
-			onkeydown={handleKey}
-			onmount={(el) => trapFocus(el, trapFocusOptions)}
-			@//&ref={div}
-		>
-			<slot />
-		</div>
-	}
-}

package/src/Dialog/DialogBody.torp

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