paris 0.19.0 → 0.20.0

package/src/stories/combobox/Combobox.test.tsx

@@ -0,0 +1,164 @@
+import { useState } from 'react';
+import { render, screen, waitFor } from '../../test/render';
+import type { ComboboxProps, Option } from './Combobox';
+import { Combobox } from './Combobox';
+
+const options: Option[] = [
+    { id: '1', node: 'Mia Dolan' },
+    { id: '2', node: 'Sebastian Wilder' },
+    { id: '3', node: 'Amy Brandt' },
+    { id: '4', node: 'Laura Wilder' },
+];
+
+function ControlledCombobox(props: Partial<ComboboxProps<Record<string, any>>>) {
+    const [selected, setSelected] = useState<Option | null>((props.value as Option | null) ?? null);
+    const [inputValue, setInputValue] = useState('');
+
+    const currentOptions = props.options ?? options;
+    const filteredOptions = currentOptions.filter((o) => {
+        const text = typeof o.node === 'string' ? o.node : '';
+        return text.toLowerCase().includes(inputValue.toLowerCase());
+    });
+
+    return (
+        <Combobox
+            placeholder="Search..."
+            label="Share"
+            {...props}
+            options={filteredOptions}
+            value={selected?.id === null ? { id: null, node: inputValue } : selected}
+            onChange={(opt) => {
+                setSelected(opt);
+                props.onChange?.(opt);
+            }}
+            onInputChange={(v) => {
+                setInputValue(v);
+                props.onInputChange?.(v);
+            }}
+        />
+    );
+}
+
+describe('Combobox', () => {
+    it('renders with placeholder text', () => {
+        render(<Combobox options={options} placeholder="Search..." />);
+        expect(screen.getByPlaceholderText('Search...')).toBeInTheDocument();
+    });
+
+    it('renders label and description', () => {
+        render(<Combobox options={options} label="Share" description="Search for a friend." placeholder="Search..." />);
+        expect(screen.getByText('Share')).toBeInTheDocument();
+        expect(screen.getByText('Search for a friend.')).toBeInTheDocument();
+    });
+
+    it('shows options when input is focused', async () => {
+        const { user } = render(<ControlledCombobox />);
+        const input = screen.getByPlaceholderText('Search...');
+        await user.click(input);
+
+        await waitFor(() => {
+            expect(screen.getByText('Mia Dolan')).toBeInTheDocument();
+            expect(screen.getByText('Sebastian Wilder')).toBeInTheDocument();
+        });
+    });
+
+    it('filters options as user types', async () => {
+        const { user } = render(<ControlledCombobox />);
+        const input = screen.getByPlaceholderText('Search...');
+
+        await user.click(input);
+        await user.type(input, 'wilder');
+
+        await waitFor(() => {
+            expect(screen.getByText('Sebastian Wilder')).toBeInTheDocument();
+            expect(screen.getByText('Laura Wilder')).toBeInTheDocument();
+            expect(screen.queryByText('Mia Dolan')).not.toBeInTheDocument();
+            expect(screen.queryByText('Amy Brandt')).not.toBeInTheDocument();
+        });
+    });
+
+    it('selects an option and calls onChange', async () => {
+        const handleChange = vi.fn();
+        const { user } = render(<ControlledCombobox onChange={handleChange} />);
+        const input = screen.getByPlaceholderText('Search...');
+
+        await user.click(input);
+        await waitFor(() => {
+            expect(screen.getByText('Amy Brandt')).toBeInTheDocument();
+        });
+
+        await user.click(screen.getByText('Amy Brandt'));
+        expect(handleChange).toHaveBeenCalledWith(expect.objectContaining({ id: '3', node: 'Amy Brandt' }));
+    });
+
+    it('calls onInputChange when the user types', async () => {
+        const handleInputChange = vi.fn();
+        const { user } = render(<ControlledCombobox onInputChange={handleInputChange} />);
+        const input = screen.getByPlaceholderText('Search...');
+
+        await user.click(input);
+        await user.type(input, 'test');
+
+        expect(handleInputChange).toHaveBeenCalled();
+    });
+
+    it('shows clear button when a value is selected', () => {
+        const { container } = render(
+            <Combobox options={options} value={{ id: '1', node: 'Mia Dolan' }} placeholder="Search..." />,
+        );
+        // The clear button uses shape="circle" which hides children text,
+        // but sets aria-details="Clear"
+        const clearButton = container.querySelector('button[aria-details="Clear"]');
+        expect(clearButton).toBeInTheDocument();
+    });
+
+    it('clears selection when clear button is clicked', async () => {
+        const handleChange = vi.fn();
+        const { user, container } = render(
+            <ControlledCombobox value={{ id: '1', node: 'Mia Dolan' }} onChange={handleChange} />,
+        );
+
+        const clearButton = container.querySelector('button[aria-details="Clear"]');
+        expect(clearButton).toBeInTheDocument();
+        await user.click(clearButton!);
+
+        expect(handleChange).toHaveBeenCalledWith(null);
+    });
+
+    it('hides clear button when hideClearButton is true and node is string', () => {
+        render(
+            <Combobox
+                options={options}
+                value={{ id: '1', node: 'Mia Dolan' }}
+                hideClearButton
+                placeholder="Search..."
+            />,
+        );
+        expect(screen.queryByRole('button', { name: /clear/i })).not.toBeInTheDocument();
+    });
+
+    it('applies disabled status data attribute', () => {
+        render(<Combobox options={options} disabled placeholder="Search..." />);
+        const input = screen.getByPlaceholderText('Search...');
+        expect(input).toHaveAttribute('aria-disabled', 'true');
+        expect(input).toHaveAttribute('data-status', 'disabled');
+    });
+
+    it('applies error status data attribute to input', () => {
+        render(<Combobox options={options} status="error" placeholder="Search..." />);
+        const input = screen.getByPlaceholderText('Search...');
+        expect(input).toHaveAttribute('data-status', 'error');
+    });
+
+    it('shows custom value option when allowCustomValue is true', async () => {
+        const { user } = render(<ControlledCombobox allowCustomValue customValueString='Add "%v"' />);
+        const input = screen.getByPlaceholderText('Search...');
+
+        await user.click(input);
+        await user.type(input, 'New Artist');
+
+        await waitFor(() => {
+            expect(screen.getByText('Add "New Artist"')).toBeInTheDocument();
+        });
+    });
+});

