@torpor/ui 0.3.5 → 0.3.7

package/src/Modal/Modal.torp

@@ -1,122 +0,0 @@
-import type { ClassValue, StyleValue } from "@torpor/view";
-import { ModalContextName, type ModalContext, type ModalState } from "./ModalTypes";
-
-interface ModalProps {
-	/** An ID for the root element */
-	id?: string;
-	/** Classes for the root element */
-	class?: ClassValue,
-	/** Styles for the root element */
-	style?: StyleValue,
-	/** Whether the modal is visible  */
-	visible?: boolean,
-	/** A function to be called when the user selects a response */
-	callback?: ((value: any) => void),
-	/** Raised when the modal is opened or closed */
-	ontoggle?: (open: boolean) => void,
-	/** Raised when the modal has opened */
-	onopen?: () => void,
-	/** Raised when the modal has closed */
-	onclose?: (result: any) => void,
-}
-
-/**
- * A modal window that can be used to show rich content or obtain information from a user.
- *
- * See [the WAI ARIA guidelines for Modals](https://www.w3.org/WAI/ARIA/apg/patterns/dialogmodal/).
- *
- * The structure of a Modal is:
- *
- * ```
- * <Modal>
- * 	<ModalOverlay />
- * 	<ModalTrigger /> (optional)
- * 	<ModalContent />
- * </Modal>
- * ```
- */
-export default function Modal($props: ModalProps | undefined) {
-	let $state: ModalState = $watch({
-		visible: false,
-	})
-
-	// 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: ModalContext = {
-		handleButton,
-		handleClickOutside,
-		state: $state,
-	};
-	$context[ModalContextName] = context;
-
-	// Dispatch the toggle event when the modal 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 modal
-		$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-modal", $props?.class]}
-			{$props?.style}
-		>
-			<slot />
-		</div>
-	}
-}

package/src/Modal/ModalContent.torp

@@ -1,81 +0,0 @@
-import type { ClassValue, StyleValue } from "@torpor/view";
-import { addDocumentEvent, removeDocumentEvent } from "../utils/documentEvents";
-import { ModalContextName, type ModalContext } from "./ModalTypes";
-
-interface ModalContentProps {
-	/** 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 Modal when it is open, displayed
- * alongside an element.
- */
-export default function ModalContent($props: ModalContentProps | undefined) {
-	let div: HTMLDivElement;
-	let shown = false;
-	let closeOnClick = false;
-
-	// Get stuff out of the ModalContext
-	const context = $context[ModalContextName] as ModalContext;
-	if (!context) {
-		throw new Error("ModalContent must be contained within a Modal");
-	}
-	let $state = context.state;
-
-	$run(() => {
-		if (!$state.visible) {
-			hide();
-		}
-	});
-
-	function show() {
-		shown = true;
-
-		// HACK: Because this Modal 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 &&
-			div &&
-			!div.contains(e.target as HTMLElement)
-		) {
-			e.preventDefault();
-			context.handleClickOutside!(e);
-		}
-	}
-
-	@render {
-		@if ($state.visible) {
-			<div
-				{$props?.id}
-				class={["torp-modal-content", $props?.class]}
-				{$props?.style}
-				&ref={div}
-				onmount={show}
-			>
-				<slot />
-			</div>
-		}
-	}
-}

package/src/Modal/ModalOverlay.torp

