Skip to content

Commit 3a6e457

Browse files
thejacksheltonthejackshelton
authored
Merge pull request #636 from thejackshelton/feat/select
Select: Top layer behavior
2 parents a3a2489 + ed34a92 commit 3a6e457

28 files changed

+352
-198
lines changed

‎apps/website/src/routes/docs/headless/contributing/index.mdx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -78,8 +78,8 @@ What I like to do is look at other places around the web and see how things work
7878

7979
We also take inspiration from awesome headless libraries in other communities. For example, like the popular headless libraries below:
8080

81-
- [Radix UI](https://www.radix-ui.com/primitives/docs/components/accordion) is a React Headless library.
8281
- [React Aria](https://react-spectrum.adobe.com/react-aria/components.html) is a React Headless library.
82+
- [Radix UI](https://www.radix-ui.com/primitives/docs/components/accordion) is a React Headless library.
8383
- [Melt UI](https://melt-ui.com/docs/builders/accordion) is a Svelte headless library.
8484
- [Kobalte](https://kobalte.dev/docs/core/components/accordion) is a Solid JS headless library
8585
- [Headless UI](https://headlessui.com/) is a React and Vue headless library.
@@ -262,7 +262,7 @@ Absolutely, documentation is a critical part of the project, and something that
262262

263263
## Where should I learn the Qwik parts?
264264

265-
If you find yourself stuck on a certain pattern, try taking a look through Qwik UI beta components. For example, the [modal component](https://github.com/qwikifiers/qwik-ui/tree/main/packages/kit-headless/src/components/modal) would be a good one to look through.
265+
If you find yourself stuck on a certain pattern, try taking a look through Qwik UI beta components. For example, the [select component](https://github.com/qwikifiers/qwik-ui/tree/main/packages/kit-headless/src/components/select) would be a good one to look through.
266266

267267
We're also happy to help! We love experimenting with things and having a blast while doing it.
268268

‎apps/website/src/routes/docs/headless/select/examples/add-users.tsx‎

Lines changed: 10 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import { $, component$, useSignal, useStyles$ } from '@builder.io/qwik';
22
import {
33
Select,
4+
SelectPopover,
45
SelectListbox,
56
SelectOption,
67
SelectTrigger,
@@ -19,13 +20,15 @@ export default component$(() => {
1920
<SelectTrigger class="select-trigger">
2021
<SelectValue placeholder="Select an option" />
2122
</SelectTrigger>
22-
<SelectListbox class="select-listbox">
23-
{usersSig.value.map((user) => (
24-
<SelectOption class="select-option" key={user}>
25-
{user}
26-
</SelectOption>
27-
))}
28-
</SelectListbox>
23+
<SelectPopover class="select-popover">
24+
<SelectListbox class="select-listbox">
25+
{usersSig.value.map((user) => (
26+
<SelectOption class="select-option" key={user}>
27+
{user}
28+
</SelectOption>
29+
))}
30+
</SelectListbox>
31+
</SelectPopover>
2932
</Select>
3033
<button
3134
onClick$={$(() => {

‎apps/website/src/routes/docs/headless/select/examples/change-value.tsx‎

Lines changed: 10 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import { $, component$, useSignal, useStyles$ } from '@builder.io/qwik';
22
import {
33
Select,
4+
SelectPopover,
45
SelectListbox,
56
SelectOption,
67
SelectTrigger,
@@ -22,13 +23,15 @@ export default component$(() => {
2223
<SelectTrigger class="select-trigger">
2324
<SelectValue placeholder="Select an option" />
2425
</SelectTrigger>
25-
<SelectListbox class="select-listbox">
26-
{users.map((user) => (
27-
<SelectOption class="select-option" key={user}>
28-
{user}
29-
</SelectOption>
30-
))}
31-
</SelectListbox>
26+
<SelectPopover class="select-popover">
27+
<SelectListbox class="select-listbox">
28+
{users.map((user) => (
29+
<SelectOption class="select-option" key={user}>
30+
{user}
31+
</SelectOption>
32+
))}
33+
</SelectListbox>
34+
</SelectPopover>
3235
</Select>
3336
<p>You have changed {counter.value} times</p>
3437
</>

‎apps/website/src/routes/docs/headless/select/examples/controlled-value.tsx‎

Lines changed: 10 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import { $, component$, useSignal, useStyles$ } from '@builder.io/qwik';
22
import {
33
Select,
4+
SelectPopover,
45
SelectListbox,
56
SelectOption,
67
SelectTrigger,
@@ -24,13 +25,15 @@ export default component$(() => {
2425
<SelectTrigger class="select-trigger">
2526
<SelectValue placeholder="Select an option" />
2627
</SelectTrigger>
27-
<SelectListbox class="select-listbox">
28-
{users.map((user, index) => (
29-
<SelectOption value={index.toString()} class="select-option" key={user}>
30-
{user}
31-
</SelectOption>
32-
))}
33-
</SelectListbox>
28+
<SelectPopover class="select-popover">
29+
<SelectListbox class="select-listbox">
30+
{users.map((user, index) => (
31+
<SelectOption value={index.toString()} class="select-option" key={user}>
32+
{user}
33+
</SelectOption>
34+
))}
35+
</SelectListbox>
36+
</SelectPopover>
3437
</Select>
3538
<button onClick$={$(() => (selected.value = '4'))}>Change to Abby</button>
3639
</>

‎apps/website/src/routes/docs/headless/select/examples/controlled.tsx‎

Lines changed: 10 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import { $, component$, useSignal, useStyles$ } from '@builder.io/qwik';
22
import {
33
Select,
4+
SelectPopover,
45
SelectListbox,
56
SelectOption,
67
SelectTrigger,
@@ -16,7 +17,6 @@ export default component$(() => {
1617
<>
1718
<Select
1819
onChange$={$((value: string) => {
19-
console.log('value: ', value);
2020
selected.value = value;
2121
})}
2222
bind:value={selected}
@@ -25,13 +25,15 @@ export default component$(() => {
2525
<SelectTrigger class="select-trigger">
2626
<SelectValue placeholder="Select an option" />
2727
</SelectTrigger>
28-
<SelectListbox class="select-listbox">
29-
{users.map((user) => (
30-
<SelectOption class="select-option" key={user}>
31-
{user}
32-
</SelectOption>
33-
))}
34-
</SelectListbox>
28+
<SelectPopover class="select-popover">
29+
<SelectListbox class="select-listbox">
30+
{users.map((user) => (
31+
<SelectOption class="select-option" key={user}>
32+
{user}
33+
</SelectOption>
34+
))}
35+
</SelectListbox>
36+
</SelectPopover>
3537
</Select>
3638
<p>Your favorite user is: {selected.value}</p>
3739
</>

‎apps/website/src/routes/docs/headless/select/examples/disabled.tsx‎

Lines changed: 16 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import { component$, useStyles$ } from '@builder.io/qwik';
22
import {
33
Select,
4+
SelectPopover,
45
SelectListbox,
56
SelectOption,
67
SelectTrigger,
@@ -18,19 +19,21 @@ export default component$(() => {
1819
<SelectTrigger class="select-trigger">
1920
<SelectValue placeholder="Select an option" />
2021
</SelectTrigger>
21-
<SelectListbox class="select-listbox">
22-
{users.map((user, index) => (
23-
<SelectOption
24-
class="select-option"
25-
key={user}
26-
disabled={
27-
index === 0 || index === 2 || index === users.length - 1 ? true : false
28-
}
29-
>
30-
{user}
31-
</SelectOption>
32-
))}
33-
</SelectListbox>
22+
<SelectPopover class="select-popover">
23+
<SelectListbox class="select-listbox">
24+
{users.map((user, index) => (
25+
<SelectOption
26+
class="select-option"
27+
key={user}
28+
disabled={
29+
index === 0 || index === 2 || index === users.length - 1 ? true : false
30+
}
31+
>
32+
{user}
33+
</SelectOption>
34+
))}
35+
</SelectListbox>
36+
</SelectPopover>
3437
</Select>
3538
);
3639
});

‎apps/website/src/routes/docs/headless/select/examples/group.tsx‎

Lines changed: 21 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import { component$, useStyles$ } from '@builder.io/qwik';
22
import {
33
Select,
4+
SelectPopover,
45
SelectGroup,
56
SelectLabel,
67
SelectListbox,
@@ -20,24 +21,26 @@ export default component$(() => {
2021
<SelectTrigger class="select-trigger">
2122
<SelectValue placeholder="Select an option" />
2223
</SelectTrigger>
23-
<SelectListbox class="select-listbox">
24-
<SelectGroup>
25-
<SelectLabel class="select-label">People</SelectLabel>
26-
{users.map((user) => (
27-
<SelectOption class="select-option" key={user}>
28-
{user}
29-
</SelectOption>
30-
))}
31-
</SelectGroup>
32-
<SelectGroup>
33-
<SelectLabel class="select-label">Animals</SelectLabel>
34-
{animals.map((animal) => (
35-
<SelectOption class="select-option" key={animal}>
36-
{animal}
37-
</SelectOption>
38-
))}
39-
</SelectGroup>
40-
</SelectListbox>
24+
<SelectPopover class="select-popover">
25+
<SelectListbox class="select-listbox">
26+
<SelectGroup>
27+
<SelectLabel class="select-label">People</SelectLabel>
28+
{users.map((user) => (
29+
<SelectOption class="select-option" key={user}>
30+
{user}
31+
</SelectOption>
32+
))}
33+
</SelectGroup>
34+
<SelectGroup>
35+
<SelectLabel class="select-label">Animals</SelectLabel>
36+
{animals.map((animal) => (
37+
<SelectOption class="select-option" key={animal}>
38+
{animal}
39+
</SelectOption>
40+
))}
41+
</SelectGroup>
42+
</SelectListbox>
43+
</SelectPopover>
4144
</Select>
4245
);
4346
});

‎apps/website/src/routes/docs/headless/select/examples/hero.tsx‎

Lines changed: 10 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import { component$, useStyles$ } from '@builder.io/qwik';
22
import {
33
Select,
4+
SelectPopover,
45
SelectListbox,
56
SelectOption,
67
SelectTrigger,
@@ -17,13 +18,15 @@ export default component$(() => {
1718
<SelectTrigger class="select-trigger">
1819
<SelectValue placeholder="Select an option" />
1920
</SelectTrigger>
20-
<SelectListbox class="select-listbox">
21-
{users.map((user) => (
22-
<SelectOption class="select-option" key={user}>
23-
{user}
24-
</SelectOption>
25-
))}
26-
</SelectListbox>
21+
<SelectPopover class="select-popover">
22+
<SelectListbox class="select-listbox">
23+
{users.map((user) => (
24+
<SelectOption class="select-option" key={user}>
25+
{user}
26+
</SelectOption>
27+
))}
28+
</SelectListbox>
29+
</SelectPopover>
2730
</Select>
2831
);
2932
});

‎apps/website/src/routes/docs/headless/select/examples/loop.tsx‎

Lines changed: 10 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import { component$, useStyles$ } from '@builder.io/qwik';
22
import {
33
Select,
4+
SelectPopover,
45
SelectListbox,
56
SelectOption,
67
SelectTrigger,
@@ -17,13 +18,15 @@ export default component$(() => {
1718
<SelectTrigger class="select-trigger">
1819
<SelectValue placeholder="Select an option" />
1920
</SelectTrigger>
20-
<SelectListbox class="select-listbox">
21-
{users.map((user) => (
22-
<SelectOption class="select-option" key={user}>
23-
{user}
24-
</SelectOption>
25-
))}
26-
</SelectListbox>
21+
<SelectPopover class="select-popover">
22+
<SelectListbox class="select-listbox">
23+
{users.map((user) => (
24+
<SelectOption class="select-option" key={user}>
25+
{user}
26+
</SelectOption>
27+
))}
28+
</SelectListbox>
29+
</SelectPopover>
2730
</Select>
2831
);
2932
});

‎apps/website/src/routes/docs/headless/select/examples/open-change.tsx‎

Lines changed: 17 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import { $, component$, useSignal, useStyles$ } from '@builder.io/qwik';
22
import {
33
Select,
4+
SelectPopover,
45
SelectListbox,
56
SelectOption,
67
SelectTrigger,
@@ -10,27 +11,32 @@ import styles from './select.css?inline';
1011
export default component$(() => {
1112
useStyles$(styles);
1213
const users = ['Tim', 'Ryan', 'Jim', 'Jessie', 'Abby'];
13-
const openChangeSig = useSignal(0);
14+
const changeCount = useSignal(0);
15+
const isOpen = useSignal(false);
1416

15-
const handleOpenChange$ = $((): void => {
16-
openChangeSig.value++;
17+
const handleOpenChange$ = $((open: boolean): void => {
18+
isOpen.value = open;
19+
changeCount.value++;
1720
});
1821

1922
return (
2023
<>
24+
<span>It is currently: {isOpen.value ? 'open' : 'closed'}</span>
2125
<Select onOpenChange$={handleOpenChange$} class="select">
2226
<SelectTrigger class="select-trigger">
2327
<SelectValue placeholder="Select an option" />
2428
</SelectTrigger>
25-
<SelectListbox class="select-listbox">
26-
{users.map((user) => (
27-
<SelectOption class="select-option" key={user}>
28-
{user}
29-
</SelectOption>
30-
))}
31-
</SelectListbox>
29+
<SelectPopover class="select-popover">
30+
<SelectListbox class="select-listbox">
31+
{users.map((user) => (
32+
<SelectOption class="select-option" key={user}>
33+
{user}
34+
</SelectOption>
35+
))}
36+
</SelectListbox>
37+
</SelectPopover>
3238
</Select>
33-
<p>The listbox opened and closed {openChangeSig.value} time(s)</p>
39+
<p>The listbox opened and closed {changeCount.value} time(s)</p>
3440
</>
3541
);
3642
});

0 commit comments

Comments
 (0)