@torpor/ui 0.3.4 → 0.3.6

package/src/Notification/NotificationTypes.ts

@@ -1,5 +0,0 @@
-export const NotificationContextName = 'Notification';
-
-export interface NotificationContext {
-	closeNotification: () => void;
-}

package/src/Notification/index.ts

@@ -1,13 +0,0 @@
-import Notification from "./Notification.torp";
-import NotificationClose from "./NotificationClose.torp";
-import NotificationContainer from "./NotificationContainer.torp";
-import NotificationContent from "./NotificationContent.torp";
-import showNotification from "./showNotification";
-
-export {
-	Notification,
-	NotificationContainer,
-	NotificationContent,
-	NotificationClose,
-	showNotification,
-};

package/src/Notification/showNotification.ts

@@ -1,30 +0,0 @@
-import { mount } from "@torpor/view";
-
-/**
- * Shows a notification component in code.
- * @param notification The notification component
- * @param props The properties for the notification component
- * @param target The target element to show the notification in
- */
-export default function showNotification(notification: any, props: any, target?: Element): void {
-	if (!target) {
-		// Put the notification in the first NotificationContainer, or the
-		// document body if there are no NotificationContainers
-		target = document.getElementsByClassName("torp-notification-container")[0];
-		if (!target) {
-			throw new Error("No notification container found");
-		}
-	}
-
-	// HACK: Should allow mounting in a non-empty container
-	// Move existing nodes into a fragment, and add them back after mounting
-	var fragment = document.createDocumentFragment();
-	while (target.firstChild) {
-		fragment.append(target.firstChild);
-	}
-
-	// Create the notification
-	mount(target, notification, props);
-
-	target.prepend(fragment);
-}

package/src/Popover/Popover.torp

@@ -1,129 +0,0 @@
-import type { ClassValue, StyleValue } from "@torpor/view";
-import { PopoverContextName, type Point, type PopoverContext, type PopoverState } from "./PopoverTypes";
-
-interface PopoverProps {
-	/** 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 modal. If true, an overlay should be supplied to obscure outside content, and only the popover content will be visible to screen readers  */
-	modal?: boolean,
-	/** Whether the popover is visible  */
-	visible?: boolean,
-	/** The element to anchor this popover to, as an alternative to supplying a PopoverTrigger  */
-	anchor?: HTMLElement,
-	/** The position to display this popover at if it's contextual, as an alternative to supplying a PopoverTriggerContextual  */
-	position?: Point,
-	/** A function to be called when the user selects a response */
-	callback?: ((value: any) => void),
-	/** Raised when the popover is opened or closed */
-	ontoggle?: (open: boolean) => void,
-	/** Raised when the popover has opened */
-	onopen?: () => void,
-	/** Raised when the popover has closed */
-	onclose?: (result: any) => void,
-}
-
-/**
- * A popover window that is shown to the user relative to an anchor element.
- *
- * The structure of a Popover is:
- *
- * ```
- * <Popover>
- * 	<PopoverTrigger /> (optional)
- * 	<PopoverContent />
- * </Popover>
- * ```
- */
-export default function Popover($props: PopoverProps | undefined) {
-	let $state: PopoverState = $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: PopoverContext = {
-		handleButton,
-		handleClickOutside,
-		state: $state,
-		modal: $props?.modal,
-		anchorElement: $props?.anchor ? $unwrap($props.anchor) : undefined,
-	};
-	$context[PopoverContextName] = context;
-
-	// Dispatch the toggle event when the popover 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 popover
-		$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-popover", $props?.class]}
-			{$props?.style}
-		>
-			<slot />
-		</div>
-	}
-}

package/src/Popover/PopoverContent.torp

