@primitiv-ui/react 0.1.0

package/src/Accordion/__tests__/Accordion.disabled-items.test.tsx

@@ -0,0 +1,311 @@
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+
+import { Accordion } from "../Accordion";
+
+describe("Accordion disabled items tests", () => {
+  it("should apply aria-disabled='false' to accordion trigger by default", () => {
+    // Arrange
+    const title = "Accordion Trigger 1";
+    render(
+      <Accordion.Root>
+        <Accordion.Item>
+          <Accordion.Header>
+            <Accordion.Trigger>{title}</Accordion.Trigger>
+          </Accordion.Header>
+          <Accordion.Content>Content</Accordion.Content>
+        </Accordion.Item>
+      </Accordion.Root>,
+    );
+    const trigger = screen.getByRole("button", { name: title });
+
+    // Assert
+    expect(trigger).toHaveAttribute("aria-disabled", "false");
+  });
+
+  it("should apply aria-disabled='true' to accordion trigger when disabled prop is provided", () => {
+    // Arrange
+    const title = "Accordion Trigger 1";
+    render(
+      <Accordion.Root>
+        <Accordion.Item>
+          <Accordion.Header>
+            <Accordion.Trigger disabled>{title}</Accordion.Trigger>
+          </Accordion.Header>
+          <Accordion.Content>Content</Accordion.Content>
+        </Accordion.Item>
+      </Accordion.Root>,
+    );
+    const trigger = screen.getByRole("button", { name: title });
+
+    // Assert
+    expect(trigger).toHaveAttribute("aria-disabled", "true");
+  });
+
+  it("should NOT set the native disabled HTML attribute on the trigger when disabled prop is provided", () => {
+    // Arrange
+    const title = "Accordion Trigger 1";
+    render(
+      <Accordion.Root>
+        <Accordion.Item>
+          <Accordion.Header>
+            <Accordion.Trigger disabled>{title}</Accordion.Trigger>
+          </Accordion.Header>
+          <Accordion.Content>Content</Accordion.Content>
+        </Accordion.Item>
+      </Accordion.Root>,
+    );
+    const trigger = screen.getByRole("button", { name: title });
+
+    // Assert
+    expect(trigger).not.toHaveAttribute("disabled");
+  });
+
+  it("should apply data-disabled='false' to accordion trigger by default", () => {
+    // Arrange
+    const title = "Accordion Trigger 1";
+    render(
+      <Accordion.Root>
+        <Accordion.Item>
+          <Accordion.Header>
+            <Accordion.Trigger>{title}</Accordion.Trigger>
+          </Accordion.Header>
+          <Accordion.Content>Content</Accordion.Content>
+        </Accordion.Item>
+      </Accordion.Root>,
+    );
+    const trigger = screen.getByRole("button", { name: title });
+
+    // Assert
+    expect(trigger).toHaveAttribute("data-disabled", "false");
+  });
+
+  it("should apply data-disabled='true' to accordion trigger when disabled prop is provided", () => {
+    // Arrange
+    const title = "Accordion Trigger 1";
+    render(
+      <Accordion.Root>
+        <Accordion.Item>
+          <Accordion.Header>
+            <Accordion.Trigger disabled>{title}</Accordion.Trigger>
+          </Accordion.Header>
+          <Accordion.Content>Content</Accordion.Content>
+        </Accordion.Item>
+      </Accordion.Root>,
+    );
+    const trigger = screen.getByRole("button", { name: title });
+
+    // Assert
+    expect(trigger).toHaveAttribute("data-disabled", "true");
+  });
+
+  it("should not toggle the accordion panel when clicking a disabled trigger", async () => {
+    // Arrange
+    const user = userEvent.setup();
+    const title = "Accordion Trigger 1";
+    const content = "Accordion Content 1";
+    render(
+      <Accordion.Root>
+        <Accordion.Item>
+          <Accordion.Header>
+            <Accordion.Trigger disabled>{title}</Accordion.Trigger>
+          </Accordion.Header>
+          <Accordion.Content>{content}</Accordion.Content>
+        </Accordion.Item>
+      </Accordion.Root>,
+    );
+    const trigger = screen.getByRole("button", { name: title });
+    const panel = screen.getByText(content);
+
+    // Act
+    await user.click(trigger);
+
+    // Assert — panel remains closed
+    expect(panel).not.toBeVisible();
+  });
+
+  it("should skip a disabled trigger when navigating with ArrowDown", async () => {
+    // Arrange
+    const user = userEvent.setup();
+    const title1 = "Trigger 1";
+    const title2 = "Trigger 2";
+    const title3 = "Trigger 3";
+    render(
+      <Accordion.Root>
+        <Accordion.Item>
+          <Accordion.Header>
+            <Accordion.Trigger>{title1}</Accordion.Trigger>
+          </Accordion.Header>
+          <Accordion.Content>Content</Accordion.Content>
+        </Accordion.Item>
+        <Accordion.Item>
+          <Accordion.Header>
+            <Accordion.Trigger disabled>{title2}</Accordion.Trigger>
+          </Accordion.Header>
+          <Accordion.Content>Content</Accordion.Content>
+        </Accordion.Item>
+        <Accordion.Item>
+          <Accordion.Header>
+            <Accordion.Trigger>{title3}</Accordion.Trigger>
+          </Accordion.Header>
+          <Accordion.Content>Content</Accordion.Content>
+        </Accordion.Item>
+      </Accordion.Root>,
+    );
+    const trigger3 = screen.getByRole("button", { name: title3 });
+
+    // Act — tab to trigger 1, arrow down should skip disabled trigger 2
+    await user.tab();
+    await user.keyboard("[ArrowDown]");
+
+    // Assert
+    expect(trigger3).toHaveFocus();
+  });
+
+  it("should skip a disabled trigger when navigating with ArrowUp", async () => {
+    // Arrange
+    const user = userEvent.setup();
+    const title1 = "Trigger 1";
+    const title2 = "Trigger 2";
+    const title3 = "Trigger 3";
+    render(
+      <Accordion.Root>
+        <Accordion.Item>
+          <Accordion.Header>
+            <Accordion.Trigger>{title1}</Accordion.Trigger>
+          </Accordion.Header>
+          <Accordion.Content>Content</Accordion.Content>
+        </Accordion.Item>
+        <Accordion.Item>
+          <Accordion.Header>
+            <Accordion.Trigger disabled>{title2}</Accordion.Trigger>
+          </Accordion.Header>
+          <Accordion.Content>Content</Accordion.Content>
+        </Accordion.Item>
+        <Accordion.Item>
+          <Accordion.Header>
+            <Accordion.Trigger>{title3}</Accordion.Trigger>
+          </Accordion.Header>
+          <Accordion.Content>Content</Accordion.Content>
+        </Accordion.Item>
+      </Accordion.Root>,
+    );
+    const trigger1 = screen.getByRole("button", { name: title1 });
+
+    // Act — tab to trigger 3, arrow up should skip disabled trigger 2
+    await user.tab();
+    await user.tab();
+    await user.tab();
+    await user.keyboard("[ArrowUp]");
+
+    // Assert
+    expect(trigger1).toHaveFocus();
+  });
+
+  it("should skip a disabled trigger when navigating with Home", async () => {
+    // Arrange
+    const user = userEvent.setup();
+    const title1 = "Trigger 1";
+    const title2 = "Trigger 2";
+    const title3 = "Trigger 3";
+    render(
+      <Accordion.Root>
+        <Accordion.Item>
+          <Accordion.Header>
+            <Accordion.Trigger disabled>{title1}</Accordion.Trigger>
+          </Accordion.Header>
+          <Accordion.Content>Content</Accordion.Content>
+        </Accordion.Item>
+        <Accordion.Item>
+          <Accordion.Header>
+            <Accordion.Trigger>{title2}</Accordion.Trigger>
+          </Accordion.Header>
+          <Accordion.Content>Content</Accordion.Content>
+        </Accordion.Item>
+        <Accordion.Item>
+          <Accordion.Header>
+            <Accordion.Trigger>{title3}</Accordion.Trigger>
+          </Accordion.Header>
+          <Accordion.Content>Content</Accordion.Content>
+        </Accordion.Item>
+      </Accordion.Root>,
+    );
+    const trigger2 = screen.getByRole("button", { name: title2 });
+
+    // Act — tab to trigger 3, Home should skip disabled trigger 1 and land on trigger 2
+    await user.tab();
+    await user.tab();
+    await user.keyboard("[Home]");
+
+    // Assert
+    expect(trigger2).toHaveFocus();
+  });
+
+  it("should skip a disabled trigger when navigating with End", async () => {
+    // Arrange
+    const user = userEvent.setup();
+    const title1 = "Trigger 1";
+    const title2 = "Trigger 2";
+    const title3 = "Trigger 3";
+    render(
+      <Accordion.Root>
+        <Accordion.Item>
+          <Accordion.Header>
+            <Accordion.Trigger>{title1}</Accordion.Trigger>
+          </Accordion.Header>
+          <Accordion.Content>Content</Accordion.Content>
+        </Accordion.Item>
+        <Accordion.Item>
+          <Accordion.Header>
+            <Accordion.Trigger>{title2}</Accordion.Trigger>
+          </Accordion.Header>
+          <Accordion.Content>Content</Accordion.Content>
+        </Accordion.Item>
+        <Accordion.Item>
+          <Accordion.Header>
+            <Accordion.Trigger disabled>{title3}</Accordion.Trigger>
+          </Accordion.Header>
+          <Accordion.Content>Content</Accordion.Content>
+        </Accordion.Item>
+      </Accordion.Root>,
+    );
+    const trigger2 = screen.getByRole("button", { name: title2 });
+
+    // Act — tab to trigger 1, End should skip disabled trigger 3 and land on trigger 2
+    await user.tab();
+    await user.keyboard("[End]");
+
+    // Assert
+    expect(trigger2).toHaveFocus();
+  });
+
+  it("should not throw when all triggers are disabled and arrow key is pressed", async () => {
+    // Arrange
+    const user = userEvent.setup();
+    const title1 = "Trigger 1";
+    const title2 = "Trigger 2";
+    render(
+      <Accordion.Root>
+        <Accordion.Item>
+          <Accordion.Header>
+            <Accordion.Trigger disabled>{title1}</Accordion.Trigger>
+          </Accordion.Header>
+          <Accordion.Content>Content</Accordion.Content>
+        </Accordion.Item>
+        <Accordion.Item>
+          <Accordion.Header>
+            <Accordion.Trigger disabled>{title2}</Accordion.Trigger>
+          </Accordion.Header>
+          <Accordion.Content>Content</Accordion.Content>
+        </Accordion.Item>
+      </Accordion.Root>,
+    );
+    const trigger1 = screen.getByRole("button", { name: title1 });
+
+    // Act — focus trigger directly (tabbing skips aria-disabled elements) and press arrow
+    trigger1.focus();
+    await expect(
+      user.keyboard("[ArrowDown]"),
+    ).resolves.not.toThrow();
+  });
+});

