Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 2 additions & 0 deletions .changeset/headless-primitives-batch.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,2 @@
---
---
29 changes: 29 additions & 0 deletions packages/headless/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,34 @@
"import": "./dist/primitives/accordion/index.js",
"types": "./dist/primitives/accordion/index.d.ts"
},
"./tabs": {
"import": "./dist/primitives/tabs/index.js",
"types": "./dist/primitives/tabs/index.d.ts"
},
"./tooltip": {
"import": "./dist/primitives/tooltip/index.js",
"types": "./dist/primitives/tooltip/index.d.ts"
},
"./popover": {
"import": "./dist/primitives/popover/index.js",
"types": "./dist/primitives/popover/index.d.ts"
},
"./select": {
"import": "./dist/primitives/select/index.js",
"types": "./dist/primitives/select/index.d.ts"
},
"./menu": {
"import": "./dist/primitives/menu/index.js",
"types": "./dist/primitives/menu/index.d.ts"
},
"./autocomplete": {
"import": "./dist/primitives/autocomplete/index.js",
"types": "./dist/primitives/autocomplete/index.d.ts"
},
"./collapsible": {
"import": "./dist/primitives/collapsible/index.js",
"types": "./dist/primitives/collapsible/index.d.ts"
},
"./dialog": {
"import": "./dist/primitives/dialog/index.js",
"types": "./dist/primitives/dialog/index.d.ts"
Expand Down Expand Up @@ -42,6 +70,7 @@
"happy-dom": "^18.0.1",
"react": "catalog:react",
"react-dom": "catalog:react",
"rollup-plugin-preserve-directives": "^0.4.0",
"typescript": "catalog:repo",
"vite": "6.4.2",
"vite-plugin-dts": "^4.5.4",
Expand Down
236 changes: 236 additions & 0 deletions packages/headless/src/__tests__/floating-tree.test.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,236 @@
import { cleanup, render, screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import { afterEach, describe, expect, it } from 'vitest';

import { Dialog } from '../primitives/dialog/index';
import { Popover } from '../primitives/popover/index';
import { Select } from '../primitives/select/index';
import { Tooltip } from '../primitives/tooltip/index';

afterEach(() => {
cleanup();
});

const fruits = [
{ value: 'apple', label: 'Apple' },
{ value: 'banana', label: 'Banana' },
{ value: 'cherry', label: 'Cherry' },
];

describe('FloatingTree integration', () => {
describe('Select inside Popover', () => {
function SelectInPopover() {
return (
<Popover.Root>
Comment thread
alexcarpenter marked this conversation as resolved.
<Popover.Trigger>Open Popover</Popover.Trigger>
<Popover.Positioner>
<Popover.Popup>
<Popover.Title>Pick a fruit</Popover.Title>
<Select.Root>
<Select.Trigger>
<Select.Value placeholder='Choose...' />
</Select.Trigger>
<Select.Positioner>
<Select.Popup>
{fruits.map(f => (
<Select.Option
key={f.value}
value={f.value}
label={f.label}
>
{f.label}
</Select.Option>
))}
</Select.Popup>
</Select.Positioner>
</Select.Root>
</Popover.Popup>
</Popover.Positioner>
</Popover.Root>
);
}

it('popover stays open when select dropdown opens', async () => {
const user = userEvent.setup();
render(<SelectInPopover />);

await user.click(screen.getByText('Open Popover'));
expect(screen.getByText('Pick a fruit')).toBeInTheDocument();

await user.click(screen.getByText('Choose...'));

// Popover should still be open
expect(screen.getByText('Pick a fruit')).toBeInTheDocument();
// Select dropdown should be visible
expect(screen.getByText('Apple')).toBeInTheDocument();
});

it('popover stays open when clicking select option', async () => {
const user = userEvent.setup();
render(<SelectInPopover />);

await user.click(screen.getByText('Open Popover'));
await user.click(screen.getByText('Choose...'));
await user.click(screen.getByText('Banana'));

// Popover should still be open after selecting
expect(screen.getByText('Pick a fruit')).toBeInTheDocument();
});
});

describe('Select inside Dialog', () => {
function SelectInDialog() {
return (
<Dialog.Root>
<Dialog.Trigger>Open Dialog</Dialog.Trigger>
<Dialog.Backdrop>
<Dialog.Popup>
<Dialog.Title>Select a fruit</Dialog.Title>
<Select.Root>
<Select.Trigger>
<Select.Value placeholder='Choose...' />
</Select.Trigger>
<Select.Positioner>
<Select.Popup>
{fruits.map(f => (
<Select.Option
key={f.value}
value={f.value}
label={f.label}
>
{f.label}
</Select.Option>
))}
</Select.Popup>
</Select.Positioner>
</Select.Root>
</Dialog.Popup>
</Dialog.Backdrop>
</Dialog.Root>
);
}

it('dialog stays open when select dropdown opens', async () => {
const user = userEvent.setup();
render(<SelectInDialog />);

await user.click(screen.getByText('Open Dialog'));
expect(screen.getByText('Select a fruit')).toBeInTheDocument();

await user.click(screen.getByText('Choose...'));

// Dialog should still be open
expect(screen.getByText('Select a fruit')).toBeInTheDocument();
// Select options visible
expect(screen.getByText('Apple')).toBeInTheDocument();
});
});

describe('Popover inside Popover', () => {
function NestedPopover() {
return (
<Popover.Root>
<Popover.Trigger>Outer</Popover.Trigger>
<Popover.Positioner>
<Popover.Popup>
<Popover.Title>Outer Content</Popover.Title>
<Popover.Root>
<Popover.Trigger>Inner</Popover.Trigger>
<Popover.Positioner>
<Popover.Popup>
<Popover.Title>Inner Content</Popover.Title>
</Popover.Popup>
</Popover.Positioner>
</Popover.Root>
</Popover.Popup>
</Popover.Positioner>
</Popover.Root>
);
}

it('outer popover stays open when inner popover opens', async () => {
const user = userEvent.setup();
render(<NestedPopover />);

await user.click(screen.getByText('Outer'));
expect(screen.getByText('Outer Content')).toBeInTheDocument();

await user.click(screen.getByText('Inner'));

// Both should be visible
expect(screen.getByText('Outer Content')).toBeInTheDocument();
expect(screen.getByText('Inner Content')).toBeInTheDocument();
});
});

describe('Tooltip inside Popover', () => {
function TooltipInPopover() {
return (
<Popover.Root>
<Popover.Trigger>Open Popover</Popover.Trigger>
<Popover.Positioner>
<Popover.Popup>
<Popover.Title>Content</Popover.Title>
<Tooltip.Root>
<Tooltip.Trigger>Hover me</Tooltip.Trigger>
<Tooltip.Positioner>
<Tooltip.Popup>Tooltip text</Tooltip.Popup>
</Tooltip.Positioner>
</Tooltip.Root>
</Popover.Popup>
</Popover.Positioner>
</Popover.Root>
);
}

it('popover stays open when tooltip trigger is hovered', async () => {
const user = userEvent.setup();
render(<TooltipInPopover />);

await user.click(screen.getByText('Open Popover'));
expect(screen.getByText('Content')).toBeInTheDocument();

await user.hover(screen.getByText('Hover me'));

// Popover should remain open
expect(screen.getByText('Content')).toBeInTheDocument();
});
});

describe('Popover inside Dialog', () => {
function PopoverInDialog() {
return (
<Dialog.Root>
<Dialog.Trigger>Open Dialog</Dialog.Trigger>
<Dialog.Backdrop>
<Dialog.Popup>
<Dialog.Title>Dialog Content</Dialog.Title>
<Popover.Root>
<Popover.Trigger>Open Popover</Popover.Trigger>
<Popover.Positioner>
<Popover.Popup>
<Popover.Title>Popover Content</Popover.Title>
</Popover.Popup>
</Popover.Positioner>
</Popover.Root>
</Dialog.Popup>
</Dialog.Backdrop>
</Dialog.Root>
);
}

it('dialog stays open when popover opens inside it', async () => {
const user = userEvent.setup();
render(<PopoverInDialog />);

await user.click(screen.getByText('Open Dialog'));
expect(screen.getByText('Dialog Content')).toBeInTheDocument();

await user.click(screen.getByText('Open Popover'));

// Both should be visible
expect(screen.getByText('Dialog Content')).toBeInTheDocument();
expect(screen.getByText('Popover Content')).toBeInTheDocument();
});
});
});
Loading
Loading