@@ -1,117 +0,0 @@
-import type { ClassValue, StyleValue } from "@torpor/view";
-import { addDocumentEvent, removeDocumentEvent } from "../utils/documentEvents";
-import getScrollParent from "../utils/getScrollParent";
-import setPopoverPosition from "../utils/setPopoverPosition";
-import { PopoverContextName, type PopoverContext } from "./PopoverTypes";
-
-interface PopoverContentProps {
-	/** An ID for the root element */
-	id?: string;
-	/** Classes for the root element */
-	class?: ClassValue,
-	/** Styles for the root element */
-	style?: StyleValue,
-	/** Where the popover will be shown, relative to the popover trigger */
-	side?: "top" | "right" | "bottom" | "left",
-	/** How the popover will be aligned, relative to the popover trigger */
-	alignment?: "start" | "center" | "end",
-}
-
-/**
- * The content that is displayed for a Popover when it is open, displayed
- * alongside an element.
- */
-export default function PopoverContent($props?: PopoverContentProps | undefined) {
-	let div: HTMLDivElement;
-	let shown = false;
-	let closeOnClick = false;
-
-	// Get stuff out of the PopoverContext
-	const context = $context[PopoverContextName] as PopoverContext;
-	if (!context) {
-		throw new Error("PopoverContent must be contained within a Popover");
-	}
-	let $state = context.state;
-
-	$run(() => {
-		if (!$state.visible) {
-			hide();
-		}
-	});
-
-	function show() {
-		shown = true;
-
-		// HACK: Because this Popover 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))
-		) {
-			e.preventDefault();
-			context.handleClickOutside!(e);
-		}
-	}
-
-	function setPosition() {
-		if (!context.anchorElement) {
-			throw new Error("Popover must have an anchor element");
-		}
-
-		let side = $props?.side ?? "bottom";
-		let alignment = $props?.alignment ?? "center";
-		setPopoverPosition(context.anchorElement, div, side, alignment);
-	}
-
-	@render {
-		@if ($state.visible) {
-			<div
-				{$props?.id}
-				class={["torp-popover-content", $props?.class]}
-				{$props?.style}
-				&ref={div}
-				onmount={show}
-			>
-				<slot />
-			</div>
-		}
-	}
-}

package/src/Popover/PopoverTrigger.torp

