@nationaldesignstudio/react 0.5.2 → 0.5.4

package/src/components/atoms/popover/popover.test.tsx

@@ -1,486 +0,0 @@
-import { describe, expect, test, vi } from "vitest";
-import { page, userEvent } from "vitest/browser";
-import { render } from "vitest-browser-react";
-import { Button } from "../button";
-import {
-	Popover,
-	PopoverArrow,
-	PopoverBackdrop,
-	PopoverClose,
-	PopoverDescription,
-	PopoverParts,
-	PopoverPopup,
-	PopoverPortal,
-	PopoverPositioner,
-	PopoverTitle,
-	PopoverTrigger,
-} from "./popover";
-
-describe("Popover", () => {
-	describe("Accessibility", () => {
-		test("trigger element is accessible", async () => {
-			render(
-				<Popover trigger={<Button>Open Popover</Button>} title="Title">
-					Content
-				</Popover>,
-			);
-			await expect
-				.element(page.getByRole("button", { name: "Open Popover" }))
-				.toBeInTheDocument();
-		});
-
-		test("popover has correct role when visible", async () => {
-			render(
-				<Popover
-					trigger={<Button>Open Popover</Button>}
-					title="Popover Title"
-					defaultOpen
-				>
-					Popover content
-				</Popover>,
-			);
-			// Popover uses dialog role
-			await expect.element(page.getByRole("dialog")).toBeInTheDocument();
-		});
-
-		test("trigger element is focusable", async () => {
-			render(
-				<Popover trigger={<Button>Focus me</Button>} title="Title">
-					Content
-				</Popover>,
-			);
-			await userEvent.keyboard("{Tab}");
-			await expect
-				.element(page.getByRole("button", { name: "Focus me" }))
-				.toHaveFocus();
-		});
-	});
-
-	describe("Interactions", () => {
-		test("shows popover on click", async () => {
-			render(
-				<Popover trigger={<Button>Click me</Button>} title="Click Popover">
-					Click content
-				</Popover>,
-			);
-
-			// Popover should not be visible initially
-			await expect.element(page.getByRole("dialog")).not.toBeInTheDocument();
-
-			// Click the trigger
-			await page.getByRole("button", { name: "Click me" }).click();
-
-			// Popover should now be visible
-			await expect.element(page.getByRole("dialog")).toBeInTheDocument();
-		});
-
-		test("closes popover when clicking outside", async () => {
-			render(
-				<div>
-					<Popover trigger={<Button>Click me</Button>} title="Test">
-						Content
-					</Popover>
-					<Button>Outside</Button>
-				</div>,
-			);
-
-			// Open popover
-			await page.getByRole("button", { name: "Click me" }).click();
-			await expect.element(page.getByRole("dialog")).toBeInTheDocument();
-
-			// Click outside
-			await page.getByRole("button", { name: "Outside" }).click();
-
-			// Popover should be closed
-			await expect.element(page.getByRole("dialog")).not.toBeInTheDocument();
-		});
-
-		test("closes popover on escape key", async () => {
-			render(
-				<Popover trigger={<Button>Click me</Button>} title="Test" defaultOpen>
-					Content
-				</Popover>,
-			);
-
-			await expect.element(page.getByRole("dialog")).toBeInTheDocument();
-
-			// Press escape
-			await userEvent.keyboard("{Escape}");
-
-			// Popover should be closed
-			await expect.element(page.getByRole("dialog")).not.toBeInTheDocument();
-		});
-	});
-
-	describe("Controlled State", () => {
-		test("respects controlled open state", async () => {
-			render(
-				<Popover
-					trigger={<Button>Trigger</Button>}
-					title="Controlled"
-					open={true}
-				>
-					Controlled content
-				</Popover>,
-			);
-
-			// Popover should be visible when open=true
-			await expect.element(page.getByRole("dialog")).toBeInTheDocument();
-		});
-
-		test("respects controlled closed state", async () => {
-			render(
-				<Popover
-					trigger={<Button>Trigger</Button>}
-					title="Controlled"
-					open={false}
-				>
-					Controlled content
-				</Popover>,
-			);
-
-			// Popover should not be visible when open=false
-			await expect.element(page.getByRole("dialog")).not.toBeInTheDocument();
-
-			// Should not show on click when controlled
-			await page.getByRole("button", { name: "Trigger" }).click();
-			await expect.element(page.getByRole("dialog")).not.toBeInTheDocument();
-		});
-
-		test("calls onOpenChange callback", async () => {
-			const handleOpenChange = vi.fn();
-			render(
-				<Popover
-					trigger={<Button>Trigger</Button>}
-					title="Callback"
-					onOpenChange={handleOpenChange}
-				>
-					Content
-				</Popover>,
-			);
-
-			// Click to trigger open
-			await page.getByRole("button", { name: "Trigger" }).click();
-
-			// Callback should have been called with true as first argument
-			// (Base UI passes additional context as second argument)
-			expect(handleOpenChange).toHaveBeenCalled();
-			expect(handleOpenChange.mock.calls[0][0]).toBe(true);
-		});
-
-		test("defaultOpen shows popover initially", async () => {
-			render(
-				<Popover
-					trigger={<Button>Trigger</Button>}
-					title="Default Open"
-					defaultOpen
-				>
-					Content
-				</Popover>,
-			);
-
-			// Popover should be visible initially
-			await expect.element(page.getByRole("dialog")).toBeInTheDocument();
-		});
-	});
-
-	describe("Content", () => {
-		test("displays title", async () => {
-			render(
-				<Popover
-					trigger={<Button>Trigger</Button>}
-					title="My Title"
-					defaultOpen
-				>
-					Content
-				</Popover>,
-			);
-
-			await expect.element(page.getByText("My Title")).toBeInTheDocument();
-		});
-
-		test("displays description content", async () => {
-			render(
-				<Popover trigger={<Button>Trigger</Button>} title="Title" defaultOpen>
-					Description content here
-				</Popover>,
-			);
-
-			await expect
-				.element(page.getByText("Description content here"))
-				.toBeInTheDocument();
-		});
-
-		test("displays content without title", async () => {
-			render(
-				<Popover trigger={<Button>Trigger</Button>} defaultOpen>
-					<p data-testid="custom-content">Custom content</p>
-				</Popover>,
-			);
-
-			await expect
-				.element(page.getByTestId("custom-content"))
-				.toBeInTheDocument();
-		});
-	});
-
-	describe("Close Button", () => {
-		test("shows close button when showClose is true", async () => {
-			render(
-				<Popover
-					trigger={<Button>Trigger</Button>}
-					title="With Close"
-					showClose={true}
-					defaultOpen
-				>
-					Content
-				</Popover>,
-			);
-
-			await expect
-				.element(page.getByRole("button", { name: "Close" }))
-				.toBeInTheDocument();
-		});
-
-		test("hides close button by default", async () => {
-			render(
-				<Popover
-					trigger={<Button>Trigger</Button>}
-					title="No Close"
-					defaultOpen
-				>
-					Content
-				</Popover>,
-			);
-
-			await expect
-				.element(page.getByRole("button", { name: "Close" }))
-				.not.toBeInTheDocument();
-		});
-
-		test("closes popover when clicking close button", async () => {
-			render(
-				<Popover
-					trigger={<Button>Trigger</Button>}
-					title="Closeable"
-					showClose={true}
-					defaultOpen
-				>
-					Content
-				</Popover>,
-			);
-
-			await expect.element(page.getByRole("dialog")).toBeInTheDocument();
-
-			// Click the close button
-			await page.getByRole("button", { name: "Close" }).click();
-
-			// Popover should be closed
-			await expect.element(page.getByRole("dialog")).not.toBeInTheDocument();
-		});
-	});
-
-	describe("Arrow", () => {
-		test("shows arrow by default", async () => {
-			render(
-				<Popover
-					trigger={<Button>Trigger</Button>}
-					title="With Arrow"
-					defaultOpen
-				>
-					Content
-				</Popover>,
-			);
-
-			const dialog = page.getByRole("dialog");
-			await expect.element(dialog).toBeInTheDocument();
-		});
-
-		test("hides arrow when showArrow is false", async () => {
-			render(
-				<Popover
-					trigger={<Button>Trigger</Button>}
-					title="Without Arrow"
-					showArrow={false}
-					defaultOpen
-				>
-					Content
-				</Popover>,
-			);
-
-			const dialog = page.getByRole("dialog");
-			await expect.element(dialog).toBeInTheDocument();
-		});
-	});
-
-	describe("Compound Components", () => {
-		test("renders with compound component API", async () => {
-			render(
-				<PopoverParts defaultOpen>
-					<PopoverTrigger>
-						<Button>Compound trigger</Button>
-					</PopoverTrigger>
-					<PopoverPortal>
-						<PopoverPositioner>
-							<PopoverPopup>
-								<PopoverArrow />
-								<PopoverTitle>Compound Title</PopoverTitle>
-								<PopoverDescription>Compound content</PopoverDescription>
-							</PopoverPopup>
-						</PopoverPositioner>
-					</PopoverPortal>
-				</PopoverParts>,
-			);
-
-			await expect
-				.element(page.getByRole("button", { name: "Compound trigger" }))
-				.toBeInTheDocument();
-			await expect
-				.element(page.getByText("Compound Title"))
-				.toBeInTheDocument();
-			await expect
-				.element(page.getByText("Compound content"))
-				.toBeInTheDocument();
-		});
-
-		test("backdrop renders correctly", async () => {
-			render(
-				<PopoverParts defaultOpen>
-					<PopoverTrigger>
-						<Button>With Backdrop</Button>
-					</PopoverTrigger>
-					<PopoverPortal>
-						<PopoverBackdrop data-testid="backdrop" />
-						<PopoverPositioner>
-							<PopoverPopup>Content with backdrop</PopoverPopup>
-						</PopoverPositioner>
-					</PopoverPortal>
-				</PopoverParts>,
-			);
-
-			await expect.element(page.getByTestId("backdrop")).toBeInTheDocument();
-			await expect
-				.element(page.getByText("Content with backdrop"))
-				.toBeInTheDocument();
-		});
-
-		test("close button works with compound API", async () => {
-			render(
-				<PopoverParts defaultOpen>
-					<PopoverTrigger>
-						<Button>Trigger</Button>
-					</PopoverTrigger>
-					<PopoverPortal>
-						<PopoverPositioner>
-							<PopoverPopup>
-								<PopoverClose>
-									<span>X</span>
-								</PopoverClose>
-								Content
-							</PopoverPopup>
-						</PopoverPositioner>
-					</PopoverPortal>
-				</PopoverParts>,
-			);
-
-			await expect.element(page.getByRole("dialog")).toBeInTheDocument();
-
-			// Click the close button
-			await page.getByText("X").click();
-
-			// Popover should be closed
-			await expect.element(page.getByRole("dialog")).not.toBeInTheDocument();
-		});
-	});
-
-	describe("Styles", () => {
-		test("popover popup has light background", async () => {
-			render(
-				<Popover trigger={<Button>Trigger</Button>} title="Styled" defaultOpen>
-					Content
-				</Popover>,
-			);
-
-			const dialog = page.getByRole("dialog");
-			await expect.element(dialog).toBeInTheDocument();
-
-			const element = dialog.element();
-			const styles = window.getComputedStyle(element);
-
-			// Popover should have a non-transparent background
-			expect(styles.backgroundColor).not.toBe("rgba(0, 0, 0, 0)");
-			expect(styles.backgroundColor).not.toBe("transparent");
-		});
-
-		test("popover has border radius", async () => {
-			render(
-				<Popover trigger={<Button>Trigger</Button>} title="Styled" defaultOpen>
-					Content
-				</Popover>,
-			);
-
-			const dialog = page.getByRole("dialog");
-			await expect.element(dialog).toBeInTheDocument();
-
-			const element = dialog.element();
-			const styles = window.getComputedStyle(element);
-
-			// Should have border radius
-			const borderRadius = parseFloat(styles.borderRadius);
-			expect(borderRadius).toBeGreaterThan(0);
-		});
-
-		test("popover has shadow", async () => {
-			render(
-				<Popover trigger={<Button>Trigger</Button>} title="Styled" defaultOpen>
-					Content
-				</Popover>,
-			);
-
-			const dialog = page.getByRole("dialog");
-			await expect.element(dialog).toBeInTheDocument();
-
-			const element = dialog.element();
-			const styles = window.getComputedStyle(element);
-
-			// Should have a box shadow
-			expect(styles.boxShadow).not.toBe("none");
-		});
-
-		test("popover has high z-index", async () => {
-			render(
-				<Popover trigger={<Button>Trigger</Button>} title="Styled" defaultOpen>
-					Content
-				</Popover>,
-			);
-
-			const dialog = page.getByRole("dialog");
-			await expect.element(dialog).toBeInTheDocument();
-
-			const element = dialog.element();
-			const styles = window.getComputedStyle(element);
-
-			// Should have z-index of 50 or higher
-			const zIndex = parseInt(styles.zIndex, 10);
-			expect(zIndex).toBeGreaterThanOrEqual(50);
-		});
-
-		test("popover has border", async () => {
-			render(
-				<Popover trigger={<Button>Trigger</Button>} title="Styled" defaultOpen>
-					Content
-				</Popover>,
-			);
-
-			const dialog = page.getByRole("dialog");
-			await expect.element(dialog).toBeInTheDocument();
-
-			const element = dialog.element();
-			const styles = window.getComputedStyle(element);
-
-			// Should have a border
-			const borderWidth = parseFloat(styles.borderWidth);
-			expect(borderWidth).toBeGreaterThan(0);
-		});
-	});
-});

package/src/components/atoms/select/index.ts

@@ -1,18 +0,0 @@
-export {
-	Select,
-	SelectGroup,
-	SelectGroupLabel,
-	type SelectGroupLabelProps,
-	type SelectGroupProps,
-	SelectOption,
-	type SelectOptionProps,
-	SelectPopup,
-	type SelectPopupProps,
-	type SelectProps,
-	SelectRoot,
-	SelectTrigger,
-	type SelectTriggerProps,
-	selectOptionVariants,
-	selectPopupVariants,
-	selectTriggerVariants,
-} from "./select";