package/src/stories/dialog/Dialog.module.scss

@@ -5,7 +5,7 @@ $panelAnimationDelay: var(--pte-animations-duration-fast);
 
 .root {
     position: relative;
-    z-index: 10;
+    z-index: var(--pte-new-layers-overlay);
     user-select: var(--pte-utils-defaultUserSelect);
 }
 
@@ -120,7 +120,7 @@ $panelAnimationDelay: var(--pte-animations-duration-fast);
 
 .panel {
     position: relative;
-    z-index: 10;
+    z-index: var(--pte-new-layers-overlay);
     width: 100%;
     margin: auto;
     padding: 16px;

package/src/stories/dialog/Dialog.test.tsx

@@ -0,0 +1,244 @@
+import { describe, expect, it, vi } from 'vitest';
+import { getCloseButton, render, screen, waitFor } from '../../test/render';
+import { Dialog } from './Dialog';
+
+describe('Dialog', () => {
+    it('renders when isOpen is true', async () => {
+        render(
+            <Dialog isOpen={true} title="Test Dialog" onClose={vi.fn()}>
+                Dialog content
+            </Dialog>,
+        );
+
+        await waitFor(() => {
+            expect(screen.getByRole('dialog')).toBeInTheDocument();
+        });
+    });
+
+    it('does not render when isOpen is false', () => {
+        render(
+            <Dialog isOpen={false} title="Test Dialog" onClose={vi.fn()}>
+                Dialog content
+            </Dialog>,
+        );
+
+        expect(screen.queryByRole('dialog')).not.toBeInTheDocument();
+    });
+
+    it('renders children content', async () => {
+        render(
+            <Dialog isOpen={true} title="Test Dialog" onClose={vi.fn()}>
+                <p>Hello from Dialog</p>
+            </Dialog>,
+        );
+
+        await waitFor(() => {
+            expect(screen.getByText('Hello from Dialog')).toBeInTheDocument();
+        });
+    });
+
+    it('renders the title', async () => {
+        render(
+            <Dialog isOpen={true} title="My Dialog Title" onClose={vi.fn()}>
+                Content
+            </Dialog>,
+        );
+
+        await waitFor(() => {
+            expect(screen.getByText('My Dialog Title')).toBeInTheDocument();
+        });
+    });
+
+    it('visually hides title when hideTitle is true but keeps it accessible', async () => {
+        render(
+            <Dialog isOpen={true} title="Hidden Title" hideTitle={true} onClose={vi.fn()}>
+                Content
+            </Dialog>,
+        );
+
+        await waitFor(() => {
+            expect(screen.getByText('Hidden Title')).toBeInTheDocument();
+        });
+    });
+
+    it('renders the close button by default', async () => {
+        render(
+            <Dialog isOpen={true} title="Test Dialog" onClose={vi.fn()}>
+                Content
+            </Dialog>,
+        );
+
+        await waitFor(() => {
+            expect(getCloseButton()).toBeInTheDocument();
+        });
+    });
+
+    it('hides the close button when hideCloseButton is true', async () => {
+        render(
+            <Dialog isOpen={true} title="Test Dialog" hideCloseButton={true} onClose={vi.fn()}>
+                Content
+            </Dialog>,
+        );
+
+        await waitFor(() => {
+            expect(screen.getByRole('dialog')).toBeInTheDocument();
+        });
+
+        expect(getCloseButton()).not.toBeInTheDocument();
+    });
+
+    it('calls onClose when the close button is clicked', async () => {
+        const onClose = vi.fn();
+        const { user } = render(
+            <Dialog isOpen={true} title="Test Dialog" onClose={onClose}>
+                Content
+            </Dialog>,
+        );
+
+        await waitFor(() => {
+            expect(getCloseButton()).toBeInTheDocument();
+        });
+
+        const closeButton = getCloseButton()!;
+        await user.click(closeButton);
+
+        expect(onClose).toHaveBeenCalledWith(false);
+    });
+
+    it('applies simple appearance by default', async () => {
+        render(
+            <Dialog isOpen={true} title="Test Dialog" onClose={vi.fn()}>
+                Content
+            </Dialog>,
+        );
+
+        await waitFor(() => {
+            expect(screen.getByRole('dialog')).toBeInTheDocument();
+        });
+    });
+
+    it('accepts glass appearance', async () => {
+        render(
+            <Dialog isOpen={true} title="Test Dialog" appearance="glass" onClose={vi.fn()}>
+                Content
+            </Dialog>,
+        );
+
+        await waitFor(() => {
+            expect(screen.getByRole('dialog')).toBeInTheDocument();
+        });
+    });
+
+    it('accepts width presets', async () => {
+        const { rerender } = render(
+            <Dialog isOpen={true} title="Test Dialog" width="compact" onClose={vi.fn()}>
+                Content
+            </Dialog>,
+        );
+
+        await waitFor(() => {
+            expect(screen.getByRole('dialog')).toBeInTheDocument();
+        });
+
+        rerender(
+            <Dialog isOpen={true} title="Test Dialog" width="large" onClose={vi.fn()}>
+                Content
+            </Dialog>,
+        );
+
+        await waitFor(() => {
+            expect(screen.getByRole('dialog')).toBeInTheDocument();
+        });
+    });
+
+    it('accepts custom width as CSSLength', async () => {
+        render(
+            <Dialog isOpen={true} title="Test Dialog" width="500px" onClose={vi.fn()}>
+                Content
+            </Dialog>,
+        );
+
+        await waitFor(() => {
+            expect(screen.getByRole('dialog')).toBeInTheDocument();
+        });
+    });
+
+    it('accepts full height', async () => {
+        render(
+            <Dialog isOpen={true} title="Test Dialog" height="full" onClose={vi.fn()}>
+                Content
+            </Dialog>,
+        );
+
+        await waitFor(() => {
+            expect(screen.getByRole('dialog')).toBeInTheDocument();
+        });
+    });
+
+    it('accepts grey overlay style', async () => {
+        render(
+            <Dialog isOpen={true} title="Test Dialog" overlayStyle="grey" onClose={vi.fn()}>
+                Content
+            </Dialog>,
+        );
+
+        await waitFor(() => {
+            expect(screen.getByRole('dialog')).toBeInTheDocument();
+        });
+    });
+
+    it('renders with overrides applied', async () => {
+        render(
+            <Dialog
+                isOpen={true}
+                title="Test Dialog"
+                onClose={vi.fn()}
+                overrides={{
+                    root: { 'data-testid': 'dialog-root' } as any,
+                    panel: { 'data-testid': 'dialog-panel' } as any,
+                }}
+            >
+                Content
+            </Dialog>,
+        );
+
+        await waitFor(() => {
+            expect(screen.getByTestId('dialog-root')).toBeInTheDocument();
+            expect(screen.getByTestId('dialog-panel')).toBeInTheDocument();
+        });
+    });
+
+    it('renders a ReactNode title', async () => {
+        render(
+            <Dialog isOpen={true} title={<span data-testid="custom-title">Custom Title</span>} onClose={vi.fn()}>
+                Content
+            </Dialog>,
+        );
+
+        await waitFor(() => {
+            expect(screen.getByTestId('custom-title')).toBeInTheDocument();
+        });
+    });
+
+    it('does not render when isOpen transitions from true to false', async () => {
+        const { rerender } = render(
+            <Dialog isOpen={true} title="Test Dialog" onClose={vi.fn()}>
+                Content
+            </Dialog>,
+        );
+
+        await waitFor(() => {
+            expect(screen.getByRole('dialog')).toBeInTheDocument();
+        });
+
+        rerender(
+            <Dialog isOpen={false} title="Test Dialog" onClose={vi.fn()}>
+                Content
+            </Dialog>,
+        );
+
+        await waitFor(() => {
+            expect(screen.queryByRole('dialog')).not.toBeInTheDocument();
+        });
+    });
+});

package/src/stories/drawer/Drawer.module.scss

@@ -18,7 +18,7 @@ $panelAnimationDelay: var(--pte-animations-duration-fast);
     position: fixed;
     inset: 0;
     overflow: hidden;
-    z-index: 10;
+    z-index: var(--pte-new-layers-overlay);
     user-select: var(--pte-utils-defaultUserSelect);
 }
 
