@primitiv-ui/react 0.1.37 → 0.1.39

package/src/Accordion/__tests__/Accordion.mouse-interaction.test.tsx

@@ -1,212 +0,0 @@
-import { render, screen } from "@testing-library/react";
-import userEvent from "@testing-library/user-event";
-
-import { Accordion } from "../Accordion";
-
-describe("Accordion mouse interaction tests", () => {
-  it('should apply aria-expanded="true" attribute to accordion item trigger when clicking on a collapsed one', async () => {
-    // Arrange
-    const user = userEvent.setup();
-    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 accordionItemTrigger = screen.getByRole("button", { name: title });
-
-    // Act
-    await user.click(accordionItemTrigger);
-
-    // Assert
-    expect(accordionItemTrigger).toHaveAttribute("aria-expanded", "true");
-  });
-
-  it("should not make accordion item content panel visible when a different accordion item trigger is clicked", async () => {
-    // Arrange
-    const user = userEvent.setup();
-    const title1 = "Accordion Trigger 1";
-    const title2 = "Accordion Trigger 2";
-    const content1 = "Accordion Content 1";
-    render(
-      <Accordion.Root>
-        <Accordion.Item>
-          <Accordion.Header>
-            <Accordion.Trigger>{title1}</Accordion.Trigger>
-          </Accordion.Header>
-          <Accordion.Content>{content1}</Accordion.Content>
-        </Accordion.Item>
-        <Accordion.Item>
-          <Accordion.Header>
-            <Accordion.Trigger>{title2}</Accordion.Trigger>
-          </Accordion.Header>
-          <Accordion.Content>Content</Accordion.Content>
-        </Accordion.Item>
-      </Accordion.Root>,
-    );
-    const accordionItemPanel = screen.getByText(content1);
-    const accordionItemTrigger2 = screen.getByRole("button", {
-      name: title2,
-    });
-
-    // Act
-    await user.click(accordionItemTrigger2);
-
-    // Assert
-    expect(accordionItemPanel).not.toBeVisible();
-  });
-
-  it("should make accordion item content panel visible when accordion item trigger is clicked", 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>{title}</Accordion.Trigger>
-          </Accordion.Header>
-          <Accordion.Content>{content}</Accordion.Content>
-        </Accordion.Item>
-      </Accordion.Root>,
-    );
-    const accordionItemTrigger = screen.getByRole("button", { name: title });
-    const accordionItemPanel = screen.getByText(content);
-
-    // Act
-    await user.click(accordionItemTrigger);
-
-    // Assert
-    expect(accordionItemPanel).toBeVisible();
-  });
-
-  it("should remove the hidden attribute from an accordion item content panel when the associated accordion item trigger is clicked", 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>{title}</Accordion.Trigger>
-          </Accordion.Header>
-          <Accordion.Content>{content}</Accordion.Content>
-        </Accordion.Item>
-      </Accordion.Root>,
-    );
-    const accordionItemTrigger = screen.getByRole("button", { name: title });
-    const accordionItemPanel = screen.getByText(content);
-
-    // Act
-    await user.click(accordionItemTrigger);
-
-    // Assert
-    expect(accordionItemPanel).not.toHaveAttribute("hidden");
-  });
-
-  it('should apply aria-expanded="false" attribute to accordion item trigger when clicking on an expanded one', async () => {
-    // Arrange
-    const user = userEvent.setup();
-    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 accordionItemTrigger = screen.getByRole("button", { name: title });
-
-    // Act
-    await user.click(accordionItemTrigger);
-    await user.click(accordionItemTrigger);
-
-    // Assert
-    expect(accordionItemTrigger).toHaveAttribute("aria-expanded", "false");
-  });
-
-  it('should apply aria-expanded="true" attribute to accordion item trigger when re-expanding a collapsed one', async () => {
-    // Arrange
-    const user = userEvent.setup();
-    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 accordionItemTrigger = screen.getByRole("button", { name: title });
-
-    // Act
-    await user.click(accordionItemTrigger);
-    await user.click(accordionItemTrigger);
-    await user.click(accordionItemTrigger);
-
-    // Assert
-    expect(accordionItemTrigger).toHaveAttribute("aria-expanded", "true");
-  });
-
-  it("should make accordion item content panel not visible when an expanded accordion item trigger is clicked", 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>{title}</Accordion.Trigger>
-          </Accordion.Header>
-          <Accordion.Content>{content}</Accordion.Content>
-        </Accordion.Item>
-      </Accordion.Root>,
-    );
-    const accordionItemTrigger = screen.getByRole("button", { name: title });
-    const accordionItemPanel = screen.getByText(content);
-
-    // Act
-    await user.click(accordionItemTrigger);
-    await user.click(accordionItemTrigger);
-
-    // Assert
-    expect(accordionItemPanel).not.toBeVisible();
-  });
-
-  it("should call the onClick handler when provided to AccordionTrigger", async () => {
-    // Arrange
-    const user = userEvent.setup();
-    const onClick = vi.fn();
-    const title = "Accordion Trigger 1";
-    render(
-      <Accordion.Root>
-        <Accordion.Item>
-          <Accordion.Header>
-            <Accordion.Trigger onClick={onClick}>{title}</Accordion.Trigger>
-          </Accordion.Header>
-          <Accordion.Content>Content</Accordion.Content>
-        </Accordion.Item>
-      </Accordion.Root>,
-    );
-    const accordionItemTrigger = screen.getByRole("button", { name: title });
-
-    // Act
-    await user.click(accordionItemTrigger);
-
-    // Assert
-    expect(onClick).toHaveBeenCalledTimes(1);
-  });
-});

