@torpor/ui 0.1.7 → 0.2.1

package/test/MenuBar/accessibility.test.ts

@@ -0,0 +1,87 @@
+import { getByText, queryByText } from "@testing-library/dom";
+import "@testing-library/jest-dom/vitest";
+import userEvent from "@testing-library/user-event";
+import { mount } from "@torpor/view";
+import { describe, expect, it } from "vitest";
+import MenuBarAccessibility from "./components/MenuBarAccessibility.torp";
+
+describe("MenuBar", () => {
+	it("Accessibility", async () => {
+		const container = document.createElement("div");
+		document.body.appendChild(container);
+		mount(container, MenuBarAccessibility);
+
+		// Tests from https://www.w3.org/WAI/ARIA/apg/patterns/menu/
+		// NOTE: MenuBar is a menubar
+
+		// A menu is a container of items that represent choices. The element serving as the menu has
+		// a role of either menu or menubar
+		expect(queryByText(container, "Top level")?.parentElement?.parentElement).toHaveAttribute(
+			"role",
+			"menubar",
+		);
+
+		// The items contained in a menu are child elements of the containing menu or menubar and have
+		// any of the following roles:
+		//   * menuitem
+		//   * menuitemcheckbox
+		//   * menuitemradio
+		expect(queryByText(container, "Top level")).toHaveAttribute("role", "menuitem");
+
+		// If activating a menuitem opens a submenu, the menuitem is known as a parent menuitem. A submenu's
+		// menu element is:
+		//   * Contained inside the same menu element as its parent menuitem
+		//   * Is the sibling element immediately following its parent menuitem
+
+		// A parent menuitem has aria-haspopup set to either menu or true
+		expect(queryByText(container, "Top level")).toHaveAttribute("aria-haspopup", "true");
+
+		// A parent menuitem has aria-expanded set to false when its child menu is not visible and set
+		// to true when the child menu is visible
+		expect(queryByText(container, "Top level")).toHaveAttribute("aria-expanded", "false");
+		await userEvent.click(getByText(container, "Top level"));
+		expect(queryByText(container, "Top level")).toHaveAttribute("aria-expanded", "true");
+
+		// One of the following approaches is used to enable scripts to move focus among items in a
+		// menu as described in Keyboard Navigation Inside Components:
+		//   * The menu container has tabindex set to -1 or 0 and aria-activedescendant set to the ID
+		//     of the focused item
+		//   * Each item in the menu has tabindex set to -1, except in a menubar, where the first item
+		//     has tabindex set to 0
+
+		// When a menuitemcheckbox or menuitemradio is checked, aria-checked is set to true
+		// NOTE: We don't (currently?) have checkboxes or radios in MenuBars
+
+		// When a menu item is disabled, aria-disabled is set to true
+		expect(queryByText(container, "Top level")).not.toHaveAttribute("aria-disabled");
+		expect(queryByText(container, "Disabled")).toHaveAttribute("aria-disabled", "true");
+
+		// Items in a menu may be divided into groups by placing an element with a role of separator
+		// between groups. For example, this technique should be used when a menu contains a set of
+		// menuitemradio items
+		expect(queryByText(container, "---")).toHaveAttribute("role", "separator");
+
+		// All separators should have aria-orientation consistent with the separator's orientation
+		// NOTE: What does this mean? None of the example separators have aria-orientation set
+
+		// If a menubar has a visible label, the element with role menubar has aria-labelledby set to
+		// a value that refers to the labelling element. Otherwise, the menubar element has a label
+		// provided by aria-label
+		// NOTE: We only support aria-label and it's required
+		expect(queryByText(container, "Top level")?.parentElement?.parentElement).toHaveAttribute(
+			"aria-label",
+			"Window menu",
+		);
+
+		// If a menubar is vertically oriented, it has aria-orientation set to vertical. The default
+		// value of aria-orientation for a menubar is horizontal
+		expect(queryByText(container, "Top level")?.parentElement?.parentElement).toHaveAttribute(
+			"aria-orientation",
+			"horizontal",
+		);
+		expect(queryByText(container, "Sub item 1")?.parentElement).toHaveAttribute(
+			"aria-orientation",
+			"vertical",
+		);
+	});
+});

