feat(combobox): new selectedIndex bind, minor bug fixes

Author: thejackshelton

.changeset/honest-timers-dream.md

@@ -0,0 +1,5 @@
+---
+'@qwik-ui/headless': patch
+---
+
+bind syntax Sig suffix removed, new bind:selectedIndex prop, bug fixes

apps/website/src/routes/docs/headless/combobox/examples/hero.tsx

@@ -54,7 +54,7 @@ export default component$(() => {
           <ComboboxIcon class="stroke-white transition-transform duration-[450ms] group-aria-expanded:-rotate-180" />
         </ComboboxTrigger>
       </ComboboxControl>
-      <ComboboxPopover gutter={8}>
+      <ComboboxPopover class="rounded-sm" gutter={8}>
         <ComboboxListbox
           class="rounded-sm border-[1px] border-slate-400 bg-slate-900 px-4 py-2"
           optionRenderer$={(option: ResolvedOption, index: number) => {
@@ -67,7 +67,7 @@ export default component$(() => {
                 class="aria-disabled:text-muted-foreground data-[highlighted]:border-border group flex justify-between gap-4 rounded-sm border border-transparent px-2 text-white aria-disabled:font-light aria-disabled:hover:border-slate-500 data-[highlighted]:cursor-pointer data-[highlighted]:bg-slate-800"
               >
                 <span>{myData.testLabel}</span>
-                <span>{selectedOptionIndexSig.value === index ? 'Selected' : ''} </span>
+                {selectedOptionIndexSig.value === index && <span>Selected</span>}
               </ComboboxOption>
             );
           }}

apps/website/src/routes/docs/headless/combobox/examples/highlighted-index.tsx

@@ -28,7 +28,7 @@ export default component$(() => {
       <Combobox
         class="w-fit"
         options={highlightedExample}
-        bind:highlightedIndexSig={highlightedIndexSig}
+        bind:highlightedIndex={highlightedIndexSig}
       >
         <ComboboxControl class="relative flex items-center rounded-sm border">
           <ComboboxInput class="px-d2 bg-background placeholder:text-muted-foreground w-fit rounded-sm px-2 pr-6" />

apps/website/src/routes/docs/headless/combobox/examples/placement.tsx

@@ -33,7 +33,7 @@ export default component$(() => {
         class="w-fit"
         options={placementExample}
         optionDisabledKey="myDisabledKey"
-        bind:inputValueSig={inputValueSig}
+        bind:inputValue={inputValueSig}
       >
         <ComboboxLabel>Positions</ComboboxLabel>
         <ComboboxControl class="relative mt-2 flex items-center rounded-sm border">

apps/website/src/routes/docs/headless/combobox/examples/search-bar.tsx

@@ -38,9 +38,9 @@ export default component$(() => {
 
   return (
     <Combobox
-      bind:inputValueSig={inputValueSig}
-      bind:highlightedIndexSig={highlightedIndexSig}
-      bind:isListboxOpenSig={isListboxOpenSig}
+      bind:inputValue={inputValueSig}
+      bind:highlightedIndex={highlightedIndexSig}
+      bind:isListboxOpen={isListboxOpenSig}
       optionValueKey="component"
       class="w-fit"
       options={components}

apps/website/src/routes/docs/headless/combobox/examples/shift.tsx

@@ -26,7 +26,7 @@ export default component$(() => {
         <Combobox
           class="w-fit"
           options={shiftExample}
-          bind:isListboxOpenSig={isListboxOpenSig}
+          bind:isListboxOpen={isListboxOpenSig}
         >
           <ComboboxLabel class=" font-semibold">Fruits 🍓</ComboboxLabel>
           <ComboboxControl class="relative flex items-center rounded-sm border">

apps/website/src/routes/docs/headless/combobox/examples/signal-binds.tsx

@@ -30,8 +30,8 @@ export default component$(() => {
         <Combobox
           class="w-fit"
           options={signalsExample}
-          bind:isListboxOpenSig={isListboxOpenSig}
-          bind:highlightedIndexSig={highlightedIndexSig}
+          bind:isListboxOpen={isListboxOpenSig}
+          bind:highlightedIndex={highlightedIndexSig}
         >
           <ComboboxControl class="relative flex items-center rounded-sm border">
             <ComboboxInput

apps/website/src/routes/docs/headless/combobox/index.mdx

@@ -70,8 +70,8 @@ Qwik UI's Combobox implementation follows the [WAI-Aria Combobox specifications]
       description: `A button that toggles the corresponding listbox when clicked.`,
     },
     {
-      name: 'ComboboxPortal',
-      description: `A portal component that teleports the children outside its parent when the listbox state is open.`,
+      name: 'ComboboxPopover',
+      description: `A Popover component that teleports the children outside its parent when the listbox state is open.`,
     },
     {
       name: 'ComboboxListbox',
@@ -170,29 +170,34 @@ To disable this behavior, set `disableOnBlur={true}` on the Input.
 
 The Combobox component allows you to customize its state signals. This can be useful if you want to control or observe these states externally.
 
-This involves creating a signal and passing it in using the [bind syntax](https://qwik.builder.io/docs/components/rendering/#bind-attribute), such as in the Qwik docs.
+In reality it is a signal prop, we prefer using this syntax, because we believe it is familiar to Qwik developers with the [bind syntax](https://qwik.builder.io/docs/components/rendering/#bind-attribute).
 
 <APITable
   propDescriptors={[
     {
-      name: 'bind:isListboxOpenSig',
+      name: 'bind:inputValue',
       type: 'Signal',
-      description: 'Controls the open state of the listbox.',
+      description: 'Controls the current value of the input.',
     },
     {
-      name: 'bind:isInputFocusedSig',
+      name: 'bind:selectedIndex',
       type: 'Signal',
-      description: 'Controls the focus state of the input.',
+      description: 'Controls the selected option index.',
     },
     {
-      name: 'bind:highlightedIndexSig',
+      name: 'bind:isListboxOpen',
       type: 'Signal',
-      description: 'Controls which option is highlighted.',
+      description: 'Controls the open state of the listbox.',
     },
     {
-      name: 'bind:inputValueSig',
+      name: 'bind:isInputFocused',
       type: 'Signal',
-      description: 'Controls the current value of the input.',
+      description: 'Controls the focus state of the input.',
+    },
+    {
+      name: 'bind:highlightedIndex',
+      type: 'Signal',
+      description: 'Controls which option is highlighted.',
     },
   ]}
 />
@@ -298,22 +303,27 @@ The Combobox component API provides a set of properties that allow you to custom
       description: 'The default label for the combobox.',
     },
     {
-      name: 'bind:isListboxOpenSig',
+      name: 'bind:selectedIndex',
+      type: `Signal<number>`,
+      description: 'A signal for the selected option index.',
+    },
+    {
+      name: 'bind:isListboxOpen',
       type: `Signal<boolean>`,
       description: 'A signal for the open state of the listbox.',
     },
     {
-      name: 'bind:isInputFocusedSig',
+      name: 'bind:isInputFocused',
       type: 'Signal<boolean>',
       description: 'A signal for the focus state of the input.',
     },
     {
-      name: 'bind:inputValueSig',
+      name: 'bind:inputValue',
       type: 'Signal<string>',
       description: 'A signal for the current value of the input.',
     },
     {
-      name: 'bind:highlightedIndexSig',
+      name: 'bind:highlightedIndex',
       type: 'Signal<number>',
       description: 'A signal for the highlighted option index.',
     },

packages/kit-headless/src/components/combobox/combobox-context.type.ts

@@ -21,7 +21,7 @@ export interface ComboboxContext<O extends Option = Option> {
   isInputFocusedSig: Signal<boolean | undefined>;
   isListboxOpenSig: Signal<boolean | undefined>;
   highlightedIndexSig: Signal<number>;
-  selectedOptionIndexSig: Signal<number>;
+  selectedIndexSig: Signal<number>;
 
   // option settings
   optionValueKey: string;

packages/kit-headless/src/components/combobox/combobox-input.tsx

@@ -72,7 +72,7 @@ export const ComboboxInput = component$(
 
       if (e.key === 'Enter') {
         context.isListboxOpenSig.value = false;
-        context.selectedOptionIndexSig.value = context.highlightedIndexSig.value;
+        context.selectedIndexSig.value = context.highlightedIndexSig.value;
 
         // if they somehow manage to highlight a disabled option (bug)
         if (