package/src/Accordion/__tests__/Accordion.multiple-mode.test.tsx

@@ -1,90 +0,0 @@
-import { render, screen } from "@testing-library/react";
-import userEvent from "@testing-library/user-event";
-
-import { Accordion } from "../Accordion";
-
-describe("Accordion multiple mode tests", () => {
-  it("should keep both panels open when multiple={true} and both triggers are clicked", async () => {
-    // Arrange
-    const user = userEvent.setup();
-    const title1 = "Accordion Trigger 1";
-    const content1 = "Accordion Content 1";
-    const title2 = "Accordion Trigger 2";
-    const content2 = "Accordion Content 2";
-    render(
-      <Accordion.Root multiple>
-        <Accordion.Item>
-          <Accordion.Header>
-            <Accordion.Trigger>{title1}</Accordion.Trigger>
-          </Accordion.Header>
-          <Accordion.Content>{content1}</Accordion.Content>
-        </Accordion.Item>
-        <Accordion.Item>
-          <Accordion.Header>
-            <Accordion.Trigger>{title2}</Accordion.Trigger>
-          </Accordion.Header>
-          <Accordion.Content>{content2}</Accordion.Content>
-        </Accordion.Item>
-      </Accordion.Root>,
-    );
-    const accordionItemTrigger1 = screen.getByRole("button", {
-      name: title1,
-    });
-    const accordionItemTrigger2 = screen.getByRole("button", {
-      name: title2,
-    });
-    const accordionItemPanel1 = screen.getByText(content1);
-    const accordionItemPanel2 = screen.getByText(content2);
-
-    // Act
-    await user.click(accordionItemTrigger1);
-    await user.click(accordionItemTrigger2);
-
-    // Assert - Both panels should be visible in multiple mode
-    expect(accordionItemPanel1).toBeVisible();
-    expect(accordionItemPanel2).toBeVisible();
-  });
-
-  it("should close both panels when multiple={true} and both triggers are clicked twice", async () => {
-    // Arrange
-    const user = userEvent.setup();
-    const title1 = "Accordion Trigger 1";
-    const content1 = "Accordion Content 1";
-    const title2 = "Accordion Trigger 2";
-    const content2 = "Accordion Content 2";
-    render(
-      <Accordion.Root multiple>
-        <Accordion.Item>
-          <Accordion.Header>
-            <Accordion.Trigger>{title1}</Accordion.Trigger>
-          </Accordion.Header>
-          <Accordion.Content>{content1}</Accordion.Content>
-        </Accordion.Item>
-        <Accordion.Item>
-          <Accordion.Header>
-            <Accordion.Trigger>{title2}</Accordion.Trigger>
-          </Accordion.Header>
-          <Accordion.Content>{content2}</Accordion.Content>
-        </Accordion.Item>
-      </Accordion.Root>,
-    );
-    const accordionItemTrigger1 = screen.getByRole("button", {
-      name: title1,
-    });
-    const accordionItemTrigger2 = screen.getByRole("button", {
-      name: title2,
-    });
-    const accordionItemPanel1 = screen.getByText(content1);
-    const accordionItemPanel2 = screen.getByText(content2);
-
-    // Act - Open both, then close both
-    await user.click(accordionItemTrigger1);
-    await user.click(accordionItemTrigger2);
-    await user.click(accordionItemTrigger1);
-    await user.click(accordionItemTrigger2);
-
-    // Assert - Both panels should be closed
-    expect(accordionItemPanel1).not.toBeVisible();
-    expect(accordionItemPanel2).not.toBeVisible();
-  });
-});