@@ -1,62 +0,0 @@
-import type { ClassValue, StyleValue } from "@torpor/view";
-import { PopoverContextName, type PopoverContext } from "./PopoverTypes";
-import hoverTrigger from "../mount/hoverTrigger";
-
-interface PopoverTriggerProps {
-	/** 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 button that causes a Popover to appear or disappear.
- */
-export default function PopoverTrigger($props: PopoverTriggerProps | undefined) {
-	let activation = $props?.activation ?? "press";
-
-	// Get stuff out of the PopoverContext
-	const context = $context[PopoverContextName] as PopoverContext;
-	if (!context) {
-		throw new Error("PopoverTrigger must be contained within a Popover");
-	}
-	let $state = context.state;
-
-	function handleClick() {
-		if (activation !== "press") return;
-
-		$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 {
-		<button
-			type="button"
-			{$props?.id}
-			class={["torp-popover-trigger", $props?.class]}
-			{$props?.style}
-			onclick={handleClick}
-			onmount={(el) => hoverTrigger(el, { onHover: handleHover, onExit: handleHover })}
-			&ref={context.anchorElement}
-		>
-			<slot />
-		</button>
-	}
-}

package/src/Popover/PopoverTypes.ts

@@ -1,30 +0,0 @@
-export const PopoverContextName = "Popover";
-
-/** The shared context for popover components (Contextual, Prompt and Popover) */
-export interface PopoverContext {
-	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: PopoverState;
-	//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 PopoverState {
-	visible: boolean;
-	position: Point;
-}
-
-export interface Point {
-	x: number;
-	y: number;
-}

package/src/Popover/index.ts

@@ -1,6 +0,0 @@
-import Popover from "./Popover.torp";
-import PopoverContent from "./PopoverContent.torp";
-import PopoverTrigger from "./PopoverTrigger.torp";
-import showPopover from "./showPopover";
-
-export { Popover, PopoverTrigger, PopoverContent, showPopover };

package/src/Popover/showPopover.ts

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

package/src/Slider/Slider.torp

@@ -1,84 +0,0 @@
-export default function Slider($props: any | undefined) {
-	//export let value = 0;
-	//export let total = 0;
-
-	let position = 0;
-	let dragging = false;
-	let background: HTMLElement;
-	let handle: HTMLElement;
-	let skipRecalc = false;
-
-	$mount(() => {
-		calculatePosition();
-	});
-
-	beforeUpdate(() => {
-		if (background && handle) {
-			if (skipRecalc) {
-				skipRecalc = false;
-			} else {
-				calculatePosition();
-			}
-		}
-	});
-
-	function calculatePosition() {
-		// Calculate the initial handle position
-		const handleRect = handle.getBoundingClientRect();
-		const backgroundRect = background.getBoundingClientRect();
-		const offsetX = (value / total) * backgroundRect.width;
-		position = offsetX - handleRect.width / 2;
-	}
-
-	function handleMouseDown() {
-		dragging = true;
-	}
-
-	function handleMouseUp() {
-		dragging = false;
-	}
-
-	function handleMouseMove(e: MouseEvent) {
-		if (!e.buttons) {
-			dragging = false;
-		}
-
-		if (dragging) {
-			const handleRect = handle.getBoundingClientRect();
-			const backgroundRect = background.getBoundingClientRect();
-			let offsetX = e.clientX - backgroundRect.left;
-
-			const minWidth = handleRect.width / 2;
-			const maxWidth = backgroundRect.width - handleRect.width / 2;
-
-			if (offsetX < minWidth) {
-				offsetX = minWidth;
-				value = 0;
-			} else if (offsetX > maxWidth) {
-				offsetX = maxWidth;
-				value = total;
-			} else {
-				const width = backgroundRect.width - handleRect.width;
-				value = Math.floor((total / width) * offsetX);
-			}
-
-			position = offsetX - handleRect.width / 2;
-		}
-
-		// Don't recalc with the value change - we know where everything should be
-		skipRecalc = true;
-	}
-
-	@render {
-		<div
-			{$props?.id}
-			class={["torp-slider", $props?.class]}
-			{$props?.style}
-			onmousemove={handleMouseMove}
-			onmouseup={handleMouseUp}
-		>
-			<div &ref={background} />
-			<div &ref={handle} style={`left: ${position}px;`} onmousedown={handleMouseDown} />
-		</div>
-	}
-}

package/src/Slider/index.ts

@@ -1,3 +0,0 @@
-import Slider from "./Slider.torp";
-
-export { Slider };

package/src/TabGroup/TabContent.torp

@@ -1,49 +0,0 @@
-import type { ClassValue, StyleValue } from "@torpor/view";
-import getId from "../utils/getId";
-import { TabGroupContextName, type TabGroupContext } from "./TabGroupTypes";
-
-interface TabContentProps {
-	/** An ID for the root element */
-	id?: string;
-	/** Classes for the root element */
-	class?: ClassValue,
-	/** Styles for the root element */
-	style?: StyleValue,
-	/** The index of this item */
-	index?: number,
-	/** The value for this item */
-	value?: string,
-}
-
-/**
- * Content for a TabGroup, which can be revealed or hidden by an associated TabTrigger.
- */
-export default function TabContent($props: TabContentProps | undefined) {
-	let defaultId = getId();
-
-	const context = $context[TabGroupContextName] as TabGroupContext;
-	if (!context) {
-		throw new Error("TabContent must be contained within a TabGroup");
-	}
-	let $state = context.registerItem($props?.index, $props?.value);
-
-	// Set the content ID so that it can be used with aria-controls in TabTrigger
-	$state.contentId = $props?.id ?? defaultId;
-
-	@render {
-		<div
-			id={$props?.id ?? defaultId}
-			class={["torp-tab-content", $props?.class]}
-			{$props?.style}
-			role="tabpanel"
-			aria-labelledby={$state.headerId}
-			data-orientation={context.orientation}
-			data-state={$state.active ? "active" : "inactive"}
-			data-disabled={$state.disabled ? "true" : undefined}
-		>
-			@if ($state.active) {
-				<slot />
-			}
-		</div>
-	}
-}