paris 0.19.0 → 0.20.0

package/src/stories/menu/Menu.test.tsx

@@ -0,0 +1,211 @@
+import { render, screen, waitFor } from '../../test/render';
+import { Menu, MenuButton, MenuItem, MenuItems } from './Menu';
+
+function renderMenu(props?: { onItemClick?: () => void; position?: 'left' | 'right' }) {
+    return render(
+        <Menu>
+            <MenuButton>Options</MenuButton>
+            <MenuItems position={props?.position}>
+                <MenuItem as="button" onClick={props?.onItemClick}>
+                    Edit
+                </MenuItem>
+                <MenuItem as="button">Delete</MenuItem>
+                <MenuItem as="button" disabled>
+                    Archive
+                </MenuItem>
+            </MenuItems>
+        </Menu>,
+    );
+}
+
+describe('Menu', () => {
+    it('renders the menu button', () => {
+        renderMenu();
+
+        expect(screen.getByText('Options')).toBeInTheDocument();
+    });
+
+    it('does not show menu items initially', () => {
+        renderMenu();
+
+        expect(screen.queryByText('Edit')).not.toBeInTheDocument();
+    });
+
+    it('opens menu when clicking the button', async () => {
+        const { user } = renderMenu();
+
+        await user.click(screen.getByText('Options'));
+
+        await waitFor(() => {
+            expect(screen.getByText('Edit')).toBeInTheDocument();
+        });
+
+        expect(screen.getByText('Delete')).toBeInTheDocument();
+        expect(screen.getByText('Archive')).toBeInTheDocument();
+    });
+
+    it('renders all menu items when open', async () => {
+        const { user } = renderMenu();
+
+        await user.click(screen.getByText('Options'));
+
+        await waitFor(() => {
+            expect(screen.getAllByRole('menuitem')).toHaveLength(3);
+        });
+    });
+
+    it('fires callback when clicking a menu item', async () => {
+        const onItemClick = vi.fn();
+        const { user } = renderMenu({ onItemClick });
+
+        await user.click(screen.getByText('Options'));
+
+        await waitFor(() => {
+            expect(screen.getByText('Edit')).toBeInTheDocument();
+        });
+
+        await user.click(screen.getByText('Edit'));
+
+        expect(onItemClick).toHaveBeenCalledOnce();
+    });
+
+    it('closes menu after clicking a menu item', async () => {
+        const { user } = renderMenu();
+
+        await user.click(screen.getByText('Options'));
+
+        await waitFor(() => {
+            expect(screen.getByText('Edit')).toBeInTheDocument();
+        });
+
+        await user.click(screen.getByText('Edit'));
+
+        await waitFor(() => {
+            expect(screen.queryByText('Edit')).not.toBeInTheDocument();
+        });
+    });
+
+    it('closes menu when pressing Escape', async () => {
+        const { user } = renderMenu();
+
+        await user.click(screen.getByText('Options'));
+
+        await waitFor(() => {
+            expect(screen.getByText('Edit')).toBeInTheDocument();
+        });
+
+        await user.keyboard('{Escape}');
+
+        await waitFor(() => {
+            expect(screen.queryByText('Edit')).not.toBeInTheDocument();
+        });
+    });
+
+    it('supports keyboard navigation with arrow keys', async () => {
+        const { user } = renderMenu();
+
+        await user.click(screen.getByText('Options'));
+
+        await waitFor(() => {
+            expect(screen.getByText('Edit')).toBeInTheDocument();
+        });
+
+        // HeadlessUI Menu uses arrow keys for navigation
+        await user.keyboard('{ArrowDown}');
+        await user.keyboard('{ArrowDown}');
+
+        // Verify focus moved (no crash)
+        const items = screen.getAllByRole('menuitem');
+        expect(items.length).toBeGreaterThan(0);
+    });
+
+    it('renders with isNew styling on a menu item', async () => {
+        const { user } = render(
+            <Menu>
+                <MenuButton>Options</MenuButton>
+                <MenuItems>
+                    <MenuItem as="button" isNew>
+                        New Feature
+                    </MenuItem>
+                </MenuItems>
+            </Menu>,
+        );
+
+        await user.click(screen.getByText('Options'));
+
+        await waitFor(() => {
+            expect(screen.getByText('New Feature')).toBeInTheDocument();
+        });
+    });
+
+    it('supports right position for menu items', async () => {
+        const { user } = renderMenu({ position: 'right' });
+
+        await user.click(screen.getByText('Options'));
+
+        await waitFor(() => {
+            expect(screen.getByText('Edit')).toBeInTheDocument();
+        });
+    });
+
+    it('supports left position for menu items', async () => {
+        const { user } = renderMenu({ position: 'left' });
+
+        await user.click(screen.getByText('Options'));
+
+        await waitFor(() => {
+            expect(screen.getByText('Edit')).toBeInTheDocument();
+        });
+    });
+
+    it('applies custom className to Menu', () => {
+        const { container } = render(
+            <Menu className="custom-menu">
+                <MenuButton>Options</MenuButton>
+                <MenuItems>
+                    <MenuItem as="button">Item</MenuItem>
+                </MenuItems>
+            </Menu>,
+        );
+
+        expect(container.querySelector('.custom-menu')).toBeInTheDocument();
+    });
+
+    it('renders menu button with correct role', () => {
+        renderMenu();
+
+        expect(screen.getByRole('button', { name: 'Options' })).toBeInTheDocument();
+    });
+
+    it('toggles menu open and closed with the button', async () => {
+        const { user } = renderMenu();
+
+        const button = screen.getByText('Options');
+
+        // Open
+        await user.click(button);
+        await waitFor(() => {
+            expect(screen.getByText('Edit')).toBeInTheDocument();
+        });
+
+        // Close
+        await user.click(button);
+        await waitFor(() => {
+            expect(screen.queryByText('Edit')).not.toBeInTheDocument();
+        });
+    });
+
+    it('handles disabled menu items', async () => {
+        const { user } = renderMenu();
+
+        await user.click(screen.getByText('Options'));
+
+        await waitFor(() => {
+            expect(screen.getByText('Archive')).toBeInTheDocument();
+        });
+
+        // The disabled item should be rendered but marked as disabled
+        const archiveItem = screen.getByText('Archive');
+        expect(archiveItem.closest('[data-disabled]')).toBeInTheDocument();
+    });
+});