package/test/MenuBar/basic.test.ts

@@ -0,0 +1,22 @@
+import { getByText, queryByText } from "@testing-library/dom";
+import "@testing-library/jest-dom/vitest";
+import userEvent from "@testing-library/user-event";
+import { mount } from "@torpor/view";
+import { describe, expect, it } from "vitest";
+import MenuBarBasic from "./components/MenuBarBasic.torp";
+
+describe("MenuBar", () => {
+	it("Basic operation", async () => {
+		const container = document.createElement("div");
+		document.body.appendChild(container);
+		mount(container, MenuBarBasic);
+
+		// The top level item should be displayed
+		expect(queryByText(container, "Top level")).toBeInTheDocument();
+		expect(queryByText(container, "Sub item 1")).not.toBeInTheDocument();
+
+		// Clicking the top level item should show the sub item
+		await userEvent.click(getByText(container, "Top level"));
+		expect(queryByText(container, "Sub item 1")).toBeInTheDocument();
+	});
+});

package/test/MenuBar/components/MenuBarAccessibility.torp

@@ -0,0 +1,34 @@
+import {
+	MenuBar,
+	MenuBarItem,
+	MenuBarItemTrigger,
+	MenuBarItemContent
+} from "../../../src/MenuBar";
+import { Menu, MenuButton, MenuSeparator } from "../../../src/Menu";
+
+export default function MenuBarAccessibility() {
+	@render {
+		<MenuBar ariaLabel="Window menu">
+			<MenuBarItem>
+				<MenuBarItemTrigger>Top level</MenuBarItemTrigger>
+				<MenuBarItemContent>
+					<Menu ariaLabel="Sub window menu">
+						<MenuButton>Sub item 1</MenuButton>
+						<MenuButton>Sub item 2</MenuButton>
+						<MenuSeparator>---</MenuSeparator>
+						<MenuButton>Sub item 3</MenuButton>
+					</Menu>
+				</MenuBarItemContent>
+			</MenuBarItem>
+			<MenuBarItem>
+				<MenuBarItemTrigger disabled>Disabled</MenuBarItemTrigger>
+				<MenuBarItemContent>
+					<Menu ariaLabel="Disabled sub window menu">
+						<MenuButton>Disabled sub 1</MenuButton>
+						<MenuButton>Disabled sub 2</MenuButton>
+					</Menu>
+				</MenuBarItemContent>
+			</MenuBarItem>
+		</MenuBar>
+	}
+}

package/test/MenuBar/components/MenuBarBasic.torp

@@ -0,0 +1,25 @@
+import {
+	MenuBar,
+	MenuBarItem,
+	MenuBarItemTrigger,
+	MenuBarItemContent
+} from "../../../src/MenuBar";
+import { Menu, MenuButton, MenuSeparator } from "../../../src/Menu";
+
+export default function MenuBarBasic() {
+	@render {
+		<MenuBar ariaLabel="Window menu">
+			<MenuBarItem>
+				<MenuBarItemTrigger>Top level</MenuBarItemTrigger>
+				<MenuBarItemContent>
+					<Menu ariaLabel="Sub window menu">
+						<MenuButton>Sub item 1</MenuButton>
+						<MenuButton>Sub item 2</MenuButton>
+						<MenuSeparator />
+						<MenuButton>Sub item 3</MenuButton>
+					</Menu>
+				</MenuBarItemContent>
+			</MenuBarItem>
+		</MenuBar>
+	}
+}

package/test/NavMenu/basic.test.ts

@@ -3,7 +3,7 @@ import "@testing-library/jest-dom/vitest";
 import userEvent from "@testing-library/user-event";
 import { mount } from "@torpor/view";
 import { describe, expect, it } from "vitest";
