@primitiv-ui/react 0.1.0

package/src/Tabs/__tests__/Tabs.change-event-callbacks.test.tsx

@@ -0,0 +1,133 @@
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+
+import { Tabs } from '..';
+
+import { mouseChangeEventCases, keyboardChangeEventCases } from './Tabs.fixtures';
+
+describe('Tabs change event callbacks', () => {
+  describe('optional onChange callback', () => {
+    it.each(mouseChangeEventCases)(
+      'should call onChange with value and index when tab is activated via $name',
+      async ({ interact, getTab, expected }) => {
+        const user = userEvent.setup();
+        const handleChange = vi.fn();
+
+        render(
+          <Tabs.Root defaultValue="tab1" onChange={handleChange}>
+            <Tabs.List label="Test tabs">
+              <Tabs.Trigger value="tab1">Tab 1</Tabs.Trigger>
+              <Tabs.Trigger value="tab2">Tab 2</Tabs.Trigger>
+              <Tabs.Trigger value="tab3">Tab 3</Tabs.Trigger>
+            </Tabs.List>
+            <Tabs.Content value="tab1">Content 1</Tabs.Content>
+            <Tabs.Content value="tab2">Content 2</Tabs.Content>
+            <Tabs.Content value="tab3">Content 3</Tabs.Content>
+          </Tabs.Root>,
+        );
+
+        const tab2 = getTab();
+        await interact(tab2, user);
+
+        expect(handleChange).toHaveBeenCalledTimes(1);
+        expect(handleChange).toHaveBeenCalledWith(expected);
+      },
+    );
+
+    it.each(keyboardChangeEventCases)(
+      'should call onChange with value and index when tab is activated via $name',
+      async ({ interact, getTab, expected, defaultValue }) => {
+        const user = userEvent.setup();
+        const handleChange = vi.fn();
+
+        render(
+          <Tabs.Root defaultValue={defaultValue} onChange={handleChange}>
+            <Tabs.List label="Test tabs">
+              <Tabs.Trigger value="tab1">Tab 1</Tabs.Trigger>
+              <Tabs.Trigger value="tab2">Tab 2</Tabs.Trigger>
+              <Tabs.Trigger value="tab3">Tab 3</Tabs.Trigger>
+            </Tabs.List>
+            <Tabs.Content value="tab1">Content 1</Tabs.Content>
+            <Tabs.Content value="tab2">Content 2</Tabs.Content>
+            <Tabs.Content value="tab3">Content 3</Tabs.Content>
+          </Tabs.Root>,
+        );
+
+        await interact(user);
+        const tab = getTab();
+        expect(tab).toHaveFocus();
+        expect(handleChange).toHaveBeenCalledTimes(1);
+        expect(handleChange).toHaveBeenCalledWith(expected);
+      },
+    );
+
+    it('should call onChange in controlled mode', async () => {
+      const user = userEvent.setup();
+      const handleChange = vi.fn();
+      const handleValueChange = vi.fn();
+
+      render(
+        <Tabs.Root value="tab1" onValueChange={handleValueChange} onChange={handleChange}>
+          <Tabs.List label="Test tabs">
+            <Tabs.Trigger value="tab1">Tab 1</Tabs.Trigger>
+            <Tabs.Trigger value="tab2">Tab 2</Tabs.Trigger>
+            <Tabs.Trigger value="tab3">Tab 3</Tabs.Trigger>
+          </Tabs.List>
+          <Tabs.Content value="tab1">Content 1</Tabs.Content>
+          <Tabs.Content value="tab2">Content 2</Tabs.Content>
+          <Tabs.Content value="tab3">Content 3</Tabs.Content>
+        </Tabs.Root>,
+      );
+
+      const tab2Trigger = screen.getByRole('tab', { name: 'Tab 2' });
+      await user.click(tab2Trigger);
+
+      expect(handleChange).toHaveBeenCalledTimes(1);
+      expect(handleChange).toHaveBeenCalledWith({ index: 1, name: 'tab2' });
+      expect(handleValueChange).toHaveBeenCalledWith('tab2');
+    });
+
+    it('should not call onChange if clicking already active tab', async () => {
+      const user = userEvent.setup();
+      const handleChange = vi.fn();
+
+      render(
+        <Tabs.Root defaultValue="tab1" onChange={handleChange}>
+          <Tabs.List label="Test tabs">
+            <Tabs.Trigger value="tab1">Tab 1</Tabs.Trigger>
+            <Tabs.Trigger value="tab2">Tab 2</Tabs.Trigger>
+            <Tabs.Trigger value="tab3">Tab 3</Tabs.Trigger>
+          </Tabs.List>
+          <Tabs.Content value="tab1">Content 1</Tabs.Content>
+          <Tabs.Content value="tab2">Content 2</Tabs.Content>
+          <Tabs.Content value="tab3">Content 3</Tabs.Content>
+        </Tabs.Root>,
+      );
+
+      const tab1Trigger = screen.getByRole('tab', { name: 'Tab 1' });
+      await user.click(tab1Trigger);
+
+      expect(handleChange).not.toHaveBeenCalled();
+    });
+
+    it('should not call onValueChange if clicking already active tab in controlled mode', async () => {
+      const user = userEvent.setup();
+      const handleValueChange = vi.fn();
+
+      render(
+        <Tabs.Root value="tab1" onValueChange={handleValueChange}>
+          <Tabs.List label="Test tabs">
+            <Tabs.Trigger value="tab1">Tab 1</Tabs.Trigger>
+            <Tabs.Trigger value="tab2">Tab 2</Tabs.Trigger>
+          </Tabs.List>
+          <Tabs.Content value="tab1">Content 1</Tabs.Content>
+          <Tabs.Content value="tab2">Content 2</Tabs.Content>
+        </Tabs.Root>,
+      );
+
+      await user.click(screen.getByRole('tab', { name: 'Tab 1' }));
+
+      expect(handleValueChange).not.toHaveBeenCalled();
+    });
+  });
+});