package/src/stories/pagination/usePagination.test.ts

@@ -0,0 +1,259 @@
+import { act, renderHook } from '@testing-library/react';
+import { usePagination } from './usePagination';
+
+describe('usePagination', () => {
+    it('initializes with the given initial page', () => {
+        const { result } = renderHook(() => usePagination('page1'));
+
+        expect(result.current.currentPage).toBe('page1');
+    });
+
+    it('initializes history with the initial page', () => {
+        const { result } = renderHook(() => usePagination('page1'));
+
+        expect(result.current.history).toEqual(['page1']);
+    });
+
+    it('cannot go back from the initial page', () => {
+        const { result } = renderHook(() => usePagination('page1'));
+
+        expect(result.current.canGoBack()).toBe(false);
+    });
+
+    it('cannot go forward from the initial page', () => {
+        const { result } = renderHook(() => usePagination('page1'));
+
+        expect(result.current.canGoForward()).toBe(false);
+    });
+
+    it('opens a new page and updates currentPage', () => {
+        const { result } = renderHook(() => usePagination('page1'));
+
+        act(() => {
+            result.current.open('page2');
+        });
+
+        expect(result.current.currentPage).toBe('page2');
+    });
+
+    it('adds opened page to history', () => {
+        const { result } = renderHook(() => usePagination('page1'));
+
+        act(() => {
+            result.current.open('page2');
+        });
+
+        expect(result.current.history).toEqual(['page1', 'page2']);
+    });
+
+    it('can go back after opening a new page', () => {
+        const { result } = renderHook(() => usePagination('page1'));
+
+        act(() => {
+            result.current.open('page2');
+        });
+
+        expect(result.current.canGoBack()).toBe(true);
+    });
+
+    it('goes back to the previous page', () => {
+        const { result } = renderHook(() => usePagination('page1'));
+
+        act(() => {
+            result.current.open('page2');
+        });
+
+        act(() => {
+            result.current.back();
+        });
+
+        expect(result.current.currentPage).toBe('page1');
+    });
+
+    it('does nothing when going back on the first page', () => {
+        const { result } = renderHook(() => usePagination('page1'));
+
+        act(() => {
+            result.current.back();
+        });
+
+        expect(result.current.currentPage).toBe('page1');
+    });
+
+    it('can go forward after going back', () => {
+        const { result } = renderHook(() => usePagination('page1'));
+
+        act(() => {
+            result.current.open('page2');
+        });
+
+        act(() => {
+            result.current.back();
+        });
+
+        expect(result.current.canGoForward()).toBe(true);
+    });
+
+    it('goes forward to the next page in history', () => {
+        const { result } = renderHook(() => usePagination('page1'));
+
+        act(() => {
+            result.current.open('page2');
+        });
+
+        act(() => {
+            result.current.back();
+        });
+
+        act(() => {
+            result.current.forward();
+        });
+
+        expect(result.current.currentPage).toBe('page2');
+    });
+
+    it('does nothing when going forward at the end of history', () => {
+        const { result } = renderHook(() => usePagination('page1'));
+
+        act(() => {
+            result.current.forward();
+        });
+
+        expect(result.current.currentPage).toBe('page1');
+    });
+
+    it('truncates forward history when opening a new page after going back', () => {
+        const { result } = renderHook(() => usePagination('page1'));
+
+        act(() => {
+            result.current.open('page2');
+        });
+
+        act(() => {
+            result.current.open('page3');
+        });
+
+        act(() => {
+            result.current.back();
+        });
+
+        // Now on page2, open page4 — page3 should be removed from history
+        act(() => {
+            result.current.open('page4');
+        });
+
+        expect(result.current.currentPage).toBe('page4');
+        expect(result.current.history).toEqual(['page1', 'page2', 'page4']);
+        expect(result.current.canGoForward()).toBe(false);
+    });
+
+    it('does not add duplicate page when opening the current page', () => {
+        const { result } = renderHook(() => usePagination('page1'));
+
+        act(() => {
+            result.current.open('page1');
+        });
+
+        expect(result.current.history).toEqual(['page1']);
+        expect(result.current.currentPage).toBe('page1');
+    });
+
+    it('resets to initial state', () => {
+        const { result } = renderHook(() => usePagination('page1'));
+
+        act(() => {
+            result.current.open('page2');
+        });
+
+        act(() => {
+            result.current.open('page3');
+        });
+
+        act(() => {
+            result.current.reset();
+        });
+
+        expect(result.current.currentPage).toBe('page1');
+        expect(result.current.history).toEqual(['page1']);
+        expect(result.current.canGoBack()).toBe(false);
+        expect(result.current.canGoForward()).toBe(false);
+    });
+
+    it('supports navigating through multiple pages in sequence', () => {
+        const { result } = renderHook(() => usePagination('page1'));
+
+        act(() => {
+            result.current.open('page2');
+        });
+
+        act(() => {
+            result.current.open('page3');
+        });
+
+        act(() => {
+            result.current.open('page4');
+        });
+
+        expect(result.current.history).toEqual(['page1', 'page2', 'page3', 'page4']);
+        expect(result.current.currentPage).toBe('page4');
+
+        act(() => {
+            result.current.back();
+        });
+
+        act(() => {
+            result.current.back();
+        });
+
+        expect(result.current.currentPage).toBe('page2');
+        expect(result.current.canGoBack()).toBe(true);
+        expect(result.current.canGoForward()).toBe(true);
+    });
+
+    it('supports typed page keys', () => {
+        const pages = ['home', 'settings', 'profile'] as const;
+        const { result } = renderHook(() => usePagination<typeof pages>('home'));
+
+        act(() => {
+            result.current.open('settings');
+        });
+
+        expect(result.current.currentPage).toBe('settings');
+
+        act(() => {
+            result.current.open('profile');
+        });
+
+        expect(result.current.history).toEqual(['home', 'settings', 'profile']);
+    });
+
+    it('back and forward are idempotent at boundaries', () => {
+        const { result } = renderHook(() => usePagination('page1'));
+
+        // Multiple backs at start should not throw or change state
+        act(() => {
+            result.current.back();
+        });
+
+        act(() => {
+            result.current.back();
+        });
+
+        expect(result.current.currentPage).toBe('page1');
+
+        act(() => {
+            result.current.open('page2');
+        });
+
+        // Multiple forwards at end should not throw or change state
+        act(() => {
+            result.current.forward();
+        });
+
+        act(() => {
+            result.current.forward();
+        });
+
+        expect(result.current.currentPage).toBe('page2');
+    });
+});