package/src/Accordion/__tests__/Accordion.reading-direction.test.tsx

@@ -1,139 +0,0 @@
-import { render, screen } from "@testing-library/react";
-import userEvent from "@testing-library/user-event";
-
-import { DirectionProvider } from "../../DirectionProvider/index.ts";
-import { Accordion } from "../Accordion";
-
-describe("Accordion reading direction tests", () => {
-  it('should accept dir="ltr" prop', () => {
-    // Arrange
-    render(<Accordion.Root data-testid="accordion" dir="ltr" />);
-
-    // Assert
-    expect(screen.getByTestId("accordion")).toHaveAttribute("dir", "ltr");
-  });
-
-  it('should accept dir="rtl" prop', () => {
-    // Arrange
-    render(<Accordion.Root data-testid="accordion" dir="rtl" />);
-
-    // Assert
-    expect(screen.getByTestId("accordion")).toHaveAttribute("dir", "rtl");
-  });
-
-  it('should move focus to the next trigger using "ArrowLeft" when orientation="horizontal" and dir="rtl"', async () => {
-    // Arrange
-    const user = userEvent.setup();
-    const title1 = "Trigger 1";
-    const title2 = "Trigger 2";
-    const title3 = "Trigger 3";
-    render(
-      <Accordion.Root orientation="horizontal" dir="rtl">
-        <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>{title3}</Accordion.Trigger>
-          </Accordion.Header>
-          <Accordion.Content>Content</Accordion.Content>
-        </Accordion.Item>
-      </Accordion.Root>,
-    );
-    const trigger2 = screen.getByRole("button", { name: title2 });
-
-    // Act — in RTL, "forward" is ArrowLeft
-    await user.tab();
-    await user.keyboard("[ArrowLeft]");
-
-    // Assert
-    expect(trigger2).toHaveFocus();
-  });
-
-  it('should move focus to the previous trigger using "ArrowRight" when orientation="horizontal" and dir="rtl"', async () => {
-    // Arrange
-    const user = userEvent.setup();
-    const title1 = "Trigger 1";
-    const title2 = "Trigger 2";
-    const title3 = "Trigger 3";
-    render(
-      <Accordion.Root orientation="horizontal" dir="rtl">
-        <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>{title3}</Accordion.Trigger>
-          </Accordion.Header>
-          <Accordion.Content>Content</Accordion.Content>
-        </Accordion.Item>
-      </Accordion.Root>,
-    );
-    const trigger1 = screen.getByRole("button", { name: title1 });
-
-    // Act — in RTL, "back" is ArrowRight; tab to trigger 2 then go back
-    await user.tab();
-    await user.tab();
-    await user.keyboard("[ArrowRight]");
-
-    // Assert
-    expect(trigger1).toHaveFocus();
-  });
-
-  it("should inherit reading direction from a DirectionProvider", async () => {
-    // Arrange
-    const user = userEvent.setup();
-    render(
-      <DirectionProvider dir="rtl">
-        <Accordion.Root data-testid="accordion" orientation="horizontal">
-          <Accordion.Item>
-            <Accordion.Header>
-              <Accordion.Trigger>Trigger 1</Accordion.Trigger>
-            </Accordion.Header>
-            <Accordion.Content>Content</Accordion.Content>
-          </Accordion.Item>
-          <Accordion.Item>
-            <Accordion.Header>
-              <Accordion.Trigger>Trigger 2</Accordion.Trigger>
-            </Accordion.Header>
-            <Accordion.Content>Content</Accordion.Content>
-          </Accordion.Item>
-          <Accordion.Item>
-            <Accordion.Header>
-              <Accordion.Trigger>Trigger 3</Accordion.Trigger>
-            </Accordion.Header>
-            <Accordion.Content>Content</Accordion.Content>
-          </Accordion.Item>
-        </Accordion.Root>
-      </DirectionProvider>,
-    );
-
-    // Assert — provider direction reaches both the DOM and the keyboard
-    expect(screen.getByTestId("accordion")).toHaveAttribute("dir", "rtl");
-
-    // Act — in RTL, "forward" is ArrowLeft
-    await user.tab();
-    await user.keyboard("[ArrowLeft]");
-
-    // Assert
-    expect(screen.getByRole("button", { name: "Trigger 2" })).toHaveFocus();
-  });
-});

