@torpor/ui 0.3.5 → 0.3.7

package/src/Accordion/AccordionContent.torp

@@ -1,46 +0,0 @@
-import type { ClassValue, StyleValue } from "@torpor/view";
-import getId from "../utils/getId";
-import { AccordionItemContextName, type AccordionItemContext } from "./AccordionTypes";
-
-interface AccordionContentProps {
-	/** 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 Accordion */
-	ariaRegion?: boolean,
-}
-
-/**
- * Content for an AccordionItem, which can be revealed or hidden by an associated AccordionTrigger.
- */
-export default function AccordionContent($props: AccordionContentProps | undefined) {
-	let defaultId = getId();
-
-	const context = $context[AccordionItemContextName] as AccordionItemContext;
-	if (!context) {
-		throw new Error("AccordionContent must be contained within an AccordionItem");
-	}
-	let $state = context.state
-
-	// Set the content ID so that it can be used with aria-controls in AccordionTrigger
-	$state.contentId = $props?.id ?? defaultId;
-
-	@render {
-		<div
-			id={$props?.id ?? defaultId}
-			class={["torp-accordion-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/Accordion/AccordionHeader.torp

@@ -1,45 +0,0 @@
-import type { ClassValue, StyleValue } from "@torpor/view";
-import { AccordionItemContextName, type AccordionItemContext } from "./AccordionTypes";
-
-interface AccordionHeaderProps {
-	/** 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 an AccordionItem, which contains the AccordionTrigger.
- *
- * The structure of an AccordionHeader is:
- * 
- * ```
- * <AccordionHeader>
- * 	<AccordionTrigger />
- * </AccordionHeader>
- * ```
- */
-export default function AccordionHeader($props: AccordionHeaderProps | undefined) {
-	const context = $context[AccordionItemContextName] as AccordionItemContext;
-	if (!context) {
-		throw new Error("AccordionHeader must be contained within an AccordionItem");
-	}
-	let $state = context.state
-
-	@render {
-		@// TODO: $props.as
-		<h4
-			{$props?.id}
-			class={["torp-accordion-header", $props?.class]}
-			{$props?.style}
-			data-state={$state.expanded ? "open" : "closed"}
-			data-disabled={$state.disabled ? "true" : undefined}
-		>
-			<slot />
-		</h4>
-	}
-}

package/src/Accordion/AccordionItem.torp

@@ -1,101 +0,0 @@
-import type { ClassValue, StyleValue } from "@torpor/view";
-import { AccordionContextName, AccordionItemContextName, type ItemState, type AccordionContext, type AccordionItemContext } from "./AccordionTypes";
-
-interface AccordionItemProps {
-	/** 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 in the Accordion. Set this if you will be inserting, removing or sorting items. If you don't set this, it will be set automatically */
-	index?: number,
-	/** A value for the item. Set this if you need more control over which item(s) are expanded. If you don't set this, the value will be set to the item's initial index */
-	value?: string,
-	/** If set to true, the user cannot interact with this AccordionItem */
-	disabled?: boolean,
-	/** Raised when this item is opened or closed */
-	ontoggle?: (open: boolean) => void,
-}
-
-/**
- * An item in an Accordion, which must consist of an AccordionTrigger and an AccordionContent.
- * 
- * The structure of an AccordionItem is:
- * 
- * ```
- * <AccordionItem>
- * 	<AccordionHeader>
- * 		<AccordionTrigger />
- * 	</AccordionHeader>
- * 	<AccordionContent />
- * </AccordionItem>
- * ```
- */
-export default function AccordionItem($props: AccordionItemProps | undefined) {
-	let $state: ItemState = $watch({
-		index: -1,
-		value: "",
-		expanded: false,
-		headerId: "",
-		contentId: "",
-		disabled: $props?.disabled ?? false,
-		parentDisabled: false,
-		setFocused
-	})
-
-	// Get stuff out of the AccordionContext
-	const context = $context[AccordionContextName] as AccordionContext;
-	if (!context) {
-		throw new Error("AccordionItem must be contained within an Accordion");
-	}
-
-	// Put stuff into an AccordionItemContext
-	const itemContext: AccordionItemContext = {
-		toggleItem: context.toggleItem,
-		handleHeaderKey: context.handleHeaderKey,
-		state: $state,
-	};
-	$context[AccordionItemContextName] = itemContext;
-
-	// Register this item with the parent Accordion, which will handle toggling expanded for all items
-	context.registerItem($state, setFocused);
-
-	// Remove the item from the parent Accordion when this item is destroyed
-	$run(() => {
-		return () => {
-			context.removeItem($state.index);
-		}
-	});
-
-	// 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);
-		}
-	});
-
-	// Called from the parent Accordion; pass the focus command along to the AccordionButton
-	function setFocused() {
-		if (itemContext.setHeaderFocused) {
-			itemContext.setHeaderFocused();
-		}
-	}
-
-	@render {
-		<div
-			{$props?.id}
-			class={["torp-accordion-item", $props?.class]}
-			{$props?.style}
-			data-state={$state.expanded ? "open" : "closed"}
-			data-disabled={$state.disabled ? "true" : undefined}
-		>
-			<slot />
-		</div>
-	}
-}

package/src/Accordion/AccordionTrigger.torp

@@ -1,70 +0,0 @@
-import type { ClassValue, StyleValue } from "@torpor/view";
-import getId from "../utils/getId";
-import { AccordionItemContextName, type AccordionItemContext } from "./AccordionTypes";
-
-interface AccordionTriggerProps {
-	/** 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 an AccordionItem, which can be used to reveal or hide an associated AccordionContent.
- */
-export default function AccordionTrigger($props: AccordionTriggerProps | undefined) {
-	let defaultId = getId();
-
-	let button: HTMLButtonElement;
-
-	// Get stuff out of the AccordionItemContext
-	const context = $context[AccordionItemContextName] as AccordionItemContext;
-	if (!context) {
-		throw new Error("AccordionTrigger must be contained within an AccordionItem");
-	}
-	let $state = context.state;
-
-	// Set the header ID so that it can be used with aria-labelledby in AccordionContent
-	$state.headerId = $props?.id ?? defaultId;
-
-	// Let the item know how to set the button's focus
-	$state.setFocused = setFocused;
-
-	// This function is called by the parent Accordion to focus this item's button
-	function setFocused() {
-		button.focus();
-	}
-
-	function handleClick() {
-		// Pass the value to the toggleItem method in the parent Accordion which will handle toggling
-		// the value of expanded for all items (e.g. to close other items if necessary)
-		context.toggleItem($state.value);
-	}
-
-	function handleKey(e: KeyboardEvent) {
-		// Pass the key press up to the parent Accordion which will handle setting the focused button
-		context.handleHeaderKey($state.index, e);
-	}
-
-	@render {
-		<button
-			type="button"
-			id={$props?.id ?? defaultId}
-			class={["torp-accordion-trigger", $props?.class]}
-			{$props?.style}
-			disabled={$state.disabled || $state.parentDisabled}
-			aria-expanded={$state.expanded.toString()}
-			aria-disabled={$state.disabled ? "true" : undefined}
-			aria-controls={$state.contentId}
-			data-state={$state.expanded ? "open" : "closed"}
-			data-disabled={$state.disabled ? "true" : undefined}
-			&ref={button}
-			onclick={handleClick}
-			onkeydown={handleKey}
-		>
-			<slot />
-		</button>
-	}
-}

package/src/Accordion/AccordionTypes.ts

@@ -1,36 +0,0 @@
-export const AccordionContextName = "Accordion";
-export const AccordionItemContextName = "AccordionItem";
-
-export interface AccordionContext {
-	/** Called from an AccordionItem when it is added */
-	registerItem: (state: ItemState, setFocused: () => void) => void;
-	/** Called from an AccordionItem when it is removed */
-	removeItem: (index: number) => void;
-	/** Called from an AccordionItem when it is toggled */
-	toggleItem: (value: string) => void;
-	/** Called from an AccordionHeader when it receives a keyboard event */
-	handleHeaderKey: (index: number, e: KeyboardEvent) => void;
-}
-
-export interface AccordionItemContext {
-	/** Raised when an AccordionItem is toggled */
-	toggleItem: (value: string) => void;
-	/** Raised when an AccordionHeader receives a keyboard event */
-	handleHeaderKey: (index: number, e: KeyboardEvent) => void;
-	/** The reactive state for an AccordionItem */
-	state: ItemState;
-	/** Called in an AccordionItem when its header needs to be focused */
-	setHeaderFocused?: () => void;
-}
-
-export interface ItemState {
-	index: number;
-	value: string;
-	expanded: boolean;
-	headerId: string;
-	contentId: string;
-	disabled: boolean;
-	parentDisabled: boolean;
-	/** Called in the Accordion when a header needs to be focused */
-	setFocused: () => void;
-}

package/src/Accordion/index.ts

@@ -1,7 +0,0 @@
-import Accordion from "./Accordion.torp";
-import AccordionContent from "./AccordionContent.torp";
-import AccordionHeader from "./AccordionHeader.torp";
-import AccordionItem from "./AccordionItem.torp";
-import AccordionTrigger from "./AccordionTrigger.torp";
-
-export { Accordion, AccordionItem, AccordionHeader, AccordionTrigger, AccordionContent };

package/src/Breadcrumb/Breadcrumb.torp

@@ -1,45 +0,0 @@
-import type { ClassValue, StyleValue } from "@torpor/view";
-
-interface BreadcrumbProps {
-	/** 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 | undefined,
-}
-
-/**
- *
- * A list of links to the parent pages of the current page in hierarchical order.
- *
- * See [the WAI ARIA guidelines for Breadcrumbs](https://www.w3.org/WAI/ARIA/apg/patterns/breadcrumb/).
- *
- * The structure of a Breadcrumb is:
- *
- * ```
- * <Breadcrumb>
- * 	<BreadcrumbItem />
- * 	<BreadcrumbSeparator /> (optional)
- * 	<BreadcrumbItem>
- * 		...
- * 	</BreadcrumbItem>
- * </Breadcrumb>
- * ```
- *
- * You can separate BreadcrumbItems using BreadcrumbSeparators or by using CSS.
- */
-export default function Breadcrumb($props: BreadcrumbProps | undefined) {
-	@render {
-		<nav
-			{$props?.id}
-			class={["torp-breadcrumb", $props?.class]}
-			{$props?.style}
-			aria-label={$props?.ariaLabel}
-		>
-			<slot />
-		</nav>
-	}
-}

package/src/Breadcrumb/BreadcrumbItem.torp

@@ -1,30 +0,0 @@
-import type { ClassValue, StyleValue } from "@torpor/view";
-
-interface BreadcrumbItemProps {
-	/** An ID for the root element */
-	id?: string;
-	/** Classes for the root element */
-	class?: ClassValue,
-	/** Styles for the root element */
-	style?: StyleValue,
-	/** Whether this is the current page */
-	current?: boolean,
-}
-
-/**
- * An item in a breadcrumb, containing a link to one of the parent pages of the
- * current page (or the current page).
- */
-export default function BreadcrumbItem($props: BreadcrumbItemProps | undefined) {
-	@render {
-		<div
-			{$props?.id}
-			class={["torp-breadcrumb", $props?.class]}
-			{$props?.style}
-			aria-current={$props?.current ? "page" : undefined}
-			data-current={$props?.current ? "current" : undefined}
-		>
-			<slot />
-		</div>
-	}
-}

package/src/Breadcrumb/BreadcrumbSeparator.torp

@@ -1,27 +0,0 @@
-import type { ClassValue, StyleValue } from "@torpor/view";
-
-interface BreadcrumbSeparatorProps {
-	/** An ID for the root element */
-	id?: string;
-	/** Classes for the root element */
-	class?: ClassValue,
-	/** Styles for the root element */
-	style?: StyleValue,
-}
-
-/**
- * A separator between links in a Breadcrumb component. It is hidden from
- * screen readers.
- */
-export default function BreadcrumbSeparator($props: BreadcrumbSeparatorProps | undefined) {
-	@render {
-		<div
-			{$props?.id}
-			class={["torp-breadcrumb-separator", $props?.class]}
-			{$props?.style}
-			aria-hidden="true"
-		>
-			<slot />
-		</div>
-	}
-}

package/src/Breadcrumb/index.ts

@@ -1,5 +0,0 @@
-import Breadcrumb from "./Breadcrumb.torp";
-import BreadcrumbItem from "./BreadcrumbItem.torp";
-import BreadcrumbSeparator from "./BreadcrumbSeparator.torp";
-
-export { Breadcrumb, BreadcrumbItem, BreadcrumbSeparator };

package/src/Calendar/Calendar.torp

@@ -1,277 +0,0 @@
-import type { ClassValue, StyleValue } from "@torpor/view";
-import { ReactiveDate } from "@torpor/view";
-import { areDatesEqual, dayNames, monthNames } from "../utils/dateUtils";
-import CalendarDay from "./CalendarDay.torp";
-import { type CalendarContext, type DayState, type CalendarEvent, CalendarContextName } from "./CalendarTypes";
-import ChevronLeft from "../icons/ChevronLeft.torp";
-import ChevronRight from "../icons/ChevronRight.torp";
-
-// TODO: Split this out into Calendar, CalendarHeader, CalendarPreviousTrigger, CalendarGrid etc
-
-interface CalendarProps {
-	/** 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 Calendar($props: CalendarProps) {
-	$props ??= $watch({});
-	$props.startOfWeek ??= 1;
-	$props.selectable ??= false;
-	$props.value ??= new Date();
-	$props.events ??= [];
-
-	// Ensure the value is a reactive date
-	$props.value = new ReactiveDate($unwrap($props.value));
-
-	// A note on dates:
-	// * value is the selected value
-	// * activeDate is the date that is active when the user is navigating via keyboard
-	// * visibleDate is the date that is currently being displayed in the calendar (really only the month part is important here)
-
-	let $state = $watch({
-		activeDate: $props.value,
-		visibleDate: $props.value,
-		get days() {
-			return $cache(() => {
-				return buildDays($state.visibleDate, $props.startOfWeek)
-			});
-		},
-	});
-
-	let visibleStartDate = $props.value;
-	let visibleEndDate = $props.value;
-	let container: HTMLElement;
-	let refocus = false;
-
-	const context: CalendarContext = {
-		registerDay
-	};
-	$context[CalendarContextName] = context;
-
-	$run(() => {
-		// HACK: Shouldn't need this
-		if (refocus) {
-			refocus = false;
-			const el = container.getElementsByClassName("active")[0];
-			if (el && el.children[0] instanceof HTMLElement) {
-				el.children[0].focus();
-			}
-		}
-	});
-
-	function registerDay(date: ReactiveDate, setActive: (value: boolean) => void) {
-		const day = $state.days.find((day) => areDatesEqual(day.date, date));
-		if (day) {
-			day.setActive = setActive;
-		}
-	}
-
-	function buildDays(date: ReactiveDate, start: number): DayState[] {
-		const newDays = [];
-
-		// Set the first day to the start of the week before the first day of
-		// the month (e.g. Monday the 28th of the previous month)
-		visibleStartDate = new Date();
-		visibleStartDate.setFullYear(date.getFullYear(), date.getMonth(), 1);
-		visibleStartDate.setDate(
-			visibleStartDate.getDate() - ((visibleStartDate.getDay() + 7 - start) % 7)
-		);
-
-		// Set the last day to the end of the week after the last day of the
-		// month (e.g. Sunday the 6th of the next month)
-		visibleEndDate = new Date();
-		visibleEndDate.setFullYear(date.getFullYear(), date.getMonth() + 1, 0);
-		visibleEndDate.setDate(
-			visibleEndDate.getDate() + ((start - 1 - visibleEndDate.getDay() + 7) % 7)
-		);
-
-		const dayDiff =
-			Math.round((visibleEndDate.getTime() - visibleStartDate.getTime()) / (1000 * 60 * 60 * 24)) +
-			1;
-
-		for (let i = 0; i < dayDiff; i++) {
-			const dayDate = new ReactiveDate();
-			dayDate.setFullYear(
-				visibleStartDate.getFullYear(),
-				visibleStartDate.getMonth(),
-				visibleStartDate.getDate() + i
-			);
-			dayDate.setHours(0);
-			dayDate.setMinutes(0);
-			dayDate.setSeconds(0);
-			dayDate.setMilliseconds(0);
-			const newDay: DayState = {
-				date: dayDate,
-				muted: dayDate.getMonth() !== date.getMonth(),
-				active: areDatesEqual(dayDate, $state.activeDate)
-			};
-			newDays.push(newDay);
-		}
-
-		return newDays;
-	}
-
-	function setValue(date: Date) {
-		$state.value = new ReactiveDate(date);
-
-		// Also set the active date so that the user knows where they are
-		setActiveDate(date);
-
-		if ($props.onchange) $props.onchange(value);
-	}
-
-	function setActiveDate(date: Date) {
-		$state.activeDate = new ReactiveDate(date);
-
-		// If the selected date is outside the visible date range, move the date range
-		if (date < visibleStartDate || date > visibleEndDate) {
-			refocus = true;
-			$state.visibleDate = new ReactiveDate(date);
-			if ($props.onchangedate) $props.onchangedate(date);
-		}
-
-		$state.days.forEach((day) => {
-			const active = areDatesEqual(day.date, new Date(date));
-			if (day.setActive) {
-				day.setActive(active);
-			}
-			day.active = active;
-		});
-	}
-
-	function handleFocus(e: FocusEvent & { currentTarget: EventTarget & HTMLElement }) {
-		const el = e.currentTarget.getElementsByClassName("active")[0];
-		if (el && el.children[0] instanceof HTMLElement) {
-			el.children[0].focus();
-			e.preventDefault();
-		}
-	}
-
-	function handlePrevMonth(e: Event) {
-		e.preventDefault();
-		$state.visibleDate.setMonth($state.visibleDate.getMonth() - 1);
-		if ($props.onchangedate) $props.onchangedate(visibleDate);
-	}
-
-	function handleNextMonth(e: Event) {
-		e.preventDefault();
-		$state.visibleDate.setMonth($state.visibleDate.getMonth() + 1);
-		if ($props.onchangedate) $props.onchangedate(visibleDate);
-	}
-
-	async function handleDayClick(date: ReactiveDate) {
-		if (!$props.selectable) return;
-
-		setValue(date);
-	}
-
-	function handleKey(e: KeyboardEvent) {
-		if (!$props.selectable) return;
-
-		switch (e.key) {
-			case "Enter": {
-				e.preventDefault();
-				setValue($state.activeDate);
-				break;
-			}
-			case "Esc":
-			case "Escape": {
-				e.preventDefault();
-				if ($props.onclose) $props.onclose();
-				break;
-			}
-			case "Left":
-			case "ArrowLeft": {
-				e.preventDefault();
-				// Move to the date one day before
-				const newDate = new Date($state.activeDate.getTime() - 1 * 86400000)
-				setActiveDate(newDate);
-				break;
-			}
-			case "Up":
-			case "ArrowUp": {
-				e.preventDefault();
-				// Move to the date seven days before
-				const newDate = new Date($state.activeDate.getTime() - 7 * 86400000)
-				setActiveDate(newDate);
-				break;
-			}
-			case "Right":
-			case "ArrowRight": {
-				e.preventDefault();
-				// Move to the date one day after
-				const newDate = new Date($state.activeDate.getTime() + 1 * 86400000)
-				setActiveDate(newDate);
-				break;
-			}
-			case "Down":
-			case "ArrowDown": {
-				e.preventDefault();
-				// Move to the date seven days after
-				const newDate = new Date($state.activeDate.getTime() + 7 * 86400000)
-				setActiveDate(newDate);
-				break;
-			}
-		}
-	}
-
-	@render {
-		<div
-			{$props?.id}
-			class={["torp-calendar", $props?.class]}
-			{$props?.style}
-			&ref={container}
-		>
-			<div class={`torp-calendar-header ${$props?.class ?? ""}`.trim()}>
-				<button class={`torp-calendar-previous-trigger ${$props?.class ?? ""}`.trim()} onclick={handlePrevMonth}>
-					<slot name="prev-button">
-						<ChevronLeft />
-					</slot>
-				</button>
-				<span class={`torp-calendar-month-name ${$props?.class ?? ""}`.trim()}>
-					{monthNames[$state.visibleDate.getMonth()] + " " + $state.visibleDate.getFullYear()}
-				</span>
-				<button class={`torp-calendar-next-trigger ${$props?.class ?? ""}`.trim()} onclick={handleNextMonth}>
-					<slot name="next-button">
-						<ChevronRight />
-					</slot>
-				</button>
-			</div>
-			<div
-				class={["torp-calendar-grid", $props?.class]}
-				{$props?.style}
-				tabindex={$props.selectable ? 0 : -1}
-				onfocus={handleFocus}
-				onkeydown={handleKey}
-			>
-				@for (let index of [0, 1, 2, 3, 4, 5, 6]) {
-					<span>
-						{dayNames[(Math.abs($props.startOfWeek) + index) % 7].substring(0, 2)}
-					</span>
-				}
-				@for (let day of $state.days) {
-					@key = day.date;
-					<CalendarDay
-						{day.date}
-						{day.muted}
-						{day.active}
-						{$props.selectable}
-						events={$props.events.filter((ev) => areDatesEqual(new Date(ev.date), day.date))}
-						onclick={handleDayClick}
-					/>
-				}
-			</div>
-		</div>
-	}
-
-	@style {
-		.torp-calendar-grid {
-			display: grid;
-			grid-template-columns: repeat(7, 1fr);
-		}
-	}
-}