package/src/Accordion/__tests__/Accordion.error-handling.test.tsx

@@ -0,0 +1,119 @@
+import { render } from "@testing-library/react";
+
+import { Accordion } from "../Accordion";
+
+const PlusIcon = () => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="24"
+    height="24"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    strokeWidth="2"
+    strokeLinecap="round"
+    strokeLinejoin="round"
+    className="lucide lucide-plus-icon lucide-plus"
+  >
+    <path d="M5 12h14" />
+    <path d="M12 5v14" />
+  </svg>
+);
+
+describe("Accordion error handling tests", () => {
+  it("should throw an error when AccordionHeader is used outside AccordionRoot", () => {
+    // Arrange & Act & Assert
+    expect(() => {
+      render(<Accordion.Header>Test</Accordion.Header>);
+    }).toThrow("AccordionHeader must be used within AccordionRoot");
+  });
+
+  it("should throw an error when AccordionItem is used outside AccordionRoot", () => {
+    // Arrange & Act & Assert
+    expect(() => {
+      render(
+        <Accordion.Item>
+          <Accordion.Header>
+            <Accordion.Trigger>Test</Accordion.Trigger>
+          </Accordion.Header>
+        </Accordion.Item>,
+      );
+    }).toThrow("AccordionItem must be used within AccordionRoot");
+  });
+
+  it("should throw an error when AccordionTrigger is used outside AccordionItem", () => {
+    // Arrange & Act & Assert
+    expect(() => {
+      render(
+        <Accordion.Root>
+          <Accordion.Trigger>Test</Accordion.Trigger>
+        </Accordion.Root>,
+      );
+    }).toThrow("Component must be used within AccordionItem");
+  });
+
+  it("should throw an error when AccordionContent is used outside AccordionItem", () => {
+    // Arrange & Act & Assert
+    expect(() => {
+      render(
+        <Accordion.Root>
+          <Accordion.Content>Test content</Accordion.Content>
+        </Accordion.Root>,
+      );
+    }).toThrow("Component must be used within AccordionItem");
+  });
+
+  it("should throw an error when AccordionTriggerIcon is used outside AccordionItem", () => {
+    // Arrange & Act & Assert
+    expect(() => {
+      render(
+        <Accordion.Root>
+          <Accordion.TriggerIcon>
+            <PlusIcon />
+          </Accordion.TriggerIcon>
+        </Accordion.Root>,
+      );
+    }).toThrow("Component must be used within AccordionItem");
+  });
+
+  it("should throw when AccordionTrigger has no corresponding AccordionContent", () => {
+    // Arrange & Act & Assert
+    expect(() => {
+      render(
+        <Accordion.Root>
+          <Accordion.Item value="item-1">
+            <Accordion.Header>
+              <Accordion.Trigger>Trigger without content</Accordion.Trigger>
+            </Accordion.Header>
+            {/* No AccordionContent */}
+          </Accordion.Item>
+        </Accordion.Root>,
+      );
+    }).toThrow(/AccordionTrigger.*no corresponding AccordionContent/);
+  });
+
+  it("should not throw when AccordionItem with Trigger and Content is added dynamically", () => {
+    // Arrange
+    function DynamicAccordion({ showItem }: { showItem: boolean }) {
+      return (
+        <Accordion.Root>
+          {showItem && (
+            <Accordion.Item value="item-1">
+              <Accordion.Header>
+                <Accordion.Trigger>Dynamic Trigger</Accordion.Trigger>
+              </Accordion.Header>
+              <Accordion.Content>Dynamic Content</Accordion.Content>
+            </Accordion.Item>
+          )}
+        </Accordion.Root>
+      );
+    }
+
+    const { rerender } = render(<DynamicAccordion showItem={false} />);
+
+    // Act & Assert — adding both trigger and content together must not throw
+    expect(() => {
+      rerender(<DynamicAccordion showItem={true} />);
+    }).not.toThrow();
+  });
+});

