@torpor/ui 0.3.4 → 0.3.6

package/src/utils/dateUtils.ts

@@ -1,244 +0,0 @@
-// TODO: Can we get these from the locale?
-const monthNames: string[] = [
-	"January",
-	"February",
-	"March",
-	"April",
-	"May",
-	"June",
-	"July",
-	"August",
-	"September",
-	"October",
-	"November",
-	"December",
-];
-const shortMonthNames: string[] = monthNames.map((n) => n.substring(0, 3).toLowerCase());
-
-const dayNames: string[] = [
-	"Sunday",
-	"Monday",
-	"Tuesday",
-	"Wednesday",
-	"Thursday",
-	"Friday",
-	"Saturday",
-	"Sunday",
-];
-const shortDayNames: string[] = dayNames.map((n) => n.substring(0, 3).toLowerCase());
-
-export { monthNames, shortMonthNames, dayNames, shortDayNames };
-
-export function areDatesEqual(date1: Date, date2: Date): boolean {
-	if ((date1 && !date2) || (date2 && !date1)) {
-		return false;
-	}
-	return (
-		date1.getFullYear() === date2.getFullYear() &&
-		date1.getMonth() === date2.getMonth() &&
-		date1.getDate() === date2.getDate()
-	);
-}
-
-export function parseDateTime(text: string, dateOrder: string): Date {
-	const parts = text
-		.toString()
-		.toLowerCase()
-		.split(/[.,/ :-]/);
-
-	const today = new Date();
-	let day = today.getDate();
-	let month = today.getMonth();
-	let year = today.getFullYear();
-	let hour = 9;
-	let minute = 0;
-	//let ampm = "";
-
-	let dayPart = -1;
-	let monthPart = -1;
-	let yearPart = -1;
-	//let hourPart = -1;
-
-	// Try to get the month if it's been supplied as a word
-	for (let i = 0; i < parts.length; i++) {
-		const index = shortMonthNames.indexOf(parts[i].substring(0, 3));
-		if (index !== -1) {
-			month = index;
-			monthPart = i;
-			break;
-		}
-	}
-
-	// Get each date part based on the dateOrder supplied
-	const dateOrderLower = dateOrder.toLowerCase();
-	for (let i = 0; i < dateOrder.length; i++) {
-		if (dateOrderLower[i] === "d") {
-			const dayResult = getDayPart(parts, monthPart, yearPart);
-			if (dayResult) {
-				day = dayResult.value;
-				dayPart = dayResult.part;
-			}
-		}
-		if (dateOrderLower[i] === "m" && monthPart === -1) {
-			const monthResult = getMonthPart(parts, dayPart, yearPart);
-			if (monthResult) {
-				month = monthResult.value;
-				monthPart = monthResult.part;
-			}
-		}
-		if (dateOrderLower[i] === "y") {
-			const yearResult = getYearPart(parts, dayPart, monthPart);
-			if (yearResult) {
-				year = yearResult.value;
-				yearPart = yearResult.part;
-			}
-		}
-	}
-
-	// TODO: Time...
-	//if (includeTime) {
-	//    // Hour part is the first part that isn't a date part
-	//    for (let i = 0; i < parts.length; i++) {
-	//        if (i !== yearPart && i !== monthPart && i !== dayPart) {
-	//            const maybehour = parseInt(parts[i])
-	//            if (!isNaN(maybehour)) {
-	//                hour = maybehour
-	//                hourPart = i
-	//                break
-	//            }
-	//        }
-	//    }
-	//
-	//    // Minute part is the first part that isn't a date part or the hour part
-	//    for (let i = 0; i < parts.length; i++) {
-	//        if (i !== yearPart && i !== monthPart && i !== dayPart && i !== hourPart) {
-	//            const maybeminute = parseInt(parts[i])
-	//            if (!isNaN(maybeminute)) {
-	//                minute = maybeminute
-	//                break
-	//            }
-	//        }
-	//    }
-	//
-	//    // Look for AM or PM
-	//    for (let i = 0; i < parts.length; i++) {
-	//        if (parts[i] === 'am' || parts[i] === 'pm') {
-	//            ampm = parts[i].toString().toUpperCase()
-	//            if (ampm === 'PM') {
-	//                hour = hour + 12
-	//            }
-	//            break
-	//        }
-	//    }
-	//}
-
-	return new Date(year, month, day, hour, minute);
-}
-
-interface DatePart {
-	value: number;
-	part: number;
-}
-
-function getDayPart(parts: string[], monthPart: number, yearPart: number): DatePart | undefined {
-	for (let i = 0; i < parts.length; i++) {
-		if (i !== monthPart && i !== yearPart) {
-			const maybeday = parseInt(parts[i]);
-			if (!isNaN(maybeday)) {
-				const value = maybeday;
-				const part = i;
-				return { value, part };
-			}
-		}
-	}
-}
-
-function getMonthPart(parts: string[], dayPart: number, yearPart: number): DatePart | undefined {
-	for (let i = 0; i < parts.length; i++) {
-		if (i !== dayPart && i !== yearPart) {
-			const maybemonth = parseInt(parts[i]);
-			if (!isNaN(maybemonth)) {
-				const value = maybemonth - 1;
-				const part = i;
-				return { value, part };
-			}
-		}
-	}
-}
-
-function getYearPart(parts: string[], dayPart: number, monthPart: number): DatePart | undefined {
-	for (let i = 0; i < parts.length; i++) {
-		if (i !== monthPart && i !== dayPart) {
-			const maybeyear = parseInt(parts[i]);
-			if (!isNaN(maybeyear)) {
-				const value = maybeyear < 100 ? maybeyear + 2000 : maybeyear;
-				const part = i;
-				return { value, part };
-			}
-		}
-	}
-}
-
-export function formatDate(value: Date, dateFormat: string): string {
-	if (!value) {
-		return "";
-	}
-
-	const date = new Date(value);
-
-	// Build the text that will be displayed
-	return dateFormat.replace(/(d+)|(M+)|(y+)/g, (m) => {
-		if (m.indexOf("d") >= 0) {
-			return formatDay(date, m);
-		} else if (m.indexOf("M") >= 0) {
-			return formatMonth(date, m);
-		} else if (m.indexOf("y") >= 0) {
-			return formatYear(date, m);
-		} else {
-			throw new Error("Invalid date format string");
-		}
-	});
-
-	// TODO: Time
-	//if (includeTime) {
-	//    const ampm = hour >= 12 ? 'PM' : 'AM'
-	//    hour = hour % 12
-	//    hour = hour || 12 // the hour '0' should be '12'
-	//
-	//    minute = minute < 10 ? '0' + minute : minute
-	//    text = text + ' ' + hour + ':' + minute + ' ' + ampm
-	//}
-}
-
-function formatDay(date: Date, d: string): string {
-	if (d.length >= 4) {
-		return dayNames[date.getDay()];
-	} else if (d.length === 3) {
-		return dayNames[date.getDay()].substring(0, 3);
-	} else if (d.length == 2) {
-		let text = date.getDate().toString();
-		return text.length < 2 ? "0" + text : text;
-	} else {
-		return date.getDate().toString();
-	}
-}
-
-function formatMonth(date: Date, m: string): string {
-	if (m.length >= 4) {
-		return monthNames[date.getMonth()];
-	} else if (m.length === 3) {
-		return monthNames[date.getMonth()].substring(0, 3);
-	} else if (m.length == 2) {
-		let text = date.getMonth().toString();
-		return text.length < 2 ? "0" + text : text;
-	} else {
-		return date.getMonth().toString();
-	}
-}
-
-function formatYear(date: Date, y: string): string {
-	return date
-		.getFullYear()
-		.toString()
-		.substring(4 - y.length, y.length);
-}