-import NavMenu from "./components/NavMenu.torp";
+import NavMenu from "./components/NavMenuBasic.torp";
 
 describe("NavMenu", () => {
 	it("Basic operation", async () => {

package/test/NavMenu/components/{NavMenu.torp → NavMenuBasic.torp}

@@ -7,7 +7,7 @@ import {
 	NavMenuSeparator
 } from "../../../src/NavMenu";
 
-export default function NavMenu($props: any) {
+export default function NavMenuBasic($props: any) {
 	@render {
 		<NavMenu ariaLabel="Site navigation">
 			<NavMenuLink href="/">Home</NavMenuLink>

package/test/Notification/accessibility.test.ts

@@ -0,0 +1,21 @@
+import { queryByText } from "@testing-library/dom";
+import "@testing-library/jest-dom/vitest";
+import { mount } from "@torpor/view";
+import { describe, expect, it } from "vitest";
+import NotificationAccessibility from "./components/NotificationAccessibility.torp";
+
+describe("Notification", () => {
+	it("Accessibility", async () => {
+		const container = document.createElement("div");
+		document.body.appendChild(container);
+		mount(container, NotificationAccessibility);
+
+		// Tests from https://www.w3.org/WAI/ARIA/apg/patterns/alert/
+
+		// The widget has a role of alert
+		expect(queryByText(container, "Here's a notification")?.parentElement).toHaveAttribute(
+			"role",
+			"alert",
+		);
+	});
+});

package/test/Notification/components/CustomNotification.torp

@@ -0,0 +1,14 @@
+import {
+	Notification,
+	NotificationContent,
+	NotificationClose
+} from "../../../src/Notification/index";
+
+export default function CustomNotification() {
+	@render {
+		<Notification>
+			<NotificationContent>{$props.text}</NotificationContent>
+			<NotificationClose>Close me</NotificationClose>
+		</Notification>
+	}
+}

package/test/Notification/components/NotificationAccessibility.torp

@@ -0,0 +1,14 @@
+import {
+	Notification,
+	NotificationContent,
+	NotificationClose
+} from "../../../src/Notification/index";
+
+export default function NotificationAccessibility() {
+	@render {
+		<Notification visible>
+			<NotificationContent>Here's a notification</NotificationContent>
+			<NotificationClose>Close me</NotificationClose>
+		</Notification>
+	}
+}

package/test/Notification/components/NotificationFunction.torp

@@ -0,0 +1,20 @@
+import {
+	Notification,
+	NotificationContainer,
+	NotificationContent,
+	NotificationClose,
+	showNotification
+} from "../../../src/Notification/index";
+import CustomNotification from "./CustomNotification.torp";
+
+export default function NotificationFunction() {
+	function show() {
+		showNotification(CustomNotification, { text: "Here's a notification" });
+	}
+
+	@render {
+		<button type="button" onclick={show}>Show a notification</button>
+
+		<NotificationContainer />
+	}
+}

package/test/Notification/components/NotificationVariable.torp

@@ -0,0 +1,22 @@
+import {
+	Notification,
+	NotificationContent,
+	NotificationClose
+} from "../../../src/Notification/index";
+
+export default function NotificationVariable() {
+	let $state = $watch({
+		showNotification: false
+	});
+
+	@render {
+		<button type="button" onclick={(e) => ($state.showNotification = !$state.showNotification)}>
+			Show a notification
+		</button>
+
+		<Notification &visible={$state.showNotification}>
+			<NotificationContent>Here's a notification</NotificationContent>
+			<NotificationClose>Close me</NotificationClose>
+		</Notification>
+	}
+}

package/test/Notification/function.test.ts

@@ -0,0 +1,25 @@
+import { getByText, queryByText } from "@testing-library/dom";
+import "@testing-library/jest-dom/vitest";
+import userEvent from "@testing-library/user-event";
+import { mount } from "@torpor/view";
+import { describe, expect, it } from "vitest";
+import NotificationFunction from "./components/NotificationFunction.torp";
+
+describe("Notification", () => {
+	it("Showing with a function", async () => {
+		const container = document.createElement("div");
+		document.body.appendChild(container);
+		mount(container, NotificationFunction);
+
+		// By default, the notification shouldn't be shown
+		expect(queryByText(container, "Here's a notification")).not.toBeInTheDocument();
+
+		// Clicking the button should show the notification
+		await userEvent.click(getByText(container, "Show a notification"));
+		expect(queryByText(container, "Here's a notification")).toBeInTheDocument();
+
+		// Clicking the close button should hide the notification
+		await userEvent.click(getByText(container, "Close me"));
+		expect(queryByText(container, "Here's a notification")).not.toBeInTheDocument();
+	});
+});

package/test/Notification/variable.test.ts

@@ -0,0 +1,25 @@
+import { getByText, queryByText } from "@testing-library/dom";
+import "@testing-library/jest-dom/vitest";
+import userEvent from "@testing-library/user-event";
+import { mount } from "@torpor/view";
+import { describe, expect, it } from "vitest";
+import NotificationVariable from "./components/NotificationVariable.torp";
+
+describe("Notification", () => {
+	it("Showing with a variable", async () => {
+		const container = document.createElement("div");
+		document.body.appendChild(container);
+		mount(container, NotificationVariable);
+
+		// By default, the notification shouldn't be shown
+		expect(queryByText(container, "Here's a notification")).not.toBeInTheDocument();
+
+		// Clicking the button should show the notification
+		await userEvent.click(getByText(container, "Show a notification"));
+		expect(queryByText(container, "Here's a notification")).toBeInTheDocument();
+
+		// Clicking the close button should hide the notification
+		await userEvent.click(getByText(container, "Close me"));
+		expect(queryByText(container, "Here's a notification")).not.toBeInTheDocument();
+	});
+});

package/test/Popover/components/CustomDialog.torp

@@ -0,0 +1,25 @@
+import { Popover, PopoverContent } from "../../../src/Popover/index";
+import {
+	Dialog,
+	DialogBody,
+	DialogFooter,
+	DialogButton
+} from "../../../src/Dialog/index";
+
+export default function CustomDialog() {
+	@render {
+		<Popover visible {$props.callback}>
+			<PopoverContent>
+				<Dialog>
+					<DialogBody>
+						<p>Which color do you prefer?</p>
+					</DialogBody>
+					<DialogFooter>
+						<DialogButton value="blue">Blue</DialogButton>
+						<DialogButton value="red">Red</DialogButton>
+					</DialogFooter>
+				</Dialog>
+			</PopoverContent>
+		</Popover>
+	}
+}

package/test/Popover/components/PromptFunction.torp

@@ -0,0 +1,19 @@
+import { showPopover } from "../../../src/Popover/index";
+import CustomDialog from "./CustomDialog.torp";
+
+export default function PromptFunction() {
+	let anchor;
+	let $state = $watch({ color: "" });
+
+	async function show() {
+		showPopover(CustomDialog, anchor, { callback: (x) => $state.color = x });
+	}
+
+	@render {
+		<button type="button" &ref={anchor} onclick={show}>Show the prompt</button>
+
+		@if ($state.color) {
+			<p>Your favorite color is {$state.color}?!</p>
+		}
+	}
+}

package/test/Popover/components/PromptVariable.torp

@@ -0,0 +1,38 @@
+import { Popover, PopoverContent } from "../../../src/Popover/index";
+import {
+	Dialog,
+	DialogBody,
+	DialogFooter,
+	DialogButton
+} from "../../../src/Dialog/index";
+
+export default function PromptVariable() {
+	let $state = $watch({
+		color: "",
+		showPopover: false
+	});
+
+	@render {
+		<button type="button" onclick={(e) => ($state.showPopover = !$state.showPopover)}>
+			Show the prompt
+		</button>
+
+		@if ($state.color) {
+			<p>Your favorite color is {$state.color}?!</p>
+		}
+
+		<Popover &visible={$state.showPopover}>
+			<PopoverContent>
+				<Dialog>
+					<DialogBody>
+						<p>Which color do you prefer?</p>
+					</DialogBody>
+					<DialogFooter>
+						<DialogButton value="blue" onclick={() => ($state.color = "blue")}>Blue</DialogButton>
+						<DialogButton value="red" onclick={() => ($state.color = "red")}>Red</DialogButton>
+					</DialogFooter>
+				</Dialog>
+			</PopoverContent>
+		</Popover>
+	}
+}

package/test/Popover/function.test.ts

@@ -0,0 +1,26 @@
+import { getByText, queryByText } from "@testing-library/dom";
+import "@testing-library/jest-dom/vitest";
+import userEvent from "@testing-library/user-event";
+import { mount } from "@torpor/view";
+import { describe, expect, it } from "vitest";
+import PromptFunction from "./components/PromptFunction.torp";
+
+describe("Prompt", () => {
+	it("Showing with a function", async () => {
+		const container = document.createElement("div");
+		document.body.appendChild(container);
+		mount(container, PromptFunction);
+
+		// By default, the prompt shouldn't be shown
+		expect(queryByText(container, "Which color do you prefer?")).not.toBeInTheDocument();
+
+		// Clicking the button should show the prompt
+		await userEvent.click(getByText(container, "Show the prompt"));
+		expect(queryByText(container, "Which color do you prefer?")).toBeInTheDocument();
+
+		// Clicking the blue button should hide the prompt and set the value
+		await userEvent.click(getByText(container, "Blue"));
+		expect(queryByText(container, "Which color do you prefer?")).not.toBeInTheDocument();
+		expect(queryByText(container, "Your favorite color is blue?!")).toBeInTheDocument();
+	});
+});

package/test/Popover/variable.test.ts

@@ -0,0 +1,27 @@
+import { getByText, queryByText } from "@testing-library/dom";
+import "@testing-library/jest-dom/vitest";
+import userEvent from "@testing-library/user-event";
+import { mount } from "@torpor/view";
+import { describe, expect, it } from "vitest";
+import PromptVariable from "./components/PromptVariable.torp";
+
+describe("Prompt", () => {
+	it("Showing with a variable", async () => {
+		const container = document.createElement("div");
+		document.body.appendChild(container);
+		mount(container, PromptVariable);
+
+		// By default, the prompt shouldn't be shown
+		expect(queryByText(container, "Which color do you prefer?")).not.toBeInTheDocument();
+		expect(queryByText(container, "Your favorite color is blue?!")).not.toBeInTheDocument();
+
+		// Clicking the button should show the prompt
+		await userEvent.click(getByText(container, "Show the prompt"));
+		expect(queryByText(container, "Which color do you prefer?")).toBeInTheDocument();
+
+		// Clicking the blue button should hide the prompt and set the value
+		await userEvent.click(getByText(container, "Blue"));
+		expect(queryByText(container, "Which color do you prefer?")).not.toBeInTheDocument();
+		expect(queryByText(container, "Your favorite color is blue?!")).toBeInTheDocument();
+	});
+});

package/test/TabGroup/components/TabGroupAccessibility.torp

@@ -7,6 +7,8 @@ import {
 } from "../../../src/TabGroup/index";
 
 export default function TabGroupAccessibility() {
+	$props ??= $watch({});
+
 	@render {
 		<TabGroup value={$props.value}>
 			<TabList ariaLabel="Example tabs">

package/test/TabGroup/components/TabGroupKeyboard.torp

@@ -7,6 +7,8 @@ import {
 } from "../../../src/TabGroup/index";
 
 export default function TabGroupKeyboard() {
+	$props ??= $watch({});
+
 	@render {
 		<TabGroup value={$props.value}>
 			<TabList>

package/test/TabGroup/components/TabGroupList.torp

@@ -7,6 +7,8 @@ import {
 } from "../../../src/TabGroup/index";
 
 export default function TabGroupList() {
+	$props ??= $watch({});
+
 	@render {
 		<TabGroup value={$props.value}>
 			<TabList>

package/test/TabGroup/components/TabGroupTrigger.torp

@@ -7,6 +7,8 @@ import {
 } from "../../../src/TabGroup/index";
 
 export default function TabGroupTrigger() {
+	$props ??= $watch({});
+
 	@render {
 		<TabGroup value={$props.value}>
 			<TabList>

package/tsup.config.ts

@@ -8,15 +8,23 @@ type Config =
 export default defineConfig({
 	entry: [
 		"src/Accordion/index.ts",
+		"src/Breadcrumb/index.ts",
+		"src/Calendar/index.ts",
 		"src/Dialog/index.ts",
+		"src/Disclosure/index.ts",
+		"src/Drawer/index.ts",
+		"src/Form/index.ts",
+		"src/Menu/index.ts",
+		"src/MenuBar/index.ts",
 		"src/NavMenu/index.ts",
-		"src/Offscreen/index.ts",
+		"src/Notification/index.ts",
 		"src/Popover/index.ts",
 		"src/TabGroup/index.ts",
-		"src/motion.ts",
+		"src/icons/index.ts",
+		"src/motion/index.ts",
 	],
-	format: ["esm", "cjs"],
-	dts: { entry: ["src/motion.ts"] },
+	format: "esm",
+	dts: { entry: ["src/motion/index.ts"] },
 	clean: true,
 	metafile: true,
 	sourcemap: true,

package/dist/Accordion/index.cjs

@@ -1,53 +0,0 @@
-"use strict";
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
-};
-var __copyProps = (to, from, except, desc) => {
-  if (from && typeof from === "object" || typeof from === "function") {
-    for (let key of __getOwnPropNames(from))
-      if (!__hasOwnProp.call(to, key) && key !== except)
-        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
-  }
-  return to;
-};
-var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-
-// src/Accordion/index.ts
-var Accordion_exports = {};
-__export(Accordion_exports, {
-  Accordion: () => Accordion_default,
-  AccordionContent: () => AccordionContent_default,
-  AccordionHeader: () => AccordionHeader_default,
-  AccordionItem: () => AccordionItem_default,
-  AccordionTrigger: () => AccordionTrigger_default
-});
-module.exports = __toCommonJS(Accordion_exports);
-
-// src/Accordion/Accordion.torp
-import Accordion_default from "./Accordion.torp";
-
-// src/Accordion/AccordionContent.torp
-import AccordionContent_default from "./AccordionContent.torp";
-
-// src/Accordion/AccordionHeader.torp
-import AccordionHeader_default from "./AccordionHeader.torp";
-
-// src/Accordion/AccordionItem.torp
-import AccordionItem_default from "./AccordionItem.torp";
-
-// src/Accordion/AccordionTrigger.torp
-import AccordionTrigger_default from "./AccordionTrigger.torp";
-// Annotate the CommonJS export names for ESM import in node:
-0 && (module.exports = {
-  Accordion,
-  AccordionContent,
-  AccordionHeader,
-  AccordionItem,
-  AccordionTrigger
-});
-//# sourceMappingURL=index.cjs.map

package/dist/Accordion/index.cjs.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../src/Accordion/index.ts"],"sourcesContent":["import Accordion from \"./Accordion.torp\";\nimport AccordionContent from \"./AccordionContent.torp\";\nimport AccordionHeader from \"./AccordionHeader.torp\";\nimport AccordionItem from \"./AccordionItem.torp\";\nimport AccordionTrigger from \"./AccordionTrigger.torp\";\n\nexport { Accordion, AccordionItem, AccordionHeader, AccordionTrigger, AccordionContent };\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;A","names":[]}