@taskforcehq/taskforce 0.3.168

package/dist/components/ui/TaxonomyDropdown.test.js

@@ -0,0 +1,130 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { render, screen, fireEvent } from '@testing-library/react';
+import { describe, it, expect, vi } from 'vitest';
+import { TaxonomyDropdown } from './TaxonomyDropdown';
+describe('TaxonomyDropdown', () => {
+    const mockOptions = [
+        { value: 'frontend', label: 'Frontend', icon: 'Code', color: 'blue-500' },
+        { value: 'backend', label: 'Backend', icon: 'Server', color: 'green-500' },
+        { value: 'database', label: 'Database', icon: 'Database', color: 'purple-500' }
+    ];
+    it('renders with placeholder when no value selected', () => {
+        render(_jsx(TaxonomyDropdown, { value: "", options: mockOptions, onChange: vi.fn(), placeholder: "Select category..." }));
+        expect(screen.getByText('Select category...')).toBeInTheDocument();
+    });
+    it('displays selected option correctly', () => {
+        render(_jsx(TaxonomyDropdown, { value: "frontend", options: mockOptions, onChange: vi.fn() }));
+        expect(screen.getByText('Frontend')).toBeInTheDocument();
+    });
+    it('opens dropdown when clicked', () => {
+        render(_jsx(TaxonomyDropdown, { value: "frontend", options: mockOptions, onChange: vi.fn() }));
+        const button = screen.getByRole('combobox');
+        fireEvent.click(button);
+        // All options should be visible
+        expect(screen.getAllByText('Frontend')).toHaveLength(2); // One in button, one in dropdown
+        expect(screen.getByText('Backend')).toBeInTheDocument();
+        expect(screen.getByText('Database')).toBeInTheDocument();
+    });
+    it('calls onChange when option is selected', () => {
+        const handleChange = vi.fn();
+        render(_jsx(TaxonomyDropdown, { value: "frontend", options: mockOptions, onChange: handleChange }));
+        // Open dropdown
+        const button = screen.getByRole('combobox');
+        fireEvent.click(button);
+        // Click Backend option
+        const backendOption = screen.getAllByText('Backend')[0];
+        fireEvent.click(backendOption);
+        expect(handleChange).toHaveBeenCalledWith('backend');
+    });
+    it('closes dropdown after selection', () => {
+        render(_jsx(TaxonomyDropdown, { value: "frontend", options: mockOptions, onChange: vi.fn() }));
+        // Open dropdown
+        const button = screen.getByRole('combobox');
+        fireEvent.click(button);
+        // Select an option
+        const backendOption = screen.getAllByText('Backend')[0];
+        fireEvent.click(backendOption);
+        // Dropdown should be closed (only selected value visible in button)
+        expect(screen.queryByRole('listbox')).not.toBeInTheDocument();
+    });
+    it('opens dropdown with Enter key', () => {
+        render(_jsx(TaxonomyDropdown, { value: "frontend", options: mockOptions, onChange: vi.fn() }));
+        const button = screen.getByRole('combobox');
+        fireEvent.keyDown(button, { key: 'Enter' });
+        expect(screen.getByRole('listbox')).toBeInTheDocument();
+    });
+    it('opens dropdown with Space key', () => {
+        render(_jsx(TaxonomyDropdown, { value: "frontend", options: mockOptions, onChange: vi.fn() }));
+        const button = screen.getByRole('combobox');
+        fireEvent.keyDown(button, { key: ' ' });
+        expect(screen.getByRole('listbox')).toBeInTheDocument();
+    });
+    it('closes dropdown with Escape key', () => {
+        render(_jsx(TaxonomyDropdown, { value: "frontend", options: mockOptions, onChange: vi.fn() }));
+        const button = screen.getByRole('combobox');
+        // Open dropdown
+        fireEvent.click(button);
+        expect(screen.getByRole('listbox')).toBeInTheDocument();
+        // Close with Escape
+        fireEvent.keyDown(button, { key: 'Escape' });
+        expect(screen.queryByRole('listbox')).not.toBeInTheDocument();
+    });
+    it('navigates options with Arrow keys', () => {
+        render(_jsx(TaxonomyDropdown, { value: "frontend", options: mockOptions, onChange: vi.fn() }));
+        const button = screen.getByRole('combobox');
+        // Open dropdown
+        fireEvent.keyDown(button, { key: 'Enter' });
+        // Navigate down
+        fireEvent.keyDown(button, { key: 'ArrowDown' });
+        // The second option should be highlighted (visual check via class)
+        const options = screen.getAllByRole('option');
+        // Frontend is at index 0, after ArrowDown, Backend at index 1 should be highlighted
+        // Additional arrow navigation tests can be added
+    });
+    it('selects option with Enter key when highlighted', () => {
+        const handleChange = vi.fn();
+        render(_jsx(TaxonomyDropdown, { value: "frontend", options: mockOptions, onChange: handleChange }));
+        const button = screen.getByRole('combobox');
+        // Open dropdown
+        fireEvent.keyDown(button, { key: 'Enter' });
+        // Navigate to next option
+        fireEvent.keyDown(button, { key: 'ArrowDown' });
+        // Select with Enter
+        fireEvent.keyDown(button, { key: 'Enter' });
+        expect(handleChange).toHaveBeenCalled();
+    });
+    it('is disabled when disabled prop is true', () => {
+        render(_jsx(TaxonomyDropdown, { value: "frontend", options: mockOptions, onChange: vi.fn(), disabled: true }));
+        const button = screen.getByRole('combobox');
+        expect(button).toBeDisabled();
+        // Should not open when clicked
+        fireEvent.click(button);
+        expect(screen.queryByRole('listbox')).not.toBeInTheDocument();
+    });
+    it('has proper ARIA attributes', () => {
+        render(_jsx(TaxonomyDropdown, { value: "frontend", options: mockOptions, onChange: vi.fn() }));
+        const button = screen.getByRole('combobox');
+        expect(button).toHaveAttribute('aria-haspopup', 'listbox');
+        expect(button).toHaveAttribute('aria-expanded', 'false');
+        // Open dropdown
+        fireEvent.click(button);
+        expect(button).toHaveAttribute('aria-expanded', 'true');
+        const listbox = screen.getByRole('listbox');
+        expect(listbox).toBeInTheDocument();
+        const options = screen.getAllByRole('option');
+        expect(options).toHaveLength(3);
+    });
+    it('displays icons for each option', () => {
+        render(_jsx(TaxonomyDropdown, { value: "frontend", options: mockOptions, onChange: vi.fn() }));
+        // Open dropdown
+        const button = screen.getByRole('combobox');
+        fireEvent.click(button);
+        // Check that all options are rendered
+        const options = screen.getAllByRole('option');
+        expect(options).toHaveLength(3);
+        // Each option should display its label
+        expect(screen.getAllByText('Frontend').length).toBeGreaterThanOrEqual(1);
+        expect(screen.getByText('Backend')).toBeInTheDocument();
+        expect(screen.getByText('Database')).toBeInTheDocument();
+    });
+});

package/dist/components/views/StandaloneLayout 2.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import { useTaskforce } from '../../hooks/useTaskforce';
+export type StandaloneLayoutProps = ReturnType<typeof useTaskforce> & {
+    onHeaderMouseDown?: (e: React.MouseEvent) => void;
+    isDragging?: boolean;
+    onClose?: () => void;
+};
+export declare function StandaloneLayout(props: StandaloneLayoutProps): import("react/jsx-runtime").JSX.Element;