package/src/utils/documentEvents.ts

@@ -1,17 +0,0 @@
-export function addDocumentEvent<K extends keyof DocumentEventMap>(
-	type: K,
-	listener: (this: Document, ev: DocumentEventMap[K]) => any
-): void {
-	if (typeof document !== 'undefined') {
-		document.addEventListener(type, listener);
-	}
-}
-
-export function removeDocumentEvent<K extends keyof DocumentEventMap>(
-	type: K,
-	listener: (this: Document, ev: DocumentEventMap[K]) => any
-): void {
-	if (typeof document !== 'undefined') {
-		document.removeEventListener(type, listener);
-	}
-}

package/src/utils/getId.ts

@@ -1,6 +0,0 @@
-let nextId = 0;
-
-/** Returns a unique ID for use by components that need one, e.g. for accessibility */
-export default function getId(): string {
-	return `torp-id-${nextId++}`;
-}

package/src/utils/getScrollParent.ts

@@ -1,22 +0,0 @@
-// From https://stackoverflow.com/a/76535387
-export default function getScrollParent(node: Element): Element {
-	let currentParent = node.parentElement;
-	while (currentParent) {
-		if (isScrollable(currentParent)) {
-			return currentParent;
-		}
-		currentParent = currentParent.parentElement;
-	}
-	return document.scrollingElement || document.documentElement;
-}
-
-function isScrollable(node: Element): boolean {
-	if (!(node instanceof HTMLElement || node instanceof SVGElement)) {
-		return false;
-	}
-	const style = getComputedStyle(node);
-	return ["overflow", "overflow-x", "overflow-y"].some((propertyName) => {
-		const value = style.getPropertyValue(propertyName);
-		return value === "auto" || value === "scroll";
-	});
-}