package/src/Accordion/__tests__/Accordion.uncontrolled-state.test.tsx

@@ -1,154 +0,0 @@
-import { render, screen } from "@testing-library/react";
-import userEvent from "@testing-library/user-event";
-
-import { Accordion } from "../Accordion";
-
-describe("Accordion uncontrolled state tests", () => {
-  it("should render first accordion item panel as expanded when using defaultValue with item value prop", () => {
-    // Arrange
-    const title1 = "Accordion Trigger 1";
-    const content1 = "Accordion Content 1";
-    const title2 = "Accordion Trigger 2";
-    const content2 = "Accordion Content 2";
-
-    render(
-      <Accordion.Root defaultValue="item-1">
-        <Accordion.Item value="item-1">
-          <Accordion.Header>
-            <Accordion.Trigger>{title1}</Accordion.Trigger>
-          </Accordion.Header>
-          <Accordion.Content>{content1}</Accordion.Content>
-        </Accordion.Item>
-        <Accordion.Item value="item-2">
-          <Accordion.Header>
-            <Accordion.Trigger>{title2}</Accordion.Trigger>
-          </Accordion.Header>
-          <Accordion.Content>{content2}</Accordion.Content>
-        </Accordion.Item>
-      </Accordion.Root>,
-    );
-
-    const trigger1 = screen.getByRole("button", { name: title1 });
-    const accordionItemPanel1 = screen.getByText(content1);
-
-    // Assert - Item 1 should be expanded by default
-    expect(trigger1).toHaveAttribute("aria-expanded", "true");
-    expect(accordionItemPanel1).toBeVisible();
-  });
-
-  it("should handle defaultValue when explicitly set to undefined", async () => {
-    // Arrange
-    const user = userEvent.setup();
-    const title1 = "Accordion Trigger 1";
-    const title2 = "Accordion Trigger 2";
-    const content1 = "Accordion Content 1.";
-    const content2 = "Cars can be expensive.";
-
-    render(
-      <Accordion.Root defaultValue={undefined}>
-        <Accordion.Item value="item-1">
-          <Accordion.Header>
-            <Accordion.Trigger>{title1}</Accordion.Trigger>
-          </Accordion.Header>
-          <Accordion.Content>{content1}</Accordion.Content>
-        </Accordion.Item>
-        <Accordion.Item value="item-2">
-          <Accordion.Header>
-            <Accordion.Trigger>{title2}</Accordion.Trigger>
-          </Accordion.Header>
-          <Accordion.Content>{content2}</Accordion.Content>
-        </Accordion.Item>
-      </Accordion.Root>,
-    );
-    const trigger1 = screen.getByRole("button", { name: title1 });
-    const trigger2 = screen.getByRole("button", { name: title2 });
-    const panel1 = screen.getByText(content1);
-    const panel2 = screen.getByText(content2);
-
-    // Assert - No items should be expanded
-    expect(trigger1).toHaveAttribute("aria-expanded", "false");
-    expect(trigger2).toHaveAttribute("aria-expanded", "false");
-    expect(panel1).not.toBeVisible();
-    expect(panel2).not.toBeVisible();
-
-    // Verify both can be expanded independently (proving Set is truly empty)
-    await user.click(trigger1);
-    expect(trigger1).toHaveAttribute("aria-expanded", "true");
-    expect(panel1).toBeVisible();
-    expect(trigger2).toHaveAttribute("aria-expanded", "false");
-    expect(panel2).not.toBeVisible();
-
-    await user.click(trigger2);
-    expect(trigger1).toHaveAttribute("aria-expanded", "false");
-    expect(panel1).not.toBeVisible();
-    expect(trigger2).toHaveAttribute("aria-expanded", "true");
-    expect(panel2).toBeVisible();
-  });
-
-  it("should update toggleItem behavior when multiple prop changes", async () => {
-    // Arrange
-    const user = userEvent.setup();
-    const title1 = "Item 1";
-    const title2 = "Item 2";
-    const content1 = "Content 1";
-    const content2 = "Content 2";
-
-    const { rerender } = render(
-      <Accordion.Root multiple={false}>
-        <Accordion.Item value="item-1">
-          <Accordion.Header>
-            <Accordion.Trigger>{title1}</Accordion.Trigger>
-          </Accordion.Header>
-          <Accordion.Content>{content1}</Accordion.Content>
-        </Accordion.Item>
-        <Accordion.Item value="item-2">
-          <Accordion.Header>
-            <Accordion.Trigger>{title2}</Accordion.Trigger>
-          </Accordion.Header>
-          <Accordion.Content>{content2}</Accordion.Content>
-        </Accordion.Item>
-      </Accordion.Root>,
-    );
-
-    const trigger1 = screen.getByRole("button", { name: title1 });
-    const trigger2 = screen.getByRole("button", { name: title2 });
-    const panel1 = screen.getByText(content1);
-    const panel2 = screen.getByText(content2);
-
-    // Act - In single mode, clicking second trigger should close first
-    await user.click(trigger1);
-    expect(trigger1).toHaveAttribute("aria-expanded", "true");
-    expect(panel1).toBeVisible();
-
-    await user.click(trigger2);
-    expect(trigger1).toHaveAttribute("aria-expanded", "false");
-    expect(panel1).not.toBeVisible();
-    expect(trigger2).toHaveAttribute("aria-expanded", "true");
-    expect(panel2).toBeVisible();
-
-    // Act - Change to multiple mode
-    rerender(
-      <Accordion.Root multiple>
-        <Accordion.Item value="item-1">
-          <Accordion.Header>
-            <Accordion.Trigger>{title1}</Accordion.Trigger>
-          </Accordion.Header>
-          <Accordion.Content>{content1}</Accordion.Content>
-        </Accordion.Item>
-        <Accordion.Item value="item-2">
-          <Accordion.Header>
-            <Accordion.Trigger>{title2}</Accordion.Trigger>
-          </Accordion.Header>
-          <Accordion.Content>{content2}</Accordion.Content>
-        </Accordion.Item>
-      </Accordion.Root>,
-    );
-
-    // Assert - In multiple mode, both can be open at once
-    await user.click(trigger1);
-    expect(trigger1).toHaveAttribute("aria-expanded", "true");
-    expect(panel1).toBeVisible();
-    expect(trigger2).toHaveAttribute("aria-expanded", "true");
-    expect(panel2).toBeVisible();
-  });
-});