package/src/Tabs/__tests__/Tabs.controlled-state.test.tsx

@@ -0,0 +1,152 @@
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { useState } from 'react';
+
+import { Tabs } from '..';
+
+describe('Tabs controlled state tests', () => {
+  it('should respect the value prop for active tab', () => {
+    // Arrange
+    render(
+      <Tabs.Root value="tab2" onValueChange={vi.fn()}>
+        <Tabs.List label="Test tabs">
+          <Tabs.Trigger value="tab1">Tab 1</Tabs.Trigger>
+          <Tabs.Trigger value="tab2">Tab 2</Tabs.Trigger>
+          <Tabs.Trigger value="tab3">Tab 3</Tabs.Trigger>
+        </Tabs.List>
+        <Tabs.Content value="tab1">Content 1</Tabs.Content>
+        <Tabs.Content value="tab2">Content 2</Tabs.Content>
+        <Tabs.Content value="tab3">Content 3</Tabs.Content>
+      </Tabs.Root>,
+    );
+
+    // Assert
+    const tab1Trigger = screen.getByRole('tab', { name: 'Tab 1' });
+    const tab2Trigger = screen.getByRole('tab', { name: 'Tab 2' });
+    const tab3Trigger = screen.getByRole('tab', { name: 'Tab 3' });
+
+    const hiddenPanels = screen.queryAllByRole('tabpanel', { hidden: true });
+    const tab1Panel = hiddenPanels[0];
+    const tab2Panel = screen.getByRole('tabpanel', { name: 'Tab 2' });
+    const tab3Panel = hiddenPanels[2];
+
+    expect(tab1Trigger).toHaveAttribute('aria-selected', 'false');
+    expect(tab1Trigger).toHaveAttribute('data-state', 'inactive');
+    expect(tab1Trigger).toHaveAttribute('tabindex', '-1');
+
+    expect(tab2Trigger).toHaveAttribute('aria-selected', 'true');
+    expect(tab2Trigger).toHaveAttribute('data-state', 'active');
+    expect(tab2Trigger).toHaveAttribute('tabindex', '0');
+
+    expect(tab3Trigger).toHaveAttribute('aria-selected', 'false');
+    expect(tab3Trigger).toHaveAttribute('data-state', 'inactive');
+    expect(tab3Trigger).toHaveAttribute('tabindex', '-1');
+
+    expect(tab1Panel).toHaveAttribute('data-state', 'inactive');
+    expect(tab1Panel).toHaveAttribute('tabindex', '-1');
+    expect(tab1Panel).toHaveAttribute('hidden');
+
+    expect(tab2Panel).toHaveAttribute('data-state', 'active');
+    expect(tab2Panel).toHaveAttribute('tabindex', '0');
+    expect(tab2Panel).not.toHaveAttribute('hidden');
+
+    expect(tab3Panel).toHaveAttribute('data-state', 'inactive');
+    expect(tab3Panel).toHaveAttribute('tabindex', '-1');
+    expect(tab3Panel).toHaveAttribute('hidden');
+  });
+
+  it('should not change state internally when in controlled mode', async () => {
+    // Arrange
+    const user = userEvent.setup();
+    const handleValueChange = vi.fn();
+
+    render(
+      <Tabs.Root value="tab1" onValueChange={handleValueChange}>
+        <Tabs.List label="Test tabs">
+          <Tabs.Trigger value="tab1">Tab 1</Tabs.Trigger>
+          <Tabs.Trigger value="tab2">Tab 2</Tabs.Trigger>
+          <Tabs.Trigger value="tab3">Tab 3</Tabs.Trigger>
+        </Tabs.List>
+        <Tabs.Content value="tab1">Content 1</Tabs.Content>
+        <Tabs.Content value="tab2">Content 2</Tabs.Content>
+        <Tabs.Content value="tab3">Content 3</Tabs.Content>
+      </Tabs.Root>,
+    );
+
+    // Act
+    const tab2Trigger = screen.getByRole('tab', { name: 'Tab 2' });
+    await user.click(tab2Trigger);
+
+    // Assert
+    expect(handleValueChange).toHaveBeenCalledWith('tab2');
+    const tab1Trigger = screen.getByRole('tab', { name: 'Tab 1' });
+    expect(tab1Trigger).toHaveAttribute('aria-selected', 'true');
+    expect(tab2Trigger).toHaveAttribute('aria-selected', 'false');
+  });
+
+  it('should not change state internally when in controlled mode', async () => {
+    // Arrange
+    const user = userEvent.setup();
+    const handleValueChange = vi.fn();
+
+    render(
+      <Tabs.Root value="tab1" onValueChange={handleValueChange}>
+        <Tabs.List label="Test tabs">
+          <Tabs.Trigger value="tab1">Tab 1</Tabs.Trigger>
+          <Tabs.Trigger value="tab2">Tab 2</Tabs.Trigger>
+          <Tabs.Trigger value="tab3">Tab 3</Tabs.Trigger>
+        </Tabs.List>
+        <Tabs.Content value="tab1">Content 1</Tabs.Content>
+        <Tabs.Content value="tab2">Content 2</Tabs.Content>
+        <Tabs.Content value="tab3">Content 3</Tabs.Content>
+      </Tabs.Root>,
+    );
+
+    // Act
+    const tab2Trigger = screen.getByRole('tab', { name: 'Tab 2' });
+    await user.click(tab2Trigger);
+
+    // Assert
+    expect(handleValueChange).toHaveBeenCalledWith('tab2');
+    const tab1Trigger = screen.getByRole('tab', { name: 'Tab 1' });
+    expect(tab1Trigger).toHaveAttribute('aria-selected', 'true');
+    expect(tab2Trigger).toHaveAttribute('aria-selected', 'false');
+  });
+
+  it('should update active tab when parent updates value prop', async () => {
+    // Arrange
+    const user = userEvent.setup();
+
+    function ControlledTabsParent() {
+      const [activeTab, setActiveTab] = useState('tab1');
+
+      return (
+        <Tabs.Root value={activeTab} onValueChange={setActiveTab}>
+          <Tabs.List label="Test tabs">
+            <Tabs.Trigger value="tab1">Tab 1</Tabs.Trigger>
+            <Tabs.Trigger value="tab2">Tab 2</Tabs.Trigger>
+            <Tabs.Trigger value="tab3">Tab 3</Tabs.Trigger>
+          </Tabs.List>
+          <Tabs.Content value="tab1">Content 1</Tabs.Content>
+          <Tabs.Content value="tab2">Content 2</Tabs.Content>
+          <Tabs.Content value="tab3">Content 3</Tabs.Content>
+        </Tabs.Root>
+      );
+    }
+
+    render(<ControlledTabsParent />);
+
+    // Assert initial state
+    const tab1Trigger = screen.getByRole('tab', { name: 'Tab 1' });
+    const tab2Trigger = screen.getByRole('tab', { name: 'Tab 2' });
+    expect(tab1Trigger).toHaveAttribute('aria-selected', 'true');
+    expect(tab2Trigger).toHaveAttribute('aria-selected', 'false');
+
+    // Act - user clicks tab2, parent updates state
+    await user.click(tab2Trigger);
+
+    // Assert - component updated to match new value from parent
+    expect(tab1Trigger).toHaveAttribute('aria-selected', 'false');
+    expect(tab2Trigger).toHaveAttribute('aria-selected', 'true');
+  });
+});