package/src/utils/setContextPosition.ts

@@ -1,31 +0,0 @@
-interface Point {
-	x: number;
-	y: number;
-}
-
-export default function setContextPosition(
-	anchor: HTMLElement,
-	content: HTMLElement,
-	position: Point,
-): void {
-	var anchorRect = anchor.getBoundingClientRect();
-	var contentRect = content.getBoundingClientRect();
-
-	content.style.position = "fixed";
-
-	// Try to make sure the content is entirely on the screen horizontally
-	// Just move it left or right -- the pointer is outside the content vertically so moving it left
-	// or right won't make the content appear over the cursor
-	let left = anchorRect.left + position.x;
-	left = Math.min(left, window.innerWidth - contentRect.width);
-	left = Math.max(left, 0);
-	content.style.left = left + "px";
-
-	// Try to make sure the content is entirely on the screen vertically
-	// Show it above the position if it wouldn't fit
-	let top = anchorRect.top + position.y;
-	if (top + contentRect.height > window.innerHeight) {
-		top -= contentRect.height;
-	}
-	content.style.top = top + "px";
-}

package/src/utils/setPopoverPosition.ts

@@ -1,142 +0,0 @@
-export default function setPopoverPosition(
-	anchor: HTMLElement,
-	content: HTMLElement,
-	side: "top" | "right" | "bottom" | "left",
-	alignment: "start" | "center" | "end",
-): void {
-	var anchorRect = anchor.getBoundingClientRect();
-	var contentRect = content.getBoundingClientRect();
-
-	content.style.position = "fixed";
-
-	// Check that we there is enough room to show the content on the side requested
-	// Otherwise, if there is enough room on the other side, show it there instead
-	let calculatedSide = side;
-	const canShowOnTop = anchorRect.top - contentRect.height >= 0;
-	const canShowAtRight = anchorRect.right + contentRect.width <= window.innerWidth;
-	const canShowOnBottom = anchorRect.bottom + contentRect.height <= window.innerHeight;
-	const canShowAtLeft = anchorRect.left - contentRect.width >= 0;
-	switch (side) {
-		case "top": {
-			if (!canShowOnTop && canShowOnBottom) {
-				calculatedSide = "bottom";
-			}
-			break;
-		}
-		case "right": {
-			if (!canShowAtRight && canShowAtLeft) {
-				calculatedSide = "left";
-			}
-			break;
-		}
-		case "bottom": {
-			if (!canShowOnBottom && canShowOnTop) {
-				calculatedSide = "top";
-			}
-			break;
-		}
-		case "left": {
-			if (!canShowAtLeft && canShowAtRight) {
-				calculatedSide = "right";
-			}
-			break;
-		}
-		default: {
-			// eslint-disable-next-line restrict-template-expressions
-			throw new Error(`Invalid MenuPopout side: ${side}`);
-		}
-	}
-
-	switch (calculatedSide) {
-		case "top": {
-			content.style.top = anchorRect.top - contentRect.height + "px";
-			setVerticalAlignment(content, anchorRect, contentRect, alignment);
-			break;
-		}
-		case "right": {
-			content.style.left = anchorRect.right + "px";
-			setHorizontalAlignment(content, anchorRect, contentRect, alignment);
-			break;
-		}
-		case "bottom": {
-			content.style.top = anchorRect.bottom + "px";
-			setVerticalAlignment(content, anchorRect, contentRect, alignment);
-			break;
-		}
-		case "left": {
-			content.style.left = anchorRect.left - contentRect.width + "px";
-			setHorizontalAlignment(content, anchorRect, contentRect, alignment);
-			break;
-		}
-		default: {
-			// eslint-disable-next-line restrict-template-expressions
-			throw new Error(`Invalid MenuPopout side: ${side}`);
-		}
-	}
-}
-
-function setVerticalAlignment(
-	content: HTMLElement,
-	anchorRect: DOMRect,
-	contentRect: DOMRect,
-	alignment: "start" | "center" | "end",
-) {
-	let left = 0;
-	switch (alignment) {
-		case "start": {
-			left = anchorRect.left;
-			break;
-		}
-		case "center": {
-			left = anchorRect.left + anchorRect.width / 2 - contentRect.width / 2;
-			break;
-		}
-		case "end": {
-			left = anchorRect.right - contentRect.width;
-			break;
-		}
-		default: {
-			// eslint-disable-next-line restrict-template-expressions
-			throw new Error(`Invalid Popout alignment: ${alignment}`);
-		}
-	}
-
-	// Try to make sure the content is entirely on the screen horizontally
-	left = Math.min(left, window.innerWidth - contentRect.width);
-	left = Math.max(left, 0);
-
-	content.style.left = left + "px";
-}
-
-function setHorizontalAlignment(
-	content: HTMLElement,
-	anchorRect: DOMRect,
-	contentRect: DOMRect,
-	alignment: "start" | "center" | "end",
-) {
-	let top = 0;
-	switch (alignment) {
-		case "start": {
-			top = anchorRect.top;
-			break;
-		}
-		case "center": {
-			top = anchorRect.top + anchorRect.height / 2 - contentRect.height / 2;
-			break;
-		}
-		case "end": {
-			top = anchorRect.bottom - contentRect.height;
-			break;
-		}
-		default: {
-			// eslint-disable-next-line restrict-template-expressions
-			throw new Error(`Invalid Popout alignment: ${alignment}`);
-		}
-	}
-
-	// Try to make sure the content is entirely on the screen vertically
-	top = Math.min(top, window.innerHeight - contentRect.height);
-	top = Math.max(top, 0);
-
-	content.style.top = top + "px";
-}