@@ -85,7 +85,7 @@ $panelAnimationDelay: var(--pte-animations-duration-fast);
 
     justify-self: flex-end;
 
-    z-index: 10;
+    z-index: var(--pte-new-layers-overlay);
 
     .enter {
         transition: $duration var(--pte-animations-timing-easeOutQuad);

package/src/stories/drawer/Drawer.test.tsx

@@ -0,0 +1,259 @@
+import { describe, expect, it, vi } from 'vitest';
+import { getCloseButton, render, screen, waitFor } from '../../test/render';
+import { Drawer } from './Drawer';
+
+describe('Drawer', () => {
+    it('renders when isOpen is true', async () => {
+        render(
+            <Drawer isOpen={true} title="Test Drawer" onClose={vi.fn()}>
+                Drawer content
+            </Drawer>,
+        );
+
+        await waitFor(() => {
+            expect(screen.getByRole('dialog')).toBeInTheDocument();
+        });
+    });
+
+    it('does not render when isOpen is false', () => {
+        render(
+            <Drawer isOpen={false} title="Test Drawer" onClose={vi.fn()}>
+                Drawer content
+            </Drawer>,
+        );
+
+        expect(screen.queryByRole('dialog')).not.toBeInTheDocument();
+    });
+
+    it('renders children content', async () => {
+        render(
+            <Drawer isOpen={true} title="Test Drawer" onClose={vi.fn()}>
+                <p>Hello from Drawer</p>
+            </Drawer>,
+        );
+
+        await waitFor(() => {
+            expect(screen.getByText('Hello from Drawer')).toBeInTheDocument();
+        });
+    });
+
+    it('renders the title', async () => {
+        render(
+            <Drawer isOpen={true} title="My Drawer Title" onClose={vi.fn()}>
+                Content
+            </Drawer>,
+        );
+
+        await waitFor(() => {
+            expect(screen.getByText('My Drawer Title')).toBeInTheDocument();
+        });
+    });
+
+    it('visually hides title when hideTitle is true but keeps it accessible', async () => {
+        render(
+            <Drawer isOpen={true} title="Hidden Title" hideTitle={true} onClose={vi.fn()}>
+                Content
+            </Drawer>,
+        );
+
+        await waitFor(() => {
+            expect(screen.getByText('Hidden Title')).toBeInTheDocument();
+        });
+    });
+
+    it('renders the close button by default', async () => {
+        render(
+            <Drawer isOpen={true} title="Test Drawer" onClose={vi.fn()}>
+                Content
+            </Drawer>,
+        );
+
+        await waitFor(() => {
+            expect(getCloseButton()).toBeInTheDocument();
+        });
+    });
+
+    it('hides the close button when hideCloseButton is true', async () => {
+        render(
+            <Drawer isOpen={true} title="Test Drawer" hideCloseButton={true} onClose={vi.fn()}>
+                Content
+            </Drawer>,
+        );
+
+        await waitFor(() => {
+            expect(screen.getByRole('dialog')).toBeInTheDocument();
+        });
+
+        expect(getCloseButton()).not.toBeInTheDocument();
+    });
+
+    it('calls onClose when the close button is clicked', async () => {
+        const onClose = vi.fn();
+        const { user } = render(
+            <Drawer isOpen={true} title="Test Drawer" onClose={onClose}>
+                Content
+            </Drawer>,
+        );
+
+        await waitFor(() => {
+            expect(getCloseButton()).toBeInTheDocument();
+        });
+
+        const closeButton = getCloseButton()!;
+        await user.click(closeButton);
+
+        expect(onClose).toHaveBeenCalledWith(false);
+    });
+
+    it('renders with from="left"', async () => {
+        render(
+            <Drawer isOpen={true} title="Test Drawer" from="left" onClose={vi.fn()}>
+                Content
+            </Drawer>,
+        );
+
+        await waitFor(() => {
+            expect(screen.getByRole('dialog')).toBeInTheDocument();
+        });
+    });
+
+    it('renders with from="right" (default)', async () => {
+        render(
+            <Drawer isOpen={true} title="Test Drawer" from="right" onClose={vi.fn()}>
+                Content
+            </Drawer>,
+        );
+
+        await waitFor(() => {
+            expect(screen.getByRole('dialog')).toBeInTheDocument();
+        });
+    });
+
+    it('renders with from="top"', async () => {
+        render(
+            <Drawer isOpen={true} title="Test Drawer" from="top" onClose={vi.fn()}>
+                Content
+            </Drawer>,
+        );
+
+        await waitFor(() => {
+            expect(screen.getByRole('dialog')).toBeInTheDocument();
+        });
+    });
+
+    it('renders with from="bottom"', async () => {
+        render(
+            <Drawer isOpen={true} title="Test Drawer" from="bottom" onClose={vi.fn()}>
+                Content
+            </Drawer>,
+        );
+
+        await waitFor(() => {
+            expect(screen.getByRole('dialog')).toBeInTheDocument();
+        });
+    });
+
+    it('renders a bottom panel', async () => {
+        render(
+            <Drawer
+                isOpen={true}
+                title="Test Drawer"
+                onClose={vi.fn()}
+                bottomPanel={<button type="button">Save</button>}
+            >
+                Content
+            </Drawer>,
+        );
+
+        await waitFor(() => {
+            expect(screen.getAllByText('Save').length).toBeGreaterThan(0);
+        });
+    });
+
+    it('renders additional actions', async () => {
+        render(
+            <Drawer
+                isOpen={true}
+                title="Test Drawer"
+                onClose={vi.fn()}
+                additionalActions={<button type="button">Action</button>}
+            >
+                Content
+            </Drawer>,
+        );
+
+        await waitFor(() => {
+            expect(screen.getByText('Action')).toBeInTheDocument();
+        });
+    });
+
+    it('renders with blur overlay style', async () => {
+        render(
+            <Drawer isOpen={true} title="Test Drawer" overlayStyle="blur" onClose={vi.fn()}>
+                Content
+            </Drawer>,
+        );
+
+        await waitFor(() => {
+            expect(screen.getByRole('dialog')).toBeInTheDocument();
+        });
+    });
+
+    it('does not render when isOpen transitions from true to false', async () => {
+        const { rerender } = render(
+            <Drawer isOpen={true} title="Test Drawer" onClose={vi.fn()}>
+                Content
+            </Drawer>,
+        );
+
+        await waitFor(() => {
+            expect(screen.getByRole('dialog')).toBeInTheDocument();
+        });
+
+        rerender(
+            <Drawer isOpen={false} title="Test Drawer" onClose={vi.fn()}>
+                Content
+            </Drawer>,
+        );
+
+        await waitFor(() => {
+            expect(screen.queryByRole('dialog')).not.toBeInTheDocument();
+        });
+    });
+
+    it('accepts size presets', async () => {
+        render(
+            <Drawer isOpen={true} title="Test Drawer" size="full" onClose={vi.fn()}>
+                Content
+            </Drawer>,
+        );
+
+        await waitFor(() => {
+            expect(screen.getByRole('dialog')).toBeInTheDocument();
+        });
+    });
+
+    it('accepts custom size as CSSLength', async () => {
+        render(
+            <Drawer isOpen={true} title="Test Drawer" size="500px" onClose={vi.fn()}>
+                Content
+            </Drawer>,
+        );
+
+        await waitFor(() => {
+            expect(screen.getByRole('dialog')).toBeInTheDocument();
+        });
+    });
+
+    it('renders a ReactNode title', async () => {
+        render(
+            <Drawer isOpen={true} title={<span data-testid="custom-title">Custom Title</span>} onClose={vi.fn()}>
+                Content
+            </Drawer>,
+        );
+
+        await waitFor(() => {
+            expect(screen.getByTestId('custom-title')).toBeInTheDocument();
+        });
+    });
+});