package/src/Tabs/__tests__/Tabs.disabled-tabs.test.tsx

@@ -0,0 +1,203 @@
+import { render, screen } from "@testing-library/react";
+import { Tabs } from "../Tabs";
+import userEvent from "@testing-library/user-event";
+
+describe("Tabs disabled tabs tests", () => {
+  it("should have the aria-disabled attribute set to false by default", () => {
+    // Arrange
+    render(
+      <Tabs.Root defaultValue="tab1">
+        <Tabs.List label="Test tabs">
+          <Tabs.Trigger value="tab1">Tab 1</Tabs.Trigger>
+          <Tabs.Trigger value="tab2">Tab 2</Tabs.Trigger>
+        </Tabs.List>
+        <Tabs.Content value="tab1">Content 1</Tabs.Content>
+        <Tabs.Content value="tab2">Content 2</Tabs.Content>
+      </Tabs.Root>,
+    );
+    const firstTab = screen.getByRole("tab", { name: "Tab 1" });
+
+    // Assert
+    expect(firstTab).toHaveAttribute("aria-disabled", "false");
+  });
+
+  it("should not have the native disabled attribute set when disabled prop is provided", () => {
+    // Arrange
+    render(
+      <Tabs.Root defaultValue="tab1">
+        <Tabs.List label="Test tabs">
+          <Tabs.Trigger value="tab1" disabled>
+            Tab 1
+          </Tabs.Trigger>
+          <Tabs.Trigger value="tab2">Tab 2</Tabs.Trigger>
+        </Tabs.List>
+        <Tabs.Content value="tab1">Content 1</Tabs.Content>
+        <Tabs.Content value="tab2">Content 2</Tabs.Content>
+      </Tabs.Root>,
+    );
+    const firstTab = screen.getByRole("tab", { name: "Tab 1" });
+
+    // Assert
+    expect(firstTab).not.toHaveAttribute("disabled");
+  });
+
+  it("should have the aria-disabled attribute set to true when disabled prop is provided", () => {
+    // Arrange
+    render(
+      <Tabs.Root defaultValue="tab1">
+        <Tabs.List label="Test tabs">
+          <Tabs.Trigger value="tab1" disabled>
+            Tab 1
+          </Tabs.Trigger>
+          <Tabs.Trigger value="tab2">Tab 2</Tabs.Trigger>
+        </Tabs.List>
+        <Tabs.Content value="tab1">Content 1</Tabs.Content>
+        <Tabs.Content value="tab2">Content 2</Tabs.Content>
+      </Tabs.Root>,
+    );
+    const firstTab = screen.getByRole("tab", { name: "Tab 1" });
+
+    // Assert
+    expect(firstTab).toHaveAttribute("aria-disabled", "true");
+  });
+
+  it("should have the data-disabled attribute set to false by default", () => {
+    // Arrange
+    render(
+      <Tabs.Root defaultValue="tab1">
+        <Tabs.List label="Test tabs">
+          <Tabs.Trigger value="tab1">Tab 1</Tabs.Trigger>
+          <Tabs.Trigger value="tab2">Tab 2</Tabs.Trigger>
+        </Tabs.List>
+        <Tabs.Content value="tab1">Content 1</Tabs.Content>
+        <Tabs.Content value="tab2">Content 2</Tabs.Content>
+      </Tabs.Root>,
+    );
+    const firstTab = screen.getByRole("tab", { name: "Tab 1" });
+
+    // Assert
+    expect(firstTab).toHaveAttribute("data-disabled", "false");
+  });
+
+  it("should have the data-disabled attribute set to true when disabled prop is provided", () => {
+    // Arrange
+    render(
+      <Tabs.Root defaultValue="tab1">
+        <Tabs.List label="Test tabs">
+          <Tabs.Trigger value="tab1" disabled>
+            Tab 1
+          </Tabs.Trigger>
+          <Tabs.Trigger value="tab2">Tab 2</Tabs.Trigger>
+        </Tabs.List>
+        <Tabs.Content value="tab1">Content 1</Tabs.Content>
+        <Tabs.Content value="tab2">Content 2</Tabs.Content>
+      </Tabs.Root>,
+    );
+    const firstTab = screen.getByRole("tab", { name: "Tab 1" });
+
+    // Assert
+    expect(firstTab).toHaveAttribute("data-disabled", "true");
+  });
+
+  it("should not change the currently active panel when clicking on a disabled tab", async () => {
+    // Arrange
+    const user = userEvent.setup();
+    render(
+      <Tabs.Root defaultValue="tab1">
+        <Tabs.List label="Test tabs">
+          <Tabs.Trigger value="tab1">Tab 1</Tabs.Trigger>
+          <Tabs.Trigger value="tab2" disabled>
+            Tab 2
+          </Tabs.Trigger>
+        </Tabs.List>
+        <Tabs.Content value="tab1">Content 1</Tabs.Content>
+        <Tabs.Content value="tab2">Content 2</Tabs.Content>
+      </Tabs.Root>,
+    );
+    const currentActivePanel = screen.getByRole("tabpanel", { name: "Tab 1" });
+    const disabledTab = screen.getByRole("tab", { name: "Tab 2" });
+
+    // Act
+    await user.click(disabledTab);
+
+    // Assert
+    expect(currentActivePanel).not.toHaveAttribute("hidden");
+  });
+
+  it.each([
+    {
+      name: "ArrowRight to next disabled tab",
+      defaultValue: "tab1",
+      triggers: [
+        { value: "tab1", label: "Tab 1", disabled: false },
+        { value: "tab2", label: "Tab 2", disabled: true },
+      ],
+      focusTab: "Tab 1",
+      keyboard: "{ArrowRight}",
+      activePanel: "Tab 1",
+    },
+    {
+      name: "ArrowLeft to previous disabled tab",
+      defaultValue: "tab2",
+      triggers: [
+        { value: "tab1", label: "Tab 1", disabled: true },
+        { value: "tab2", label: "Tab 2", disabled: false },
+      ],
+      focusTab: "Tab 2",
+      keyboard: "{ArrowLeft}",
+      activePanel: "Tab 2",
+    },
+    {
+      name: "Home to first disabled tab",
+      defaultValue: "tab2",
+      triggers: [
+        { value: "tab1", label: "Tab 1", disabled: true },
+        { value: "tab2", label: "Tab 2", disabled: false },
+      ],
+      focusTab: "Tab 2",
+      keyboard: "{Home}",
+      activePanel: "Tab 2",
+    },
+    {
+      name: "End to last disabled tab",
+      defaultValue: "tab1",
+      triggers: [
+        { value: "tab1", label: "Tab 1", disabled: false },
+        { value: "tab2", label: "Tab 2", disabled: true },
+      ],
+      focusTab: "Tab 1",
+      keyboard: "{End}",
+      activePanel: "Tab 1",
+    },
+  ])(
+    "should not activate a disabled tab when navigating: $name",
+    async ({ defaultValue, triggers, focusTab, keyboard, activePanel }) => {
+      // Arrange
+      const user = userEvent.setup();
+      render(
+        <Tabs.Root defaultValue={defaultValue}>
+          <Tabs.List label="Test tabs">
+            {triggers.map((t) => (
+              <Tabs.Trigger key={t.value} value={t.value} disabled={t.disabled}>
+                {t.label}
+              </Tabs.Trigger>
+            ))}
+          </Tabs.List>
+          <Tabs.Content value="tab1">Content 1</Tabs.Content>
+          <Tabs.Content value="tab2">Content 2</Tabs.Content>
+        </Tabs.Root>,
+      );
+      const currentActivePanel = screen.getByRole("tabpanel", {
+        name: activePanel,
+      });
+
+      // Act
+      await user.tab();
+      expect(screen.getByRole("tab", { name: focusTab })).toHaveFocus();
+      await user.keyboard(keyboard);
+
+      // Assert
+      expect(currentActivePanel).not.toHaveAttribute("hidden");
+    },
+  );
+});

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