package/test/Accordion/accessibility.test.ts

@@ -1,59 +0,0 @@
-import { queryByText } from "@testing-library/dom";
-import "@testing-library/jest-dom/vitest";
-import { mount } from "@torpor/view";
-import { describe, expect, it } from "vitest";
-import AccordionAccessibility from "./components/AccordionAccessibility.torp";
-
-describe("Accordion", () => {
-	it("Accessibility", async () => {
-		const container = document.createElement("div");
-		document.body.appendChild(container);
-		mount(container, AccordionAccessibility, { value: ["1", "3"] });
-
-		// Tests from https://www.w3.org/WAI/ARIA/apg/patterns/accordion/
-
-		// The title of each accordion header is contained in an element with role button
-		expect(queryByText(container, "Role Header")?.tagName.toLowerCase()).toMatch("button");
-
-		// Each accordion header button is wrapped in an element with role heading that has a value set
-		// for aria-level that is appropriate for the information architecture of the page
-		//   * If the native host language has an element with an implicit heading and aria-level, such
-		//     as an HTML heading tag, a native host language element may be used
-		//   * The button element is the only element inside the heading element. That is, if there are
-		//     other visually persistent elements, they are not included inside the heading element
-		// NOTE: This is kind of up to the user -- should we check this at runtime?
-		expect(queryByText(container, "Role Header")?.parentElement?.tagName.toLowerCase()).toMatch(
-			"h4",
-		);
-		expect(
-			queryByText(container, "Role Header")?.parentElement?.childElementCount.toString(),
-		).toMatch("1");
-
-		// If the accordion panel associated with an accordion header is visible, the header button
-		// element has aria-expanded set to true. If the panel is not visible, aria-expanded is set
-		// to false
-		expect(queryByText(container, "Open Header")).toHaveAttribute("aria-expanded", "true");
-		expect(queryByText(container, "Closed Header")).toHaveAttribute("aria-expanded", "false");
-
-		// The accordion header button element has aria-controls set to the ID of the element containing
-		// the accordion panel content
-		const headerId = queryByText(container, "Open Header")?.id;
-		const contentId = queryByText(container, "Open Content")?.id;
-		expect(queryByText(container, "Open Header")).toHaveAttribute("aria-controls", contentId);
-
-		// If the accordion panel associated with an accordion header is visible, and if the accordion
-		// does not permit the panel to be collapsed, the header button element has aria-disabled set
-		// to true
-		expect(queryByText(container, "Disabled Header")).toHaveAttribute("aria-disabled", "true");
-
-		// Optionally, each element that serves as a container for panel content has role region and
-		// aria-labelledby with a value that refers to the button that controls display of the panel
-		//   * Avoid using the region role in circumstances that create landmark region proliferation,
-		//     e.g., in an accordion that contains more than approximately 6 panels that can be expanded
-		//     at the same time
-		//   * Role region is especially helpful to the perception of structure by screen reader users
-		//     when panels contain heading elements or a nested accordion
-		expect(queryByText(container, "Open Content")).toHaveAttribute("aria-labelledby", headerId);
-		expect(queryByText(container, "Region Content")).toHaveAttribute("role", "region");
-	});
-});