package/src/Accordion/hooks/index.ts

@@ -1,6 +0,0 @@
-export * from "./useAccordionContext";
-export * from "./useAccordionHeaderContext";
-export * from "./useAccordionItem";
-export * from "./useAccordionItemContext";
-export * from "./useAccordionRoot";
-export * from "./useAccordionTrigger";

package/src/Accordion/hooks/useAccordionContext.ts

@@ -1 +0,0 @@
-export { useAccordionContext } from "../AccordionContext";

package/src/Accordion/hooks/useAccordionHeaderContext.ts

@@ -1,10 +0,0 @@
-import { useContext } from "react";
-import { AccordionContext } from "../AccordionContext";
-
-export function useAccordionHeaderContext() {
-  const context = useContext(AccordionContext);
-  if (!context) {
-    throw new Error("AccordionHeader must be used within AccordionRoot");
-  }
-  return context;
-}

package/src/Accordion/hooks/useAccordionItem.ts

@@ -1,22 +0,0 @@
-import { useId, useMemo } from "react";
-
-import { deriveId } from "../../utils/index.ts";
-
-import { useAccordionContext } from "./useAccordionContext";
-
-export function useAccordionItem(value: string | undefined) {
-  const { accordionId, expandedItems } = useAccordionContext();
-  // Use provided value prop, or fall back to React's useId for stable IDs
-  const autoId = useId();
-  const itemId = value ?? autoId;
-  const buttonId = deriveId(accordionId, "heading", itemId);
-  const panelId = deriveId(accordionId, "panel", itemId);
-  const isExpanded = expandedItems.has(itemId);
-
-  const contextValue = useMemo(
-    () => ({ buttonId, panelId, itemId, isExpanded }),
-    [buttonId, panelId, itemId, isExpanded],
-  );
-
-  return { contextValue };
-}

package/src/Accordion/hooks/useAccordionItemContext.ts

@@ -1 +0,0 @@
-export { useAccordionItemContext } from "../AccordionContext";