@@ -0,0 +1,82 @@
+import { render, screen } from '@testing-library/react';
+import { act, useState } from 'react';
+
+import { Tabs } from '..';
+
+import { errorCases } from './Tabs.fixtures';
+
+describe('Error Handling', () => {
+  it.each(errorCases)('should throw error when $name is not a valid tab', ({ rootProps }) => {
+    // Arrange & Assert
+    const exampleIncorrectValue = rootProps.value || rootProps.defaultValue;
+    expect(() =>
+      render(
+        <Tabs.Root {...rootProps}>
+          <Tabs.List label="Test label">
+            <Tabs.Trigger value="tab1">Tab 1</Tabs.Trigger>
+            <Tabs.Trigger value="tab2">Tab 2</Tabs.Trigger>
+          </Tabs.List>
+          <Tabs.Content value="tab1">Panel 1</Tabs.Content>
+          <Tabs.Content value="tab2">Panel 2</Tabs.Content>
+        </Tabs.Root>,
+      ),
+    ).toThrow(
+      `Invalid active tab value: "${exampleIncorrectValue}". Valid values are: [tab1, tab2]`,
+    );
+  });
+
+  it('should throw when the controlled active tab is removed dynamically', () => {
+    // Arrange
+    function DynamicTabs({ showTab2 }: { showTab2: boolean }) {
+      return (
+        <Tabs.Root value="tab2" onValueChange={() => {}}>
+          <Tabs.List label="Test tabs">
+            <Tabs.Trigger value="tab1">Tab 1</Tabs.Trigger>
+            {showTab2 && <Tabs.Trigger value="tab2">Tab 2</Tabs.Trigger>}
+          </Tabs.List>
+          <Tabs.Content value="tab1">Content 1</Tabs.Content>
+          {showTab2 && <Tabs.Content value="tab2">Content 2</Tabs.Content>}
+        </Tabs.Root>
+      );
+    }
+    const { rerender } = render(<DynamicTabs showTab2={true} />);
+
+    // Act & Assert — removing tab2 while it is the active value must throw
+    expect(() => {
+      rerender(<DynamicTabs showTab2={false} />);
+    }).toThrow('Invalid active tab value: "tab2"');
+  });
+
+  it('should throw error when value prop changes to an invalid tab (controlled mode only)', () => {
+    // Arrange
+    const exampleIncorrectValue = 'nonexistent';
+    function ControlledTabs() {
+      const [tab, setTab] = useState('tab1');
+      return (
+        <>
+          <button type="button" onClick={() => setTab(exampleIncorrectValue)}>
+            Set Invalid Tab
+          </button>
+          <Tabs.Root value={tab} onValueChange={setTab}>
+            <Tabs.List label="Test label">
+              <Tabs.Trigger value="tab1">Tab 1</Tabs.Trigger>
+              <Tabs.Trigger value="tab2">Tab 2</Tabs.Trigger>
+            </Tabs.List>
+            <Tabs.Content value="tab1">Panel 1</Tabs.Content>
+            <Tabs.Content value="tab2">Panel 2</Tabs.Content>
+          </Tabs.Root>
+        </>
+      );
+    }
+    render(<ControlledTabs />);
+
+    // Act & Assert
+    expect(() => {
+      act(() => {
+        screen.getByText('Set Invalid Tab').click();
+      });
+    }).toThrow(
+      `Invalid active tab value: "${exampleIncorrectValue}". Valid values are: [tab1, tab2]`,
+    );
+  });
+});