package/test/Accordion/components/AccordionAccessibility.torp

@@ -1,44 +0,0 @@
-import {
-	Accordion,
-	AccordionItem,
-	AccordionHeader,
-	AccordionTrigger,
-	AccordionContent,
-} from "../../../src/Accordion/index";
-
-export default function AccordionAccessibility($props: any) {
-	@render {
-		<Accordion value={$props.value} type="multiple">
-			<AccordionItem>
-				<AccordionHeader as="h4">
-					<AccordionTrigger>Role Header</AccordionTrigger>
-				</AccordionHeader>
-				<AccordionContent>Role Content</AccordionContent>
-			</AccordionItem>
-			<AccordionItem>
-				<AccordionHeader as="h4">
-					<AccordionTrigger>Open Header</AccordionTrigger>
-				</AccordionHeader>
-				<AccordionContent>Open Content</AccordionContent>
-			</AccordionItem>
-			<AccordionItem>
-				<AccordionHeader as="h4">
-					<AccordionTrigger>Closed Header</AccordionTrigger>
-				</AccordionHeader>
-				<AccordionContent>Closed Content</AccordionContent>
-			</AccordionItem>
-			<AccordionItem>
-				<AccordionHeader as="h4">
-					<AccordionTrigger>Region Header</AccordionTrigger>
-				</AccordionHeader>
-				<AccordionContent ariaRegion>Region Content</AccordionContent>
-			</AccordionItem>
-			<AccordionItem disabled>
-				<AccordionHeader as="h4">
-					<AccordionTrigger>Disabled Header</AccordionTrigger>
-				</AccordionHeader>
-				<AccordionContent>Disabled Content</AccordionContent>
-			</AccordionItem>
-		</Accordion>
-	}
-}

package/test/Accordion/components/AccordionKeyboard.torp

