@@ -6,12 +6,10 @@ import {
66 ComboboxLabel ,
77 ComboboxListbox ,
88 ComboboxOption ,
9- ComboboxPortal ,
109 ComboboxTrigger ,
1110 ResolvedOption ,
1211} from './index' ;
1312
14- import { QwikUIProvider } from '../qwik-ui-provider' ;
1513import './combobox-test.css' ;
1614import createFakeFruitsList from './combobox.faketory' ;
1715
@@ -24,51 +22,47 @@ const StringCombobox = component$(({ defaultLabel, ...props }: StringCombobox) =
2422
2523 return (
2624 < >
27- < QwikUIProvider >
28- < Combobox
29- options = { fruits }
30- defaultLabel = { defaultLabel && defaultLabel }
31- filter$ = { ( value : string , options ) =>
32- options . filter ( ( { option } ) => {
33- return option . toLowerCase ( ) . includes ( value . toLowerCase ( ) ) ;
34- } )
35- }
36- { ...props }
37- >
38- < ComboboxLabel > Fruits</ ComboboxLabel >
39- < ComboboxControl style = { { display : 'flex' } } >
40- < ComboboxInput />
41- < ComboboxTrigger data-testid = "trigger" >
42- < svg
43- xmlns = "http://www.w3.org/2000/svg"
44- viewBox = "0 0 24 24"
45- width = "20px"
46- style = "stroke: black"
47- stroke-width = "2"
48- stroke-linecap = "round"
49- stroke-linejoin = "round"
50- >
51- < polyline points = "6 9 12 15 18 9" > </ polyline >
52- </ svg >
53- </ ComboboxTrigger >
54- </ ComboboxControl >
55- < ComboboxPortal >
56- < ComboboxListbox
57- style = { { width : 'fit-content' } }
58- optionRenderer$ = { ( resolved : ResolvedOption , index : number ) => (
59- < ComboboxOption
60- key = { resolved . key }
61- class = "group rounded-sm border-2 border-transparent px-2 hover:bg-[#496080] aria-selected:border-[#abbbce] aria-selected:bg-[#496080]"
62- index = { index }
63- resolved = { resolved }
64- >
65- { resolved . label }
66- </ ComboboxOption >
67- ) }
68- />
69- </ ComboboxPortal >
70- </ Combobox >
71- </ QwikUIProvider >
25+ < Combobox
26+ options = { fruits }
27+ defaultLabel = { defaultLabel && defaultLabel }
28+ filter$ = { ( value : string , options ) =>
29+ options . filter ( ( { option } ) => {
30+ return option . toLowerCase ( ) . includes ( value . toLowerCase ( ) ) ;
31+ } )
32+ }
33+ { ...props }
34+ >
35+ < ComboboxLabel > Fruits</ ComboboxLabel >
36+ < ComboboxControl style = { { display : 'flex' } } >
37+ < ComboboxInput />
38+ < ComboboxTrigger data-testid = "trigger" >
39+ < svg
40+ xmlns = "http://www.w3.org/2000/svg"
41+ viewBox = "0 0 24 24"
42+ width = "20px"
43+ style = "stroke: black"
44+ stroke-width = "2"
45+ stroke-linecap = "round"
46+ stroke-linejoin = "round"
47+ >
48+ < polyline points = "6 9 12 15 18 9" > </ polyline >
49+ </ svg >
50+ </ ComboboxTrigger >
51+ </ ComboboxControl >
52+ < ComboboxListbox
53+ style = { { width : 'fit-content' } }
54+ optionRenderer$ = { ( resolved : ResolvedOption , index : number ) => (
55+ < ComboboxOption
56+ key = { resolved . key }
57+ class = "group rounded-sm border-2 border-transparent px-2 hover:bg-[#496080] aria-selected:border-[#abbbce] aria-selected:bg-[#496080]"
58+ index = { index }
59+ resolved = { resolved }
60+ >
61+ { resolved . label }
62+ </ ComboboxOption >
63+ ) }
64+ />
65+ </ Combobox >
7266 </ >
7367 ) ;
7468} ) ;
@@ -394,53 +388,49 @@ const DisabledCombobox = component$(() => {
394388
395389 return (
396390 < >
397- < QwikUIProvider >
398- < Combobox
399- options = { objectExample }
400- filter$ = { ( value : string , options ) =>
401- options . filter ( ( { option } ) => {
402- return option . testLabel . toLowerCase ( ) . includes ( value . toLowerCase ( ) ) ;
403- } )
404- }
405- optionLabelKey = "testLabel"
406- optionValueKey = "testValue"
407- optionDisabledKey = "disabled"
408- >
409- < ComboboxLabel > Fruits</ ComboboxLabel >
410- < ComboboxControl style = { { display : 'flex' } } >
411- < ComboboxInput />
412- < ComboboxTrigger data-testid = "trigger" >
413- < svg
414- xmlns = "http://www.w3.org/2000/svg"
415- viewBox = "0 0 24 24"
416- width = "20px"
417- style = "stroke: black"
418- stroke-width = "2"
419- stroke-linecap = "round"
420- stroke-linejoin = "round"
421- >
422- < polyline points = "6 9 12 15 18 9" > </ polyline >
423- </ svg >
424- </ ComboboxTrigger >
425- </ ComboboxControl >
426- < ComboboxPortal >
427- < ComboboxListbox
428- style = { { width : 'fit-content' } }
429- optionRenderer$ = { ( resolved : ResolvedOption , index : number ) => (
430- < ComboboxOption
431- key = { resolved . key }
432- class = "group rounded-sm border-2 border-transparent px-2 hover:bg-[#496080] aria-selected:border-[#abbbce] aria-selected:bg-[#496080]"
433- index = { index }
434- resolved = { resolved }
435- style = { { color : resolved . disabled ? 'gray' : undefined } }
436- >
437- { resolved . label }
438- </ ComboboxOption >
439- ) }
440- />
441- </ ComboboxPortal >
442- </ Combobox >
443- </ QwikUIProvider >
391+ < Combobox
392+ options = { objectExample }
393+ filter$ = { ( value : string , options ) =>
394+ options . filter ( ( { option } ) => {
395+ return option . testLabel . toLowerCase ( ) . includes ( value . toLowerCase ( ) ) ;
396+ } )
397+ }
398+ optionLabelKey = "testLabel"
399+ optionValueKey = "testValue"
400+ optionDisabledKey = "disabled"
401+ >
402+ < ComboboxLabel > Fruits</ ComboboxLabel >
403+ < ComboboxControl style = { { display : 'flex' } } >
404+ < ComboboxInput />
405+ < ComboboxTrigger data-testid = "trigger" >
406+ < svg
407+ xmlns = "http://www.w3.org/2000/svg"
408+ viewBox = "0 0 24 24"
409+ width = "20px"
410+ style = "stroke: black"
411+ stroke-width = "2"
412+ stroke-linecap = "round"
413+ stroke-linejoin = "round"
414+ >
415+ < polyline points = "6 9 12 15 18 9" > </ polyline >
416+ </ svg >
417+ </ ComboboxTrigger >
418+ </ ComboboxControl >
419+ < ComboboxListbox
420+ style = { { width : 'fit-content' } }
421+ optionRenderer$ = { ( resolved : ResolvedOption , index : number ) => (
422+ < ComboboxOption
423+ key = { resolved . key }
424+ class = "group rounded-sm border-2 border-transparent px-2 hover:bg-[#496080] aria-selected:border-[#abbbce] aria-selected:bg-[#496080]"
425+ index = { index }
426+ resolved = { resolved }
427+ style = { { color : resolved . disabled ? 'gray' : undefined } }
428+ >
429+ { resolved . label }
430+ </ ComboboxOption >
431+ ) }
432+ />
433+ </ Combobox >
444434 </ >
445435 ) ;
446436} ) ;
0 commit comments