package/src/Accordion/__tests__/Accordion.forceMount.test.tsx

@@ -0,0 +1,119 @@
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+
+import { Accordion } from "../Accordion";
+
+describe("Accordion forceMount tests", () => {
+  it("should keep the panel in the DOM when forceMount is true and the panel is closed", () => {
+    // Arrange
+    const content = "Accordion Content 1";
+    render(
+      <Accordion.Root>
+        <Accordion.Item>
+          <Accordion.Header>
+            <Accordion.Trigger>Trigger 1</Accordion.Trigger>
+          </Accordion.Header>
+          <Accordion.Content forceMount>{content}</Accordion.Content>
+        </Accordion.Item>
+      </Accordion.Root>,
+    );
+
+    // Assert — panel is in the DOM even when closed
+    expect(screen.getByText(content)).toBeInTheDocument();
+  });
+
+  it("should NOT apply the hidden attribute when forceMount is true and the panel is closed", () => {
+    // Arrange
+    const content = "Accordion Content 1";
+    render(
+      <Accordion.Root>
+        <Accordion.Item>
+          <Accordion.Header>
+            <Accordion.Trigger>Trigger 1</Accordion.Trigger>
+          </Accordion.Header>
+          <Accordion.Content forceMount>{content}</Accordion.Content>
+        </Accordion.Item>
+      </Accordion.Root>,
+    );
+
+    // Assert
+    expect(screen.getByText(content)).not.toHaveAttribute("hidden");
+  });
+
+  it("should apply aria-hidden='true' when forceMount is true and the panel is closed", () => {
+    // Arrange
+    const content = "Accordion Content 1";
+    render(
+      <Accordion.Root>
+        <Accordion.Item>
+          <Accordion.Header>
+            <Accordion.Trigger>Trigger 1</Accordion.Trigger>
+          </Accordion.Header>
+          <Accordion.Content forceMount>{content}</Accordion.Content>
+        </Accordion.Item>
+      </Accordion.Root>,
+    );
+
+    // Assert — aria-hidden hides closed panel from AT when forceMount keeps it in DOM
+    expect(screen.getByText(content)).toHaveAttribute("aria-hidden", "true");
+  });
+
+  it("should NOT apply aria-hidden when forceMount is true and the panel is open", async () => {
+    // Arrange
+    const user = userEvent.setup();
+    const content = "Accordion Content 1";
+    render(
+      <Accordion.Root>
+        <Accordion.Item>
+          <Accordion.Header>
+            <Accordion.Trigger>Trigger 1</Accordion.Trigger>
+          </Accordion.Header>
+          <Accordion.Content forceMount>{content}</Accordion.Content>
+        </Accordion.Item>
+      </Accordion.Root>,
+    );
+    const trigger = screen.getByRole("button", { name: "Trigger 1" });
+
+    // Act — open the panel
+    await user.click(trigger);
+
+    // Assert — aria-hidden removed when panel is open
+    expect(screen.getByText(content)).not.toHaveAttribute("aria-hidden");
+  });
+
+  it("should NOT apply aria-hidden when forceMount is false and the panel is closed", () => {
+    // Arrange
+    const content = "Accordion Content 1";
+    render(
+      <Accordion.Root>
+        <Accordion.Item>
+          <Accordion.Header>
+            <Accordion.Trigger>Trigger 1</Accordion.Trigger>
+          </Accordion.Header>
+          <Accordion.Content>{content}</Accordion.Content>
+        </Accordion.Item>
+      </Accordion.Root>,
+    );
+
+    // Assert — standard hidden panel uses HTML hidden attribute, not aria-hidden
+    expect(screen.getByText(content)).not.toHaveAttribute("aria-hidden");
+  });
+
+  it("should apply data-state='closed' when forceMount is true and the panel is closed", () => {
+    // Arrange
+    const content = "Accordion Content 1";
+    render(
+      <Accordion.Root>
+        <Accordion.Item>
+          <Accordion.Header>
+            <Accordion.Trigger>Trigger 1</Accordion.Trigger>
+          </Accordion.Header>
+          <Accordion.Content forceMount>{content}</Accordion.Content>
+        </Accordion.Item>
+      </Accordion.Root>,
+    );
+
+    // Assert
+    expect(screen.getByText(content)).toHaveAttribute("data-state", "closed");
+  });
+});