package/src/stories/popover/Popover.test.tsx

@@ -0,0 +1,152 @@
+import { describe, expect, it, vi } from 'vitest';
+import { render, screen, waitFor } from '../../test/render';
+import { Popover } from './Popover';
+
+describe('Popover', () => {
+    it('renders the trigger element', () => {
+        render(
+            <Popover trigger={<button type="button">Open Popover</button>}>
+                <p>Popover content</p>
+            </Popover>,
+        );
+
+        expect(screen.getByText('Open Popover')).toBeInTheDocument();
+    });
+
+    it('does not show popover content initially', () => {
+        render(
+            <Popover trigger={<button type="button">Open Popover</button>}>
+                <p>Popover content</p>
+            </Popover>,
+        );
+
+        expect(screen.queryByText('Popover content')).not.toBeInTheDocument();
+    });
+
+    it('shows popover content when the trigger is clicked', async () => {
+        const { user } = render(
+            <Popover trigger={<button type="button">Open Popover</button>}>
+                <p>Popover content</p>
+            </Popover>,
+        );
+
+        await user.click(screen.getByText('Open Popover'));
+
+        await waitFor(() => {
+            expect(screen.getByText('Popover content')).toBeInTheDocument();
+        });
+    });
+
+    it('hides popover content when the trigger is clicked again', async () => {
+        const { user } = render(
+            <Popover trigger={<button type="button">Open Popover</button>}>
+                <p>Popover content</p>
+            </Popover>,
+        );
+
+        await user.click(screen.getByText('Open Popover'));
+
+        await waitFor(() => {
+            expect(screen.getByText('Popover content')).toBeInTheDocument();
+        });
+
+        await user.click(screen.getByText('Open Popover'));
+
+        await waitFor(() => {
+            expect(screen.queryByText('Popover content')).not.toBeInTheDocument();
+        });
+    });
+
+    it('supports controlled isOpen state', () => {
+        render(
+            <Popover trigger={<button type="button">Open Popover</button>} isOpen={true} setIsOpen={vi.fn()}>
+                <p>Controlled content</p>
+            </Popover>,
+        );
+
+        expect(screen.getByText('Controlled content')).toBeInTheDocument();
+    });
+
+    it('does not show content when controlled isOpen is false', () => {
+        render(
+            <Popover trigger={<button type="button">Open Popover</button>} isOpen={false} setIsOpen={vi.fn()}>
+                <p>Controlled content</p>
+            </Popover>,
+        );
+
+        expect(screen.queryByText('Controlled content')).not.toBeInTheDocument();
+    });
+
+    it('calls setIsOpen when trigger is clicked in controlled mode', async () => {
+        const setIsOpen = vi.fn();
+        const { user } = render(
+            <Popover trigger={<button type="button">Open Popover</button>} isOpen={false} setIsOpen={setIsOpen}>
+                <p>Controlled content</p>
+            </Popover>,
+        );
+
+        await user.click(screen.getByText('Open Popover'));
+
+        expect(setIsOpen).toHaveBeenCalledWith(true);
+    });
+
+    it('renders children content inside the popover', async () => {
+        const { user } = render(
+            <Popover trigger={<button type="button">Open Popover</button>}>
+                <div>
+                    <h3>Title</h3>
+                    <p>Description text</p>
+                </div>
+            </Popover>,
+        );
+
+        await user.click(screen.getByText('Open Popover'));
+
+        await waitFor(() => {
+            expect(screen.getByText('Title')).toBeInTheDocument();
+            expect(screen.getByText('Description text')).toBeInTheDocument();
+        });
+    });
+
+    it('renders with custom positions', async () => {
+        const { user } = render(
+            <Popover trigger={<button type="button">Open Popover</button>} positions={['top', 'bottom']}>
+                <p>Positioned content</p>
+            </Popover>,
+        );
+
+        await user.click(screen.getByText('Open Popover'));
+
+        await waitFor(() => {
+            expect(screen.getByText('Positioned content')).toBeInTheDocument();
+        });
+    });
+
+    it('renders with custom alignment', async () => {
+        const { user } = render(
+            <Popover trigger={<button type="button">Open Popover</button>} align="center">
+                <p>Aligned content</p>
+            </Popover>,
+        );
+
+        await user.click(screen.getByText('Open Popover'));
+
+        await waitFor(() => {
+            expect(screen.getByText('Aligned content')).toBeInTheDocument();
+        });
+    });
+
+    it('renders with custom padding', async () => {
+        const { user } = render(
+            <Popover trigger={<button type="button">Open Popover</button>} padding={16}>
+                <p>Padded content</p>
+            </Popover>,
+        );
+
+        await user.click(screen.getByText('Open Popover'));
+
+        await waitFor(() => {
+            expect(screen.getByText('Padded content')).toBeInTheDocument();
+        });
+    });
+});

package/src/stories/select/Select.module.scss

@@ -33,7 +33,7 @@
     top: 100%;
     left: 0;
     right: 0;
-    z-index: 10;
+    z-index: var(--pte-new-layers-dropdown);
 
     display: flex;
     flex-direction: column;
@@ -265,6 +265,7 @@
     justify-content: center;
     align-items: center;
     position: relative;
+    isolation: isolate;
     transition: var(--pte-animations-interaction);
 
     &.tall {