@@ -1,32 +0,0 @@
-import {
-	Accordion,
-	AccordionItem,
-	AccordionHeader,
-	AccordionTrigger,
-	AccordionContent,
-} from "../../../src/Accordion/index";
-
-export default function AccordionKeyboard($props: any) {
-	@render {
-		<Accordion value={$props.value} type="multiple">
-			<AccordionItem>
-				<AccordionHeader as="h4">
-					<AccordionTrigger>Header 1</AccordionTrigger>
-				</AccordionHeader>
-				<AccordionContent>Content 1</AccordionContent>
-			</AccordionItem>
-			<AccordionItem>
-				<AccordionHeader as="h4">
-					<AccordionTrigger>Header 2</AccordionTrigger>
-				</AccordionHeader>
-				<AccordionContent>Content 2</AccordionContent>
-			</AccordionItem>
-			<AccordionItem>
-				<AccordionHeader as="h4">
-					<AccordionTrigger>Header 3</AccordionTrigger>
-				</AccordionHeader>
-				<AccordionContent>Content 3</AccordionContent>
-			</AccordionItem>
-		</Accordion>
-	}
-}

package/test/Accordion/components/AccordionList.torp

@@ -1,23 +0,0 @@
-import {
-	Accordion,
-	AccordionItem,
-	AccordionHeader,
-	AccordionTrigger,
-	AccordionContent,
-} from "../../../src/Accordion/index";
-
-export default function AccordionList($props: any) {
-	@render {
-		<Accordion value={$props.value}>
-			@for (let item of $props.items) {
-				@key = item.id
-				<AccordionItem>
-					<AccordionHeader as="h4">
-						<AccordionTrigger>{item.header}</AccordionTrigger>
-					</AccordionHeader>
-					<AccordionContent>{item.text}</AccordionContent>
-				</AccordionItem>
-			}
-		</Accordion>
-	}
-}

package/test/Accordion/components/AccordionMultiple.torp

@@ -1,32 +0,0 @@
-import {
-	Accordion,
-	AccordionItem,
-	AccordionHeader,
-	AccordionTrigger,
-	AccordionContent,
-} from "../../../src/Accordion/index";
-
-export default function AccordionMultiple($props: any) {
-	@render {
-		<Accordion value={$props?.value} type="multiple">
-			<AccordionItem>
-				<AccordionHeader as="h4">
-					<AccordionTrigger>Header 1</AccordionTrigger>
-				</AccordionHeader>
-				<AccordionContent>Content 1</AccordionContent>
-			</AccordionItem>
-			<AccordionItem>
-				<AccordionHeader as="h4">
-					<AccordionTrigger>Header 2</AccordionTrigger>
-				</AccordionHeader>
-				<AccordionContent>Content 2</AccordionContent>
-			</AccordionItem>
-			<AccordionItem>
-				<AccordionHeader as="h4">
-					<AccordionTrigger>Header 3</AccordionTrigger>
-				</AccordionHeader>
-				<AccordionContent>Content 3</AccordionContent>
-			</AccordionItem>
-		</Accordion>
-	}
-}

package/test/Accordion/components/AccordionSingle.torp

@@ -1,32 +0,0 @@
-import {
-	Accordion,
-	AccordionItem,
-	AccordionHeader,
-	AccordionTrigger,
-	AccordionContent,
-} from "../../../src/Accordion/index";
-
-export default function AccordionSingle($props: any) {
-	@render {
-		<Accordion value={$props?.value}>
-			<AccordionItem>
-				<AccordionHeader as="h4">
-					<AccordionTrigger>Header 1</AccordionTrigger>
-				</AccordionHeader>
-				<AccordionContent>Content 1</AccordionContent>
-			</AccordionItem>
-			<AccordionItem>
-				<AccordionHeader as="h4">
-					<AccordionTrigger>Header 2</AccordionTrigger>
-				</AccordionHeader>
-				<AccordionContent>Content 2</AccordionContent>
-			</AccordionItem>
-			<AccordionItem>
-				<AccordionHeader as="h4">
-					<AccordionTrigger>Header 3</AccordionTrigger>
-				</AccordionHeader>
-				<AccordionContent>Content 3</AccordionContent>
-			</AccordionItem>
-		</Accordion>
-	}
-}