@@ -1,42 +0,0 @@
-import type { ClassValue, StyleValue } from "@torpor/view";
-import { disableScroll } from "../mount/disableScroll";
-import { ModalContextName, type ModalContext } from "./ModalTypes";
-
-interface ModalOverlayProps {
-	/** 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 modal popup component (e.g. Context, Dialog or Popover).
- * Adding an overlay automatically sets the component's `modal` value to true.
- */
-export default function ModalOverlay($props: ModalOverlayProps | undefined) {
-	// Get stuff out of the ModalContext
-	const context = $context[ModalContextName] as ModalContext;
-	if (!context) {
-		throw new Error("ModalOverlay must be contained within a Modal");
-	}
-	let $state = context.state;
-
-	// Any popup with an overlay is modal
-	$state.modal = true;
-
-	@render {
-		@if ($state.visible) {
-			<div
-				{$props?.id}
-				class={["torp-modal-overlay", $props?.class]}
-				{$props?.style}
-				tabindex="-1"
-				onmount={(el) => disableScroll(el)}
-			>
-				<slot />
-			</div>
-		}
-	}
-}

package/src/Modal/ModalTrigger.torp

@@ -1,54 +0,0 @@
-import type { ClassValue, StyleValue } from "@torpor/view";
-import { ModalContextName, type ModalContext } from "./ModalTypes";
-import hoverTrigger from "../mount/hoverTrigger";
-
-interface ModalTriggerProps {
-	/** An ID for the root element */
-	id?: string;
-	/** Classes for the root element */
-	class?: ClassValue,
-	/** Styles for the root element */
-	style?: StyleValue,
-	/** Whether the modal is activated by click/press or by hover **/
-	activation?: "press" | "hover"
-}
-
-/**
- * The button that causes a Modal to appear or disappear.
- */
-export default function ModalTrigger($props: ModalTriggerProps | undefined) {
-	let activation = $props?.activation ?? "press";
-
-	// Get stuff out of the ModalContext
-	const context = $context[ModalContextName] as ModalContext;
-	if (!context) {
-		throw new Error("ModalTrigger must be contained within a Modal");
-	}
-	let $state = context.state;
-
-	function handleClick() {
-		if (activation !== "press") return;
-
-		$state.visible = !$state.visible;
-	}
-
-	function handleHover() {
-		if (activation !== "hover") return;
-
-		$state.visible = !$state.visible
-	}
-
-	@render {
-		<button
-			type="button"
-			{$props?.id}
-			class={["torp-modal-trigger", $props?.class]}
-			{$props?.style}
-			onclick={handleClick}
-			onmount={(el) => hoverTrigger(el, { onHover: handleHover, onExit: handleHover })}
-			&ref={context.anchorElement}
-		>
-			<slot />
-		</button>
-	}
-}

package/src/Modal/ModalTypes.ts

@@ -1,22 +0,0 @@
-export const ModalContextName = "Modal";
-
-/** The shared context for modal components (Contextual, Prompt and Modal) */
-export interface ModalContext {
-	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: ModalState;
-	// 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 ModalState {
-	visible: boolean;
-}

package/src/Modal/index.ts

@@ -1,10 +0,0 @@
-import Modal from "./Modal.torp";
-import ModalContent from "./ModalContent.torp";
-import ModalOverlay from "./ModalOverlay.torp";
-import ModalTrigger from "./ModalTrigger.torp";
-import showModal from "./showModal";
-import showPrompt from "./showPrompt";
-
-export { Modal, ModalContent, ModalOverlay, ModalTrigger };
-
-export { showModal, showPrompt };

package/src/Modal/showModal.ts

@@ -1,19 +0,0 @@
-// TODO: Allow passing in a variable -- so that you can show an inline modal
-import type { Component } from "@torpor/view";
-
-/**
- * Shows a modal component in code.
- * @param modal The modal component
- * @param props The properties for the modal component
- * @param target The target element to show the modal in
- * @returns The value selected by the user
- */
-export default function showModal(
-	modal: Component,
-	props?: Record<PropertyKey, any>,
-	target?: Element,
-): void {
-	// Create the modal
-	// TODO: This needs to clean up after itself, like the mount methods do
-	modal(target || document.body, null, props);
-}

package/src/Modal/showPrompt.ts

@@ -1,23 +0,0 @@
-import type { Component } from "@torpor/view";
-
-/**
- * Shows a modal component in code, and asynchronously returns the value selected by the user.
- * @param modal The modal component
- * @param props The properties for the modal component
- * @param target The target element to show the modal in
- * @returns The value selected by the user
- */
-export default function showPrompt(
-	modal: Component,
-	props?: Record<PropertyKey, any>,
-	target?: Element,
-): Promise<any> {
-	return new Promise((resolve) => {
-		// Add the promise as the callback
-		const allProps = Object.assign({}, props, { callback: resolve });
-
-		// Create the modal
-		// TODO: This needs to clean up after itself, like the use methods do
-		modal(target || document.body, null, allProps);
-	});
-}

package/src/NavMenu/NavMenu.torp

@@ -1,190 +0,0 @@
-import type { ClassValue, StyleValue } from "@torpor/view";
-import {
-	NavMenuContextName,
-	type NavMenuContext,
-	type ItemState,
-	NavMenuPopoutContextName,
-	type NavMenuPopoutContext
-} from "./NavMenuTypes";
-
-interface NavMenuProps {
-	/** 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 menu to screen readers  */
-	ariaLabel?: string | undefined,
-	/** The orientation of the menu, which affects keyboard navigation */
-	orientation?: "horizontal" | "vertical",
-}
-
-/**
- * A list of links for navigating a website.
- *
- * See [the WAI ARIA guidelines for Menus](https://www.w3.org/WAI/ARIA/apg/patterns/menu/).
- *
- * The structure of a NavMenu is:
- *
- * ```
- * <NavMenu>
- *	 <NavMenuLink />
- *	 <NavMenuSeparator /> (optional)
- *	 <NavMenuPopout /> (optional)
- *	 ...
- * </NavMenu>
- * ```
- */
-export default function NavMenu($props: NavMenuProps | undefined) {
-	let orientation = $props?.orientation ?? "horizontal";
-
-	// A collection containing the state and some functions for each item
-	let itemStates: ItemState[] = [];
-	let focusIndex = -1;
-
-	// Check whether this is a menu in a popout
-	const popoutContext = $context[NavMenuPopoutContextName] as NavMenuPopoutContext;
-	const inPopout = !!popoutContext;
-	let popoutState = popoutContext?.state;
-
-	// Set the focusFirstElement method in the PopoverContext(s) so that it can be called after everything has been shown
-	if (popoutContext) {
-		popoutContext.focusFirstElement = focusFirstElement;
-	}
-
-	// Set the context to pass down to items
-	let context: NavMenuContext = {
-		handleItemFocus,
-		handleItemKey,
-		registerItem
-	};
-	$context[NavMenuContextName] = context;
-
-	// If the NavMenu is not in a popout, focus its first item. Otherwise the popout will call focusFirstElement, below
-	function handleFocus() {
-		if (!popoutContext && itemStates.length) {
-			itemStates[0].setFocused();
-		}
-	}
-
-	function focusFirstElement() {
-		if (itemStates.length) {
-			itemStates[0].setFocused();
-		}
-	}
-
-	function registerItem(setFocused: () => void) {
-		// Add the item's state to the array and return its index
-		const newItemState: ItemState = {
-			setFocused
-		};
-		itemStates.push(newItemState);
-		itemStates = itemStates;
-		return { index: itemStates.length - 1 };
-	}
-
-	function handleItemFocus(index: number) {
-		focusIndex = index;
-	}
-
-	function handleItemKey(e: KeyboardEvent) {
-		switch (e.key) {
-			case "Esc":
-			case "Escape": {
-				if (inPopout) {
-					e.preventDefault();
-					//setPopoutVisible(false);
-					popoutState.visible = false;
-				}
-				break;
-			}
-			case "Right":
-			case "ArrowRight": {
-				if (orientation === "horizontal") {
-					e.preventDefault();
-					focusItem("next");
-				}
-				break;
-			}
-			case "Left":
-			case "ArrowLeft": {
-				if (orientation === "horizontal") {
-					e.preventDefault();
-					focusItem("previous");
-				}
-				break;
-			}
-			case "Down":
-			case "ArrowDown": {
-				if (orientation === "vertical") {
-					e.preventDefault();
-					focusItem("next");
-				}
-				break;
-			}
-			case "Up":
-			case "ArrowUp": {
-				if (orientation === "vertical") {
-					e.preventDefault();
-					focusItem("previous");
-				} else {
-					// TODO: This should be based on what side the menu shows on
-					// And on the orientation
-					if (inPopout) {
-						e.preventDefault();
-						popoutState.visible = false;
-					}
-				}
-				break;
-			}
-			case "Home": {
-				e.preventDefault();
-				focusItem("start");
-				break;
-			}
-			case "End": {
-				e.preventDefault();
-				focusItem("end");
-				break;
-			}
-		}
-	}
-
-	function focusItem(target: "start" | "previous" | "next" | "end") {
-		switch (target) {
-			case "start": {
-				focusIndex = 0;
-				break;
-			}
-			case "previous": {
-				focusIndex = Math.max(0, focusIndex - 1);
-				break;
-			}
-			case "next": {
-				focusIndex = Math.min(itemStates.length - 1, focusIndex + 1);
-				break;
-			}
-			case "end": {
-				focusIndex = itemStates.length - 1;
-				break;
-			}
-		}
-		itemStates[focusIndex]?.setFocused();
-	}
-
-	@render {
-		<nav
-			{$props?.id}
-			class={["torp-nav-menu", $props?.class]}
-			{$props?.style}
-			tabindex="0"
-			role="menubar"
-			aria-label={$props?.ariaLabel}
-			aria-orientation={orientation}
-			onfocus={handleFocus}
-		>
-			<slot />
-		</nav>
-	}
-}

package/src/NavMenu/NavMenuButton.torp

@@ -1,55 +0,0 @@
-import type { ClassValue, StyleValue } from "@torpor/view";
-import { NavMenuContextName, type NavMenuContext } from "./NavMenuTypes";
-
-interface NavMenuButtonProps {
-	/** An ID for the root element */
-	id?: string;
-	/** Classes for the root element */
-	class?: ClassValue,
-	/** Styles for the root element */
-	style?: StyleValue,
-	/** Whether this button is disabled  */
-	disabled?: boolean,
-}
-
-/**
- * A button that is placed in a NavMenu to carry out a non-navigation action such as logging out.
- *
- */
-export default function NavMenuButton($props: NavMenuButtonProps | undefined) {
-	let button: HTMLButtonElement;
-
-	// Get stuff out of the NavMenuContext
-	const menuContext = $context[NavMenuContextName] as NavMenuContext;
-	if (!menuContext) {
-		throw new Error("NavMenuButton must be contained within a NavMenu");
-	}
-	const { registerItem, handleItemKey, handleItemFocus } = menuContext;
-
-	// Register this item with the parent NavMenu and store the index
-	const { index } = registerItem(setFocused);
-
-	function setFocused() {
-		button.focus();
-	}
-
-	@render {
-		<button
-			{$props?.id}
-			class={["torp-nav-menu-button", $props?.class]}
-			{$props?.style}
-			type="button"
-			{$props?.disabled}
-			role="menuitem"
-			aria-disabled={$props?.disabled ? "true" : undefined}
-			data-disabled={$props?.disabled ? "true" : undefined}
-			onkeydown
-			onkeydown={handleItemKey}
-			onclick
-			onfocus={() => handleItemFocus(index)}
-			&ref={button}
-		>
-			<slot />
-		</button>
-	}
-}

package/src/NavMenu/NavMenuElement.torp

@@ -1,55 +0,0 @@
-import type { ClassValue, StyleValue } from "@torpor/view";
-import { NavMenuContextName, type NavMenuContext } from "./NavMenuTypes";
-
-interface NavMenuElementProps {
-	/** An ID for the root element */
-	id?: string;
-	/** Classes for the root element */
-	class?: ClassValue,
-	/** Styles for the root element */
-	style?: StyleValue,
-	/** Whether this button is disabled  */
-	disabled?: boolean,
-	/** An element that can be focused via keyboard navigation */
-	element?: HTMLElement,
-}
-
-/**
- * An element of any type that can be placed in a NavMenu.
- *
- */
-export default function NavMenuElement($props: NavMenuElementProps | undefined) {
-	// Get stuff out of the NavMenuContext
-	const menuContext = $context[NavMenuContextName] as NavMenuContext;
-	if (!menuContext) {
-		throw new Error("NavMenuElement must be contained within a NavMenu");
-	}
-	const { registerItem, handleItemKey, handleItemFocus } = menuContext;
-
-	// Register this item with the parent NavMenu and store the index
-	const { index } = registerItem(setFocused);
-
-	function setFocused() {
-		if ($props?.element) {
-			$props.element.focus();
-		}
-	}
-
-	@render {
-		<div
-			{$props?.id}
-			class={["torp-nav-menu-div", $props?.class]}
-			{$props?.style}
-			type="div"
-			role="menuitem"
-			aria-disabled={$props?.disabled ? "true" : undefined}
-			data-disabled={$props?.disabled ? "true" : undefined}
-			onkeydown
-			onkeydown={handleItemKey}
-			onclick
-			onfocus={() => handleItemFocus(index)}
-		>
-			<slot />
-		</div>
-	}
-}